@rio-cloud/rio-uikit 2.2.1 → 2.3.0-beta.2

package/components/table/TableBody.d.ts

@@ -0,0 +1,70 @@
+import { ReactNode } from 'react';
+import { TableHtmlAttributes } from './Table.types';
+export type TableBodyProps = TableHtmlAttributes & {
+    /**
+     * Body sections are expected to render row components such as `TableRow`,
+     * `TableExpandedRow`, `TableExpandedContentRow`, `TableGroupRow`,
+     * `TableGroupFooterRow`, or `TableSpacerRow`.
+     *
+     * Rows may be wrapped by custom React components, but direct `TableColumn`
+     * children of `TableBody` are not supported.
+     */
+    children?: ReactNode;
+    /**
+     * Optional max height of rendered table body.
+     * Enables vertical scrolling inside the body.
+     */
+    maxHeight?: number | string;
+    /**
+     * Called when the scrollable table body reaches the bottom threshold.
+     *
+     * This is useful for progressive loading patterns such as appending the next
+     * chunk of rows when the user scrolls to the end of the body.
+     */
+    onScrollBottom?: () => void;
+    /**
+     * Distance in pixels from the bottom at which `onScrollBottom` should fire.
+     *
+     * Set this to `0` to only trigger when the body is scrolled fully to the end.
+     *
+     * @default 0
+     */
+    scrollBottomOffset?: number;
+};
+export type TableBodyHandle = {
+    scrollToTop: () => void;
+    scrollTo: (options: ScrollToOptions) => void;
+    getScrollElement: () => HTMLDivElement | null;
+};
+declare const _default: import('react').ForwardRefExoticComponent<TableHtmlAttributes & {
+    /**
+     * Body sections are expected to render row components such as `TableRow`,
+     * `TableExpandedRow`, `TableExpandedContentRow`, `TableGroupRow`,
+     * `TableGroupFooterRow`, or `TableSpacerRow`.
+     *
+     * Rows may be wrapped by custom React components, but direct `TableColumn`
+     * children of `TableBody` are not supported.
+     */
+    children?: ReactNode;
+    /**
+     * Optional max height of rendered table body.
+     * Enables vertical scrolling inside the body.
+     */
+    maxHeight?: number | string;
+    /**
+     * Called when the scrollable table body reaches the bottom threshold.
+     *
+     * This is useful for progressive loading patterns such as appending the next
+     * chunk of rows when the user scrolls to the end of the body.
+     */
+    onScrollBottom?: () => void;
+    /**
+     * Distance in pixels from the bottom at which `onScrollBottom` should fire.
+     *
+     * Set this to `0` to only trigger when the body is scrolled fully to the end.
+     *
+     * @default 0
+     */
+    scrollBottomOffset?: number;
+} & import('react').RefAttributes<TableBodyHandle>>;
+export default _default;

package/components/table/TableBody.js

