@rio-cloud/rio-uikit 2.4.2 → 2.5.0

package/components/tabbedPanel/TabbedPanel.js

@@ -0,0 +1,119 @@
+import { jsxs as g, jsx as a } from "react/jsx-runtime";
+import { useId as Z, useState as k } from "react";
+import { useReducedMotion as _, motion as u, AnimatePresence as C } from "motion/react";
+import { noop as ee } from "es-toolkit/function";
+import r from "../../utils/classNames.js";
+import { mergeClassNameOverrides as c } from "../../utils/mergeClassNameOverrides.js";
+import ae from "../../hooks/useResizeObserver.js";
+const A = (t) => t.find((s) => !s.disabled) ?? t[0], re = (t) => {
+  const {
+    activeKey: s,
+    defaultActiveKey: T,
+    tabs: l,
+    bsStyle: $ = "default",
+    bodyTransition: x = "height-fade",
+    duration: m = 0.16,
+    headerRight: y,
+    onSelectTab: B = ee,
+    className: R,
+    headerClassName: K,
+    navClassName: w,
+    tabLinkClassName: I,
+    bodyClassName: S,
+    activeContentClassName: D,
+    headerRightClassName: j,
+    ...P
+  } = t, o = Z(), z = _(), [E, , { blockSize: H }] = ae(), [L, N] = k(!1), [M, O] = k(T ?? A(l)?.key), F = s ?? M, n = l.find((e) => e.key === F) ?? A(l), p = z ? "none" : x, b = (e) => {
+    e.disabled || e.key === n?.key || (s === void 0 && O(e.key), B(e.key));
+  }, q = (e, i) => {
+    i.preventDefault(), b(e);
+  }, G = (e, i) => {
+    (i.key === "Enter" || i.key === " ") && (i.preventDefault(), b(e));
+  }, J = c(`tabbed-panel panel panel-${$} margin-bottom-20`, R), Q = c(
+    "panel-heading display-flex align-items-center justify-content-between gap-15 padding-0 margin-bottom-0",
+    K
+  ), h = r("panel-body", S), U = c("nav nav-pills align-items-end margin-0 shadow-none", w), V = c("padding-right-10", j), W = r(D, n?.contentClassName);
+  let d = null;
+  typeof y == "function" ? d = n ? y(n) : null : d = y;
+  const f = () => /* @__PURE__ */ a(
+    "div",
+    {
+      className: W,
+      role: "tabpanel",
+      id: `${o}-${n?.key}-panel`,
+      "aria-labelledby": `${o}-${n?.key}-tab`,
+      children: n?.content
+    }
+  ), X = () => p === "none" ? /* @__PURE__ */ a("div", { className: h, children: f() }) : p === "height-fade" ? /* @__PURE__ */ a("div", { className: h, children: /* @__PURE__ */ a(
+    u.div,
+    {
+      initial: !1,
+      animate: { height: H ?? "auto" },
+      className: r(L && "overflow-hidden"),
+      transition: { duration: m },
+      onAnimationStart: () => N(!0),
+      onAnimationComplete: () => N(!1),
+      children: /* @__PURE__ */ a("div", { ref: E, children: /* @__PURE__ */ a(C, { initial: !1, mode: "popLayout", children: /* @__PURE__ */ a(
+        u.div,
+        {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: m },
+          children: f()
+        },
+        n?.key
+      ) }) })
+    }
+  ) }) : p === "fade" ? /* @__PURE__ */ a("div", { className: h, children: /* @__PURE__ */ a(C, { initial: !1, mode: "wait", children: /* @__PURE__ */ a(
+    u.div,
+    {
+      transition: { duration: m },
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      children: f()
+    },
+    n?.key
+  ) }) }) : null;
+  return /* @__PURE__ */ g("div", { ...P, className: J, children: [
+    /* @__PURE__ */ g("div", { className: Q, children: [
+      /* @__PURE__ */ a("ul", { className: U, role: "tablist", children: l.map((e) => {
+        const i = e.key === n?.key, Y = `${o}-${e.key}-tab`;
+        return /* @__PURE__ */ a(
+          "li",
+          {
+            className: r(
+              i && "active text-medium",
+              e.disabled && "disabled",
+              e.className
+            ),
+            role: "presentation",
+            children: /* @__PURE__ */ a(
+              "span",
+              {
+                id: Y,
+                role: "tab",
+                "aria-selected": i,
+                "aria-controls": `${o}-${e.key}-panel`,
+                "aria-disabled": e.disabled,
+                tabIndex: e.disabled ? -1 : 0,
+                className: I,
+                onClick: (v) => q(e, v),
+                onKeyDown: (v) => G(e, v),
+                children: e.title
+              }
+            )
+          },
+          e.key
+        );
+      }) }),
+      d && /* @__PURE__ */ a("div", { className: V, children: d })
+    ] }),
+    X()
+  ] });
+};
+export {
+  re as default
+};
+//# sourceMappingURL=TabbedPanel.js.map

