@amboss/design-system 4.5.0 → 4.6.0

package/build/cjs/components/BulkActionsToolbar/BulkActionsToolbar.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"BulkActionsToolbar",{enumerable:!0,get:function(){return BulkActionsToolbar}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_breakpointsjson=/*#__PURE__*/_interop_require_default._(require("../../web-tokens/_breakpoints.json")),_Text=require("../Typography/Text/Text"),_Button=require("../Button/Button"),_Inline=require("../Inline/Inline"),_Divider=require("../Divider/Divider"),_Checkbox=require("../Form/Checkbox/Checkbox"),_SearchInput=require("../Form/SearchInput/SearchInput"),_useBulkActionsToolbar=require("./useBulkActionsToolbar"),containerSmallSize=_breakpointsjson.default.s.value,toolbarContainerName="bulkActionsToolbar",containerSmall=`@container ${toolbarContainerName} (min-width: 0px) and (max-width:${containerSmallSize}px)`,containerLarge=`@container ${toolbarContainerName} (min-width: ${containerSmallSize}px)`,StyledBulkActionsToolbarContainer=(0,_styled.default)("div",{target:"e3yi6kp0",label:"StyledBulkActionsToolbarContainer"})({containerType:"inline-size",containerName:toolbarContainerName}),InlineContainer=(0,_styled.default)("div",{target:"e3yi6kp1",label:"InlineContainer"})(({theme})=>({display:"flex",padding:theme.variables.size.spacing.xs,gap:theme.variables.size.spacing.xs,[containerSmall]:{display:"flex",flexDirection:"column"},[containerLarge]:{paddingLeft:theme.variables.size.spacing.m}})),ToolbarInner=(0,_styled.default)("div",{target:"e3yi6kp2",label:"ToolbarInner"})(({theme})=>({display:"flex",alignItems:"center",gap:theme.variables.size.spacing.xs,flexGrow:1,[containerSmall]:{display:"contents"}})),ToolbarControls=(0,_styled.default)("div",{target:"e3yi6kp3",label:"ToolbarControls"})(({theme})=>({display:"flex",alignItems:"center",gap:theme.variables.size.spacing.xs,[containerSmall]:{order:3,justifyContent:"space-between"}})),StyledSearch=(0,_styled.default)("div",{target:"e3yi6kp4",label:"StyledSearch"})({[containerSmall]:{order:1}}),StyledRightSlot=(0,_styled.default)("div",{target:"e3yi6kp5",label:"StyledRightSlot"})(({theme,rightContentNoWrapOnMobile})=>({display:"flex",justifyContent:"flex-end",alignItems:"center",flex:1,gap:theme.variables.size.spacing.xs,[containerSmall]:{order:2,flex:"none",...!rightContentNoWrapOnMobile&&{flexWrap:"wrap"}}})),StyledRightContent=(0,_styled.default)("div",{target:"e3yi6kp6",label:"StyledRightContent"})(({rightContentNoWrapOnMobile})=>({...!rightContentNoWrapOnMobile&&{[containerSmall]:{flexGrow:1}}})),CustomInline=(0,_styled.default)(_Inline.Inline,{target:"e3yi6kp7",label:"CustomInline"})(({theme})=>({[containerSmall]:{gap:theme.variables.size.spacing.xxs},[containerLarge]:{gap:theme.variables.size.spacing.m}})),CheckboxStyled=(0,_styled.default)("label",{target:"e3yi6kp8",label:"CheckboxStyled"})(({theme})=>({display:"block",paddingLeft:theme.variables.size.spacing.xs,[containerLarge]:{paddingRight:theme.variables.size.spacing.xxs}})),TotalItemsStyled=(0,_styled.default)("div",{target:"e3yi6kp9",label:"TotalItemsStyled"})(({theme})=>({[containerSmall]:{padding:theme.variables.size.spacing.xs}})),TotalItems=({children,id})=>_react.default.createElement(TotalItemsStyled,{role:"status","aria-atomic":"true"},_react.default.createElement(_Text.Text,{size:"s",color:"secondary",weight:"bold",id:id},children)),BulkActionsToolbar=_react.default.memo(function({actions,checkboxProps,totalItems,searchInputProps,renderRightContent,rightContentNoWrapOnMobile,hideDivider,"data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let id=(0,_react.useId)(),{toolbarId,toolbarRef,onBlur,onFocus}=(0,_useBulkActionsToolbar.useBulkActionsToolbar)(),hasSelectionControls=!!(checkboxProps||searchInputProps);return _react.default.createElement(StyledBulkActionsToolbarContainer,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Toolbar"},_react.default.createElement(InlineContainer,null,_react.default.createElement(ToolbarInner,{role:"toolbar","aria-describedby":hasSelectionControls?void 0:id,"aria-orientation":"horizontal",id:toolbarId,ref:toolbarRef,onBlur:onBlur,onFocus:onFocus,...ariaAttributes},_react.default.createElement(ToolbarControls,null,checkboxProps?_react.default.createElement(CustomInline,{vAlignItems:"center"},_react.default.createElement(CheckboxStyled,null,_react.default.createElement(_Checkbox.CheckboxRaw,{...checkboxProps,size:"s","aria-labelledby":id})),_react.default.createElement(TotalItems,{id:id},totalItems)):_react.default.createElement(TotalItems,{id:id},totalItems),_react.default.createElement(_Inline.Inline,{noWrap:!0},actions?.map(({variant="secondary",label,...buttonProps})=>_react.default.createElement(_Button.Button,{...buttonProps,key:`action-${label}`,size:"s",variant:variant,"aria-describedby":id},label)))),renderRightContent&&_react.default.createElement(StyledRightSlot,{rightContentNoWrapOnMobile:rightContentNoWrapOnMobile},_react.default.createElement(StyledRightContent,{rightContentNoWrapOnMobile:rightContentNoWrapOnMobile},renderRightContent({toolbarId:toolbarId})))),searchInputProps&&_react.default.createElement(StyledSearch,null,_react.default.createElement(_SearchInput.SearchInput,{...searchInputProps,"aria-describedby":id}))),!hideDivider&&_react.default.createElement(_Divider.Divider,null))});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"BulkActionsToolbar",{enumerable:!0,get:function(){return BulkActionsToolbar}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_breakpointsjson=/*#__PURE__*/_interop_require_default._(require("../../web-tokens/_breakpoints.json")),_ToolbarItemCount=require("../Internal/ToolbarItemCount/ToolbarItemCount"),_Button=require("../Button/Button"),_Inline=require("../Inline/Inline"),_Divider=require("../Divider/Divider"),_Checkbox=require("../Form/Checkbox/Checkbox"),_SearchInput=require("../Form/SearchInput/SearchInput"),_useBulkActionsToolbar=require("./useBulkActionsToolbar"),containerSmallSize=_breakpointsjson.default.s.value,toolbarContainerName="bulkActionsToolbar",containerSmall=`@container ${toolbarContainerName} (min-width: 0px) and (max-width:${containerSmallSize}px)`,containerLarge=`@container ${toolbarContainerName} (min-width: ${containerSmallSize}px)`,StyledBulkActionsToolbarContainer=(0,_styled.default)("div",{target:"e1072qx30",label:"StyledBulkActionsToolbarContainer"})({containerType:"inline-size",containerName:toolbarContainerName}),InlineContainer=(0,_styled.default)("div",{target:"e1072qx31",label:"InlineContainer"})(({theme})=>({display:"flex",padding:theme.variables.size.spacing.xs,gap:theme.variables.size.spacing.xs,[containerSmall]:{display:"flex",flexDirection:"column"},[containerLarge]:{paddingLeft:theme.variables.size.spacing.m}})),ToolbarInner=(0,_styled.default)("div",{target:"e1072qx32",label:"ToolbarInner"})(({theme})=>({display:"flex",alignItems:"center",gap:theme.variables.size.spacing.xs,flexGrow:1,[containerSmall]:{display:"contents"}})),ToolbarControls=(0,_styled.default)("div",{target:"e1072qx33",label:"ToolbarControls"})(({theme})=>({display:"flex",alignItems:"center",gap:theme.variables.size.spacing.xs,[containerSmall]:{order:3,justifyContent:"space-between"}})),StyledSearch=(0,_styled.default)("div",{target:"e1072qx34",label:"StyledSearch"})({[containerSmall]:{order:1}}),StyledRightSlot=(0,_styled.default)("div",{target:"e1072qx35",label:"StyledRightSlot"})(({theme,rightContentNoWrapOnMobile})=>({display:"flex",justifyContent:"flex-end",alignItems:"center",flex:1,gap:theme.variables.size.spacing.xs,[containerSmall]:{order:2,flex:"none",...!rightContentNoWrapOnMobile&&{flexWrap:"wrap"}}})),StyledRightContent=(0,_styled.default)("div",{target:"e1072qx36",label:"StyledRightContent"})(({rightContentNoWrapOnMobile})=>({...!rightContentNoWrapOnMobile&&{[containerSmall]:{flexGrow:1}}})),CustomInline=(0,_styled.default)(_Inline.Inline,{target:"e1072qx37",label:"CustomInline"})(({theme})=>({[containerSmall]:{gap:theme.variables.size.spacing.xxs},[containerLarge]:{gap:theme.variables.size.spacing.m}})),CheckboxStyled=(0,_styled.default)("label",{target:"e1072qx38",label:"CheckboxStyled"})(({theme})=>({display:"block",paddingLeft:theme.variables.size.spacing.xs,[containerLarge]:{paddingRight:theme.variables.size.spacing.xxs}})),CustomToolbarItemCount=(0,_styled.default)(_ToolbarItemCount.ToolbarItemCount,{target:"e1072qx39",label:"CustomToolbarItemCount"})(({theme})=>({[containerSmall]:{padding:theme.variables.size.spacing.xs}})),BulkActionsToolbar=_react.default.memo(function({actions,checkboxProps,totalItems,searchInputProps,renderRightContent,rightContentNoWrapOnMobile,hideDivider,"data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let id=(0,_react.useId)(),{toolbarId,toolbarRef,onBlur,onFocus}=(0,_useBulkActionsToolbar.useBulkActionsToolbar)(),hasSelectionControls=!!(checkboxProps||searchInputProps);return _react.default.createElement(StyledBulkActionsToolbarContainer,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Toolbar"},_react.default.createElement(InlineContainer,null,_react.default.createElement(ToolbarInner,{role:"toolbar","aria-describedby":hasSelectionControls?void 0:id,"aria-orientation":"horizontal",id:toolbarId,ref:toolbarRef,onBlur:onBlur,onFocus:onFocus,...ariaAttributes},_react.default.createElement(ToolbarControls,null,checkboxProps?_react.default.createElement(CustomInline,{vAlignItems:"center"},_react.default.createElement(CheckboxStyled,null,_react.default.createElement(_Checkbox.CheckboxRaw,{...checkboxProps,size:"s","aria-labelledby":id})),_react.default.createElement(CustomToolbarItemCount,{id:id},totalItems)):_react.default.createElement(CustomToolbarItemCount,{id:id},totalItems),_react.default.createElement(_Inline.Inline,{noWrap:!0},actions?.map(({variant="secondary",label,...buttonProps})=>_react.default.createElement(_Button.Button,{...buttonProps,key:`action-${label}`,size:"s",variant:variant,"aria-describedby":id},label)))),renderRightContent&&_react.default.createElement(StyledRightSlot,{rightContentNoWrapOnMobile:rightContentNoWrapOnMobile},_react.default.createElement(StyledRightContent,{rightContentNoWrapOnMobile:rightContentNoWrapOnMobile},renderRightContent({toolbarId:toolbarId})))),searchInputProps&&_react.default.createElement(StyledSearch,null,_react.default.createElement(_SearchInput.SearchInput,{...searchInputProps,"aria-describedby":id}))),!hideDivider&&_react.default.createElement(_Divider.Divider,null))});