@@ -0,0 +1,135 @@
+import { jsx as l, jsxs as j } from "react/jsx-runtime";
+import { forwardRef as D, Children as L, useRef as h, useState as q, useCallback as z, useImperativeHandle as $ } from "react";
+import G from "../smoothScrollbars/SmoothScrollbars.js";
+import J from "../virtualList/useVirtualListResizeObserver.js";
+import { toCssSize as K } from "./layout/columnSizing.js";
+import Q from "./layout/useTableBodyScrollBottom.js";
+import U from "./layout/useTableVirtualization.js";
+import { shouldAnimateBodyRows as W } from "./runtime/shouldAnimateBodyRows.js";
+import H from "./render/body/TableBodyContent.js";
+import { useOptionalTableInteractionContext as X } from "./context/TableInteractionContext.js";
+import { useOptionalTableLayoutContext as Y } from "./context/TableLayoutContext.js";
+import { useOptionalTableRenderConfigContext as Z } from "./context/TableRenderConfigContext.js";
+import { TableSectionContext as _, TableBodyContext as oo } from "./context/TableStructureContext.js";
+import { useOptionalTableRenderContext as eo, TableRenderContext as to } from "./context/TableRenderContext.js";
+const ro = (s) => {
+  if (!s)
+    return;
+  const i = Number.parseFloat(s);
+  return Number.isNaN(i) ? void 0 : i;
+}, no = (s, i) => {
+  const { children: b, maxHeight: O, onScrollBottom: d, scrollBottomOffset: P = 0, ...w } = s, t = Z(), o = eo(), R = X(), f = Y(), x = !!o && o.columns.length > 0, C = L.toArray(b).length > 0, c = h(0), m = h(null), y = h(null), [a, V] = q(null);
+  c.current = 0;
+  const r = K(O), k = ro(r), g = x && t?.virtualizedRows === !0 && !!r, E = (o?.bodyRows.length ?? 0) > 0, n = z(
+    () => a?.view ?? y.current?.view ?? null,
+    [a?.view]
+  ), I = z((e) => {
+    y.current = e, V(
+      (A) => A?.view === e?.view ? A : e
+    );
+  }, []);
+  $(
+    i,
+    () => ({
+      scrollToTop: () => {
+        n()?.scrollTo({ top: 0 }), requestAnimationFrame(() => {
+          n()?.scrollTo({ top: 0 });
+        });
+      },
+      scrollTo: (e) => {
+        n()?.scrollTo(e);
+      },
+      getScrollElement: n
+    }),
+    [n]
+  );
+  const { isVirtualized: u, measureRow: N, paddingBottom: v, paddingTop: T, virtualRows: p } = U({
+    enabled: g && E,
+    overscan: t?.virtualizationOverscan ?? 0,
+    rows: o?.bodyRows ?? [],
+    scrollContainer: a,
+    viewportHeightFallback: k
+  });
+  J(m, N, [u, p]);
+  const { handleScrollBottom: F } = Q({
+    enabled: !!r && !!d,
+    itemCount: o?.bodyRows.length ?? 0,
+    onScrollBottom: d,
+    scrollBottomOffset: P,
+    scrollElement: a?.view
+  });
+  if (!t || !o || !R || !f || !x)
+    return null;
+  const B = o.columns.length + (R.showSelectionColumn ? 1 : 0), S = W({
+    rowAnimationProps: t.rowAnimationProps,
+    expandedRowAnimation: t.expandedRowAnimation,
+    hasExpandableRows: o.hasExpandableRows,
+    hasExpandedRows: o.bodyRows.some(
+      (e) => e.kind === "expanded" || e.kind === "expanded-full-width"
+    )
+  });
+  o.renderDraft.bodyMaxHeight = r;
+  const M = /* @__PURE__ */ l(to.Provider, { value: { ...o, isRegisteringBodyRows: !0 }, children: b });
+  return /* @__PURE__ */ l(_.Provider, { value: "body", children: /* @__PURE__ */ j(
+    oo.Provider,
+    {
+      value: {
+        nextRowIndex: () => {
+          const e = c.current;
+          return c.current += 1, e;
+        }
+      },
+      children: [
+        M,
+        r ? /* @__PURE__ */ l(
+          G,
+          {
+            className: "table-body-scroll-wrapper",
+            autoHeight: !0,
+            autoHeightMax: r,
+            onScroll: (e) => {
+              f.handleBodyScroll?.(e), F(e?.currentTarget);
+            },
+            role: "presentation",
+            ref: g || d ? I : void 0,
+            children: /* @__PURE__ */ l(
+              H,
+              {
+                columnCount: B,
+                hasDeclaredChildren: C,
+                htmlAttributes: w,
+                shouldAnimateBodyRows: S,
+                isVirtualized: u,
+                itemsRef: m,
+                paddingBottom: v,
+                paddingTop: T,
+                renderConfigContext: t,
+                renderContext: o,
+                virtualRows: p
+              }
+            )
+          }
+        ) : /* @__PURE__ */ l(
+          H,
+          {
+            columnCount: B,
+            hasDeclaredChildren: C,
+            htmlAttributes: w,
+            shouldAnimateBodyRows: S,
+            isVirtualized: u,
+            itemsRef: m,
+            paddingBottom: v,
+            paddingTop: T,
+            renderConfigContext: t,
+            renderContext: o,
+            virtualRows: p
+          }
+        )
+      ]
+    }
+  ) });
+}, Co = D(no);
+export {
+  Co as default
+};
+//# sourceMappingURL=TableBody.js.map

