carbon-react 124.3.1 → 124.4.1

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

@@ -184,6 +184,9 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   const lastOptionIndex = findLastIndex(childrenList, child => /*#__PURE__*/React.isValidElement(child) && (child.type === Option || child.type === OptionRow));
   const getNextHighlightableItemIndex = useCallback((key, indexOfHighlighted) => {
     const lastIndex = lastOptionIndex;
+    if (lastIndex === -1) {
+      return -1;
+    }
     let nextIndex = getNextIndexByKey(key, indexOfHighlighted, lastIndex, isLoading);
     const nextElement = childrenList[nextIndex];
     if ( /*#__PURE__*/React.isValidElement(nextElement) && nextElement.type !== Option && nextElement.type !== OptionRow) {
@@ -201,7 +204,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       currentIndex = indexOfHighlighted;
     }
     const nextIndex = getNextHighlightableItemIndex(key, currentIndex);
-    if (currentIndex === nextIndex) {
+    if (nextIndex === -1 || currentIndex === nextIndex) {
       return;
     }
     const {
@@ -282,10 +285,10 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     const element = event.target;
 
     /* istanbul ignore else */
-    if (onListScrollBottom && element.scrollHeight - element.scrollTop === element.clientHeight) {
+    if (isOpen && onListScrollBottom && element.scrollHeight - element.scrollTop === element.clientHeight) {
       onListScrollBottom();
     }
-  }, [onListScrollBottom]);
+  }, [onListScrollBottom, isOpen]);
   useEffect(() => {
     const keyboardEvent = "keydown";
     const listElement = listContainerRef.current;
@@ -322,10 +325,6 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     }
     setCurrentOptionsListIndex(indexOfMatch);
     virtualizer.scrollToIndex(indexOfMatch, SCROLL_OPTIONS);
-    // TODO: is there a better way than calling handleListScroll manually?
-    handleListScroll({
-      target: listContainerRef.current
-    });
   }, [getIndexOfMatch, highlightedValue, virtualizer, handleListScroll, listContainerRef]);
   useEffect(() => {
     if (isLoading && currentOptionsListIndex === lastOptionIndex && lastOptionIndex > -1) {

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;