carbon-react 118.5.0 → 118.5.2

package/esm/components/flat-table/flat-table.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, { useLayoutEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
@@ -8,24 +7,24 @@ import { DrawerSidebarContext } from "../drawer";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 export const FlatTableThemeContext = /*#__PURE__*/React.createContext({});
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
-
-const FlatTable = ({
-  caption,
-  children,
-  hasStickyHead,
-  colorTheme,
-  footer,
-  hasStickyFooter = false,
-  height,
-  isZebra,
-  size,
-  hasMaxHeight = false,
-  ariaDescribedby,
-  minHeight,
-  overflowX,
-  width,
-  ...rest
-}) => {
+const FlatTable = _ref => {
+  let {
+    caption,
+    children,
+    hasStickyHead,
+    colorTheme,
+    footer,
+    hasStickyFooter = false,
+    height,
+    isZebra,
+    size,
+    hasMaxHeight = false,
+    ariaDescribedby,
+    minHeight,
+    overflowX,
+    width,
+    ...rest
+  } = _ref;
   const wrapperRef = useRef(null);
   const tableRef = useRef(null);
   const [hasVerticalScrollbar, setHasVerticalScrollbar] = useState(false);
@@ -38,22 +37,17 @@ const FlatTable = ({
     isZebra,
     size
   };
-
   if (ariaDescribedby) {
     tableStylingProps["aria-describedby"] = ariaDescribedby;
   }
-
   useLayoutEffect(() => {
     const findRow = (rows, isFirstCol) => rows.find((row, index) => {
       const cells = Array.from(row.querySelectorAll("td, th"));
       const cell = isFirstCol ? cells.shift() : cells.pop();
-      const rowSpan = cell === null || cell === void 0 ? void 0 : cell.getAttribute("rowspan");
+      const rowSpan = cell?.getAttribute("rowspan");
       return rowSpan >= index + 1;
     });
-
     if (wrapperRef.current && tableRef.current) {
-      var _tableRef$current;
-
       const {
         offsetHeight,
         offsetWidth
@@ -63,108 +57,95 @@ const FlatTable = ({
         bottom,
         right,
         left
-      } = (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.getBoundingClientRect();
+      } = tableRef.current?.getBoundingClientRect();
       setHasVerticalScrollbar(bottom - top > offsetHeight);
       setHasHorizontalScrollbar(right - left > offsetWidth);
       const body = tableRef.current.querySelector("tbody");
-      const bodyRows = body ? Array.from(body === null || body === void 0 ? void 0 : body.querySelectorAll("tr")) : [];
+      const bodyRows = body ? Array.from(body?.querySelectorAll("tr")) : [];
       const {
         length
       } = bodyRows;
       const targetRowFirstCol = findRow(bodyRows.slice(0, length - 1).reverse(), true);
       const targetRowLastCol = findRow(bodyRows.slice(0, length - 1).reverse());
-
       if (targetRowFirstCol) {
         setFirstColRowSpanIndex(bodyRows.indexOf(targetRowFirstCol));
       }
-
       if (targetRowLastCol) {
         setLastColRowSpanIndex(bodyRows.indexOf(targetRowLastCol));
       }
     }
   }, [footer, children, height, minHeight]);
-  return /*#__PURE__*/React.createElement(DrawerSidebarContext.Consumer, null, ({
-    isInSidebar
-  }) => /*#__PURE__*/React.createElement(StyledFlatTableWrapper, _extends({
-    ref: wrapperRef,
-    "data-component": "flat-table-wrapper",
-    isInSidebar: isInSidebar,
-    hasStickyHead: hasStickyHead,
-    colorTheme: colorTheme,
-    minHeight: minHeight,
-    overflowY: !isInSidebar && (hasStickyHead || hasStickyFooter) ? "auto" : undefined,
-    height: addDefaultHeight && !hasMaxHeight ? "99%" : height,
-    maxHeight: hasMaxHeight ? "100%" : undefined,
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: hasStickyFooter || height ? "space-between" : undefined,
-    tabIndex: "0",
-    role: "region",
-    overflowX: width ? "hidden" : undefined,
-    width: width,
-    hasStickyFooter: hasStickyFooter,
-    hasVerticalScrollbar: hasVerticalScrollbar,
-    hasHorizontalScrollbar: hasHorizontalScrollbar,
-    hasFooter: !!footer,
-    firstColRowSpanIndex: firstColRowSpanIndex,
-    lastColRowSpanIndex: lastColRowSpanIndex
-  }, rest), /*#__PURE__*/React.createElement(StyledTableContainer, {
-    overflowX: overflowX,
-    width: width
-  }, /*#__PURE__*/React.createElement(StyledFlatTable, _extends({
-    ref: tableRef,
-    "data-component": "flat-table"
-  }, tableStylingProps), caption ? /*#__PURE__*/React.createElement("caption", null, caption) : null, /*#__PURE__*/React.createElement(FlatTableThemeContext.Provider, {
-    value: {
-      colorTheme,
-      size
-    }
-  }, children)), footer && /*#__PURE__*/React.createElement(StyledFlatTableFooter, {
-    hasStickyFooter: hasStickyFooter
-  }, footer))));
+  return /*#__PURE__*/React.createElement(DrawerSidebarContext.Consumer, null, _ref2 => {
+    let {
+      isInSidebar
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(StyledFlatTableWrapper, _extends({
+      ref: wrapperRef,
+      "data-component": "flat-table-wrapper",
+      isInSidebar: isInSidebar,
+      hasStickyHead: hasStickyHead,
+      colorTheme: colorTheme,
+      minHeight: minHeight,
+      overflowY: !isInSidebar && (hasStickyHead || hasStickyFooter) ? "auto" : undefined,
+      height: addDefaultHeight && !hasMaxHeight ? "99%" : height,
+      maxHeight: hasMaxHeight ? "100%" : undefined,
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: hasStickyFooter || height ? "space-between" : undefined,
+      tabIndex: "0",
+      role: "region",
+      overflowX: width ? "hidden" : undefined,
+      width: width,
+      hasStickyFooter: hasStickyFooter,
+      hasVerticalScrollbar: hasVerticalScrollbar,
+      hasHorizontalScrollbar: hasHorizontalScrollbar,
+      hasFooter: !!footer,
+      firstColRowSpanIndex: firstColRowSpanIndex,
+      lastColRowSpanIndex: lastColRowSpanIndex
+    }, rest), /*#__PURE__*/React.createElement(StyledTableContainer, {
+      overflowX: overflowX,
+      width: width
+    }, /*#__PURE__*/React.createElement(StyledFlatTable, _extends({
+      ref: tableRef,
+      "data-component": "flat-table"
+    }, tableStylingProps), caption ? /*#__PURE__*/React.createElement("caption", null, caption) : null, /*#__PURE__*/React.createElement(FlatTableThemeContext.Provider, {
+      value: {
+        colorTheme,
+        size
+      }
+    }, children)), footer && /*#__PURE__*/React.createElement(StyledFlatTableFooter, {
+      hasStickyFooter: hasStickyFooter
+    }, footer)));
+  });
 };
-
-FlatTable.propTypes = { ...marginPropTypes,
-
+FlatTable.propTypes = {
+  ...marginPropTypes,
   /** The HTML id of the element that contains a description of this table. */
   ariaDescribedby: PropTypes.string,
-
   /** A string to render as the table's caption */
   caption: PropTypes.string,
-
   /** FlatTableHead and FlatTableBody */
   children: PropTypes.node.isRequired,
-
   /** If true, the header does not scroll with the content */
   hasStickyHead: PropTypes.bool,
-
   /** `FlatTable` color theme */
   colorTheme: PropTypes.oneOf(["light", "transparent-base", "transparent-white", "dark"]),
-
   /** Content to be rendered at the foot of the table */
   footer: PropTypes.node,
-
   /** If true, the header does not scroll with the content */
   hasStickyFooter: PropTypes.bool,
-
   /** Set the height of the table. String can be any valid CSS string, numbers will be converted to pixels. */
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
   /** Set the min-height of the table. A string can be any valid CSS string, numbers will be converted to pixels. */
   minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
   /** Toggles the zebra striping for the table rows */
   isZebra: PropTypes.bool,
-
   /** Used to define the tables size Renders as: 'compact', 'small', 'medium', 'large' and 'extraLarge' */
   size: PropTypes.oneOf(["compact", "small", "medium", "large", "extraLarge"]),
-
   /** Applies max-height of 100% to FlatTable if true */
   hasMaxHeight: PropTypes.bool,
-
   /** Set the overflow X of the table wrapper. Any valid CSS string */
   overflowX: PropTypes.string,
-
   /** Width of the table. Any valid CSS string */
   width: PropTypes.string
 };

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

@@ -16,14 +16,17 @@ const StyledTableContainer = styled.div`
   display: grid;
   grid-auto-rows: min-content;
 
-  ${({
-  width,
-  overflowX
-}) => width && css`
+  ${_ref => {
+  let {
+    width,
+    overflowX
+  } = _ref;
+  return width && css`
       width: ${width};
 
       ${overflowX && `overflow-x: ${overflowX};`}
-    `}
+    `;
+}}
 `;
 const StyledFlatTable = styled.table`
   border-collapse: separate;
@@ -36,9 +39,11 @@ const StyledFlatTable = styled.table`
     border-top-right-radius: var(--borderRadius100);
   }
 
-  ${({
-  caption
-}) => caption && css`
+  ${_ref2 => {
+  let {
+    caption
+  } = _ref2;
+  return caption && css`
       caption {
         clip: rect(1px, 1px, 1px, 1px);
         height: 1px;
@@ -47,11 +52,13 @@ const StyledFlatTable = styled.table`
         position: absolute;
         top: -99999px;
       }
-    `}
+    `;
+}}
 
-  ${({
-  size
-}) => {
+  ${_ref3 => {
+  let {
+    size
+  } = _ref3;
   const {
     height,
     fontSize,
@@ -73,9 +80,11 @@ const StyledFlatTable = styled.table`
     `;
 }}
 
-  ${({
-  isZebra
-}) => isZebra && css`
+  ${_ref4 => {
+  let {
+    isZebra
+  } = _ref4;
+  return isZebra && css`
       ${StyledFlatTableRow}:nth-child(2n) {
         ${StyledFlatTableRowHeader},
         ${StyledFlatTableCell},
@@ -90,7 +99,8 @@ const StyledFlatTable = styled.table`
           background-color: var(--colorsUtilityMajor025);
         }
       }
-    `}
+    `;
+}}
 `;
 StyledFlatTable.defaultProps = {
   size: "medium"
@@ -98,17 +108,22 @@ StyledFlatTable.defaultProps = {
 const StyledFlatTableWrapper = styled(Box)`
   border-top-left-radius: var(--borderRadius100);
   border-top-right-radius: var(--borderRadius100);
-  ${({
-  hasStickyFooter,
-  hasHorizontalScrollbar
-}) => !hasStickyFooter && !hasHorizontalScrollbar && css`
+  ${_ref5 => {
+  let {
+    hasStickyFooter,
+    hasHorizontalScrollbar
+  } = _ref5;
+  return !hasStickyFooter && !hasHorizontalScrollbar && css`
       border-bottom-left-radius: var(--borderRadius100);
       border-bottom-right-radius: var(--borderRadius100);
-    `}
+    `;
+}}
 
-  ${({
-  isInSidebar
-}) => css`
+  ${_ref6 => {
+  let {
+    isInSidebar
+  } = _ref6;
+  return css`
       box-sizing: border-box;
 
       :focus {
@@ -124,11 +139,13 @@ const StyledFlatTableWrapper = styled(Box)`
       }
 
       ${isInSidebar ? "min-width: fit-content" : `box-shadow: inset 0px 0px 0px 1px var(--colorsUtilityMajor100)`};
-    `}
+    `;
+}}
 
-  ${({
-  colorTheme
-}) => {
+  ${_ref7 => {
+  let {
+    colorTheme
+  } = _ref7;
   switch (colorTheme) {
     case "light":
       return css`
@@ -145,7 +162,6 @@ const StyledFlatTableWrapper = styled(Box)`
             border-left-color: var(--colorsUtilityMajor150);
           }
         `;
-
     case "transparent-base":
       return css`
           ${StyledFlatTableHeader},
@@ -161,7 +177,6 @@ const StyledFlatTableWrapper = styled(Box)`
             border-left-color: var(--colorsUtilityMajor025);
           }
         `;
-
     case "transparent-white":
       return css`
           ${StyledFlatTableHeader},
@@ -178,7 +193,6 @@ const StyledFlatTableWrapper = styled(Box)`
           }
         `;
     // default theme is "dark"
-
     default:
       return css`
           ${StyledFlatTableHead} ${StyledFlatTableCheckbox},
@@ -200,9 +214,11 @@ const StyledFlatTableWrapper = styled(Box)`
   }
 }}
 
-  ${({
-  isInSidebar
-}) => isInSidebar && css`
+  ${_ref8 => {
+  let {
+    isInSidebar
+  } = _ref8;
+  return isInSidebar && css`
       ${StyledFlatTableHead} {
         background-color: var(--colorsUtilityMajor040);
       }
@@ -213,26 +229,33 @@ const StyledFlatTableWrapper = styled(Box)`
         color: var(--colorsUtilityYin090);
         border-bottom-color: var(--colorsUtilityMajor100);
       }
-    `}
+    `;
+}}
 
-  ${({
-  hasStickyHead,
-  theme
-}) => hasStickyHead && css`
+  ${_ref9 => {
+  let {
+    hasStickyHead,
+    theme
+  } = _ref9;
+  return hasStickyHead && css`
       ${StyledFlatTableHead} {
         position: sticky;
         top: 0;
         left: 0;
         z-index: ${theme.zIndex.overlay + ROW_HEADER_OVERLAY_INCREMENT};
       }
-    `}
+    `;
+}}
 
   ${StyledFlatTableHead} ${StyledFlatTableRowHeader},
   ${StyledFlatTableHeader}.isSticky,
   ${StyledFlatTableHead} ${StyledFlatTableCheckbox}.isSticky {
-    z-index: ${({
-  theme
-}) => theme.zIndex.overlay + ROW_HEADER_OVERLAY_INCREMENT};
+    z-index: ${_ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.zIndex.overlay + ROW_HEADER_OVERLAY_INCREMENT;
+}};
   }
 
   thead ${StyledFlatTableHeader}.isSticky, ${StyledFlatTableCheckbox}.isSticky {
@@ -240,9 +263,12 @@ const StyledFlatTableWrapper = styled(Box)`
   }
 
   ${StyledFlatTableHeader}, ${StyledFlatTableCheckbox} {
-    z-index: ${({
-  theme
-}) => theme.zIndex.overlay + HEADER_OVERLAY_INCREMENT};
+    z-index: ${_ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.zIndex.overlay + HEADER_OVERLAY_INCREMENT;
+}};
   }
 
   thead {
@@ -250,13 +276,16 @@ const StyledFlatTableWrapper = styled(Box)`
       th:first-of-type {
         border-top-left-radius: var(--borderRadius100);
       }
-      ${({
-  hasVerticalScrollbar
-}) => !hasVerticalScrollbar && css`
+      ${_ref12 => {
+  let {
+    hasVerticalScrollbar
+  } = _ref12;
+  return !hasVerticalScrollbar && css`
           th:last-of-type {
             border-top-right-radius: var(--borderRadius100);
           }
-        `}
+        `;
+}}
     }
   }
 
@@ -265,80 +294,103 @@ const StyledFlatTableWrapper = styled(Box)`
     ${StyledFlatTableCell}.isSticky,
     tbody
     ${StyledFlatTableCheckbox}.isSticky {
-    z-index: ${({
-  theme
-}) => theme.zIndex.overlay};
+    z-index: ${_ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.zIndex.overlay;
+}};
   }
 
-  ${({
-  hasFooter
-}) => hasFooter && css`
+  ${_ref14 => {
+  let {
+    hasFooter
+  } = _ref14;
+  return hasFooter && css`
     tr:last-child:focus {
       :after {
         border-bottom-left-radius: var(--borderRadius000);
         border-bottom-right-radius: var(--borderRadius000);
       }
-  `}
+  `;
+}}
 
-  ${({
-  hasFooter
-}) => !hasFooter && css`
+  ${_ref15 => {
+  let {
+    hasFooter
+  } = _ref15;
+  return !hasFooter && css`
       tbody {
-        ${({
-  firstColRowSpanIndex
-}) => firstColRowSpanIndex >= 0 && css`
+        ${_ref16 => {
+    let {
+      firstColRowSpanIndex
+    } = _ref16;
+    return firstColRowSpanIndex >= 0 && css`
             ${StyledFlatTableRow}:nth-of-type(${firstColRowSpanIndex + 1}) {
               th:first-child,
               td:first-child {
                 border-bottom-left-radius: var(--borderRadius100);
               }
             }
-          `}
+          `;
+  }}
 
-        ${({
-  lastColRowSpanIndex,
-  hasHorizontalScrollbar
-}) => lastColRowSpanIndex >= 0 && !hasHorizontalScrollbar && css`
+        ${_ref17 => {
+    let {
+      lastColRowSpanIndex,
+      hasHorizontalScrollbar
+    } = _ref17;
+    return lastColRowSpanIndex >= 0 && !hasHorizontalScrollbar && css`
             ${StyledFlatTableRow}:nth-of-type(${lastColRowSpanIndex + 1}) {
               th:last-child,
               td:last-child {
                 border-bottom-right-radius: var(--borderRadius100);
               }
             }
-          `}
+          `;
+  }}
 
         ${StyledFlatTableRow}:last-of-type {
-          ${({
-  hasHorizontalScrollbar,
-  firstColRowSpanIndex
-}) => !hasHorizontalScrollbar && firstColRowSpanIndex === -1 && css`
+          ${_ref18 => {
+    let {
+      hasHorizontalScrollbar,
+      firstColRowSpanIndex
+    } = _ref18;
+    return !hasHorizontalScrollbar && firstColRowSpanIndex === -1 && css`
               th:first-child,
               td:first-child {
                 border-bottom-left-radius: var(--borderRadius100);
               }
-            `}
-          ${({
-  hasVerticalScrollbar,
-  hasHorizontalScrollbar,
-  lastColRowSpanIndex
-}) => !hasVerticalScrollbar && !hasHorizontalScrollbar && lastColRowSpanIndex === -1 && css`
+            `;
+  }}
+          ${_ref19 => {
+    let {
+      hasVerticalScrollbar,
+      hasHorizontalScrollbar,
+      lastColRowSpanIndex
+    } = _ref19;
+    return !hasVerticalScrollbar && !hasHorizontalScrollbar && lastColRowSpanIndex === -1 && css`
               th:last-child,
               td:last-child {
                 border-bottom-right-radius: var(--borderRadius100);
               }
-            `}
+            `;
+  }}
         }
       }
