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

package/components/table/TableToolbarColumn.js.map

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

package/components/table/TableViewToggles.js

@@ -1,67 +1,56 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useState as y, useEffect as N } from "react";
-import { noop as u } from "es-toolkit/compat";
-import S from "../../utils/classNames.js";
-import f from "../selects/Select.js";
-const o = {
-  TABLE: "rioglyph-table-view",
-  SINGLE_CARD: "rioglyph-th-list",
-  MULTI_CARDS: "rioglyph-split-view"
-}, s = (r) => {
-  const {
-    viewType: l,
-    initialViewType: p = "TABLE",
-    disabledViewTypes: T = [],
-    onViewTypeChange: c = u,
-    tableViewTooltipContent: m,
-    tableViewLabel: d,
-    singleCardViewTooltipContent: w,
-    singleCardViewLabel: C,
-    multiCardsViewTooltipContent: L,
-    multiCardsViewLabel: g,
-    disabled: E = !1,
-    className: a,
-    ...I
-  } = r, [V, t] = y(p);
-  N(() => {
-    l && t(l);
-  }, [l]);
-  const b = (e) => {
-    t(e), c(e);
-  }, n = [
-    {
-      id: "TABLE",
-      label: d ?? m ?? "",
-      icon: /* @__PURE__ */ i("span", { className: `rioglyph ${o.TABLE}` })
-    },
-    {
-      id: "MULTI_CARDS",
-      label: g ?? L ?? "",
-      icon: /* @__PURE__ */ i("span", { className: `rioglyph ${o.MULTI_CARDS}` })
-    },
-    {
-      id: "SINGLE_CARD",
-      label: C ?? w ?? "",
-      icon: /* @__PURE__ */ i("span", { className: `rioglyph ${o.SINGLE_CARD}` })
-    }
-  ], A = n.filter((e) => !T.includes(e.id)), _ = n.some((e) => e.label), h = S("TableViewToggles", a && a);
-  return /* @__PURE__ */ i("div", { ...I, className: h, children: /* @__PURE__ */ i("div", { className: "form-group margin-bottom-0", children: /* @__PURE__ */ i(
-    f,
-    {
-      options: A,
-      value: [V],
-      onChange: (e) => e && b(e.id),
-      disabled: E,
-      showSelectedItemIcon: !0,
-      pullRight: !0,
-      dropdownClassName: _ ? void 0 : "width-auto"
-    }
-  ) }) });
+import e from "../../utils/classNames.js";
+import t from "../selects/Select.js";
+import { useEffect as n, useState as r } from "react";
+import { noop as i } from "es-toolkit/compat";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/table/TableViewToggles.tsx
+var o = {
+	TABLE: "icon-table-view",
+	SINGLE_CARD: "icon-th-list",
+	MULTI_CARDS: "icon-split-view"
+}, s = (s) => {
+	let { viewType: c, initialViewType: l = "TABLE", disabledViewTypes: u = [], onViewTypeChange: d = i, tableViewTooltipContent: f, tableViewLabel: p, singleCardViewTooltipContent: m, singleCardViewLabel: h, multiCardsViewTooltipContent: g, multiCardsViewLabel: _, disabled: v = !1, className: y, ...b } = s, [x, S] = r(l);
+	n(() => {
+		c && S(c);
+	}, [c]);
+	let C = (e) => {
+		S(e), d(e);
+	}, w = [
+		{
+			id: "TABLE",
+			label: p ?? f ?? "",
+			icon: /* @__PURE__ */ a("span", { className: `uikit-icon ${o.TABLE}` })
+		},
+		{
+			id: "MULTI_CARDS",
+			label: _ ?? g ?? "",
+			icon: /* @__PURE__ */ a("span", { className: `uikit-icon ${o.MULTI_CARDS}` })
+		},
+		{
+			id: "SINGLE_CARD",
+			label: h ?? m ?? "",
+			icon: /* @__PURE__ */ a("span", { className: `uikit-icon ${o.SINGLE_CARD}` })
+		}
+	], T = w.filter((e) => !u.includes(e.id)), E = w.some((e) => e.label), D = e("TableViewToggles", y && y);
+	return /* @__PURE__ */ a("div", {
+		...b,
+		className: D,
+		children: /* @__PURE__ */ a("div", {
+			className: "form-group margin-bottom-0",
+			children: /* @__PURE__ */ a(t, {
+				options: T,
+				value: [x],
+				onChange: (e) => e && C(e.id),
+				disabled: v,
+				showSelectedItemIcon: !0,
+				pullRight: !0,
+				dropdownClassName: E ? void 0 : "width-auto"
+			})
+		})
+	});
 };
-s.VIEW_TYPE_TABLE = "TABLE";
-s.VIEW_TYPE_SINGLE_CARD = "SINGLE_CARD";
-s.VIEW_TYPE_MULTI_CARDS = "MULTI_CARDS";
-export {
-  s as default
-};
-//# sourceMappingURL=TableViewToggles.js.map
+s.VIEW_TYPE_TABLE = "TABLE", s.VIEW_TYPE_SINGLE_CARD = "SINGLE_CARD", s.VIEW_TYPE_MULTI_CARDS = "MULTI_CARDS";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=TableViewToggles.js.map

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\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: 'MULTI_CARDS',\n            label: multiCardsViewLabel ?? multiCardsViewTooltipContent ?? '',\n            icon: <span className={`rioglyph ${typeIcons.MULTI_CARDS}`} />,\n        },\n        {\n            id: 'SINGLE_CARD',\n            label: singleCardViewLabel ?? singleCardViewTooltipContent ?? '',\n            icon: <span className={`rioglyph ${typeIcons.SINGLE_CARD}`} />,\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,OAAOa,KAAuBD,KAAgC;AAAA,MAC9D,MAAM,gBAAAY,EAAC,QAAA,EAAK,WAAW,YAAYxB,EAAU,WAAW,GAAA,CAAI;AAAA,IAAA;AAAA,IAEhE;AAAA,MACI,IAAI;AAAA,MACJ,OAAOW,KAAuBD,KAAgC;AAAA,MAC9D,MAAM,gBAAAc,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","names":[],"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: 'icon-table-view',\n    SINGLE_CARD: 'icon-th-list',\n    MULTI_CARDS: 'icon-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={`uikit-icon ${typeIcons.TABLE}`} />,\n        },\n        {\n            id: 'MULTI_CARDS',\n            label: multiCardsViewLabel ?? multiCardsViewTooltipContent ?? '',\n            icon: <span className={`uikit-icon ${typeIcons.MULTI_CARDS}`} />,\n        },\n        {\n            id: 'SINGLE_CARD',\n            label: singleCardViewLabel ?? singleCardViewTooltipContent ?? '',\n            icon: <span className={`uikit-icon ${typeIcons.SINGLE_CARD}`} />,\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"],"mappings":";;;;;;AAMA,IAAM,IAAsD;CACxD,OAAO;CACP,aAAa;CACb,aAAa;AACjB,GA2GM,KAAoB,MAAiC;CACvD,IAAM,EACF,aACA,qBAAkB,SAClB,uBAAoB,CAAC,GACrB,sBAAmB,GACnB,4BACA,mBACA,iCACA,wBACA,iCACA,wBACA,cAAW,IACX,cACA,GAAG,MACH,GAEE,CAAC,GAAkB,KAAuB,EAAS,CAAe;CAGxE,QAAgB;EACZ,AAAI,KACA,EAAoB,CAAQ;CAEpC,GAAG,CAAC,CAAQ,CAAC;CAEb,IAAM,KAAe,MAAiC;EAElD,AADA,EAAoB,CAAE,GACtB,EAAiB,CAAE;CACvB,GAEM,IAAsC;EACxC;GACI,IAAI;GACJ,OAAO,KAAkB,KAA2B;GACpD,MAAM,kBAAC,QAAD,EAAM,WAAW,cAAc,EAAU,QAAU,CAAA;EAC7D;EACA;GACI,IAAI;GACJ,OAAO,KAAuB,KAAgC;GAC9D,MAAM,kBAAC,QAAD,EAAM,WAAW,cAAc,EAAU,cAAgB,CAAA;EACnE;EACA;GACI,IAAI;GACJ,OAAO,KAAuB,KAAgC;GAC9D,MAAM,kBAAC,QAAD,EAAM,WAAW,cAAc,EAAU,cAAgB,CAAA;EACnE;CACJ,GAEM,IAAU,EAAW,QAAO,MAAU,CAAC,EAAkB,SAAS,EAAO,EAAE,CAAC,GAC5E,IAAkB,EAAW,MAAK,MAAU,EAAO,KAAK,GAExD,IAAoB,EAAW,oBAAoB,KAAa,CAAS;CAE/E,OACI,kBAAC,OAAD;EAAK,GAAI;EAAgB,WAAW;YAChC,kBAAC,OAAD;GAAK,WAAU;aACX,kBAAC,GAAD;IACa;IACT,OAAO,CAAC,CAAgB;IACxB,WAAU,MAAQ,KAAQ,EAAY,EAAK,EAA8B;IAC/D;IACV,sBAAA;IACA,WAAA;IACA,mBAAoB,IAAiC,KAAA,IAAf;GACzC,CAAA;EACA,CAAA;CACJ,CAAA;AAEb;AAGA,EAAiB,kBAAkB,SACnC,EAAiB,wBAAwB,eACzC,EAAiB,wBAAwB"}

package/components/table/context/TableInteractionContext.js

@@ -1,7 +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
+import { createContext as e, useContext as t } from "react";
+//#region src/components/table/context/TableInteractionContext.tsx
+var n = e(null), r = () => t(n);
+//#endregion
+export { n as TableInteractionContext, r as useOptionalTableInteractionContext };
+
+//# sourceMappingURL=TableInteractionContext.js.map

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

@@ -1 +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    selectableRowIdSet: Set<TableRowId>;\n    selectionHeaderContent?: ReactNode;\n    isAllRowsSelected?: boolean;\n    isSomeRowsSelected?: boolean;\n    hasSelectableRows?: boolean;\n    hideSelectionCheckboxesForExcludedRows?: 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":";AAiCO,MAAMA,IAA0BC,EAAiE,IAAI,GAE/FC,IAAqC,MAC9CC,EAAWH,CAAuB;"}
+{"version":3,"file":"TableInteractionContext.js","names":[],"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    selectableRowIdSet: Set<TableRowId>;\n    selectionHeaderContent?: ReactNode;\n    isAllRowsSelected?: boolean;\n    isSomeRowsSelected?: boolean;\n    hasSelectableRows?: boolean;\n    hideSelectionCheckboxesForExcludedRows?: 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"],"mappings":";;AAiCA,IAAa,IAA0B,EAAiE,IAAI,GAE/F,UACT,EAAW,CAAuB"}

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

