carbon-react 154.4.0 → 154.4.2

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

@@ -1,207 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useLayoutEffect, useRef, useState, useContext } from "react";
-import { StyledFlatTableWrapper, StyledFlatTable, StyledFlatTableFooter, StyledTableContainer } from "./flat-table.style";
-import DrawerSidebarContext from "../drawer/__internal__/drawer-sidebar.context";
-import Events from "../../__internal__/utils/helpers/events/events";
-import { StrictFlatTableProvider } from "./__internal__/strict-flat-table.context";
-import FlatTableContext from "./__internal__/flat-table.context";
-const FOCUSABLE_ROW_AND_CELL_QUERY = "tbody tr[tabindex], tbody tr td[tabindex], tbody tr th[tabindex]";
-export const FlatTable = ({
-  caption,
-  children,
-  hasStickyHead,
-  colorTheme = "dark",
-  footer,
-  hasStickyFooter = false,
-  height,
-  isZebra,
-  size = "medium",
-  hasMaxHeight = false,
-  hasOuterVerticalBorders = true,
-  bottomBorderRadius = "borderRadius100",
-  ariaDescribedby,
-  minHeight,
-  overflowX,
-  width,
-  title,
-  ...rest
-}) => {
-  const wrapperRef = useRef(null);
-  const tableRef = useRef(null);
-  const container = useRef(null);
-  const [hasVerticalScrollbar, setHasVerticalScrollbar] = useState(false);
-  const [hasHorizontalScrollbar, setHasHorizontalScrollbar] = useState(false);
-  const [firstColRowSpanIndex, setFirstColRowSpanIndex] = useState(-1);
-  const [lastColRowSpanIndex, setLastColRowSpanIndex] = useState(-1);
-  const [focused, setFocused] = useState(false);
-  const addDefaultHeight = !height && (hasStickyHead || hasStickyFooter);
-  const tableStylingProps = {
-    caption,
-    isZebra,
-    size,
-    "aria-describedby": ariaDescribedby
-  };
-  const {
-    isInSidebar
-  } = useContext(DrawerSidebarContext);
-  const [hasOpenDatePicker, setHasOpenDatePicker] = useState(false);
-  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?.getAttribute("rowspan");
-      return rowSpan && Number(rowSpan) >= index + 1;
-    });
-
-    /* istanbul ignore else */
-    if (wrapperRef.current && tableRef.current) {
-      const {
-        offsetHeight,
-        offsetWidth
-      } = wrapperRef.current;
-      const {
-        top,
-        bottom,
-        right,
-        left
-      } = tableRef.current?.getBoundingClientRect();
-      setHasVerticalScrollbar(bottom - top > offsetHeight);
-      setHasHorizontalScrollbar(right - left > offsetWidth);
-      const body = tableRef.current.querySelector("tbody");
-      const bodyRows = body ? Array.from(body?.querySelectorAll("tr")) : /* istanbul ignore next */[];
-      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]);
-  const findParentIndexOfFocusedChild = array => array.findIndex(el => {
-    const focusableRowElements = el.querySelectorAll("button, input, a, [tabindex]");
-
-    /* istanbul ignore else */
-    if (focusableRowElements) {
-      const focusableRowElementsArray = Array.from(focusableRowElements);
-      if (focusableRowElementsArray.find(el2 => el2 === document.activeElement)) {
-        return true;
-      }
-    }
-    return false;
-  });
-  const handleKeyDown = ev => {
-    const focusableElements = tableRef.current?.querySelectorAll(FOCUSABLE_ROW_AND_CELL_QUERY);
-    const focusableElementsArray = Array.from(focusableElements || /* istanbul ignore next */[]);
-
-    /* istanbul ignore if */
-    if (!focusableElementsArray.length) {
-      return;
-    }
-    const currentFocusIndex = focusableElementsArray.findIndex(el => el === document.activeElement);
-    if (hasOpenDatePicker && (hasStickyHead || hasStickyFooter)) {
-      if (Events.isPageUpKey(ev) || Events.isPageDownKey(ev) || Events.isHomeKey(ev) || Events.isEndKey(ev)) {
-        ev.preventDefault();
-      }
-      return;
-    }
-    if (Events.isDownKey(ev)) {
-      ev.preventDefault();
-      if (currentFocusIndex !== -1 && currentFocusIndex < focusableElementsArray.length) {
-        focusableElementsArray[currentFocusIndex + 1]?.focus();
-      } else {
-        // it may be that an element within the row currently has focus
-        const index = findParentIndexOfFocusedChild(focusableElementsArray);
-
-        /* istanbul ignore else */
-        if (index !== -1 && index < focusableElementsArray.length) {
-          focusableElementsArray[index + 1]?.focus();
-        }
-      }
-    } else if (Events.isUpKey(ev)) {
-      ev.preventDefault();
-      if (currentFocusIndex > 0) {
-        focusableElementsArray[currentFocusIndex - 1]?.focus();
-      } else {
-        // it may be that an element within the row currently has focus
-        const index = findParentIndexOfFocusedChild(focusableElementsArray);
-        if (index > 0) {
-          focusableElementsArray[index - 1]?.focus();
-        }
-      }
-    }
-  };
-  const getTabStopElementId = () => {
-    const focusableElements = Array.from(tableRef.current?.querySelectorAll(FOCUSABLE_ROW_AND_CELL_QUERY) || /* istanbul ignore next */[]);
-
-    // if no other row is selected/ highlighted, we need to make the first row/ cell a tab stop
-    const focusableElement = focusableElements.find(el => el.getAttribute("data-selected") === "true" || el.getAttribute("data-highlighted") === "true") || focusableElements[0];
-    const currentlySelectedId = focusableElement?.getAttribute("id") || "";
-    return currentlySelectedId;
-  };
-  return /*#__PURE__*/React.createElement(StyledFlatTableWrapper, _extends({
-    ref: wrapperRef,
-    "data-role": "flat-table-wrapper",
-    isInSidebar: isInSidebar,
-    hasStickyHead: hasStickyHead,
-    colorTheme: colorTheme,
-    minHeight: minHeight,
-    overflowY: hasStickyHead || hasStickyFooter ? "auto" : undefined,
-    height: addDefaultHeight && !hasMaxHeight ? "99%" : height,
-    maxHeight: hasMaxHeight ? "100%" : undefined,
-    hasOuterVerticalBorders: hasOuterVerticalBorders,
-    bottomBorderRadius: bottomBorderRadius,
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: hasStickyFooter || height ? "space-between" : undefined,
-    role: "region",
-    overflowX: width ? "hidden" : undefined,
-    width: width,
-    hasStickyFooter: hasStickyFooter,
-    hasVerticalScrollbar: hasVerticalScrollbar,
-    hasHorizontalScrollbar: hasHorizontalScrollbar,
-    footer: !!footer,
-    firstColRowSpanIndex: firstColRowSpanIndex,
-    lastColRowSpanIndex: lastColRowSpanIndex,
-    onKeyDown: handleKeyDown,
-    isFocused: focused
-  }, rest, {
-    "data-component": "flat-table-wrapper",
-    title: title
-  }), /*#__PURE__*/React.createElement(StyledTableContainer, {
-    ref: container,
-    onFocus: () => {
-      if (container.current === document.activeElement) {
-        setFocused(true);
-      }
-    },
-    onBlur: () => setFocused(false),
-    tabIndex: 0,
-    overflowX: overflowX,
-    width: width,
-    "data-role": "flat-table-container"
-  }, /*#__PURE__*/React.createElement(StyledFlatTable, _extends({
-    ref: tableRef,
-    "data-component": "flat-table"
-  }, tableStylingProps), caption ? /*#__PURE__*/React.createElement("caption", null, caption) : null, /*#__PURE__*/React.createElement(StrictFlatTableProvider, {
-    value: {
-      colorTheme,
-      size,
-      getTabStopElementId
-    }
-  }, /*#__PURE__*/React.createElement(FlatTableContext.Provider, {
-    value: {
-      isInFlatTable: true,
-      setHasOpenDatePicker
-    }
-  }, children)))), footer && /*#__PURE__*/React.createElement(StyledFlatTableFooter, {
-    hasStickyFooter: hasStickyFooter,
-    "data-role": "flat-table-footer"
-  }, footer));
-};
-FlatTable.displayName = "FlatTable";
-export default FlatTable;
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useRef as r,useState as o,useContext as n,useLayoutEffect as i}from"react";import{StyledFlatTableWrapper as l,StyledTableContainer as a,StyledFlatTable as c,StyledFlatTableFooter as s}from"./flat-table.style.js";import d from"../drawer/__internal__/drawer-sidebar.context.js";import u from"../../__internal__/utils/helpers/events/events.js";import{StrictFlatTableProvider as f}from"./__internal__/strict-flat-table.context.js";import b from"./__internal__/flat-table.context.js";function h(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){h(e,t,r[t])}))}return e}function y(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const m="tbody tr[tabindex], tbody tr td[tabindex], tbody tr th[tabindex]",v=h=>{var{caption:v,children:g,hasStickyHead:O,colorTheme:w="dark",footer:S,hasStickyFooter:j=!1,height:x,isZebra:P,size:_="medium",hasMaxHeight:A=!1,hasOuterVerticalBorders:D=!0,bottomBorderRadius:H="borderRadius100",ariaDescribedby:k,minHeight:I,overflowX:B,width:E,title:F}=h,K=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(h,["caption","children","hasStickyHead","colorTheme","footer","hasStickyFooter","height","isZebra","size","hasMaxHeight","hasOuterVerticalBorders","bottomBorderRadius","ariaDescribedby","minHeight","overflowX","width","title"]);const R=r(null),T=r(null),q=r(null),[z,C]=o(!1),[V,X]=o(!1),[Z,M]=o(-1),[N,U]=o(-1),[W,Y]=o(!1),G=!x&&(O||j),J={caption:v,isZebra:P,size:_,"aria-describedby":k},{isInSidebar:L}=n(d),[Q,$]=o(!1);i((()=>{const e=(e,t)=>e.find(((e,r)=>{const o=Array.from(e.querySelectorAll("td, th")),n=t?o.shift():o.pop(),i=null==n?void 0:n.getAttribute("rowspan");return i&&Number(i)>=r+1}));if(R.current&&T.current){var t;const{offsetHeight:r,offsetWidth:o}=R.current,{top:n,bottom:i,right:l,left:a}=null===(t=T.current)||void 0===t?void 0:t.getBoundingClientRect();C(i-n>r),X(l-a>o);const c=T.current.querySelector("tbody"),s=c?Array.from(null==c?void 0:c.querySelectorAll("tr")):[],{length:d}=s,u=e(s.slice(0,d-1).reverse(),!0),f=e(s.slice(0,d-1).reverse());u&&M(s.indexOf(u)),f&&U(s.indexOf(f))}}),[S,g,x,I]);const ee=e=>e.findIndex((e=>{const t=e.querySelectorAll("button, input, a, [tabindex]");return!(!t||!Array.from(t).find((e=>e===document.activeElement)))}));return e(l,y(p({ref:R,"data-role":"flat-table-wrapper",isInSidebar:L,hasStickyHead:O,colorTheme:w,minHeight:I,overflowY:O||j?"auto":void 0,height:G&&!A?"99%":x,maxHeight:A?"100%":void 0,hasOuterVerticalBorders:D,bottomBorderRadius:H,display:"flex",flexDirection:"column",justifyContent:j||x?"space-between":void 0,role:"region",overflowX:E?"hidden":void 0,width:E,hasStickyFooter:j,hasVerticalScrollbar:z,hasHorizontalScrollbar:V,footer:!!S,firstColRowSpanIndex:Z,lastColRowSpanIndex:N,onKeyDown:e=>{var t;const r=null===(t=T.current)||void 0===t?void 0:t.querySelectorAll(m),o=Array.from(r||[]);if(!o.length)return;const n=o.findIndex((e=>e===document.activeElement));if(Q&&(O||j))(u.isPageUpKey(e)||u.isPageDownKey(e)||u.isHomeKey(e)||u.isEndKey(e))&&e.preventDefault();else if(u.isDownKey(e))if(e.preventDefault(),-1!==n&&n<o.length){var i;null===(i=o[n+1])||void 0===i||i.focus()}else{const e=ee(o);var l;-1!==e&&e<o.length&&(null===(l=o[e+1])||void 0===l||l.focus())}else if(u.isUpKey(e))if(e.preventDefault(),n>0){var a;null===(a=o[n-1])||void 0===a||a.focus()}else{const e=ee(o);var c;e>0&&(null===(c=o[e-1])||void 0===c||c.focus())}},isFocused:W},K),{"data-component":"flat-table-wrapper",title:F,children:[t(a,{ref:q,onFocus:()=>{q.current===document.activeElement&&Y(!0)},onBlur:()=>Y(!1),tabIndex:0,overflowX:B,width:E,"data-role":"flat-table-container",children:e(c,y(p({ref:T,"data-component":"flat-table"},J),{children:[v?t("caption",{children:v}):null,t(f,{value:{colorTheme:w,size:_,getTabStopElementId:()=>{var e;const t=Array.from((null===(e=T.current)||void 0===e?void 0:e.querySelectorAll(m))||[]),r=t.find((e=>"true"===e.getAttribute("data-selected")||"true"===e.getAttribute("data-highlighted")))||t[0];return(null==r?void 0:r.getAttribute("id"))||""}},children:t(b.Provider,{value:{isInFlatTable:!0,setHasOpenDatePicker:$},children:g})})]}))}),S&&t(s,{hasStickyFooter:j,"data-role":"flat-table-footer",children:S})]}))};v.displayName="FlatTable";export{v as FlatTable,v as default};

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

@@ -1,2 +1 @@
-export const FLAT_TABLE_THEMES = ["light", "dark", "transparent-base", "transparent-white"];
-export const FLAT_TABLE_SIZES = ["compact", "small", "medium", "large"];
+const a=["light","dark","transparent-base","transparent-white"],t=["compact","small","medium","large"];export{t as FLAT_TABLE_SIZES,a as FLAT_TABLE_THEMES};

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

@@ -1,366 +1 @@
-import styled, { css } from "styled-components";
-import StyledFlatTableHeader from "./flat-table-header/flat-table-header.style";
-import StyledFlatTableRow from "./flat-table-row/flat-table-row.style";
-import { StyledFlatTableRowHeader } from "./flat-table-row-header/flat-table-row-header.style";
-import StyledFlatTableHead from "./flat-table-head/flat-table-head.style";
-import StyledFlatTableCheckbox from "./flat-table-checkbox/flat-table-checkbox.style";
-import { baseTheme } from "../../style/themes";
-import { StyledFlatTableCell } from "./flat-table-cell/flat-table-cell.style";
-import cellSizes from "./cell-sizes.style";
-import StyledBox from "../box/box.style";
-import { StyledPagerContainer } from "../pager/pager.style";
-import addFocusStyling from "../../style/utils/add-focus-styling";
-const HEADER_OVERLAY_INCREMENT = 3;
-const STICKY_FOOTER_OVERLAY_INCREMENT = 1;
-const ROW_HEADER_OVERLAY_INCREMENT = 5;
-const StyledTableContainer = styled.div`
-  ${({
-  width,
-  overflowX
-}) => width && css`
-      width: ${width};
-
-      ${overflowX && `overflow-x: ${overflowX};`}
-    `}
-
-  :focus {
-    outline: none;
-  }
-`;
-const StyledFlatTable = styled.table`
-  border-collapse: separate;
-  border-spacing: 0;
-  width: 100%;
-
-  @-moz-document url-prefix() {
-    overflow: hidden;
-    border-top-left-radius: var(--borderRadius100);
-    border-top-right-radius: var(--borderRadius100);
-  }
-
-  ${({
-  caption
-}) => caption && css`
-      caption {
-        clip: rect(1px, 1px, 1px, 1px);
-        height: 1px;
-        overflow: hidden;
-        width: 1px;
-        position: absolute;
-        top: -99999px;
-      }
-    `}
-
-  ${({
-  size
-}) => {
-  const {
-    height,
-    fontSize,
-    paddingSize
-  } = cellSizes[size];
-  return css`
-      ${StyledFlatTableRow} {
-        height: ${height};
-      }
-
-      ${StyledFlatTableCell} > div,
-      ${StyledFlatTableHeader} > div,
-      ${StyledFlatTableRowHeader} > div,
-      ${StyledFlatTableCheckbox} > div {
-        font-size: ${fontSize};
-        padding-left: ${paddingSize};
-        padding-right: ${paddingSize};
-      }
-    `;
-}}
-
-  ${({
-  isZebra
-}) => isZebra && css`
-      ${StyledFlatTableRow}:nth-child(2n) {
-        ${StyledFlatTableRowHeader},
-        ${StyledFlatTableCell},
-        ${StyledFlatTableCheckbox} {
-          background-color: var(--colorsUtilityMajor010);
-        }
-      }
-      ${StyledFlatTableRow}:hover {
-        ${StyledFlatTableCell},
-        ${StyledFlatTableRowHeader},
-        ${StyledFlatTableCheckbox}:not(th) {
-          background-color: var(--colorsUtilityMajor025);
-        }
-      }
-    `}
-`;
-const StyledFlatTableWrapper = styled(StyledBox)`
-  border-top-left-radius: var(--borderRadius100);
-  border-top-right-radius: var(--borderRadius100);
-
-  ${({
-  hasOuterVerticalBorders
-}) => !hasOuterVerticalBorders && css`
-      ${StyledFlatTableRow} {
-        & > ${StyledFlatTableCell}:first-child {
-          border-left-color: var(--colorsUtilityMajorTransparent);
-        }
-        & > ${StyledFlatTableCell}:last-child {
-          border-right-color: var(--colorsUtilityMajorTransparent);
-        }
-      }
-    `}
-
-  ${({
-  hasStickyFooter,
-  hasHorizontalScrollbar,
-  bottomBorderRadius
-}) => !hasStickyFooter && !hasHorizontalScrollbar && css`
-      border-bottom-left-radius: var(--${bottomBorderRadius});
-      border-bottom-right-radius: var(--${bottomBorderRadius});
-    `}
-
-  ${({
-  isInSidebar,
-  isFocused
-}) => css`
-    box-sizing: border-box;
-
-    ${isFocused && css`
-      ${addFocusStyling()}
-    `}
-
-    ${isInSidebar ? "min-width: fit-content;" : ""}
-  `}
-
-  ${({
-  colorTheme
-}) => {
-  switch (colorTheme) {
-    case "light":
-      return css`
-          ${StyledFlatTableHeader},
-          ${StyledFlatTableHead} ${StyledFlatTableCheckbox} {
-            background-color: var(--colorsUtilityMajor100);
-            border-right: 1px solid var(--colorsUtilityMajor150);
-            border-bottom-color: var(--colorsUtilityMajor150);
-          }
-          ${StyledFlatTableHead} ${StyledFlatTableRowHeader} {
-            background-color: var(--colorsUtilityMajor100);
-            border-bottom-color: var(--colorsUtilityMajor150);
-            border-right-color: var(--colorsUtilityMajor150);
-            border-left-color: var(--colorsUtilityMajor150);
-          }
-        `;
-    case "transparent-base":
-      return css`
-          ${StyledFlatTableHeader},
-          ${StyledFlatTableHead} ${StyledFlatTableCheckbox} {
-            background-color: var(--colorsUtilityMajor025);
-            border-bottom-color: var(--colorsUtilityMajor100);
-          }
-          ${StyledFlatTableHead} ${StyledFlatTableRowHeader} {
-            background-color: var(--colorsUtilityMajor025);
-            border-bottom-color: var(--colorsUtilityMajor100);
-            border-right-color: var(--colorsUtilityMajor025);
-            border-left-color: var(--colorsUtilityMajor025);
-          }
-        `;
-    case "transparent-white":
-      return css`
-          ${StyledFlatTableHeader},
-          ${StyledFlatTableHead} ${StyledFlatTableCheckbox} {
-            background-color: var(--colorsUtilityYang100);
-            border-bottom-color: var(--colorsUtilityMajor100);
-          }
-          ${StyledFlatTableHead} ${StyledFlatTableRowHeader} {
-            background-color: var(--colorsUtilityYang100);
-            border-bottom-color: var(--colorsUtilityMajor100);
-            border-right-color: var(--colorsUtilityYang100);
-            border-left-color: var(--colorsUtilityYang100);
-          }
-        `;
-    // default theme is "dark"
-    default:
-      return css`
-          ${StyledFlatTableHead} ${StyledFlatTableCheckbox},
-          ${StyledFlatTableHeader},
-          ${StyledFlatTableHead} {
-            background-color: var(--colorsUtilityMajor400);
-            border-right: 1px solid var(--colorsUtilityMajor300);
-            color: var(--colorsUtilityYang100);
-            border-bottom-color: var(--colorsUtilityMajor300);
-          }
-          ${StyledFlatTableHead} ${StyledFlatTableRowHeader} {
-            background-color: var(--colorsUtilityMajor400);
-            color: var(--colorsUtilityYang100);
-            border-bottom-color: var(--colorsUtilityMajor300);
-            border-right-color: var(--colorsUtilityMajor300);
-            border-left-color: var(--colorsUtilityMajor300);
-          }
-        `;
-  }
-}}
-
-  ${({
-  isInSidebar
-}) => isInSidebar && css`
-      ${StyledFlatTableHead} {
-        background-color: var(--colorsUtilityMajor040);
-      }
-      ${StyledFlatTableHeader}, ${StyledFlatTableHead} ${StyledFlatTableRowHeader},
-      ${StyledFlatTableHead} ${StyledFlatTableCheckbox} {
-        background-color: var(--colorsUtilityMajor040);
-        border-right: 2px solid var(--colorsUtilityMajor040);
-        color: var(--colorsUtilityYin090);
-        border-bottom-color: var(--colorsUtilityMajor100);
-      }
-    `}
-
-  ${({
-  hasStickyHead,
-  theme
-}) => 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};
-  }
-
-  thead ${StyledFlatTableHeader}.isSticky, ${StyledFlatTableCheckbox}.isSticky {
-    border-right: none;
-  }
-
-  ${StyledFlatTableHeader}, ${StyledFlatTableCheckbox} {
-    z-index: ${({
-  theme
-}) => theme.zIndex.overlay + HEADER_OVERLAY_INCREMENT};
-  }
-
-  thead {
-    ${StyledFlatTableRow}:first-of-type {
-      th:first-of-type {
-        border-top-left-radius: var(--borderRadius100);
-      }
-      ${({
-  hasVerticalScrollbar
-}) => !hasVerticalScrollbar && css`
-          th:last-of-type {
-            border-top-right-radius: var(--borderRadius100);
-          }
-        `}
-    }
-  }
-
-  tbody
-    ${StyledFlatTableRowHeader},
-    ${StyledFlatTableCell}.isSticky,
-    tbody
-    ${StyledFlatTableCheckbox}.isSticky {
-    z-index: ${({
-  theme
-}) => theme.zIndex.overlay};
-  }
-
-  tbody
-    ${StyledFlatTableRowHeader}.bringToFront,
-    ${StyledFlatTableCell}.bringToFront,
-    tbody
-    ${StyledFlatTableCheckbox}.bringToFront {
-    z-index: ${({
-  theme
-}) => theme.zIndex.overlay + 5};
-  }
-
-  ${({
-  footer
-}) => footer && css`
-    tr:last-child:focus {
-      :after {
-        border-bottom-left-radius: var(--borderRadius000);
-        border-bottom-right-radius: var(--borderRadius000);
-      }
-  `}
-
-  ${({
-  footer,
-  firstColRowSpanIndex,
-  lastColRowSpanIndex,
-  hasHorizontalScrollbar,
-  hasVerticalScrollbar,
-  bottomBorderRadius
-}) => !footer && css`
-      tbody {
-        ${firstColRowSpanIndex >= 0 && css`
-          ${StyledFlatTableRow}:nth-of-type(${firstColRowSpanIndex + 1}) {
-            th:first-child,
-            td:first-child {
-              border-bottom-left-radius: var(--borderRadius100);
-            }
-          }
-        `}
-
-        ${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 === -1 && css`
-            th:first-child,
-            td:first-child {
-              border-bottom-left-radius: var(--${bottomBorderRadius});
-            }
-          `}
-          ${!hasVerticalScrollbar && !hasHorizontalScrollbar && lastColRowSpanIndex === -1 && css`
-            th:last-child,
-            td:last-child {
-              border-bottom-right-radius: var(--${bottomBorderRadius});
-            }
-          `}
-        }
-      }
-    `}
-`;
-StyledFlatTableWrapper.defaultProps = {
-  theme: baseTheme
-};
-const StyledFlatTableFooter = styled.div`
-  & > ${StyledPagerContainer} {
-    border-top: none;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-
-  ${({
-  hasStickyFooter,
-  theme
-}) => hasStickyFooter && css`
-      position: sticky;
-      bottom: 0px;
-      z-index: ${theme.zIndex.overlay + STICKY_FOOTER_OVERLAY_INCREMENT};
-
-      ${StyledPagerContainer} {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-    `}
-`;
-StyledFlatTableFooter.defaultProps = {
-  theme: baseTheme
-};
-export { StyledFlatTableWrapper, StyledFlatTable, StyledFlatTableFooter, StyledTableContainer };
+import o,{css as r}from"styled-components";import t from"./flat-table-header/flat-table-header.style.js";import e from"./flat-table-row/flat-table-row.style.js";import{StyledFlatTableRowHeader as i}from"./flat-table-row-header/flat-table-row-header.style.js";import l from"./flat-table-head/flat-table-head.style.js";import a from"./flat-table-checkbox/flat-table-checkbox.style.js";import"../../style/themes/sage/index.js";import d from"../../style/themes/base/index.js";import"../../style/themes/none/index.js";import{StyledFlatTableCell as s}from"./flat-table-cell/flat-table-cell.style.js";import c from"./cell-sizes.style.js";import b from"../box/box.style.js";import{StyledPagerContainer as n}from"../pager/pager.style.js";import h from"../../style/utils/add-focus-styling.js";const y=o.div.withConfig({displayName:"flat-table.style__StyledTableContainer",componentId:"sc-981f48c3-0"})([""," :focus{outline:none;}"],(({width:o,overflowX:t})=>o&&r(["width:",";",""],o,t&&`overflow-x: ${t};`))),f=o.table.withConfig({displayName:"flat-table.style__StyledFlatTable",componentId:"sc-981f48c3-1"})(["border-collapse:separate;border-spacing:0;width:100%;@-moz-document url-prefix(){overflow:hidden;border-top-left-radius:var(--borderRadius100);border-top-right-radius:var(--borderRadius100);}"," "," ",""],(({caption:o})=>o&&r(["caption{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;width:1px;position:absolute;top:-99999px;}"])),(({size:o})=>{const{height:l,fontSize:d,paddingSize:b}=c[o];return r(["","{height:",";}"," > div,"," > div,"," > div,"," > div{font-size:",";padding-left:",";padding-right:",";}"],e,l,s,t,i,a,d,b,b)}),(({isZebra:o})=>o&&r(["",":nth-child(2n){",",",",","{background-color:var(--colorsUtilityMajor010);}}",":hover{",",",",",":not(th){background-color:var(--colorsUtilityMajor025);}}"],e,i,s,a,e,s,i,a))),p=o(b).withConfig({displayName:"flat-table.style__StyledFlatTableWrapper",componentId:"sc-981f48c3-2"})(["border-top-left-radius:var(--borderRadius100);border-top-right-radius:var(--borderRadius100);"," "," "," "," "," "," "," ",",",".isSticky,"," ",".isSticky{z-index:",";}thead ",".isSticky,",".isSticky{border-right:none;}",",","{z-index:",";}thead{",":first-of-type{th:first-of-type{border-top-left-radius:var(--borderRadius100);}","}}tbody ",",",".isSticky,tbody ",".isSticky{z-index:",";}tbody ",".bringToFront,",".bringToFront,tbody ",".bringToFront{z-index:",";}"," ",""],(({hasOuterVerticalBorders:o})=>!o&&r(["","{& > ",":first-child{border-left-color:var(--colorsUtilityMajorTransparent);}& > ",":last-child{border-right-color:var(--colorsUtilityMajorTransparent);}}"],e,s,s)),(({hasStickyFooter:o,hasHorizontalScrollbar:t,bottomBorderRadius:e})=>!o&&!t&&r(["border-bottom-left-radius:var(--",");border-bottom-right-radius:var(--",");"],e,e)),(({isInSidebar:o,isFocused:t})=>r(["box-sizing:border-box;"," ",""],t&&r(["",""],h()),o?"min-width: fit-content;":"")),(({colorTheme:o})=>{switch(o){case"light":return r(["",","," ","{background-color:var(--colorsUtilityMajor100);border-right:1px solid var(--colorsUtilityMajor150);border-bottom-color:var(--colorsUtilityMajor150);}"," ","{background-color:var(--colorsUtilityMajor100);border-bottom-color:var(--colorsUtilityMajor150);border-right-color:var(--colorsUtilityMajor150);border-left-color:var(--colorsUtilityMajor150);}"],t,l,a,l,i);case"transparent-base":return r(["",","," ","{background-color:var(--colorsUtilityMajor025);border-bottom-color:var(--colorsUtilityMajor100);}"," ","{background-color:var(--colorsUtilityMajor025);border-bottom-color:var(--colorsUtilityMajor100);border-right-color:var(--colorsUtilityMajor025);border-left-color:var(--colorsUtilityMajor025);}"],t,l,a,l,i);case"transparent-white":return r(["",","," ","{background-color:var(--colorsUtilityYang100);border-bottom-color:var(--colorsUtilityMajor100);}"," ","{background-color:var(--colorsUtilityYang100);border-bottom-color:var(--colorsUtilityMajor100);border-right-color:var(--colorsUtilityYang100);border-left-color:var(--colorsUtilityYang100);}"],t,l,a,l,i);default:return r([""," ",",",",","{background-color:var(--colorsUtilityMajor400);border-right:1px solid var(--colorsUtilityMajor300);color:var(--colorsUtilityYang100);border-bottom-color:var(--colorsUtilityMajor300);}"," ","{background-color:var(--colorsUtilityMajor400);color:var(--colorsUtilityYang100);border-bottom-color:var(--colorsUtilityMajor300);border-right-color:var(--colorsUtilityMajor300);border-left-color:var(--colorsUtilityMajor300);}"],l,a,t,l,l,i)}}),(({isInSidebar:o})=>o&&r(["","{background-color:var(--colorsUtilityMajor040);}",","," ",","," ","{background-color:var(--colorsUtilityMajor040);border-right:2px solid var(--colorsUtilityMajor040);color:var(--colorsUtilityYin090);border-bottom-color:var(--colorsUtilityMajor100);}"],l,t,l,i,l,a)),(({hasStickyHead:o,theme:t})=>o&&r(["","{position:sticky;top:0;left:0;z-index:",";}"],l,t.zIndex.overlay+5)),l,i,t,l,a,(({theme:o})=>o.zIndex.overlay+5),t,a,t,a,(({theme:o})=>o.zIndex.overlay+3),e,(({hasVerticalScrollbar:o})=>!o&&r(["th:last-of-type{border-top-right-radius:var(--borderRadius100);}"])),i,s,a,(({theme:o})=>o.zIndex.overlay),i,s,a,(({theme:o})=>o.zIndex.overlay+5),(({footer:o})=>o&&r(["tr:last-child:focus{:after{border-bottom-left-radius:var(--borderRadius000);border-bottom-right-radius:var(--borderRadius000);}"])),(({footer:o,firstColRowSpanIndex:t,lastColRowSpanIndex:i,hasHorizontalScrollbar:l,hasVerticalScrollbar:a,bottomBorderRadius:d})=>!o&&r(["tbody{"," "," ",":last-of-type{"," ","}}"],t>=0&&r(["",":nth-of-type(","){th:first-child,td:first-child{border-bottom-left-radius:var(--borderRadius100);}}"],e,t+1),i>=0&&!l&&r(["",":nth-of-type(","){th:last-child,td:last-child{border-bottom-right-radius:var(--borderRadius100);}}"],e,i+1),e,!l&&-1===t&&r(["th:first-child,td:first-child{border-bottom-left-radius:var(--",");}"],d),!a&&!l&&-1===i&&r(["th:last-child,td:last-child{border-bottom-right-radius:var(--",");}"],d))));p.defaultProps={theme:d};const m=o.div.withConfig({displayName:"flat-table.style__StyledFlatTableFooter",componentId:"sc-981f48c3-3"})(["& > ","{border-top:none;border-top-left-radius:0;border-top-right-radius:0;}",""],n,(({hasStickyFooter:o,theme:t})=>o&&r(["position:sticky;bottom:0px;z-index:",";","{border-bottom-left-radius:0;border-bottom-right-radius:0;}"],t.zIndex.overlay+1,n)));m.defaultProps={theme:d};export{f as StyledFlatTable,m as StyledFlatTableFooter,p as StyledFlatTableWrapper,y as StyledTableContainer};

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

@@ -1,10 +1 @@
-export { default as FlatTable } from "./flat-table.component";
-export { default as FlatTableHead } from "./flat-table-head/flat-table-head.component";
-export { default as FlatTableHeader } from "./flat-table-header/flat-table-header.component";
-export { default as FlatTableBody } from "./flat-table-body/flat-table-body.component";
-export { default as FlatTableRow } from "./flat-table-row/flat-table-row.component";
-export { default as FlatTableRowHeader } from "./flat-table-row-header/flat-table-row-header.component";
-export { default as FlatTableCell } from "./flat-table-cell/flat-table-cell.component";
-export { default as FlatTableCheckbox } from "./flat-table-checkbox/flat-table-checkbox.component";
-export { default as FlatTableBodyDraggable } from "./flat-table-body-draggable/flat-table-body-draggable.component";
-export { default as Sort } from "./sort/sort.component";
+export{FlatTable}from"./flat-table.component.js";export{FlatTableHead}from"./flat-table-head/flat-table-head.component.js";export{FlatTableHeader}from"./flat-table-header/flat-table-header.component.js";export{FlatTableBody}from"./flat-table-body/flat-table-body.component.js";export{FlatTableRow}from"./flat-table-row/flat-table-row.component.js";export{FlatTableRowHeader}from"./flat-table-row-header/flat-table-row-header.component.js";export{FlatTableCell}from"./flat-table-cell/flat-table-cell.component.js";export{FlatTableCheckbox}from"./flat-table-checkbox/flat-table-checkbox.component.js";export{FlatTableBodyDraggable}from"./flat-table-body-draggable/flat-table-body-draggable.component.js";export{Sort}from"./sort/sort.component.js";

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

@@ -1 +1 @@
-export { default } from "./sort.component";
+export{Sort as default}from"./sort.component.js";

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

@@ -1,48 +1 @@
-import React, { useRef } from "react";
-import Event from "../../../__internal__/utils/helpers/events";
-import Typography from "../../typography";
-import { StyledSort, StyledSpaceHolder, StyledSortIcon } from "./sort.style";
-import guid from "../../../__internal__/utils/helpers/guid";
-import useLocale from "../../../hooks/__internal__/useLocale";
-import { useStrictFlatTableContext } from "../__internal__/strict-flat-table.context";
-export const Sort = ({
-  children,
-  onClick,
-  sortType,
-  accessibleName,
-  "data-element": dataElement,
-  "data-role": dataRole
-}) => {
-  const id = useRef(guid());
-  const locale = useLocale();
-  const onKeyDown = e => {
-    if (Event.isEnterOrSpaceKey(e)) {
-      e.preventDefault();
-      return onClick?.();
-    }
-    return null;
-  };
-  const {
-    colorTheme
-  } = useStrictFlatTableContext();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
-    screenReaderOnly: true,
-    id: id.current
-  }, accessibleName || locale.sort.accessibleName(children, sortType)), /*#__PURE__*/React.createElement(StyledSort, {
-    role: "button",
-    onKeyDown: onKeyDown,
-    tabIndex: 0,
-    onClick: onClick,
-    sortType: sortType,
-    "aria-labelledby": id.current,
-    "data-component": "sort",
-    "data-element": dataElement,
-    "data-role": dataRole
-  }, children, sortType && /*#__PURE__*/React.createElement(StyledSortIcon, {
-    type: sortType === "ascending" ? "sort_up" : "sort_down",
-    iconColor: colorTheme === "dark" ? "--colorsActionMinorYang100" : "--colorActionMinor500"
-  })), !sortType && /*#__PURE__*/React.createElement(StyledSpaceHolder, {
-    "data-role": "sort-placeholder"
-  }));
-};
-export default Sort;
+import{jsxs as e,Fragment as r,jsx as o}from"react/jsx-runtime";import{useRef as t}from"react";import n from"../../../__internal__/utils/helpers/events/events.js";import{Typography as l}from"../../typography/typography.component.js";import{StyledSort as a,StyledSortIcon as s,StyledSpaceHolder as i}from"./sort.style.js";import c from"../../../__internal__/utils/helpers/guid/index.js";import m from"../../../hooks/__internal__/useLocale/useLocale.js";import{useStrictFlatTableContext as p}from"../__internal__/strict-flat-table.context.js";const d=({children:d,onClick:_,sortType:u,accessibleName:y,"data-element":f,"data-role":h})=>{const b=t(c()),j=m(),{colorTheme:g}=p();return e(r,{children:[o(l,{screenReaderOnly:!0,id:b.current,children:y||j.sort.accessibleName(d,u)}),e(a,{role:"button",onKeyDown:e=>n.isEnterOrSpaceKey(e)?(e.preventDefault(),null==_?void 0:_()):null,tabIndex:0,onClick:_,sortType:u,"aria-labelledby":b.current,"data-component":"sort","data-element":f,"data-role":h,children:[d,u&&o(s,{type:"ascending"===u?"sort_up":"sort_down",iconColor:"dark"===g?"--colorsActionMinorYang100":"--colorActionMinor500"})]}),!u&&o(i,{"data-role":"sort-placeholder"})]})};export{d as Sort,d as default};