@rio-cloud/rio-uikit 2.5.0-beta.1 → 2.5.0

package/components/table/TableHeaderColumn.d.ts

@@ -69,6 +69,10 @@ export type TableHeaderColumnProps<RowType extends TableRowData> = Omit<TableCol
     /**
      * Enables resizing for this header column in `TABLE` view.
      *
+     * Resize handles can look like vertical separators in the table header. Use `resizeable` when a design
+     * shows header-only vertical handles between columns, especially when body rows do not show vertical
+     * grid lines.
+     *
      * When `onColumnResize` is provided, resized widths are controlled from the outside.
      * When it is omitted, the table keeps resized widths internally.
      *

package/components/table/TableHeaderColumn.js

@@ -1,76 +1,73 @@
-import { jsx as c } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import { useId as j, useRef as E } from "react";
-import V from "../../utils/classNames.js";
-import { isProd as q } from "../../utils/init/initConfig.js";
-import B from "./render/header/TableDraggableHeaderCell.js";
-import F from "./render/header/TableStaticHeaderCell.js";
-import { useOptionalTableInteractionContext as G } from "./context/TableInteractionContext.js";
-import { useOptionalTableLayoutContext as J } from "./context/TableLayoutContext.js";
-import { useOptionalTableRenderConfigContext as Q } from "./context/TableRenderConfigContext.js";
-import { useOptionalTableSection as U, useTableHeaderRowContext as X } from "./context/TableStructureContext.js";
-import { useOptionalTableRenderContext as Y } from "./context/TableRenderContext.js";
-const ie = (d) => {
+import M from "../../utils/classNames.js";
+import "../../utils/init/initConfig.js";
+import V from "./render/header/TableDraggableHeaderCell.js";
+import q from "./render/header/TableStaticHeaderCell.js";
+import { useOptionalTableInteractionContext as B } from "./context/TableInteractionContext.js";
+import { useOptionalTableLayoutContext as F } from "./context/TableLayoutContext.js";
+import { useOptionalTableRenderConfigContext as G } from "./context/TableRenderConfigContext.js";
+import { useOptionalTableSection as J, useTableHeaderRowContext as Q } from "./context/TableStructureContext.js";
+import { useOptionalTableRenderContext as U } from "./context/TableRenderContext.js";
+const ae = (m) => {
   const {
-    children: C,
-    className: h,
-    colSpan: a = 1,
-    columnKey: r,
+    children: u,
+    className: c,
+    colSpan: C = 1,
+    columnKey: d,
     draggable: b,
-    filter: f,
+    filter: h,
     headerClassName: p,
-    hideLabel: g,
-    hideOnMobile: R,
-    horizontalAlign: y,
-    icon: S,
-    label: x,
-    maxResizeWidth: w,
+    hideLabel: f,
+    hideOnMobile: g,
+    horizontalAlign: R,
+    icon: y,
+    label: S,
+    maxResizeWidth: x,
     mobileLabel: z,
-    minResizeWidth: K,
+    minResizeWidth: w,
     resizeable: T,
-    rowSpan: H = 1,
+    rowSpan: K = 1,
     sortable: O,
     verticalAlign: k,
     width: L,
-    ...W
-  } = d, t = Y(), s = Q(), n = G(), o = J(), v = U(), D = X(), i = j(), u = E(!1);
-  if (!t || !s || !n || !o || v !== "header")
+    ...D
+  } = m, t = U(), r = G(), n = B(), o = F(), H = J(), N = Q(), a = j();
+  if (E(!1), !t || !r || !n || !o || H !== "header")
     return null;
-  !q && a === 1 && !r && !u.current && (console.warn(
-    "TableHeaderColumn: Header cells for a single data column with colSpan=1 should provide a columnKey. Without it, the table cannot derive a stable data-column layout."
-  ), u.current = !0);
-  const N = D?.row ?? 1;
+  const A = N?.row ?? 1;
   if (t.renderDraft.headerColumns.push({
-    id: i,
-    columnKey: r,
-    label: x ?? C ?? "",
-    icon: S,
-    filter: f,
-    hideLabel: g,
+    id: a,
+    columnKey: d,
+    label: S ?? u ?? "",
+    icon: y,
+    filter: h,
+    hideLabel: f,
     width: L,
     mobileLabel: z,
-    horizontalAlign: y,
+    horizontalAlign: R,
     verticalAlign: k,
-    headerClassName: V(h, p),
-    hideOnMobile: R,
+    headerClassName: M(c, p),
+    hideOnMobile: g,
     sortable: O,
     draggable: b,
     resizeable: T,
-    minResizeWidth: K,
-    maxResizeWidth: w,
-    row: N,
-    colSpan: a,
-    rowSpan: H
-  }), !s.isTableView)
+    minResizeWidth: w,
+    maxResizeWidth: x,
+    row: A,
+    colSpan: C,
+    rowSpan: K
+  }), !r.isTableView)
     return null;
-  const l = t.header, e = l?.columns.find((M) => String(M.key) === i);
+  const l = t.header, e = l?.columns.find((P) => String(P.key) === a);
   if (!l || !e)
     return null;
-  const A = !!e.columnKey && e.colSpan === 1 && e.columnKey !== o.lastResizableColumnKey && e.resizeable === !0 && !!o.onColumnResizeStart, I = !!e.columnKey && e.colSpan === 1 && (o.draggableColumnKeys?.length ?? 0) > 1 && e.draggable === !0 && !!o.onColumnDragEnd, P = !!e.columnKey && o.resettableColumnKeys?.has(e.columnKey), m = {
+  const I = !!e.columnKey && e.colSpan === 1 && e.columnKey !== o.lastResizableColumnKey && e.resizeable === !0 && !!o.onColumnResizeStart, W = !!e.columnKey && e.colSpan === 1 && (o.draggableColumnKeys?.length ?? 0) > 1 && e.draggable === !0 && !!o.onColumnDragEnd, v = !!e.columnKey && o.resettableColumnKeys?.has(e.columnKey), s = {
     column: e,
     header: l,
-    htmlAttributes: W,
-    hasResettableWidth: P,
-    isResizable: A,
+    htmlAttributes: D,
+    hasResettableWidth: v,
+    isResizable: I,
     onColumnResizeReset: o.onColumnResizeReset,
     onColumnResizeStart: o.onColumnResizeStart,
     onSortChange: n.onSortChange,
@@ -78,9 +75,9 @@ const ie = (d) => {
     stickyLeftColumnCount: o.stickyLeftColumnCount,
     stickyRightColumnCount: o.stickyRightColumnCount
   };
-  return I ? /* @__PURE__ */ c(B, { ...m }) : /* @__PURE__ */ c(F, { ...m });
+  return W ? /* @__PURE__ */ i(V, { ...s }) : /* @__PURE__ */ i(q, { ...s });
 };
 export {
-  ie as default
+  ae as default
 };
 //# sourceMappingURL=TableHeaderColumn.js.map