@@ -9,8 +9,8 @@ import { DragEndEvent } from '@dnd-kit/core';
  */
 export type TableLayoutContextValue = {
     handleBodyScroll?: (event: ReactUIEvent<HTMLElement> | undefined) => void;
-    tableHeadRowRef: RefObject<HTMLDivElement>;
-    tableFooterRowRef: RefObject<HTMLDivElement>;
+    tableHeadRowRef: RefObject<HTMLDivElement | null>;
+    tableFooterRowRef: RefObject<HTMLDivElement | null>;
     draggableColumnKeys?: string[];
     lastResizableColumnKey?: string;
     resettableColumnKeys?: Set<string>;

package/components/table/context/TableLayoutContext.js

@@ -1,7 +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
+import { createContext as e, useContext as t } from "react";
+//#region src/components/table/context/TableLayoutContext.tsx
+var n = e(null), r = () => t(n);
+//#endregion
+export { n as TableLayoutContext, r as useOptionalTableLayoutContext };
+
+//# sourceMappingURL=TableLayoutContext.js.map

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

@@ -1 +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    stickyRightColumnCount?: 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":";AA+BO,MAAMA,IAAqBC,EAA8C,IAAI,GAEvEC,IAAgC,MAAMC,EAAWH,CAAkB;"}
+{"version":3,"file":"TableLayoutContext.js","names":[],"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 | null>;\n    tableFooterRowRef: RefObject<HTMLDivElement | null>;\n    draggableColumnKeys?: string[];\n    lastResizableColumnKey?: string;\n    resettableColumnKeys?: Set<string>;\n    stickyLeftColumnCount?: number;\n    stickyRightColumnCount?: 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"],"mappings":";;AA+BA,IAAa,IAAqB,EAA8C,IAAI,GAEvE,UAAsC,EAAW,CAAkB"}

