carbon-react 111.12.3 → 111.12.4

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

@@ -1,4 +1,5 @@
 function _extends() { _extends = Object.assign || 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 from "react";
 import PropTypes from "prop-types";
 const FlatTableBody = /*#__PURE__*/React.forwardRef(({

package/esm/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.js

@@ -1,4 +1,5 @@
 function _extends() { _extends = Object.assign || 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 { useDrop, DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
@@ -6,6 +7,7 @@ import PropTypes from "prop-types";
 import StyledIcon from "../../icon/icon.style";
 import StyledFlatTableBodyDraggable from "./flat-table-body-draggable.style";
 import FlatTableCell from "../flat-table-cell/flat-table-cell.component";
+
 const DropTarget = ({
   children,
   getOrder,
@@ -17,10 +19,12 @@ const DropTarget = ({
     hover: (_, monitor) => {
       if (!isDragging && monitor.isOver()) setIsDragging(true);
     },
+
     drop() {
       setIsDragging(false);
       getOrder();
     }
+
   });
   return /*#__PURE__*/React.createElement(StyledFlatTableBodyDraggable, _extends({
     "data-testid": "flat-table-body-draggable",
@@ -28,10 +32,12 @@ const DropTarget = ({
     isDragging: isDragging
   }, rest), children);
 };
+
 DropTarget.propTypes = {
   children: PropTypes.node.isRequired,
   getOrder: PropTypes.func
 };
+
 const FlatTableBodyDraggable = ({
   children,
   getOrder,
@@ -46,6 +52,7 @@ const FlatTableBodyDraggable = ({
       isFirstRender.current = false;
     }
   }, [children]);
+
   const findItem = id => {
     const draggableItem = draggableItems.filter(item => `${item.props.id}` === id)[0];
     return {
@@ -53,6 +60,7 @@ const FlatTableBodyDraggable = ({
       index: draggableItems.indexOf(draggableItem)
     };
   };
+
   const moveItem = (id, atIndex) => {
     const {
       draggableItem,
@@ -64,13 +72,16 @@ const FlatTableBodyDraggable = ({
     copyOfDraggableItems.splice(atIndex, 0, draggableItem);
     setDraggableItems(copyOfDraggableItems);
   };
+
   const getItemsId = () => {
     if (!getOrder) {
       return;
     }
+
     const draggableItemIds = draggableItems.map(draggableItem => draggableItem.props.id);
     getOrder(draggableItemIds);
   };
+
   return /*#__PURE__*/React.createElement(DndProvider, {
     backend: HTML5Backend
   }, /*#__PURE__*/React.createElement(DropTarget, _extends({
@@ -86,9 +97,11 @@ const FlatTableBodyDraggable = ({
     type: "drag"
   })), item.props.children]))));
 };
+
 FlatTableBodyDraggable.propTypes = {
   /** Callback fired when order is changed */
   getOrder: PropTypes.func,
+
   /** Array of FlatTableRow. */
   children: PropTypes.node.isRequired
 };

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

@@ -1,4 +1,5 @@
 function _extends() { _extends = Object.assign || 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 PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
@@ -6,6 +7,7 @@ import { StyledFlatTableCell, StyledCellContent } from "./flat-table-cell.style"
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
 import Icon from "../../icon";
 const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
+
 const FlatTableCell = ({
   align = "left",
   children,
@@ -56,63 +58,79 @@ const FlatTableCell = ({
     mr: "8px"
   }), children));
 };
+
 FlatTableCell.propTypes = {
   /** Styled system padding props */
   ...paddingPropTypes,
+
   /** Content alignment */
   align: PropTypes.oneOf(["center", "left", "right"]),
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+
   /** Number of columns that a cell should span */
   colspan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
   /** Number of rows that a cell should span */
   rowspan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
   /** Column width, pass a number to set a fixed width in pixels */
   width: PropTypes.number,
+
   /** Truncate cell content and add ellipsis to any text that overflows */
   truncate: PropTypes.bool,
+
   /** Title text to display if cell content truncates */
   title: PropTypes.string,
+
   /**
    * @private
    * @ignore
    */
   expandable: PropTypes.bool,
+
   /**
    * @private
    * @ignore
    */
   onClick: PropTypes.func,
+
   /**
    * @private
    * @ignore
    */
   onKeyDown: PropTypes.func,
+
   /**
    * @private
    * @ignore
    * Sets the left position when sticky column found
    */
   leftPosition: PropTypes.number,
+
   /**
    * @private
    * @ignore
    * Sets the right position when sticky column found
    */
   rightPosition: PropTypes.number,
+
   /**
    * @private
    * @ignore
    * Index of cell within row
    */
   cellIndex: PropTypes.number,
+
   /**
    * @private
    * @ignore
    * Callback to report the offsetWidth
    */
   reportCellWidth: PropTypes.func,
+
   /** Sets a custom vertical right border */
   verticalBorder: PropTypes.oneOf(["small", "medium", "large"]),
+
   /** Sets a vertical right border color, provide design token, any color from palette or any valid css color value. */
   verticalBorderColor: PropTypes.string
 };

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

@@ -1,8 +1,10 @@
 function _extends() { _extends = Object.assign || 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 PropTypes from "prop-types";
 import StyledFlatTableCheckbox from "./flat-table-checkbox.style";
 import { Checkbox } from "../../checkbox";
+
 const FlatTableCheckbox = ({
   as = "td",
   checked,
@@ -23,13 +25,16 @@ const FlatTableCheckbox = ({
     }
   }, [reportCellWidth, cellIndex]);
   const dataElement = `flat-table-checkbox-${as === "td" ? "cell" : "header"}`;
+
   const handleClick = event => {
     event.stopPropagation();
     if (onClick) onClick(event);
   };
+
   const handleKeyDown = event => {
     event.stopPropagation();
   };
+
   return /*#__PURE__*/React.createElement(StyledFlatTableCheckbox, _extends({
     ref: ref,
     makeCellSticky: !!reportCellWidth,
@@ -48,37 +53,47 @@ const FlatTableCheckbox = ({
     onKeyDown: handleKeyDown
   }));
 };
+
 FlatTableCheckbox.propTypes = {
   /** Prop to polymorphically render either a 'th' or 'td' element */
   as: PropTypes.oneOf(["td", "th"]),
+
   /** Prop to set checked prop on Checkbox */
   checked: PropTypes.bool,
+
   /** Callback to be called onChange in Checkbox */
   onChange: PropTypes.func,
+
   /** Callback function to be called when click event received */
   onClick: PropTypes.func,
+
   /** Whether to render the checkbox or not, defaults to true */
   selectable: PropTypes.bool,
+
   /** The id of the element that labels the input */
   ariaLabelledBy: PropTypes.string,
+
   /**
    * @private
    * @ignore
    * Sets the left position when sticky column found
    */
   leftPosition: PropTypes.number,
+
   /**
    * @private
    * @ignore
    * Sets the right position when sticky column found
    */
   rightPosition: PropTypes.number,
+
   /**
    * @private
    * @ignore
    * Index of cell within row
    */
   cellIndex: PropTypes.number,
+
   /**
    * @private
    * @ignore

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

@@ -2,9 +2,11 @@ import React, { useEffect, useState } 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());
+
 const FlatTableHead = ({
   children,
   ...rest
@@ -15,26 +17,28 @@ const FlatTableHead = ({
   useEffect(() => {
     if (React.Children.count(children) > 1) {
       setRowHeights(refs.map(ref => ref.current.clientHeight));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, []);
+
   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 = React.Children.toArray(child.props.children).find(c => c.type === FlatTableRowHeader);
-    return /*#__PURE__*/React.cloneElement(child, {
-      ...child.props,
+    return /*#__PURE__*/React.cloneElement(child, { ...child.props,
       stickyOffset: rowHeights.slice(0, index).reduce((a, b) => a + b, 0),
       ref: refs[index],
       applyBorderLeft: previousRowHasHeader && !hasFlatTableRowHeader
     });
   }));
 };
+
 FlatTableHead.propTypes = {
   children: PropTypes.node.isRequired
 };

package/esm/components/flat-table/flat-table-header/flat-table-header-utils.js

@@ -2,14 +2,17 @@ const getAlternativeBackgroundColor = colorTheme => {
   switch (colorTheme) {
     case "light":
       return "var(--colorsActionMinor100)";
+
     case "transparent-base":
       return "var(--colorsUtilityMajor025)";
+
     case "transparent-white":
       return "var(--colorsUtilityYang100)";
-
     // default theme is "dark"
+
     default:
       return "var(--colorsActionMinor550)";
   }
 };
+
 export default getAlternativeBackgroundColor;

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

@@ -1,4 +1,5 @@
 function _extends() { _extends = Object.assign || 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, useContext } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
@@ -6,6 +7,7 @@ import StyledFlatTableHeader from "./flat-table-header.style";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
 import { FlatTableThemeContext } from "../flat-table.component";
 const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
+
 const FlatTableHeader = ({
   align,
   children,
@@ -45,44 +47,55 @@ const FlatTableHeader = ({
     px: px
   }, rest), /*#__PURE__*/React.createElement("div", null, children));
 };
+
 FlatTableHeader.propTypes = {
   /** Styled system padding props */
   ...paddingPropTypes,
+
   /** Content alignment */
   align: PropTypes.oneOf(["center", "left", "right"]),
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+
   /** Number of columns that a header cell should span */
   colspan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
   /** Number of rows that a header cell should span */
   rowspan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
   /** Column width, pass a number to set a fixed width in pixels */
   width: PropTypes.number,
+
   /**
    * @private
    * @ignore
    * Sets the left position when sticky column found
    */
   leftPosition: PropTypes.number,
+
   /**
    * @private
    * @ignore
    * Sets the right position when sticky column found
    */
   rightPosition: PropTypes.number,
+
   /**
    * @private
    * @ignore
    * Index of cell within row
    */
   cellIndex: PropTypes.number,
+
   /**
    * @private
    * @ignore
    * Callback to report the offsetWidth
    */
   reportCellWidth: PropTypes.func,
+
   /** If true sets alternative background color */
   alternativeBgColor: PropTypes.bool,
+
   /** Sets a custom vertical right border */
   verticalBorder: PropTypes.oneOf(["small", "medium", "large"])
 };

package/esm/components/flat-table/flat-table-row/__internal__/flat-table-row-draggable.component.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { useDrop, useDrag } from "react-dnd";
 import PropTypes from "prop-types";
+
 const FlatTableRowDraggable = ({
   children,
   id,
@@ -25,6 +26,7 @@ const FlatTableRowDraggable = ({
         originalIndex: oIndex
       } = monitor.getItem();
       const didDrop = monitor.didDrop();
+
       if (!didDrop) {
         moveItem(droppedId, oIndex);
       }
@@ -33,6 +35,7 @@ const FlatTableRowDraggable = ({
   const [, drop] = useDrop({
     accept: "flatTableRow",
     canDrop: () => false,
+
     hover({
       id: draggedId
     }) {
@@ -43,6 +46,7 @@ const FlatTableRowDraggable = ({
         moveItem(draggedId, overIndex);
       }
     }
+
   });
   return /*#__PURE__*/React.cloneElement(children, {
     key: originalIndex,
@@ -51,15 +55,20 @@ const FlatTableRowDraggable = ({
     ref: node => drag(drop(node))
   });
 };
+
 FlatTableRowDraggable.propTypes = {
   /** Array of FlatTableHeader or FlatTableCell. FlatTableRowHeader could also be passed. */
   children: PropTypes.node.isRequired,
+
   /** ID for use in drag and drop functionality */
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
   /** function to find an item in the list of draggable items */
   findItem: PropTypes.func.isRequired,
+
   /** function to reposition an item in the list of draggable items */
   moveItem: PropTypes.func.isRequired,
+
   /** item is draggable */
   draggable: PropTypes.bool
 };

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

@@ -1,4 +1,5 @@
 function _extends() { _extends = Object.assign || 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, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
@@ -53,11 +54,13 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
   const reportCellWidth = useCallback((width, index) => {
     const isLeftSticky = index < lhsRowHeaderIndex;
     const copiedArray = isLeftSticky ? leftStickyCellWidths : rightStickyCellWidths;
+
     if (copiedArray[index] !== undefined) {
       copiedArray[index] = width;
     } else {
       copiedArray.push(width);
     }
+
     if (isLeftSticky) {
       setLeftStickyCellWidths(copiedArray);
     } else {
@@ -66,23 +69,30 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
   }, [lhsRowHeaderIndex, leftStickyCellWidths, rightStickyCellWidths]);
   let interactiveRowProps = {};
   const firstCellIndex = childrenArray[0].type === FlatTableCheckbox ? 1 : 0;
+
   const toggleExpanded = () => setIsExpanded(!isExpanded);
+
   function onKeyDown(ev) {
     const isEnterOrSpaceKey = Event.isEnterKey(ev) || Event.isSpaceKey(ev);
+
     if (expandable && !firstColumnExpandable && document.activeElement === rowRef.current && isEnterOrSpaceKey) {
       ev.preventDefault();
       toggleExpanded();
     }
+
     if (isEnterOrSpaceKey && onClick) {
       onClick(ev);
     }
   }
+
   function handleClick(ev) {
     if (onClick) onClick(ev);
+
     if (expandable && !firstColumnExpandable) {
       toggleExpanded();
     }
   }
+
   if (onClick || expandable) {
     interactiveRowProps = {
       isRowInteractive: !firstColumnExpandable,
@@ -92,18 +102,22 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
       isExpanded
     };
   }
+
   function handleCellKeyDown(ev) {
     const isEnterOrSpaceKey = Event.isEnterKey(ev) || Event.isSpaceKey(ev);
+
     if (isEnterOrSpaceKey) {
       ev.preventDefault();
       toggleExpanded();
     }
   }
+
   const buildPositionArray = (setter, widthsArray, length) => {
     setter([0, ...Array.from({
       length
     }).map((_, index) => widthsArray.slice(0, index + 1).reduce((a, b) => a + b, 0), 0)]);
   };
+
   useLayoutEffect(() => {
     if (leftStickyCellWidths.length && lhsRowHeaderIndex !== -1) {
       buildPositionArray(setLeftPositions, leftStickyCellWidths, lhsRowHeaderIndex);
@@ -117,6 +131,7 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
   useEffect(() => {
     setIsExpanded(expanded);
   }, [expanded]);
+
   const rowComponent = isInSidebar => /*#__PURE__*/React.createElement(StyledFlatTableRow, _extends({
     isInSidebar: isInSidebar,
     expandable: expandable,
@@ -151,11 +166,13 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
       ...child.props
     });
   }));
+
   const draggableComponent = isInSidebar => /*#__PURE__*/React.createElement(FlatTableRowDraggable, {
     id: id,
     moveItem: moveItem,
     findItem: findItem
   }, rowComponent(isInSidebar));
+
   return /*#__PURE__*/React.createElement(DrawerSidebarContext.Consumer, null, ({
     isInSidebar
   }) => /*#__PURE__*/React.createElement(React.Fragment, null, draggable ? draggableComponent(isInSidebar) : rowComponent(isInSidebar), isExpanded && subRows && React.Children.map(subRows, (child, index) => child && /*#__PURE__*/React.cloneElement(child, {
@@ -167,49 +184,67 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
 FlatTableRow.propTypes = {
   /** Overrides default cell color, provide design token, any color from palette or any valid css color value. */
   bgColor: PropTypes.string,
+
   /** Array of FlatTableHeader or FlatTableCell. FlatTableRowHeader could also be passed. */
   children: PropTypes.node.isRequired,
+
   /** Function to handle click event. If provided the Component could be focused with tab key. */
   onClick: PropTypes.func,
+
   /** Allows developers to manually control highlighted state for the row. */
   highlighted: PropTypes.bool,
+
   /** Allows developers to manually control selected state for the row. */
   selected: PropTypes.bool,
+
   /** Allows the row to be expanded, must be used with the `subRows` prop. */
   expandable: PropTypes.bool,
+
   /** Sub rows to be shown when the row is expanded, must be used with the `expandable` prop. */
   subRows: PropTypes.arrayOf(PropTypes.node),
+
   /** Area to click to open sub rows when expandable. Default is `wholeRow` */
   expandableArea: PropTypes.oneOf(["wholeRow", "firstColumn"]),
+
   /** Sets an expandable row to be expanded on start */
   expanded: PropTypes.bool,
+
   /** Sets the color of the bottom border in the row, provide design token, any color from palette or any valid css color value. */
   horizontalBorderColor: PropTypes.string,
+
   /** Sets the weight of the bottom border in the row */
   horizontalBorderSize: PropTypes.oneOf(["small", "medium", "large"]),
+
   /** @ignore @private */
   isSubRow: PropTypes.bool,
+
   /** @ignore @private */
   isFirstSubRow: PropTypes.bool,
+
   /** @ignore @private position in header if multiple rows */
   stickyOffset: PropTypes.number,
+
   /** @ignore @private applies a border-left to the first child */
   applyBorderLeft: PropTypes.bool,
+
   /** ID for use in drag and drop functionality
    * @private
    * @ignore
    */
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
   /**
    * @private
    * @ignore
    */
   findItem: PropTypes.func,
+
   /**
    * @private
    * @ignore
    */
   moveItem: PropTypes.func,
+
   /** @ignore @private position in header if multiple rows */
   draggable: PropTypes.bool
 };

package/esm/components/flat-table/flat-table-row/flat-table-row.style.js

@@ -10,16 +10,19 @@ const horizontalBorderSizes = {
   medium: "2px",
   large: "4px"
 };
+
 const getLeftStickyStyling = index => index === 0 && css`
     &:first-of-type::before {
       border-left: 3px solid var(--colorsSemanticFocus500);
     }
   `;
+
 const getRightStickyStyling = (index, totalChildren) => index === totalChildren - 1 && css`
     &:last-of-type {
       border-right: 2px solid var(--colorsSemanticFocus500);
     }
   `;
+
 const stickyColumnFocusStyling = theme => {
   return `
       width: calc(100% + 1px);
@@ -39,32 +42,38 @@ const stickyColumnFocusStyling = theme => {
     }
   `;
 };
+
 const borderColor = colorTheme => {
   switch (colorTheme) {
     case "light":
       return "var(--colorsUtilityMajor100)";
+
     case "transparent-base":
       return "var(--colorsUtilityMajor025)";
+
     case "transparent-white":
       return "var(--colorsUtilityYang100)";
-
     // default theme is "dark"
+
     default:
       return "var(--colorsUtilityMajor400)";
   }
 };
+
 const verticalBorderColor = colorTheme => {
   switch (colorTheme) {
     case "transparent-base":
       return "var(--colorsUtilityMajor025)";
+
     case "transparent-white":
       return "var(--colorsUtilityYang100)";
-
     // default theme is "dark"
+
     default:
       return "var(--colorsUtilityMajor100)";
   }
 };
+
 const StyledFlatTableRow = styled.tr`
   ${({
   bgColor,