carbon-react 124.3.0 → 124.4.0

package/esm/components/tile/flex-tile-cell/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./flex-tile-cell.component";
+export type { FlexTileCellProps } from "./flex-tile-cell.component";

package/esm/components/tile/flex-tile-cell/index.js

@@ -0,0 +1 @@
+export { default } from "./flex-tile-cell.component";

package/esm/components/tile/flex-tile-container/flex-tile-container.component.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { BoxProps } from "../../box";
+export interface FlexTileContainerProps extends Pick<BoxProps, "columnGap"> {
+    /** The child elements of FlexTileContainer need to be FlexTileCell components. */
+    children: React.ReactNode;
+}
+export declare const FlexTileContainer: ({ children, columnGap, }: FlexTileContainerProps) => JSX.Element;
+export default FlexTileContainer;

package/esm/components/tile/flex-tile-container/flex-tile-container.component.js

@@ -0,0 +1,29 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Box from "../../box";
+const FlexTileContainer = ({
+  children,
+  columnGap = 2
+}) => {
+  if (!children) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
+  return /*#__PURE__*/React.createElement(Box, {
+    alignContent: "stretch",
+    alignItems: "stretch",
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    columnGap: columnGap,
+    justifyContent: "flex-start",
+    overflow: "hidden",
+    width: "100%",
+    "data-component": "flex-tile-container"
+  }, children);
+};
+FlexTileContainer.propTypes = {
+  "children": PropTypes.node,
+  "columnGap": PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+};
+export { FlexTileContainer };
+export default FlexTileContainer;

package/esm/components/tile/flex-tile-container/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./flex-tile-container.component";
+export type { FlexTileContainerProps } from "./flex-tile-container.component";

package/esm/components/tile/flex-tile-container/index.js

@@ -0,0 +1 @@
+export { default } from "./flex-tile-container.component";

package/esm/components/tile/flex-tile-divider/flex-tile-divider.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const FlexTileDivider: () => JSX.Element;
+export default FlexTileDivider;

package/esm/components/tile/flex-tile-divider/flex-tile-divider.component.js

@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Box from "../../box";
+import Hr from "../../hr/hr.component";
+export const FlexTileDivider = () => {
+  return /*#__PURE__*/React.createElement(Box, {
+    position: "absolute",
+    bottom: "0px",
+    left: "0px",
+    height: "1px",
+    width: "100vw",
+    m: "0px 0px -1px 0px"
+  }, /*#__PURE__*/React.createElement(Hr, {
+    m: 0
+  }));
+};
+export default FlexTileDivider;

package/esm/components/tile/flex-tile-divider/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./flex-tile-divider.component";

package/esm/components/tile/flex-tile-divider/index.js

@@ -0,0 +1 @@
+export { default } from "./flex-tile-divider.component";

package/esm/components/tile/index.d.ts

@@ -4,3 +4,8 @@ export { default as TileContent } from "./tile-content";
 export type { TileContentProps } from "./tile-content";
 export { default as TileFooter } from "./tile-footer";
 export type { TileFooterProps } from "./tile-footer";
+export { default as FlexTileContainer } from "./flex-tile-container";
+export type { FlexTileContainerProps } from "./flex-tile-container";
+export { default as FlexTileCell } from "./flex-tile-cell";
+export type { FlexTileCellProps } from "./flex-tile-cell";
+export { default as FlexTileDivider } from "./flex-tile-divider";

package/esm/components/tile/index.js

@@ -1,3 +1,6 @@
 export { default as Tile } from "./tile.component";
 export { default as TileContent } from "./tile-content";
-export { default as TileFooter } from "./tile-footer";
+export { default as TileFooter } from "./tile-footer";
+export { default as FlexTileContainer } from "./flex-tile-container";
+export { default as FlexTileCell } from "./flex-tile-cell";
+export { default as FlexTileDivider } from "./flex-tile-divider";

package/esm/style/utils/box-gap.d.ts

@@ -0,0 +1,5 @@
+export declare const GAP_VALUES: number[];
+export declare type AllowedNumericalValues = typeof GAP_VALUES[number];
+export declare type Gap = AllowedNumericalValues | string;
+export declare const getGapValue: (gapValue: number | string) => string;
+export default function gap(gapValue: number | string): string;