package/build/cjs/components/DataTable/DataTable.d.ts

@@ -1,6 +1,7 @@
 import type { ReactElement, ReactNode } from "react";
 import type { MQ } from "../../types";
-import type { DataTableColumn, DataTableRow, DataTableRowProps, DataTableSlotProps } from "./types";
+import type { DataTableColumn, DataTableColumnOrGroup, DataTableRow, DataTableRowProps, DataTableSlotProps } from "./types";
+import { DataTableToolbar } from "./DataTableToolbar/DataTableToolbar";
 type DataTablePropsBase = {
     /** Screen reader text for table caption */
     caption: string;
@@ -15,8 +16,10 @@ type DataTablePropsBase = {
     /** Footer element */
     footer?: ReactElement;
     /**
-     * Meta data for columns
-     * @param DataTableColumn[].name - Column name
+     * Meta data for columns. An entry with `kind: "group"` and `children` is a
+     * group: the children become the columns, and the group renders a shared label
+     * above them. A column leaves `kind` out.
+     * @param DataTableColumn[].name - Column name, and the key read from each row
      * @param DataTableColumn[].label - Column label for display
      * @param DataTableColumn[].align - Align cell content, 'left' | 'right' | 'center'
      * @param DataTableColumn[].width - Column width
@@ -26,7 +29,7 @@ type DataTablePropsBase = {
      * @param DataTableColumn[].isSortable - Is table sortable by column
      * @param DataTableColumn[].sortDirection - Sorted as 'asc' | 'desc'
      */
-    columns: DataTableColumn[];
+    columns: DataTableColumnOrGroup[];
     /**
      * Table content as an array of objects with values for each column
      * @param DataTableRow[].id - Unique id
@@ -49,11 +52,13 @@ type DataTablePropsBase = {
      *  rendered when `isEmpty` is true. */
     slotProps?: DataTableSlotProps;
     /**
-     * Is first column sticky on horizontal scroll
+     * Is first column sticky on horizontal scroll. Ignored when that column
+     * belongs to a group, because a group label cannot pin with it.
      */
     isFirstColumnSticky?: boolean;
     /**
-     * Is first column sticky on horizontal scroll
+     * Is last column sticky on horizontal scroll. Ignored when that column
+     * belongs to a group, because a group label cannot pin with it.
      */
     isLastColumnSticky?: boolean;
     "data-e2e-test-id"?: string;
@@ -80,8 +85,12 @@ type DataTablePropsBase = {
 };
 type DataTableSelectableProps = {
     /** Renders selectable rows */
-    isSelectable: true;
-    /** Accessible name for the header select-all checkbox. Required when `isSelectable` is `true`. */
+    isSelectable: boolean;
+    /**
+     * Accessible name for the header select-all checkbox. Required as soon as
+     * `isSelectable` can be `true`, a runtime boolean included. It renders
+     * nothing while selection is off.
+     */
     selectAllRowsCheckboxAriaLabel: string;
     /** Array of selected row ids */
     selectedRowIds?: DataTableRow["id"][];
@@ -135,5 +144,6 @@ export declare function BaseDataTable({ caption, columns, rows, footer, currentl
 export declare function DataTable({ children, ...rest }: DataTableProps): ReactElement;
 export declare namespace DataTable {
     var sortCompareFn: (a: DataTableRow, b: DataTableRow, columnName: DataTableColumn["name"], desiredSortDirection: DataTableColumn["sortDirection"]) => number;
+    var Toolbar: typeof DataTableToolbar;
 }
 export {};

package/build/cjs/components/DataTable/DataTable.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get BaseDataTable(){return BaseDataTable},get DataTable(){return DataTable}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_interop_require_wildcard=require("@swc/helpers/_/_interop_require_wildcard"),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_react=/*#__PURE__*/_interop_require_wildcard._(require("react")),_mediaQueries=require("../../shared/mediaQueries"),_Container=require("../Container/Container"),_ScreenReaderText=require("../Utilities/ScreenReaderText/ScreenReaderText"),_buildInternalColumns=require("./internal/buildInternalColumns"),_TableHeader=/*#__PURE__*/_interop_require_default._(require("./header/TableHeader")),_TableBody=/*#__PURE__*/_interop_require_default._(require("./TableBody")),_useDataTableScrollContainer=require("./useDataTableScrollContainer"),_useDataTableSort=require("./useDataTableSort");function getTableScrolledToRight(elm){let elmRect=elm.getBoundingClientRect();return elm.scrollLeft+elmRect.width>=elm.scrollWidth}const TableContainer=(0,_styled.default)("div",{target:"ebumpgj0",label:"TableContainer"})(({theme,footer,maxHeight})=>({position:"relative",zIndex:0,overflow:"auto",backgroundColor:theme.values.color.background.primary.default,borderRadius:"inherit",...(0,_mediaQueries.useResponsiveValue)({maxHeight}),...footer&&{borderBottomLeftRadius:0,borderBottomRightRadius:0}})),StyledTable=(0,_styled.default)("table",{target:"ebumpgj1",label:"StyledTable"})(({layout,tableWidth})=>({borderSpacing:0,tableLayout:layout,...(0,_mediaQueries.useResponsiveValue)({width:tableWidth})})),StyledFooter=(0,_styled.default)("div",{target:"ebumpgj2",label:"StyledFooter"})(({theme})=>({padding:theme.variables.size.spacing.xs,backgroundColor:theme.values.color.background.primary.default,borderBottomLeftRadius:"inherit",borderBottomRightRadius:"inherit"}));function BaseDataTable({caption,columns,rows=[],footer,currentlySortedByColumn,isFirstColumnSticky=!0,isLastColumnSticky=!1,"data-e2e-test-id":dataE2eTestId,isLoading=!1,loadingStateScreenReaderText="Loading",isEmpty=!1,slotProps,children,emptyTableContentHeight="15rem",layout="auto",width="100%",bodyCellVerticalPadding="m",emptyCellContent="--",maxHeight,isSelectable,selectedRowIds=[],allRowsSelected,selectAllRowsCheckboxAriaLabel,getRowProps=()=>({}),onRowSelectionChange,onAllRowsSelectionChange,isExpandable,expandedRowIds:expandedRowIdsProp,onRowExpansionChange,expandRowAriaLabel,collapseRowAriaLabel,onSort,...ariaAttributes}){let[isScrolledToRight,setIsScrolledToRight]=(0,_react.useState)(isLastColumnSticky),[isScrolledToLeft,setIsScrolledToLeft]=(0,_react.useState)(isFirstColumnSticky),[uncontrolledExpandedRowIds,setUncontrolledExpandedRowIds]=(0,_react.useState)([]),tableRef=(0,_react.useRef)(null),containerRef=(0,_react.useRef)(null),containerWidth=(0,_useDataTableScrollContainer.useDataTableScrollContainerWidth)(containerRef),isExpandedControlled=void 0!==expandedRowIdsProp,expandedRowIds=isExpandedControlled?expandedRowIdsProp:uncontrolledExpandedRowIds,internalColumns=(0,_buildInternalColumns.buildInternalColumns)({columns,features:{selectable:isSelectable,expandable:isExpandable}}),handleRowExpansionChange=(0,_react.useCallback)(nextExpandedRowIds=>{isExpandedControlled||setUncontrolledExpandedRowIds(nextExpandedRowIds),onRowExpansionChange?.(nextExpandedRowIds)},[isExpandedControlled,onRowExpansionChange]),handleScroll=(0,_react.useCallback)(evt=>{let elm=evt.currentTarget;setIsScrolledToLeft(0===elm.scrollLeft),setIsScrolledToRight(getTableScrolledToRight(elm))},[]);(0,_react.useEffect)(()=>{if("undefined"==typeof ResizeObserver||!containerRef.current)return;let elm=containerRef.current,observer=new ResizeObserver(()=>{setIsScrolledToLeft(0===elm.scrollLeft),setIsScrolledToRight(getTableScrolledToRight(elm))});return observer.observe(elm),()=>observer.disconnect()},[]);let footerElm=footer?_react.default.createElement(StyledFooter,null,footer):null;return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(TableContainer,{ref:containerRef,footer:footer,maxHeight:maxHeight,onScroll:handleScroll},_react.default.createElement(StyledTable,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"DataTable",ref:tableRef,layout:layout,tableWidth:width,"aria-busy":isLoading||void 0,...ariaAttributes},_react.default.createElement(_ScreenReaderText.ScreenReaderText,{as:"caption"},caption),_react.default.createElement(_TableHeader.default,{columns:internalColumns,isFirstColumnSticky:isFirstColumnSticky,isLastColumnSticky:isLastColumnSticky,currentlySortedByColumn:currentlySortedByColumn,isTableScrolledToLeft:isScrolledToLeft,isTableScrolledToRight:isScrolledToRight,maxHeight:maxHeight,allRowsSelected:allRowsSelected,selectedRowIds:selectedRowIds,onAllRowsSelectionChange:onAllRowsSelectionChange,selectAllRowsCheckboxAriaLabel:selectAllRowsCheckboxAriaLabel,onSort:onSort}),_react.default.createElement(_TableBody.default,{columns:internalColumns,rows:rows,bodyCellVerticalPadding:bodyCellVerticalPadding,isTableScrolledToLeft:isScrolledToLeft,isTableScrolledToRight:isScrolledToRight,isEmpty:isEmpty,emptyState:slotProps?.emptyState,isLoading:isLoading,loadingStateScreenReaderText:loadingStateScreenReaderText,emptyTableContentHeight:emptyTableContentHeight,containerWidth:containerWidth,footer:footer,isFirstColumnSticky:isFirstColumnSticky,isLastColumnSticky:isLastColumnSticky,emptyCellContent:emptyCellContent,selectedRowIds:selectedRowIds,onRowSelectionChange:onRowSelectionChange,getRowProps:getRowProps,expandedRowIds:expandedRowIds,isTableExpandable:isExpandable,expandRowAriaLabel:expandRowAriaLabel,collapseRowAriaLabel:collapseRowAriaLabel,onRowExpansionChange:handleRowExpansionChange},children))),footerElm)}function DataTable({children,...rest}){return _react.default.createElement(_Container.Container,{elevation:1},_react.default.createElement(BaseDataTable,rest,children))}DataTable.sortCompareFn=_useDataTableSort.defaultSortCompareFn;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get BaseDataTable(){return BaseDataTable},get DataTable(){return DataTable}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_interop_require_wildcard=require("@swc/helpers/_/_interop_require_wildcard"),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_react=/*#__PURE__*/_interop_require_wildcard._(require("react")),_mediaQueries=require("../../shared/mediaQueries"),_Container=require("../Container/Container"),_ScreenReaderText=require("../Utilities/ScreenReaderText/ScreenReaderText"),_buildColumnSegments=require("./internal/buildColumnSegments"),_buildInternalColumns=require("./internal/buildInternalColumns"),_TableHeader=/*#__PURE__*/_interop_require_default._(require("./header/TableHeader")),_TableBody=/*#__PURE__*/_interop_require_default._(require("./TableBody")),_TableColumnGroups=/*#__PURE__*/_interop_require_default._(require("./TableColumnGroups")),_useDataTableScrollContainer=require("./useDataTableScrollContainer"),_useDataTableSort=require("./useDataTableSort"),_DataTableToolbar=require("./DataTableToolbar/DataTableToolbar");function getTableScrolledToRight(elm){let elmRect=elm.getBoundingClientRect();return elm.scrollLeft+elmRect.width>=elm.scrollWidth}const TableContainer=(0,_styled.default)("div",{target:"e1eldv6n0",label:"TableContainer"})(({theme,footer,maxHeight})=>({position:"relative",zIndex:0,overflow:"auto",backgroundColor:theme.values.color.background.primary.default,borderRadius:"inherit",...(0,_mediaQueries.useResponsiveValue)({maxHeight}),...footer&&{borderBottomLeftRadius:0,borderBottomRightRadius:0}})),StyledTable=(0,_styled.default)("table",{target:"e1eldv6n1",label:"StyledTable"})(({layout,tableWidth})=>({borderSpacing:0,tableLayout:layout,...(0,_mediaQueries.useResponsiveValue)({width:tableWidth})})),StyledFooter=(0,_styled.default)("div",{target:"e1eldv6n2",label:"StyledFooter"})(({theme})=>({padding:theme.variables.size.spacing.xs,backgroundColor:theme.values.color.background.primary.default,borderBottomLeftRadius:"inherit",borderBottomRightRadius:"inherit"})),NO_SELECTED_ROW_IDS=[];function BaseDataTable({caption,columns,rows=[],footer,currentlySortedByColumn,isFirstColumnSticky=!0,isLastColumnSticky=!1,"data-e2e-test-id":dataE2eTestId,isLoading=!1,loadingStateScreenReaderText="Loading",isEmpty=!1,slotProps,children,emptyTableContentHeight="15rem",layout="auto",width="100%",bodyCellVerticalPadding="m",emptyCellContent="--",maxHeight,isSelectable,selectedRowIds=NO_SELECTED_ROW_IDS,allRowsSelected,selectAllRowsCheckboxAriaLabel,getRowProps=()=>({}),onRowSelectionChange,onAllRowsSelectionChange,isExpandable,expandedRowIds:expandedRowIdsProp,onRowExpansionChange,expandRowAriaLabel,collapseRowAriaLabel,onSort,...ariaAttributes}){let[isScrolledToRight,setIsScrolledToRight]=(0,_react.useState)(isLastColumnSticky),[isScrolledToLeft,setIsScrolledToLeft]=(0,_react.useState)(isFirstColumnSticky),[uncontrolledExpandedRowIds,setUncontrolledExpandedRowIds]=(0,_react.useState)([]),tableRef=(0,_react.useRef)(null),containerRef=(0,_react.useRef)(null),containerWidth=(0,_useDataTableScrollContainer.useDataTableScrollContainerWidth)(containerRef),isExpandedControlled=void 0!==expandedRowIdsProp,expandedRowIds=isExpandedControlled?expandedRowIdsProp:uncontrolledExpandedRowIds,activeSelectedRowIds=isSelectable?selectedRowIds:NO_SELECTED_ROW_IDS,internalColumns=(0,_buildInternalColumns.buildInternalColumns)({columns,features:{selectable:isSelectable,expandable:isExpandable}}),columnSegments=(0,_buildColumnSegments.buildColumnSegments)(internalColumns),hasColumnGroups=columnSegments.some(({group})=>group),handleRowExpansionChange=(0,_react.useCallback)(nextExpandedRowIds=>{isExpandedControlled||setUncontrolledExpandedRowIds(nextExpandedRowIds),onRowExpansionChange?.(nextExpandedRowIds)},[isExpandedControlled,onRowExpansionChange]),handleScroll=(0,_react.useCallback)(evt=>{let elm=evt.currentTarget;setIsScrolledToLeft(0===elm.scrollLeft),setIsScrolledToRight(getTableScrolledToRight(elm))},[]);(0,_react.useEffect)(()=>{if("undefined"==typeof ResizeObserver||!containerRef.current)return;let elm=containerRef.current,observer=new ResizeObserver(()=>{setIsScrolledToLeft(0===elm.scrollLeft),setIsScrolledToRight(getTableScrolledToRight(elm))});return observer.observe(elm),()=>observer.disconnect()},[]);let footerElm=footer?_react.default.createElement(StyledFooter,null,footer):null;return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(TableContainer,{ref:containerRef,footer:footer,maxHeight:maxHeight,onScroll:handleScroll},_react.default.createElement(StyledTable,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"DataTable",ref:tableRef,layout:layout,tableWidth:width,"aria-busy":isLoading||void 0,...ariaAttributes},_react.default.createElement(_ScreenReaderText.ScreenReaderText,{as:"caption"},caption),hasColumnGroups&&_react.default.createElement(_TableColumnGroups.default,{segments:columnSegments}),_react.default.createElement(_TableHeader.default,{columns:internalColumns,isFirstColumnSticky:isFirstColumnSticky,isLastColumnSticky:isLastColumnSticky,currentlySortedByColumn:currentlySortedByColumn,isTableScrolledToLeft:isScrolledToLeft,isTableScrolledToRight:isScrolledToRight,maxHeight:maxHeight,allRowsSelected:allRowsSelected,selectedRowIds:activeSelectedRowIds,onAllRowsSelectionChange:onAllRowsSelectionChange,selectAllRowsCheckboxAriaLabel:selectAllRowsCheckboxAriaLabel,onSort:onSort}),_react.default.createElement(_TableBody.default,{columns:internalColumns,rows:rows,bodyCellVerticalPadding:bodyCellVerticalPadding,isTableScrolledToLeft:isScrolledToLeft,isTableScrolledToRight:isScrolledToRight,isEmpty:isEmpty,emptyState:slotProps?.emptyState,isLoading:isLoading,loadingStateScreenReaderText:loadingStateScreenReaderText,emptyTableContentHeight:emptyTableContentHeight,containerWidth:containerWidth,footer:footer,isFirstColumnSticky:isFirstColumnSticky,isLastColumnSticky:isLastColumnSticky,emptyCellContent:emptyCellContent,selectedRowIds:activeSelectedRowIds,onRowSelectionChange:onRowSelectionChange,getRowProps:getRowProps,expandedRowIds:expandedRowIds,isTableExpandable:isExpandable,expandRowAriaLabel:expandRowAriaLabel,collapseRowAriaLabel:collapseRowAriaLabel,onRowExpansionChange:handleRowExpansionChange},children))),footerElm)}function DataTable({children,...rest}){return _react.default.createElement(_Container.Container,{elevation:1},_react.default.createElement(BaseDataTable,rest,children))}DataTable.sortCompareFn=_useDataTableSort.defaultSortCompareFn,DataTable.Toolbar=_DataTableToolbar.DataTableToolbar;

package/build/cjs/components/DataTable/DataTableToolbar/DataTableToolbar.d.ts

@@ -0,0 +1,97 @@
+import type { ReactElement } from "react";
+import type { ConditionalAccessibleName } from "../../../types/a11y";
+import type { ForbiddenProp } from "../../../types/type-helpers";
+import type { SlotProps } from "../../../shared/slotProps";
+import type { BulkActionsToolbarProps } from "../../BulkActionsToolbar/BulkActionsToolbar";
+import type { FilterToolbarContentProps } from "../../FilterToolbar/FilterToolbar";
+type DataTableToolbarFilterContent = Omit<FilterToolbarContentProps, "totalItems" | "searchInputProps">;
+type NoAccessibleName = {
+    "aria-label"?: ForbiddenProp<"Fix: isSelectable={false} renders no toolbar row for aria-label to name. Remove it.">;
+    "aria-labelledby"?: ForbiddenProp<"Fix: isSelectable={false} renders no toolbar row for aria-labelledby to name. Remove it.">;
+};
+type DataTableToolbarFilterSlotProps = Required<SlotProps<{
+    /** Accessible name of the filter row's control group. */
+    filterToolbar: {
+        "aria-label": string;
+    };
+}>>;
+/**
+ * Each row keeps its own accessible name, required only while that row
+ * renders: `slotProps.filterToolbar` for the filter row's `role="group"` (an
+ * unnamed group is worse than none), and `aria-label`/`aria-labelledby` for
+ * the bulk row's `role="toolbar"`. The second arm drops the toolbar name
+ * because that row never renders there.
+ *
+ * The first arm keeps `isSelectable` a plain `boolean` on purpose: a caller
+ * deciding selection at runtime can't prove the bulk row is gone, so it still
+ * owes a name and still type-checks without branching its JSX.
+ */
+type DataTableToolbarFilterSlice = ({
+    slotProps: DataTableToolbarFilterSlotProps;
+    /**
+     * Whether the rows can be selected. When `false`, the bulk-actions row is
+     * hidden and the filter row takes over the item count.
+     * @default true
+     */
+    isSelectable?: boolean;
+} & DataTableToolbarFilterContent & ConditionalAccessibleName) | ({
+    slotProps: DataTableToolbarFilterSlotProps;
+    isSelectable: false;
+} & NoAccessibleName & DataTableToolbarFilterContent) | ({
+    slotProps?: never;
+    isSelectable?: true;
+    segmentedControlProps?: never;
+    filters?: never;
+} & ConditionalAccessibleName);
+/**
+ * Forwarded to `BulkActionsToolbar`. Each prop keeps that component's own type,
+ * so the two cannot drift.
+ */
+type DataTableToolbarBulkActionsSlice = {
+    /** Bulk action buttons, e.g. "Edit", "Export", "Delete". */
+    actions?: BulkActionsToolbarProps["actions"];
+    /**
+     * Select-all checkbox shown at the start of the bulk row. Omit it when the
+     * table renders its own select-all checkbox, to avoid a duplicate control.
+     */
+    checkboxProps?: BulkActionsToolbarProps["checkboxProps"];
+    /**
+     * Item count, e.g. `"50 items"`. Shown in the bulk row, or in the filter row
+     * when `isSelectable` is `false`. It is the toolbar's single live region.
+     */
+    totalItems: BulkActionsToolbarProps["totalItems"];
+    /** Content rendered at the end of the bulk row. Receives the toolbar's own id. */
+    renderRightContent?: BulkActionsToolbarProps["renderRightContent"];
+    /** Keeps the right content on one line on narrow viewports. */
+    rightContentNoWrapOnMobile?: BulkActionsToolbarProps["rightContentNoWrapOnMobile"];
+    /** Hides the divider below the toolbar, whichever row is the last one. */
+    hideDivider?: BulkActionsToolbarProps["hideDivider"];
+};
+export type DataTableToolbarProps = DataTableToolbarFilterSlice & DataTableToolbarBulkActionsSlice & {
+    /**
+     * Search field. It renders in the filter row when that row exists, and in
+     * the bulk row otherwise.
+     */
+    searchInputProps?: FilterToolbarContentProps["searchInputProps"];
+    "data-e2e-test-id"?: string;
+};
+/**
+ * The controls above a `DataTable`: a `FilterToolbar` (segmented control,
+ * filter and column triggers, search) above the existing `BulkActionsToolbar`
+ * row.
+ *
+ * - `isSelectable` (default `true`) decides whether the bulk-actions row
+ *   renders. The item count sits in that row when it renders, and in the
+ *   filter row otherwise.
+ * - The search field sits in the filter row when that row renders, and in the
+ *   bulk-actions row otherwise.
+ *
+ * For a filter row on its own, import `FilterToolbar` directly. It has no
+ * dependency on `DataTable`.
+ *
+ * Render as a sibling of `BaseDataTable` inside a shared
+ * `<Container elevation={1}>`, never as a child of `<DataTable>`. `DataTable`
+ * renders its `children` inside the `<table>` itself.
+ */
+export declare function DataTableToolbar({ slotProps, isSelectable, segmentedControlProps, filters, searchInputProps, actions, checkboxProps, totalItems, renderRightContent, rightContentNoWrapOnMobile, hideDivider, "data-e2e-test-id": dataE2eTestId, ...ariaAttributes }: DataTableToolbarProps): ReactElement;
+export {};

package/build/cjs/components/DataTable/DataTableToolbar/DataTableToolbar.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"DataTableToolbar",{enumerable:!0,get:function(){return DataTableToolbar}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Divider=require("../../Divider/Divider"),_BulkActionsToolbar=require("../../BulkActionsToolbar/BulkActionsToolbar"),_FilterToolbar=require("../../FilterToolbar/FilterToolbar"),hasAccessibleName=ariaAttributes=>"aria-label"in ariaAttributes||"aria-labelledby"in ariaAttributes,StyledToolbar=(0,_styled.default)("div",{target:"e116raau0",label:"StyledToolbar"})(({theme,hasFilterRow})=>({borderTopLeftRadius:"inherit",borderTopRightRadius:"inherit",backgroundColor:hasFilterRow?theme.values.color.background.secondary.default:theme.values.color.background.primary.default}));function DataTableToolbar({slotProps,isSelectable=!0,segmentedControlProps,filters,searchInputProps,actions,checkboxProps,totalItems,renderRightContent,rightContentNoWrapOnMobile,hideDivider,"data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let showFilterRow=!!segmentedControlProps||!!filters?.length||!isSelectable;return _react.default.createElement(StyledToolbar,{hasFilterRow:showFilterRow,"data-ds-id":"DataTableToolbar","data-e2e-test-id":dataE2eTestId},showFilterRow&&void 0!==slotProps&&_react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_FilterToolbar.FilterToolbar,{"aria-label":slotProps.filterToolbar["aria-label"],totalItems:isSelectable?void 0:totalItems,segmentedControlProps:segmentedControlProps,filters:filters,searchInputProps:searchInputProps}),(isSelectable||!hideDivider)&&_react.default.createElement(_Divider.Divider,null)),isSelectable&&hasAccessibleName(ariaAttributes)&&_react.default.createElement(_BulkActionsToolbar.BulkActionsToolbar,{actions:actions,checkboxProps:checkboxProps,totalItems:totalItems,searchInputProps:showFilterRow?void 0:searchInputProps,renderRightContent:renderRightContent,rightContentNoWrapOnMobile:rightContentNoWrapOnMobile,hideDivider:hideDivider,...ariaAttributes}))}

package/build/cjs/components/DataTable/TableCell.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _default}});const _styled=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("@emotion/styled")),_mediaQueries=require("../../shared/mediaQueries"),_default=(0,_styled.default)("td",{target:"e16jwji60",label:"TableCell"})(({theme,sticky,isTableScrolledToLeft,isTableScrolledToRight,alignColumn,columnWidth,isActive,isSelected})=>({borderBottom:`1px solid ${theme.values.color.divider.primary}`,backgroundColor:theme.values.color.background.primary.default,...isActive&&{backgroundColor:theme.values.color.background.secondary.default},...isSelected&&{backgroundColor:theme.values.color.background.accentSubtle.default},...(0,_mediaQueries.useResponsiveValue)({width:columnWidth,textAlign:alignColumn}),..."left"===sticky&&!isTableScrolledToLeft&&{position:"sticky",left:0,borderRight:`1px solid ${theme.values.color.divider.primary}`,zIndex:1},..."right"===sticky&&!isTableScrolledToRight&&{position:"sticky",right:0,borderLeft:`1px solid ${theme.values.color.divider.primary}`,zIndex:1}}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _default}});const _styled=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("@emotion/styled")),_mediaQueries=require("../../shared/mediaQueries"),_default=(0,_styled.default)("td",{target:"e1tso8ln0",label:"TableCell"})(({theme,sticky,isTableScrolledToLeft,isTableScrolledToRight,alignColumn,columnWidth,isActive,isSelected})=>({borderBottom:`1px solid ${theme.values.color.divider.primary}`,backgroundColor:theme.values.color.background.primary.default,...isActive&&{backgroundColor:theme.values.color.background.secondary.default},...isSelected&&{backgroundColor:theme.values.color.background.accentSubtle.default},...(0,_mediaQueries.useResponsiveValue)({width:columnWidth,textAlign:alignColumn}),..."left"===sticky&&{borderRight:"1px solid transparent",...!isTableScrolledToLeft&&{position:"sticky",left:0,borderRightColor:theme.values.color.divider.primary,zIndex:1}},..."right"===sticky&&{borderLeft:"1px solid transparent",...!isTableScrolledToRight&&{position:"sticky",right:0,borderLeftColor:theme.values.color.divider.primary,zIndex:1}}}));

