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

package/components/table/TableToolbarColumn.d.ts

@@ -0,0 +1,31 @@
+import { PropsWithChildren, ReactNode } from 'react';
+export type TableToolbarColumnHorizontalAlign = 'left' | 'right';
+export type TableToolbarColumnVerticalAlign = 'start' | 'center' | 'end';
+export type TableToolbarColumnProps = {
+    /**
+     * Controls whether the column is rendered in the left or right toolbar group.
+     *
+     * @default 'left'
+     */
+    horizontalAlign?: TableToolbarColumnHorizontalAlign;
+    /**
+     * Vertically centers this toolbar column within its group.
+     *
+     * @default 'end'
+     */
+    verticalAlign?: TableToolbarColumnVerticalAlign;
+    /**
+     * Optional label rendered above the column content.
+     */
+    label?: ReactNode;
+    /**
+     * Optional class names for the column wrapper.
+     */
+    className?: string;
+    /**
+     * Adds the default toolbar separator styling for the column.
+     */
+    separator?: boolean;
+};
+declare const TableToolbarColumn: (props: PropsWithChildren<TableToolbarColumnProps>) => import("react/jsx-runtime").JSX.Element;
+export default TableToolbarColumn;

package/components/table/TableToolbarColumn.js

@@ -0,0 +1,33 @@
+import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import c from "../../utils/classNames.js";
+const p = (a) => {
+  const {
+    horizontalAlign: m,
+    label: l,
+    className: o,
+    separator: e,
+    verticalAlign: r = "end",
+    children: n,
+    ...s
+  } = a;
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ...s,
+      className: c(
+        "table-toolbar-column",
+        `align-self-${r}`,
+        e && "table-toolbar-column-separator",
+        o
+      ),
+      children: [
+        l ? /* @__PURE__ */ i("label", { className: "table-toolbar-label", children: l }) : null,
+        n
+      ]
+    }
+  );
+};
+export {
+  p as default
+};
+//# sourceMappingURL=TableToolbarColumn.js.map

package/components/table/TableToolbarColumn.js.map

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

package/components/table/TableViewToggles.d.ts