package/esm/style/utils/box-gap.js

@@ -0,0 +1,9 @@
+import { space } from "../../style/themes/base/base-theme.config";
+export const GAP_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+export const getGapValue = gapValue => typeof gapValue === "number" ? `var(--spacing${gapValue}00)` : gapValue;
+export default function gap(gapValue) {
+  if (typeof gapValue === "number") {
+    return space[gapValue];
+  }
+  return gapValue;
+}

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/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/lib/components/box/box.component.js

@@ -11,7 +11,6 @@ var _box = _interopRequireDefault(require("./box.style"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const GAP_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
 const Box = exports.Box = /*#__PURE__*/_react.default.forwardRef(({
   "data-component": dataComponent,
   as,
@@ -482,7 +481,7 @@ Box.propTypes = {
   "children": _propTypes.default.node,
   "className": _propTypes.default.string,
   "color": _propTypes.default.string,
-  "columnGap": _propTypes.default.oneOfType([_propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]), _propTypes.default.string]),
+  "columnGap": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   "data-component": _propTypes.default.string,
   "data-element": _propTypes.default.string,
   "data-role": _propTypes.default.string,
@@ -993,7 +992,7 @@ Box.propTypes = {
     "valueOf": _propTypes.default.func.isRequired
   })]),
   "flexWrap": _propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "inherit", "initial", "nowrap", "revert-layer", "revert", "unset", "wrap-reverse", "wrap"]), _propTypes.default.arrayOf(_propTypes.default.oneOf(["-moz-initial", "inherit", "initial", "nowrap", "revert-layer", "revert", "unset", "wrap-reverse", "wrap", null])), _propTypes.default.object]),
-  "gap": _propTypes.default.oneOfType([_propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]), _propTypes.default.string]),
+  "gap": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   "gridArea": _propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "auto", "inherit", "initial", "revert-layer", "revert", "unset"]), _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "auto", "inherit", "initial", "revert-layer", "revert", "unset", null]), _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
@@ -3430,7 +3429,7 @@ Box.propTypes = {
     "valueOf": _propTypes.default.func.isRequired
   }), _propTypes.default.string]),
   "role": _propTypes.default.string,
-  "rowGap": _propTypes.default.oneOfType([_propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]), _propTypes.default.string]),
+  "rowGap": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   "scrollVariant": _propTypes.default.oneOf(["dark", "light"]),
   "size": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,

package/lib/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/lib/components/box/box.config.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _baseTheme = require("../../style/themes/base/base-theme.config");
 var _default = exports.default = {
   light: {
     thumb: "var(--colorsUtilityMajor300)",
@@ -13,11 +12,5 @@ var _default = exports.default = {
   dark: {
     thumb: "var(--colorsUtilityMajor200)",
     track: "var(--colorsUtilityMajor400)"
-  },
-  gap: gapValue => {
-    if (typeof gapValue === "number") {
-      return _baseTheme.space[gapValue];
-    }
-    return gapValue;
   }
 };

package/lib/components/box/box.style.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
+var _boxGap = _interopRequireDefault(require("../../style/utils/box-gap"));
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 var _color = _interopRequireDefault(require("../../style/utils/color"));
 var _box = _interopRequireDefault(require("./box.config"));
@@ -97,15 +98,15 @@ const StyledBox = _styledComponents.default.div`
   rowGap
 }) => (display === "flex" || display === "inline-flex" || display === "grid" || display === "inline-grid") && (0, _styledComponents.css)`
       ${gap !== undefined && (0, _styledComponents.css)`
-        gap: ${_box.default.gap(gap)};
+        gap: ${(0, _boxGap.default)(gap)};
       `}
 
       ${columnGap !== undefined && (0, _styledComponents.css)`
-        column-gap: ${_box.default.gap(columnGap)};
+        column-gap: ${(0, _boxGap.default)(columnGap)};
       `}
 
       ${rowGap !== undefined && (0, _styledComponents.css)`
-        row-gap: ${_box.default.gap(rowGap)};
+        row-gap: ${(0, _boxGap.default)(rowGap)};
       `}
     `};
 

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/lib/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;