package/build/cjs/components/DataTable/TableColumnGroups.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { ColumnSegment } from "./internal/buildColumnSegments";
+type TableColumnGroupsProps = {
+    segments: ColumnSegment[];
+};
+/**
+ * The `<colgroup>` elements that back the header, one per segment.
+ *
+ * A group header carries `scope="colgroup"`, which names a real column group and
+ * nothing else — `colspan` alone does not create one. The `<col>` widths also give
+ * a grouped column a width under `layout="fixed"`, where a fixed layout reads the
+ * first header row and the grouped column sits in the second.
+ */
+declare function TableColumnGroups({ segments, }: TableColumnGroupsProps): React.ReactElement;
+export default TableColumnGroups;

package/build/cjs/components/DataTable/TableColumnGroups.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _default}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_mediaQueries=require("../../shared/mediaQueries"),StyledCol=(0,_styled.default)("col",{target:"e12f45xj0",label:"StyledCol"})(({columnWidth})=>({...(0,_mediaQueries.useResponsiveValue)({width:columnWidth})})),_default=function({segments}){return _react.default.createElement(_react.default.Fragment,null,segments.map(segment=>_react.default.createElement("colgroup",{key:segment.columns[0].column.name},segment.columns.map(({column})=>_react.default.createElement(StyledCol,{key:column.name,columnWidth:column.width})))))};