package/components/table/TableBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBody.js","sources":["../../../src/components/table/TableBody.tsx"],"sourcesContent":["import {\n    Children,\n    forwardRef,\n    useCallback,\n    useImperativeHandle,\n    useRef,\n    useState,\n    type ForwardedRef,\n    type ReactNode,\n} from 'react';\n\nimport SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';\nimport useVirtualListResizeObserver from '../virtualList/useVirtualListResizeObserver';\nimport type { TableHtmlAttributes } from './Table.types';\nimport { toCssSize } from './layout/columnSizing';\nimport useTableBodyScrollBottom from './layout/useTableBodyScrollBottom';\nimport useTableVirtualization from './layout/useTableVirtualization';\nimport { shouldAnimateBodyRows as resolveShouldAnimateBodyRows } from './runtime/shouldAnimateBodyRows';\nimport TableBodyContent from './render/body/TableBodyContent';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useOptionalTableLayoutContext } from './context/TableLayoutContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\nimport { TableBodyContext, TableSectionContext } from './context/TableStructureContext';\nimport { TableRenderContext, useOptionalTableRenderContext } from './context/TableRenderContext';\n\ntype TableVirtualScrollContainer = {\n    view?: HTMLDivElement | null;\n};\n\nconst parsePixelSize = (value?: string): number | undefined => {\n    if (!value) {\n        return;\n    }\n\n    const parsedValue = Number.parseFloat(value);\n    return Number.isNaN(parsedValue) ? undefined : parsedValue;\n};\n\nexport type TableBodyProps = TableHtmlAttributes & {\n    /**\n     * Body sections are expected to render row components such as `TableRow`,\n     * `TableExpandedRow`, `TableExpandedContentRow`, `TableGroupRow`,\n     * `TableGroupFooterRow`, or `TableSpacerRow`.\n     *\n     * Rows may be wrapped by custom React components, but direct `TableColumn`\n     * children of `TableBody` are not supported.\n     */\n    children?: ReactNode;\n\n    /**\n     * Optional max height of rendered table body.\n     * Enables vertical scrolling inside the body.\n     */\n    maxHeight?: number | string;\n\n    /**\n     * Called when the scrollable table body reaches the bottom threshold.\n     *\n     * This is useful for progressive loading patterns such as appending the next\n     * chunk of rows when the user scrolls to the end of the body.\n     */\n    onScrollBottom?: () => void;\n\n    /**\n     * Distance in pixels from the bottom at which `onScrollBottom` should fire.\n     *\n     * Set this to `0` to only trigger when the body is scrolled fully to the end.\n     *\n     * @default 0\n     */\n    scrollBottomOffset?: number;\n};\n\nexport type TableBodyHandle = {\n    scrollToTop: () => void;\n    scrollTo: (options: ScrollToOptions) => void;\n    getScrollElement: () => HTMLDivElement | null;\n};\n\nconst TableBody = (props: TableBodyProps, ref: ForwardedRef<TableBodyHandle>) => {\n    const { children, maxHeight, onScrollBottom, scrollBottomOffset = 0, ...remainingProps } = props;\n\n    const renderConfigContext = useOptionalTableRenderConfigContext();\n    const renderContext = useOptionalTableRenderContext();\n    const interactionContext = useOptionalTableInteractionContext();\n    const layoutContext = useOptionalTableLayoutContext();\n\n    const hasRenderColumns = !!renderContext && renderContext.columns.length > 0;\n\n    const hasDeclaredChildren = Children.toArray(children).length > 0;\n\n    const rowIndexRef = useRef(0);\n    const itemsRef = useRef<HTMLDivElement>(null);\n    const scrollbarsRef = useRef<TableVirtualScrollContainer | null>(null);\n\n    const [scrollContainer, setScrollContainer] = useState<TableVirtualScrollContainer | null>(null);\n    rowIndexRef.current = 0;\n\n    const resolvedMaxHeight = toCssSize(maxHeight);\n\n    const virtualViewportHeightFallback = parsePixelSize(resolvedMaxHeight);\n\n    const shouldVirtualize = hasRenderColumns && renderConfigContext?.virtualizedRows === true && !!resolvedMaxHeight;\n    const hasRenderBodyRows = (renderContext?.bodyRows.length ?? 0) > 0;\n\n    const getScrollElement = useCallback(\n        () => scrollContainer?.view ?? scrollbarsRef.current?.view ?? null,\n        [scrollContainer?.view]\n    );\n\n    const handleScrollbarsRef = useCallback((instance: TableVirtualScrollContainer | null) => {\n        scrollbarsRef.current = instance;\n        setScrollContainer(previousContainer =>\n            previousContainer?.view === instance?.view ? previousContainer : instance\n        );\n    }, []);\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            scrollToTop: () => {\n                getScrollElement()?.scrollTo({ top: 0 });\n\n                requestAnimationFrame(() => {\n                    getScrollElement()?.scrollTo({ top: 0 });\n                });\n            },\n            scrollTo: options => {\n                getScrollElement()?.scrollTo(options);\n            },\n            getScrollElement,\n        }),\n        [getScrollElement]\n    );\n\n    const { isVirtualized, measureRow, paddingBottom, paddingTop, virtualRows } = useTableVirtualization({\n        enabled: shouldVirtualize && hasRenderBodyRows,\n        overscan: renderConfigContext?.virtualizationOverscan ?? 0,\n        rows: renderContext?.bodyRows ?? [],\n        scrollContainer,\n        viewportHeightFallback: virtualViewportHeightFallback,\n    });\n\n    useVirtualListResizeObserver(itemsRef, measureRow, [isVirtualized, virtualRows]);\n\n    const { handleScrollBottom } = useTableBodyScrollBottom({\n        enabled: !!resolvedMaxHeight && !!onScrollBottom,\n        itemCount: renderContext?.bodyRows.length ?? 0,\n        onScrollBottom,\n        scrollBottomOffset,\n        scrollElement: scrollContainer?.view,\n    });\n\n    if (!renderConfigContext || !renderContext || !interactionContext || !layoutContext || !hasRenderColumns) {\n        return null;\n    }\n\n    const columnCount = renderContext.columns.length + (interactionContext.showSelectionColumn ? 1 : 0);\n\n    const shouldAnimateBodyRows = resolveShouldAnimateBodyRows({\n        rowAnimationProps: renderConfigContext.rowAnimationProps,\n        expandedRowAnimation: renderConfigContext.expandedRowAnimation,\n        hasExpandableRows: renderContext.hasExpandableRows,\n        hasExpandedRows: renderContext.bodyRows.some(\n            row => row.kind === 'expanded' || row.kind === 'expanded-full-width'\n        ),\n    });\n\n    renderContext.renderDraft.bodyMaxHeight = resolvedMaxHeight;\n\n    // First pass: execute the body children in \"register only\" mode so wrapped rows can\n    // contribute normalized row metadata without rendering their DOM twice.\n    const renderCollectionContent = (\n        <TableRenderContext.Provider value={{ ...renderContext, isRegisteringBodyRows: true }}>\n            {children}\n        </TableRenderContext.Provider>\n    );\n\n    return (\n        <TableSectionContext.Provider value='body'>\n            <TableBodyContext.Provider\n                value={{\n                    nextRowIndex: () => {\n                        const nextRowIndex = rowIndexRef.current;\n                        rowIndexRef.current += 1;\n                        return nextRowIndex;\n                    },\n                }}\n            >\n                {renderCollectionContent}\n                {/* Second pass: render the collected row draft state in one controlled place. */}\n                {resolvedMaxHeight ? (\n                    <SmoothScrollbars\n                        className='table-body-scroll-wrapper'\n                        autoHeight\n                        autoHeightMax={resolvedMaxHeight}\n                        onScroll={event => {\n                            layoutContext.handleBodyScroll?.(event);\n                            handleScrollBottom(event?.currentTarget as HTMLDivElement | null);\n                        }}\n                        role='presentation'\n                        ref={shouldVirtualize || !!onScrollBottom ? handleScrollbarsRef : undefined}\n                    >\n                        <TableBodyContent\n                            columnCount={columnCount}\n                            hasDeclaredChildren={hasDeclaredChildren}\n                            htmlAttributes={remainingProps}\n                            shouldAnimateBodyRows={shouldAnimateBodyRows}\n                            isVirtualized={isVirtualized}\n                            itemsRef={itemsRef}\n                            paddingBottom={paddingBottom}\n                            paddingTop={paddingTop}\n                            renderConfigContext={renderConfigContext}\n                            renderContext={renderContext}\n                            virtualRows={virtualRows}\n                        />\n                    </SmoothScrollbars>\n                ) : (\n                    <TableBodyContent\n                        columnCount={columnCount}\n                        hasDeclaredChildren={hasDeclaredChildren}\n                        htmlAttributes={remainingProps}\n                        shouldAnimateBodyRows={shouldAnimateBodyRows}\n                        isVirtualized={isVirtualized}\n                        itemsRef={itemsRef}\n                        paddingBottom={paddingBottom}\n                        paddingTop={paddingTop}\n                        renderConfigContext={renderConfigContext}\n                        renderContext={renderContext}\n                        virtualRows={virtualRows}\n                    />\n                )}\n            </TableBodyContext.Provider>\n        </TableSectionContext.Provider>\n    );\n};\n\nexport default forwardRef(TableBody);\n"],"names":["parsePixelSize","value","parsedValue","TableBody","props","ref","children","maxHeight","onScrollBottom","scrollBottomOffset","remainingProps","renderConfigContext","useOptionalTableRenderConfigContext","renderContext","useOptionalTableRenderContext","interactionContext","useOptionalTableInteractionContext","layoutContext","useOptionalTableLayoutContext","hasRenderColumns","hasDeclaredChildren","Children","rowIndexRef","useRef","itemsRef","scrollbarsRef","scrollContainer","setScrollContainer","useState","resolvedMaxHeight","toCssSize","virtualViewportHeightFallback","shouldVirtualize","hasRenderBodyRows","getScrollElement","useCallback","handleScrollbarsRef","instance","previousContainer","useImperativeHandle","options","isVirtualized","measureRow","paddingBottom","paddingTop","virtualRows","useTableVirtualization","useVirtualListResizeObserver","handleScrollBottom","useTableBodyScrollBottom","columnCount","shouldAnimateBodyRows","resolveShouldAnimateBodyRows","row","renderCollectionContent","jsx","TableRenderContext","TableSectionContext","jsxs","TableBodyContext","nextRowIndex","SmoothScrollbars","event","TableBodyContent","TableBodyComponent","forwardRef"],"mappings":"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"}