package/components/table/TableHeaderColumn.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderColumn.js","sources":["../../../src/components/table/TableHeaderColumn.tsx"],"sourcesContent":["import { useId, useRef, type PropsWithChildren, type ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport { isProd } from '../../utils/init/initConfig';\nimport type { TableColumnDefinition, TableHtmlAttributes, TableRowData, TableVerticalAlign } from './Table.types';\nimport DraggableTableHeaderCell from './render/header/TableDraggableHeaderCell';\nimport StaticTableHeaderCell from './render/header/TableStaticHeaderCell';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useOptionalTableLayoutContext } from './context/TableLayoutContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\nimport { useOptionalTableSection, useTableHeaderRowContext } from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableHeaderColumnProps<RowType extends TableRowData> = Omit<\n    TableColumnDefinition<RowType>,\n    'className' | 'draggable' | 'filter' | 'headerClassName' | 'icon' | 'key' | 'label' | 'resizeable'\n> &\n    PropsWithChildren<\n        {\n            /**\n             * Column key for a header that represents a single data column.\n             *\n             * These are the lowest header cells in the table structure and should\n             * therefore use `colSpan={1}`.\n             *\n             * For these headers, `columnKey` is effectively required because the table\n             * derives its body/footer column layout, resize/drag behavior, sorting, and\n             * sticky-column logic from these keys.\n             *\n             * Group header cells that only structure other header cells may omit `columnKey`\n             * when they span multiple columns via `colSpan > 1`.\n             */\n            columnKey?: string;\n\n            /**\n             * Optional explicit header label.\n             * If omitted, `children` are used.\n             */\n            label?: ReactNode;\n\n            /**\n             * Optional rioglyph class rendered before the header label in table view.\n             */\n            icon?: string;\n\n            /**\n             * Optional custom filter control rendered next to the header label.\n             *\n             * Intended for table-specific filter dropdowns such as `TableColumnFilter`.\n             */\n            filter?: ReactNode;\n\n            /**\n             * Hides the visible label in table view while preserving `label` for\n             * dropdowns, cards, and mobile metadata.\n             *\n             * @default false\n             */\n            hideLabel?: boolean;\n\n            /**\n             * Number of columns this header cell spans.\n             *\n             * @default 1\n             */\n            colSpan?: number;\n\n            /**\n             * Number of header rows this cell spans.\n             *\n             * @default 1\n             */\n            rowSpan?: number;\n\n            /**\n             * Additional class names for this header cell only.\n             */\n            className?: string;\n\n            /**\n             * Additional class names for this header cell only.\n             */\n            headerClassName?: string;\n\n            /**\n             * Enables drag-reordering for this header column in `TABLE` view.\n             *\n             * When `columnOrder` and `onColumnOrderChange` are provided, reordering is controlled from the outside.\n             * When they are omitted, the table keeps the reordered state internally.\n             *\n             * @default false\n             */\n            draggable?: boolean;\n\n            /**\n             * Enables resizing for this header column in `TABLE` view.\n             *\n             * When `onColumnResize` is provided, resized widths are controlled from the outside.\n             * When it is omitted, the table keeps resized widths internally.\n             *\n             * @default false\n             */\n            resizeable?: boolean;\n\n            /**\n             * Vertical alignment for this header cell.\n             *\n             * @default 'middle'\n             */\n            verticalAlign?: TableVerticalAlign;\n        } & TableHtmlAttributes\n    >;\n\nconst TableHeaderColumn = <RowType extends TableRowData = TableRowData>(props: TableHeaderColumnProps<RowType>) => {\n    const {\n        children,\n        className,\n        colSpan = 1,\n        columnKey,\n        draggable,\n        filter,\n        headerClassName,\n        hideLabel,\n        hideOnMobile,\n        horizontalAlign,\n        icon,\n        label,\n        maxResizeWidth,\n        mobileLabel,\n        minResizeWidth,\n        resizeable,\n        rowSpan = 1,\n        sortable,\n        verticalAlign,\n        width,\n        ...remainingProps\n    } = props;\n\n    const renderContext = useOptionalTableRenderContext<RowType>();\n    const renderConfigContext = useOptionalTableRenderConfigContext<RowType>();\n    const interactionContext = useOptionalTableInteractionContext<RowType>();\n    const layoutContext = useOptionalTableLayoutContext();\n    const section = useOptionalTableSection();\n    const headerRowContext = useTableHeaderRowContext();\n    const columnId = useId();\n    const hasWarnedMissingColumnKeyRef = useRef(false);\n\n    if (!renderContext || !renderConfigContext || !interactionContext || !layoutContext || section !== 'header') {\n        return null;\n    }\n\n    if (!isProd && colSpan === 1 && !columnKey && !hasWarnedMissingColumnKeyRef.current) {\n        console.warn(\n            'TableHeaderColumn: Header cells for a single data column with colSpan=1 should provide a columnKey. ' +\n                'Without it, the table cannot derive a stable data-column layout.'\n        );\n        hasWarnedMissingColumnKeyRef.current = true;\n    }\n\n    const resolvedRow = headerRowContext?.row ?? 1;\n\n    renderContext.renderDraft.headerColumns.push({\n        id: columnId,\n        columnKey,\n        label: label ?? children ?? '',\n        icon,\n        filter,\n        hideLabel,\n        width,\n        mobileLabel,\n        horizontalAlign,\n        verticalAlign,\n        headerClassName: classNames(className, headerClassName),\n        hideOnMobile,\n        sortable,\n        draggable,\n        resizeable,\n        minResizeWidth,\n        maxResizeWidth,\n        row: resolvedRow,\n        colSpan,\n        rowSpan,\n    });\n\n    if (!renderConfigContext.isTableView) {\n        return null;\n    }\n\n    const header = renderContext.header;\n    const headerColumn = header?.columns.find(column => String(column.key) === columnId);\n\n    if (!header || !headerColumn) {\n        return null;\n    }\n\n    const isResizable =\n        !!headerColumn.columnKey &&\n        headerColumn.colSpan === 1 &&\n        headerColumn.columnKey !== layoutContext.lastResizableColumnKey &&\n        headerColumn.resizeable === true &&\n        !!layoutContext.onColumnResizeStart;\n\n    const isDraggable =\n        !!headerColumn.columnKey &&\n        headerColumn.colSpan === 1 &&\n        (layoutContext.draggableColumnKeys?.length ?? 0) > 1 &&\n        headerColumn.draggable === true &&\n        !!layoutContext.onColumnDragEnd;\n\n    const hasResettableWidth =\n        !!headerColumn.columnKey && layoutContext.resettableColumnKeys?.has(headerColumn.columnKey);\n\n    const sharedProps = {\n        column: headerColumn,\n        header,\n        htmlAttributes: remainingProps,\n        hasResettableWidth,\n        isResizable,\n        onColumnResizeReset: layoutContext.onColumnResizeReset,\n        onColumnResizeStart: layoutContext.onColumnResizeStart,\n        onSortChange: interactionContext.onSortChange,\n        showSelectionColumn: interactionContext.showSelectionColumn,\n        stickyLeftColumnCount: layoutContext.stickyLeftColumnCount,\n        stickyRightColumnCount: layoutContext.stickyRightColumnCount,\n    };\n\n    return isDraggable ? <DraggableTableHeaderCell {...sharedProps} /> : <StaticTableHeaderCell {...sharedProps} />;\n};\n\nexport default TableHeaderColumn;\n"],"names":["TableHeaderColumn","props","children","className","colSpan","columnKey","draggable","filter","headerClassName","hideLabel","hideOnMobile","horizontalAlign","icon","label","maxResizeWidth","mobileLabel","minResizeWidth","resizeable","rowSpan","sortable","verticalAlign","width","remainingProps","renderContext","useOptionalTableRenderContext","renderConfigContext","useOptionalTableRenderConfigContext","interactionContext","useOptionalTableInteractionContext","layoutContext","useOptionalTableLayoutContext","section","useOptionalTableSection","headerRowContext","useTableHeaderRowContext","columnId","useId","hasWarnedMissingColumnKeyRef","useRef","isProd","resolvedRow","classNames","header","headerColumn","column","isResizable","isDraggable","hasResettableWidth","sharedProps","DraggableTableHeaderCell","jsx","StaticTableHeaderCell"],"mappings":";;;;;;;;;;;AAiHA,MAAMA,KAAoB,CAA8CC,MAA2C;AAC/G,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHrB,GAEEsB,IAAgBC,EAAA,GAChBC,IAAsBC,EAAA,GACtBC,IAAqBC,EAAA,GACrBC,IAAgBC,EAAA,GAChBC,IAAUC,EAAA,GACVC,IAAmBC,EAAA,GACnBC,IAAWC,EAAA,GACXC,IAA+BC,EAAO,EAAK;AAEjD,MAAI,CAACf,KAAiB,CAACE,KAAuB,CAACE,KAAsB,CAACE,KAAiBE,MAAY;AAC/F,WAAO;AAGX,EAAI,CAACQ,KAAUnC,MAAY,KAAK,CAACC,KAAa,CAACgC,EAA6B,YACxE,QAAQ;AAAA,IACJ;AAAA,EAAA,GAGJA,EAA6B,UAAU;AAG3C,QAAMG,IAAcP,GAAkB,OAAO;AAyB7C,MAvBAV,EAAc,YAAY,cAAc,KAAK;AAAA,IACzC,IAAIY;AAAA,IACJ,WAAA9B;AAAA,IACA,OAAOQ,KAASX,KAAY;AAAA,IAC5B,MAAAU;AAAA,IACA,QAAAL;AAAA,IACA,WAAAE;AAAA,IACA,OAAAY;AAAA,IACA,aAAAN;AAAA,IACA,iBAAAJ;AAAA,IACA,eAAAS;AAAA,IACA,iBAAiBqB,EAAWtC,GAAWK,CAAe;AAAA,IACtD,cAAAE;AAAA,IACA,UAAAS;AAAA,IACA,WAAAb;AAAA,IACA,YAAAW;AAAA,IACA,gBAAAD;AAAA,IACA,gBAAAF;AAAA,IACA,KAAK0B;AAAA,IACL,SAAApC;AAAA,IACA,SAAAc;AAAA,EAAA,CACH,GAEG,CAACO,EAAoB;AACrB,WAAO;AAGX,QAAMiB,IAASnB,EAAc,QACvBoB,IAAeD,GAAQ,QAAQ,KAAK,OAAU,OAAOE,EAAO,GAAG,MAAMT,CAAQ;AAEnF,MAAI,CAACO,KAAU,CAACC;AACZ,WAAO;AAGX,QAAME,IACF,CAAC,CAACF,EAAa,aACfA,EAAa,YAAY,KACzBA,EAAa,cAAcd,EAAc,0BACzCc,EAAa,eAAe,MAC5B,CAAC,CAACd,EAAc,qBAEdiB,IACF,CAAC,CAACH,EAAa,aACfA,EAAa,YAAY,MACxBd,EAAc,qBAAqB,UAAU,KAAK,KACnDc,EAAa,cAAc,MAC3B,CAAC,CAACd,EAAc,iBAEdkB,IACF,CAAC,CAACJ,EAAa,aAAad,EAAc,sBAAsB,IAAIc,EAAa,SAAS,GAExFK,IAAc;AAAA,IAChB,QAAQL;AAAA,IACR,QAAAD;AAAA,IACA,gBAAgBpB;AAAA,IAChB,oBAAAyB;AAAA,IACA,aAAAF;AAAA,IACA,qBAAqBhB,EAAc;AAAA,IACnC,qBAAqBA,EAAc;AAAA,IACnC,cAAcF,EAAmB;AAAA,IACjC,qBAAqBA,EAAmB;AAAA,IACxC,uBAAuBE,EAAc;AAAA,IACrC,wBAAwBA,EAAc;AAAA,EAAA;AAG1C,SAAOiB,sBAAeG,GAAA,EAA0B,GAAGD,GAAa,IAAK,gBAAAE,EAACC,GAAA,EAAuB,GAAGH,EAAA,CAAa;AACjH;"}
+{"version":3,"file":"TableHeaderColumn.js","sources":["../../../src/components/table/TableHeaderColumn.tsx"],"sourcesContent":["import { useId, useRef, type PropsWithChildren, type ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport { isProd } from '../../utils/init/initConfig';\nimport type { TableColumnDefinition, TableHtmlAttributes, TableRowData, TableVerticalAlign } from './Table.types';\nimport DraggableTableHeaderCell from './render/header/TableDraggableHeaderCell';\nimport StaticTableHeaderCell from './render/header/TableStaticHeaderCell';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useOptionalTableLayoutContext } from './context/TableLayoutContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\nimport { useOptionalTableSection, useTableHeaderRowContext } from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableHeaderColumnProps<RowType extends TableRowData> = Omit<\n    TableColumnDefinition<RowType>,\n    'className' | 'draggable' | 'filter' | 'headerClassName' | 'icon' | 'key' | 'label' | 'resizeable'\n> &\n    PropsWithChildren<\n        {\n            /**\n             * Column key for a header that represents a single data column.\n             *\n             * These are the lowest header cells in the table structure and should\n             * therefore use `colSpan={1}`.\n             *\n             * For these headers, `columnKey` is effectively required because the table\n             * derives its body/footer column layout, resize/drag behavior, sorting, and\n             * sticky-column logic from these keys.\n             *\n             * Group header cells that only structure other header cells may omit `columnKey`\n             * when they span multiple columns via `colSpan > 1`.\n             */\n            columnKey?: string;\n\n            /**\n             * Optional explicit header label.\n             * If omitted, `children` are used.\n             */\n            label?: ReactNode;\n\n            /**\n             * Optional rioglyph class rendered before the header label in table view.\n             */\n            icon?: string;\n\n            /**\n             * Optional custom filter control rendered next to the header label.\n             *\n             * Intended for table-specific filter dropdowns such as `TableColumnFilter`.\n             */\n            filter?: ReactNode;\n\n            /**\n             * Hides the visible label in table view while preserving `label` for\n             * dropdowns, cards, and mobile metadata.\n             *\n             * @default false\n             */\n            hideLabel?: boolean;\n\n            /**\n             * Number of columns this header cell spans.\n             *\n             * @default 1\n             */\n            colSpan?: number;\n\n            /**\n             * Number of header rows this cell spans.\n             *\n             * @default 1\n             */\n            rowSpan?: number;\n\n            /**\n             * Additional class names for this header cell only.\n             */\n            className?: string;\n\n            /**\n             * Additional class names for this header cell only.\n             */\n            headerClassName?: string;\n\n            /**\n             * Enables drag-reordering for this header column in `TABLE` view.\n             *\n             * When `columnOrder` and `onColumnOrderChange` are provided, reordering is controlled from the outside.\n             * When they are omitted, the table keeps the reordered state internally.\n             *\n             * @default false\n             */\n            draggable?: boolean;\n\n            /**\n             * Enables resizing for this header column in `TABLE` view.\n             *\n             * Resize handles can look like vertical separators in the table header. Use `resizeable` when a design\n             * shows header-only vertical handles between columns, especially when body rows do not show vertical\n             * grid lines.\n             *\n             * When `onColumnResize` is provided, resized widths are controlled from the outside.\n             * When it is omitted, the table keeps resized widths internally.\n             *\n             * @default false\n             */\n            resizeable?: boolean;\n\n            /**\n             * Vertical alignment for this header cell.\n             *\n             * @default 'middle'\n             */\n            verticalAlign?: TableVerticalAlign;\n        } & TableHtmlAttributes\n    >;\n\nconst TableHeaderColumn = <RowType extends TableRowData = TableRowData>(props: TableHeaderColumnProps<RowType>) => {\n    const {\n        children,\n        className,\n        colSpan = 1,\n        columnKey,\n        draggable,\n        filter,\n        headerClassName,\n        hideLabel,\n        hideOnMobile,\n        horizontalAlign,\n        icon,\n        label,\n        maxResizeWidth,\n        mobileLabel,\n        minResizeWidth,\n        resizeable,\n        rowSpan = 1,\n        sortable,\n        verticalAlign,\n        width,\n        ...remainingProps\n    } = props;\n\n    const renderContext = useOptionalTableRenderContext<RowType>();\n    const renderConfigContext = useOptionalTableRenderConfigContext<RowType>();\n    const interactionContext = useOptionalTableInteractionContext<RowType>();\n    const layoutContext = useOptionalTableLayoutContext();\n    const section = useOptionalTableSection();\n    const headerRowContext = useTableHeaderRowContext();\n    const columnId = useId();\n    const hasWarnedMissingColumnKeyRef = useRef(false);\n\n    if (!renderContext || !renderConfigContext || !interactionContext || !layoutContext || section !== 'header') {\n        return null;\n    }\n\n    if (!isProd && colSpan === 1 && !columnKey && !hasWarnedMissingColumnKeyRef.current) {\n        console.warn(\n            'TableHeaderColumn: Header cells for a single data column with colSpan=1 should provide a columnKey. ' +\n                'Without it, the table cannot derive a stable data-column layout.'\n        );\n        hasWarnedMissingColumnKeyRef.current = true;\n    }\n\n    const resolvedRow = headerRowContext?.row ?? 1;\n\n    renderContext.renderDraft.headerColumns.push({\n        id: columnId,\n        columnKey,\n        label: label ?? children ?? '',\n        icon,\n        filter,\n        hideLabel,\n        width,\n        mobileLabel,\n        horizontalAlign,\n        verticalAlign,\n        headerClassName: classNames(className, headerClassName),\n        hideOnMobile,\n        sortable,\n        draggable,\n        resizeable,\n        minResizeWidth,\n        maxResizeWidth,\n        row: resolvedRow,\n        colSpan,\n        rowSpan,\n    });\n\n    if (!renderConfigContext.isTableView) {\n        return null;\n    }\n\n    const header = renderContext.header;\n    const headerColumn = header?.columns.find(column => String(column.key) === columnId);\n\n    if (!header || !headerColumn) {\n        return null;\n    }\n\n    const isResizable =\n        !!headerColumn.columnKey &&\n        headerColumn.colSpan === 1 &&\n        headerColumn.columnKey !== layoutContext.lastResizableColumnKey &&\n        headerColumn.resizeable === true &&\n        !!layoutContext.onColumnResizeStart;\n\n    const isDraggable =\n        !!headerColumn.columnKey &&\n        headerColumn.colSpan === 1 &&\n        (layoutContext.draggableColumnKeys?.length ?? 0) > 1 &&\n        headerColumn.draggable === true &&\n        !!layoutContext.onColumnDragEnd;\n\n    const hasResettableWidth =\n        !!headerColumn.columnKey && layoutContext.resettableColumnKeys?.has(headerColumn.columnKey);\n\n    const sharedProps = {\n        column: headerColumn,\n        header,\n        htmlAttributes: remainingProps,\n        hasResettableWidth,\n        isResizable,\n        onColumnResizeReset: layoutContext.onColumnResizeReset,\n        onColumnResizeStart: layoutContext.onColumnResizeStart,\n        onSortChange: interactionContext.onSortChange,\n        showSelectionColumn: interactionContext.showSelectionColumn,\n        stickyLeftColumnCount: layoutContext.stickyLeftColumnCount,\n        stickyRightColumnCount: layoutContext.stickyRightColumnCount,\n    };\n\n    return isDraggable ? <DraggableTableHeaderCell {...sharedProps} /> : <StaticTableHeaderCell {...sharedProps} />;\n};\n\nexport default TableHeaderColumn;\n"],"names":["TableHeaderColumn","props","children","className","colSpan","columnKey","draggable","filter","headerClassName","hideLabel","hideOnMobile","horizontalAlign","icon","label","maxResizeWidth","mobileLabel","minResizeWidth","resizeable","rowSpan","sortable","verticalAlign","width","remainingProps","renderContext","useOptionalTableRenderContext","renderConfigContext","useOptionalTableRenderConfigContext","interactionContext","useOptionalTableInteractionContext","layoutContext","useOptionalTableLayoutContext","section","useOptionalTableSection","headerRowContext","useTableHeaderRowContext","columnId","useId","useRef","resolvedRow","classNames","header","headerColumn","column","isResizable","isDraggable","hasResettableWidth","sharedProps","DraggableTableHeaderCell","jsx","StaticTableHeaderCell"],"mappings":";;;;;;;;;;;AAqHA,MAAMA,KAAoB,CAA8CC,MAA2C;AAC/G,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHrB,GAEEsB,IAAgBC,EAAA,GAChBC,IAAsBC,EAAA,GACtBC,IAAqBC,EAAA,GACrBC,IAAgBC,EAAA,GAChBC,IAAUC,EAAA,GACVC,IAAmBC,EAAA,GACnBC,IAAWC,EAAA;AAGjB,MAFqCC,EAAO,EAAK,GAE7C,CAACd,KAAiB,CAACE,KAAuB,CAACE,KAAsB,CAACE,KAAiBE,MAAY;AAC/F,WAAO;AAWX,QAAMO,IAAcL,GAAkB,OAAO;AAyB7C,MAvBAV,EAAc,YAAY,cAAc,KAAK;AAAA,IACzC,IAAIY;AAAA,IACJ,WAAA9B;AAAA,IACA,OAAOQ,KAASX,KAAY;AAAA,IAC5B,MAAAU;AAAA,IACA,QAAAL;AAAA,IACA,WAAAE;AAAA,IACA,OAAAY;AAAA,IACA,aAAAN;AAAA,IACA,iBAAAJ;AAAA,IACA,eAAAS;AAAA,IACA,iBAAiBmB,EAAWpC,GAAWK,CAAe;AAAA,IACtD,cAAAE;AAAA,IACA,UAAAS;AAAA,IACA,WAAAb;AAAA,IACA,YAAAW;AAAA,IACA,gBAAAD;AAAA,IACA,gBAAAF;AAAA,IACA,KAAKwB;AAAA,IACL,SAAAlC;AAAA,IACA,SAAAc;AAAA,EAAA,CACH,GAEG,CAACO,EAAoB;AACrB,WAAO;AAGX,QAAMe,IAASjB,EAAc,QACvBkB,IAAeD,GAAQ,QAAQ,KAAK,OAAU,OAAOE,EAAO,GAAG,MAAMP,CAAQ;AAEnF,MAAI,CAACK,KAAU,CAACC;AACZ,WAAO;AAGX,QAAME,IACF,CAAC,CAACF,EAAa,aACfA,EAAa,YAAY,KACzBA,EAAa,cAAcZ,EAAc,0BACzCY,EAAa,eAAe,MAC5B,CAAC,CAACZ,EAAc,qBAEde,IACF,CAAC,CAACH,EAAa,aACfA,EAAa,YAAY,MACxBZ,EAAc,qBAAqB,UAAU,KAAK,KACnDY,EAAa,cAAc,MAC3B,CAAC,CAACZ,EAAc,iBAEdgB,IACF,CAAC,CAACJ,EAAa,aAAaZ,EAAc,sBAAsB,IAAIY,EAAa,SAAS,GAExFK,IAAc;AAAA,IAChB,QAAQL;AAAA,IACR,QAAAD;AAAA,IACA,gBAAgBlB;AAAA,IAChB,oBAAAuB;AAAA,IACA,aAAAF;AAAA,IACA,qBAAqBd,EAAc;AAAA,IACnC,qBAAqBA,EAAc;AAAA,IACnC,cAAcF,EAAmB;AAAA,IACjC,qBAAqBA,EAAmB;AAAA,IACxC,uBAAuBE,EAAc;AAAA,IACrC,wBAAwBA,EAAc;AAAA,EAAA;AAG1C,SAAOe,sBAAeG,GAAA,EAA0B,GAAGD,GAAa,IAAK,gBAAAE,EAACC,GAAA,EAAuB,GAAGH,EAAA,CAAa;AACjH;"}