package/build/cjs/components/DataTable/header/DataTableHeaderLabel.d.ts

@@ -0,0 +1,28 @@
+import type { ReactElement } from "react";
+import React from "react";
+import type { SlotProps } from "../../../shared/slotProps";
+import type { DataTableColumn, DataTableColumnDefinition, DataTableColumnGroup } from "../types";
+/**
+ * `aria-label` is required inside the slot because the toggletip trigger is an
+ * icon-only button, which needs an accessible name (WCAG 2.1 SC 4.1.2).
+ */
+type DataTableHeaderLabelSlotProps = SlotProps<{
+    toggletip: {
+        content: ReactElement;
+        "aria-label": string;
+    };
+}>;
+/**
+ * Builds the slot in one place, so both header call sites pair `content` with
+ * its `aria-label` the same way. The project runs without `strictNullChecks`,
+ * so nothing here would flag an `aria-label` that arrives undefined.
+ */
+export declare const toToggletipSlotProps: (source: DataTableColumnDefinition | DataTableColumnGroup) => DataTableHeaderLabelSlotProps | undefined;
+type DataTableHeaderLabelProps = {
+    label: string;
+    align: DataTableColumn["align"];
+    /** Props forwarded to internal sub-components */
+    slotProps?: DataTableHeaderLabelSlotProps;
+};
+export declare function DataTableHeaderLabel({ label, align, slotProps, }: Readonly<DataTableHeaderLabelProps>): React.ReactElement;
+export {};