package/components/table/context/TableRenderConfigContext.js

@@ -1,7 +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
+//#region src/components/table/context/TableRenderConfigContext.tsx
+var n = e(null), r = () => t(n);
+//#endregion
+export { n as TableRenderConfigContext, r as useOptionalTableRenderConfigContext };
+
+//# sourceMappingURL=TableRenderConfigContext.js.map

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

@@ -1 +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    TableVerticalAlign,\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    selectionCheckboxVerticalAlignment?: TableVerticalAlign;\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":";AAmCO,MAAMA,IAA2BC,EAAkE,IAAI,GAEjGC,IAAsC,MAC/CC,EAAWH,CAAwB;"}
+{"version":3,"file":"TableRenderConfigContext.js","names":[],"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    TableVerticalAlign,\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    selectionCheckboxVerticalAlignment?: TableVerticalAlign;\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"],"mappings":";;AAmCA,IAAa,IAA2B,EAAkE,IAAI,GAEjG,UACT,EAAW,CAAwB"}

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

@@ -1,11 +1,12 @@
 import { ReactNode } from 'react';
 import { TableColumnDefinition, TableHorizontalAlign, TableRowData, TableRowId, TableVerticalAlign } from '../Table.types';
 import { TableViewHeader } from '../model/tableView.types';
