carbon-react 124.3.0 → 124.3.1

package/esm/__spec_helper__/index.js

@@ -1,6 +1,8 @@
 import { enableFetchMocks } from "jest-fetch-mock";
 import { setupMatchMediaMock } from "./mock-match-media";
 import setupResizeObserverMock from "./mock-resize-observer";
+import setupScrollToMock from "./mock-element-scrollto";
 enableFetchMocks();
 setupResizeObserverMock();
-setupMatchMediaMock();
+setupMatchMediaMock();
+setupScrollToMock();

package/esm/__spec_helper__/mock-element-scrollto.d.ts

@@ -0,0 +1,2 @@
+declare const setupScrollToMock: () => void;
+export default setupScrollToMock;

package/esm/__spec_helper__/mock-element-scrollto.js

@@ -0,0 +1,6 @@
+const setupScrollToMock = () => {
+  // need to mock the `scrollTo` method, which is undefined in JSDOM. As we're not actually testing this behaviour, just make it
+  // do nothing.
+  HTMLElement.prototype.scrollTo = () => {};
+};
+export default setupScrollToMock;

package/esm/__spec_helper__/select-test-utils.d.ts

@@ -0,0 +1,3 @@
+import type { ReactWrapper } from "enzyme";
+export declare function simulateSelectTextboxEvent(container: ReactWrapper, eventType: string, ...eventArgs: any[]): void;
+export declare function simulateDropdownEvent(container: ReactWrapper, eventType: string): void;

package/esm/__spec_helper__/select-test-utils.js

@@ -0,0 +1,39 @@
+import { act } from "react-dom/test-utils";
+import { mockResizeObserver } from "jsdom-testing-mocks";
+import StyledSelectListContainer from "../components/select/select-list/select-list-container.style";
+const resizeObserver = mockResizeObserver();
+export function simulateSelectTextboxEvent(container, eventType,
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+...eventArgs) {
+  const selectText = container.find('input[type="text"]').first();
+  selectText.simulate(eventType, ...eventArgs);
+  const selectList = container.find(StyledSelectListContainer).getDOMNode();
+  // need to manually trigger a resize to make react-virtual realise that child options should be rendered
+  act(() => {
+    resizeObserver.mockElementSize(selectList, {
+      contentBoxSize: {
+        inlineSize: 500,
+        blockSize: 180
+      }
+    });
+    resizeObserver.resize();
+  });
+  if (eventType === "focus") jest.runOnlyPendingTimers();
+  container.update();
+}
+export function simulateDropdownEvent(container, eventType) {
+  const dropdown = container.find('[type="dropdown"]').first();
+  dropdown.simulate(eventType);
+  const selectList = container.find(StyledSelectListContainer).getDOMNode();
+  // need to manually trigger a resize to make react-virtual realise that child options should be rendered
+  act(() => {
+    resizeObserver.mockElementSize(selectList, {
+      contentBoxSize: {
+        inlineSize: 500,
+        blockSize: 180
+      }
+    });
+    resizeObserver.resize();
+  });
+  container.update();
+}

package/esm/components/select/select-list/select-list.component.js

@@ -2,8 +2,9 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { useEffect, useState, useCallback, useLayoutEffect, useRef, useMemo } from "react";
 import PropTypes from "prop-types";
 import { flip, offset, size } from "@floating-ui/dom";
-import { useVirtualizer } from "@tanstack/react-virtual";
+import { useVirtualizer, defaultRangeExtractor } from "@tanstack/react-virtual";
 import findLastIndex from "lodash/findLastIndex";
+import usePrevious from "../../../hooks/__internal__/usePrevious";
 import useScrollBlock from "../../../hooks/__internal__/useScrollBlock";
 import useModalManager from "../../../hooks/__internal__/useModalManager";
 import { StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody } from "./select-list.style";
@@ -60,7 +61,26 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     allowScroll
   } = useScrollBlock();
   const actionButtonHeight = useRef(0);
+  const wasOpen = usePrevious(isOpen);
+
+  // ensure scroll-position goes back to the top whenever the list is (re)-opened. (On Safari, without this it remains at the bottom if it had been scrolled
+  // to the bottom before closing.)
+  useEffect(() => {
+    if (isOpen && !wasOpen) {
+      listContainerRef.current?.scrollTo(0, 0);
+    }
+  });
   const overscan = enableVirtualScroll ? virtualScrollOverscan : React.Children.count(children);
