carbon-react 118.5.0 → 118.5.2

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

@@ -1,5 +1,4 @@
-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); }
-
+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, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
@@ -10,28 +9,29 @@ import FlatTableCheckbox from "../flat-table-checkbox";
 import FlatTableRowHeader from "../flat-table-row-header";
 import FlatTableRowDraggable from "./__internal__/flat-table-row-draggable.component";
 import { FlatTableThemeContext } from "../flat-table.component";
-const FlatTableRow = /*#__PURE__*/React.forwardRef(({
-  children,
-  onClick,
-  expandable,
-  expandableArea = "wholeRow",
-  expanded = false,
-  isSubRow,
-  isFirstSubRow,
-  stickyOffset,
-  highlighted,
-  selected,
-  subRows,
-  bgColor,
-  horizontalBorderColor,
-  horizontalBorderSize = "small",
-  applyBorderLeft,
-  id,
-  draggable,
-  findItem,
-  moveItem,
-  ...rest
-}, ref) => {
+const FlatTableRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    onClick,
+    expandable,
+    expandableArea = "wholeRow",
+    expanded = false,
+    isSubRow,
+    isFirstSubRow,
+    stickyOffset,
+    highlighted,
+    selected,
+    subRows,
+    bgColor,
+    horizontalBorderColor,
+    horizontalBorderSize = "small",
+    applyBorderLeft,
+    id,
+    draggable,
+    findItem,
+    moveItem,
+    ...rest
+  } = _ref;
   const [isExpanded, setIsExpanded] = useState(expanded);
   let rowRef = useRef();
   if (ref) rowRef = ref;
@@ -54,13 +54,11 @@ 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 {
@@ -69,30 +67,23 @@ 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,
@@ -102,22 +93,18 @@ 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);
@@ -131,7 +118,6 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
   useEffect(() => {
     setIsExpanded(expanded);
   }, [expanded]);
-
   const rowComponent = isInSidebar => /*#__PURE__*/React.createElement(StyledFlatTableRow, _extends({
     isInSidebar: isInSidebar,
     expandable: expandable,
@@ -166,85 +152,68 @@ 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, {
-    isSubRow: true,
-    isFirstSubRow: index === 0,
-    ...child.props
-  }))));
+  return /*#__PURE__*/React.createElement(DrawerSidebarContext.Consumer, null, _ref2 => {
+    let {
+      isInSidebar
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, draggable ? draggableComponent(isInSidebar) : rowComponent(isInSidebar), isExpanded && subRows && React.Children.map(subRows, (child, index) => child && /*#__PURE__*/React.cloneElement(child, {
+      isSubRow: true,
+      isFirstSubRow: index === 0,
+      ...child.props
+    })));
+  });
 });
 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,19 +10,16 @@ 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);
@@ -42,64 +39,59 @@ 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 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 theme is "dark"
     default:
       return "var(--colorsUtilityMajor100)";
   }
 };
