carbon-react 119.12.2 → 120.1.0

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

@@ -0,0 +1,3 @@
+import { BoxProps } from "./box.component";
+declare const StyledBox: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
+export default StyledBox;

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

@@ -0,0 +1,112 @@
+import styled, { css } from "styled-components";
+import { space, layout, flexbox, grid, position as positionFn } from "styled-system";
+import BaseTheme from "../../style/themes/base";
+import styledColor from "../../style/utils/color";
+import boxConfig from "./box.config";
+const calculatePosition = props => {
+  const {
+    position,
+    ...rest
+  } = positionFn(props);
+  return {
+    position,
+    zIndex: ["sticky", "fixed"].includes(position) ? 1 : undefined,
+    ...rest
+  };
+};
+const StyledBox = styled.div`
+  ${space}
+  ${layout}
+  ${flexbox}
+  ${grid}
+  ${calculatePosition}
+
+  ${({
+  theme,
+  borderRadius = "borderRadius000"
+}) => !theme.roundedCornersOptOut && css`
+      border-radius: var(--${borderRadius});
+    `}
+
+  ${({
+  color,
+  bg,
+  backgroundColor,
+  ...rest
+}) => styledColor({
+  color,
+  bg,
+  backgroundColor,
+  ...rest
+})}
+
+  ${({
+  overflowWrap
+}) => overflowWrap && css`
+      overflow-wrap: ${overflowWrap};
+    `}
+  
+  ${({
+  height
+}) => height && css`
+      height: ${height};
+    `}
+
+  ${({
+  width
+}) => width && css`
+      width: ${width};
+    `}
+
+  ${({
+  scrollVariant
+}) => scrollVariant && css`
+      scrollbar-color: ${boxConfig[scrollVariant].thumb}
+        ${boxConfig[scrollVariant].track};
+
+      &::-webkit-scrollbar {
+        width: 8px;
+      }
+      &::-webkit-scrollbar-track {
+        background-color: ${boxConfig[scrollVariant].track};
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: ${boxConfig[scrollVariant].thumb};
+      }
+    `}
+
+  ${({
+  boxSizing
+}) => boxSizing && css`
+      box-sizing: ${boxSizing};
+    `}
+
+    ${({
+  display,
+  gap,
+  columnGap,
+  rowGap
+}) => (display === "flex" || display === "inline-flex" || display === "grid" || display === "inline-grid") && css`
+      ${gap !== undefined && css`
+        gap: ${boxConfig.gap(gap)};
+      `}
+
+      ${columnGap !== undefined && css`
+        column-gap: ${boxConfig.gap(columnGap)};
+      `}
+
+      ${rowGap !== undefined && css`
+        row-gap: ${boxConfig.gap(rowGap)};
+      `}
+    `};
+
+  ${({
+  boxShadow
+}) => boxShadow && css`
+      box-shadow: var(--${boxShadow});
+    `}
+`;
+StyledBox.defaultProps = {
+  theme: BaseTheme
+};
+export default StyledBox;

package/esm/components/dismissible-box/dismissible-box.style.d.ts

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 export interface StyledDismissibleBoxProps {
     /** Flag to control whether the thicker left border highlight should be rendered */
     hasBorderLeftHighlight?: boolean;
     /** Set the base color variant */
     variant?: "light" | "dark";
 }
-declare const StyledDismissibleBox: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps & StyledDismissibleBoxProps, never>;
+declare const StyledDismissibleBox: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../box").BoxProps & import("react").RefAttributes<HTMLDivElement>>, any, StyledDismissibleBoxProps, never>;
 export { StyledDismissibleBox };

package/esm/components/drawer/drawer.style.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const StyledSidebarHeader: import("styled-components").StyledComponent<"div", any, {
     isExpanded?: boolean | undefined;
 }, never>;
@@ -7,7 +8,7 @@ interface StyledDrawerSidebarProps {
     isExpanded?: boolean;
     hasControls: boolean;
 }