package/components/tabbedPanel/TabbedPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabbedPanel.js","sources":["../../../src/components/tabbedPanel/TabbedPanel.tsx"],"sourcesContent":["import type React from 'react';\nimport { useId, useState } from 'react';\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport { mergeClassNameOverrides } from '../../utils/mergeClassNameOverrides';\nimport useResizeObserver from '../../hooks/useResizeObserver';\n\nexport type TabbedPanelTab = {\n    /**\n     * Unique key of the tab.\n     */\n    key: string;\n\n    /**\n     * Title rendered inside the panel header navigation.\n     */\n    title: React.ReactNode;\n\n    /**\n     * Whether the tab can be selected.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Additional classes to be set on the tab list item.\n     */\n    className?: string;\n\n    /**\n     * Additional classes to be set on this tab's content wrapper.\n     */\n    contentClassName?: string;\n\n    /**\n     * Content rendered inside the panel body when the tab is active.\n     */\n    content: React.ReactNode;\n};\n\nexport type TabbedPanelProps = {\n    /**\n     * The selected tab key for controlled usage.\n     */\n    activeKey?: string;\n\n    /**\n     * The initially selected tab key for uncontrolled usage.\n     */\n    defaultActiveKey?: string;\n\n    /**\n     * Available tabs and their panel body content.\n     */\n    tabs: TabbedPanelTab[];\n\n    /**\n     * Panel style variant. TabbedPanel supports the default bordered panel and the blank panel only.\n     *\n     * @default 'default'\n     */\n    bsStyle?: 'blank' | 'default';\n\n    /**\n     * Body transition used when switching tabs.\n     *\n     * @default 'height-fade'\n     */\n    bodyTransition?: 'none' | 'fade' | 'height-fade';\n\n    /**\n     * Animation duration in seconds.\n     *\n     * @default 0.16\n     */\n    duration?: number;\n\n    /**\n     * Optional content rendered on the right side of the panel header.\n     */\n    headerRight?: React.ReactNode | ((activeTab: TabbedPanelTab) => React.ReactNode);\n\n    /**\n     * Callback called when a tab is selected.\n     */\n    onSelectTab?: (tabKey: string) => void;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Additional classes to be set on the panel header.\n     */\n    headerClassName?: string;\n\n    /**\n     * Additional classes to be set on the tab navigation.\n     */\n    navClassName?: string;\n\n    /**\n     * Additional classes to be set on each tab link.\n     */\n    tabLinkClassName?: string;\n\n    /**\n     * Additional classes to be set on the panel body.\n     */\n    bodyClassName?: string;\n\n    /**\n     * Additional classes to be set on the active tab content wrapper.\n     */\n    activeContentClassName?: string;\n\n    /**\n     * Additional classes to be set on the header-right wrapper.\n     */\n    headerRightClassName?: string;\n};\n\nconst getFirstEnabledTab = (tabs: TabbedPanelTab[]) => tabs.find(tab => !tab.disabled) ?? tabs[0];\n\nconst TabbedPanel = (props: TabbedPanelProps) => {\n    const {\n        activeKey,\n        defaultActiveKey,\n        tabs,\n        bsStyle = 'default',\n        bodyTransition = 'height-fade',\n        duration = 0.16,\n        headerRight,\n        onSelectTab = noop,\n        className,\n        headerClassName,\n        navClassName,\n        tabLinkClassName,\n        bodyClassName,\n        activeContentClassName,\n        headerRightClassName,\n        ...remainingProps\n    } = props;\n\n    const componentId = useId();\n    const shouldReduceMotion = useReducedMotion();\n\n    const [activeBodyRef, , { blockSize: activeBodyHeight }] = useResizeObserver<HTMLDivElement>();\n\n    const [isBodyAnimating, setIsBodyAnimating] = useState(false);\n    const [internalActiveKey, setInternalActiveKey] = useState(defaultActiveKey ?? getFirstEnabledTab(tabs)?.key);\n\n    const selectedKey = activeKey ?? internalActiveKey;\n    const activeTab = tabs.find(tab => tab.key === selectedKey) ?? getFirstEnabledTab(tabs);\n    const effectiveBodyTransition = shouldReduceMotion ? 'none' : bodyTransition;\n\n    const selectTab = (tab: TabbedPanelTab) => {\n        if (tab.disabled || tab.key === activeTab?.key) {\n            return;\n        }\n\n        if (activeKey === undefined) {\n            setInternalActiveKey(tab.key);\n        }\n\n        onSelectTab(tab.key);\n    };\n\n    const handleSelectTab = (tab: TabbedPanelTab, event: React.MouseEvent<HTMLElement>) => {\n        event.preventDefault();\n        selectTab(tab);\n    };\n\n    const handleTabKeyDown = (tab: TabbedPanelTab, event: React.KeyboardEvent<HTMLElement>) => {\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            selectTab(tab);\n        }\n    };\n\n    const panelClassNames = mergeClassNameOverrides(`tabbed-panel panel panel-${bsStyle} margin-bottom-20`, className);\n\n    const headerClassNames = mergeClassNameOverrides(\n        'panel-heading display-flex align-items-center justify-content-between gap-15 padding-0 margin-bottom-0',\n        headerClassName\n    );\n\n    const panelBodyClassNames = classNames('panel-body', bodyClassName);\n\n    const navClassNames = mergeClassNameOverrides('nav nav-pills align-items-end margin-0 shadow-none', navClassName);\n    const headerRightClassNames = mergeClassNameOverrides('padding-right-10', headerRightClassName);\n\n    const activeContentClassNames = classNames(activeContentClassName, activeTab?.contentClassName);\n\n    let renderedHeaderRight: React.ReactNode = null;\n\n    if (typeof headerRight === 'function') {\n        renderedHeaderRight = activeTab ? headerRight(activeTab) : null;\n    } else {\n        renderedHeaderRight = headerRight;\n    }\n\n    const renderBodyContent = () => (\n        <div\n            className={activeContentClassNames}\n            role='tabpanel'\n            id={`${componentId}-${activeTab?.key}-panel`}\n            aria-labelledby={`${componentId}-${activeTab?.key}-tab`}\n        >\n            {activeTab?.content}\n        </div>\n    );\n\n    const renderBody = () => {\n        if (effectiveBodyTransition === 'none') {\n            return <div className={panelBodyClassNames}>{renderBodyContent()}</div>;\n        }\n\n        if (effectiveBodyTransition === 'height-fade') {\n            return (\n                <div className={panelBodyClassNames}>\n                    <motion.div\n                        initial={false}\n                        animate={{ height: activeBodyHeight ?? 'auto' }}\n                        className={classNames(isBodyAnimating && 'overflow-hidden')}\n                        transition={{ duration }}\n                        onAnimationStart={() => setIsBodyAnimating(true)}\n                        onAnimationComplete={() => setIsBodyAnimating(false)}\n                    >\n                        <div ref={activeBodyRef}>\n                            <AnimatePresence initial={false} mode='popLayout'>\n                                <motion.div\n                                    key={activeTab?.key}\n                                    initial={{ opacity: 0 }}\n                                    animate={{ opacity: 1 }}\n                                    exit={{ opacity: 0 }}\n                                    transition={{ duration }}\n                                >\n                                    {renderBodyContent()}\n                                </motion.div>\n                            </AnimatePresence>\n                        </div>\n                    </motion.div>\n                </div>\n            );\n        }\n\n        if (effectiveBodyTransition === 'fade') {\n            return (\n                <div className={panelBodyClassNames}>\n                    <AnimatePresence initial={false} mode='wait'>\n                        <motion.div\n                            key={activeTab?.key}\n                            transition={{ duration }}\n                            initial={{ opacity: 0 }}\n                            animate={{ opacity: 1 }}\n                            exit={{ opacity: 0 }}\n                        >\n                            {renderBodyContent()}\n                        </motion.div>\n                    </AnimatePresence>\n                </div>\n            );\n        }\n\n        return null;\n    };\n\n    return (\n        <div {...remainingProps} className={panelClassNames}>\n            <div className={headerClassNames}>\n                <ul className={navClassNames} role='tablist'>\n                    {tabs.map(tab => {\n                        const isActive = tab.key === activeTab?.key;\n                        const tabId = `${componentId}-${tab.key}-tab`;\n\n                        return (\n                            <li\n                                key={tab.key}\n                                className={classNames(\n                                    isActive && 'active text-medium',\n                                    tab.disabled && 'disabled',\n                                    tab.className\n                                )}\n                                role='presentation'\n                            >\n                                <span\n                                    id={tabId}\n                                    role='tab'\n                                    aria-selected={isActive}\n                                    aria-controls={`${componentId}-${tab.key}-panel`}\n                                    aria-disabled={tab.disabled}\n                                    tabIndex={tab.disabled ? -1 : 0}\n                                    className={tabLinkClassName}\n                                    onClick={event => handleSelectTab(tab, event)}\n                                    onKeyDown={event => handleTabKeyDown(tab, event)}\n                                >\n                                    {tab.title}\n                                </span>\n                            </li>\n                        );\n                    })}\n                </ul>\n                {renderedHeaderRight && <div className={headerRightClassNames}>{renderedHeaderRight}</div>}\n            </div>\n            {renderBody()}\n        </div>\n    );\n};\n\nexport default TabbedPanel;\n"],"names":["getFirstEnabledTab","tabs","tab","TabbedPanel","props","activeKey","defaultActiveKey","bsStyle","bodyTransition","duration","headerRight","onSelectTab","noop","className","headerClassName","navClassName","tabLinkClassName","bodyClassName","activeContentClassName","headerRightClassName","remainingProps","componentId","useId","shouldReduceMotion","useReducedMotion","activeBodyRef","activeBodyHeight","useResizeObserver","isBodyAnimating","setIsBodyAnimating","useState","internalActiveKey","setInternalActiveKey","selectedKey","activeTab","effectiveBodyTransition","selectTab","handleSelectTab","event","handleTabKeyDown","panelClassNames","mergeClassNameOverrides","headerClassNames","panelBodyClassNames","classNames","navClassNames","headerRightClassNames","activeContentClassNames","renderedHeaderRight","renderBodyContent","jsx","renderBody","motion","AnimatePresence","jsxs","isActive","tabId"],"mappings":"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"}