-    `}
+    `;
+}}
 `;
 StyledFlatTableWrapper.defaultProps = {
   theme: baseTheme
 };
 const StyledFlatTableFooter = styled.div`
-  ${({
-  hasStickyFooter,
-  theme
-}) => hasStickyFooter && css`
+  ${_ref20 => {
+  let {
+    hasStickyFooter,
+    theme
+  } = _ref20;
+  return hasStickyFooter && css`
       position: sticky;
       bottom: 0px;
       z-index: ${theme.zIndex.overlay + STICKY_FOOTER_OVERLAY_INCREMENT};
@@ -347,7 +399,8 @@ const StyledFlatTableFooter = styled.div`
         border-bottom-left-radius: var(--borderRadius000);
         border-bottom-right-radius: var(--borderRadius000);
       }
-    `}
+    `;
+}}
 `;
 StyledFlatTableFooter.defaultProps = {
   theme: baseTheme

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

@@ -4,23 +4,20 @@ import Event from "../../../__internal__/utils/helpers/events";
 import Icon from "../../icon";
 import { StyledSort, StyledSpaceHolder } from "./sort.style";
 import guid from "../../../__internal__/utils/helpers/guid";
-
-const Sort = ({
-  children,
-  onClick,
-  sortType
-}) => {
+const Sort = _ref => {
+  let {
+    children,
+    onClick,
+    sortType
+  } = _ref;
   const id = useRef(guid());
-
   const onKeyDown = e => {
     if (Event.isEnterOrSpaceKey(e)) {
       e.preventDefault();
       return onClick();
     }
-
     return null;
   };
-
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     hidden: true,
     id: id.current
@@ -37,14 +34,11 @@ const Sort = ({
     color: "--colorsUtilityMajor200"
   })), !sortType && /*#__PURE__*/React.createElement(StyledSpaceHolder, null));
 };
-
 Sort.propTypes = {
   /** if `asc` it will show `sort_up` icon, if `desc` it will show `sort_down` */
   sortType: PropTypes.oneOf(["ascending", "descending", false]),
-
   /** Callback fired when the `FlatTableSortHeader` is clicked */
   onClick: PropTypes.func,
-
   /** The content of `FlatTableSortHeader` */
   children: PropTypes.node
 };

package/esm/components/form/__internal__/form-summary.component.d.ts

@@ -14,6 +14,6 @@ export interface FormSummaryProps {
     /** Applies full width styling */
     fullWidth?: boolean;
 }
-export declare const Summary: ({ type, errorCount, warningCount, }: SummaryProps) => JSX.Element | null;
-declare const FormSummary: ({ fullWidth, ...props }: FormSummaryProps) => JSX.Element;
+export declare const Summary: ({ type, errorCount, warningCount, }: SummaryProps) => React.JSX.Element | null;
+declare const FormSummary: ({ fullWidth, ...props }: FormSummaryProps) => React.JSX.Element;
 export default FormSummary;