package/build/cjs/components/DataTable/header/DataTableHeaderLabel.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get DataTableHeaderLabel(){return DataTableHeaderLabel},get toToggletipSlotProps(){return toToggletipSlotProps}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Inline=require("../../Inline/Inline"),_SortableCellContent=require("./SortableCellContent"),_DataTableHeaderToggletip=require("./DataTableHeaderToggletip"),toToggletipSlotProps=source=>source.toggletipContent?{toggletip:{content:source.toggletipContent,"aria-label":source.toggletipAriaLabel}}:void 0;function DataTableHeaderLabel({label,align,slotProps}){return _react.default.createElement(_Inline.Inline,{space:"xs",noWrap:!0,vAlignItems:"center",alignItems:align},_react.default.createElement(_SortableCellContent.StyledLabel,{as:"span",size:"s",alignColumn:align,color:"tertiary",normalizeHeight:!0},label),slotProps?.toggletip&&_react.default.createElement(_DataTableHeaderToggletip.DataTableHeaderToggletip,{content:slotProps.toggletip.content,"aria-label":slotProps.toggletip["aria-label"]}))}

package/build/cjs/components/DataTable/header/TableHeader.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _default}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_TableCell=/*#__PURE__*/_interop_require_default._(require("../TableCell")),_getColumnSticky=require("../internal/getColumnSticky"),_types=require("../internal/types"),_SortableCellContent=require("./SortableCellContent"),_Inline=require("../../Inline/Inline"),_DataTableHeaderToggletip=require("./DataTableHeaderToggletip"),SORT_DIRECTION_TEXT={asc:"ascending",desc:"descending"},StyledThead=(0,_styled.default)("thead",{target:"eqohg680",label:"StyledThead"})(({maxHeight})=>({...maxHeight&&{position:"sticky",top:0,zIndex:2}})),StyledTh=(0,_styled.default)(_TableCell.default,{target:"eqohg681",label:"StyledTh"})(({theme})=>({padding:`${theme.variables.size.spacing.s} ${theme.variables.size.spacing.m}`,whiteSpace:"nowrap",backgroundColor:theme.values.color.background.primary.default})),_default=_react.default.memo(function({className,columns,isFirstColumnSticky,isLastColumnSticky,currentlySortedByColumn,isTableScrolledToLeft,isTableScrolledToRight,maxHeight,allRowsSelected,selectedRowIds,selectAllRowsCheckboxAriaLabel,onAllRowsSelectionChange,onSort}){let headerContext={onSort,currentlySortedByColumn,allRowsSelected,selectedRowIds,selectAllRowsCheckboxAriaLabel,onAllRowsSelectionChange},columnElements=columns.map((column,columnIndex)=>{let headerElm,sticky=(0,_getColumnSticky.getColumnSticky)({column,columnIndex,columns,isFirstColumnSticky,isLastColumnSticky});if((0,_types.isControlColumn)(column))return _react.default.createElement(StyledTh,{as:"th",alignColumn:"left",columnWidth:column.width,key:column.name,sticky:sticky,isTableScrolledToLeft:isTableScrolledToLeft,isTableScrolledToRight:isTableScrolledToRight,scope:"col"},column.renderHeader(headerContext));let{isSortable,label,align="left",width,name,sortDirection,toggletipContent,toggletipAriaLabel}=column;headerElm=isSortable?_react.default.createElement(_SortableCellContent.SortableCellContent,{onSort:onSort,name:name,label:label,sortDirection:sortDirection,align:align,currentlySortedByColumn:currentlySortedByColumn,toggletipContent:toggletipContent,toggletipAriaLabel:toggletipAriaLabel}):_react.default.createElement(_Inline.Inline,{space:"xs",noWrap:!0,vAlignItems:"center",alignItems:align},_react.default.createElement(_SortableCellContent.StyledLabel,{as:"span",size:"s",alignColumn:align,color:"tertiary",normalizeHeight:!0},label),toggletipContent&&_react.default.createElement(_DataTableHeaderToggletip.DataTableHeaderToggletip,{content:toggletipContent,"aria-label":toggletipAriaLabel}));let ariaSortAttr=currentlySortedByColumn===name&&{"aria-sort":SORT_DIRECTION_TEXT[sortDirection]};return _react.default.createElement(StyledTh,{as:"th",alignColumn:align,columnWidth:width,key:name,sticky:sticky,isTableScrolledToLeft:isTableScrolledToLeft,isTableScrolledToRight:isTableScrolledToRight,scope:"col",...ariaSortAttr},headerElm)});return _react.default.createElement(StyledThead,{className:className,maxHeight:maxHeight},_react.default.createElement("tr",null,columnElements))});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _default}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_TableCell=/*#__PURE__*/_interop_require_default._(require("../TableCell")),_getColumnSticky=require("../internal/getColumnSticky"),_types=require("../internal/types"),_buildColumnSegments=require("../internal/buildColumnSegments"),_SortableCellContent=require("./SortableCellContent"),_DataTableHeaderLabel=require("./DataTableHeaderLabel"),SORT_DIRECTION_TEXT={asc:"ascending",desc:"descending"},StyledThead=(0,_styled.default)("thead",{target:"elv391v0",label:"StyledThead"})(({maxHeight})=>({...maxHeight&&{position:"sticky",top:0,zIndex:2}})),StyledTh=(0,_styled.default)(_TableCell.default,{target:"elv391v1",label:"StyledTh"})(({theme,hasDivider})=>({padding:`${theme.variables.size.spacing.s} ${theme.variables.size.spacing.m}`,whiteSpace:"nowrap",backgroundColor:theme.values.color.background.primary.default,...hasDivider&&{borderRight:`1px solid ${theme.values.color.divider.primary}`}})),_default=_react.default.memo(function({className,columns,isFirstColumnSticky,isLastColumnSticky,currentlySortedByColumn,isTableScrolledToLeft,isTableScrolledToRight,maxHeight,allRowsSelected,selectedRowIds,selectAllRowsCheckboxAriaLabel,onAllRowsSelectionChange,onSort}){let headerContext={onSort,currentlySortedByColumn,allRowsSelected,selectedRowIds,selectAllRowsCheckboxAriaLabel,onAllRowsSelectionChange},renderColumnCell=({column,columnIndex},rowSpan)=>{let headerElm,isLastColumn=columnIndex===columns.length-1,sticky=(0,_getColumnSticky.getColumnSticky)({column,columnIndex,columns,isFirstColumnSticky,isLastColumnSticky});if((0,_types.isControlColumn)(column))return _react.default.createElement(StyledTh,{as:"th",alignColumn:"left",columnWidth:column.width,key:column.name,rowSpan:rowSpan,sticky:sticky,isTableScrolledToLeft:isTableScrolledToLeft,isTableScrolledToRight:isTableScrolledToRight,hasDivider:!1,scope:"col"},column.renderHeader(headerContext));let{isSortable,label,align="left",width,name,sortDirection,toggletipContent,toggletipAriaLabel}=column;headerElm=isSortable?_react.default.createElement(_SortableCellContent.SortableCellContent,{onSort:onSort,name:name,label:label,sortDirection:sortDirection,align:align,currentlySortedByColumn:currentlySortedByColumn,toggletipContent:toggletipContent,toggletipAriaLabel:toggletipAriaLabel}):_react.default.createElement(_DataTableHeaderLabel.DataTableHeaderLabel,{label:label,align:align,slotProps:(0,_DataTableHeaderLabel.toToggletipSlotProps)(column)});let ariaSortAttr=currentlySortedByColumn===name&&{"aria-sort":SORT_DIRECTION_TEXT[sortDirection]};return _react.default.createElement(StyledTh,{as:"th",alignColumn:align,columnWidth:width,key:name,rowSpan:rowSpan,sticky:sticky,isTableScrolledToLeft:isTableScrolledToLeft,isTableScrolledToRight:isTableScrolledToRight,hasDivider:!isLastColumn,scope:"col",...ariaSortAttr},headerElm)},renderGroupCell=(group,groupColumns)=>{let{name,label,align="center"}=group,isLastColumn=groupColumns[groupColumns.length-1].columnIndex===columns.length-1;return _react.default.createElement(StyledTh,{as:"th",alignColumn:align,key:name,colSpan:groupColumns.length,sticky:!1,isTableScrolledToLeft:isTableScrolledToLeft,isTableScrolledToRight:isTableScrolledToRight,hasDivider:!isLastColumn,scope:"colgroup"},_react.default.createElement(_DataTableHeaderLabel.DataTableHeaderLabel,{label:label,align:align,slotProps:(0,_DataTableHeaderLabel.toToggletipSlotProps)(group)}))},segments=(0,_buildColumnSegments.buildColumnSegments)(columns),hasColumnGroups=segments.some(({group})=>group),ungroupedRowSpan=hasColumnGroups?2:void 0;return _react.default.createElement(StyledThead,{className:className,maxHeight:maxHeight},_react.default.createElement("tr",null,segments.map(segment=>segment.group?renderGroupCell(segment.group,segment.columns):renderColumnCell(segment.columns[0],ungroupedRowSpan))),hasColumnGroups&&_react.default.createElement("tr",null,segments.flatMap(segment=>segment.group?segment.columns.map(indexed=>renderColumnCell(indexed)):[])))});