+import { IconType } from '../../icon/Icon';
 export type RenderHeaderColumn<RowType extends TableRowData> = {
     id: string;
     columnKey?: string;
     label: ReactNode;
-    icon?: string;
+    icon?: IconType;
     filter?: ReactNode;
     hideLabel?: boolean;
     width?: number | string;

package/components/table/context/TableRenderContext.js

@@ -1,7 +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
+//#region src/components/table/context/TableRenderContext.tsx
+var n = e(null), r = () => t(n);
+//#endregion
+export { n as TableRenderContext, r as useOptionalTableRenderContext };
+
+//# sourceMappingURL=TableRenderContext.js.map

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

@@ -1 +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        selectable?: 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":";AA+FO,MAAMA,IAAqBC,EAA4D,IAAI,GAErFC,IAAgC,MACzCC,EAAWH,CAAkB;"}
+{"version":3,"file":"TableRenderContext.js","names":[],"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';\nimport type { IconType } from '../../icon/Icon';\n\nexport type RenderHeaderColumn<RowType extends TableRowData> = {\n    id: string;\n    columnKey?: string;\n    label: ReactNode;\n    icon?: IconType;\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        selectable?: 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"],"mappings":";;AAgGA,IAAa,IAAqB,EAA4D,IAAI,GAErF,UACT,EAAW,CAAkB"}

package/components/table/context/TableStructureContext.js

