carbon-react 124.3.0 → 124.4.0

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/box/box.component.d.ts

@@ -1,13 +1,11 @@
 import React from "react";
 import { SpaceProps, LayoutProps, FlexboxProps, PositionProps, GridProps } from "styled-system";
 import * as DesignTokens from "@sage/design-tokens/js/base/common";
+import { Gap } from "style/utils/box-gap";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-declare const GAP_VALUES: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8];
 export declare type OverflowWrap = "break-word" | "anywhere";
 export declare type ScrollVariant = "light" | "dark";
 export declare type BoxSizing = "content-box" | "border-box";
-export declare type AllowedNumericalValues = typeof GAP_VALUES[number];
-export declare type Gap = AllowedNumericalValues | string;
 declare type DesignTokensType = keyof typeof DesignTokens;
 declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
 declare type BorderRadiusType = Extract<DesignTokensType, `borderRadius${string}`>;

package/esm/components/box/box.component.js

@@ -4,7 +4,6 @@ import PropTypes from "prop-types";
 import { filterStyledSystemMarginProps, filterStyledSystemPaddingProps, filterStyledSystemLayoutProps, filterStyledSystemFlexboxProps, filterStyledSystemGridProps } from "../../style/utils";
 import StyledBox from "./box.style";
 import tagComponent from "../../__internal__/utils/helpers/tags";
-const GAP_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
 const Box = /*#__PURE__*/React.forwardRef(({
   "data-component": dataComponent,
   as,
@@ -475,7 +474,7 @@ Box.propTypes = {
   "children": PropTypes.node,
   "className": PropTypes.string,
   "color": PropTypes.string,
-  "columnGap": PropTypes.oneOfType([PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]), PropTypes.string]),
+  "columnGap": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   "data-component": PropTypes.string,
   "data-element": PropTypes.string,
   "data-role": PropTypes.string,
@@ -986,7 +985,7 @@ Box.propTypes = {
     "valueOf": PropTypes.func.isRequired
   })]),
   "flexWrap": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "inherit", "initial", "nowrap", "revert-layer", "revert", "unset", "wrap-reverse", "wrap"]), PropTypes.arrayOf(PropTypes.oneOf(["-moz-initial", "inherit", "initial", "nowrap", "revert-layer", "revert", "unset", "wrap-reverse", "wrap", null])), PropTypes.object]),
-  "gap": PropTypes.oneOfType([PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]), PropTypes.string]),
+  "gap": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   "gridArea": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "auto", "inherit", "initial", "revert-layer", "revert", "unset"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "auto", "inherit", "initial", "revert-layer", "revert", "unset", null]), PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
@@ -3423,7 +3422,7 @@ Box.propTypes = {
     "valueOf": PropTypes.func.isRequired
   }), PropTypes.string]),
   "role": PropTypes.string,
-  "rowGap": PropTypes.oneOfType([PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]), PropTypes.string]),
+  "rowGap": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   "scrollVariant": PropTypes.oneOf(["dark", "light"]),
   "size": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,

package/esm/components/box/box.config.d.ts

@@ -7,6 +7,5 @@ declare const _default: {
         thumb: string;
         track: string;
     };
-    gap: (gapValue: number | string) => string;
 };
 export default _default;

package/esm/components/box/box.config.js

@@ -1,4 +1,3 @@
-import { space } from "../../style/themes/base/base-theme.config";
 export default {
   light: {
     thumb: "var(--colorsUtilityMajor300)",
@@ -7,11 +6,5 @@ export default {
   dark: {
     thumb: "var(--colorsUtilityMajor200)",
     track: "var(--colorsUtilityMajor400)"
-  },
-  gap: gapValue => {
-    if (typeof gapValue === "number") {
-      return space[gapValue];
-    }
-    return gapValue;
   }
 };

package/esm/components/box/box.style.js

@@ -1,5 +1,6 @@
 import styled, { css } from "styled-components";
 import { space, layout, flexbox, grid, position as positionFn } from "styled-system";
+import boxGap from "../../style/utils/box-gap";
 import BaseTheme from "../../style/themes/base";
 import styledColor from "../../style/utils/color";
 import boxConfig from "./box.config";
@@ -88,15 +89,15 @@ const StyledBox = styled.div`
   rowGap
 }) => (display === "flex" || display === "inline-flex" || display === "grid" || display === "inline-grid") && css`
       ${gap !== undefined && css`
-        gap: ${boxConfig.gap(gap)};
+        gap: ${boxGap(gap)};
       `}
 
       ${columnGap !== undefined && css`
-        column-gap: ${boxConfig.gap(columnGap)};
+        column-gap: ${boxGap(columnGap)};
       `}
 
       ${rowGap !== undefined && css`
-        row-gap: ${boxConfig.gap(rowGap)};
+        row-gap: ${boxGap(rowGap)};
       `}
     `};
 

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/esm/components/tile/flex-tile-cell/flex-tile-cell.component.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { BoxProps } from "../../box";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface FlexTileCellProps extends TagProps, BoxProps {
+    /** The content to render within the responsive cell. */
+    children: React.ReactNode;
+}
+export declare const FlexTileCell: ({ children, flexGrow, flexBasis, flexShrink, ...rest }: FlexTileCellProps) => JSX.Element;
+export default FlexTileCell;