+
+  // need to use a custom rangeExtractor that ensure the currently-selected option, if any, always appears as an option returned from the virtualiser.
+  // This ensures that the aria-activedescendant value is always valid even when the currently-selected item is out of the visible range.
+  const rangeExtractor = range => {
+    const toRender = defaultRangeExtractor(range);
+    if (currentOptionsListIndex !== -1 && !toRender.includes(currentOptionsListIndex)) {
+      toRender.push(currentOptionsListIndex);
+    }
+    return toRender;
+  };
   const virtualizer = useVirtualizer({
     count: React.Children.count(children),
     getScrollElement: () => listContainerRef.current,
@@ -68,9 +88,21 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     // value doesn't really seem to matter since we're dynamically measuring, but 40px is the height of a single-line option
     overscan,
     paddingStart: multiColumn ? TABLE_HEADER_HEIGHT : 0,
-    scrollPaddingEnd: actionButtonHeight.current
+    scrollPaddingEnd: actionButtonHeight.current,
+    rangeExtractor
   });
   const items = virtualizer.getVirtualItems();
+
+  // getVirtualItems returns an empty array of items if the select list is currently closed - which is correct visually but
+  // we need to ensure that any currently-selected option is still in the DOM to avoid any accessibility issues.
+  // The isOpen prop will ensure that no options are visible regardless of what is in the items array.
+  if (items.length === 0 && currentOptionsListIndex !== -1) {
+    // only index property is required with the item not visible so the following type assertion, even though incorrect,
+    // should be OK
+    items.push({
+      index: currentOptionsListIndex
+    });
+  }
   const listHeight = virtualizer.getTotalSize();
   useEffect(() => {
     if (isOpen) {
@@ -119,11 +151,13 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       measureElement(element);
     }
   };
-  const renderedChildren = items.map(item => {
-    const {
-      index,
-      start
-    } = item;
+
+  // the rangeExtractor above can cause an undefined value to be appended to the return items.
+  // Easiest way to stop that crashing is just to filter it out.
+  const renderedChildren = items.filter(item => item !== undefined).map(({
+    index,
+    start
+  }) => {
     const child = childrenList[index];
     if (! /*#__PURE__*/React.isValidElement(child)) {
       return child;

package/lib/__spec_helper__/index.js

@@ -3,7 +3,9 @@
 var _jestFetchMock = require("jest-fetch-mock");
 var _mockMatchMedia = require("./mock-match-media");
 var _mockResizeObserver = _interopRequireDefault(require("./mock-resize-observer"));
+var _mockElementScrollto = _interopRequireDefault(require("./mock-element-scrollto"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 (0, _jestFetchMock.enableFetchMocks)();
 (0, _mockResizeObserver.default)();
-(0, _mockMatchMedia.setupMatchMediaMock)();
+(0, _mockMatchMedia.setupMatchMediaMock)();
+(0, _mockElementScrollto.default)();

package/lib/__spec_helper__/mock-element-scrollto.d.ts

@@ -0,0 +1,2 @@
+declare const setupScrollToMock: () => void;
+export default setupScrollToMock;

package/lib/__spec_helper__/mock-element-scrollto.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const setupScrollToMock = () => {
+  // need to mock the `scrollTo` method, which is undefined in JSDOM. As we're not actually testing this behaviour, just make it
+  // do nothing.
+  HTMLElement.prototype.scrollTo = () => {};
+};
+var _default = exports.default = setupScrollToMock;

package/lib/__spec_helper__/select-test-utils.d.ts

@@ -0,0 +1,3 @@
+import type { ReactWrapper } from "enzyme";
+export declare function simulateSelectTextboxEvent(container: ReactWrapper, eventType: string, ...eventArgs: any[]): void;
+export declare function simulateDropdownEvent(container: ReactWrapper, eventType: string): void;

package/lib/__spec_helper__/select-test-utils.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.simulateDropdownEvent = simulateDropdownEvent;
+exports.simulateSelectTextboxEvent = simulateSelectTextboxEvent;
+var _testUtils = require("react-dom/test-utils");
+var _jsdomTestingMocks = require("jsdom-testing-mocks");
+var _selectListContainer = _interopRequireDefault(require("../components/select/select-list/select-list-container.style"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const resizeObserver = (0, _jsdomTestingMocks.mockResizeObserver)();
+function simulateSelectTextboxEvent(container, eventType,
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+...eventArgs) {
+  const selectText = container.find('input[type="text"]').first();
+  selectText.simulate(eventType, ...eventArgs);
+  const selectList = container.find(_selectListContainer.default).getDOMNode();
+  // need to manually trigger a resize to make react-virtual realise that child options should be rendered
+  (0, _testUtils.act)(() => {
+    resizeObserver.mockElementSize(selectList, {
+      contentBoxSize: {
+        inlineSize: 500,
+        blockSize: 180
+      }
+    });
+    resizeObserver.resize();
+  });
+  if (eventType === "focus") jest.runOnlyPendingTimers();
+  container.update();
+}
+function simulateDropdownEvent(container, eventType) {
+  const dropdown = container.find('[type="dropdown"]').first();
+  dropdown.simulate(eventType);
+  const selectList = container.find(_selectListContainer.default).getDOMNode();
+  // need to manually trigger a resize to make react-virtual realise that child options should be rendered
+  (0, _testUtils.act)(() => {
+    resizeObserver.mockElementSize(selectList, {
+      contentBoxSize: {
+        inlineSize: 500,
+        blockSize: 180
+      }
+    });
+    resizeObserver.resize();
+  });
+  container.update();
+}

package/lib/components/select/select-list/select-list.component.js

@@ -9,6 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _dom = require("@floating-ui/dom");
 var _reactVirtual = require("@tanstack/react-virtual");
 var _findLastIndex = _interopRequireDefault(require("lodash/findLastIndex"));
+var _usePrevious = _interopRequireDefault(require("../../../hooks/__internal__/usePrevious"));
 var _useScrollBlock = _interopRequireDefault(require("../../../hooks/__internal__/useScrollBlock"));
 var _useModalManager = _interopRequireDefault(require("../../../hooks/__internal__/useModalManager"));
 var _selectList = require("./select-list.style");
@@ -69,7 +70,26 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     allowScroll
   } = (0, _useScrollBlock.default)();
   const actionButtonHeight = (0, _react.useRef)(0);
+  const wasOpen = (0, _usePrevious.default)(isOpen);
+
+  // ensure scroll-position goes back to the top whenever the list is (re)-opened. (On Safari, without this it remains at the bottom if it had been scrolled
+  // to the bottom before closing.)
+  (0, _react.useEffect)(() => {
+    if (isOpen && !wasOpen) {
+      listContainerRef.current?.scrollTo(0, 0);
+    }
+  });
   const overscan = enableVirtualScroll ? virtualScrollOverscan : _react.default.Children.count(children);
+
+  // need to use a custom rangeExtractor that ensure the currently-selected option, if any, always appears as an option returned from the virtualiser.
+  // This ensures that the aria-activedescendant value is always valid even when the currently-selected item is out of the visible range.
+  const rangeExtractor = range => {
+    const toRender = (0, _reactVirtual.defaultRangeExtractor)(range);
+    if (currentOptionsListIndex !== -1 && !toRender.includes(currentOptionsListIndex)) {
+      toRender.push(currentOptionsListIndex);
+    }
+    return toRender;
+  };
   const virtualizer = (0, _reactVirtual.useVirtualizer)({
     count: _react.default.Children.count(children),
     getScrollElement: () => listContainerRef.current,
@@ -77,9 +97,21 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     // value doesn't really seem to matter since we're dynamically measuring, but 40px is the height of a single-line option
     overscan,
     paddingStart: multiColumn ? TABLE_HEADER_HEIGHT : 0,
-    scrollPaddingEnd: actionButtonHeight.current
+    scrollPaddingEnd: actionButtonHeight.current,
+    rangeExtractor
   });
   const items = virtualizer.getVirtualItems();
+
+  // getVirtualItems returns an empty array of items if the select list is currently closed - which is correct visually but
+  // we need to ensure that any currently-selected option is still in the DOM to avoid any accessibility issues.
+  // The isOpen prop will ensure that no options are visible regardless of what is in the items array.
+  if (items.length === 0 && currentOptionsListIndex !== -1) {
+    // only index property is required with the item not visible so the following type assertion, even though incorrect,
+    // should be OK
+    items.push({
+      index: currentOptionsListIndex
+    });
+  }
   const listHeight = virtualizer.getTotalSize();
   (0, _react.useEffect)(() => {
     if (isOpen) {
@@ -128,11 +160,13 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       measureElement(element);
     }
   };
-  const renderedChildren = items.map(item => {
-    const {
-      index,
-      start
-    } = item;
+
+  // the rangeExtractor above can cause an undefined value to be appended to the return items.
+  // Easiest way to stop that crashing is just to filter it out.
+  const renderedChildren = items.filter(item => item !== undefined).map(({
+    index,
+    start
+  }) => {
     const child = childrenList[index];
     if (! /*#__PURE__*/_react.default.isValidElement(child)) {
       return child;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "124.3.0",
+  "version": "124.3.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -156,6 +156,7 @@
     "jest-environment-jsdom": "^27.5.1",
     "jest-fetch-mock": "^3.0.3",
     "jest-styled-components": "^6.3.4",
+    "jsdom-testing-mocks": "^1.11.0",
     "lint-staged": "^11.2.6",
     "mockdate": "^2.0.5",
     "nock": "^13.3.8",
@@ -182,7 +183,7 @@
     "@floating-ui/react-dom": "~1.3.0",
     "@octokit/rest": "^18.12.0",
     "@styled-system/prop-types": "^5.1.5",
-    "@tanstack/react-virtual": "3.0.0-beta.54",
+    "@tanstack/react-virtual": "^3.0.0-beta.68",
     "@types/styled-system": "^5.1.22",
     "chalk": "^4.1.2",
     "ci-info": "^3.8.0",