@@ -1,17 +1,13 @@
-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
+import { createContext as e, useContext as t } from "react";
+//#region src/components/table/context/TableStructureContext.tsx
+var n = e(null), r = e(null), i = e(null), a = e(null), o = e(null), s = () => t(n), c = () => t(r), l = () => t(i), u = () => t(a), d = () => t(o), f = (e) => e.startsWith("aria-") || e.startsWith("data-") || [
+	"id",
+	"lang",
+	"title",
+	"translate",
+	"dir"
+].includes(e), p = (e) => Object.fromEntries(Object.entries(e).filter(([e]) => f(e)));
+//#endregion
+export { r as TableBodyContext, i as TableHeaderContext, a as TableHeaderRowContext, o as TableRowContext, n as TableSectionContext, p as extractTableHtmlAttributes, f as isTableHtmlAttribute, s as useOptionalTableSection, c as useTableBodyContext, l as useTableHeaderContext, u as useTableHeaderRowContext, d as useTableRowContext };
+
+//# sourceMappingURL=TableStructureContext.js.map

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

@@ -1 +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;"}
+{"version":3,"file":"TableStructureContext.js","names":[],"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"],"mappings":";;AAyBA,IAAa,IAAsB,EAAmC,IAAI,GAC7D,IAAmB,EAA4C,IAAI,GACnE,IAAqB,EAA8C,IAAI,GACvE,IAAwB,EAAiD,IAAI,GAC7E,IAAkB,EAAiD,IAAI,GAEvE,UAAgC,EAAW,CAAmB,GAE9D,UAA4B,EAAW,CAAgB,GACvD,UAA8B,EAAW,CAAkB,GAC3D,UAAiC,EAAW,CAAqB,GAEjE,UACT,EAAW,CAAe,GAEjB,KAAwB,MACjC,EAAI,WAAW,OAAO,KAAK,EAAI,WAAW,OAAO,KAAK;CAAC;CAAM;CAAQ;CAAS;CAAa;AAAK,CAAC,CAAC,SAAS,CAAG,GAErG,KAA8B,MACvC,OAAO,YAAY,OAAO,QAAQ,CAAK,CAAC,CAAC,QAAQ,CAAC,OAAS,EAAqB,CAAG,CAAC,CAAC"}

package/components/table/layout/columnSizing.js

@@ -1,23 +1,22 @@
-import { MIN_COLUMN_WIDTH as i } from "../tableSizing.constants.js";
-const o = (t) => {
-  if (t !== void 0)
-    return typeof t == "number" ? `${t}px` : t;
-}, m = (t) => t.trim().endsWith("%"), c = (t) => {
-  const r = Number.parseFloat(t);
-  return Number.isFinite(r) ? r : void 0;
-}, u = (t, r) => {
-  const n = o(t.width);
-  if (n) {
-    if (m(n)) {
-      const e = c(n);
-      return e !== void 0 ? `minmax(0, calc(var(--table-width) * ${e} / 100))` : `minmax(0, ${n})`;
-    }
-    return `minmax(0, ${n})`;
-  }
-  return r ? `minmax(${i}, ${r})` : `minmax(${i}, 1fr)`;
+import { MIN_COLUMN_WIDTH as e } from "../tableSizing.constants.js";
+//#region src/components/table/layout/columnSizing.ts
+var t = (e) => {
+	if (e !== void 0) return typeof e == "number" ? `${e}px` : e;
+}, n = (e) => e.trim().endsWith("%"), r = (e) => {
+	let t = Number.parseFloat(e);
+	return Number.isFinite(t) ? t : void 0;
+}, i = (i, a) => {
+	let o = t(i.width);
+	if (o) {
+		if (n(o)) {
+			let e = r(o);
+			return e === void 0 ? `minmax(0, ${o})` : `minmax(0, calc(var(--table-width) * ${e} / 100))`;
+		}
+		return `minmax(0, ${o})`;
+	}
+	return a ? `minmax(${e}, ${a})` : `minmax(${e}, 1fr)`;
 };
-export {
-  u as getColumnTrack,
-  o as toCssSize
-};
-//# sourceMappingURL=columnSizing.js.map
+//#endregion
+export { i as getColumnTrack, t as toCssSize };
+
+//# sourceMappingURL=columnSizing.js.map

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, 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;"}
+{"version":3,"file":"columnSizing.js","names":[],"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"],"mappings":";;AAGA,IAAa,KAAa,MAA4B;CAC9C,UAAU,KAAA,GAId,OAAO,OAAO,KAAU,WAAW,GAAG,EAAM,MAAM;AACtD,GAEM,KAAiB,MAAkB,EAAM,KAAK,CAAC,CAAC,SAAS,GAAG,GAC5D,KAAmB,MAAkB;CACvC,IAAM,IAAe,OAAO,WAAW,CAAK;CAE5C,OAAO,OAAO,SAAS,CAAY,IAAI,IAAe,KAAA;AAC1D,GAEa,KACT,GACA,MACC;CACD,IAAM,IAAQ,EAAU,EAAO,KAAK;CAEpC,IAAI,GAAO;EACP,IAAI,EAAc,CAAK,GAAG;GACtB,IAAM,IAAe,EAAgB,CAAK;GAM1C,OAJI,MAAiB,KAAA,IAId,aAAa,EAAM,KAHf,uCAAuC,EAAa;EAInE;EAEA,OAAO,aAAa,EAAM;CAC9B;CAQA,OANI,IACO,UAAU,EAAiB,IAAI,EAAiB,KAKpD,UAAU,EAAiB;AACtC"}