package/build/cjs/components/DataTable/index.d.ts

@@ -1,4 +1,4 @@
-export type { DataTableColumn, DataTableRow, DataTableSlotProps, } from "./types";
+export type { DataTableColumn, DataTableColumnGroup, DataTableColumnOrGroup, DataTableRow, DataTableSlotProps, } from "./types";
 export { DataTable, BaseDataTable } from "./DataTable";
 export type { DataTableProps } from "./DataTable";
 export { useDataTableSort } from "./useDataTableSort";

package/build/cjs/components/DataTable/internal/buildColumnSegments.d.ts

@@ -0,0 +1,18 @@
+import type { DataTableColumnGroup } from "../types";
+import type { InternalColumn } from "./types";
+export type IndexedColumn = {
+    column: InternalColumn;
+    columnIndex: number;
+};
+export type ColumnSegment = {
+    /** Set when the segment's columns share one `DataTableColumnGroup`. */
+    group?: DataTableColumnGroup;
+    columns: IndexedColumn[];
+};
+/**
+ * Splits the flat column list into segments: one segment per group, and a
+ * segment of one for every column that has no group. A segment is both a
+ * cell of the first header row and a `<colgroup>`, so the two always agree
+ * on where a group starts and ends.
+ */
+export declare function buildColumnSegments(columns: InternalColumn[]): ColumnSegment[];