package/components/table/TableToolbar.d.ts

@@ -5,6 +5,10 @@ export type { TableToolbarColumnHorizontalAlign, TableToolbarColumnProps, TableT
 export type TableToolbarProps = {
     /**
      * Optional class names for the wrapper element.
+     *
+     * Do not use this to override the standard spacing between a TableToolbar and the Table below it.
+     * The toolbar spacing comes from the `table-toolbar` wrapper margin plus the bottom margins of
+     * its `TableToolbarColumn` children.
      */
     className?: string;
     /**

package/components/table/TableToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableToolbar.js","sources":["../../../src/components/table/TableToolbar.tsx"],"sourcesContent":["import {\n    Children,\n    Fragment,\n    useEffect,\n    isValidElement,\n    useLayoutEffect,\n    useRef,\n    useState,\n    type PropsWithChildren,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport useResizeObserver from '../../useResizeObserver';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport classNames from '../../utils/classNames';\nimport ToggleButton from '../button/ToggleButton';\nimport Collapse from '../collapse/Collapse';\nimport Card from '../card/Card';\nimport TableSearch from './TableSearch';\nimport TableToolbarColumn, { type TableToolbarColumnProps } from './TableToolbarColumn';\n\nexport { TableToolbarColumn };\nexport type {\n    TableToolbarColumnHorizontalAlign,\n    TableToolbarColumnProps,\n    TableToolbarColumnVerticalAlign,\n} from './TableToolbarColumn';\n\n// Switch the toolbar into the compact mobile layout,\n// based on the available toolbar width instead of the overall viewport width.\nconst DEFAULT_TABLE_TOOLBAR_COLLAPSE_BREAKPOINT = 544;\n\nexport type TableToolbarProps = {\n    /**\n     * Optional class names for the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Optional class names for the card that wraps collapsed toolbar controls\n     * in the compact mobile layout.\n     */\n    collapseCardClassName?: string;\n\n    /**\n     * Optional toolbar width in pixels at which the toolbar switches into its compact\n     * mobile/collapsible layout.\n     *\n     * @default 544\n     */\n    responsiveCollapseBreakpoint?: number;\n\n    /**\n     * Disables the compact mobile/collapsible toolbar layout.\n     *\n     * Use this as an escape hatch when a consuming service needs to keep the\n     * default wrapping toolbar behavior regardless of the available toolbar width.\n     *\n     * @default false\n     */\n    disableResponsiveCollapse?: boolean;\n};\n\ntype TableToolbarColumnElement = ReactElement<PropsWithChildren<TableToolbarColumnProps>, typeof TableToolbarColumn>;\n\nconst isTableToolbarColumnElement = (child: ReactNode): child is TableToolbarColumnElement =>\n    isValidElement(child) && child.type === TableToolbarColumn;\n\nconst collectToolbarColumns = (children: ReactNode): TableToolbarColumnElement[] | null => {\n    const columns: TableToolbarColumnElement[] = [];\n\n    for (const child of Children.toArray(children)) {\n        if (isValidElement(child) && child.type === Fragment) {\n            const fragmentColumns = collectToolbarColumns(child.props.children);\n\n            if (!fragmentColumns) {\n                return null;\n            }\n\n            columns.push(...fragmentColumns);\n            continue;\n        }\n\n        if (!isTableToolbarColumnElement(child)) {\n            return null;\n        }\n\n        columns.push(child);\n    }\n\n    return columns;\n};\n\nconst hasDescendantType = (node: ReactNode, componentType: unknown): boolean =>\n    Children.toArray(node).some(child => {\n        if (!isValidElement(child)) {\n            return false;\n        }\n\n        if (child.type === componentType) {\n            return true;\n        }\n\n        return hasDescendantType(child.props.children, componentType);\n    });\n\nconst hasWrappedFlexItems = (containerElement: HTMLDivElement | null) => {\n    if (!containerElement) {\n        return false;\n    }\n\n    const itemElements = Array.from(containerElement.children) as HTMLElement[];\n\n    if (itemElements.length < 2) {\n        return false;\n    }\n\n    const firstLineBottom = (itemElements[0]?.offsetTop ?? 0) + (itemElements[0]?.offsetHeight ?? 0);\n\n    return itemElements.some(itemElement => itemElement.offsetTop + itemElement.offsetHeight !== firstLineBottom);\n};\n\nconst TableToolbar = (props: PropsWithChildren<TableToolbarProps>) => {\n    const {\n        className,\n        collapseCardClassName,\n        children,\n        responsiveCollapseBreakpoint = DEFAULT_TABLE_TOOLBAR_COLLAPSE_BREAKPOINT,\n        disableResponsiveCollapse = false,\n    } = props;\n\n    const toolbarRef = useRef<HTMLDivElement | null>(null);\n    const leftGroupRef = useRef<HTMLDivElement | null>(null);\n    const rightGroupRef = useRef<HTMLDivElement | null>(null);\n\n    const [hasWrappedRows, setHasWrappedRows] = useState(false);\n    const [isMobileCollapseOpen, setIsMobileCollapseOpen] = useState(false);\n\n    const [toolbarSizeRef, , { inlineSize: toolbarInlineSize }] = useResizeObserver<HTMLDivElement>();\n    const [toolbarContainerRef, , { inlineSize: toolbarContainerInlineSize }] = useResizeObserver<HTMLDivElement>();\n    const mergedToolbarRefs = useMergeRefs(toolbarRef, toolbarSizeRef);\n\n    const isSmallScreen =\n        !disableResponsiveCollapse &&\n        toolbarInlineSize !== undefined &&\n        toolbarInlineSize <= responsiveCollapseBreakpoint;\n\n    const toolbarColumns = collectToolbarColumns(children);\n\n    const leftColumns = (toolbarColumns ?? []).filter(column => column.props.horizontalAlign !== 'right');\n    const rightColumns = (toolbarColumns ?? []).filter(column => column.props.horizontalAlign === 'right');\n\n    const searchRightColumnIndex = rightColumns.findIndex(column =>\n        hasDescendantType(column.props.children, TableSearch)\n    );\n\n    const searchRightColumn = searchRightColumnIndex >= 0 ? rightColumns[searchRightColumnIndex] : undefined;\n\n    const mobileCollapsedRightColumns = searchRightColumn\n        ? rightColumns.filter((_, index) => index !== searchRightColumnIndex)\n        : rightColumns;\n\n    const hasMobileCollapseToggle = isSmallScreen && mobileCollapsedRightColumns.length > 0;\n\n    const mobileCollapseToggle = hasMobileCollapseToggle && (\n        <div className='table-toolbar-mobile-toggle'>\n            <ToggleButton\n                active={isMobileCollapseOpen}\n                aria-label={isMobileCollapseOpen ? 'Hide toolbar filters' : 'Show toolbar filters'}\n                bsStyle='default'\n                iconName={'rioglyph-option-horizontal'}\n                iconOnly\n                onClick={setIsMobileCollapseOpen}\n            />\n        </div>\n    );\n\n    useLayoutEffect(() => {\n        if (isSmallScreen) {\n            setHasWrappedRows(false);\n            return;\n        }\n\n        const toolbarElement = toolbarRef.current;\n\n        toolbarElement?.classList.add('table-toolbar-measuring');\n\n        const nextHasWrappedRows =\n            hasWrappedFlexItems(toolbarContainerRef.current) ||\n            hasWrappedFlexItems(leftGroupRef.current) ||\n            hasWrappedFlexItems(rightGroupRef.current);\n\n        toolbarElement?.classList.remove('table-toolbar-measuring');\n\n        setHasWrappedRows(nextHasWrappedRows);\n    }, [children, isSmallScreen, leftColumns.length, rightColumns.length, toolbarContainerInlineSize]);\n\n    useEffect(() => {\n        if (!isSmallScreen || !hasMobileCollapseToggle) {\n            setIsMobileCollapseOpen(false);\n        }\n    }, [hasMobileCollapseToggle, isSmallScreen]);\n\n    if (!toolbarColumns?.length) {\n        return <div className={classNames('table-toolbar', className)}>{children}</div>;\n    }\n\n    if (isSmallScreen) {\n        return (\n            <div className={classNames('table-toolbar', 'table-toolbar-mobile', className)} ref={mergedToolbarRefs}>\n                <div className='table-toolbar-container table-toolbar-container-mobile' ref={toolbarContainerRef}>\n                    {searchRightColumn ? (\n                        <>\n                            {leftColumns.length > 0 && (\n                                <div className='table-toolbar-mobile-primary'>\n                                    <div className='table-toolbar-group-left table-toolbar-group-left-mobile'>\n                                        {leftColumns}\n                                    </div>\n                                </div>\n                            )}\n                            <div className='table-toolbar-mobile-search-row'>\n                                <div className='table-toolbar-mobile-search'>{searchRightColumn}</div>\n                                {mobileCollapseToggle}\n                            </div>\n                        </>\n                    ) : (\n                        <div className='table-toolbar-mobile-primary'>\n                            {leftColumns.length > 0 && (\n                                <div className='table-toolbar-group-left table-toolbar-group-left-mobile'>\n                                    {leftColumns}\n                                </div>\n                            )}\n                            {mobileCollapseToggle}\n                        </div>\n                    )}\n\n                    {hasMobileCollapseToggle && (\n                        <Collapse open={isMobileCollapseOpen} timeout={220}>\n                            <Card className={classNames('table-toolbar-mobile-collapse-card', collapseCardClassName)}>\n                                <div className='table-toolbar-mobile-collapse'>{mobileCollapsedRightColumns}</div>\n                            </Card>\n                        </Collapse>\n                    )}\n                </div>\n            </div>\n        );\n    }\n\n    return (\n        <div\n            className={classNames('table-toolbar', hasWrappedRows && 'table-toolbar-has-wrap', className)}\n            ref={mergedToolbarRefs}\n        >\n            <div className='table-toolbar-container' ref={toolbarContainerRef}>\n                {leftColumns.length > 0 && (\n                    <div className='table-toolbar-group-left' ref={leftGroupRef}>\n                        {leftColumns}\n                    </div>\n                )}\n                {rightColumns.length > 0 && (\n                    <div className='table-toolbar-group-right' ref={rightGroupRef}>\n                        {rightColumns}\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default TableToolbar;\n"],"names":["DEFAULT_TABLE_TOOLBAR_COLLAPSE_BREAKPOINT","isTableToolbarColumnElement","child","isValidElement","TableToolbarColumn","collectToolbarColumns","children","columns","Children","Fragment","fragmentColumns","hasDescendantType","node","componentType","hasWrappedFlexItems","containerElement","itemElements","firstLineBottom","itemElement","TableToolbar","props","className","collapseCardClassName","responsiveCollapseBreakpoint","disableResponsiveCollapse","toolbarRef","useRef","leftGroupRef","rightGroupRef","hasWrappedRows","setHasWrappedRows","useState","isMobileCollapseOpen","setIsMobileCollapseOpen","toolbarSizeRef","toolbarInlineSize","useResizeObserver","toolbarContainerRef","toolbarContainerInlineSize","mergedToolbarRefs","useMergeRefs","isSmallScreen","toolbarColumns","leftColumns","column","rightColumns","searchRightColumnIndex","TableSearch","searchRightColumn","mobileCollapsedRightColumns","_","index","hasMobileCollapseToggle","mobileCollapseToggle","jsx","ToggleButton","useLayoutEffect","toolbarElement","nextHasWrappedRows","useEffect","classNames","jsxs","Collapse","Card"],"mappings":";;;;;;;;;;AA+BA,MAAMA,IAA4C,KAmC5CC,IAA8B,CAACC,MACjCC,EAAeD,CAAK,KAAKA,EAAM,SAASE,GAEtCC,IAAwB,CAACC,MAA4D;AACvF,QAAMC,IAAuC,CAAA;AAE7C,aAAWL,KAASM,EAAS,QAAQF,CAAQ,GAAG;AAC5C,QAAIH,EAAeD,CAAK,KAAKA,EAAM,SAASO,GAAU;AAClD,YAAMC,IAAkBL,EAAsBH,EAAM,MAAM,QAAQ;AAElE,UAAI,CAACQ;AACD,eAAO;AAGX,MAAAH,EAAQ,KAAK,GAAGG,CAAe;AAC/B;AAAA,IACJ;AAEA,QAAI,CAACT,EAA4BC,CAAK;AAClC,aAAO;AAGX,IAAAK,EAAQ,KAAKL,CAAK;AAAA,EACtB;AAEA,SAAOK;AACX,GAEMI,IAAoB,CAACC,GAAiBC,MACxCL,EAAS,QAAQI,CAAI,EAAE,KAAK,CAAAV,MACnBC,EAAeD,CAAK,IAIrBA,EAAM,SAASW,IACR,KAGJF,EAAkBT,EAAM,MAAM,UAAUW,CAAa,IAPjD,EAQd,GAECC,IAAsB,CAACC,MAA4C;AACrE,MAAI,CAACA;AACD,WAAO;AAGX,QAAMC,IAAe,MAAM,KAAKD,EAAiB,QAAQ;AAEzD,MAAIC,EAAa,SAAS;AACtB,WAAO;AAGX,QAAMC,KAAmBD,EAAa,CAAC,GAAG,aAAa,MAAMA,EAAa,CAAC,GAAG,gBAAgB;AAE9F,SAAOA,EAAa,KAAK,CAAAE,MAAeA,EAAY,YAAYA,EAAY,iBAAiBD,CAAe;AAChH,GAEME,KAAe,CAACC,MAAgD;AAClE,QAAM;AAAA,IACF,WAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,UAAAhB;AAAA,IACA,8BAAAiB,IAA+BvB;AAAA,IAC/B,2BAAAwB,IAA4B;AAAA,EAAA,IAC5BJ,GAEEK,IAAaC,EAA8B,IAAI,GAC/CC,IAAeD,EAA8B,IAAI,GACjDE,IAAgBF,EAA8B,IAAI,GAElD,CAACG,GAAgBC,CAAiB,IAAIC,EAAS,EAAK,GACpD,CAACC,GAAsBC,CAAuB,IAAIF,EAAS,EAAK,GAEhE,CAACG,KAAkB,EAAE,YAAYC,EAAA,CAAmB,IAAIC,EAAA,GACxD,CAACC,KAAuB,EAAE,YAAYC,EAAA,CAA4B,IAAIF,EAAA,GACtEG,IAAoBC,EAAaf,GAAYS,CAAc,GAE3DO,IACF,CAACjB,KACDW,MAAsB,UACtBA,KAAqBZ,GAEnBmB,IAAiBrC,EAAsBC,CAAQ,GAE/CqC,KAAeD,KAAkB,CAAA,GAAI,OAAO,CAAAE,MAAUA,EAAO,MAAM,oBAAoB,OAAO,GAC9FC,KAAgBH,KAAkB,CAAA,GAAI,OAAO,CAAAE,MAAUA,EAAO,MAAM,oBAAoB,OAAO,GAE/FE,IAAyBD,EAAa;AAAA,IAAU,CAAAD,MAClDjC,EAAkBiC,EAAO,MAAM,UAAUG,CAAW;AAAA,EAAA,GAGlDC,IAAoBF,KAA0B,IAAID,EAAaC,CAAsB,IAAI,QAEzFG,IAA8BD,IAC9BH,EAAa,OAAO,CAACK,GAAGC,MAAUA,MAAUL,CAAsB,IAClED,GAEAO,IAA0BX,KAAiBQ,EAA4B,SAAS,GAEhFI,IAAuBD,KACzB,gBAAAE,EAAC,OAAA,EAAI,WAAU,+BACX,UAAA,gBAAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,QAAQvB;AAAA,MACR,cAAYA,IAAuB,yBAAyB;AAAA,MAC5D,SAAQ;AAAA,MACR,UAAU;AAAA,MACV,UAAQ;AAAA,MACR,SAASC;AAAA,IAAA;AAAA,EAAA,GAEjB;AA6BJ,SA1BAuB,EAAgB,MAAM;AAClB,QAAIf,GAAe;AACf,MAAAX,EAAkB,EAAK;AACvB;AAAA,IACJ;AAEA,UAAM2B,IAAiBhC,EAAW;AAElC,IAAAgC,GAAgB,UAAU,IAAI,yBAAyB;AAEvD,UAAMC,IACF5C,EAAoBuB,EAAoB,OAAO,KAC/CvB,EAAoBa,EAAa,OAAO,KACxCb,EAAoBc,EAAc,OAAO;AAE7C,IAAA6B,GAAgB,UAAU,OAAO,yBAAyB,GAE1D3B,EAAkB4B,CAAkB;AAAA,EACxC,GAAG,CAACpD,GAAUmC,GAAeE,EAAY,QAAQE,EAAa,QAAQP,CAA0B,CAAC,GAEjGqB,EAAU,MAAM;AACZ,KAAI,CAAClB,KAAiB,CAACW,MACnBnB,EAAwB,EAAK;AAAA,EAErC,GAAG,CAACmB,GAAyBX,CAAa,CAAC,GAEtCC,GAAgB,SAIjBD,IAEI,gBAAAa,EAAC,OAAA,EAAI,WAAWM,EAAW,iBAAiB,wBAAwBvC,CAAS,GAAG,KAAKkB,GACjF,UAAA,gBAAAsB,EAAC,OAAA,EAAI,WAAU,0DAAyD,KAAKxB,GACxE,UAAA;AAAA,IAAAW,IACG,gBAAAa,EAAApD,GAAA,EACK,UAAA;AAAA,MAAAkC,EAAY,SAAS,KAClB,gBAAAW,EAAC,OAAA,EAAI,WAAU,gCACX,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,4DACV,UAAAX,EAAA,CACL,GACJ;AAAA,MAEJ,gBAAAkB,EAAC,OAAA,EAAI,WAAU,mCACX,UAAA;AAAA,QAAA,gBAAAP,EAAC,OAAA,EAAI,WAAU,+BAA+B,UAAAN,GAAkB;AAAA,QAC/DK;AAAA,MAAA,EAAA,CACL;AAAA,IAAA,EAAA,CACJ,IAEA,gBAAAQ,EAAC,OAAA,EAAI,WAAU,gCACV,UAAA;AAAA,MAAAlB,EAAY,SAAS,KAClB,gBAAAW,EAAC,OAAA,EAAI,WAAU,4DACV,UAAAX,GACL;AAAA,MAEHU;AAAA,IAAA,GACL;AAAA,IAGHD,uBACIU,GAAA,EAAS,MAAM9B,GAAsB,SAAS,KAC3C,4BAAC+B,GAAA,EAAK,WAAWH,EAAW,sCAAsCtC,CAAqB,GACnF,UAAA,gBAAAgC,EAAC,OAAA,EAAI,WAAU,iCAAiC,UAAAL,EAAA,CAA4B,GAChF,EAAA,CACJ;AAAA,EAAA,EAAA,CAER,EAAA,CACJ,IAKJ,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWM,EAAW,iBAAiB/B,KAAkB,0BAA0BR,CAAS;AAAA,MAC5F,KAAKkB;AAAA,MAEL,UAAA,gBAAAsB,EAAC,OAAA,EAAI,WAAU,2BAA0B,KAAKxB,GACzC,UAAA;AAAA,QAAAM,EAAY,SAAS,KAClB,gBAAAW,EAAC,OAAA,EAAI,WAAU,4BAA2B,KAAK3B,GAC1C,UAAAgB,EAAA,CACL;AAAA,QAEHE,EAAa,SAAS,KACnB,gBAAAS,EAAC,SAAI,WAAU,6BAA4B,KAAK1B,GAC3C,UAAAiB,EAAA,CACL;AAAA,MAAA,EAAA,CAER;AAAA,IAAA;AAAA,EAAA,sBA5DI,OAAA,EAAI,WAAWe,EAAW,iBAAiBvC,CAAS,GAAI,UAAAf,GAAS;AA+DjF;"}
+{"version":3,"file":"TableToolbar.js","sources":["../../../src/components/table/TableToolbar.tsx"],"sourcesContent":["import {\n    Children,\n    Fragment,\n    useEffect,\n    isValidElement,\n    useLayoutEffect,\n    useRef,\n    useState,\n    type PropsWithChildren,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport useResizeObserver from '../../useResizeObserver';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport classNames from '../../utils/classNames';\nimport ToggleButton from '../button/ToggleButton';\nimport Collapse from '../collapse/Collapse';\nimport Card from '../card/Card';\nimport TableSearch from './TableSearch';\nimport TableToolbarColumn, { type TableToolbarColumnProps } from './TableToolbarColumn';\n\nexport { TableToolbarColumn };\nexport type {\n    TableToolbarColumnHorizontalAlign,\n    TableToolbarColumnProps,\n    TableToolbarColumnVerticalAlign,\n} from './TableToolbarColumn';\n\n// Switch the toolbar into the compact mobile layout,\n// based on the available toolbar width instead of the overall viewport width.\nconst DEFAULT_TABLE_TOOLBAR_COLLAPSE_BREAKPOINT = 544;\n\nexport type TableToolbarProps = {\n    /**\n     * Optional class names for the wrapper element.\n     *\n     * Do not use this to override the standard spacing between a TableToolbar and the Table below it.\n     * The toolbar spacing comes from the `table-toolbar` wrapper margin plus the bottom margins of\n     * its `TableToolbarColumn` children.\n     */\n    className?: string;\n\n    /**\n     * Optional class names for the card that wraps collapsed toolbar controls\n     * in the compact mobile layout.\n     */\n    collapseCardClassName?: string;\n\n    /**\n     * Optional toolbar width in pixels at which the toolbar switches into its compact\n     * mobile/collapsible layout.\n     *\n     * @default 544\n     */\n    responsiveCollapseBreakpoint?: number;\n\n    /**\n     * Disables the compact mobile/collapsible toolbar layout.\n     *\n     * Use this as an escape hatch when a consuming service needs to keep the\n     * default wrapping toolbar behavior regardless of the available toolbar width.\n     *\n     * @default false\n     */\n    disableResponsiveCollapse?: boolean;\n};\n\ntype TableToolbarColumnElement = ReactElement<PropsWithChildren<TableToolbarColumnProps>, typeof TableToolbarColumn>;\n\nconst isTableToolbarColumnElement = (child: ReactNode): child is TableToolbarColumnElement =>\n    isValidElement(child) && child.type === TableToolbarColumn;\n\nconst collectToolbarColumns = (children: ReactNode): TableToolbarColumnElement[] | null => {\n    const columns: TableToolbarColumnElement[] = [];\n\n    for (const child of Children.toArray(children)) {\n        if (isValidElement(child) && child.type === Fragment) {\n            const fragmentColumns = collectToolbarColumns(child.props.children);\n\n            if (!fragmentColumns) {\n                return null;\n            }\n\n            columns.push(...fragmentColumns);\n            continue;\n        }\n\n        if (!isTableToolbarColumnElement(child)) {\n            return null;\n        }\n\n        columns.push(child);\n    }\n\n    return columns;\n};\n\nconst hasDescendantType = (node: ReactNode, componentType: unknown): boolean =>\n    Children.toArray(node).some(child => {\n        if (!isValidElement(child)) {\n            return false;\n        }\n\n        if (child.type === componentType) {\n            return true;\n        }\n\n        return hasDescendantType(child.props.children, componentType);\n    });\n\nconst hasWrappedFlexItems = (containerElement: HTMLDivElement | null) => {\n    if (!containerElement) {\n        return false;\n    }\n\n    const itemElements = Array.from(containerElement.children) as HTMLElement[];\n\n    if (itemElements.length < 2) {\n        return false;\n    }\n\n    const firstLineBottom = (itemElements[0]?.offsetTop ?? 0) + (itemElements[0]?.offsetHeight ?? 0);\n\n    return itemElements.some(itemElement => itemElement.offsetTop + itemElement.offsetHeight !== firstLineBottom);\n};\n\nconst TableToolbar = (props: PropsWithChildren<TableToolbarProps>) => {\n    const {\n        className,\n        collapseCardClassName,\n        children,\n        responsiveCollapseBreakpoint = DEFAULT_TABLE_TOOLBAR_COLLAPSE_BREAKPOINT,\n        disableResponsiveCollapse = false,\n    } = props;\n\n    const toolbarRef = useRef<HTMLDivElement | null>(null);\n    const leftGroupRef = useRef<HTMLDivElement | null>(null);\n    const rightGroupRef = useRef<HTMLDivElement | null>(null);\n\n    const [hasWrappedRows, setHasWrappedRows] = useState(false);\n    const [isMobileCollapseOpen, setIsMobileCollapseOpen] = useState(false);\n\n    const [toolbarSizeRef, , { inlineSize: toolbarInlineSize }] = useResizeObserver<HTMLDivElement>();\n    const [toolbarContainerRef, , { inlineSize: toolbarContainerInlineSize }] = useResizeObserver<HTMLDivElement>();\n    const mergedToolbarRefs = useMergeRefs(toolbarRef, toolbarSizeRef);\n\n    const isSmallScreen =\n        !disableResponsiveCollapse &&\n        toolbarInlineSize !== undefined &&\n        toolbarInlineSize <= responsiveCollapseBreakpoint;\n\n    const toolbarColumns = collectToolbarColumns(children);\n\n    const leftColumns = (toolbarColumns ?? []).filter(column => column.props.horizontalAlign !== 'right');\n    const rightColumns = (toolbarColumns ?? []).filter(column => column.props.horizontalAlign === 'right');\n\n    const searchRightColumnIndex = rightColumns.findIndex(column =>\n        hasDescendantType(column.props.children, TableSearch)\n    );\n\n    const searchRightColumn = searchRightColumnIndex >= 0 ? rightColumns[searchRightColumnIndex] : undefined;\n\n    const mobileCollapsedRightColumns = searchRightColumn\n        ? rightColumns.filter((_, index) => index !== searchRightColumnIndex)\n        : rightColumns;\n\n    const hasMobileCollapseToggle = isSmallScreen && mobileCollapsedRightColumns.length > 0;\n\n    const mobileCollapseToggle = hasMobileCollapseToggle && (\n        <div className='table-toolbar-mobile-toggle'>\n            <ToggleButton\n                active={isMobileCollapseOpen}\n                aria-label={isMobileCollapseOpen ? 'Hide toolbar filters' : 'Show toolbar filters'}\n                bsStyle='default'\n                iconName={'rioglyph-option-horizontal'}\n                iconOnly\n                onClick={setIsMobileCollapseOpen}\n            />\n        </div>\n    );\n\n    useLayoutEffect(() => {\n        if (isSmallScreen) {\n            setHasWrappedRows(false);\n            return;\n        }\n\n        const toolbarElement = toolbarRef.current;\n\n        toolbarElement?.classList.add('table-toolbar-measuring');\n\n        const nextHasWrappedRows =\n            hasWrappedFlexItems(toolbarContainerRef.current) ||\n            hasWrappedFlexItems(leftGroupRef.current) ||\n            hasWrappedFlexItems(rightGroupRef.current);\n\n        toolbarElement?.classList.remove('table-toolbar-measuring');\n\n        setHasWrappedRows(nextHasWrappedRows);\n    }, [children, isSmallScreen, leftColumns.length, rightColumns.length, toolbarContainerInlineSize]);\n\n    useEffect(() => {\n        if (!isSmallScreen || !hasMobileCollapseToggle) {\n            setIsMobileCollapseOpen(false);\n        }\n    }, [hasMobileCollapseToggle, isSmallScreen]);\n\n    if (!toolbarColumns?.length) {\n        return <div className={classNames('table-toolbar', className)}>{children}</div>;\n    }\n\n    if (isSmallScreen) {\n        return (\n            <div className={classNames('table-toolbar', 'table-toolbar-mobile', className)} ref={mergedToolbarRefs}>\n                <div className='table-toolbar-container table-toolbar-container-mobile' ref={toolbarContainerRef}>\n                    {searchRightColumn ? (\n                        <>\n                            {leftColumns.length > 0 && (\n                                <div className='table-toolbar-mobile-primary'>\n                                    <div className='table-toolbar-group-left table-toolbar-group-left-mobile'>\n                                        {leftColumns}\n                                    </div>\n                                </div>\n                            )}\n                            <div className='table-toolbar-mobile-search-row'>\n                                <div className='table-toolbar-mobile-search'>{searchRightColumn}</div>\n                                {mobileCollapseToggle}\n                            </div>\n                        </>\n                    ) : (\n                        <div className='table-toolbar-mobile-primary'>\n                            {leftColumns.length > 0 && (\n                                <div className='table-toolbar-group-left table-toolbar-group-left-mobile'>\n                                    {leftColumns}\n                                </div>\n                            )}\n                            {mobileCollapseToggle}\n                        </div>\n                    )}\n\n                    {hasMobileCollapseToggle && (\n                        <Collapse open={isMobileCollapseOpen} timeout={220}>\n                            <Card className={classNames('table-toolbar-mobile-collapse-card', collapseCardClassName)}>\n                                <div className='table-toolbar-mobile-collapse'>{mobileCollapsedRightColumns}</div>\n                            </Card>\n                        </Collapse>\n                    )}\n                </div>\n            </div>\n        );\n    }\n\n    return (\n        <div\n            className={classNames('table-toolbar', hasWrappedRows && 'table-toolbar-has-wrap', className)}\n            ref={mergedToolbarRefs}\n        >\n            <div className='table-toolbar-container' ref={toolbarContainerRef}>\n                {leftColumns.length > 0 && (\n                    <div className='table-toolbar-group-left' ref={leftGroupRef}>\n                        {leftColumns}\n                    </div>\n                )}\n                {rightColumns.length > 0 && (\n                    <div className='table-toolbar-group-right' ref={rightGroupRef}>\n                        {rightColumns}\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default TableToolbar;\n"],"names":["DEFAULT_TABLE_TOOLBAR_COLLAPSE_BREAKPOINT","isTableToolbarColumnElement","child","isValidElement","TableToolbarColumn","collectToolbarColumns","children","columns","Children","Fragment","fragmentColumns","hasDescendantType","node","componentType","hasWrappedFlexItems","containerElement","itemElements","firstLineBottom","itemElement","TableToolbar","props","className","collapseCardClassName","responsiveCollapseBreakpoint","disableResponsiveCollapse","toolbarRef","useRef","leftGroupRef","rightGroupRef","hasWrappedRows","setHasWrappedRows","useState","isMobileCollapseOpen","setIsMobileCollapseOpen","toolbarSizeRef","toolbarInlineSize","useResizeObserver","toolbarContainerRef","toolbarContainerInlineSize","mergedToolbarRefs","useMergeRefs","isSmallScreen","toolbarColumns","leftColumns","column","rightColumns","searchRightColumnIndex","TableSearch","searchRightColumn","mobileCollapsedRightColumns","_","index","hasMobileCollapseToggle","mobileCollapseToggle","jsx","ToggleButton","useLayoutEffect","toolbarElement","nextHasWrappedRows","useEffect","classNames","jsxs","Collapse","Card"],"mappings":"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"}

package/components/table/TableToolbarColumn.d.ts

@@ -20,6 +20,9 @@ export type TableToolbarColumnProps = {
     label?: ReactNode;
     /**
      * Optional class names for the column wrapper.
+     *
+     * Do not use this to override the standard bottom margin between TableToolbar and the Table below it.
+     * TableToolbarColumn contributes to the documented toolbar-to-table spacing.
      */
     className?: string;
     /**

package/components/table/TableToolbarColumn.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableToolbarColumn.js","sources":["../../../src/components/table/TableToolbarColumn.tsx"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type TableToolbarColumnHorizontalAlign = 'left' | 'right';\nexport type TableToolbarColumnVerticalAlign = 'start' | 'center' | 'end';\n\nexport type TableToolbarColumnProps = {\n    /**\n     * Controls whether the column is rendered in the left or right toolbar group.\n     *\n     * @default 'left'\n     */\n    horizontalAlign?: TableToolbarColumnHorizontalAlign;\n\n    /**\n     * Vertically centers this toolbar column within its group.\n     *\n     * @default 'end'\n     */\n    verticalAlign?: TableToolbarColumnVerticalAlign;\n\n    /**\n     * Optional label rendered above the column content.\n     */\n    label?: ReactNode;\n\n    /**\n     * Optional class names for the column wrapper.\n     */\n    className?: string;\n\n    /**\n     * Adds the default toolbar separator styling for the column.\n     */\n    separator?: boolean;\n};\n\nconst TableToolbarColumn = (props: PropsWithChildren<TableToolbarColumnProps>) => {\n    const {\n        horizontalAlign: _horizontalAlign,\n        label,\n        className,\n        separator,\n        verticalAlign = 'end',\n        children,\n        ...remainingProps\n    } = props;\n\n    return (\n        <div\n            {...remainingProps}\n            className={classNames(\n                'table-toolbar-column',\n                `align-self-${verticalAlign}`,\n                separator && 'table-toolbar-column-separator',\n                className\n            )}\n        >\n            {label ? <label className='table-toolbar-label'>{label}</label> : null}\n            {children}\n        </div>\n    );\n};\n\nexport default TableToolbarColumn;\n"],"names":["TableToolbarColumn","props","_horizontalAlign","label","className","separator","verticalAlign","children","remainingProps","jsxs","classNames","jsx"],"mappings":";;AAsCA,MAAMA,IAAqB,CAACC,MAAsD;AAC9E,QAAM;AAAA,IACF,iBAAiBC;AAAA,IACjB,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHP;AAEJ,SACI,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGD;AAAA,MACJ,WAAWE;AAAA,QACP;AAAA,QACA,cAAcJ,CAAa;AAAA,QAC3BD,KAAa;AAAA,QACbD;AAAA,MAAA;AAAA,MAGH,UAAA;AAAA,QAAAD,IAAQ,gBAAAQ,EAAC,SAAA,EAAM,WAAU,uBAAuB,aAAM,IAAW;AAAA,QACjEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"TableToolbarColumn.js","sources":["../../../src/components/table/TableToolbarColumn.tsx"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type TableToolbarColumnHorizontalAlign = 'left' | 'right';\nexport type TableToolbarColumnVerticalAlign = 'start' | 'center' | 'end';\n\nexport type TableToolbarColumnProps = {\n    /**\n     * Controls whether the column is rendered in the left or right toolbar group.\n     *\n     * @default 'left'\n     */\n    horizontalAlign?: TableToolbarColumnHorizontalAlign;\n\n    /**\n     * Vertically centers this toolbar column within its group.\n     *\n     * @default 'end'\n     */\n    verticalAlign?: TableToolbarColumnVerticalAlign;\n\n    /**\n     * Optional label rendered above the column content.\n     */\n    label?: ReactNode;\n\n    /**\n     * Optional class names for the column wrapper.\n     *\n     * Do not use this to override the standard bottom margin between TableToolbar and the Table below it.\n     * TableToolbarColumn contributes to the documented toolbar-to-table spacing.\n     */\n    className?: string;\n\n    /**\n     * Adds the default toolbar separator styling for the column.\n     */\n    separator?: boolean;\n};\n\nconst TableToolbarColumn = (props: PropsWithChildren<TableToolbarColumnProps>) => {\n    const {\n        horizontalAlign: _horizontalAlign,\n        label,\n        className,\n        separator,\n        verticalAlign = 'end',\n        children,\n        ...remainingProps\n    } = props;\n\n    return (\n        <div\n            {...remainingProps}\n            className={classNames(\n                'table-toolbar-column',\n                `align-self-${verticalAlign}`,\n                separator && 'table-toolbar-column-separator',\n                className\n            )}\n        >\n            {label ? <label className='table-toolbar-label'>{label}</label> : null}\n            {children}\n        </div>\n    );\n};\n\nexport default TableToolbarColumn;\n"],"names":["TableToolbarColumn","props","_horizontalAlign","label","className","separator","verticalAlign","children","remainingProps","jsxs","classNames","jsx"],"mappings":";;AAyCA,MAAMA,IAAqB,CAACC,MAAsD;AAC9E,QAAM;AAAA,IACF,iBAAiBC;AAAA,IACjB,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHP;AAEJ,SACI,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGD;AAAA,MACJ,WAAWE;AAAA,QACP;AAAA,QACA,cAAcJ,CAAa;AAAA,QAC3BD,KAAa;AAAA,QACbD;AAAA,MAAA;AAAA,MAGH,UAAA;AAAA,QAAAD,IAAQ,gBAAAQ,EAAC,SAAA,EAAM,WAAU,uBAAuB,aAAM,IAAW;AAAA,QACjEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}