@amboss/design-system 4.5.1 → 4.6.0

package/build/esm/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/esm/components/DataTable/TableColumnGroups.js

@@ -0,0 +1 @@
+import React from"react";import styled from"@emotion/styled";import{useResponsiveValue}from"../../shared/mediaQueries";let StyledCol=styled("col",{target:"e12f45xj0",label:"StyledCol"})(({columnWidth})=>({...useResponsiveValue({width:columnWidth})}));export default function({segments}){return React.createElement(React.Fragment,null,segments.map(segment=>React.createElement("colgroup",{key:segment.columns[0].column.name},segment.columns.map(({column})=>React.createElement(StyledCol,{key:column.name,columnWidth:column.width})))))}

package/build/esm/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/esm/components/DataTable/header/DataTableHeaderLabel.js

@@ -0,0 +1 @@
+import React from"react";import{Inline}from"../../Inline/Inline";import{StyledLabel}from"./SortableCellContent";import{DataTableHeaderToggletip}from"./DataTableHeaderToggletip";export const toToggletipSlotProps=source=>source.toggletipContent?{toggletip:{content:source.toggletipContent,"aria-label":source.toggletipAriaLabel}}:void 0;export function DataTableHeaderLabel({label,align,slotProps}){return React.createElement(Inline,{space:"xs",noWrap:!0,vAlignItems:"center",alignItems:align},React.createElement(StyledLabel,{as:"span",size:"s",alignColumn:align,color:"tertiary",normalizeHeight:!0},label),slotProps?.toggletip&&React.createElement(DataTableHeaderToggletip,{content:slotProps.toggletip.content,"aria-label":slotProps.toggletip["aria-label"]}))}

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

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import TableCell from"../TableCell";import{getColumnSticky}from"../internal/getColumnSticky";import{isControlColumn}from"../internal/types";import{SortableCellContent,StyledLabel}from"./SortableCellContent";import{Inline}from"../../Inline/Inline";import{DataTableHeaderToggletip}from"./DataTableHeaderToggletip";let SORT_DIRECTION_TEXT={asc:"ascending",desc:"descending"},StyledThead=styled("thead",{target:"eqohg680",label:"StyledThead"})(({maxHeight})=>({...maxHeight&&{position:"sticky",top:0,zIndex:2}})),StyledTh=styled(TableCell,{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}));export default React.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=getColumnSticky({column,columnIndex,columns,isFirstColumnSticky,isLastColumnSticky});if(isControlColumn(column))return React.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.createElement(SortableCellContent,{onSort:onSort,name:name,label:label,sortDirection:sortDirection,align:align,currentlySortedByColumn:currentlySortedByColumn,toggletipContent:toggletipContent,toggletipAriaLabel:toggletipAriaLabel}):React.createElement(Inline,{space:"xs",noWrap:!0,vAlignItems:"center",alignItems:align},React.createElement(StyledLabel,{as:"span",size:"s",alignColumn:align,color:"tertiary",normalizeHeight:!0},label),toggletipContent&&React.createElement(DataTableHeaderToggletip,{content:toggletipContent,"aria-label":toggletipAriaLabel}));let ariaSortAttr=currentlySortedByColumn===name&&{"aria-sort":SORT_DIRECTION_TEXT[sortDirection]};return React.createElement(StyledTh,{as:"th",alignColumn:align,columnWidth:width,key:name,sticky:sticky,isTableScrolledToLeft:isTableScrolledToLeft,isTableScrolledToRight:isTableScrolledToRight,scope:"col",...ariaSortAttr},headerElm)});return React.createElement(StyledThead,{className:className,maxHeight:maxHeight},React.createElement("tr",null,columnElements))});
+import React from"react";import styled from"@emotion/styled";import TableCell from"../TableCell";import{getColumnSticky}from"../internal/getColumnSticky";import{isControlColumn}from"../internal/types";import{buildColumnSegments}from"../internal/buildColumnSegments";import{SortableCellContent}from"./SortableCellContent";import{DataTableHeaderLabel,toToggletipSlotProps}from"./DataTableHeaderLabel";let SORT_DIRECTION_TEXT={asc:"ascending",desc:"descending"},StyledThead=styled("thead",{target:"elv391v0",label:"StyledThead"})(({maxHeight})=>({...maxHeight&&{position:"sticky",top:0,zIndex:2}})),StyledTh=styled(TableCell,{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}`}}));export default React.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=getColumnSticky({column,columnIndex,columns,isFirstColumnSticky,isLastColumnSticky});if(isControlColumn(column))return React.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.createElement(SortableCellContent,{onSort:onSort,name:name,label:label,sortDirection:sortDirection,align:align,currentlySortedByColumn:currentlySortedByColumn,toggletipContent:toggletipContent,toggletipAriaLabel:toggletipAriaLabel}):React.createElement(DataTableHeaderLabel,{label:label,align:align,slotProps:toToggletipSlotProps(column)});let ariaSortAttr=currentlySortedByColumn===name&&{"aria-sort":SORT_DIRECTION_TEXT[sortDirection]};return React.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.createElement(StyledTh,{as:"th",alignColumn:align,key:name,colSpan:groupColumns.length,sticky:!1,isTableScrolledToLeft:isTableScrolledToLeft,isTableScrolledToRight:isTableScrolledToRight,hasDivider:!isLastColumn,scope:"colgroup"},React.createElement(DataTableHeaderLabel,{label:label,align:align,slotProps:toToggletipSlotProps(group)}))},segments=buildColumnSegments(columns),hasColumnGroups=segments.some(({group})=>group),ungroupedRowSpan=hasColumnGroups?2:void 0;return React.createElement(StyledThead,{className:className,maxHeight:maxHeight},React.createElement("tr",null,segments.map(segment=>segment.group?renderGroupCell(segment.group,segment.columns):renderColumnCell(segment.columns[0],ungroupedRowSpan))),hasColumnGroups&&React.createElement("tr",null,segments.flatMap(segment=>segment.group?segment.columns.map(indexed=>renderColumnCell(indexed)):[])))});

package/build/esm/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/esm/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/esm/components/DataTable/internal/buildColumnSegments.js

@@ -0,0 +1 @@
+import{isDataColumn}from"./types";export function buildColumnSegments(columns){let segments=[];return columns.forEach((column,columnIndex)=>{let group=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/esm/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/esm/components/DataTable/internal/buildInternalColumns.js

@@ -1 +1 @@
-import{createCheckboxColumn}from"./controlColumns/checkboxColumn";import{createExpandColumn}from"./controlColumns/expandColumn";export function buildInternalColumns({columns,features:{selectable,expandable}}){let dataColumns=columns.map(column=>({...column,kind:"data"})),controlColumns=[];return expandable&&controlColumns.push(createExpandColumn()),selectable&&controlColumns.push(createCheckboxColumn()),[...controlColumns,...dataColumns]}
+import{isDataTableColumnGroup}from"../isDataTableColumnGroup";import{createCheckboxColumn}from"./controlColumns/checkboxColumn";import{createExpandColumn}from"./controlColumns/expandColumn";let toDataColumns=column=>isDataTableColumnGroup(column)?column.children.map(child=>({...child,kind:"data",group:column})):[{...column,kind:"data"}];export function buildInternalColumns({columns,features:{selectable,expandable}}){let dataColumns=columns.flatMap(toDataColumns),controlColumns=[];return expandable&&controlColumns.push(createExpandColumn()),selectable&&controlColumns.push(createCheckboxColumn()),[...controlColumns,...dataColumns]}

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

@@ -1 +1 @@
-import{isControlColumn,isDataColumn}from"./types";export function getColumnSticky({column,columnIndex,columns,isFirstColumnSticky,isLastColumnSticky}){if(isControlColumn(column))return!1;let dataColumnIndices=columns.reduce((indices,col,index)=>(isDataColumn(col)&&indices.push(index),indices),[]),firstDataIndex=dataColumnIndices[0],lastDataIndex=dataColumnIndices[dataColumnIndices.length-1];return isFirstColumnSticky&&columnIndex===firstDataIndex?"left":!!isLastColumnSticky&&columnIndex===lastDataIndex&&"right"}
+import{isControlColumn,isDataColumn}from"./types";export function getColumnSticky({column,columnIndex,columns,isFirstColumnSticky,isLastColumnSticky}){if(isControlColumn(column)||column.group)return!1;let dataColumnIndices=columns.reduce((indices,col,index)=>(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/esm/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/esm/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/esm/components/DataTable/isDataTableColumnGroup.js

@@ -0,0 +1 @@
+export function isDataTableColumnGroup(column){return"group"===column.kind}

package/build/esm/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/esm/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/esm/components/DataTable/useDataTableSort.js

@@ -1 +1 @@
-import{useState}from"react";export const defaultSortCompareFn=(a,b,columnName,desiredSortDirection)=>a[columnName]<b[columnName]?"asc"===desiredSortDirection?-1:1:a[columnName]>b[columnName]?"asc"===desiredSortDirection?1:-1:0;export function useDataTableSort(initialColumns,initialRows,initialSortedByColumn,sortCompareFn=defaultSortCompareFn){let[columns,setColumns]=useState(initialColumns),[currentlySortedByColumn,setCurrentlySortedByColumn]=useState(initialSortedByColumn),[rows,setRows]=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}}
+import{useState}from"react";import{isDataTableColumnGroup}from"./isDataTableColumnGroup";export const defaultSortCompareFn=(a,b,columnName,desiredSortDirection)=>a[columnName]<b[columnName]?"asc"===desiredSortDirection?-1:1:a[columnName]>b[columnName]?"asc"===desiredSortDirection?1:-1:0;let withUpdatedSortDirection=({columns,columnName,desiredSortDirection})=>{let updateColumn=column=>column.name===columnName?{...column,sortDirection:desiredSortDirection}:column;return columns.map(column=>isDataTableColumnGroup(column)?{...column,children:column.children.map(updateColumn)}:updateColumn(column))};export function useDataTableSort(initialColumns,initialRows,initialSortedByColumn,sortCompareFn=defaultSortCompareFn){let[columns,setColumns]=useState(initialColumns),[currentlySortedByColumn,setCurrentlySortedByColumn]=useState(initialSortedByColumn),[rows,setRows]=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}}

package/build/esm/components/FilterToolbar/FilterToolbar.d.ts

@@ -0,0 +1,103 @@
+import type { ReactElement } from "react";
+import React from "react";
+import type { ConditionalAccessibleName } from "../../types/a11y";
+import type { SegmentedControlProps } from "../Form/SegmentedControl/SegmentedControl";
+import type { SearchInputProps } from "../Form/SearchInput/SearchInput";
+import type { IconName } from "../Icon/Icon";
+import type { PopupRole } from "../Sheet/Sheet";
+export type FilterToolbarFilter = {
+    /** Visible label and accessible name of the trigger button. */
+    label: string;
+    /** Count shown in the trigger's badge. Pass `null` to hide the badge. */
+    count: number | null;
+    /** Icon shown on the trigger button, e.g. `"filter"`, `"columns3"`. */
+    leftIcon?: IconName;
+    /** Whether this filter's popup (e.g. a `FilterDialog` or `Popover`) is open. Wired into the trigger's `aria-expanded`. */
+    isOpen: boolean;
+    /**
+     * Id of the popup this trigger controls, wired into `aria-controls` while
+     * `isOpen`. Leave it out for `FilterDialog`/`Popover`, since neither
+     * exposes an `id`.
+     */
+    popupId?: string;
+    /**
+     * Popup type opened by the trigger. Wired into `aria-haspopup`. Leave it out
+     * when the trigger opens no popup, so the button claims none.
+     */
+    role?: Extract<PopupRole, "dialog" | "menu" | "listbox">;
+    /**
+     * Ref to this trigger's button. A `Popover` needs it as its own
+     * `externalTriggerRef`, to anchor to the trigger and to manage its click and
+     * focus-return behavior. It also writes `aria-expanded`, `aria-haspopup`, and
+     * `aria-controls` on the button itself, so keep `isOpen` in sync with the
+     * popover and leave `role` and `popupId` out. `FilterDialog` needs no ref: it
+     * opens as a modal or sheet, not anchored to the trigger.
+     */
+    triggerRef?: React.RefObject<HTMLButtonElement>;
+    /**
+     * Called when the trigger is clicked, for a popup the consumer opens itself,
+     * e.g. a `FilterDialog`. Leave it out with `triggerRef`: a `Popover` adds its
+     * own click listener to that button, so a second handler here toggles the
+     * open state twice on one click.
+     */
+    onClick?: () => void;
+};
+/** The visible content of a filter toolbar, without its accessible name or test id. */
+export type FilterToolbarContentProps = {
+    /**
+     * Visible item count shown at the start of the row, e.g. `"50 items"`. It is
+     * a live region, so a count change is announced without a move of focus.
+     * Use it when no other row shows the count.
+     */
+    totalItems?: string;
+    /**
+     * A segmented control rendered at the start of the row, e.g. a year toggle.
+     * `label` is required because `FormFieldGroup` always renders a `<legend>`,
+     * even when the label is visually hidden. `size` is set by the toolbar, so
+     * the row keeps one height.
+     */
+    segmentedControlProps?: Omit<SegmentedControlProps, "size"> & {
+        label: string;
+    };
+    /**
+     * Filter and column trigger buttons, e.g. "Filter 4", "Columns 9". Each one
+     * renders as a `CountButton` whose `aria-expanded`, `aria-haspopup`, and
+     * `aria-controls` come from the entry's state. The toolbar does not render or
+     * manage the popup (`FilterDialog`, `Popover`) itself.
+     *
+     * Always wrap in `useMemo` to avoid unnecessary re-renders.
+     */
+    filters?: FilterToolbarFilter[];
+    /**
+     * Search field rendered at the end of the row. Always wrap in `useMemo` to
+     * avoid unnecessary re-renders. `slotProps.clearButton.ariaLabel` is
+     * required so the icon-only clear button has an accessible name.
+     */
+    searchInputProps?: Omit<SearchInputProps, "slotProps"> & {
+        slotProps: {
+            clearButton: {
+                ariaLabel: string;
+            };
+        };
+    };
+};
+export type FilterToolbarProps = FilterToolbarContentProps & {
+    "data-e2e-test-id"?: string;
+} & ConditionalAccessibleName;
+/**
+ * A row of filter controls: an optional item count, an optional segmented
+ * control, any number of count-badged filter triggers, and an optional search
+ * field pinned to the end. Use it above a table, a list, a grid, or any other
+ * filterable collection. It renders the triggers only — the popups behind
+ * them (`FilterDialog`, `Popover`) stay with the consumer; see `filters`.
+ *
+ * The root is `role="group"`, not `role="toolbar"`: the APG toolbar pattern
+ * assumes one arrow-key widget, placed last, but this row has two (the native
+ * radio group inside `SegmentedControl`, and the search textbox), and a
+ * roving tabindex would break both (WCAG SC 2.1.1). `role="group"` gives the
+ * same programmatic grouping with no custom keyboard code, so every control
+ * keeps its native behavior.
+ */
+declare function FilterToolbarUI({ totalItems, segmentedControlProps, filters, searchInputProps, "data-e2e-test-id": dataE2eTestId, ...ariaAttributes }: FilterToolbarProps): ReactElement;
+export declare const FilterToolbar: React.MemoExoticComponent<typeof FilterToolbarUI>;
+export {};

package/build/esm/components/FilterToolbar/FilterToolbar.js

@@ -0,0 +1 @@
+import React from"react";import styled from"@emotion/styled";import breakpoints from"../../web-tokens/_breakpoints.json";import{Inline}from"../Inline/Inline";import{ToolbarItemCount}from"../Internal/ToolbarItemCount/ToolbarItemCount";import{SegmentedControl}from"../Form/SegmentedControl/SegmentedControl";import{SearchInput}from"../Form/SearchInput/SearchInput";import{CountButton}from"../CountButton/CountButton";let containerMediumSize=breakpoints.m.value,toolbarContainerName="filterToolbar",containerBelowMedium=`@container ${toolbarContainerName} (min-width: 0px) and (max-width:${containerMediumSize}px)`,StyledFilterToolbar=styled("div",{target:"e1pn7li40",label:"StyledFilterToolbar"})(({theme})=>({containerType:"inline-size",containerName:toolbarContainerName,backgroundColor:theme.values.color.background.primary.default,borderTopLeftRadius:"inherit",borderTopRightRadius:"inherit"})),StyledFilterRow=styled("div",{target:"e1pn7li41",label:"StyledFilterRow"})(({theme})=>({padding:theme.variables.size.spacing.xs,display:"flex",flexWrap:"wrap",alignItems:"center",gap:theme.variables.size.spacing.s,[containerBelowMedium]:{flexDirection:"column",alignItems:"stretch"}})),CustomInline=styled(Inline,{target:"e1pn7li42",label:"CustomInline"})({[containerBelowMedium]:{order:2}}),StyledSearchSlot=styled("div",{target:"e1pn7li43",label:"StyledSearchSlot"})({display:"flex",flexGrow:1,justifyContent:"flex-end",[containerBelowMedium]:{order:1,flexGrow:0,display:"block"}}),CustomToolbarItemCount=styled(ToolbarItemCount,{target:"e1pn7li44",label:"CustomToolbarItemCount"})(({theme})=>({paddingInline:theme.variables.size.spacing.xxs}));export const FilterToolbar=React.memo(function({totalItems,segmentedControlProps,filters,searchInputProps,"data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let hasLeadingContent=!!totalItems||!!segmentedControlProps||!!filters?.length;return React.createElement(StyledFilterToolbar,{role:"group","data-ds-id":"FilterToolbar","data-e2e-test-id":dataE2eTestId,...ariaAttributes},React.createElement(StyledFilterRow,null,hasLeadingContent&&React.createElement(CustomInline,{vAlignItems:"center",space:"xs"},totalItems&&React.createElement(CustomToolbarItemCount,null,totalItems),segmentedControlProps&&React.createElement(SegmentedControl,{...segmentedControlProps,size:"s"}),filters?.map(({label,count,leftIcon,isOpen,popupId,role,onClick,triggerRef})=>React.createElement(CountButton,{key:`filter-${label}`,ref:triggerRef,size:"s",leftIcon:leftIcon,count:count,onClick:onClick,"aria-haspopup":role,"aria-expanded":isOpen,"aria-controls":isOpen?popupId:void 0},label))),searchInputProps&&React.createElement(StyledSearchSlot,null,React.createElement(SearchInput,searchInputProps))))});

package/build/esm/components/Internal/Panel/Panel.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { LayoutStorage, PanelImperativeHandle } from "react-resizable-panels";
+import type { LayoutStorage, PanelImperativeHandle, PanelProps as ResizablePanelProps } from "react-resizable-panels";
 /** A size: plain number = pixels; unitless string = percentage ("10%"). */
 type Size = number | string;
 export type PanelItem = {
@@ -19,6 +19,16 @@ export type PanelItem = {
      *  neighbour. Separators beside it stay usable as long as a resizable panel
      *  remains on each of their sides - the drag just passes this panel by. */
     resizable?: boolean;
+    /** Hold this panel's width when the window (or the containing group) is
+     *  resized, rather than its share of the group - so the change lands on the
+     *  panels without it. Orthogonal to `resizable`, which governs drags only,
+     *  and to the unit of `defaultSize`: a panel sized in `%` starts at that
+     *  share and then holds the width it resolved to.
+     *
+     *  Ignored on a panel with no `defaultSize` (nothing was asked for, so there
+     *  is no width worth holding) and on every panel of a row where no panel is
+     *  left to absorb the change. */
+    lockWidthOnWindowResize?: boolean;
 };
 export type PanelProps = {
     /** Visible panels, left-to-right. Conditionally rendering items toggles a
@@ -45,6 +55,17 @@ export type PanelProps = {
      *  it lifts (~300ms). */
     shouldSuppressLayoutCallback?: () => boolean;
 };
+type GroupResizeBehavior = ResizablePanelProps["groupResizeBehavior"];
+/**
+ * A panel's `groupResizeBehavior` - what a resize of the GROUP
+ * (window/container) holds constant; a separator drag is unaffected either way.
+ * `"preserve-relative-size"`, the library's default, keeps a panel's share of
+ * the group, so its pixel width scales with the window. A panel that locks its
+ * width takes `"preserve-pixel-size"` and the rest absorb the change, which
+ * takes at least one panel without the lock - so a row of nothing else stays
+ * relative throughout rather than leaving the change nowhere to go.
+ */
+export declare const groupResizeBehaviorFor: (item: PanelItem, panels: PanelItem[]) => GroupResizeBehavior;
 /**
  * Internal resizable panel row — the only wrapper around react-resizable-panels.
  * Renders one Panel per item with that item's `child` in a full-bleed host,

package/build/esm/components/Internal/Panel/Panel.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{Group,Panel as ResizablePanel,Separator,useDefaultLayout}from"react-resizable-panels";let CustomGroup=styled(Group,{target:"e1vzb9ge0",label:"CustomGroup"})({height:"100%",width:"100%"}),StyledPanelChild=styled("div",{target:"e1vzb9ge1",label:"StyledPanelChild"})({position:"relative",height:"100%",width:"100%"}),NOOP_STORAGE={getItem:()=>null,setItem:()=>{}},isResizable=item=>!1!==item.resizable,canSeparatorResize=({panels,index})=>panels.slice(0,index).some(isResizable)&&panels.slice(index).some(isResizable);export function Panel({panels,persistenceKey,storage,onResize,onCollapse,panelHandleFor,panelElementFor,shouldSuppressLayoutCallback}){let{defaultLayout,onLayoutChanged:persistSizes}=useDefaultLayout({id:persistenceKey??"ds-layout",panelIds:panels.map(p=>p.id),storage:persistenceKey&&storage?storage:NOOP_STORAGE});return React.createElement(CustomGroup,{orientation:"horizontal",defaultLayout:defaultLayout,onLayoutChanged:layout=>{shouldSuppressLayoutCallback?.()||(persistSizes(layout),panels.forEach(({id,collapsible})=>{let pct=layout[id];if("number"==typeof pct){if(collapsible&&pct<.5)return void onCollapse(id);pct>=.5&&onResize(id,`${pct}%`)}}))}},panels.map((item,index)=>{let isSeparatorDisabled=!canSeparatorResize({panels,index});return React.createElement(React.Fragment,{key:item.id},index>0&&React.createElement(Separator,{disabled:isSeparatorDisabled}),React.createElement(ResizablePanel,{id:item.id,defaultSize:item.defaultSize,collapsible:item.collapsible,disabled:!1===item.resizable,minSize:item.minSize,maxSize:item.maxSize,panelRef:panelHandleFor?.(item.id),elementRef:panelElementFor?.(item.id)},React.createElement(StyledPanelChild,null,item.child)))}))}
+import React from"react";import styled from"@emotion/styled";import{Group,Panel as ResizablePanel,Separator,useDefaultLayout}from"react-resizable-panels";let CustomGroup=styled(Group,{target:"e1q4b9dw0",label:"CustomGroup"})({height:"100%",width:"100%"}),StyledPanelChild=styled("div",{target:"e1q4b9dw1",label:"StyledPanelChild"})({position:"relative",height:"100%",width:"100%"}),NOOP_STORAGE={getItem:()=>null,setItem:()=>{}},isResizable=item=>!1!==item.resizable,locksWidth=item=>!0===item.lockWidthOnWindowResize&&void 0!==item.defaultSize;export const groupResizeBehaviorFor=(item,panels)=>locksWidth(item)&&panels.some(panel=>!locksWidth(panel))?"preserve-pixel-size":"preserve-relative-size";let canSeparatorResize=({panels,index})=>panels.slice(0,index).some(isResizable)&&panels.slice(index).some(isResizable);export function Panel({panels,persistenceKey,storage,onResize,onCollapse,panelHandleFor,panelElementFor,shouldSuppressLayoutCallback}){let{defaultLayout,onLayoutChanged:persistSizes}=useDefaultLayout({id:persistenceKey??"ds-layout",panelIds:panels.map(p=>p.id),storage:persistenceKey&&storage?storage:NOOP_STORAGE});return React.createElement(CustomGroup,{orientation:"horizontal",defaultLayout:defaultLayout,onLayoutChanged:layout=>{shouldSuppressLayoutCallback?.()||(persistSizes(layout),panels.forEach(({id,collapsible})=>{let pct=layout[id];if("number"==typeof pct){if(collapsible&&pct<.5)return void onCollapse(id);pct>=.5&&onResize(id,`${pct}%`)}}))}},panels.map((item,index)=>{let isSeparatorDisabled=!canSeparatorResize({panels,index});return React.createElement(React.Fragment,{key:item.id},index>0&&React.createElement(Separator,{disabled:isSeparatorDisabled}),React.createElement(ResizablePanel,{id:item.id,defaultSize:item.defaultSize,collapsible:item.collapsible,disabled:!1===item.resizable,groupResizeBehavior:groupResizeBehaviorFor(item,panels),minSize:item.minSize,maxSize:item.maxSize,panelRef:panelHandleFor?.(item.id),elementRef:panelElementFor?.(item.id)},React.createElement(StyledPanelChild,null,item.child)))}))}

package/build/esm/components/Internal/ToolbarItemCount/ToolbarItemCount.d.ts

@@ -0,0 +1,16 @@
+import type { ReactElement, ReactNode } from "react";
+type ToolbarItemCountProps = {
+    /** The count itself, e.g. `"50 items"`. */
+    children: ReactNode;
+    /** Published on the text, so a toolbar's `aria-labelledby`/`aria-describedby` can point at it. */
+    id?: string;
+    "data-e2e-test-id"?: string;
+};
+/**
+ * The live region shown by `BulkActionsToolbar` and `FilterToolbar`, so a
+ * count change announces without moving focus. `DataTableToolbar` moves it
+ * between the two rows as `isSelectable` changes, so one definition covers
+ * both instead of two copies drifting apart.
+ */
+export declare function ToolbarItemCount({ children, id, "data-e2e-test-id": dataE2eTestId, ...rest }: ToolbarItemCountProps): ReactElement;
+export {};

package/build/esm/components/Internal/ToolbarItemCount/ToolbarItemCount.js

@@ -0,0 +1 @@
+import React from"react";import{Text}from"../../Typography/Text/Text";export function ToolbarItemCount({children,id,"data-e2e-test-id":dataE2eTestId,...rest}){return React.createElement("div",{...rest,role:"status","aria-atomic":"true","data-e2e-test-id":dataE2eTestId},React.createElement(Text,{size:"s",color:"secondary",weight:"bold",id:id},children))}

package/build/esm/components/Kbd/Kbd.d.ts

@@ -0,0 +1,118 @@
+import React from "react";
+/** Every name both key maps must define, so neither can drift from the other. */
+export type KeyName = "cmd" | "meta" | "ctrl" | "alt" | "shift" | "enter" | "esc" | "backspace" | "tab" | "up" | "down" | "left" | "right" | "updown";
+export declare const MAC_OS_KEYS: {
+    cmd: {
+        label: string;
+        spokenLabel: string;
+    };
+    meta: {
+        label: string;
+        spokenLabel: string;
+    };
+    ctrl: {
+        label: string;
+        spokenLabel: string;
+    };
+    alt: {
+        label: string;
+        spokenLabel: string;
+    };
+    shift: {
+        label: string;
+        spokenLabel: string;
+    };
+    enter: {
+        label: string;
+        spokenLabel: string;
+    };
+    esc: {
+        label: string;
+    };
+    backspace: {
+        label: string;
+        spokenLabel: string;
+    };
+    tab: {
+        label: string;
+        spokenLabel: string;
+    };
+    up: {
+        label: string;
+        spokenLabel: string;
+    };
+    down: {
+        label: string;
+        spokenLabel: string;
+    };
+    left: {
+        label: string;
+        spokenLabel: string;
+    };
+    right: {
+        label: string;
+        spokenLabel: string;
+    };
+    updown: {
+        label: string;
+        spokenLabel: string;
+    };
+};
+export declare const WINDOWS_KEYS: {
+    cmd: {
+        label: string;
+    };
+    meta: {
+        label: string;
+    };
+    ctrl: {
+        label: string;
+    };
+    alt: {
+        label: string;
+    };
+    shift: {
+        label: string;
+    };
+    enter: {
+        label: string;
+    };
+    esc: {
+        label: string;
+    };
+    backspace: {
+        label: string;
+    };
+    tab: {
+        label: string;
+    };
+    up: {
+        label: string;
+        spokenLabel: string;
+    };
+    down: {
+        label: string;
+        spokenLabel: string;
+    };
+    left: {
+        label: string;
+        spokenLabel: string;
+    };
+    right: {
+        label: string;
+        spokenLabel: string;
+    };
+    updown: {
+        label: string;
+        spokenLabel: string;
+    };
+};
+export type KbdPlatform = "macOs" | "windows";
+export type KbdProps = {
+    /** Semantic key name(s) to display, e.g. `"A"` or `["shift", "cmd"]`. Recognised names (`cmd`, `ctrl`, `alt`, `shift`, `enter`, `esc`, `backspace`, `tab`, `up`, `down`, `left`, `right`, `updown`) render the symbol for the detected platform; any other value is rendered as written, with a single character uppercased. */
+    keys: string | string[];
+    /** Pins the rendered symbols to one platform instead of detecting the user's. Use for tests, stories, and shortcuts that only exist on one platform. */
+    platform?: KbdPlatform;
+    "data-e2e-test-id"?: string;
+};
+export declare function Kbd({ keys, platform, "data-e2e-test-id": dataE2eTestId, }: KbdProps): React.ReactElement;

package/build/esm/components/Kbd/Kbd.js

@@ -0,0 +1 @@
+import React from"react";import styled from"@emotion/styled";import{useIsMacOs}from"../../shared/useIsMacOs";import{ScreenReaderText}from"../Utilities/ScreenReaderText/ScreenReaderText";export const MAC_OS_KEYS={cmd:{label:"⌘",spokenLabel:"Command"},meta:{label:"⌘",spokenLabel:"Command"},ctrl:{label:"⌃",spokenLabel:"Control"},alt:{label:"⌥",spokenLabel:"Option"},shift:{label:"⇧",spokenLabel:"Shift"},enter:{label:"↩",spokenLabel:"Enter"},esc:{label:"Esc"},backspace:{label:"⌫",spokenLabel:"Backspace"},tab:{label:"⇥",spokenLabel:"Tab"},up:{label:"↑",spokenLabel:"Up arrow"},down:{label:"↓",spokenLabel:"Down arrow"},left:{label:"←",spokenLabel:"Left arrow"},right:{label:"→",spokenLabel:"Right arrow"},updown:{label:"⇅",spokenLabel:"Up and down arrows"}};export const WINDOWS_KEYS={cmd:{label:"Ctrl"},meta:{label:"Ctrl"},ctrl:{label:"Ctrl"},alt:{label:"Alt"},shift:{label:"Shift"},enter:{label:"Enter"},esc:{label:"Esc"},backspace:{label:"Backspace"},tab:{label:"Tab"},up:{label:"↑",spokenLabel:"Up arrow"},down:{label:"↓",spokenLabel:"Down arrow"},left:{label:"←",spokenLabel:"Left arrow"},right:{label:"→",spokenLabel:"Right arrow"},updown:{label:"⇅",spokenLabel:"Up and down arrows"}};let StyledKbd=styled("kbd",{target:"e1v9oi190",label:"StyledKbd"})(({theme})=>({display:"inline-flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box",minWidth:theme.variables.size.dimension.kbd.minWidth,padding:theme.variables.size.spacing.xxxs,border:`1px solid ${theme.values.color.kbd.border.default}`,borderRadius:theme.variables.size.borderRadius.xs,backgroundColor:theme.values.color.kbd.background.default,color:theme.values.color.kbd.foreground.default,fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.xxs,fontWeight:theme.variables.weight.normal,lineHeight:1,whiteSpace:"nowrap",cursor:"default",userSelect:"none"})),StyledKbdKeys=styled("span",{target:"e1v9oi191",label:"StyledKbdKeys"})(({theme,hasSeparators})=>({display:"inline-flex",gap:hasSeparators?theme.variables.size.spacing.xxs:theme.variables.size.spacing.zero})),toDisplayLabel=key=>1===key.length?key.toUpperCase():key,toKeyDisplay=(key,isMacOs)=>{let trimmedKey=key.trim();return(isMacOs?MAC_OS_KEYS:WINDOWS_KEYS)[trimmedKey.toLowerCase()]??{label:toDisplayLabel(trimmedKey)}};export function Kbd({keys,platform,"data-e2e-test-id":dataE2eTestId}){let detectedIsMacOs=useIsMacOs(),isMacOs=platform?"macOs"===platform:detectedIsMacOs,keyDisplays=(Array.isArray(keys)?keys:[keys]).map(key=>toKeyDisplay(key,isMacOs)),spokenKeys=keyDisplays.map(({label,spokenLabel})=>spokenLabel??label).join(" ");return React.createElement(StyledKbd,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Kbd"},React.createElement(StyledKbdKeys,{"aria-hidden":"true",hasSeparators:!isMacOs&&keyDisplays.length>1},keyDisplays.map(({label},index)=>React.createElement(React.Fragment,{key:`${label}-${index}`},index>0&&!isMacOs&&React.createElement("span",null,"+"),React.createElement("span",null,label)))),React.createElement(ScreenReaderText,{as:"span"},spokenKeys))}

package/build/esm/components/KbdGroup/KbdGroup.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export type KbdGroupProps = {
+    /** The `Kbd` elements making up the sequence, in the order they are pressed. */
+    children: React.ReactNode;
+    "data-e2e-test-id"?: string;
+};
+export declare function KbdGroup({ children, "data-e2e-test-id": dataE2eTestId, }: KbdGroupProps): React.ReactElement;

package/build/esm/components/KbdGroup/KbdGroup.js

@@ -0,0 +1 @@
+import React from"react";import styled from"@emotion/styled";let StyledKbdGroup=styled("span",{target:"e1mlf86z0",label:"StyledKbdGroup"})(({theme})=>({display:"inline-flex",alignItems:"flex-start",gap:theme.variables.size.spacing.xxs}));export function KbdGroup({children,"data-e2e-test-id":dataE2eTestId}){return React.createElement(StyledKbdGroup,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"KbdGroup"},children)}

package/build/esm/components/Layout/-types.d.ts

@@ -289,7 +289,12 @@ export type SidePanelProps = ForwardedScrollProps & {
     /** Accessible name; when set, the panel renders as a `region` landmark. */
     "aria-label"?: string;
     collapsible?: boolean;
-    /** Number = pixels, unitless string = percent (e.g. `"30%"`). */
+    /** Number = pixels, unitless string = percent (e.g. `"30%"`).
+     *
+     *  Either unit sets the column's starting width only: a docked side panel
+     *  then keeps that width when the window resizes, and `Layout.Content` grows
+     *  and shrinks around it. Drag-resizing is a separate story - see
+     *  `resizable`. */
     defaultSize?: Size;
     minSize?: Size;
     maxSize?: Size;