@@ -11,7 +11,7 @@ export type TableViewTogglesProps = {
      * - `'TABLE'`
      * - `TableViewToggles.VIEW_TYPE_TABLE`
      * - `TableViewToggles.VIEW_TYPE_SINGLE_CARD`
-     * - `TableViewToggles.VIEW_TYPE_CARD`
+     * - `TableViewToggles.VIEW_TYPE_MULTI_CARDS`
      */
     viewType?: TableViewTogglesViewType;
     /**
@@ -24,9 +24,9 @@ export type TableViewTogglesProps = {
      * - `'TABLE'`
      * - `TableViewToggles.VIEW_TYPE_TABLE`
      * - `TableViewToggles.VIEW_TYPE_SINGLE_CARD`
-     * - `TableViewToggles.VIEW_TYPE_CARD`
+     * - `TableViewToggles.VIEW_TYPE_MULTI_CARDS`
      *
-     * @default TableViewToggles.VIEW_TYPE
+     * @default TableViewToggles.VIEW_TYPE_TABLE
      */
     initialViewType?: TableViewTogglesViewType;
     /**

package/components/table/TableViewToggles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableViewToggles.js","sources":["../../../src/components/table/TableViewToggles.tsx"],"sourcesContent":["import { type ReactNode, useEffect, useState } from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport Select, { type SelectOption } from '../selects/Select';\n\n// TODO: add responsive behaviour and trigger a change from table to list for small screen -> see DriverAdministration\n\nconst typeIcons: Record<TableViewTogglesViewType, string> = {\n    TABLE: 'rioglyph-table-view',\n    SINGLE_CARD: 'rioglyph-th-list',\n    MULTI_CARDS: 'rioglyph-split-view',\n};\n\ntype TableViewToggleOption = SelectOption & {\n    id: TableViewTogglesViewType;\n};\n\nexport type TableViewTogglesViewType = 'SINGLE_CARD' | 'MULTI_CARDS' | 'TABLE';\n\nexport type TableViewTogglesProps = {\n    /**\n     * The current viewType for controlling the TablesViewToggles component.\n     *\n     * Possible values are:\n     *\n     * - `'SINGLE_CARD'`\n     * - `'MULTI_CARDS'`\n     * - `'TABLE'`\n     * - `TableViewToggles.VIEW_TYPE_TABLE`\n     * - `TableViewToggles.VIEW_TYPE_SINGLE_CARD`\n     * - `TableViewToggles.VIEW_TYPE_CARD`\n     */\n    viewType?: TableViewTogglesViewType;\n\n    /**\n     * Defines the initial viewType (when viewType is not controlled from the outside).\n     *\n     * Possible values are:\n     *\n     * - `'SINGLE_CARD'`\n     * - `'MULTI_CARDS'`\n     * - `'TABLE'`\n     * - `TableViewToggles.VIEW_TYPE_TABLE`\n     * - `TableViewToggles.VIEW_TYPE_SINGLE_CARD`\n     * - `TableViewToggles.VIEW_TYPE_CARD`\n     *\n     * @default TableViewToggles.VIEW_TYPE\n     */\n    initialViewType?: TableViewTogglesViewType;\n\n    /**\n     * Defines the view types which shall not be supported and are omitted.\n     *\n     * @default []\n     */\n    disabledViewTypes?: TableViewTogglesViewType[];\n\n    /**\n     * Callback function for when the user wants to change the viewType.\n     *\n     * Receives the new type as an argument.\n     *\n     * @param viewType The new viewType selected by the user.\n     */\n    onViewTypeChange: (viewType: TableViewTogglesViewType) => void;\n\n    /**\n     * Optional tooltip content for table view button.\n     *\n     * @deprecated Use `tableViewLabel` instead.\n     */\n    tableViewTooltipContent?: string | ReactNode;\n\n    /**\n     * Optional label content for the table view select item.\n     */\n    tableViewLabel?: string | ReactNode;\n\n    /**\n     * Optional tooltip content for single card view button.\n     *\n     * @deprecated Use `singleCardViewLabel` instead.\n     */\n    singleCardViewTooltipContent?: string | ReactNode;\n\n    /**\n     * Optional label content for the single card view select item.\n     */\n    singleCardViewLabel?: string | ReactNode;\n\n    /**\n     * Optional tooltip content for multi card view button.\n     *\n     * @deprecated Use `multiCardsViewLabel` instead.\n     */\n    multiCardsViewTooltipContent?: string | ReactNode;\n\n    /**\n     * Optional label content for the multi cards view select item.\n     */\n    multiCardsViewLabel?: string | ReactNode;\n\n    /**\n     * Disables all buttons.\n     *\n     * This means the buttons cannot be clicked. Used when disabling toolbar buttons during loading state or when the\n     * corresponding table is empty.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Optional class names for the wrapper element.\n     */\n    className?: string;\n};\n\nconst TableViewToggles = (props: TableViewTogglesProps) => {\n    const {\n        viewType,\n        initialViewType = 'TABLE',\n        disabledViewTypes = [],\n        onViewTypeChange = noop,\n        tableViewTooltipContent,\n        tableViewLabel,\n        singleCardViewTooltipContent,\n        singleCardViewLabel,\n        multiCardsViewTooltipContent,\n        multiCardsViewLabel,\n        disabled = false,\n        className,\n        ...remainingProps\n    } = props;\n\n    const [internalViewType, setInternalViewType] = useState(initialViewType);\n\n    // update internal state when external state changes - controlled component case\n    useEffect(() => {\n        if (viewType) {\n            setInternalViewType(viewType);\n        }\n    }, [viewType]);\n\n    const setViewType = (vt: TableViewTogglesViewType) => {\n        setInternalViewType(vt);\n        onViewTypeChange(vt);\n    };\n\n    const allOptions: TableViewToggleOption[] = [\n        {\n            id: 'TABLE',\n            label: tableViewLabel ?? tableViewTooltipContent ?? '',\n            icon: <span className={`rioglyph ${typeIcons.TABLE}`} />,\n        },\n        {\n            id: 'SINGLE_CARD',\n            label: singleCardViewLabel ?? singleCardViewTooltipContent ?? '',\n            icon: <span className={`rioglyph ${typeIcons.SINGLE_CARD}`} />,\n        },\n        {\n            id: 'MULTI_CARDS',\n            label: multiCardsViewLabel ?? multiCardsViewTooltipContent ?? '',\n            icon: <span className={`rioglyph ${typeIcons.MULTI_CARDS}`} />,\n        },\n    ];\n\n    const options = allOptions.filter(option => !disabledViewTypes.includes(option.id));\n    const hasOptionLabels = allOptions.some(option => option.label);\n\n    const wrapperClassNames = classNames('TableViewToggles', className && className);\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames}>\n            <div className='form-group margin-bottom-0'>\n                <Select\n                    options={options}\n                    value={[internalViewType]}\n                    onChange={item => item && setViewType(item.id as TableViewTogglesViewType)}\n                    disabled={disabled}\n                    showSelectedItemIcon\n                    pullRight\n                    dropdownClassName={!hasOptionLabels ? 'width-auto' : undefined}\n                />\n            </div>\n        </div>\n    );\n};\n\n// Don't export values as string but as a distinct union type\nTableViewToggles.VIEW_TYPE_TABLE = 'TABLE' as TableViewTogglesViewType;\nTableViewToggles.VIEW_TYPE_SINGLE_CARD = 'SINGLE_CARD' as TableViewTogglesViewType;\nTableViewToggles.VIEW_TYPE_MULTI_CARDS = 'MULTI_CARDS' as TableViewTogglesViewType;\n\nexport default TableViewToggles;\n"],"names":["typeIcons","TableViewToggles","props","viewType","initialViewType","disabledViewTypes","onViewTypeChange","noop","tableViewTooltipContent","tableViewLabel","singleCardViewTooltipContent","singleCardViewLabel","multiCardsViewTooltipContent","multiCardsViewLabel","disabled","className","remainingProps","internalViewType","setInternalViewType","useState","useEffect","setViewType","vt","allOptions","jsx","options","option","hasOptionLabels","wrapperClassNames","classNames","Select","item"],"mappings":";;;;;AAQA,MAAMA,IAAsD;AAAA,EACxD,OAAO;AAAA,EACP,aAAa;AAAA,EACb,aAAa;AACjB,GA2GMC,IAAmB,CAACC,MAAiC;AACvD,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,iBAAAC,IAAkB;AAAA,IAClB,mBAAAC,IAAoB,CAAA;AAAA,IACpB,kBAAAC,IAAmBC;AAAA,IACnB,yBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,8BAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,8BAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHd,GAEE,CAACe,GAAkBC,CAAmB,IAAIC,EAASf,CAAe;AAGxE,EAAAgB,EAAU,MAAM;AACZ,IAAIjB,KACAe,EAAoBf,CAAQ;AAAA,EAEpC,GAAG,CAACA,CAAQ,CAAC;AAEb,QAAMkB,IAAc,CAACC,MAAiC;AAClD,IAAAJ,EAAoBI,CAAE,GACtBhB,EAAiBgB,CAAE;AAAA,EACvB,GAEMC,IAAsC;AAAA,IACxC;AAAA,MACI,IAAI;AAAA,MACJ,OAAOd,KAAkBD,KAA2B;AAAA,MACpD,MAAM,gBAAAgB,EAAC,QAAA,EAAK,WAAW,YAAYxB,EAAU,KAAK,GAAA,CAAI;AAAA,IAAA;AAAA,IAE1D;AAAA,MACI,IAAI;AAAA,MACJ,OAAOW,KAAuBD,KAAgC;AAAA,MAC9D,MAAM,gBAAAc,EAAC,QAAA,EAAK,WAAW,YAAYxB,EAAU,WAAW,GAAA,CAAI;AAAA,IAAA;AAAA,IAEhE;AAAA,MACI,IAAI;AAAA,MACJ,OAAOa,KAAuBD,KAAgC;AAAA,MAC9D,MAAM,gBAAAY,EAAC,QAAA,EAAK,WAAW,YAAYxB,EAAU,WAAW,GAAA,CAAI;AAAA,IAAA;AAAA,EAChE,GAGEyB,IAAUF,EAAW,OAAO,CAAAG,MAAU,CAACrB,EAAkB,SAASqB,EAAO,EAAE,CAAC,GAC5EC,IAAkBJ,EAAW,KAAK,CAAAG,MAAUA,EAAO,KAAK,GAExDE,IAAoBC,EAAW,oBAAoBd,KAAaA,CAAS;AAE/E,SACI,gBAAAS,EAAC,SAAK,GAAGR,GAAgB,WAAWY,GAChC,UAAA,gBAAAJ,EAAC,OAAA,EAAI,WAAU,8BACX,UAAA,gBAAAA;AAAA,IAACM;AAAA,IAAA;AAAA,MACG,SAAAL;AAAA,MACA,OAAO,CAACR,CAAgB;AAAA,MACxB,UAAU,CAAAc,MAAQA,KAAQV,EAAYU,EAAK,EAA8B;AAAA,MACzE,UAAAjB;AAAA,MACA,sBAAoB;AAAA,MACpB,WAAS;AAAA,MACT,mBAAoBa,IAAiC,SAAf;AAAA,IAAe;AAAA,EAAA,GAE7D,EAAA,CACJ;AAER;AAGA1B,EAAiB,kBAAkB;AACnCA,EAAiB,wBAAwB;AACzCA,EAAiB,wBAAwB;"}
+{"version":3,"file":"TableViewToggles.js","sources":["../../../src/components/table/TableViewToggles.tsx"],"sourcesContent":["import { type ReactNode, useEffect, useState } from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport Select, { type SelectOption } from '../selects/Select';\n\nconst typeIcons: Record<TableViewTogglesViewType, string> = {\n    TABLE: 'rioglyph-table-view',\n    SINGLE_CARD: 'rioglyph-th-list',\n    MULTI_CARDS: 'rioglyph-split-view',\n};\n\ntype TableViewToggleOption = SelectOption & {\n    id: TableViewTogglesViewType;\n};\n\nexport type TableViewTogglesViewType = 'SINGLE_CARD' | 'MULTI_CARDS' | 'TABLE';\n\nexport type TableViewTogglesProps = {\n    /**\n     * The current viewType for controlling the TablesViewToggles component.\n     *\n     * Possible values are:\n     *\n     * - `'SINGLE_CARD'`\n     * - `'MULTI_CARDS'`\n     * - `'TABLE'`\n     * - `TableViewToggles.VIEW_TYPE_TABLE`\n     * - `TableViewToggles.VIEW_TYPE_SINGLE_CARD`\n     * - `TableViewToggles.VIEW_TYPE_MULTI_CARDS`\n     */\n    viewType?: TableViewTogglesViewType;\n\n    /**\n     * Defines the initial viewType (when viewType is not controlled from the outside).\n     *\n     * Possible values are:\n     *\n     * - `'SINGLE_CARD'`\n     * - `'MULTI_CARDS'`\n     * - `'TABLE'`\n     * - `TableViewToggles.VIEW_TYPE_TABLE`\n     * - `TableViewToggles.VIEW_TYPE_SINGLE_CARD`\n     * - `TableViewToggles.VIEW_TYPE_MULTI_CARDS`\n     *\n     * @default TableViewToggles.VIEW_TYPE_TABLE\n     */\n    initialViewType?: TableViewTogglesViewType;\n\n    /**\n     * Defines the view types which shall not be supported and are omitted.\n     *\n     * @default []\n     */\n    disabledViewTypes?: TableViewTogglesViewType[];\n\n    /**\n     * Callback function for when the user wants to change the viewType.\n     *\n     * Receives the new type as an argument.\n     *\n     * @param viewType The new viewType selected by the user.\n     */\n    onViewTypeChange: (viewType: TableViewTogglesViewType) => void;\n\n    /**\n     * Optional tooltip content for table view button.\n     *\n     * @deprecated Use `tableViewLabel` instead.\n     */\n    tableViewTooltipContent?: string | ReactNode;\n\n    /**\n     * Optional label content for the table view select item.\n     */\n    tableViewLabel?: string | ReactNode;\n\n    /**\n     * Optional tooltip content for single card view button.\n     *\n     * @deprecated Use `singleCardViewLabel` instead.\n     */\n    singleCardViewTooltipContent?: string | ReactNode;\n\n    /**\n     * Optional label content for the single card view select item.\n     */\n    singleCardViewLabel?: string | ReactNode;\n\n    /**\n     * Optional tooltip content for multi card view button.\n     *\n     * @deprecated Use `multiCardsViewLabel` instead.\n     */\n    multiCardsViewTooltipContent?: string | ReactNode;\n\n    /**\n     * Optional label content for the multi cards view select item.\n     */\n    multiCardsViewLabel?: string | ReactNode;\n\n    /**\n     * Disables all buttons.\n     *\n     * This means the buttons cannot be clicked. Used when disabling toolbar buttons during loading state or when the\n     * corresponding table is empty.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Optional class names for the wrapper element.\n     */\n    className?: string;\n};\n\nconst TableViewToggles = (props: TableViewTogglesProps) => {\n    const {\n        viewType,\n        initialViewType = 'TABLE',\n        disabledViewTypes = [],\n        onViewTypeChange = noop,\n        tableViewTooltipContent,\n        tableViewLabel,\n        singleCardViewTooltipContent,\n        singleCardViewLabel,\n        multiCardsViewTooltipContent,\n        multiCardsViewLabel,\n        disabled = false,\n        className,\n        ...remainingProps\n    } = props;\n\n    const [internalViewType, setInternalViewType] = useState(initialViewType);\n\n    // update internal state when external state changes - controlled component case\n    useEffect(() => {\n        if (viewType) {\n            setInternalViewType(viewType);\n        }\n    }, [viewType]);\n\n    const setViewType = (vt: TableViewTogglesViewType) => {\n        setInternalViewType(vt);\n        onViewTypeChange(vt);\n    };\n\n    const allOptions: TableViewToggleOption[] = [\n        {\n            id: 'TABLE',\n            label: tableViewLabel ?? tableViewTooltipContent ?? '',\n            icon: <span className={`rioglyph ${typeIcons.TABLE}`} />,\n        },\n        {\n            id: 'SINGLE_CARD',\n            label: singleCardViewLabel ?? singleCardViewTooltipContent ?? '',\n            icon: <span className={`rioglyph ${typeIcons.SINGLE_CARD}`} />,\n        },\n        {\n            id: 'MULTI_CARDS',\n            label: multiCardsViewLabel ?? multiCardsViewTooltipContent ?? '',\n            icon: <span className={`rioglyph ${typeIcons.MULTI_CARDS}`} />,\n        },\n    ];\n\n    const options = allOptions.filter(option => !disabledViewTypes.includes(option.id));\n    const hasOptionLabels = allOptions.some(option => option.label);\n\n    const wrapperClassNames = classNames('TableViewToggles', className && className);\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames}>\n            <div className='form-group margin-bottom-0'>\n                <Select\n                    options={options}\n                    value={[internalViewType]}\n                    onChange={item => item && setViewType(item.id as TableViewTogglesViewType)}\n                    disabled={disabled}\n                    showSelectedItemIcon\n                    pullRight\n                    dropdownClassName={!hasOptionLabels ? 'width-auto' : undefined}\n                />\n            </div>\n        </div>\n    );\n};\n\n// Don't export values as string but as a distinct union type\nTableViewToggles.VIEW_TYPE_TABLE = 'TABLE' as TableViewTogglesViewType;\nTableViewToggles.VIEW_TYPE_SINGLE_CARD = 'SINGLE_CARD' as TableViewTogglesViewType;\nTableViewToggles.VIEW_TYPE_MULTI_CARDS = 'MULTI_CARDS' as TableViewTogglesViewType;\n\nexport default TableViewToggles;\n"],"names":["typeIcons","TableViewToggles","props","viewType","initialViewType","disabledViewTypes","onViewTypeChange","noop","tableViewTooltipContent","tableViewLabel","singleCardViewTooltipContent","singleCardViewLabel","multiCardsViewTooltipContent","multiCardsViewLabel","disabled","className","remainingProps","internalViewType","setInternalViewType","useState","useEffect","setViewType","vt","allOptions","jsx","options","option","hasOptionLabels","wrapperClassNames","classNames","Select","item"],"mappings":";;;;;AAMA,MAAMA,IAAsD;AAAA,EACxD,OAAO;AAAA,EACP,aAAa;AAAA,EACb,aAAa;AACjB,GA2GMC,IAAmB,CAACC,MAAiC;AACvD,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,iBAAAC,IAAkB;AAAA,IAClB,mBAAAC,IAAoB,CAAA;AAAA,IACpB,kBAAAC,IAAmBC;AAAA,IACnB,yBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,8BAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,8BAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHd,GAEE,CAACe,GAAkBC,CAAmB,IAAIC,EAASf,CAAe;AAGxE,EAAAgB,EAAU,MAAM;AACZ,IAAIjB,KACAe,EAAoBf,CAAQ;AAAA,EAEpC,GAAG,CAACA,CAAQ,CAAC;AAEb,QAAMkB,IAAc,CAACC,MAAiC;AAClD,IAAAJ,EAAoBI,CAAE,GACtBhB,EAAiBgB,CAAE;AAAA,EACvB,GAEMC,IAAsC;AAAA,IACxC;AAAA,MACI,IAAI;AAAA,MACJ,OAAOd,KAAkBD,KAA2B;AAAA,MACpD,MAAM,gBAAAgB,EAAC,QAAA,EAAK,WAAW,YAAYxB,EAAU,KAAK,GAAA,CAAI;AAAA,IAAA;AAAA,IAE1D;AAAA,MACI,IAAI;AAAA,MACJ,OAAOW,KAAuBD,KAAgC;AAAA,MAC9D,MAAM,gBAAAc,EAAC,QAAA,EAAK,WAAW,YAAYxB,EAAU,WAAW,GAAA,CAAI;AAAA,IAAA;AAAA,IAEhE;AAAA,MACI,IAAI;AAAA,MACJ,OAAOa,KAAuBD,KAAgC;AAAA,MAC9D,MAAM,gBAAAY,EAAC,QAAA,EAAK,WAAW,YAAYxB,EAAU,WAAW,GAAA,CAAI;AAAA,IAAA;AAAA,EAChE,GAGEyB,IAAUF,EAAW,OAAO,CAAAG,MAAU,CAACrB,EAAkB,SAASqB,EAAO,EAAE,CAAC,GAC5EC,IAAkBJ,EAAW,KAAK,CAAAG,MAAUA,EAAO,KAAK,GAExDE,IAAoBC,EAAW,oBAAoBd,KAAaA,CAAS;AAE/E,SACI,gBAAAS,EAAC,SAAK,GAAGR,GAAgB,WAAWY,GAChC,UAAA,gBAAAJ,EAAC,OAAA,EAAI,WAAU,8BACX,UAAA,gBAAAA;AAAA,IAACM;AAAA,IAAA;AAAA,MACG,SAAAL;AAAA,MACA,OAAO,CAACR,CAAgB;AAAA,MACxB,UAAU,CAAAc,MAAQA,KAAQV,EAAYU,EAAK,EAA8B;AAAA,MACzE,UAAAjB;AAAA,MACA,sBAAoB;AAAA,MACpB,WAAS;AAAA,MACT,mBAAoBa,IAAiC,SAAf;AAAA,IAAe;AAAA,EAAA,GAE7D,EAAA,CACJ;AAER;AAGA1B,EAAiB,kBAAkB;AACnCA,EAAiB,wBAAwB;AACzCA,EAAiB,wBAAwB;"}

package/components/table/context/TableInteractionContext.d.ts

@@ -0,0 +1,26 @@
+import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
+import { TableRowData, TableRowId, TableSortDirection } from '../Table.types';
+/**
+ * User-facing table interaction state and callbacks consumed by header/body cells.
+ *
+ * These values are conceptually different from the normalized render model:
+ * they describe selection, sorting, and row activation/click behavior rather than
+ * the structural table draft.
+ */
+export type TableInteractionContextValue<RowType extends TableRowData> = {
+    showSelectionColumn?: boolean;
+    selectedRowIdSet: Set<TableRowId>;
+    selectionHeaderContent?: ReactNode;
+    isAllRowsSelected?: boolean;
+    isSomeRowsSelected?: boolean;
+    onToggleAllSelection?: () => void;
+    onToggleRowSelection?: (rowId: TableRowId) => void;
+    activeRowId?: TableRowId;
+    onActiveRowChange?: (rowId: TableRowId | undefined, row: RowType, rowIndex: number) => void;
+    onRowClick?: (row: RowType, rowIndex: number) => void;
+    isClickable: boolean;
+    onSortChange?: (columnKey: string, direction: TableSortDirection, event: ReactMouseEvent<HTMLButtonElement>) => void;
+};
+export declare const TableInteractionContext: import('react').Context<TableInteractionContextValue<TableRowData> | null>;
+export declare const useOptionalTableInteractionContext: <RowType extends TableRowData>() => TableInteractionContextValue<RowType> | null;
+export declare const useTableInteractionContext: <RowType extends TableRowData>() => TableInteractionContextValue<RowType>;

package/components/table/context/TableInteractionContext.js

@@ -0,0 +1,7 @@
+import { createContext as t, useContext as e } from "react";
+const n = t(null), a = () => e(n);
+export {
+  n as TableInteractionContext,
+  a as useOptionalTableInteractionContext
+};
+//# sourceMappingURL=TableInteractionContext.js.map

package/components/table/context/TableInteractionContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableInteractionContext.js","sources":["../../../../src/components/table/context/TableInteractionContext.tsx"],"sourcesContent":["import { createContext, useContext, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react';\n\nimport type { TableRowData, TableRowId, TableSortDirection } from '../Table.types';\n\n/**\n * User-facing table interaction state and callbacks consumed by header/body cells.\n *\n * These values are conceptually different from the normalized render model:\n * they describe selection, sorting, and row activation/click behavior rather than\n * the structural table draft.\n */\nexport type TableInteractionContextValue<RowType extends TableRowData> = {\n    showSelectionColumn?: boolean;\n    selectedRowIdSet: Set<TableRowId>;\n    selectionHeaderContent?: ReactNode;\n    isAllRowsSelected?: boolean;\n    isSomeRowsSelected?: boolean;\n    onToggleAllSelection?: () => void;\n    onToggleRowSelection?: (rowId: TableRowId) => void;\n    activeRowId?: TableRowId;\n    onActiveRowChange?: (rowId: TableRowId | undefined, row: RowType, rowIndex: number) => void;\n    onRowClick?: (row: RowType, rowIndex: number) => void;\n    isClickable: boolean;\n    onSortChange?: (\n        columnKey: string,\n        direction: TableSortDirection,\n        event: ReactMouseEvent<HTMLButtonElement>\n    ) => void;\n};\n\nexport const TableInteractionContext = createContext<TableInteractionContextValue<TableRowData> | null>(null);\n\nexport const useOptionalTableInteractionContext = <RowType extends TableRowData>() =>\n    useContext(TableInteractionContext) as TableInteractionContextValue<RowType> | null;\n\nexport const useTableInteractionContext = <RowType extends TableRowData>() => {\n    const context = useOptionalTableInteractionContext<RowType>();\n\n    if (!context) {\n        throw new Error('Table interaction context is missing.');\n    }\n\n    return context;\n};\n"],"names":["TableInteractionContext","createContext","useOptionalTableInteractionContext","useContext"],"mappings":";AA8BO,MAAMA,IAA0BC,EAAiE,IAAI,GAE/FC,IAAqC,MAC9CC,EAAWH,CAAuB;"}

package/components/table/context/TableLayoutContext.d.ts

@@ -0,0 +1,25 @@
+import { PointerEvent as ReactPointerEvent, RefObject, UIEvent as ReactUIEvent } from 'react';
+import { DragEndEvent } from '@dnd-kit/core';
+/**
+ * Layout and column-behavior context.
+ *
+ * This groups scroll synchronization, sticky-column metadata, and drag/resize
+ * callbacks so header/footer/cell components do not need the full render model
+ * just to participate in layout behavior.
+ */
+export type TableLayoutContextValue = {
+    handleBodyScroll?: (event: ReactUIEvent<HTMLElement> | undefined) => void;
+    tableHeadRowRef: RefObject<HTMLDivElement>;
+    tableFooterRowRef: RefObject<HTMLDivElement>;
+    draggableColumnKeys?: string[];
+    lastResizableColumnKey?: string;
+    resettableColumnKeys?: Set<string>;
+    stickyLeftColumnCount?: number;
+    stickyFooter?: boolean;
+    onColumnDragEnd?: (event: DragEndEvent) => void;
+    onColumnResizeReset?: (columnKey: string) => void;
+    onColumnResizeStart?: (columnKey: string, event: ReactPointerEvent<HTMLDivElement>) => void;
+};
+export declare const TableLayoutContext: import('react').Context<TableLayoutContextValue | null>;
+export declare const useOptionalTableLayoutContext: () => TableLayoutContextValue | null;
+export declare const useTableLayoutContext: () => TableLayoutContextValue;

package/components/table/context/TableLayoutContext.js

@@ -0,0 +1,7 @@
+import { createContext as t, useContext as o } from "react";
+const e = t(null), a = () => o(e);
+export {
+  e as TableLayoutContext,
+  a as useOptionalTableLayoutContext
+};
+//# sourceMappingURL=TableLayoutContext.js.map

package/components/table/context/TableLayoutContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableLayoutContext.js","sources":["../../../../src/components/table/context/TableLayoutContext.tsx"],"sourcesContent":["import {\n    createContext,\n    useContext,\n    type PointerEvent as ReactPointerEvent,\n    type RefObject,\n    type UIEvent as ReactUIEvent,\n} from 'react';\nimport type { DragEndEvent } from '@dnd-kit/core';\n\n/**\n * Layout and column-behavior context.\n *\n * This groups scroll synchronization, sticky-column metadata, and drag/resize\n * callbacks so header/footer/cell components do not need the full render model\n * just to participate in layout behavior.\n */\nexport type TableLayoutContextValue = {\n    handleBodyScroll?: (event: ReactUIEvent<HTMLElement> | undefined) => void;\n    tableHeadRowRef: RefObject<HTMLDivElement>;\n    tableFooterRowRef: RefObject<HTMLDivElement>;\n    draggableColumnKeys?: string[];\n    lastResizableColumnKey?: string;\n    resettableColumnKeys?: Set<string>;\n    stickyLeftColumnCount?: number;\n    stickyFooter?: boolean;\n    onColumnDragEnd?: (event: DragEndEvent) => void;\n    onColumnResizeReset?: (columnKey: string) => void;\n    onColumnResizeStart?: (columnKey: string, event: ReactPointerEvent<HTMLDivElement>) => void;\n};\n\nexport const TableLayoutContext = createContext<TableLayoutContextValue | null>(null);\n\nexport const useOptionalTableLayoutContext = () => useContext(TableLayoutContext);\n\nexport const useTableLayoutContext = () => {\n    const context = useOptionalTableLayoutContext();\n\n    if (!context) {\n        throw new Error('Table layout context is missing.');\n    }\n\n    return context;\n};\n"],"names":["TableLayoutContext","createContext","useOptionalTableLayoutContext","useContext"],"mappings":";AA8BO,MAAMA,IAAqBC,EAA8C,IAAI,GAEvEC,IAAgC,MAAMC,EAAWH,CAAkB;"}

package/components/table/context/TableRenderConfigContext.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { MotionProps } from 'motion/react';
+import { TableCellClassName, TableExpandedRowAnimation, TableRowClassName, TableRowData, TableViewType } from '../Table.types';
+import { TableViewCardClasses } from '../model/tableView.types';
+/**
+ * Render-facing table configuration.
+ *
+ * These values come from public table props and are forwarded into row/cell/header
+ * components during rendering. They are separate from the normalized render model,
+ * which lives in `TableRenderContext`.
+ */
+export type TableRenderConfigContextValue<RowType extends TableRowData> = {
+    viewType: TableViewType;
+    isTableView: boolean;
+    cardClasses: TableViewCardClasses;
+    noRowsState: ReactNode;
+    rowKey?: keyof RowType | ((row: RowType, rowIndex: number) => string | number);
+    rowClassName?: TableRowClassName<RowType>;
+    cellClassName?: TableCellClassName<RowType>;
+    rowAnimationProps?: MotionProps | ((row: RowType, rowIndex: number) => MotionProps);
+    expandedRowAnimation?: TableExpandedRowAnimation;
+    virtualizedRows?: boolean;
+    virtualizationOverscan?: number;
+};
+export declare const TableRenderConfigContext: import('react').Context<TableRenderConfigContextValue<TableRowData> | null>;
+export declare const useOptionalTableRenderConfigContext: <RowType extends TableRowData>() => TableRenderConfigContextValue<RowType> | null;
+export declare const useTableRenderConfigContext: <RowType extends TableRowData>() => TableRenderConfigContextValue<RowType>;

package/components/table/context/TableRenderConfigContext.js

@@ -0,0 +1,7 @@
+import { createContext as e, useContext as t } from "react";
+const n = e(null), r = () => t(n);
+export {
+  n as TableRenderConfigContext,
+  r as useOptionalTableRenderConfigContext
+};
+//# sourceMappingURL=TableRenderConfigContext.js.map

package/components/table/context/TableRenderConfigContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRenderConfigContext.js","sources":["../../../../src/components/table/context/TableRenderConfigContext.tsx"],"sourcesContent":["import { createContext, useContext, type ReactNode } from 'react';\nimport type { MotionProps } from 'motion/react';\n\nimport type {\n    TableCellClassName,\n    TableExpandedRowAnimation,\n    TableRowClassName,\n    TableRowData,\n    TableViewType,\n} from '../Table.types';\nimport type { TableViewCardClasses } from '../model/tableView.types';\n\n/**\n * Render-facing table configuration.\n *\n * These values come from public table props and are forwarded into row/cell/header\n * components during rendering. They are separate from the normalized render model,\n * which lives in `TableRenderContext`.\n */\nexport type TableRenderConfigContextValue<RowType extends TableRowData> = {\n    viewType: TableViewType;\n    isTableView: boolean;\n    cardClasses: TableViewCardClasses;\n    noRowsState: ReactNode;\n    rowKey?: keyof RowType | ((row: RowType, rowIndex: number) => string | number);\n    rowClassName?: TableRowClassName<RowType>;\n    cellClassName?: TableCellClassName<RowType>;\n    rowAnimationProps?: MotionProps | ((row: RowType, rowIndex: number) => MotionProps);\n    expandedRowAnimation?: TableExpandedRowAnimation;\n    virtualizedRows?: boolean;\n    virtualizationOverscan?: number;\n};\n\nexport const TableRenderConfigContext = createContext<TableRenderConfigContextValue<TableRowData> | null>(null);\n\nexport const useOptionalTableRenderConfigContext = <RowType extends TableRowData>() =>\n    useContext(TableRenderConfigContext) as TableRenderConfigContextValue<RowType> | null;\n\nexport const useTableRenderConfigContext = <RowType extends TableRowData>() => {\n    const context = useOptionalTableRenderConfigContext<RowType>();\n\n    if (!context) {\n        throw new Error('Table render config context is missing.');\n    }\n\n    return context;\n};\n"],"names":["TableRenderConfigContext","createContext","useOptionalTableRenderConfigContext","useContext"],"mappings":";AAiCO,MAAMA,IAA2BC,EAAkE,IAAI,GAEjGC,IAAsC,MAC/CC,EAAWH,CAAwB;"}

package/components/table/context/TableRenderContext.d.ts

@@ -0,0 +1,85 @@
+import { ReactNode } from 'react';
+import { TableColumnDefinition, TableHorizontalAlign, TableRowData, TableRowId, TableVerticalAlign } from '../Table.types';
+import { TableViewHeader } from '../model/tableView.types';
+export type RenderHeaderColumn<RowType extends TableRowData> = {
+    id: string;
+    columnKey?: string;
+    label: ReactNode;
+    icon?: string;
+    filter?: ReactNode;
+    hideLabel?: boolean;
+    width?: number | string;
+    mobileLabel?: string;
+    horizontalAlign?: TableHorizontalAlign;
+    verticalAlign?: TableVerticalAlign;
+    headerClassName?: string;
+    hideOnMobile?: boolean;
+    sortable?: boolean;
+    draggable?: boolean;
+    resizeable?: boolean;
+    minResizeWidth?: number;
+    maxResizeWidth?: number;
+    row: number;
+    colSpan: number;
+    rowSpan: number;
+    source?: RowType;
+};
+/**
+ * Mutable draft of the current render pass.
+ *
+ * The table keeps React composability, but still needs a normalized table model
+ * for features such as header placement, footer detection, virtualization, and
+ * stable body-row rendering.
+ *
+ * The table therefore works in two internal stages:
+ * 1. Header/body/footer sub-components register the structure they produce into this draft.
+ * 2. `Table` promotes that draft into stable draft state and renders from that.
+ *
+ * The draft is intentionally recreated on every render pass and must not be treated
+ * as persistent state.
+ */
+export type TableRenderDraft<RowType extends TableRowData> = {
+    headerColumns: RenderHeaderColumn<RowType>[];
+    bodyRows: {
+        rowId: TableRowId;
+        rowIndex: number;
+        kind: 'data' | 'expanded' | 'expanded-full-width' | 'group' | 'group-footer' | 'spacer';
+        disabled?: boolean;
+        render: () => ReactNode;
+    }[];
+    bodyMaxHeight?: string;
+    hasFooter?: boolean;
+    hasFooterCells?: boolean;
+    hasExpandableRows?: boolean;
+};
+export type RenderBodyRow<RowType extends TableRowData> = Omit<TableRenderDraft<RowType>['bodyRows'][number], 'render'>;
+/**
+ * Structural render context.
+ *
+ * This context only carries the normalized render model built from the current
+ * render pass. Public render configuration such as `rowClassName` or card/table
+ * view mode lives in `TableRenderConfigContext`.
+ */
+export type TableRenderContextValue<RowType extends TableRowData> = {
+    header?: TableViewHeader<RowType>;
+    columns: RenderHeaderColumn<RowType>[];
+    columnDefinitionsByKey: Map<string, TableColumnDefinition<RowType>>;
+    columnIndexByKey: Map<string, number>;
+    bodyRows: RenderBodyRow<RowType>[];
+    renderBodyRow?: (row: RenderBodyRow<RowType>) => ReactNode;
+    renderDraft: TableRenderDraft<RowType>;
+    hasFooterCells?: boolean;
+    hasExpandableRows?: boolean;
+    /**
+     * Switches body rows into the registration pass.
+     *
+     * While this flag is true, row components register their normalized metadata in
+     * `renderDraft.bodyRows` and return `null` instead of rendering DOM directly.
+     * `TableBody` then performs the second pass by rendering the collected rows
+     * through `renderBodyRow(...)`.
+     */
+    isRegisteringBodyRows?: boolean;
+};
+export declare const TableRenderContext: import('react').Context<TableRenderContextValue<TableRowData> | null>;
+export declare const useOptionalTableRenderContext: <RowType extends TableRowData>() => TableRenderContextValue<RowType> | null;
+export declare const useTableRenderContext: <RowType extends TableRowData>() => TableRenderContextValue<RowType>;

package/components/table/context/TableRenderContext.js

@@ -0,0 +1,7 @@
+import { createContext as e, useContext as t } from "react";
+const n = e(null), r = () => t(n);
+export {
+  n as TableRenderContext,
+  r as useOptionalTableRenderContext
+};
+//# sourceMappingURL=TableRenderContext.js.map

package/components/table/context/TableRenderContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRenderContext.js","sources":["../../../../src/components/table/context/TableRenderContext.tsx"],"sourcesContent":["import { createContext, useContext, type ReactNode } from 'react';\n\nimport type {\n    TableColumnDefinition,\n    TableHorizontalAlign,\n    TableRowData,\n    TableRowId,\n    TableVerticalAlign,\n} from '../Table.types';\nimport type { TableViewHeader } from '../model/tableView.types';\n\nexport type RenderHeaderColumn<RowType extends TableRowData> = {\n    id: string;\n    columnKey?: string;\n    label: ReactNode;\n    icon?: string;\n    filter?: ReactNode;\n    hideLabel?: boolean;\n    width?: number | string;\n    mobileLabel?: string;\n    horizontalAlign?: TableHorizontalAlign;\n    verticalAlign?: TableVerticalAlign;\n    headerClassName?: string;\n    hideOnMobile?: boolean;\n    sortable?: boolean;\n    draggable?: boolean;\n    resizeable?: boolean;\n    minResizeWidth?: number;\n    maxResizeWidth?: number;\n    row: number;\n    colSpan: number;\n    rowSpan: number;\n    source?: RowType;\n};\n\n/**\n * Mutable draft of the current render pass.\n *\n * The table keeps React composability, but still needs a normalized table model\n * for features such as header placement, footer detection, virtualization, and\n * stable body-row rendering.\n *\n * The table therefore works in two internal stages:\n * 1. Header/body/footer sub-components register the structure they produce into this draft.\n * 2. `Table` promotes that draft into stable draft state and renders from that.\n *\n * The draft is intentionally recreated on every render pass and must not be treated\n * as persistent state.\n */\nexport type TableRenderDraft<RowType extends TableRowData> = {\n    headerColumns: RenderHeaderColumn<RowType>[];\n    bodyRows: {\n        rowId: TableRowId;\n        rowIndex: number;\n        kind: 'data' | 'expanded' | 'expanded-full-width' | 'group' | 'group-footer' | 'spacer';\n        disabled?: boolean;\n        render: () => ReactNode;\n    }[];\n    bodyMaxHeight?: string;\n    hasFooter?: boolean;\n    hasFooterCells?: boolean;\n    hasExpandableRows?: boolean;\n};\n\nexport type RenderBodyRow<RowType extends TableRowData> = Omit<TableRenderDraft<RowType>['bodyRows'][number], 'render'>;\n\n/**\n * Structural render context.\n *\n * This context only carries the normalized render model built from the current\n * render pass. Public render configuration such as `rowClassName` or card/table\n * view mode lives in `TableRenderConfigContext`.\n */\nexport type TableRenderContextValue<RowType extends TableRowData> = {\n    header?: TableViewHeader<RowType>;\n    columns: RenderHeaderColumn<RowType>[];\n    columnDefinitionsByKey: Map<string, TableColumnDefinition<RowType>>;\n    columnIndexByKey: Map<string, number>;\n    bodyRows: RenderBodyRow<RowType>[];\n    renderBodyRow?: (row: RenderBodyRow<RowType>) => ReactNode;\n    renderDraft: TableRenderDraft<RowType>;\n    hasFooterCells?: boolean;\n    hasExpandableRows?: boolean;\n    /**\n     * Switches body rows into the registration pass.\n     *\n     * While this flag is true, row components register their normalized metadata in\n     * `renderDraft.bodyRows` and return `null` instead of rendering DOM directly.\n     * `TableBody` then performs the second pass by rendering the collected rows\n     * through `renderBodyRow(...)`.\n     */\n    isRegisteringBodyRows?: boolean;\n};\n\nexport const TableRenderContext = createContext<TableRenderContextValue<TableRowData> | null>(null);\n\nexport const useOptionalTableRenderContext = <RowType extends TableRowData>() =>\n    useContext(TableRenderContext) as TableRenderContextValue<RowType> | null;\n\nexport const useTableRenderContext = <RowType extends TableRowData>() => {\n    const context = useOptionalTableRenderContext<RowType>();\n\n    if (!context) {\n        throw new Error('Table render context is missing.');\n    }\n\n    return context;\n};\n"],"names":["TableRenderContext","createContext","useOptionalTableRenderContext","useContext"],"mappings":";AA8FO,MAAMA,IAAqBC,EAA4D,IAAI,GAErFC,IAAgC,MACzCC,EAAWH,CAAkB;"}

package/components/table/context/TableStructureContext.d.ts

@@ -0,0 +1,31 @@
+import { TableHtmlAttributes, TableRowData, TableRowId } from '../Table.types';
+export type TableSection = 'header' | 'body' | 'footer';
+export type TableBodyContextValue = {
+    nextRowIndex: () => number;
+};
+export type TableHeaderContextValue = {
+    nextHeaderRowIndex: () => number;
+};
+export type TableHeaderRowContextValue = {
+    row: number;
+};
+export type TableRenderRowContextValue = {
+    nextColumnIndex: (explicitColumnIndex?: number, span?: number) => number;
+    rowIndex: number;
+    rowId: TableRowId;
+    rowData: TableRowData;
+};
+export declare const TableSectionContext: import('react').Context<TableSection | null>;
+export declare const TableBodyContext: import('react').Context<TableBodyContextValue | null>;
+export declare const TableHeaderContext: import('react').Context<TableHeaderContextValue | null>;
+export declare const TableHeaderRowContext: import('react').Context<TableHeaderRowContextValue | null>;
+export declare const TableRowContext: import('react').Context<TableRenderRowContextValue | null>;
+export declare const useOptionalTableSection: () => TableSection | null;
+export declare const useTableBodyContext: () => TableBodyContextValue | null;
+export declare const useTableHeaderContext: () => TableHeaderContextValue | null;
+export declare const useTableHeaderRowContext: () => TableHeaderRowContextValue | null;
+export declare const useTableRowContext: <RowType extends TableRowData>() => (Omit<TableRenderRowContextValue, "rowData"> & {
+    rowData: RowType;
+}) | null;
+export declare const isTableHtmlAttribute: (key: string) => boolean;
+export declare const extractTableHtmlAttributes: (props: Record<string, unknown>) => TableHtmlAttributes;

package/components/table/context/TableStructureContext.js

@@ -0,0 +1,17 @@
+import { createContext as e, useContext as n } from "react";
+const l = e(null), a = e(null), s = e(null), r = e(null), c = e(null), u = () => n(l), x = () => n(a), T = () => n(s), C = () => n(r), d = () => n(c), i = (t) => t.startsWith("aria-") || t.startsWith("data-") || ["id", "lang", "title", "translate", "dir"].includes(t), H = (t) => Object.fromEntries(Object.entries(t).filter(([o]) => i(o)));
+export {
+  a as TableBodyContext,
+  s as TableHeaderContext,
+  r as TableHeaderRowContext,
+  c as TableRowContext,
+  l as TableSectionContext,
+  H as extractTableHtmlAttributes,
+  i as isTableHtmlAttribute,
+  u as useOptionalTableSection,
+  x as useTableBodyContext,
+  T as useTableHeaderContext,
+  C as useTableHeaderRowContext,
+  d as useTableRowContext
+};
+//# sourceMappingURL=TableStructureContext.js.map

package/components/table/context/TableStructureContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableStructureContext.js","sources":["../../../../src/components/table/context/TableStructureContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport type { TableHtmlAttributes, TableRowData, TableRowId } from '../Table.types';\n\nexport type TableSection = 'header' | 'body' | 'footer';\n\nexport type TableBodyContextValue = {\n    nextRowIndex: () => number;\n};\n\nexport type TableHeaderContextValue = {\n    nextHeaderRowIndex: () => number;\n};\n\nexport type TableHeaderRowContextValue = {\n    row: number;\n};\n\nexport type TableRenderRowContextValue = {\n    nextColumnIndex: (explicitColumnIndex?: number, span?: number) => number;\n    rowIndex: number;\n    rowId: TableRowId;\n    rowData: TableRowData;\n};\n\nexport const TableSectionContext = createContext<TableSection | null>(null);\nexport const TableBodyContext = createContext<TableBodyContextValue | null>(null);\nexport const TableHeaderContext = createContext<TableHeaderContextValue | null>(null);\nexport const TableHeaderRowContext = createContext<TableHeaderRowContextValue | null>(null);\nexport const TableRowContext = createContext<TableRenderRowContextValue | null>(null);\n\nexport const useOptionalTableSection = () => useContext(TableSectionContext);\n\nexport const useTableBodyContext = () => useContext(TableBodyContext);\nexport const useTableHeaderContext = () => useContext(TableHeaderContext);\nexport const useTableHeaderRowContext = () => useContext(TableHeaderRowContext);\n\nexport const useTableRowContext = <RowType extends TableRowData>() =>\n    useContext(TableRowContext) as (Omit<TableRenderRowContextValue, 'rowData'> & { rowData: RowType }) | null;\n\nexport const isTableHtmlAttribute = (key: string) =>\n    key.startsWith('aria-') || key.startsWith('data-') || ['id', 'lang', 'title', 'translate', 'dir'].includes(key);\n\nexport const extractTableHtmlAttributes = (props: Record<string, unknown>) =>\n    Object.fromEntries(Object.entries(props).filter(([key]) => isTableHtmlAttribute(key))) as TableHtmlAttributes;\n"],"names":["TableSectionContext","createContext","TableBodyContext","TableHeaderContext","TableHeaderRowContext","TableRowContext","useOptionalTableSection","useContext","useTableBodyContext","useTableHeaderContext","useTableHeaderRowContext","useTableRowContext","isTableHtmlAttribute","key","extractTableHtmlAttributes","props"],"mappings":";AAyBO,MAAMA,IAAsBC,EAAmC,IAAI,GAC7DC,IAAmBD,EAA4C,IAAI,GACnEE,IAAqBF,EAA8C,IAAI,GACvEG,IAAwBH,EAAiD,IAAI,GAC7EI,IAAkBJ,EAAiD,IAAI,GAEvEK,IAA0B,MAAMC,EAAWP,CAAmB,GAE9DQ,IAAsB,MAAMD,EAAWL,CAAgB,GACvDO,IAAwB,MAAMF,EAAWJ,CAAkB,GAC3DO,IAA2B,MAAMH,EAAWH,CAAqB,GAEjEO,IAAqB,MAC9BJ,EAAWF,CAAe,GAEjBO,IAAuB,CAACC,MACjCA,EAAI,WAAW,OAAO,KAAKA,EAAI,WAAW,OAAO,KAAK,CAAC,MAAM,QAAQ,SAAS,aAAa,KAAK,EAAE,SAASA,CAAG,GAErGC,IAA6B,CAACC,MACvC,OAAO,YAAY,OAAO,QAAQA,CAAK,EAAE,OAAO,CAAC,CAACF,CAAG,MAAMD,EAAqBC,CAAG,CAAC,CAAC;"}

package/components/table/layout/columnSizing.d.ts

@@ -1,3 +1,3 @@
-import { TableColumnDefinition } from '../Table.types';
+import { TableColumnDefinition, TableRowData } from '../Table.types';
 export declare const toCssSize: (value?: number | string) => string | undefined;
-export declare const getColumnTrack: <RowType extends Record<string, unknown>>(column: TableColumnDefinition<RowType>, measuredMaxWidth?: string) => string;
+export declare const getColumnTrack: <RowType extends TableRowData>(column: TableColumnDefinition<RowType>, measuredMaxWidth?: string) => string;

package/components/table/layout/columnSizing.js.map

@@ -1 +1 @@
-{"version":3,"file":"columnSizing.js","sources":["../../../../src/components/table/layout/columnSizing.ts"],"sourcesContent":["import type { TableColumnDefinition } from '../Table.types';\nimport { MIN_COLUMN_WIDTH } from '../tableSizing.constants';\n\nexport const toCssSize = (value?: number | string) => {\n    if (value === undefined) {\n        return;\n    }\n\n    return typeof value === 'number' ? `${value}px` : value;\n};\n\nconst isPercentSize = (value: string) => value.trim().endsWith('%');\nconst getPercentValue = (value: string) => {\n    const percentValue = Number.parseFloat(value);\n\n    return Number.isFinite(percentValue) ? percentValue : undefined;\n};\n\nexport const getColumnTrack = <RowType extends Record<string, unknown>>(\n    column: TableColumnDefinition<RowType>,\n    measuredMaxWidth?: string\n) => {\n    const width = toCssSize(column.width);\n\n    if (width) {\n        if (isPercentSize(width)) {\n            const percentValue = getPercentValue(width);\n\n            if (percentValue !== undefined) {\n                return `minmax(0, calc(var(--table-width) * ${percentValue} / 100))`;\n            }\n\n            return `minmax(0, ${width})`;\n        }\n\n        return `minmax(0, ${width})`;\n    }\n\n    if (measuredMaxWidth) {\n        return `minmax(${MIN_COLUMN_WIDTH}, ${measuredMaxWidth})`;\n    }\n\n    // Unconfigured columns should share the available width evenly\n    // and be allowed to shrink with the table width.\n    return `minmax(${MIN_COLUMN_WIDTH}, 1fr)`;\n};\n"],"names":["toCssSize","value","isPercentSize","getPercentValue","percentValue","getColumnTrack","column","measuredMaxWidth","width","MIN_COLUMN_WIDTH"],"mappings":";AAGO,MAAMA,IAAY,CAACC,MAA4B;AAClD,MAAIA,MAAU;AAId,WAAO,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA;AACtD,GAEMC,IAAgB,CAACD,MAAkBA,EAAM,KAAA,EAAO,SAAS,GAAG,GAC5DE,IAAkB,CAACF,MAAkB;AACvC,QAAMG,IAAe,OAAO,WAAWH,CAAK;AAE5C,SAAO,OAAO,SAASG,CAAY,IAAIA,IAAe;AAC1D,GAEaC,IAAiB,CAC1BC,GACAC,MACC;AACD,QAAMC,IAAQR,EAAUM,EAAO,KAAK;AAEpC,MAAIE,GAAO;AACP,QAAIN,EAAcM,CAAK,GAAG;AACtB,YAAMJ,IAAeD,EAAgBK,CAAK;AAE1C,aAAIJ,MAAiB,SACV,uCAAuCA,CAAY,aAGvD,aAAaI,CAAK;AAAA,IAC7B;AAEA,WAAO,aAAaA,CAAK;AAAA,EAC7B;AAEA,SAAID,IACO,UAAUE,CAAgB,KAAKF,CAAgB,MAKnD,UAAUE,CAAgB;AACrC;"}
+{"version":3,"file":"columnSizing.js","sources":["../../../../src/components/table/layout/columnSizing.ts"],"sourcesContent":["import type { TableColumnDefinition, TableRowData } from '../Table.types';\nimport { MIN_COLUMN_WIDTH } from '../tableSizing.constants';\n\nexport const toCssSize = (value?: number | string) => {\n    if (value === undefined) {\n        return;\n    }\n\n    return typeof value === 'number' ? `${value}px` : value;\n};\n\nconst isPercentSize = (value: string) => value.trim().endsWith('%');\nconst getPercentValue = (value: string) => {\n    const percentValue = Number.parseFloat(value);\n\n    return Number.isFinite(percentValue) ? percentValue : undefined;\n};\n\nexport const getColumnTrack = <RowType extends TableRowData>(\n    column: TableColumnDefinition<RowType>,\n    measuredMaxWidth?: string\n) => {\n    const width = toCssSize(column.width);\n\n    if (width) {\n        if (isPercentSize(width)) {\n            const percentValue = getPercentValue(width);\n\n            if (percentValue !== undefined) {\n                return `minmax(0, calc(var(--table-width) * ${percentValue} / 100))`;\n            }\n\n            return `minmax(0, ${width})`;\n        }\n\n        return `minmax(0, ${width})`;\n    }\n\n    if (measuredMaxWidth) {\n        return `minmax(${MIN_COLUMN_WIDTH}, ${measuredMaxWidth})`;\n    }\n\n    // Unconfigured columns should share the available width evenly\n    // and be allowed to shrink with the table width.\n    return `minmax(${MIN_COLUMN_WIDTH}, 1fr)`;\n};\n"],"names":["toCssSize","value","isPercentSize","getPercentValue","percentValue","getColumnTrack","column","measuredMaxWidth","width","MIN_COLUMN_WIDTH"],"mappings":";AAGO,MAAMA,IAAY,CAACC,MAA4B;AAClD,MAAIA,MAAU;AAId,WAAO,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA;AACtD,GAEMC,IAAgB,CAACD,MAAkBA,EAAM,KAAA,EAAO,SAAS,GAAG,GAC5DE,IAAkB,CAACF,MAAkB;AACvC,QAAMG,IAAe,OAAO,WAAWH,CAAK;AAE5C,SAAO,OAAO,SAASG,CAAY,IAAIA,IAAe;AAC1D,GAEaC,IAAiB,CAC1BC,GACAC,MACC;AACD,QAAMC,IAAQR,EAAUM,EAAO,KAAK;AAEpC,MAAIE,GAAO;AACP,QAAIN,EAAcM,CAAK,GAAG;AACtB,YAAMJ,IAAeD,EAAgBK,CAAK;AAE1C,aAAIJ,MAAiB,SACV,uCAAuCA,CAAY,aAGvD,aAAaI,CAAK;AAAA,IAC7B;AAEA,WAAO,aAAaA,CAAK;AAAA,EAC7B;AAEA,SAAID,IACO,UAAUE,CAAgB,KAAKF,CAAgB,MAKnD,UAAUE,CAAgB;AACrC;"}

package/components/table/layout/useDraggableColumns.d.ts

@@ -1,12 +1,12 @@
 import { DragEndEvent } from '@dnd-kit/core';
-import { TableColumnDefinition } from '../Table.types';
-type UseDraggableColumnsProps<RowType extends Record<string, unknown>> = {
+import { TableColumnDefinition, TableRowData } from '../Table.types';
+type UseDraggableColumnsProps<RowType extends TableRowData> = {
     columns: TableColumnDefinition<RowType>[];
     columnOrder?: string[];
     enabled: boolean;
     onColumnOrderChange?: (columnOrder: string[]) => void;
 };
-export declare const useDraggableColumns: <RowType extends Record<string, unknown>>(props: UseDraggableColumnsProps<RowType>) => {
+export declare const useDraggableColumns: <RowType extends TableRowData>(props: UseDraggableColumnsProps<RowType>) => {
     draggableColumnKeys: (string | Extract<keyof RowType, string>)[];
     handleColumnDragEnd: (event: DragEndEvent) => void;
     orderedColumns: TableColumnDefinition<RowType>[];

package/components/table/layout/useDraggableColumns.js

@@ -1,17 +1,17 @@
 import { useState as D, useEffect as v } from "react";
 import h from "../../../utils/arrayMove.js";
-const K = (s, o) => {
-  const l = o.map((n) => n.key), i = new Set(l), a = s.filter((n) => i.has(n)), u = l.filter((n) => !a.includes(n));
-  return [...a, ...u];
-}, O = (s) => s.draggable !== !1, E = (s) => {
-  const { columns: o, columnOrder: l, enabled: i, onColumnOrderChange: a } = s, [u, n] = D(() => o.map((e) => e.key)), p = K(l ?? u, o), d = l !== void 0;
+const K = (s, t) => {
+  const l = t.map((n) => n.key), i = new Set(l), u = s.filter((n) => i.has(n)), a = l.filter((n) => !u.includes(n));
+  return [...u, ...a];
+}, O = (s) => s.draggable === !0, E = (s) => {
+  const { columns: t, columnOrder: l, enabled: i, onColumnOrderChange: u } = s, [a, n] = D(() => t.map((e) => e.key)), p = K(l ?? a, t), d = l !== void 0;
   v(() => {
     d || n((e) => {
-      const r = K(e, o);
+      const r = K(e, t);
       return JSON.stringify(e) === JSON.stringify(r) ? e : r;
     });
-  }, [o, d]);
-  const S = new Map(o.map((e) => [e.key, e])), m = p.flatMap((e) => {
+  }, [t, d]);
+  const S = new Map(t.map((e) => [e.key, e])), m = p.flatMap((e) => {
     const r = S.get(e);
     return r ? [r] : [];
   }), c = m.filter(O).map((e) => e.key);
@@ -23,20 +23,20 @@ const K = (s, o) => {
       const r = String(e.active.id), y = e.over ? String(e.over.id) : void 0;
       if (!y || r === y)
         return;
-      const f = c.indexOf(r), C = c.indexOf(y);
-      if (f < 0 || C < 0)
+      const C = c.indexOf(r), f = c.indexOf(y);
+      if (C < 0 || f < 0)
         return;
-      const b = h(c, f, C);
+      const b = h(c, C, f);
       let x = 0;
-      const g = m.map((t) => {
-        if (!O(t))
-          return t.key;
+      const g = m.map((o) => {
+        if (!O(o))
+          return o.key;
         const k = b[x];
-        return x += 1, k ?? t.key;
+        return x += 1, k ?? o.key;
       });
       d || n(
-        (t) => JSON.stringify(t) === JSON.stringify(g) ? t : g
-      ), a?.(g);
+        (o) => JSON.stringify(o) === JSON.stringify(g) ? o : g
+      ), u?.(g);
     },
     orderedColumns: m
   };

package/components/table/layout/useDraggableColumns.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDraggableColumns.js","sources":["../../../../src/components/table/layout/useDraggableColumns.ts"],"sourcesContent":["import type { DragEndEvent } from '@dnd-kit/core';\nimport { useEffect, useState } from 'react';\n\nimport arrayMove from '../../../utils/arrayMove';\nimport type { TableColumnDefinition } from '../Table.types';\n\ntype UseDraggableColumnsProps<RowType extends Record<string, unknown>> = {\n    columns: TableColumnDefinition<RowType>[];\n    columnOrder?: string[];\n    enabled: boolean;\n    onColumnOrderChange?: (columnOrder: string[]) => void;\n};\n\nconst reconcileColumnOrder = <RowType extends Record<string, unknown>>(\n    previousColumnOrder: string[],\n    columns: TableColumnDefinition<RowType>[]\n) => {\n    const nextColumnKeys = columns.map(column => column.key);\n    const previousColumnKeySet = new Set(nextColumnKeys);\n    const preservedColumnOrder = previousColumnOrder.filter(columnKey => previousColumnKeySet.has(columnKey));\n    const missingColumnKeys = nextColumnKeys.filter(columnKey => !preservedColumnOrder.includes(columnKey));\n\n    return [...preservedColumnOrder, ...missingColumnKeys];\n};\n\nconst isColumnDraggable = <RowType extends Record<string, unknown>>(column: TableColumnDefinition<RowType>) =>\n    column.draggable !== false;\n\nexport const useDraggableColumns = <RowType extends Record<string, unknown>>(\n    props: UseDraggableColumnsProps<RowType>\n) => {\n    const { columns, columnOrder, enabled, onColumnOrderChange } = props;\n    const [uncontrolledColumnOrder, setUncontrolledColumnOrder] = useState(() => columns.map(column => column.key));\n    const orderedColumnKeys = reconcileColumnOrder(columnOrder ?? uncontrolledColumnOrder, columns);\n    const isControlled = columnOrder !== undefined;\n\n    useEffect(() => {\n        if (isControlled) {\n            return;\n        }\n\n        setUncontrolledColumnOrder(previousColumnOrder => {\n            const nextColumnOrder = reconcileColumnOrder(previousColumnOrder, columns);\n\n            return JSON.stringify(previousColumnOrder) === JSON.stringify(nextColumnOrder)\n                ? previousColumnOrder\n                : nextColumnOrder;\n        });\n    }, [columns, isControlled]);\n\n    const columnsByKey = new Map(columns.map(column => [column.key, column]));\n    const orderedColumns = orderedColumnKeys.flatMap(columnKey => {\n        const column = columnsByKey.get(columnKey);\n\n        return column ? [column] : [];\n    });\n    const draggableColumnKeys = orderedColumns.filter(isColumnDraggable).map(column => column.key);\n\n    const handleColumnDragEnd = (event: DragEndEvent) => {\n        if (!enabled) {\n            return;\n        }\n\n        const activeColumnKey = String(event.active.id);\n        const overColumnKey = event.over ? String(event.over.id) : undefined;\n\n        if (!overColumnKey || activeColumnKey === overColumnKey) {\n            return;\n        }\n\n        const oldIndex = draggableColumnKeys.indexOf(activeColumnKey);\n        const newIndex = draggableColumnKeys.indexOf(overColumnKey);\n\n        if (oldIndex < 0 || newIndex < 0) {\n            return;\n        }\n\n        const nextDraggableColumnKeys = arrayMove(draggableColumnKeys, oldIndex, newIndex);\n        let nextDraggableColumnKeyIndex = 0;\n\n        const nextOrderedColumnKeys = orderedColumns.map(column => {\n            if (!isColumnDraggable(column)) {\n                return column.key;\n            }\n\n            const nextColumnKey = nextDraggableColumnKeys[nextDraggableColumnKeyIndex];\n\n            nextDraggableColumnKeyIndex += 1;\n\n            return nextColumnKey ?? column.key;\n        });\n\n        if (!isControlled) {\n            setUncontrolledColumnOrder(previousColumnOrder =>\n                JSON.stringify(previousColumnOrder) === JSON.stringify(nextOrderedColumnKeys)\n                    ? previousColumnOrder\n                    : nextOrderedColumnKeys\n            );\n        }\n\n        onColumnOrderChange?.(nextOrderedColumnKeys);\n    };\n\n    return {\n        draggableColumnKeys,\n        handleColumnDragEnd,\n        orderedColumns,\n    };\n};\n"],"names":["reconcileColumnOrder","previousColumnOrder","columns","nextColumnKeys","column","previousColumnKeySet","preservedColumnOrder","columnKey","missingColumnKeys","isColumnDraggable","useDraggableColumns","props","columnOrder","enabled","onColumnOrderChange","uncontrolledColumnOrder","setUncontrolledColumnOrder","useState","orderedColumnKeys","isControlled","useEffect","nextColumnOrder","columnsByKey","orderedColumns","draggableColumnKeys","event","activeColumnKey","overColumnKey","oldIndex","newIndex","nextDraggableColumnKeys","arrayMove","nextDraggableColumnKeyIndex","nextOrderedColumnKeys","nextColumnKey"],"mappings":";;AAaA,MAAMA,IAAuB,CACzBC,GACAC,MACC;AACD,QAAMC,IAAiBD,EAAQ,IAAI,CAAAE,MAAUA,EAAO,GAAG,GACjDC,IAAuB,IAAI,IAAIF,CAAc,GAC7CG,IAAuBL,EAAoB,OAAO,OAAaI,EAAqB,IAAIE,CAAS,CAAC,GAClGC,IAAoBL,EAAe,OAAO,CAAAI,MAAa,CAACD,EAAqB,SAASC,CAAS,CAAC;AAEtG,SAAO,CAAC,GAAGD,GAAsB,GAAGE,CAAiB;AACzD,GAEMC,IAAoB,CAA0CL,MAChEA,EAAO,cAAc,IAEZM,IAAsB,CAC/BC,MACC;AACD,QAAM,EAAE,SAAAT,GAAS,aAAAU,GAAa,SAAAC,GAAS,qBAAAC,MAAwBH,GACzD,CAACI,GAAyBC,CAA0B,IAAIC,EAAS,MAAMf,EAAQ,IAAI,CAAAE,MAAUA,EAAO,GAAG,CAAC,GACxGc,IAAoBlB,EAAqBY,KAAeG,GAAyBb,CAAO,GACxFiB,IAAeP,MAAgB;AAErC,EAAAQ,EAAU,MAAM;AACZ,IAAID,KAIJH,EAA2B,CAAAf,MAAuB;AAC9C,YAAMoB,IAAkBrB,EAAqBC,GAAqBC,CAAO;AAEzE,aAAO,KAAK,UAAUD,CAAmB,MAAM,KAAK,UAAUoB,CAAe,IACvEpB,IACAoB;AAAA,IACV,CAAC;AAAA,EACL,GAAG,CAACnB,GAASiB,CAAY,CAAC;AAE1B,QAAMG,IAAe,IAAI,IAAIpB,EAAQ,IAAI,CAAAE,MAAU,CAACA,EAAO,KAAKA,CAAM,CAAC,CAAC,GAClEmB,IAAiBL,EAAkB,QAAQ,CAAAX,MAAa;AAC1D,UAAMH,IAASkB,EAAa,IAAIf,CAAS;AAEzC,WAAOH,IAAS,CAACA,CAAM,IAAI,CAAA;AAAA,EAC/B,CAAC,GACKoB,IAAsBD,EAAe,OAAOd,CAAiB,EAAE,IAAI,CAAAL,MAAUA,EAAO,GAAG;AA+C7F,SAAO;AAAA,IACH,qBAAAoB;AAAA,IACA,qBA/CwB,CAACC,MAAwB;AACjD,UAAI,CAACZ;AACD;AAGJ,YAAMa,IAAkB,OAAOD,EAAM,OAAO,EAAE,GACxCE,IAAgBF,EAAM,OAAO,OAAOA,EAAM,KAAK,EAAE,IAAI;AAE3D,UAAI,CAACE,KAAiBD,MAAoBC;AACtC;AAGJ,YAAMC,IAAWJ,EAAoB,QAAQE,CAAe,GACtDG,IAAWL,EAAoB,QAAQG,CAAa;AAE1D,UAAIC,IAAW,KAAKC,IAAW;AAC3B;AAGJ,YAAMC,IAA0BC,EAAUP,GAAqBI,GAAUC,CAAQ;AACjF,UAAIG,IAA8B;AAElC,YAAMC,IAAwBV,EAAe,IAAI,CAAAnB,MAAU;AACvD,YAAI,CAACK,EAAkBL,CAAM;AACzB,iBAAOA,EAAO;AAGlB,cAAM8B,IAAgBJ,EAAwBE,CAA2B;AAEzE,eAAAA,KAA+B,GAExBE,KAAiB9B,EAAO;AAAA,MACnC,CAAC;AAED,MAAKe,KACDH;AAAA,QAA2B,CAAAf,MACvB,KAAK,UAAUA,CAAmB,MAAM,KAAK,UAAUgC,CAAqB,IACtEhC,IACAgC;AAAA,MAAA,GAIdnB,IAAsBmB,CAAqB;AAAA,IAC/C;AAAA,IAKI,gBAAAV;AAAA,EAAA;AAER;"}
+{"version":3,"file":"useDraggableColumns.js","sources":["../../../../src/components/table/layout/useDraggableColumns.ts"],"sourcesContent":["import type { DragEndEvent } from '@dnd-kit/core';\nimport { useEffect, useState } from 'react';\n\nimport arrayMove from '../../../utils/arrayMove';\nimport type { TableColumnDefinition, TableRowData } from '../Table.types';\n\ntype UseDraggableColumnsProps<RowType extends TableRowData> = {\n    columns: TableColumnDefinition<RowType>[];\n    columnOrder?: string[];\n    enabled: boolean;\n    onColumnOrderChange?: (columnOrder: string[]) => void;\n};\n\nconst reconcileColumnOrder = <RowType extends TableRowData>(\n    previousColumnOrder: string[],\n    columns: TableColumnDefinition<RowType>[]\n) => {\n    const nextColumnKeys = columns.map(column => column.key);\n    const previousColumnKeySet = new Set(nextColumnKeys);\n    const preservedColumnOrder = previousColumnOrder.filter(columnKey => previousColumnKeySet.has(columnKey));\n    const missingColumnKeys = nextColumnKeys.filter(columnKey => !preservedColumnOrder.includes(columnKey));\n\n    return [...preservedColumnOrder, ...missingColumnKeys];\n};\n\nconst isColumnDraggable = <RowType extends TableRowData>(column: TableColumnDefinition<RowType>) =>\n    column.draggable === true;\n\nexport const useDraggableColumns = <RowType extends TableRowData>(props: UseDraggableColumnsProps<RowType>) => {\n    const { columns, columnOrder, enabled, onColumnOrderChange } = props;\n    const [uncontrolledColumnOrder, setUncontrolledColumnOrder] = useState(() => columns.map(column => column.key));\n    const orderedColumnKeys = reconcileColumnOrder(columnOrder ?? uncontrolledColumnOrder, columns);\n    const isControlled = columnOrder !== undefined;\n\n    useEffect(() => {\n        if (isControlled) {\n            return;\n        }\n\n        setUncontrolledColumnOrder(previousColumnOrder => {\n            const nextColumnOrder = reconcileColumnOrder(previousColumnOrder, columns);\n\n            return JSON.stringify(previousColumnOrder) === JSON.stringify(nextColumnOrder)\n                ? previousColumnOrder\n                : nextColumnOrder;\n        });\n    }, [columns, isControlled]);\n\n    const columnsByKey = new Map(columns.map(column => [column.key, column]));\n    const orderedColumns = orderedColumnKeys.flatMap(columnKey => {\n        const column = columnsByKey.get(columnKey);\n\n        return column ? [column] : [];\n    });\n    const draggableColumnKeys = orderedColumns.filter(isColumnDraggable).map(column => column.key);\n\n    const handleColumnDragEnd = (event: DragEndEvent) => {\n        if (!enabled) {\n            return;\n        }\n\n        const activeColumnKey = String(event.active.id);\n        const overColumnKey = event.over ? String(event.over.id) : undefined;\n\n        if (!overColumnKey || activeColumnKey === overColumnKey) {\n            return;\n        }\n\n        const oldIndex = draggableColumnKeys.indexOf(activeColumnKey);\n        const newIndex = draggableColumnKeys.indexOf(overColumnKey);\n\n        if (oldIndex < 0 || newIndex < 0) {\n            return;\n        }\n\n        const nextDraggableColumnKeys = arrayMove(draggableColumnKeys, oldIndex, newIndex);\n        let nextDraggableColumnKeyIndex = 0;\n\n        const nextOrderedColumnKeys = orderedColumns.map(column => {\n            if (!isColumnDraggable(column)) {\n                return column.key;\n            }\n\n            const nextColumnKey = nextDraggableColumnKeys[nextDraggableColumnKeyIndex];\n\n            nextDraggableColumnKeyIndex += 1;\n\n            return nextColumnKey ?? column.key;\n        });\n\n        if (!isControlled) {\n            setUncontrolledColumnOrder(previousColumnOrder =>\n                JSON.stringify(previousColumnOrder) === JSON.stringify(nextOrderedColumnKeys)\n                    ? previousColumnOrder\n                    : nextOrderedColumnKeys\n            );\n        }\n\n        onColumnOrderChange?.(nextOrderedColumnKeys);\n    };\n\n    return {\n        draggableColumnKeys,\n        handleColumnDragEnd,\n        orderedColumns,\n    };\n};\n"],"names":["reconcileColumnOrder","previousColumnOrder","columns","nextColumnKeys","column","previousColumnKeySet","preservedColumnOrder","columnKey","missingColumnKeys","isColumnDraggable","useDraggableColumns","props","columnOrder","enabled","onColumnOrderChange","uncontrolledColumnOrder","setUncontrolledColumnOrder","useState","orderedColumnKeys","isControlled","useEffect","nextColumnOrder","columnsByKey","orderedColumns","draggableColumnKeys","event","activeColumnKey","overColumnKey","oldIndex","newIndex","nextDraggableColumnKeys","arrayMove","nextDraggableColumnKeyIndex","nextOrderedColumnKeys","nextColumnKey"],"mappings":";;AAaA,MAAMA,IAAuB,CACzBC,GACAC,MACC;AACD,QAAMC,IAAiBD,EAAQ,IAAI,CAAAE,MAAUA,EAAO,GAAG,GACjDC,IAAuB,IAAI,IAAIF,CAAc,GAC7CG,IAAuBL,EAAoB,OAAO,OAAaI,EAAqB,IAAIE,CAAS,CAAC,GAClGC,IAAoBL,EAAe,OAAO,CAAAI,MAAa,CAACD,EAAqB,SAASC,CAAS,CAAC;AAEtG,SAAO,CAAC,GAAGD,GAAsB,GAAGE,CAAiB;AACzD,GAEMC,IAAoB,CAA+BL,MACrDA,EAAO,cAAc,IAEZM,IAAsB,CAA+BC,MAA6C;AAC3G,QAAM,EAAE,SAAAT,GAAS,aAAAU,GAAa,SAAAC,GAAS,qBAAAC,MAAwBH,GACzD,CAACI,GAAyBC,CAA0B,IAAIC,EAAS,MAAMf,EAAQ,IAAI,CAAAE,MAAUA,EAAO,GAAG,CAAC,GACxGc,IAAoBlB,EAAqBY,KAAeG,GAAyBb,CAAO,GACxFiB,IAAeP,MAAgB;AAErC,EAAAQ,EAAU,MAAM;AACZ,IAAID,KAIJH,EAA2B,CAAAf,MAAuB;AAC9C,YAAMoB,IAAkBrB,EAAqBC,GAAqBC,CAAO;AAEzE,aAAO,KAAK,UAAUD,CAAmB,MAAM,KAAK,UAAUoB,CAAe,IACvEpB,IACAoB;AAAA,IACV,CAAC;AAAA,EACL,GAAG,CAACnB,GAASiB,CAAY,CAAC;AAE1B,QAAMG,IAAe,IAAI,IAAIpB,EAAQ,IAAI,CAAAE,MAAU,CAACA,EAAO,KAAKA,CAAM,CAAC,CAAC,GAClEmB,IAAiBL,EAAkB,QAAQ,CAAAX,MAAa;AAC1D,UAAMH,IAASkB,EAAa,IAAIf,CAAS;AAEzC,WAAOH,IAAS,CAACA,CAAM,IAAI,CAAA;AAAA,EAC/B,CAAC,GACKoB,IAAsBD,EAAe,OAAOd,CAAiB,EAAE,IAAI,CAAAL,MAAUA,EAAO,GAAG;AA+C7F,SAAO;AAAA,IACH,qBAAAoB;AAAA,IACA,qBA/CwB,CAACC,MAAwB;AACjD,UAAI,CAACZ;AACD;AAGJ,YAAMa,IAAkB,OAAOD,EAAM,OAAO,EAAE,GACxCE,IAAgBF,EAAM,OAAO,OAAOA,EAAM,KAAK,EAAE,IAAI;AAE3D,UAAI,CAACE,KAAiBD,MAAoBC;AACtC;AAGJ,YAAMC,IAAWJ,EAAoB,QAAQE,CAAe,GACtDG,IAAWL,EAAoB,QAAQG,CAAa;AAE1D,UAAIC,IAAW,KAAKC,IAAW;AAC3B;AAGJ,YAAMC,IAA0BC,EAAUP,GAAqBI,GAAUC,CAAQ;AACjF,UAAIG,IAA8B;AAElC,YAAMC,IAAwBV,EAAe,IAAI,CAAAnB,MAAU;AACvD,YAAI,CAACK,EAAkBL,CAAM;AACzB,iBAAOA,EAAO;AAGlB,cAAM8B,IAAgBJ,EAAwBE,CAA2B;AAEzE,eAAAA,KAA+B,GAExBE,KAAiB9B,EAAO;AAAA,MACnC,CAAC;AAED,MAAKe,KACDH;AAAA,QAA2B,CAAAf,MACvB,KAAK,UAAUA,CAAmB,MAAM,KAAK,UAAUgC,CAAqB,IACtEhC,IACAgC;AAAA,MAAA,GAIdnB,IAAsBmB,CAAqB;AAAA,IAC/C;AAAA,IAKI,gBAAAV;AAAA,EAAA;AAER;"}

package/components/table/layout/useHorizontalSectionSync.d.ts

@@ -2,9 +2,11 @@ import { UIEvent } from 'react';
 export declare const TABLE_HORIZONTAL_SCROLL_EVENT = "table-horizontal-scroll";
 type UseHorizontalSectionSyncProps = {
     enabled: boolean;
+    hasFooterCells?: boolean;
 };
-export declare const useHorizontalSectionSync: ({ enabled }: UseHorizontalSectionSyncProps) => {
+export declare const useHorizontalSectionSync: ({ enabled, hasFooterCells }: UseHorizontalSectionSyncProps) => {
     handleBodyScroll: (event: UIEvent<HTMLElement> | undefined) => void;
+    hasHorizontalScrollOffset: boolean;
     tableFooterRowRef: import('react').RefObject<HTMLDivElement>;
     tableHeadRowRef: import('react').RefObject<HTMLDivElement>;
 };