-
 const StyledFlatTableRow = styled.tr`
-  ${({
-  bgColor,
-  horizontalBorderColor,
-  horizontalBorderSize,
-  stickyOffset,
-  isRowInteractive,
-  isFirstColumnInteractive,
-  lhsRowHeaderIndex,
-  rhsRowHeaderIndex,
-  totalChildren,
-  firstCellIndex,
-  colorTheme,
-  expandable,
-  selected,
-  highlighted,
-  isExpanded,
-  isInSidebar,
-  isSubRow,
-  isFirstSubRow,
-  size,
-  theme,
-  applyBorderLeft,
-  isDragging,
-  draggable
-}) => {
+  ${_ref => {
+  let {
+    bgColor,
+    horizontalBorderColor,
+    horizontalBorderSize,
+    stickyOffset,
+    isRowInteractive,
+    isFirstColumnInteractive,
+    lhsRowHeaderIndex,
+    rhsRowHeaderIndex,
+    totalChildren,
+    firstCellIndex,
+    colorTheme,
+    expandable,
+    selected,
+    highlighted,
+    isExpanded,
+    isInSidebar,
+    isSubRow,
+    isFirstSubRow,
+    size,
+    theme,
+    applyBorderLeft,
+    isDragging,
+    draggable
+  } = _ref;
   const backgroundColor = bgColor ? toColor(theme, bgColor) : undefined;
   const customBorderColor = horizontalBorderColor ? toColor(theme, horizontalBorderColor) : undefined;
   const colorOfSelected = isInSidebar ? "var(--colorsUtilityMajor150)" : "var(--colorsUtilityMajor075)";

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

@@ -1,5 +1,4 @@
-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); }
-
+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, { useCallback } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
@@ -7,23 +6,23 @@ import { filterStyledSystemPaddingProps } from "../../../style/utils";
 import Icon from "../../icon";
 import { StyledFlatTableRowHeader, StyledFlatTableRowHeaderContent } from "./flat-table-row-header.style";
 const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
-
-const FlatTableRowHeader = ({
-  align = "left",
-  children,
-  width,
-  py,
-  px,
-  expandable = false,
-  onClick,
-  onKeyDown,
-  leftPosition,
-  rightPosition,
-  truncate,
-  title,
-  stickyAlignment = "left",
-  ...rest
-}) => {
+const FlatTableRowHeader = _ref => {
+  let {
+    align = "left",
+    children,
+    width,
+    py,
+    px,
+    expandable = false,
+    onClick,
+    onKeyDown,
+    leftPosition,
+    rightPosition,
+    truncate,
+    title,
+    stickyAlignment = "left",
+    ...rest
+  } = _ref;
   const handleOnClick = useCallback(ev => {
     if (expandable && onClick) onClick(ev);
   }, [expandable, onClick]);
@@ -53,59 +52,45 @@ const FlatTableRowHeader = ({
     mr: "8px"
   }), children));
 };
-
 FlatTableRowHeader.propTypes = {
   /** Styled system padding props */
   ...paddingPropTypes,
-
   /** Content alignment */
   align: PropTypes.oneOf(["center", "left", "right"]),
-
   /** RowHeader content */
   children: PropTypes.oneOfType([PropTypes.node, 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,
-
   /** 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,
-
   /** Defines whether the column should be sticky on the left or right hand side of the Table */
   stickyAlignment: PropTypes.oneOf(["left", "right"]),
-
   /**
    * @private
    * @ignore
    */
   leftPosition: PropTypes.number,
-
   /**
    * @private
    * @ignore

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

@@ -8,18 +8,20 @@ const verticalBorderSizes = {
   large: "4px"
 };
 const StyledFlatTableRowHeader = styled.th`
-  ${({
-  align,
-  theme,
-  colWidth,
-  leftPosition,
-  rightPosition,
-  isTruncated,
-  expandable,
-  verticalBorder,
-  verticalBorderColor,
-  stickyAlignment
-}) => css`
+  ${_ref => {
+  let {
+    align,
+    theme,
+    colWidth,
+    leftPosition,
+    rightPosition,
+    isTruncated,
+    expandable,
+    verticalBorder,
+    verticalBorderColor,
+    stickyAlignment
+  } = _ref;
+  return css`
     background-color: var(--colorsUtilityYang100);
     border: 1px solid var(--colorsUtilityMajor100);
     border-top: none;
@@ -73,18 +75,22 @@ const StyledFlatTableRowHeader = styled.th`
     ${expandable && css`
       white-space: nowrap;
     `}
-  `}
+  `;
+}}
 `;
 StyledFlatTableRowHeader.defaultProps = {
   theme: baseTheme
 };
 const StyledFlatTableRowHeaderContent = styled.div`
-  ${({
-  expandable
-}) => expandable && css`
+  ${_ref2 => {
+  let {
+    expandable
+  } = _ref2;
+  return expandable && css`
       display: flex;
       align-items: center;
       line-height: 1em;
-    `}
+    `;
+}}
 `;
 export { StyledFlatTableRowHeader, StyledFlatTableRowHeaderContent };