package/build/cjs/components/DataTable/internal/buildColumnSegments.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"buildColumnSegments",{enumerable:!0,get:function(){return buildColumnSegments}});const _types=require("./types");function buildColumnSegments(columns){let segments=[];return columns.forEach((column,columnIndex)=>{let group=(0,_types.isDataColumn)(column)?column.group:void 0,currentSegment=segments[segments.length-1];if(group&&currentSegment?.group===group)return void currentSegment.columns.push({column,columnIndex});segments.push({group,columns:[{column,columnIndex}]})}),segments}

package/build/cjs/components/DataTable/internal/buildInternalColumns.d.ts

@@ -1,10 +1,10 @@
-import type { DataTableColumn } from "../types";
+import type { DataTableColumnOrGroup } from "../types";
 import type { InternalColumn } from "./types";
 export type DataTableFeatures = {
     selectable?: boolean;
     expandable?: boolean;
 };
 export declare function buildInternalColumns({ columns, features: { selectable, expandable }, }: {
-    columns: DataTableColumn[];
+    columns: DataTableColumnOrGroup[];
     features: DataTableFeatures;
 }): InternalColumn[];

package/build/cjs/components/DataTable/internal/buildInternalColumns.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"buildInternalColumns",{enumerable:!0,get:function(){return buildInternalColumns}});const _checkboxColumn=require("./controlColumns/checkboxColumn"),_expandColumn=require("./controlColumns/expandColumn");function buildInternalColumns({columns,features:{selectable,expandable}}){let dataColumns=columns.map(column=>({...column,kind:"data"})),controlColumns=[];return expandable&&controlColumns.push((0,_expandColumn.createExpandColumn)()),selectable&&controlColumns.push((0,_checkboxColumn.createCheckboxColumn)()),[...controlColumns,...dataColumns]}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"buildInternalColumns",{enumerable:!0,get:function(){return buildInternalColumns}});const _isDataTableColumnGroup=require("../isDataTableColumnGroup"),_checkboxColumn=require("./controlColumns/checkboxColumn"),_expandColumn=require("./controlColumns/expandColumn"),toDataColumns=column=>(0,_isDataTableColumnGroup.isDataTableColumnGroup)(column)?column.children.map(child=>({...child,kind:"data",group:column})):[{...column,kind:"data"}];function buildInternalColumns({columns,features:{selectable,expandable}}){let dataColumns=columns.flatMap(toDataColumns),controlColumns=[];return expandable&&controlColumns.push((0,_expandColumn.createExpandColumn)()),selectable&&controlColumns.push((0,_checkboxColumn.createCheckboxColumn)()),[...controlColumns,...dataColumns]}

package/build/cjs/components/DataTable/internal/getColumnSticky.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"getColumnSticky",{enumerable:!0,get:function(){return getColumnSticky}});const _types=require("./types");function getColumnSticky({column,columnIndex,columns,isFirstColumnSticky,isLastColumnSticky}){if((0,_types.isControlColumn)(column))return!1;let dataColumnIndices=columns.reduce((indices,col,index)=>((0,_types.isDataColumn)(col)&&indices.push(index),indices),[]),firstDataIndex=dataColumnIndices[0],lastDataIndex=dataColumnIndices[dataColumnIndices.length-1];return isFirstColumnSticky&&columnIndex===firstDataIndex?"left":!!isLastColumnSticky&&columnIndex===lastDataIndex&&"right"}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"getColumnSticky",{enumerable:!0,get:function(){return getColumnSticky}});const _types=require("./types");function getColumnSticky({column,columnIndex,columns,isFirstColumnSticky,isLastColumnSticky}){if((0,_types.isControlColumn)(column)||column.group)return!1;let dataColumnIndices=columns.reduce((indices,col,index)=>((0,_types.isDataColumn)(col)&&indices.push(index),indices),[]),firstDataIndex=dataColumnIndices[0],lastDataIndex=dataColumnIndices[dataColumnIndices.length-1];return isFirstColumnSticky&&columnIndex===firstDataIndex?"left":!!isLastColumnSticky&&columnIndex===lastDataIndex&&"right"}