package/components/table/layout/useDraggableColumns.js

@@ -1,47 +1,40 @@
-import { useState as D, useEffect as v } from "react";
-import h from "../../../utils/arrayMove.js";
-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, t);
-      return JSON.stringify(e) === JSON.stringify(r) ? e : r;
-    });
-  }, [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);
-  return {
-    draggableColumnKeys: c,
-    handleColumnDragEnd: (e) => {
-      if (!i)
-        return;
-      const r = String(e.active.id), y = e.over ? String(e.over.id) : void 0;
-      if (!y || r === y)
-        return;
-      const C = c.indexOf(r), f = c.indexOf(y);
-      if (C < 0 || f < 0)
-        return;
-      const b = h(c, C, f);
-      let x = 0;
-      const g = m.map((o) => {
-        if (!O(o))
-          return o.key;
-        const k = b[x];
-        return x += 1, k ?? o.key;
-      });
-      d || n(
-        (o) => JSON.stringify(o) === JSON.stringify(g) ? o : g
-      ), u?.(g);
-    },
-    orderedColumns: m
-  };
+import e from "../../../utils/arrayMove.js";
+import { useEffect as t, useState as n } from "react";
+//#region src/components/table/layout/useDraggableColumns.ts
+var r = (e, t) => {
+	let n = t.map((e) => e.key), r = new Set(n), i = e.filter((e) => r.has(e)), a = n.filter((e) => !i.includes(e));
+	return [...i, ...a];
+}, i = (e) => e.draggable === !0, a = (a) => {
+	let { columns: o, columnOrder: s, enabled: c, onColumnOrderChange: l } = a, [u, d] = n(() => o.map((e) => e.key)), f = r(s ?? u, o), p = s !== void 0;
+	t(() => {
+		p || d((e) => {
+			let t = r(e, o);
+			return JSON.stringify(e) === JSON.stringify(t) ? e : t;
+		});
+	}, [o, p]);
+	let m = new Map(o.map((e) => [e.key, e])), h = f.flatMap((e) => {
+		let t = m.get(e);
+		return t ? [t] : [];
+	}), g = h.filter(i).map((e) => e.key);
+	return {
+		draggableColumnKeys: g,
+		handleColumnDragEnd: (t) => {
+			if (!c) return;
+			let n = String(t.active.id), r = t.over ? String(t.over.id) : void 0;
+			if (!r || n === r) return;
+			let a = g.indexOf(n), o = g.indexOf(r);
+			if (a < 0 || o < 0) return;
+			let s = e(g, a, o), u = 0, f = h.map((e) => {
+				if (!i(e)) return e.key;
+				let t = s[u];
+				return u += 1, t ?? e.key;
+			});
+			p || d((e) => JSON.stringify(e) === JSON.stringify(f) ? e : f), l?.(f);
+		},
+		orderedColumns: h
+	};
 };