package/components/table/Table.types.d.ts

@@ -142,6 +142,10 @@ export type TableColumnDefinition<RowType extends TableRowData> = {
     /**
      * Enables resize handles for this 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.
      *
@@ -261,7 +265,11 @@ export type TableProps<RowType extends TableRowData> = Omit<HTMLAttributes<HTMLD
      */
     rounded?: boolean;
     /**
-     * Show vertical and header row grid lines.
+     * Show table grid separators through the header and body.
+     *
+     * Do not use `gridLines` only to reproduce header-only vertical divider or handle lines.
+     * If a design shows vertical separators only in the header while body rows do not show vertical
+     * grid lines, use `TableHeaderColumn` `resizeable` and optionally `onColumnResize` instead.
      *
      * @default false
      */

package/components/table/TableColumn.js

@@ -1,14 +1,15 @@
 import { jsx as b, jsxs as j } from "react/jsx-runtime";
 import c from "../../utils/classNames.js";
-import { getVerticalAlignClassName as I, getHorizontalAlignClassName as L } from "./shared/getAlignClassName.js";
-import T from "./shared/getCellContentOverflowClassName.js";
-import { resolveAriaSpan as H, resolveAriaColIndex as D } from "./shared/resolveTableAria.js";
-import { useOptionalTableInteractionContext as P } from "./context/TableInteractionContext.js";
-import { useOptionalTableLayoutContext as $ } from "./context/TableLayoutContext.js";
-import { useOptionalTableRenderConfigContext as q } from "./context/TableRenderConfigContext.js";
-import { useOptionalTableSection as E, useTableRowContext as G } from "./context/TableStructureContext.js";
-import { useOptionalTableRenderContext as J } from "./context/TableRenderContext.js";
-const ne = (F) => {
+import { getNodeTextContent as H } from "../../utils/getNodeTextContent.js";
+import { getVerticalAlignClassName as T, getHorizontalAlignClassName as I } from "./shared/getAlignClassName.js";
+import L from "./shared/getCellContentOverflowClassName.js";
+import { resolveAriaSpan as P, resolveAriaColIndex as D } from "./shared/resolveTableAria.js";
+import { useOptionalTableInteractionContext as $ } from "./context/TableInteractionContext.js";
+import { useOptionalTableLayoutContext as q } from "./context/TableLayoutContext.js";
+import { useOptionalTableRenderConfigContext as E } from "./context/TableRenderConfigContext.js";
+import { useOptionalTableSection as G, useTableRowContext as J } from "./context/TableStructureContext.js";
+import { useOptionalTableRenderContext as Q } from "./context/TableRenderContext.js";
+const ae = (F) => {
   const {
     children: f,
     className: g,
@@ -20,7 +21,7 @@ const ne = (F) => {
     value: p,
     verticalAlign: W,
     ...x
-  } = F, n = q(), o = J(), d = P(), i = $(), v = E(), a = G(), s = v === "body", r = v === "footer";
+  } = F, n = E(), o = Q(), d = $(), i = q(), v = G(), a = J(), s = v === "body", r = v === "footer";
   if (!o || !n || !d || !i || o.columns.length === 0 || !s && !r || s && !a)
     return null;
   const N = t !== void 0 ? o.columnIndexByKey.get(t) : void 0, u = a?.nextColumnIndex(N, h) ?? N ?? -1;
@@ -47,7 +48,7 @@ const ne = (F) => {
     },
     a.rowIndex,
     u
-  ), z = i.stickyLeftColumnCount ?? 0, A = i.stickyRightColumnCount ?? 0, R = z > 0 && l <= z, O = A > 0 && l > o.columns.length - A, K = e?.mobileLabel ?? (typeof e?.label == "string" ? e.label : ""), C = (V) => {
+  ), z = i.stickyLeftColumnCount ?? 0, A = i.stickyRightColumnCount ?? 0, R = z > 0 && l <= z, O = A > 0 && l > o.columns.length - A, K = e?.mobileLabel ?? H(e?.label) ?? "", C = (V) => {
     V.stopPropagation();
   };
   return r && (o.renderDraft.hasFooterCells = !0), n.isTableView ? /* @__PURE__ */ b(
@@ -61,8 +62,8 @@ const ne = (F) => {
         s && O && "table-cell-sticky-right-column",
         r && i.stickyFooter && R && "table-footer-cell-sticky-left-column",
         r && i.stickyFooter && O && "table-footer-cell-sticky-right-column",
-        L(w),
-        I(k),
+        I(w),
+        T(k),
         e?.hideOnMobile && "table-hide-mobile",
         S,
         g
@@ -70,11 +71,11 @@ const ne = (F) => {
       "data-column": e?.columnKey ?? t ?? l,
       role: "cell",
       "aria-colindex": D(l, d.showSelectionColumn),
-      "aria-colspan": H(h),
+      "aria-colspan": P(h),
       onClick: m ? C : void 0,
       onKeyDown: m ? C : void 0,
       style: { gridColumn: `${B} / span ${h}`, gridRow: "1 / span 1" },
-      children: /* @__PURE__ */ b("div", { className: c("table-cell-content", T(y)), children: p ?? f ?? "" })
+      children: /* @__PURE__ */ b("div", { className: c("table-cell-content", L(y)), children: p ?? f ?? "" })
     }
   ) : /* @__PURE__ */ j(
     "div",
@@ -83,8 +84,8 @@ const ne = (F) => {
       className: c(
         "table-cell",
         n.cardClasses.cellClassName,
-        L(w),
-        I(k),
+        I(w),
+        T(k),
         e?.hideOnMobile && "table-hide-mobile",
         S,
         g
@@ -102,7 +103,7 @@ const ne = (F) => {
             className: c(
               "table-cell-content",
               n.cardClasses.contentClassName,
-              T(y)
+              L(y)
             ),
             children: p ?? f ?? ""
           }
@@ -112,6 +113,6 @@ const ne = (F) => {
   );
 };
 export {
-  ne as default
+  ae as default
 };
 //# sourceMappingURL=TableColumn.js.map

package/components/table/TableColumn.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableColumn.js","sources":["../../../src/components/table/TableColumn.tsx"],"sourcesContent":["import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport { getHorizontalAlignClassName, getVerticalAlignClassName } from './shared/getAlignClassName';\nimport getCellContentOverflowClassName from './shared/getCellContentOverflowClassName';\nimport { resolveAriaColIndex, resolveAriaSpan } from './shared/resolveTableAria';\nimport type { TableCellOverflow, TableHorizontalAlign, TableHtmlAttributes, TableVerticalAlign } from './Table.types';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useOptionalTableLayoutContext } from './context/TableLayoutContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\nimport { useOptionalTableSection, useTableRowContext } from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableColumnProps = TableHtmlAttributes & {\n    /**\n     * `TableColumn` may be rendered directly inside `TableFooter`.\n     *\n     * In `TableBody`, columns must be rendered inside a row component such as\n     * `TableRow` or `TableExpandedRow`. Direct `TableColumn` children of\n     * `TableBody` are ignored.\n     */\n    children?: ReactNode;\n\n    /**\n     * Optional explicit column key.\n     *\n     * In `TableBody`, this should usually match the `columnKey` of the corresponding\n     * `TableHeaderColumn` for the same data column. If omitted, the cell is matched by its position inside\n     * the current row.\n     *\n     * Position-based matching is mainly useful for simple rows that mirror the header\n     * order exactly. For spanned cells, reordered columns, or more complex row layouts,\n     * prefer an explicit `columnKey`.\n     */\n    columnKey?: string;\n\n    /**\n     * Optional explicit value.\n     */\n    value?: ReactNode;\n\n    /**\n     * Additional classes for this cell only.\n     */\n    className?: string;\n\n    /**\n     * Horizontal alignment override for this cell.\n     */\n    horizontalAlign?: TableHorizontalAlign;\n\n    /**\n     * Vertical alignment override for this cell.\n     */\n    verticalAlign?: TableVerticalAlign;\n\n    /**\n     * Overflow behavior for the cell content wrapper.\n     *\n     * @default 'hidden'\n     */\n    overflow?: TableCellOverflow;\n\n    /**\n     * Number of columns this cell should span.\n     *\n     * Currently used by header and footer-style declarative table sections.\n     */\n    colSpan?: number;\n\n    /**\n     * Prevents clicks and keyboard interactions inside this cell from triggering the parent row click handler.\n     *\n     * Useful for interactive cell content such as dropdowns, inputs, or buttons.\n     *\n     * @default false\n     */\n    preventRowClick?: boolean;\n};\n\nconst TableColumn = (props: TableColumnProps) => {\n    const {\n        children,\n        className,\n        colSpan = 1,\n        columnKey,\n        horizontalAlign,\n        overflow = 'hidden',\n        preventRowClick = false,\n        value,\n        verticalAlign,\n        ...remainingProps\n    } = props;\n\n    const renderConfigContext = useOptionalTableRenderConfigContext();\n    const renderContext = useOptionalTableRenderContext();\n    const interactionContext = useOptionalTableInteractionContext();\n    const layoutContext = useOptionalTableLayoutContext();\n    const section = useOptionalTableSection();\n    const rowContext = useTableRowContext();\n\n    const isBodySection = section === 'body';\n    const isFooterSection = section === 'footer';\n\n    if (\n        !renderContext ||\n        !renderConfigContext ||\n        !interactionContext ||\n        !layoutContext ||\n        renderContext.columns.length === 0 ||\n        (!isBodySection && !isFooterSection)\n    ) {\n        return null;\n    }\n\n    if (isBodySection && !rowContext) {\n        return null;\n    }\n\n    const explicitColumnIndex = columnKey !== undefined ? renderContext.columnIndexByKey.get(columnKey) : undefined;\n    const columnIndex = rowContext?.nextColumnIndex(explicitColumnIndex, colSpan) ?? explicitColumnIndex ?? -1;\n\n    if (columnIndex < 0) {\n        return null;\n    }\n\n    const renderColumn = renderContext.columns[columnIndex];\n    const baseColumnStart = columnIndex + 1;\n    const resolvedColumnStart = baseColumnStart + (interactionContext.showSelectionColumn ? 1 : 0);\n    const resolvedHorizontalAlign = horizontalAlign ?? renderColumn?.horizontalAlign;\n    const resolvedVerticalAlign = verticalAlign ?? renderColumn?.verticalAlign;\n\n    const resolvedCellClassName =\n        isBodySection &&\n        rowContext?.rowData &&\n        renderConfigContext.cellClassName?.(\n            rowContext.rowData,\n            renderContext.columnDefinitionsByKey.get(renderColumn?.columnKey ?? columnKey ?? '') ?? {\n                key: renderColumn?.columnKey ?? columnKey ?? String(baseColumnStart),\n                label: renderColumn?.label ?? '',\n                icon: renderColumn?.icon,\n                filter: renderColumn?.filter,\n                hideLabel: renderColumn?.hideLabel,\n                width: renderColumn?.width,\n                minResizeWidth: renderColumn?.minResizeWidth,\n                maxResizeWidth: renderColumn?.maxResizeWidth,\n                draggable: renderColumn?.draggable,\n                resizeable: renderColumn?.resizeable,\n                horizontalAlign: renderColumn?.horizontalAlign,\n                className: undefined,\n                headerClassName: renderColumn?.headerClassName,\n                hideOnMobile: renderColumn?.hideOnMobile,\n                sortable: renderColumn?.sortable,\n            },\n            rowContext.rowIndex,\n            columnIndex\n        );\n\n    const stickyLeftColumns = layoutContext.stickyLeftColumnCount ?? 0;\n    const stickyRightColumns = layoutContext.stickyRightColumnCount ?? 0;\n    const isStickyLeftColumn = stickyLeftColumns > 0 && baseColumnStart <= stickyLeftColumns;\n    const isStickyRightColumn =\n        stickyRightColumns > 0 && baseColumnStart > renderContext.columns.length - stickyRightColumns;\n\n    const mobileLabel =\n        renderColumn?.mobileLabel ?? (typeof renderColumn?.label === 'string' ? renderColumn.label : '');\n\n    const handleCellInteraction = (event: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n    };\n\n    if (isFooterSection) {\n        renderContext.renderDraft.hasFooterCells = true;\n    }\n\n    if (renderConfigContext.isTableView) {\n        return (\n            <div\n                {...remainingProps}\n                className={classNames(\n                    'table-cell',\n                    isFooterSection && 'table-footer-cell',\n                    isBodySection && isStickyLeftColumn && 'table-cell-sticky-left-column',\n                    isBodySection && isStickyRightColumn && 'table-cell-sticky-right-column',\n                    isFooterSection &&\n                        layoutContext.stickyFooter &&\n                        isStickyLeftColumn &&\n                        'table-footer-cell-sticky-left-column',\n                    isFooterSection &&\n                        layoutContext.stickyFooter &&\n                        isStickyRightColumn &&\n                        'table-footer-cell-sticky-right-column',\n                    getHorizontalAlignClassName(resolvedHorizontalAlign),\n                    getVerticalAlignClassName(resolvedVerticalAlign),\n                    renderColumn?.hideOnMobile && 'table-hide-mobile',\n                    resolvedCellClassName,\n                    className\n                )}\n                data-column={renderColumn?.columnKey ?? columnKey ?? baseColumnStart}\n                role='cell'\n                aria-colindex={resolveAriaColIndex(baseColumnStart, interactionContext.showSelectionColumn)}\n                aria-colspan={resolveAriaSpan(colSpan)}\n                onClick={preventRowClick ? handleCellInteraction : undefined}\n                onKeyDown={preventRowClick ? handleCellInteraction : undefined}\n                style={{ gridColumn: `${resolvedColumnStart} / span ${colSpan}`, gridRow: '1 / span 1' }}\n            >\n                <div className={classNames('table-cell-content', getCellContentOverflowClassName(overflow))}>\n                    {value ?? children ?? ''}\n                </div>\n            </div>\n        );\n    }\n\n    return (\n        <div\n            {...remainingProps}\n            className={classNames(\n                'table-cell',\n                renderConfigContext.cardClasses.cellClassName,\n                getHorizontalAlignClassName(resolvedHorizontalAlign),\n                getVerticalAlignClassName(resolvedVerticalAlign),\n                renderColumn?.hideOnMobile && 'table-hide-mobile',\n                resolvedCellClassName,\n                className\n            )}\n            data-column={renderColumn?.columnKey ?? columnKey ?? baseColumnStart}\n            role='cell'\n            aria-colindex={resolveAriaColIndex(baseColumnStart, interactionContext.showSelectionColumn)}\n            onClick={preventRowClick ? handleCellInteraction : undefined}\n            onKeyDown={preventRowClick ? handleCellInteraction : undefined}\n        >\n            {mobileLabel && (\n                <div className={classNames('table-cell-label', renderConfigContext.cardClasses.labelClassName)}>\n                    {mobileLabel}\n                </div>\n            )}\n            <div\n                className={classNames(\n                    'table-cell-content',\n                    renderConfigContext.cardClasses.contentClassName,\n                    getCellContentOverflowClassName(overflow)\n                )}\n            >\n                {value ?? children ?? ''}\n            </div>\n        </div>\n    );\n};\n\nexport default TableColumn;\n"],"names":["TableColumn","props","children","className","colSpan","columnKey","horizontalAlign","overflow","preventRowClick","value","verticalAlign","remainingProps","renderConfigContext","useOptionalTableRenderConfigContext","renderContext","useOptionalTableRenderContext","interactionContext","useOptionalTableInteractionContext","layoutContext","useOptionalTableLayoutContext","section","useOptionalTableSection","rowContext","useTableRowContext","isBodySection","isFooterSection","explicitColumnIndex","columnIndex","renderColumn","baseColumnStart","resolvedColumnStart","resolvedHorizontalAlign","resolvedVerticalAlign","resolvedCellClassName","stickyLeftColumns","stickyRightColumns","isStickyLeftColumn","isStickyRightColumn","mobileLabel","handleCellInteraction","event","jsx","classNames","getHorizontalAlignClassName","getVerticalAlignClassName","resolveAriaColIndex","resolveAriaSpan","getCellContentOverflowClassName","jsxs"],"mappings":"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"}
+{"version":3,"file":"TableColumn.js","sources":["../../../src/components/table/TableColumn.tsx"],"sourcesContent":["import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport { getNodeTextContent } from '../../utils/getNodeTextContent';\nimport { getHorizontalAlignClassName, getVerticalAlignClassName } from './shared/getAlignClassName';\nimport getCellContentOverflowClassName from './shared/getCellContentOverflowClassName';\nimport { resolveAriaColIndex, resolveAriaSpan } from './shared/resolveTableAria';\nimport type { TableCellOverflow, TableHorizontalAlign, TableHtmlAttributes, TableVerticalAlign } from './Table.types';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useOptionalTableLayoutContext } from './context/TableLayoutContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\nimport { useOptionalTableSection, useTableRowContext } from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableColumnProps = TableHtmlAttributes & {\n    /**\n     * `TableColumn` may be rendered directly inside `TableFooter`.\n     *\n     * In `TableBody`, columns must be rendered inside a row component such as\n     * `TableRow` or `TableExpandedRow`. Direct `TableColumn` children of\n     * `TableBody` are ignored.\n     */\n    children?: ReactNode;\n\n    /**\n     * Optional explicit column key.\n     *\n     * In `TableBody`, this should usually match the `columnKey` of the corresponding\n     * `TableHeaderColumn` for the same data column. If omitted, the cell is matched by its position inside\n     * the current row.\n     *\n     * Position-based matching is mainly useful for simple rows that mirror the header\n     * order exactly. For spanned cells, reordered columns, or more complex row layouts,\n     * prefer an explicit `columnKey`.\n     */\n    columnKey?: string;\n\n    /**\n     * Optional explicit value.\n     */\n    value?: ReactNode;\n\n    /**\n     * Additional classes for this cell only.\n     */\n    className?: string;\n\n    /**\n     * Horizontal alignment override for this cell.\n     */\n    horizontalAlign?: TableHorizontalAlign;\n\n    /**\n     * Vertical alignment override for this cell.\n     */\n    verticalAlign?: TableVerticalAlign;\n\n    /**\n     * Overflow behavior for the cell content wrapper.\n     *\n     * @default 'hidden'\n     */\n    overflow?: TableCellOverflow;\n\n    /**\n     * Number of columns this cell should span.\n     *\n     * Currently used by header and footer-style declarative table sections.\n     */\n    colSpan?: number;\n\n    /**\n     * Prevents clicks and keyboard interactions inside this cell from triggering the parent row click handler.\n     *\n     * Useful for interactive cell content such as dropdowns, inputs, or buttons.\n     *\n     * @default false\n     */\n    preventRowClick?: boolean;\n};\n\nconst TableColumn = (props: TableColumnProps) => {\n    const {\n        children,\n        className,\n        colSpan = 1,\n        columnKey,\n        horizontalAlign,\n        overflow = 'hidden',\n        preventRowClick = false,\n        value,\n        verticalAlign,\n        ...remainingProps\n    } = props;\n\n    const renderConfigContext = useOptionalTableRenderConfigContext();\n    const renderContext = useOptionalTableRenderContext();\n    const interactionContext = useOptionalTableInteractionContext();\n    const layoutContext = useOptionalTableLayoutContext();\n    const section = useOptionalTableSection();\n    const rowContext = useTableRowContext();\n\n    const isBodySection = section === 'body';\n    const isFooterSection = section === 'footer';\n\n    if (\n        !renderContext ||\n        !renderConfigContext ||\n        !interactionContext ||\n        !layoutContext ||\n        renderContext.columns.length === 0 ||\n        (!isBodySection && !isFooterSection)\n    ) {\n        return null;\n    }\n\n    if (isBodySection && !rowContext) {\n        return null;\n    }\n\n    const explicitColumnIndex = columnKey !== undefined ? renderContext.columnIndexByKey.get(columnKey) : undefined;\n    const columnIndex = rowContext?.nextColumnIndex(explicitColumnIndex, colSpan) ?? explicitColumnIndex ?? -1;\n\n    if (columnIndex < 0) {\n        return null;\n    }\n\n    const renderColumn = renderContext.columns[columnIndex];\n    const baseColumnStart = columnIndex + 1;\n    const resolvedColumnStart = baseColumnStart + (interactionContext.showSelectionColumn ? 1 : 0);\n    const resolvedHorizontalAlign = horizontalAlign ?? renderColumn?.horizontalAlign;\n    const resolvedVerticalAlign = verticalAlign ?? renderColumn?.verticalAlign;\n\n    const resolvedCellClassName =\n        isBodySection &&\n        rowContext?.rowData &&\n        renderConfigContext.cellClassName?.(\n            rowContext.rowData,\n            renderContext.columnDefinitionsByKey.get(renderColumn?.columnKey ?? columnKey ?? '') ?? {\n                key: renderColumn?.columnKey ?? columnKey ?? String(baseColumnStart),\n                label: renderColumn?.label ?? '',\n                icon: renderColumn?.icon,\n                filter: renderColumn?.filter,\n                hideLabel: renderColumn?.hideLabel,\n                width: renderColumn?.width,\n                minResizeWidth: renderColumn?.minResizeWidth,\n                maxResizeWidth: renderColumn?.maxResizeWidth,\n                draggable: renderColumn?.draggable,\n                resizeable: renderColumn?.resizeable,\n                horizontalAlign: renderColumn?.horizontalAlign,\n                className: undefined,\n                headerClassName: renderColumn?.headerClassName,\n                hideOnMobile: renderColumn?.hideOnMobile,\n                sortable: renderColumn?.sortable,\n            },\n            rowContext.rowIndex,\n            columnIndex\n        );\n\n    const stickyLeftColumns = layoutContext.stickyLeftColumnCount ?? 0;\n    const stickyRightColumns = layoutContext.stickyRightColumnCount ?? 0;\n    const isStickyLeftColumn = stickyLeftColumns > 0 && baseColumnStart <= stickyLeftColumns;\n    const isStickyRightColumn =\n        stickyRightColumns > 0 && baseColumnStart > renderContext.columns.length - stickyRightColumns;\n\n    const mobileLabel = renderColumn?.mobileLabel ?? getNodeTextContent(renderColumn?.label) ?? '';\n\n    const handleCellInteraction = (event: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n    };\n\n    if (isFooterSection) {\n        renderContext.renderDraft.hasFooterCells = true;\n    }\n\n    if (renderConfigContext.isTableView) {\n        return (\n            <div\n                {...remainingProps}\n                className={classNames(\n                    'table-cell',\n                    isFooterSection && 'table-footer-cell',\n                    isBodySection && isStickyLeftColumn && 'table-cell-sticky-left-column',\n                    isBodySection && isStickyRightColumn && 'table-cell-sticky-right-column',\n                    isFooterSection &&\n                        layoutContext.stickyFooter &&\n                        isStickyLeftColumn &&\n                        'table-footer-cell-sticky-left-column',\n                    isFooterSection &&\n                        layoutContext.stickyFooter &&\n                        isStickyRightColumn &&\n                        'table-footer-cell-sticky-right-column',\n                    getHorizontalAlignClassName(resolvedHorizontalAlign),\n                    getVerticalAlignClassName(resolvedVerticalAlign),\n                    renderColumn?.hideOnMobile && 'table-hide-mobile',\n                    resolvedCellClassName,\n                    className\n                )}\n                data-column={renderColumn?.columnKey ?? columnKey ?? baseColumnStart}\n                role='cell'\n                aria-colindex={resolveAriaColIndex(baseColumnStart, interactionContext.showSelectionColumn)}\n                aria-colspan={resolveAriaSpan(colSpan)}\n                onClick={preventRowClick ? handleCellInteraction : undefined}\n                onKeyDown={preventRowClick ? handleCellInteraction : undefined}\n                style={{ gridColumn: `${resolvedColumnStart} / span ${colSpan}`, gridRow: '1 / span 1' }}\n            >\n                <div className={classNames('table-cell-content', getCellContentOverflowClassName(overflow))}>\n                    {value ?? children ?? ''}\n                </div>\n            </div>\n        );\n    }\n\n    return (\n        <div\n            {...remainingProps}\n            className={classNames(\n                'table-cell',\n                renderConfigContext.cardClasses.cellClassName,\n                getHorizontalAlignClassName(resolvedHorizontalAlign),\n                getVerticalAlignClassName(resolvedVerticalAlign),\n                renderColumn?.hideOnMobile && 'table-hide-mobile',\n                resolvedCellClassName,\n                className\n            )}\n            data-column={renderColumn?.columnKey ?? columnKey ?? baseColumnStart}\n            role='cell'\n            aria-colindex={resolveAriaColIndex(baseColumnStart, interactionContext.showSelectionColumn)}\n            onClick={preventRowClick ? handleCellInteraction : undefined}\n            onKeyDown={preventRowClick ? handleCellInteraction : undefined}\n        >\n            {mobileLabel && (\n                <div className={classNames('table-cell-label', renderConfigContext.cardClasses.labelClassName)}>\n                    {mobileLabel}\n                </div>\n            )}\n            <div\n                className={classNames(\n                    'table-cell-content',\n                    renderConfigContext.cardClasses.contentClassName,\n                    getCellContentOverflowClassName(overflow)\n                )}\n            >\n                {value ?? children ?? ''}\n            </div>\n        </div>\n    );\n};\n\nexport default TableColumn;\n"],"names":["TableColumn","props","children","className","colSpan","columnKey","horizontalAlign","overflow","preventRowClick","value","verticalAlign","remainingProps","renderConfigContext","useOptionalTableRenderConfigContext","renderContext","useOptionalTableRenderContext","interactionContext","useOptionalTableInteractionContext","layoutContext","useOptionalTableLayoutContext","section","useOptionalTableSection","rowContext","useTableRowContext","isBodySection","isFooterSection","explicitColumnIndex","columnIndex","renderColumn","baseColumnStart","resolvedColumnStart","resolvedHorizontalAlign","resolvedVerticalAlign","resolvedCellClassName","stickyLeftColumns","stickyRightColumns","isStickyLeftColumn","isStickyRightColumn","mobileLabel","getNodeTextContent","handleCellInteraction","event","jsx","classNames","getHorizontalAlignClassName","getVerticalAlignClassName","resolveAriaColIndex","resolveAriaSpan","getCellContentOverflowClassName","jsxs"],"mappings":"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"}

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;
     /**