package/build/cjs/components/DataTable/internal/types.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import type { DataTableProps } from "../DataTable";
-import type { DataTableColumn, DataTableRow, DataTableRowProps } from "../types";
+import type { DataTableColumnDefinition, DataTableColumnGroup, DataTableRow, DataTableRowProps } from "../types";
 export type ControlColumnKind = "checkbox" | "expand";
 export type HeaderRenderContext = Pick<DataTableProps, "onSort" | "currentlySortedByColumn" | "allRowsSelected" | "selectedRowIds" | "selectAllRowsCheckboxAriaLabel" | "onAllRowsSelectionChange">;
 export type RowCellRenderContext = {
@@ -14,8 +14,13 @@ export type RowCellRenderContext = {
     onRowExpansionChange: (expandedRowIds: DataTableRow["id"][]) => void;
     emptyCellContent: string;
 };
-export type DataColumn = DataTableColumn & {
+export type DataColumn = DataTableColumnDefinition & {
     kind: "data";
+    /**
+     * Set when the column came from a `DataTableColumnGroup`. The header collapses
+     * neighbours that share this reference into one spanning cell.
+     */
+    group?: DataTableColumnGroup;
 };
 export type ControlColumn = {
     kind: ControlColumnKind;

package/build/cjs/components/DataTable/isDataTableColumnGroup.d.ts

@@ -0,0 +1,2 @@
+import type { DataTableColumnGroup, DataTableColumnOrGroup } from "./types";
+export declare function isDataTableColumnGroup(column: DataTableColumnOrGroup): column is DataTableColumnGroup;

package/build/cjs/components/DataTable/isDataTableColumnGroup.js

@@ -0,0 +1 @@
+"use strict";function isDataTableColumnGroup(column){return"group"===column.kind}Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"isDataTableColumnGroup",{enumerable:!0,get:function(){return isDataTableColumnGroup}});

package/build/cjs/components/DataTable/types.d.ts

@@ -7,6 +7,16 @@ export type DataTableRow = {
     id: string;
     [key: string]: any;
 };
+/** A toggletip needs both fields or neither. A column and a group share the pair. */
+type WithToggletip = {
+    toggletipContent: ReactElement;
+    /** Accessible name for the toggletip trigger button. Required when `toggletipContent` is set. */
+    toggletipAriaLabel: string;
+};
+type WithoutToggletip = {
+    toggletipContent?: never;
+    toggletipAriaLabel?: never;
+};
 type DataTableColumnBase = {
     name: string;
     label: string;
@@ -16,16 +26,50 @@ type DataTableColumnBase = {
     sortDirection?: "asc" | "desc";
     renderCell?: (row: DataTableRow) => React.ReactElement;
 };
-type DataTableColumnWithToggletip = DataTableColumnBase & {
-    toggletipContent: ReactElement;
-    /** Accessible name for the toggletip trigger button. Required when `toggletipContent` is set. */
-    toggletipAriaLabel: string;
+/**
+ * A column before a discriminant marks it public or internal. The public
+ * `DataTableColumn` adds `kind?: "column"`; the internal `DataColumn` adds
+ * `kind: "data"`. Each adds its own, so neither has to strip the other's.
+ */
+export type DataTableColumnDefinition = (DataTableColumnBase & WithToggletip) | (DataTableColumnBase & WithoutToggletip);
+export type DataTableColumn = DataTableColumnDefinition & {
+    /** Leave it out on a column. Only a group sets it, to `"group"`. */
+    kind?: "column";
+    /** Not on a column — `children` makes a group, and a group is one level deep. */
+    children?: never;
 };
-type DataTableColumnWithoutToggletip = DataTableColumnBase & {
-    toggletipContent?: never;
-    toggletipAriaLabel?: never;
+type DataTableColumnGroupBase = {
+    /**
+     * Marks the entry as a group. Required: it also makes TypeScript match the
+     * literal against the group alone, so a rejected field is reported where you
+     * wrote it instead of blaming `children`.
+     */
+    kind: "group";
+    name: string;
+    label: string;
+    /** Defaults to `"center"`. It aligns the group label only, not the children. */
+    align?: TextAlignment | MQ<TextAlignment>;
+    /** The columns under the shared label. One level only — a column cannot itself be a group. */
+    children: DataTableColumn[];
+    /** Not on a group — a group spans its children and has no width of its own. */
+    width?: never;
+    /** Not on a group — a group label has no sort control. Sort a child instead. */
+    isSortable?: never;
+    /** Not on a group — sorting belongs to a child column. */
+    sortDirection?: never;
+    /** Not on a group — a group renders a label, not a cell of data. */
+    renderCell?: never;
 };
-export type DataTableColumn = DataTableColumnWithToggletip | DataTableColumnWithoutToggletip;
+/**
+ * A shared label above its `children`, rendered in the first header row.
+ *
+ * A group labels columns and owns no data, so it rejects `width`,
+ * `isSortable`, `sortDirection` and `renderCell`. Passing one is a type error
+ * rather than a silent no-op. They stay readable on `DataTableColumnOrGroup`,
+ * so reading a column field off the union still needs no narrowing step.
+ */
+export type DataTableColumnGroup = (DataTableColumnGroupBase & WithToggletip) | (DataTableColumnGroupBase & WithoutToggletip);
+export type DataTableColumnOrGroup = DataTableColumn | DataTableColumnGroup;
 export type DataTableRowProps = {
     verticalAlign?: Property.VerticalAlign;
     isActive?: boolean;

package/build/cjs/components/DataTable/useDataTableSort.d.ts

@@ -1,15 +1,15 @@
 import type { Dispatch, SetStateAction } from "react";
-import type { DataTableColumn, DataTableRow } from "./types";
+import type { DataTableColumn, DataTableColumnOrGroup, DataTableRow } from "./types";
 import type { DataTableProps } from "./DataTable";
 type SortCompareFn = (a: DataTableRow, b: DataTableRow, columnName: DataTableColumn["name"], desiredSortDirection: DataTableColumn["sortDirection"]) => number;
 export declare const defaultSortCompareFn: (a: DataTableRow, b: DataTableRow, columnName: DataTableColumn["name"], desiredSortDirection: DataTableColumn["sortDirection"]) => number;
-export declare function useDataTableSort(initialColumns: DataTableColumn[], initialRows: DataTableRow[], initialSortedByColumn?: DataTableColumn["name"], sortCompareFn?: SortCompareFn): {
-    columns: DataTableColumn[];
+export declare function useDataTableSort(initialColumns: DataTableColumnOrGroup[], initialRows: DataTableRow[], initialSortedByColumn?: DataTableColumn["name"], sortCompareFn?: SortCompareFn): {
+    columns: DataTableColumnOrGroup[];
     rows: DataTableRow[];
     currentlySortedByColumn: DataTableColumn["name"];
     handleSort: DataTableProps["onSort"];
     resetColumns: VoidFunction;
-    setColumns: Dispatch<SetStateAction<DataTableColumn[]>>;
+    setColumns: Dispatch<SetStateAction<DataTableColumnOrGroup[]>>;
     setRows: Dispatch<SetStateAction<DataTableRow[]>>;
     setCurrentlySortedByColumn: Dispatch<SetStateAction<DataTableColumn["name"]>>;
 };

package/build/cjs/components/DataTable/useDataTableSort.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get defaultSortCompareFn(){return defaultSortCompareFn},get useDataTableSort(){return useDataTableSort}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=require("react"),defaultSortCompareFn=(a,b,columnName,desiredSortDirection)=>a[columnName]<b[columnName]?"asc"===desiredSortDirection?-1:1:a[columnName]>b[columnName]?"asc"===desiredSortDirection?1:-1:0;function useDataTableSort(initialColumns,initialRows,initialSortedByColumn,sortCompareFn=defaultSortCompareFn){let[columns,setColumns]=(0,_react.useState)(initialColumns),[currentlySortedByColumn,setCurrentlySortedByColumn]=(0,_react.useState)(initialSortedByColumn),[rows,setRows]=(0,_react.useState)(initialRows);return{columns,rows,currentlySortedByColumn,handleSort:(columnName,desiredSortDirection)=>{let newColumns=[...columns],newRows=[...rows],column=newColumns.find(item=>item.name===columnName);column&&(column.sortDirection=desiredSortDirection),newRows.sort((a,b)=>sortCompareFn(a,b,columnName,desiredSortDirection)),setRows(newRows),setColumns(newColumns),setCurrentlySortedByColumn(columnName)},setColumns,resetColumns:()=>{setColumns(initialColumns),setCurrentlySortedByColumn(initialSortedByColumn)},setRows,setCurrentlySortedByColumn}}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get defaultSortCompareFn(){return defaultSortCompareFn},get useDataTableSort(){return useDataTableSort}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=require("react"),_isDataTableColumnGroup=require("./isDataTableColumnGroup"),defaultSortCompareFn=(a,b,columnName,desiredSortDirection)=>a[columnName]<b[columnName]?"asc"===desiredSortDirection?-1:1:a[columnName]>b[columnName]?"asc"===desiredSortDirection?1:-1:0,withUpdatedSortDirection=({columns,columnName,desiredSortDirection})=>{let updateColumn=column=>column.name===columnName?{...column,sortDirection:desiredSortDirection}:column;return columns.map(column=>(0,_isDataTableColumnGroup.isDataTableColumnGroup)(column)?{...column,children:column.children.map(updateColumn)}:updateColumn(column))};function useDataTableSort(initialColumns,initialRows,initialSortedByColumn,sortCompareFn=defaultSortCompareFn){let[columns,setColumns]=(0,_react.useState)(initialColumns),[currentlySortedByColumn,setCurrentlySortedByColumn]=(0,_react.useState)(initialSortedByColumn),[rows,setRows]=(0,_react.useState)(initialRows);return{columns,rows,currentlySortedByColumn,handleSort:(columnName,desiredSortDirection)=>{let newColumns=withUpdatedSortDirection({columns,columnName,desiredSortDirection}),newRows=[...rows];newRows.sort((a,b)=>sortCompareFn(a,b,columnName,desiredSortDirection)),setRows(newRows),setColumns(newColumns),setCurrentlySortedByColumn(columnName)},setColumns,resetColumns:()=>{setColumns(initialColumns),setCurrentlySortedByColumn(initialSortedByColumn)},setRows,setCurrentlySortedByColumn}}