-export {
-  E as useDraggableColumns
-};
-//# sourceMappingURL=useDraggableColumns.js.map
+//#endregion
+export { a as useDraggableColumns };
+
+//# sourceMappingURL=useDraggableColumns.js.map

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, 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;"}
+{"version":3,"file":"useDraggableColumns.js","names":[],"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"],"mappings":";;;AAaA,IAAM,KACF,GACA,MACC;CACD,IAAM,IAAiB,EAAQ,KAAI,MAAU,EAAO,GAAG,GACjD,IAAuB,IAAI,IAAI,CAAc,GAC7C,IAAuB,EAAoB,QAAO,MAAa,EAAqB,IAAI,CAAS,CAAC,GAClG,IAAoB,EAAe,QAAO,MAAa,CAAC,EAAqB,SAAS,CAAS,CAAC;CAEtG,OAAO,CAAC,GAAG,GAAsB,GAAG,CAAiB;AACzD,GAEM,KAAmD,MACrD,EAAO,cAAc,IAEZ,KAAqD,MAA6C;CAC3G,IAAM,EAAE,YAAS,gBAAa,YAAS,2BAAwB,GACzD,CAAC,GAAyB,KAA8B,QAAe,EAAQ,KAAI,MAAU,EAAO,GAAG,CAAC,GACxG,IAAoB,EAAqB,KAAe,GAAyB,CAAO,GACxF,IAAe,MAAgB,KAAA;CAErC,QAAgB;EACR,KAIJ,GAA2B,MAAuB;GAC9C,IAAM,IAAkB,EAAqB,GAAqB,CAAO;GAEzE,OAAO,KAAK,UAAU,CAAmB,MAAM,KAAK,UAAU,CAAe,IACvE,IACA;EACV,CAAC;CACL,GAAG,CAAC,GAAS,CAAY,CAAC;CAE1B,IAAM,IAAe,IAAI,IAAI,EAAQ,KAAI,MAAU,CAAC,EAAO,KAAK,CAAM,CAAC,CAAC,GAClE,IAAiB,EAAkB,SAAQ,MAAa;EAC1D,IAAM,IAAS,EAAa,IAAI,CAAS;EAEzC,OAAO,IAAS,CAAC,CAAM,IAAI,CAAC;CAChC,CAAC,GACK,IAAsB,EAAe,OAAO,CAAiB,CAAC,CAAC,KAAI,MAAU,EAAO,GAAG;CA+C7F,OAAO;EACH;EACA,sBA/CyB,MAAwB;GACjD,IAAI,CAAC,GACD;GAGJ,IAAM,IAAkB,OAAO,EAAM,OAAO,EAAE,GACxC,IAAgB,EAAM,OAAO,OAAO,EAAM,KAAK,EAAE,IAAI,KAAA;GAE3D,IAAI,CAAC,KAAiB,MAAoB,GACtC;GAGJ,IAAM,IAAW,EAAoB,QAAQ,CAAe,GACtD,IAAW,EAAoB,QAAQ,CAAa;GAE1D,IAAI,IAAW,KAAK,IAAW,GAC3B;GAGJ,IAAM,IAA0B,EAAU,GAAqB,GAAU,CAAQ,GAC7E,IAA8B,GAE5B,IAAwB,EAAe,KAAI,MAAU;IACvD,IAAI,CAAC,EAAkB,CAAM,GACzB,OAAO,EAAO;IAGlB,IAAM,IAAgB,EAAwB;IAI9C,OAFA,KAA+B,GAExB,KAAiB,EAAO;GACnC,CAAC;GAUD,AARK,KACD,GAA2B,MACvB,KAAK,UAAU,CAAmB,MAAM,KAAK,UAAU,CAAqB,IACtE,IACA,CACV,GAGJ,IAAsB,CAAqB;EAC/C;EAKI;CACJ;AACJ"}