sonatype · entroform · Dec 19, 2022 · Dec 20, 2022 · Dec 20, 2022 · Dec 20, 2022
diff --git a/gallery/package.json b/gallery/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@sonatype/react-shared-components-gallery",
- "version": "12.10.3",
+ "version": "12.10.8",
  "description": "Gallery application to demonstrate usage and look of Sonatype shared UI components",
  "main": "src/main.ts",
  "scripts": {

diff --git a/gallery/src/components/NxTree/NxTreeCollapsibleExample.tsx b/gallery/src/components/NxTree/NxTreeCollapsibleExample.tsx
@@ -63,7 +63,7 @@ export default function NxTreeCollapsibleExample() {
  onActivate={() => document.getElementById('images-link')?.click()}>
  <NxTree.ItemLabel>
  <NxFontAwesomeIcon fixedWidth icon={faFolderOpen} />
- <NxTextLink id="images-link" onClick={() => { alert('images'); }}>
+ <NxTextLink href={catImagePath} id="images-link" newTab tabIndex={-1}>
  images
  </NxTextLink>
  </NxTree.ItemLabel>

diff --git a/...shots__/nx-breadcrumb-js-nx-breadcrumb-looks-right-with-a-narrow-dropdown-1.png b/...shots__/nx-breadcrumb-js-nx-breadcrumb-looks-right-with-a-narrow-dropdown-1.png
diff --git a/...apshots__/nx-breadcrumb-js-nx-breadcrumb-looks-right-with-a-wide-dropdown-1.png b/...apshots__/nx-breadcrumb-js-nx-breadcrumb-looks-right-with-a-wide-dropdown-1.png
diff --git a/.../nx-breadcrumb-js-nx-breadcrumb-shows-overflow-tooltips-on-dropdown-links-1.png b/.../nx-breadcrumb-js-nx-breadcrumb-shows-overflow-tooltips-on-dropdown-links-1.png
diff --git a/...ton-js-nx-button-classname-disabled-nx-button-looks-disabled-when-clicked-1.png b/...ton-js-nx-button-classname-disabled-nx-button-looks-disabled-when-clicked-1.png
diff --git a/...-nx-button-has-a-light-blue-border-and-light-blue-background-when-clicked-1.png b/...-nx-button-has-a-light-blue-border-and-light-blue-background-when-clicked-1.png
diff --git a/...-button-js-nx-button-primary-nx-button-has-a-dark-background-when-hovered-1.png b/...-button-js-nx-button-primary-nx-button-has-a-dark-background-when-hovered-1.png
diff --git a/...has-a-light-blue-border-and-dark-blue-background-when-focused-and-hovered-1.png b/...has-a-light-blue-border-and-dark-blue-background-when-focused-and-hovered-1.png
diff --git a/...-nx-button-has-a-light-blue-border-and-light-blue-background-when-clicked-1.png b/...-nx-button-has-a-light-blue-border-and-light-blue-background-when-clicked-1.png
diff --git a/...utton-js-nx-button-primary-nx-button-has-a-light-blue-border-when-focused-1.png b/...utton-js-nx-button-primary-nx-button-has-a-light-blue-border-when-focused-1.png
diff --git a/...-does-not-close-the-collapsible-items-when-the-action-content-is-expanded-1.png b/...-does-not-close-the-collapsible-items-when-the-action-content-is-expanded-1.png
diff --git a/...ht-when-the-icon-dropdown-is-expanded-and-the-collapsible-items-is-closed-1.png b/...ht-when-the-icon-dropdown-is-expanded-and-the-collapsible-items-is-closed-1.png
diff --git a/...-icon-dropdown-when-open-has-a-dark-grey-button-border-with-expanded-menu-1.png b/...-icon-dropdown-when-open-has-a-dark-grey-button-border-with-expanded-menu-1.png
diff --git a/...ts/__image_snapshots__/nx-modal-js-nx-modal-stacked-nx-modals-looks-right-1.png b/...ts/__image_snapshots__/nx-modal-js-nx-modal-stacked-nx-modals-looks-right-1.png
diff --git a/...mary-nx-button-dropdown-section-has-a-darker-blue-background-when-hovered-1.png b/...mary-nx-button-dropdown-section-has-a-darker-blue-background-when-hovered-1.png
diff --git a/...n-primary-nx-button-dropdown-section-has-a-light-blue-border-when-focused-1.png b/...n-primary-nx-button-dropdown-section-has-a-light-blue-border-when-focused-1.png
diff --git a/...ary-nx-button-dropdown-section-has-a-lighter-blue-background-when-clicked-1.png b/...ary-nx-button-dropdown-section-has-a-lighter-blue-background-when-clicked-1.png
diff --git a/...-primary-nx-button-main-section-has-a-darker-blue-background-when-hovered-1.png b/...-primary-nx-button-main-section-has-a-darker-blue-background-when-hovered-1.png
diff --git a/...utton-primary-nx-button-main-section-has-a-light-blue-border-when-focused-1.png b/...utton-primary-nx-button-main-section-has-a-light-blue-border-when-focused-1.png
diff --git a/...primary-nx-button-main-section-has-a-lighter-blue-background-when-clicked-1.png b/...primary-nx-button-main-section-has-a-lighter-blue-background-when-clicked-1.png
diff --git a/...wn-section-has-a-light-blue-border-and-light-blue-background-when-clicked-1.png b/...wn-section-has-a-light-blue-border-and-light-blue-background-when-clicked-1.png
diff --git a/...in-section-has-a-light-blue-border-and-light-blue-background-when-clicked-1.png b/...in-section-has-a-light-blue-border-and-light-blue-background-when-clicked-1.png
diff --git a/...-move-icons-doesnt-render-a-move-icon-when-on-item-change-is-not-provided-1.png b/...-move-icons-doesnt-render-a-move-icon-when-on-item-change-is-not-provided-1.png
diff --git a/...ders-a-plus-icon-when-on-item-change-is-provided-but-is-selected-is-false-1.png b/...ders-a-plus-icon-when-on-item-change-is-provided-but-is-selected-is-false-1.png
diff --git a/...renders-an-x-icon-when-on-item-change-is-provided-and-is-selected-is-true-1.png b/...renders-an-x-icon-when-on-item-change-is-provided-and-is-selected-is-true-1.png
diff --git a/...shots__/nx-tree-js-nx-tree-looks-right-when-a-collapse-control-is-clicked-1.png b/...shots__/nx-tree-js-nx-tree-looks-right-when-a-collapse-control-is-clicked-1.png
diff --git a/..._image_snapshots__/nx-tree-js-nx-tree-looks-right-when-an-item-is-focused-1.png b/..._image_snapshots__/nx-tree-js-nx-tree-looks-right-when-an-item-is-focused-1.png
diff --git a/...s__/nx-tree-js-nx-tree-looks-right-with-a-single-top-entry-and-collapsing-1.png b/...s__/nx-tree-js-nx-tree-looks-right-with-a-single-top-entry-and-collapsing-1.png
diff --git a/..._/nx-tree-js-nx-tree-looks-right-with-some-collapsible-elements-collapsed-1.png b/..._/nx-tree-js-nx-tree-looks-right-with-some-collapsible-elements-collapsed-1.png
diff --git a/gallery/visualtests/nxTransferListHalf.js b/gallery/visualtests/nxTransferListHalf.js
@@ -38,6 +38,8 @@ describe('NxTransferListHalf', function() {
  secondItemSelector = `${itemsSelector}:nth-child(2) .nx-transfer-list__select`,
  transferAllSelector = `${complexListSelector} .nx-transfer-list__move-all`,
  complexFirstItemSelector = `${complexListSelector} .nx-transfer-list__item:first-child`,
+ complexSecondItemSelector
+ = `${complexListSelector} .nx-transfer-list__item:nth-child(2) .nx-transfer-list__select`,
  moveUpSelector = `${complexFirstItemSelector} .nx-transfer-list__button-bar > :first-child`,
  moveDownSelector = `${complexFirstItemSelector} .nx-transfer-list__button-bar > :last-child`,
  filterBoxSelector = `${complexListSelector} .nx-text-input__input`,
@@ -133,4 +135,11 @@ describe('NxTransferListHalf', function() {
  await wait(500);
  await a11yTest()();
  });
+
+ describe('move icons', function() {
+ it('renders an x icon when onItemChange is provided and isSelected is true', simpleTest(secondItemSelector));
+ it('renders a plus icon when onItemChange is provided but isSelected is false',
+ simpleTest(complexSecondItemSelector));
+ it('doesn\'t render a move icon when onItemChange is not provided', simpleTest(secondDisableTransferItemSelector));
+ });
 });
diff --git a/gallery/visualtests/nxTree.js b/gallery/visualtests/nxTree.js
@@ -14,6 +14,7 @@ describe('NxTree', function() {
  waitAndGetElements,
  getPage,
  isFocused,
+ scrollPage,
  a11yTest
  } = setupBrowser('#/pages/Tree');
 
@@ -80,6 +81,23 @@ describe('NxTree', function() {
  await simpleTest(collapsibleExampleSelector)();
  });
 
+ // Check for RSC-1342
+ it('does not scroll when a partially out-of-view tree\'s label is clicked', async function() {
+ const [tree] = await waitAndGetElements(collapsibleExampleSelector),
+ images = await itemWithText(tree, 'images');
+
+ await scrollPage(0);
+
+ const imagesLowerBound = await images.evaluate(e => e.getBoundingClientRect().bottom),
+ viewportHeight = await getPage().evaluate(() => window.innerHeight),
+ desiredScroll = imagesLowerBound - viewportHeight - 50;
+
+ await scrollPage(desiredScroll);
+ await (await clickTarget(images)).click();
+
+ expect(await getPage().evaluate(() => window.scrollY)).toBe(desiredScroll);
+ });
+
  describe('keyboard navigation', function() {
  it('initially focuses the first item in the tree when reached via tab', async function() {
  const [previousFocusableElement, tree] = await waitAndGetElements(
@@ -637,14 +655,14 @@ describe('NxTree', function() {
  expect(await hasClass(images, 'open')).toBe(true);
  await imagesClick.click();
 
- const sawAlert = new Promise(resolve => {
- page.once('dialog', dialog => {
- dialog.dismiss().then(resolve);
+ const sawSecondPopup = new Promise(resolve => {
+ page.once('popup', newTab => {
+ newTab.close().then(resolve);
  });
  });
 
  await page.keyboard.press('Enter');
- await sawAlert;
+ await sawSecondPopup;
 
  expect(await hasClass(images, 'open')).toBe(true);
  });

diff --git a/gallery/visualtests/testUtils.js b/gallery/visualtests/testUtils.js
@@ -178,6 +178,10 @@ module.exports = {
  await el.evaluate(e => e.scrollIntoView({ block: 'center' }));
  }
 
+ async function scrollPage(y) {
+ await page.evaluate((y) => window.scrollTo(0, y), y);
+ }
+
  async function moveMouseAway() {
  await page.mouse.move(0, 0);
  }
@@ -260,6 +264,7 @@ module.exports = {
  disableLoadingSpinnerAnimation,
  setupUploadableFiles,
  scrollIntoView,
+ scrollPage,
 
  waitForSelectors,
  getElements,

diff --git a/lib/.eslintrc b/lib/.eslintrc
@@ -159,7 +159,7 @@
  "overrides": [
  {
  "files": ["*.tsx", "*.js", "*.ts"],
- "excludedFiles": ["*.test.tsx"],
+ "excludedFiles": ["*.test.tsx", "src/__testutils__/*", "src/setupTests.ts"],
  "extends": ["plugin:jsx-a11y/recommended"],
  "plugins": ["jsx-a11y"],
  "rules": {
@@ -169,7 +169,7 @@
  }
  },
  {
- "files": ["*.test.tsx", "*.test.ts"],
+ "files": ["*.test.tsx", "*.test.ts", "src/__testutils__/*", "src/setupTests.ts"],
  "globals": {
  "jest": true,
  "it": true,

diff --git a/lib/package.json b/lib/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@sonatype/react-shared-components",
- "version": "12.10.3",
+ "version": "12.10.8",
  "description": "Sonatype shared UI components and utilities written in React",
  "main": "index.js",
  "repository": {

diff --git a/lib/src/__testutils__/rtlUtils.tsx b/lib/src/__testutils__/rtlUtils.tsx
@@ -5,11 +5,13 @@
  * distribution and is available at https://www.eclipse.org/legal/epl-2.0/.
  */
 import React, { ComponentType } from 'react';
-import { render, RenderResult } from '@testing-library/react';
+import { act, render, RenderResult } from '@testing-library/react';
 
 import '@testing-library/jest-dom';
+import realUserEvent from '@testing-library/user-event';
 import { path, pipe } from 'ramda';
 import { within } from '@testing-library/dom';
+import { Options } from '@testing-library/user-event/dist/types/options';
 
 export function rtlRender<P>(Component: ComponentType<P>, minimalProps: P) {
  return function renderWrapper(additionalProps?: Partial<P>): RenderResult {
@@ -27,3 +29,18 @@ type RenderElementRetval<P> = (additionalProps?: Partial<P>) => HTMLElement | un
 export function rtlRenderElement<P>(Component: ComponentType<P>, minimalProps: P): RenderElementRetval<P> {
  return pipe(rtlRender(Component, minimalProps), path(['container', 'firstElementChild']));
 }
+
+export async function runTimers() {
+ await act(async () => { await jest.runAllTimers(); });
+}
+
+export async function advanceTimers(time: number) {
+ await act(async () => { await jest.advanceTimersByTime(time); });
+}
+
+export const userEvent = {
+ ...realUserEvent,
+ setup(options?: Options) {
+ return realUserEvent.setup({ advanceTimers, ...options });
+ }
+};
diff --git a/lib/src/base-styles/_nx-btn.scss b/lib/src/base-styles/_nx-btn.scss
@@ -28,8 +28,8 @@
  background-color: var(--nx-swatch-blue-90);
  }
 
- &:focus {
- border: 1px solid var(--nx-color-interactive-border-focus);
+ &:focus:not(:active) {
+ border-color: var(--nx-color-interactive-border-focus);
  box-shadow: var(--nx-box-shadow-focus);
  outline: 0;
  }
@@ -55,7 +55,7 @@
  color: var(--nx-swatch-white);
 
  &:hover, &:focus {
- background-color: var(--nx-swatch-blue-20);
+ background-color: var(--nx-swatch-blue-30);
  }
 
  &:active {

diff --git a/lib/src/components/AbstractNxPageHeader/__tests__/AbstractNxPageHeader.test.tsx b/lib/src/components/AbstractNxPageHeader/__tests__/AbstractNxPageHeader.test.tsx
@@ -7,6 +7,7 @@
 import React from 'react';
 
 import * as enzymeUtils from '../../../__testutils__/enzymeUtils';
+import 'jest-enzyme';
 import AbstractNxPageHeader, { Props, HeaderLink, HeaderLinkProps } from '../AbstractNxPageHeader';
 
 describe('AbstractNxPageHeader', function() {

diff --git a/lib/src/components/Counter/__tests__/Counter.test.tsx b/lib/src/components/Counter/__tests__/Counter.test.tsx
@@ -5,6 +5,7 @@
  * distribution and is available at https://www.eclipse.org/legal/epl-2.0/.
  */
 import {getShallowComponent} from '../../../__testutils__/enzymeUtils';
+import 'jest-enzyme';
 import Counter, {Props} from '../Counter';
 
 describe('Counter', function() {

diff --git a/lib/src/components/Counter/__tests__/MultiSelectCounter.test.tsx b/lib/src/components/Counter/__tests__/MultiSelectCounter.test.tsx
@@ -7,6 +7,7 @@
 import React from 'react';
 
 import {getShallowComponent} from '../../../__testutils__/enzymeUtils';
+import 'jest-enzyme';
 import MultiSelectCounter, {Props} from '../MultiSelectCounter';
 import Counter from '../Counter';
 

diff --git a/lib/src/components/NxAccordion/__tests__/NxAccordion.test.tsx b/lib/src/components/NxAccordion/__tests__/NxAccordion.test.tsx
@@ -5,7 +5,7 @@
  * distribution and is available at https://www.eclipse.org/legal/epl-2.0/.
  */
 import React from 'react';
-import userEvent from '@testing-library/user-event';
+import { userEvent } from '../../../__testutils__/rtlUtils';
 
 import { rtlRender, rtlRenderElement } from '../../../__testutils__/rtlUtils';