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

package/components/table/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.js","sources":["../../../src/components/table/TableBody.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nexport type TableBodyProps = PropsWithChildren<{\n    /**\n     * Optional max height of rendered table body.\n     * Enables vertical scrolling inside the body.\n     */\n    maxHeight?: number | string;\n}>;\n\nconst TableBody = (_props: TableBodyProps) => null;\n\nexport default TableBody;\n"],"names":["TableBody","_props"],"mappings":"AAUA,MAAMA,IAAY,CAACC,MAA2B;"}
+{"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

@@ -1,6 +1,14 @@
-import { PropsWithChildren, ReactNode } from 'react';
-import { TableCellOverflow, TableHorizontalAlign, TableVerticalAlign } from './Table.types';
-export type TableColumnProps = PropsWithChildren<{
+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>`.
@@ -42,6 +50,6 @@ export type TableColumnProps = PropsWithChildren<{
      * @default false
      */
     preventRowClick?: boolean;
-}>;
-declare const TableColumn: (_props: TableColumnProps) => null;
+};
+declare const TableColumn: (props: TableColumnProps) => import("react/jsx-runtime").JSX.Element | null;
 export default TableColumn;

package/components/table/TableColumn.js

@@ -1,5 +1,115 @@
-const o = (l) => null;
+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 {
-  o as default
+  oe 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 { PropsWithChildren, ReactNode } from 'react';\n\nimport type { TableCellOverflow, TableHorizontalAlign, TableVerticalAlign } from './Table.types';\n\nexport type TableColumnProps = PropsWithChildren<{\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) => null;\n\nexport default TableColumn;\n"],"names":["TableColumn","_props"],"mappings":"AAuDA,MAAMA,IAAc,CAACC,MAA6B;"}
+{"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":";;;;;;;;;;AAyEA,MAAMA,KAAc,CAACC,MAA4B;AAC7C,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,WAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,iBAAAC,IAAkB;AAAA,IAClB,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHV,GAEEW,IAAsBC,EAAA,GACtBC,IAAgBC,EAAA,GAChBC,IAAqBC,EAAA,GACrBC,IAAgBC,EAAA,GAChBC,IAAUC,EAAA,GACVC,IAAaC,EAAA,GAEbC,IAAgBJ,MAAY,QAC5BK,IAAkBL,MAAY;AAapC,MAVI,CAACN,KACD,CAACF,KACD,CAACI,KACD,CAACE,KACDJ,EAAc,QAAQ,WAAW,KAChC,CAACU,KAAiB,CAACC,KAKpBD,KAAiB,CAACF;AAClB,WAAO;AAGX,QAAMI,IAAsBrB,MAAc,SAAYS,EAAc,iBAAiB,IAAIT,CAAS,IAAI,QAChGsB,IAAcL,GAAY,gBAAgBI,GAAqBtB,CAAO,KAAKsB,KAAuB;AAExG,MAAIC,IAAc;AACd,WAAO;AAGX,QAAMC,IAAed,EAAc,QAAQa,CAAW,GAChDE,IAAkBF,IAAc,GAChCG,IAAsBD,KAAmBb,EAAmB,sBAAsB,IAAI,IACtFe,IAA0BzB,KAAmBsB,GAAc,iBAC3DI,IAAwBtB,KAAiBkB,GAAc,eAEvDK,IACFT,KACAF,GAAY,WACZV,EAAoB;AAAA,IAChBU,EAAW;AAAA,IACXR,EAAc,uBAAuB,IAAIc,GAAc,aAAavB,KAAa,EAAE,KAAK;AAAA,MACpF,KAAKuB,GAAc,aAAavB,KAAa,OAAOwB,CAAe;AAAA,MACnE,OAAOD,GAAc,SAAS;AAAA,MAC9B,MAAMA,GAAc;AAAA,MACpB,QAAQA,GAAc;AAAA,MACtB,WAAWA,GAAc;AAAA,MACzB,OAAOA,GAAc;AAAA,MACrB,gBAAgBA,GAAc;AAAA,MAC9B,gBAAgBA,GAAc;AAAA,MAC9B,WAAWA,GAAc;AAAA,MACzB,YAAYA,GAAc;AAAA,MAC1B,iBAAiBA,GAAc;AAAA,MAC/B,WAAW;AAAA,MACX,iBAAiBA,GAAc;AAAA,MAC/B,cAAcA,GAAc;AAAA,MAC5B,UAAUA,GAAc;AAAA,IAAA;AAAA,IAE5BN,EAAW;AAAA,IACXK;AAAA,EAAA,GAGFO,IAAoBhB,EAAc,yBAAyB,GAC3DiB,IAAqBD,IAAoB,KAAKL,KAAmBK,GAEjEE,IACFR,GAAc,gBAAgB,OAAOA,GAAc,SAAU,WAAWA,EAAa,QAAQ,KAE3FS,IAAwB,CAACC,MAAsE;AACjG,IAAAA,EAAM,gBAAA;AAAA,EACV;AAMA,SAJIb,MACAX,EAAc,YAAY,iBAAiB,KAG3CF,EAAoB,cAEhB,gBAAA2B;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG5B;AAAA,MACJ,WAAW6B;AAAA,QACP;AAAA,QACAf,KAAmB;AAAA,QACnBD,KAAiBW,KAAsB;AAAA,QACvCV,KACIP,EAAc,gBACdiB,KACA;AAAA,QACJM,EAA4BV,CAAuB;AAAA,QACnDW,EAA0BV,CAAqB;AAAA,QAC/CJ,GAAc,gBAAgB;AAAA,QAC9BK;AAAA,QACA9B;AAAA,MAAA;AAAA,MAEJ,eAAayB,GAAc,aAAavB,KAAawB;AAAA,MACrD,MAAK;AAAA,MACL,iBAAec,EAAoBd,GAAiBb,EAAmB,mBAAmB;AAAA,MAC1F,gBAAc4B,EAAgBxC,CAAO;AAAA,MACrC,SAASI,IAAkB6B,IAAwB;AAAA,MACnD,WAAW7B,IAAkB6B,IAAwB;AAAA,MACrD,OAAO,EAAE,YAAY,GAAGP,CAAmB,WAAW1B,CAAO,GAAA;AAAA,MAE7D,UAAA,gBAAAmC,EAAC,OAAA,EAAI,WAAWC,EAAW,sBAAsBK,EAAgCtC,CAAQ,CAAC,GACrF,UAAAE,KAASP,KAAY,GAAA,CAC1B;AAAA,IAAA;AAAA,EAAA,IAMR,gBAAA4C;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGnC;AAAA,MACJ,WAAW6B;AAAA,QACP;AAAA,QACA5B,EAAoB,YAAY;AAAA,QAChC6B,EAA4BV,CAAuB;AAAA,QACnDW,EAA0BV,CAAqB;AAAA,QAC/CJ,GAAc,gBAAgB;AAAA,QAC9BK;AAAA,QACA9B;AAAA,MAAA;AAAA,MAEJ,eAAayB,GAAc,aAAavB,KAAawB;AAAA,MACrD,MAAK;AAAA,MACL,iBAAec,EAAoBd,GAAiBb,EAAmB,mBAAmB;AAAA,MAC1F,SAASR,IAAkB6B,IAAwB;AAAA,MACnD,WAAW7B,IAAkB6B,IAAwB;AAAA,MAEpD,UAAA;AAAA,QAAAD,KACG,gBAAAG,EAAC,SAAI,WAAWC,EAAW,oBAAoB5B,EAAoB,YAAY,cAAc,GACxF,UAAAwB,EAAA,CACL;AAAA,QAEJ,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWC;AAAA,cACP;AAAA,cACA5B,EAAoB,YAAY;AAAA,cAChCiC,EAAgCtC,CAAQ;AAAA,YAAA;AAAA,YAG3C,eAASL,KAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MAC1B;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

package/components/table/TableExpandedContentRow.d.ts

@@ -1,14 +1,14 @@
-import { PropsWithChildren, ReactNode } from 'react';
-export type TableExpandedContentRowProps = PropsWithChildren<{
+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;
     /**
-     * Optional explicit content for the full-width expanded row.
-     * If omitted, `children` are used.
+     * The content of the full-width expanded row.
      */
-    content?: ReactNode;
+    children?: ReactNode;
     /**
      * Optional class names only for this expanded content row.
      */
@@ -17,6 +17,6 @@ export type TableExpandedContentRowProps = PropsWithChildren<{
      * Disable table hover styling for this row.
      */
     noHover?: boolean;
-}>;
-declare const TableExpandedContentRow: (_props: TableExpandedContentRowProps) => null;
+};
+declare const TableExpandedContentRow: (props: TableExpandedContentRowProps) => import("react/jsx-runtime").JSX.Element | null;
 export default TableExpandedContentRow;

package/components/table/TableExpandedContentRow.js

@@ -1,5 +1,110 @@
-const n = (e) => null;
+import { jsx as o } from "react/jsx-runtime";
+import { useReducedMotion as O, motion as u } from "motion/react";
+import { useState as g, useMemo as R } from "react";
+import C from "../../utils/classNames.js";
+import { useOptionalTableInteractionContext as N } from "./context/TableInteractionContext.js";
+import { useOptionalTableSection as v, useTableBodyContext as A } from "./context/TableStructureContext.js";
+import { useOptionalTableRenderContext as T } from "./context/TableRenderContext.js";
+const t = 0.22, U = (m) => {
+  const { children: p, className: x, noHover: w, parentKey: i, ...h } = m, e = T(), a = N(), b = v(), r = A(), [y, s] = g(!0), l = O(), n = R(
+    () => l ? {
+      row: {
+        initial: { opacity: 0 },
+        animate: {
+          opacity: 1,
+          transition: { duration: t, ease: "easeInOut" }
+        },
+        exit: {
+          opacity: 0,
+          transition: { duration: t, ease: "easeInOut" }
+        }
+      },
+      content: {
+        initial: { opacity: 0 },
+        animate: {
+          opacity: 1,
+          transition: { duration: t, ease: "easeInOut" }
+        },
+        exit: {
+          opacity: 0,
+          transition: { duration: t, ease: "easeInOut" }
+        }
+      }
+    } : {
+      row: {
+        initial: { height: 0 },
+        animate: {
+          height: "auto",
+          transition: { duration: t, ease: "easeInOut" }
+        },
+        exit: {
+          height: 0,
+          transition: { duration: t, ease: "easeInOut" }
+        }
+      },
+      content: {
+        initial: { opacity: 0 },
+        animate: {
+          opacity: 1,
+          transition: {
+            duration: t * 0.65,
+            delay: t,
+            ease: "easeOut"
+          }
+        },
+        exit: {
+          opacity: 0,
+          transition: {
+            duration: t * 0.65,
+            ease: "easeInOut"
+          }
+        }
+      }
+    },
+    [l]
+  );
+  if (!e || !a || e.columns.length === 0 || b !== "body" || !r)
+    return null;
+  const d = r.nextRowIndex(), f = e.columns.length + (a.showSelectionColumn ? 1 : 0), I = `expanded-content-${String(i)}`, c = /* @__PURE__ */ o(
+    u.div,
+    {
+      ...h,
+      className: C(
+        "table-row table-row-expanded-full-width",
+        w && "table-row-no-hover",
+        x
+      ),
+      "data-index": d,
+      "data-parent-row-id": String(i),
+      role: "row",
+      initial: n.row.initial,
+      animate: n.row.animate,
+      exit: n.row.exit,
+      onAnimationStart: () => s(!0),
+      onAnimationComplete: () => s(!1),
+      style: {
+        overflow: y ? "hidden" : "visible"
+      },
+      children: /* @__PURE__ */ o("div", { className: "table-cell table-expanded-cell", role: "cell", "aria-colspan": f, children: /* @__PURE__ */ o(
+        u.div,
+        {
+          className: "table-cell-content",
+          initial: n.content.initial,
+          animate: n.content.animate,
+          exit: n.content.exit,
+          children: p
+        }
+      ) })
+    }
+  );
+  return e.renderDraft.hasExpandableRows = !0, e.renderDraft.bodyRows.push({
+    rowId: I,
+    rowIndex: d,
+    kind: "expanded-full-width",
+    render: () => c
+  }), e.isRegisteringBodyRows ? null : c;
+};
 export {
-  n as default
+  U as default
 };
 //# sourceMappingURL=TableExpandedContentRow.js.map

package/components/table/TableExpandedContentRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableExpandedContentRow.js","sources":["../../../src/components/table/TableExpandedContentRow.tsx"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from 'react';\n\nexport type TableExpandedContentRowProps = PropsWithChildren<{\n    /**\n     * Parent row key used to associate this expanded content row with its parent.\n     */\n    parentKey: string | number;\n\n    /**\n     * Optional explicit content for the full-width expanded row.\n     * If omitted, `children` are used.\n     */\n    content?: ReactNode;\n\n    /**\n     * Optional class names only for this expanded content row.\n     */\n    className?: string;\n\n    /**\n     * Disable table hover styling for this row.\n     */\n    noHover?: boolean;\n}>;\n\nconst TableExpandedContentRow = (_props: TableExpandedContentRowProps) => null;\n\nexport default TableExpandedContentRow;\n"],"names":["TableExpandedContentRow","_props"],"mappings":"AAyBA,MAAMA,IAA0B,CAACC,MAAyC;"}
+{"version":3,"file":"TableExpandedContentRow.js","sources":["../../../src/components/table/TableExpandedContentRow.tsx"],"sourcesContent":["import { motion, useReducedMotion } from 'motion/react';\nimport { useMemo, useState, type ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport type { TableHtmlAttributes } from './Table.types';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useTableBodyContext, useOptionalTableSection } from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableExpandedContentRowProps = TableHtmlAttributes & {\n    /**\n     * Parent row key used to associate this expanded content row with its parent.\n     */\n    parentKey: string | number;\n\n    /**\n     * The content of the full-width expanded row.\n     */\n    children?: ReactNode;\n\n    /**\n     * Optional class names only for this expanded content row.\n     */\n    className?: string;\n\n    /**\n     * Disable table hover styling for this row.\n     */\n    noHover?: boolean;\n};\n\nconst DEFAULT_EXPANDED_ROW_DURATION = 0.22;\n\nconst TableExpandedContentRow = (props: TableExpandedContentRowProps) => {\n    const { children, className, noHover, parentKey, ...remainingProps } = props;\n\n    const renderContext = useOptionalTableRenderContext();\n    const interactionContext = useOptionalTableInteractionContext();\n    const section = useOptionalTableSection();\n    const bodyContext = useTableBodyContext();\n\n    const [isAnimating, setIsAnimating] = useState(true);\n\n    const shouldReduceMotion = useReducedMotion();\n\n    const animation = useMemo(\n        () =>\n            shouldReduceMotion\n                ? {\n                      row: {\n                          initial: { opacity: 0 },\n                          animate: {\n                              opacity: 1,\n                              transition: { duration: DEFAULT_EXPANDED_ROW_DURATION, ease: 'easeInOut' as const },\n                          },\n                          exit: {\n                              opacity: 0,\n                              transition: { duration: DEFAULT_EXPANDED_ROW_DURATION, ease: 'easeInOut' as const },\n                          },\n                      },\n                      content: {\n                          initial: { opacity: 0 },\n                          animate: {\n                              opacity: 1,\n                              transition: { duration: DEFAULT_EXPANDED_ROW_DURATION, ease: 'easeInOut' as const },\n                          },\n                          exit: {\n                              opacity: 0,\n                              transition: { duration: DEFAULT_EXPANDED_ROW_DURATION, ease: 'easeInOut' as const },\n                          },\n                      },\n                  }\n                : {\n                      row: {\n                          initial: { height: 0 },\n                          animate: {\n                              height: 'auto',\n                              transition: { duration: DEFAULT_EXPANDED_ROW_DURATION, ease: 'easeInOut' as const },\n                          },\n                          exit: {\n                              height: 0,\n                              transition: { duration: DEFAULT_EXPANDED_ROW_DURATION, ease: 'easeInOut' as const },\n                          },\n                      },\n                      content: {\n                          initial: { opacity: 0 },\n                          animate: {\n                              opacity: 1,\n                              transition: {\n                                  duration: DEFAULT_EXPANDED_ROW_DURATION * 0.65,\n                                  delay: DEFAULT_EXPANDED_ROW_DURATION,\n                                  ease: 'easeOut' as const,\n                              },\n                          },\n                          exit: {\n                              opacity: 0,\n                              transition: {\n                                  duration: DEFAULT_EXPANDED_ROW_DURATION * 0.65,\n                                  ease: 'easeInOut' as const,\n                              },\n                          },\n                      },\n                  },\n        [shouldReduceMotion]\n    );\n\n    if (\n        !renderContext ||\n        !interactionContext ||\n        renderContext.columns.length === 0 ||\n        section !== 'body' ||\n        !bodyContext\n    ) {\n        return null;\n    }\n\n    const rowIndex = bodyContext.nextRowIndex();\n    const columnCount = renderContext.columns.length + (interactionContext.showSelectionColumn ? 1 : 0);\n\n    // Expanded rows stay keyed by their parent row, so toggling\n    // rows above does not remount already open expanded rows below. This is important\n    // to avid other rows to animate again.\n    const stableExpandedRowId = `expanded-content-${String(parentKey)}`;\n\n    const rowNode = (\n        <motion.div\n            {...remainingProps}\n            className={classNames(\n                'table-row table-row-expanded-full-width',\n                noHover && 'table-row-no-hover',\n                className\n            )}\n            data-index={rowIndex}\n            data-parent-row-id={String(parentKey)}\n            role='row'\n            initial={animation.row.initial}\n            animate={animation.row.animate}\n            exit={animation.row.exit}\n            onAnimationStart={() => setIsAnimating(true)}\n            onAnimationComplete={() => setIsAnimating(false)}\n            style={{\n                overflow: isAnimating ? 'hidden' : 'visible',\n            }}\n        >\n            <div className='table-cell table-expanded-cell' role='cell' aria-colspan={columnCount}>\n                <motion.div\n                    className='table-cell-content'\n                    initial={animation.content.initial}\n                    animate={animation.content.animate}\n                    exit={animation.content.exit}\n                >\n                    {children}\n                </motion.div>\n            </div>\n        </motion.div>\n    );\n\n    renderContext.renderDraft.hasExpandableRows = true;\n    renderContext.renderDraft.bodyRows.push({\n        rowId: stableExpandedRowId,\n        rowIndex,\n        kind: 'expanded-full-width',\n        render: () => rowNode,\n    });\n\n    return renderContext.isRegisteringBodyRows ? null : rowNode;\n};\n\nexport default TableExpandedContentRow;\n"],"names":["DEFAULT_EXPANDED_ROW_DURATION","TableExpandedContentRow","props","children","className","noHover","parentKey","remainingProps","renderContext","useOptionalTableRenderContext","interactionContext","useOptionalTableInteractionContext","section","useOptionalTableSection","bodyContext","useTableBodyContext","isAnimating","setIsAnimating","useState","shouldReduceMotion","useReducedMotion","animation","useMemo","rowIndex","columnCount","stableExpandedRowId","rowNode","jsx","motion","classNames"],"mappings":"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"}

package/components/table/TableExpandedRow.d.ts

@@ -1,5 +1,6 @@
-import { PropsWithChildren } from 'react';
-export type TableExpandedRowProps<RowType extends Record<string, unknown>> = PropsWithChildren<{
+import { ReactNode } from 'react';
+import { TableHtmlAttributes, TableRowData } from './Table.types';
+export type TableExpandedRowProps<RowType extends TableRowData> = TableHtmlAttributes & Partial<RowType> & {
     /**
      * Parent row key used to associate this expanded row with its parent.
      */
@@ -12,6 +13,10 @@ export type TableExpandedRowProps<RowType extends Record<string, unknown>> = Pro
      * Disable table hover styling for this row.
      */
     noHover?: boolean;
-} & Partial<RowType>>;
-declare const TableExpandedRow: <RowType extends Record<string, unknown> = Record<string, unknown>>(_props: TableExpandedRowProps<RowType>) => null;
+    /**
+     * Table row content.
+     */
+    children?: ReactNode;
+};
+declare const TableExpandedRow: <RowType extends TableRowData = TableRowData>(props: TableExpandedRowProps<RowType>) => import("react/jsx-runtime").JSX.Element | null;
 export default TableExpandedRow;