-declare const StyledDrawerSidebar: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps & StyledDrawerSidebarProps, never>;
+declare const StyledDrawerSidebar: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../box").BoxProps & import("react").RefAttributes<HTMLDivElement>>, any, StyledDrawerSidebarProps, never>;
 interface StyledDrawerContentProps {
     animationDuration?: string;
     backgroundColor?: string;

package/esm/components/duelling-picklist/picklist/picklist.style.js

@@ -1,6 +1,8 @@
 import styled from "styled-components";
-import Box from "../../box";
-const StyledPicklist = styled(Box).attrs({
+import StyledBox from "../../box/box.style";
+
+// TODO: remove polymorphism when we revisit as part of ticket FE-6177
+const StyledPicklist = styled(StyledBox).attrs({
   as: "ul"
 })`
   position: relative;

package/esm/components/flat-table/__internal__/build-position-map.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (array: HTMLElement[], propertyName: "offsetWidth" | "offsetHeight") => Record<string, number>;
+export default _default;

package/esm/components/flat-table/__internal__/build-position-map.js

@@ -0,0 +1,14 @@
+export default ((array, propertyName) => array.reduce((acc, _, index) => {
+  const currentId = array[index].getAttribute("id");
+  if (currentId) {
+    if (index === 0) {
+      acc[currentId] = 0;
+    } else {
+      const previousId = array[index - 1].getAttribute("id");
+      if (previousId) {
+        acc[currentId] = acc[previousId] + array[index - 1][propertyName];
+      }
+    }
+  }
+  return acc;
+}, {}));

package/esm/components/flat-table/__internal__/index.d.ts

@@ -0,0 +1,2 @@
+export { default as useCalculateStickyCells } from "./use-calculate-sticky-cells";
+export { default as buildPositionMap } from "./build-position-map";

package/esm/components/flat-table/__internal__/index.js

@@ -0,0 +1,2 @@
+export { default as useCalculateStickyCells } from "./use-calculate-sticky-cells";
+export { default as buildPositionMap } from "./build-position-map";

package/esm/components/flat-table/__internal__/use-calculate-sticky-cells.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare const _default: (id: string) => {
+    expandable: boolean | undefined;
+    leftPosition: number;
+    rightPosition: number;
+    makeCellSticky: boolean;
+    onClick: ((ev?: import("react").MouseEvent<HTMLElement, MouseEvent> | undefined) => void) | undefined;
+    onKeyDown: ((ev: import("react").KeyboardEvent<HTMLElement>) => void) | undefined;
+    isFirstCell: boolean;
+    isExpandableCell: boolean | undefined;
+};
+export default _default;

package/esm/components/flat-table/__internal__/use-calculate-sticky-cells.js

@@ -0,0 +1,28 @@
+import { useContext } from "react";
+import FlatTableRowContext from "../flat-table-row/__internal__/flat-table-row-context";
+export default (id => {
+  const {
+    expandable,
+    firstCellId,
+    firstColumnExpandable,
+    leftPositions,
+    rightPositions,
+    onClick,
+    onKeyDown
+  } = useContext(FlatTableRowContext);
+  const leftPosition = leftPositions[id];
+  const rightPosition = rightPositions[id];
+  const makeCellSticky = leftPosition !== undefined || rightPosition !== undefined;
+  const isFirstCell = id === firstCellId;
+  const isExpandableCell = expandable && isFirstCell && firstColumnExpandable;
+  return {
+    expandable,
+    leftPosition,
+    rightPosition,
+    makeCellSticky,
+    onClick,
+    onKeyDown,
+    isFirstCell,
+    isExpandableCell
+  };
+});

package/esm/components/flat-table/flat-table-cell/flat-table-cell.component.d.ts

@@ -20,50 +20,11 @@ export interface FlatTableCellProps extends PaddingProps {
     verticalBorder?: TableBorderSize;
     /** Sets the color of the right border */
     verticalBorderColor?: string;
-    /** Sets an id string on the DOM element */
+    /** Sets an id string on the element */
     id?: string;
-    /**
-     * @private
-     * @ignore
-     */
-    expandable?: boolean;
-    /**
-     * @private
-     * @ignore
-     */
-    onClick?: () => void;
-    /**
-     * @private
-     * @ignore
-     */
-    onKeyDown?: () => void;
-    /**
-     * @private
-     * @ignore
-     * Sets the left position when sticky column found
-     */
-    leftPosition?: number;
-    /**
-     * @private
-     * @ignore
-     * Sets the right position when sticky column found
-     */
-    rightPosition?: number;
-    /**
-     * @private
-     * @ignore
-     * Index of cell within row
-     */
-    cellIndex?: number;
-    /**
-     * @private
-     * @ignore
-     * Callback to report the offsetWidth
-     */
-    reportCellWidth?: (offset: number, index?: number) => void;
 }
 export declare const FlatTableCell: {
-    ({ align, children, pl, expandable, onClick, onKeyDown, reportCellWidth, cellIndex, leftPosition, rightPosition, width, truncate, title, colspan, rowspan, ...rest }: FlatTableCellProps): React.JSX.Element;
+    ({ align, children, pl, width, truncate, title, colspan, rowspan, id, ...rest }: FlatTableCellProps): React.JSX.Element;
     displayName: string;
 };
 export default FlatTableCell;

package/esm/components/flat-table/flat-table-cell/flat-table-cell.component.js

@@ -1,66 +1,67 @@
 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); }
-import React, { useLayoutEffect, useRef, useState, useEffect, useContext } from "react";
+import React, { useRef, useState, useEffect, useContext } from "react";
 import PropTypes from "prop-types";
 import { StyledFlatTableCell, StyledCellContent } from "./flat-table-cell.style";
 import Icon from "../../icon";
 import { FlatTableThemeContext } from "../flat-table.component";
 import guid from "../../../__internal__/utils/helpers/guid";
+import useCalculateStickyCells from "../__internal__/use-calculate-sticky-cells";
 export const FlatTableCell = ({
   align = "left",
   children,
   pl,
-  expandable = false,
-  onClick,
-  onKeyDown,
-  reportCellWidth,
-  cellIndex,
-  leftPosition,
-  rightPosition,
   width,
   truncate = false,
   title,
   colspan,
   rowspan,
+  id,
   ...rest
 }) => {
   const ref = useRef(null);
-  const id = useRef(guid());
+  const internalId = useRef(id || guid());
   const [tabIndex, setTabIndex] = useState(-1);
   const {
     selectedId
   } = useContext(FlatTableThemeContext);
-  useLayoutEffect(() => {
-    if (ref.current && reportCellWidth) {
-      reportCellWidth(ref.current.offsetWidth, cellIndex);
-    }
-  }, [reportCellWidth, cellIndex]);
+  const {
+    leftPosition,
+    rightPosition,
+    expandable,
+    onClick,
+    onKeyDown,
+    isFirstCell,
+    isExpandableCell,
+    makeCellSticky
+  } = useCalculateStickyCells(internalId.current);
   useEffect(() => {
-    setTabIndex(selectedId === id.current ? 0 : -1);
-  }, [selectedId]);
+    setTabIndex(isExpandableCell && selectedId === internalId.current ? 0 : -1);
+  }, [selectedId, isExpandableCell]);
   return /*#__PURE__*/React.createElement(StyledFlatTableCell, _extends({
     leftPosition: leftPosition,
     rightPosition: rightPosition,
-    makeCellSticky: !!reportCellWidth,
-    className: reportCellWidth ? "isSticky" : undefined,
+    makeCellSticky: makeCellSticky,
+    className: makeCellSticky ? "isSticky" : undefined,
     ref: ref,
     align: align,
     "data-element": "flat-table-cell",
     pl: pl,
-    onClick: expandable && onClick ? onClick : undefined,
-    tabIndex: expandable && onClick ? tabIndex : undefined,
-    onKeyDown: expandable && onKeyDown ? onKeyDown : undefined,
+    onClick: isExpandableCell ? onClick : undefined,
+    tabIndex: isExpandableCell ? tabIndex : undefined,
+    onKeyDown: isExpandableCell ? onKeyDown : undefined,
     colWidth: width,
     isTruncated: truncate,
-    expandable: expandable,
-    id: id.current
+    expandable: expandable
   }, colspan !== undefined && {
     colSpan: Number(colspan)
   }, rowspan !== undefined && {
     rowSpan: Number(rowspan)
-  }, rest), /*#__PURE__*/React.createElement(StyledCellContent, {
+  }, rest, {
+    id: internalId.current
+  }), /*#__PURE__*/React.createElement(StyledCellContent, {
     title: truncate && !title && typeof children === "string" ? children : title,
     expandable: expandable
-  }, expandable && /*#__PURE__*/React.createElement(Icon, {
+  }, expandable && isFirstCell && /*#__PURE__*/React.createElement(Icon, {
     type: "chevron_down_thick",
     bgSize: "extra-small",
     mr: "8px"

package/esm/components/flat-table/flat-table-cell/flat-table-cell.style.d.ts

@@ -1,10 +1,15 @@
 import { PaddingProps } from "styled-system";
 import { FlatTableCellProps } from "./flat-table-cell.component";
-interface StyledFlatTableCellProps extends Pick<FlatTableCellProps, "align" | "leftPosition" | "rightPosition" | "expandable" | "verticalBorder" | "verticalBorderColor">, PaddingProps {
+interface StyledFlatTableCellProps extends Pick<FlatTableCellProps, "align" | "verticalBorder" | "verticalBorderColor">, PaddingProps {
     makeCellSticky: boolean;
     colWidth?: number;
     isTruncated: boolean;
+    leftPosition: number;
+    rightPosition: number;
+    expandable?: boolean;
 }
 declare const StyledFlatTableCell: import("styled-components").StyledComponent<"td", any, StyledFlatTableCellProps, never>;
-declare const StyledCellContent: import("styled-components").StyledComponent<"div", any, Pick<FlatTableCellProps, "expandable">, never>;
+declare const StyledCellContent: import("styled-components").StyledComponent<"div", any, {
+    expandable?: boolean | undefined;
+}, never>;
 export { StyledFlatTableCell, StyledCellContent };

package/esm/components/flat-table/flat-table-checkbox/flat-table-checkbox.component.d.ts

@@ -13,33 +13,11 @@ export interface FlatTableCheckboxProps extends TagProps {
     onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
     /** The id of the element that labels the input */
     ariaLabelledBy?: string;
-    /**
-     * @private
-     * @ignore
-     * Sets the left position when sticky column found
-     */
-    leftPosition?: number;
-    /**
-     * @private
-     * @ignore
-     * Sets the right position when sticky column found
-     */
-    rightPosition?: number;
-    /**
-     * @private
-     * @ignore
-     * Index of cell within row
-     */
-    cellIndex?: number;
-    /**
-     * @private
-     * @ignore
-     * Callback to report the offsetWidth
-     */
-    reportCellWidth?: (offset: number, index?: number) => void;
+    /** Sets an id string on the element */
+    id?: string;
 }
 export declare const FlatTableCheckbox: {
-    ({ as, checked, onChange, selectable, onClick, leftPosition, rightPosition, cellIndex, reportCellWidth, ariaLabelledBy, ...rest }: FlatTableCheckboxProps): React.JSX.Element;
+    ({ as, checked, onChange, selectable, onClick, ariaLabelledBy, id, ...rest }: FlatTableCheckboxProps): React.JSX.Element;
     displayName: string;
 };
 export default FlatTableCheckbox;

package/esm/components/flat-table/flat-table-checkbox/flat-table-checkbox.component.js

@@ -1,28 +1,31 @@
 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); }
-import React, { useLayoutEffect, useRef } from "react";
+import React, { useContext, useRef } from "react";
 import PropTypes from "prop-types";
 import StyledFlatTableCheckbox from "./flat-table-checkbox.style";
 import { Checkbox } from "../../checkbox";
 import Events from "../../../__internal__/utils/helpers/events/events";
+import tagComponent from "../../../__internal__/utils/helpers/tags";
+import guid from "../../../__internal__/utils/helpers/guid";
+import FlatTableRowContext from "../flat-table-row/__internal__/flat-table-row-context";
 export const FlatTableCheckbox = ({
   as = "td",
   checked,
   onChange,
   selectable = true,
   onClick,
-  leftPosition,
-  rightPosition,
-  cellIndex,
-  reportCellWidth,
   ariaLabelledBy,
+  id,
   ...rest
 }) => {
   const ref = useRef(null);
-  useLayoutEffect(() => {
-    if (ref.current && reportCellWidth) {
-      reportCellWidth(ref.current.offsetWidth, cellIndex);
-    }
-  }, [reportCellWidth, cellIndex]);
+  const internalId = useRef(id || guid());
+  const {
+    leftPositions,
+    rightPositions
+  } = useContext(FlatTableRowContext);
+  const leftPosition = leftPositions[internalId.current];
+  const rightPosition = rightPositions[internalId.current];
+  const makeCellSticky = leftPosition !== undefined || rightPosition !== undefined;
   const dataElement = `flat-table-checkbox-${as === "td" ? "cell" : "header"}`;
   const handleClick = event => {
     event.stopPropagation();
@@ -35,13 +38,17 @@ export const FlatTableCheckbox = ({
   };
   return /*#__PURE__*/React.createElement(StyledFlatTableCheckbox, _extends({
     ref: ref,
-    makeCellSticky: !!reportCellWidth,
-    className: reportCellWidth ? "isSticky" : undefined,
+    makeCellSticky: makeCellSticky,
+    className: makeCellSticky ? "isSticky" : undefined,
     leftPosition: leftPosition,
     rightPosition: rightPosition,
-    "data-element": dataElement,
     as: as
-  }, rest), selectable && /*#__PURE__*/React.createElement(Checkbox, {
+  }, tagComponent("flat-table-checkbox", {
+    "data-element": dataElement,
+    ...rest
+  }), {
+    id: internalId.current
+  }), selectable && /*#__PURE__*/React.createElement(Checkbox, {
     checked: checked,
     onChange: onChange,
     name: "flat-table-checkbox",

package/esm/components/flat-table/flat-table-checkbox/flat-table-checkbox.style.d.ts

@@ -1,6 +1,8 @@
 import { FlatTableCheckboxProps } from "./flat-table-checkbox.component";
-interface StyledFlatTableCheckboxProps extends Pick<FlatTableCheckboxProps, "as" | "leftPosition" | "rightPosition"> {
+interface StyledFlatTableCheckboxProps extends Pick<FlatTableCheckboxProps, "as"> {
     makeCellSticky: boolean;
+    leftPosition: number;
+    rightPosition: number;
 }
 declare const StyledFlatTableCheckbox: import("styled-components").StyledComponent<"td", any, StyledFlatTableCheckboxProps, never>;
 export default StyledFlatTableCheckbox;

package/esm/components/flat-table/flat-table-head/flat-table-head.component.d.ts

@@ -3,5 +3,9 @@ export interface FlatTableHeadProps {
     /** Array of FlatTableRow. */
     children: React.ReactNode;
 }
+interface FlatTableHeadContextProps {
+    stickyOffsets: Record<string, number>;
+}
+export declare const FlatTableHeadContext: React.Context<FlatTableHeadContextProps>;
 export declare const FlatTableHead: ({ children, ...rest }: FlatTableHeadProps) => React.JSX.Element;
 export default FlatTableHead;

package/esm/components/flat-table/flat-table-head/flat-table-head.component.js

@@ -1,36 +1,33 @@
+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); }
 import React, { useEffect, useState, useRef } from "react";
 import PropTypes from "prop-types";
 import StyledFlatTableHead from "./flat-table-head.style";
-import FlatTableRowHeader from "../flat-table-row-header";
-const getRefs = length => Array.from({
-  length
-}, () => /*#__PURE__*/React.createRef());
+import { buildPositionMap } from "../__internal__";
+export const FlatTableHeadContext = /*#__PURE__*/React.createContext({
+  stickyOffsets: {}
+});
 export const FlatTableHead = ({
   children,
   ...rest
 }) => {
-  const [rowHeights, setRowHeights] = useState([]);
-  const refs = useRef(getRefs(React.Children.count(children)));
-  let hasFlatTableRowHeader;
+  const ref = useRef(null);
+  const [stickyOffsets, setStickyOffsets] = useState({});
   useEffect(() => {
-    if (React.Children.count(children) > 1) {
-      setRowHeights(refs.current.map(ref => ref.current?.clientHeight || 0));
+    const headerRows = ref.current?.querySelectorAll("tr");
+
+    /* istanbul ignore else */
+    if (headerRows) {
+      setStickyOffsets(buildPositionMap(Array.from(headerRows), "offsetHeight"));
+    } else {
+      setStickyOffsets({});
     }
   }, [children]);
-  if (React.Children.count(children) === 1) {
-    return /*#__PURE__*/React.createElement(StyledFlatTableHead, rest, children);
-  }
-  return /*#__PURE__*/React.createElement(StyledFlatTableHead, rest, React.Children.map(children, (child, index) => {
-    /* Applies left border if preceding row has a FlatTableRowHeader and current one does not. 
-       This is only needed when the preceding row has rowSpans applied, 
-       as in any other use case the rows will all have FlatTableRowHeaders */
-    const previousRowHasHeader = !!hasFlatTableRowHeader;
-    hasFlatTableRowHeader = /*#__PURE__*/React.isValidElement(child) && !!React.Children.toArray(child.props.children).find(c => /*#__PURE__*/React.isValidElement(c) && c.type.displayName === FlatTableRowHeader.displayName);
-    return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.cloneElement(child, {
-      stickyOffset: rowHeights.slice(0, index).reduce((a, b) => a + b, 0),
-      ref: refs.current[index],
-      applyBorderLeft: previousRowHasHeader && !hasFlatTableRowHeader
-    });
-  }));
+  return /*#__PURE__*/React.createElement(StyledFlatTableHead, _extends({
+    ref: ref
+  }, rest), /*#__PURE__*/React.createElement(FlatTableHeadContext.Provider, {
+    value: {
+      stickyOffsets
+    }
+  }, children));
 };
 export default FlatTableHead;

package/esm/components/flat-table/flat-table-header/flat-table-header.component.d.ts

@@ -18,35 +18,11 @@ export interface FlatTableHeaderProps extends PaddingProps {
     verticalBorderColor?: string;
     /** Column width, pass a number to set a fixed width in pixels */
     width?: number;
-    /** Sets an id string on the DOM element */
+    /** Sets an id string on the element */
     id?: string;
-    /**
-     * @private
-     * @ignore
-     * Sets the left position when sticky column found
-     */
-    leftPosition?: number;
-    /**
-     * @private
-     * @ignore
-     * Sets the right position when sticky column found
-     */
-    rightPosition?: number;
-    /**
-     * @private
-     * @ignore
-     * Index of cell within row
-     */
-    cellIndex?: number;
-    /**
-     * @private
-     * @ignore
-     * Callback to report the offsetWidth
-     */
-    reportCellWidth?: (offset: number, index?: number) => void;
 }
 export declare const FlatTableHeader: {
-    ({ align, children, colspan, rowspan, width, py, px, reportCellWidth, cellIndex, leftPosition, rightPosition, ...rest }: FlatTableHeaderProps): React.JSX.Element;
+    ({ align, children, colspan, rowspan, width, py, px, id, ...rest }: FlatTableHeaderProps): React.JSX.Element;
     defaultProps: {
         align: string;
     };