package/components/table/TableCardsSorting.js

@@ -1,46 +1,39 @@
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import { useState as c } from "react";
-import { noop as f } from "es-toolkit/compat";
-import y from "../../utils/classNames.js";
-import S from "../selects/Select.js";
-import i from "../button/ToggleButton.js";
-const T = (m) => {
-  const {
-    sortName: d,
-    sortOrder: p = "asc",
-    selectOptions: s,
-    onSortChange: a = f,
-    className: e
-  } = m, [g, N] = c(d), [r, b] = c(p), l = (o) => {
-    b(o), a(g, o);
-  }, h = (o) => {
-    N(o), a(o, r);
-  }, u = y("table-toolbar-cards-sorting", "btn-toolbar", e && e);
-  return /* @__PURE__ */ n("div", { className: u, children: [
-    /* @__PURE__ */ n("div", { className: "btn-group margin-left-0", children: [
-      /* @__PURE__ */ t(
-        i,
+import { jsxs as l, jsx as s } from "react/jsx-runtime";
+import { noop as g } from "es-toolkit/compat";
+import b from "../../utils/classNames.js";
+import h from "../selects/Select.js";
+import c from "../button/ToggleButton.js";
+const v = (i) => {
+  const { sortName: m, sortOrder: t = "asc", selectOptions: a, onSortChange: r = g, className: e } = i, n = (o) => {
+    r(m, o);
+  }, p = (o) => {
+    r(o, t);
+  }, d = b("table-toolbar-cards-sorting", "btn-toolbar", e && e);
+  return /* @__PURE__ */ l("div", { className: d, children: [
+    /* @__PURE__ */ l("div", { className: "btn-group margin-left-0", children: [
+      /* @__PURE__ */ s(
+        c,
         {
           className: "btn-icon-only",
-          active: r === "asc",
-          onClick: () => l("asc"),
-          children: /* @__PURE__ */ t("span", { className: "rioglyph rioglyph-sort-by-attributes-alt" })
+          active: t === "asc",
+          onClick: () => n("asc"),
+          children: /* @__PURE__ */ s("span", { className: "rioglyph rioglyph-sort-by-attributes-alt" })
         }
       ),
-      /* @__PURE__ */ t(
-        i,
+      /* @__PURE__ */ s(
+        c,
         {
           className: "btn-icon-only",
-          active: r === "desc",
-          onClick: () => l("desc"),
-          children: /* @__PURE__ */ t("span", { className: "rioglyph rioglyph-sort-by-attributes" })
+          active: t === "desc",
+          onClick: () => n("desc"),
+          children: /* @__PURE__ */ s("span", { className: "rioglyph rioglyph-sort-by-attributes" })
         }
       )
     ] }),
-    s.length && /* @__PURE__ */ t("div", { className: "btn-group", children: /* @__PURE__ */ t(S, { options: s, onChange: (o) => o && h(o.id) }) })
+    a.length && /* @__PURE__ */ s("div", { className: "btn-group", children: /* @__PURE__ */ s(h, { options: a, onChange: (o) => o && p(o.id) }) })
   ] });
 };
 export {
-  T as default
+  v as default
 };
 //# sourceMappingURL=TableCardsSorting.js.map

package/components/table/TableCardsSorting.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCardsSorting.js","sources":["../../../src/components/table/TableCardsSorting.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport Select from '../selects/Select';\nimport ToggleButton from '../button/ToggleButton';\n\ntype TableCardsSortingOption = {\n    /**\n     * ID to use for the select option.\n     */\n    id: string;\n\n    /**\n     * Translated column label to be shown in the select.\n     */\n    label: string | React.ReactNode;\n\n    /**\n     * Defines the column which is currently sorted by.\n     */\n    selected?: boolean;\n\n    /**\n     * Defines if the column can be sorted.\n     *\n     * Hence, it will be disabled in the select.\n     */\n    disabled?: boolean;\n};\n\nexport type TableCardsSortingProps = {\n    /**\n     * \"Name\", \"Key\", or \"Id\" of the current sorted column.\n     */\n    sortName: string;\n\n    /**\n     * Defines the sort direction.\n     *\n     * @default 'asc'\n     */\n    sortOrder: 'asc' | 'desc';\n\n    /**\n     * List of objects for the column name select component.\n     */\n    selectOptions: TableCardsSortingOption[];\n\n    /**\n     * Function that is called when the sort key or direction changes.\n     *\n     * @default noop\n     */\n    onSortChange?: (name: string, order: 'asc' | 'desc') => void;\n\n    /**\n     * Optional class names for the wrapper element.\n     */\n    className?: string;\n};\n\nconst TableCardsSorting = (props: TableCardsSortingProps) => {\n    const {\n        sortName: controlledSortName,\n        sortOrder: controlledSortOrder = 'asc',\n        selectOptions,\n        onSortChange = noop,\n        className,\n    } = props;\n\n    const [sortName, setSortName] = useState(controlledSortName);\n    const [sortOrder, setSortOrder] = useState(controlledSortOrder);\n\n    const updateSortOrder = (newSortOrder: 'asc' | 'desc') => {\n        setSortOrder(newSortOrder);\n        onSortChange(sortName, newSortOrder);\n    };\n\n    const updateSortName = (newSortName: string) => {\n        setSortName(newSortName);\n        onSortChange(newSortName, sortOrder);\n    };\n\n    const wrapperClassNames = classNames('table-toolbar-cards-sorting', 'btn-toolbar', className && className);\n\n    return (\n        <div className={wrapperClassNames}>\n            <div className='btn-group margin-left-0'>\n                <ToggleButton\n                    className='btn-icon-only'\n                    active={sortOrder === 'asc'}\n                    onClick={() => updateSortOrder('asc')}\n                >\n                    <span className='rioglyph rioglyph-sort-by-attributes-alt' />\n                </ToggleButton>\n\n                <ToggleButton\n                    className='btn-icon-only'\n                    active={sortOrder === 'desc'}\n                    onClick={() => updateSortOrder('desc')}\n                >\n                    <span className='rioglyph rioglyph-sort-by-attributes' />\n                </ToggleButton>\n            </div>\n\n            {selectOptions.length && (\n                <div className='btn-group'>\n                    <Select options={selectOptions} onChange={item => item && updateSortName(item.id)} />\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default TableCardsSorting;\n"],"names":["TableCardsSorting","props","controlledSortName","controlledSortOrder","selectOptions","onSortChange","noop","className","sortName","setSortName","useState","sortOrder","setSortOrder","updateSortOrder","newSortOrder","updateSortName","newSortName","wrapperClassNames","classNames","jsxs","jsx","ToggleButton","Select","item"],"mappings":";;;;;;AA8DA,MAAMA,IAAoB,CAACC,MAAkC;AACzD,QAAM;AAAA,IACF,UAAUC;AAAA,IACV,WAAWC,IAAsB;AAAA,IACjC,eAAAC;AAAA,IACA,cAAAC,IAAeC;AAAA,IACf,WAAAC;AAAA,EAAA,IACAN,GAEE,CAACO,GAAUC,CAAW,IAAIC,EAASR,CAAkB,GACrD,CAACS,GAAWC,CAAY,IAAIF,EAASP,CAAmB,GAExDU,IAAkB,CAACC,MAAiC;AACtD,IAAAF,EAAaE,CAAY,GACzBT,EAAaG,GAAUM,CAAY;AAAA,EACvC,GAEMC,IAAiB,CAACC,MAAwB;AAC5C,IAAAP,EAAYO,CAAW,GACvBX,EAAaW,GAAaL,CAAS;AAAA,EACvC,GAEMM,IAAoBC,EAAW,+BAA+B,eAAeX,KAAaA,CAAS;AAEzG,SACI,gBAAAY,EAAC,OAAA,EAAI,WAAWF,GACZ,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,2BACX,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,QAAQV,MAAc;AAAA,UACtB,SAAS,MAAME,EAAgB,KAAK;AAAA,UAEpC,UAAA,gBAAAO,EAAC,QAAA,EAAK,WAAU,2CAAA,CAA2C;AAAA,QAAA;AAAA,MAAA;AAAA,MAG/D,gBAAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,QAAQV,MAAc;AAAA,UACtB,SAAS,MAAME,EAAgB,MAAM;AAAA,UAErC,UAAA,gBAAAO,EAAC,QAAA,EAAK,WAAU,uCAAA,CAAuC;AAAA,QAAA;AAAA,MAAA;AAAA,IAC3D,GACJ;AAAA,IAEChB,EAAc,UACX,gBAAAgB,EAAC,OAAA,EAAI,WAAU,aACX,UAAA,gBAAAA,EAACE,GAAA,EAAO,SAASlB,GAAe,UAAU,CAAAmB,MAAQA,KAAQR,EAAeQ,EAAK,EAAE,GAAG,EAAA,CACvF;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"TableCardsSorting.js","sources":["../../../src/components/table/TableCardsSorting.tsx"],"sourcesContent":["import { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport Select from '../selects/Select';\nimport ToggleButton from '../button/ToggleButton';\n\ntype TableCardsSortingOption = {\n    /**\n     * ID to use for the select option.\n     */\n    id: string;\n\n    /**\n     * Translated column label to be shown in the select.\n     */\n    label: string | React.ReactNode;\n\n    /**\n     * Defines the column which is currently sorted by.\n     */\n    selected?: boolean;\n\n    /**\n     * Defines if the column can be sorted.\n     *\n     * Hence, it will be disabled in the select.\n     */\n    disabled?: boolean;\n};\n\nexport type TableCardsSortingProps = {\n    /**\n     * \"Name\", \"Key\", or \"Id\" of the current sorted column.\n     */\n    sortName: string;\n\n    /**\n     * Defines the sort direction.\n     *\n     * @default 'asc'\n     */\n    sortOrder: 'asc' | 'desc';\n\n    /**\n     * List of objects for the column name select component.\n     */\n    selectOptions: TableCardsSortingOption[];\n\n    /**\n     * Function that is called when the sort key or direction changes.\n     *\n     * @default noop\n     */\n    onSortChange?: (name: string, order: 'asc' | 'desc') => void;\n\n    /**\n     * Optional class names for the wrapper element.\n     */\n    className?: string;\n};\n\nconst TableCardsSorting = (props: TableCardsSortingProps) => {\n    const { sortName, sortOrder = 'asc', selectOptions, onSortChange = noop, className } = props;\n\n    const updateSortOrder = (newSortOrder: 'asc' | 'desc') => {\n        onSortChange(sortName, newSortOrder);\n    };\n\n    const updateSortName = (newSortName: string) => {\n        onSortChange(newSortName, sortOrder);\n    };\n\n    const wrapperClassNames = classNames('table-toolbar-cards-sorting', 'btn-toolbar', className && className);\n\n    return (\n        <div className={wrapperClassNames}>\n            <div className='btn-group margin-left-0'>\n                <ToggleButton\n                    className='btn-icon-only'\n                    active={sortOrder === 'asc'}\n                    onClick={() => updateSortOrder('asc')}\n                >\n                    <span className='rioglyph rioglyph-sort-by-attributes-alt' />\n                </ToggleButton>\n\n                <ToggleButton\n                    className='btn-icon-only'\n                    active={sortOrder === 'desc'}\n                    onClick={() => updateSortOrder('desc')}\n                >\n                    <span className='rioglyph rioglyph-sort-by-attributes' />\n                </ToggleButton>\n            </div>\n\n            {selectOptions.length && (\n                <div className='btn-group'>\n                    <Select options={selectOptions} onChange={item => item && updateSortName(item.id)} />\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default TableCardsSorting;\n"],"names":["TableCardsSorting","props","sortName","sortOrder","selectOptions","onSortChange","noop","className","updateSortOrder","newSortOrder","updateSortName","newSortName","wrapperClassNames","classNames","jsxs","jsx","ToggleButton","Select","item"],"mappings":";;;;;AA6DA,MAAMA,IAAoB,CAACC,MAAkC;AACzD,QAAM,EAAE,UAAAC,GAAU,WAAAC,IAAY,OAAO,eAAAC,GAAe,cAAAC,IAAeC,GAAM,WAAAC,MAAcN,GAEjFO,IAAkB,CAACC,MAAiC;AACtD,IAAAJ,EAAaH,GAAUO,CAAY;AAAA,EACvC,GAEMC,IAAiB,CAACC,MAAwB;AAC5C,IAAAN,EAAaM,GAAaR,CAAS;AAAA,EACvC,GAEMS,IAAoBC,EAAW,+BAA+B,eAAeN,KAAaA,CAAS;AAEzG,SACI,gBAAAO,EAAC,OAAA,EAAI,WAAWF,GACZ,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,2BACX,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,QAAQb,MAAc;AAAA,UACtB,SAAS,MAAMK,EAAgB,KAAK;AAAA,UAEpC,UAAA,gBAAAO,EAAC,QAAA,EAAK,WAAU,2CAAA,CAA2C;AAAA,QAAA;AAAA,MAAA;AAAA,MAG/D,gBAAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,QAAQb,MAAc;AAAA,UACtB,SAAS,MAAMK,EAAgB,MAAM;AAAA,UAErC,UAAA,gBAAAO,EAAC,QAAA,EAAK,WAAU,uCAAA,CAAuC;AAAA,QAAA;AAAA,MAAA;AAAA,IAC3D,GACJ;AAAA,IAECX,EAAc,UACX,gBAAAW,EAAC,OAAA,EAAI,WAAU,aACX,UAAA,gBAAAA,EAACE,GAAA,EAAO,SAASb,GAAe,UAAU,CAAAc,MAAQA,KAAQR,EAAeQ,EAAK,EAAE,GAAG,EAAA,CACvF;AAAA,EAAA,GAER;AAER;"}

package/components/table/TableColumn.d.ts

@@ -0,0 +1,55 @@
+import { ReactNode } from 'react';
+import { TableCellOverflow, TableHorizontalAlign, TableHtmlAttributes, TableVerticalAlign } from './Table.types';
+export type TableColumnProps = TableHtmlAttributes & {
+    /**
+     * `TableColumn` may be rendered directly inside `TableFooter`.
+     *
+     * In `TableBody`, columns must be rendered inside a row component such as
+     * `TableRow` or `TableExpandedRow`. Direct `TableColumn` children of
+     * `TableBody` are ignored.
+     */
+    children?: ReactNode;
+    /**
+     * Optional explicit column key.
+     * If omitted, the cell is matched by its position inside `<TableRow>`.
+     */
+    columnKey?: string;
+    /**
+     * Optional explicit value.
+     */
+    value?: ReactNode;
+    /**
+     * Additional classes for this cell only.
+     */
+    className?: string;
+    /**
+     * Horizontal alignment override for this cell.
+     */
+    horizontalAlign?: TableHorizontalAlign;
+    /**
+     * Vertical alignment override for this cell.
+     */
+    verticalAlign?: TableVerticalAlign;
+    /**
+     * Overflow behavior for the cell content wrapper.
+     *
+     * @default 'hidden'
+     */
+    overflow?: TableCellOverflow;
+    /**
+     * Number of columns this cell should span.
+     *
+     * Currently used by header and footer-style declarative table sections.
+     */
+    colSpan?: number;
+    /**
+     * Prevents clicks and keyboard interactions inside this cell from triggering the parent row click handler.
+     *
+     * Useful for interactive cell content such as dropdowns, inputs, or buttons.
+     *
+     * @default false
+     */
+    preventRowClick?: boolean;
+};
+declare const TableColumn: (props: TableColumnProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TableColumn;

package/components/table/TableColumn.js

@@ -0,0 +1,115 @@
+import { jsx as u, jsxs as F } from "react/jsx-runtime";
+import a from "../../utils/classNames.js";
+import { getVerticalAlignClassName as K, getHorizontalAlignClassName as I } from "./shared/getAlignClassName.js";
+import L from "./shared/getCellContentOverflowClassName.js";
+import { resolveAriaSpan as V, resolveAriaColIndex as R } from "./shared/resolveTableAria.js";
+import { useOptionalTableInteractionContext as j } from "./context/TableInteractionContext.js";
+import { useOptionalTableLayoutContext as H } from "./context/TableLayoutContext.js";
+import { useOptionalTableRenderConfigContext as P } from "./context/TableRenderConfigContext.js";
+import { useOptionalTableSection as $, useTableRowContext as q } from "./context/TableStructureContext.js";
+import { useOptionalTableRenderContext as E } from "./context/TableRenderContext.js";
+const oe = (T) => {
+  const {
+    children: h,
+    className: g,
+    colSpan: b = 1,
+    columnKey: o,
+    horizontalAlign: D,
+    overflow: p = "hidden",
+    preventRowClick: s = !1,
+    value: x,
+    verticalAlign: M,
+    ...v
+  } = T, n = P(), t = E(), r = j(), f = H(), y = $(), i = q(), c = y === "body", m = y === "footer";
+  if (!t || !n || !r || !f || t.columns.length === 0 || !c && !m || c && !i)
+    return null;
+  const N = o !== void 0 ? t.columnIndexByKey.get(o) : void 0, d = i?.nextColumnIndex(N, b) ?? N ?? -1;
+  if (d < 0)
+    return null;
+  const e = t.columns[d], l = d + 1, W = l + (r.showSelectionColumn ? 1 : 0), w = D ?? e?.horizontalAlign, z = M ?? e?.verticalAlign, A = c && i?.rowData && n.cellClassName?.(
+    i.rowData,
+    t.columnDefinitionsByKey.get(e?.columnKey ?? o ?? "") ?? {
+      key: e?.columnKey ?? o ?? String(l),
+      label: e?.label ?? "",
+      icon: e?.icon,
+      filter: e?.filter,
+      hideLabel: e?.hideLabel,
+      width: e?.width,
+      minResizeWidth: e?.minResizeWidth,
+      maxResizeWidth: e?.maxResizeWidth,
+      draggable: e?.draggable,
+      resizeable: e?.resizeable,
+      horizontalAlign: e?.horizontalAlign,
+      className: void 0,
+      headerClassName: e?.headerClassName,
+      hideOnMobile: e?.hideOnMobile,
+      sortable: e?.sortable
+    },
+    i.rowIndex,
+    d
+  ), S = f.stickyLeftColumnCount ?? 0, k = S > 0 && l <= S, O = e?.mobileLabel ?? (typeof e?.label == "string" ? e.label : ""), C = (B) => {
+    B.stopPropagation();
+  };
+  return m && (t.renderDraft.hasFooterCells = !0), n.isTableView ? /* @__PURE__ */ u(
+    "div",
+    {
+      ...v,
+      className: a(
+        "table-cell",
+        m && "table-footer-cell",
+        c && k && "table-cell-sticky-left-column",
+        m && f.stickyFooter && k && "table-footer-cell-sticky-left-column",
+        I(w),
+        K(z),
+        e?.hideOnMobile && "table-hide-mobile",
+        A,
+        g
+      ),
+      "data-column": e?.columnKey ?? o ?? l,
+      role: "cell",
+      "aria-colindex": R(l, r.showSelectionColumn),
+      "aria-colspan": V(b),
+      onClick: s ? C : void 0,
+      onKeyDown: s ? C : void 0,
+      style: { gridColumn: `${W} / span ${b}` },
+      children: /* @__PURE__ */ u("div", { className: a("table-cell-content", L(p)), children: x ?? h ?? "" })
+    }
+  ) : /* @__PURE__ */ F(
+    "div",
+    {
+      ...v,
+      className: a(
+        "table-cell",
+        n.cardClasses.cellClassName,
+        I(w),
+        K(z),
+        e?.hideOnMobile && "table-hide-mobile",
+        A,
+        g
+      ),
+      "data-column": e?.columnKey ?? o ?? l,
+      role: "cell",
+      "aria-colindex": R(l, r.showSelectionColumn),
+      onClick: s ? C : void 0,
+      onKeyDown: s ? C : void 0,
+      children: [
+        O && /* @__PURE__ */ u("div", { className: a("table-cell-label", n.cardClasses.labelClassName), children: O }),
+        /* @__PURE__ */ u(
+          "div",
+          {
+            className: a(
+              "table-cell-content",
+              n.cardClasses.contentClassName,
+              L(p)
+            ),
+            children: x ?? h ?? ""
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  oe as default
+};
+//# sourceMappingURL=TableColumn.js.map

package/components/table/TableColumn.js.map

@@ -0,0 +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     * If omitted, the cell is matched by its position inside `<TableRow>`.\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 isStickyLeftColumn = stickyLeftColumns > 0 && baseColumnStart <= stickyLeftColumns;\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                    isFooterSection &&\n                        layoutContext.stickyFooter &&\n                        isStickyLeftColumn &&\n                        'table-footer-cell-sticky-left-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}` }}\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","isStickyLeftColumn","mobileLabel","handleCellInteraction","event","jsx","classNames","getHorizontalAlignClassName","getVerticalAlignClassName","resolveAriaColIndex","resolveAriaSpan","getCellContentOverflowClassName","jsxs"],"mappings":"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"}

package/components/table/TableExpandedContentRow.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { TableHtmlAttributes } from './Table.types';
+export type TableExpandedContentRowProps = TableHtmlAttributes & {
+    /**
+     * Parent row key used to associate this expanded content row with its parent.
+     */
+    parentKey: string | number;
+    /**
+     * The content of the full-width expanded row.
+     */
+    children?: ReactNode;
+    /**
+     * Optional class names only for this expanded content row.
+     */
+    className?: string;
+    /**
+     * Disable table hover styling for this row.
+     */
+    noHover?: boolean;
+};
+declare const TableExpandedContentRow: (props: TableExpandedContentRowProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TableExpandedContentRow;