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

package/components/table/TableViewToggles.js

@@ -1,95 +1,67 @@
-import { jsxs as E, jsx as t } from "react/jsx-runtime";
-import { useState as f, useEffect as g } from "react";
-import { noop as _ } from "es-toolkit/compat";
-import u from "../../utils/classNames.js";
-import A from "../overlay/OverlayTrigger.js";
-import I from "../tooltip/Tooltip.js";
-const L = (i, e) => /* @__PURE__ */ t(
-  A,
-  {
-    placement: "bottom",
-    overlay: /* @__PURE__ */ t(I, { id: "tooltip", allowOnTouch: !0, children: i }),
-    children: e
-  }
-), h = {
+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"
-}, w = (i) => {
-  const { viewType: e, currentViewType: s, disabledViewTypes: n, tooltipContent: l, onClick: r, disabled: p } = i;
-  if (n.includes(e))
-    return null;
-  const a = u(
-    "btn btn-default btn-icon-only",
-    p && "disabled pointer-events-none",
-    e === s && "active"
-  ), o = /* @__PURE__ */ t("button", { className: a, type: "button", onClick: () => r(e), children: /* @__PURE__ */ t("span", { className: `rioglyph ${h[e]}` }) });
-  return l ? L(l, o) : o;
-}, y = (i) => {
+}, s = (r) => {
   const {
-    viewType: e,
-    initialViewType: s = "TABLE",
-    disabledViewTypes: n = [],
-    onViewTypeChange: l = _,
-    tableViewTooltipContent: r,
-    singleCardViewTooltipContent: p,
-    multiCardsViewTooltipContent: a,
-    disabled: o = !1,
-    className: C,
-    ...V
-  } = i, [T, d] = f(s);
-  g(() => {
-    e && d(e);
-  }, [e]);
-  const c = (m) => {
-    d(m), l(m);
-  }, b = u(
-    "TableViewToggles",
-    "btn-group",
-    "display-flex",
-    "flex-row",
-    C && C
-  );
-  return /* @__PURE__ */ E("div", { ...V, className: b, children: [
-    /* @__PURE__ */ t(
-      w,
-      {
-        viewType: "TABLE",
-        currentViewType: T,
-        disabledViewTypes: n,
-        tooltipContent: r,
-        onClick: c,
-        disabled: o
-      }
-    ),
-    /* @__PURE__ */ t(
-      w,
-      {
-        viewType: "SINGLE_CARD",
-        currentViewType: T,
-        disabledViewTypes: n,
-        tooltipContent: p,
-        onClick: c,
-        disabled: o
-      }
-    ),
-    /* @__PURE__ */ t(
-      w,
-      {
-        viewType: "MULTI_CARDS",
-        currentViewType: T,
-        disabledViewTypes: n,
-        tooltipContent: a,
-        onClick: c,
-        disabled: o
-      }
-    )
-  ] });
+    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: "SINGLE_CARD",
+      label: C ?? w ?? "",
+      icon: /* @__PURE__ */ i("span", { className: `rioglyph ${o.SINGLE_CARD}` })
+    },
+    {
+      id: "MULTI_CARDS",
+      label: g ?? L ?? "",
+      icon: /* @__PURE__ */ i("span", { className: `rioglyph ${o.MULTI_CARDS}` })
+    }
+  ], 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"
+    }
+  ) }) });
 };
-y.VIEW_TYPE_TABLE = "TABLE";
-y.VIEW_TYPE_SINGLE_CARD = "SINGLE_CARD";
-y.VIEW_TYPE_MULTI_CARDS = "MULTI_CARDS";
+s.VIEW_TYPE_TABLE = "TABLE";
+s.VIEW_TYPE_SINGLE_CARD = "SINGLE_CARD";
+s.VIEW_TYPE_MULTI_CARDS = "MULTI_CARDS";
 export {
-  y as default
+  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 JSX, type ReactNode, useEffect, useState } from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport OverlayTrigger from '../overlay/OverlayTrigger';\nimport Tooltip from '../tooltip/Tooltip';\n\n// TODO: add responsive behaviour and trigger a change from table to list for small screen -> see DriverAdministration\n\nconst wrapWithTooltip = (tooltipContent: ReactNode, element: JSX.Element) => (\n    <OverlayTrigger\n        placement='bottom'\n        overlay={\n            <Tooltip id='tooltip' allowOnTouch>\n                {tooltipContent}\n            </Tooltip>\n        }\n    >\n        {element}\n    </OverlayTrigger>\n);\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 TypeButtonProps = {\n    viewType: TableViewTogglesViewType;\n    currentViewType: TableViewTogglesViewType;\n    disabledViewTypes: TableViewTogglesViewType[];\n    tooltipContent: ReactNode;\n    onClick: (vt: TableViewTogglesViewType) => void;\n    disabled: boolean;\n};\n\nconst TypeButton = (props: TypeButtonProps) => {\n    const { viewType, currentViewType, disabledViewTypes, tooltipContent, onClick, disabled } = props;\n\n    if (disabledViewTypes.includes(viewType)) {\n        return null;\n    }\n\n    const classes = classNames(\n        'btn btn-default btn-icon-only',\n        disabled && 'disabled pointer-events-none',\n        viewType === currentViewType && 'active'\n    );\n\n    const button = (\n        <button className={classes} type='button' onClick={() => onClick(viewType)}>\n            <span className={`rioglyph ${typeIcons[viewType]}`} />\n        </button>\n    );\n\n    return tooltipContent ? wrapWithTooltip(tooltipContent, button) : button;\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    tableViewTooltipContent?: string | ReactNode;\n\n    /**\n     * Optional tooltip content for single card view button.\n     */\n    singleCardViewTooltipContent?: string | ReactNode;\n\n    /**\n     * Optional tooltip content for multi card view button.\n     */\n    multiCardsViewTooltipContent?: 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        singleCardViewTooltipContent,\n        multiCardsViewTooltipContent,\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 wrapperClassNames = classNames(\n        'TableViewToggles',\n        'btn-group',\n        'display-flex',\n        'flex-row',\n        className && className\n    );\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames}>\n            <TypeButton\n                viewType='TABLE'\n                currentViewType={internalViewType}\n                disabledViewTypes={disabledViewTypes}\n                tooltipContent={tableViewTooltipContent}\n                onClick={setViewType}\n                disabled={disabled}\n            />\n\n            <TypeButton\n                viewType='SINGLE_CARD'\n                currentViewType={internalViewType}\n                disabledViewTypes={disabledViewTypes}\n                tooltipContent={singleCardViewTooltipContent}\n                onClick={setViewType}\n                disabled={disabled}\n            />\n\n            <TypeButton\n                viewType='MULTI_CARDS'\n                currentViewType={internalViewType}\n                disabledViewTypes={disabledViewTypes}\n                tooltipContent={multiCardsViewTooltipContent}\n                onClick={setViewType}\n                disabled={disabled}\n            />\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":["wrapWithTooltip","tooltipContent","element","jsx","OverlayTrigger","Tooltip","typeIcons","TypeButton","props","viewType","currentViewType","disabledViewTypes","onClick","disabled","classes","classNames","button","TableViewToggles","initialViewType","onViewTypeChange","noop","tableViewTooltipContent","singleCardViewTooltipContent","multiCardsViewTooltipContent","className","remainingProps","internalViewType","setInternalViewType","useState","useEffect","setViewType","vt","wrapperClassNames","jsxs"],"mappings":";;;;;;AASA,MAAMA,IAAkB,CAACC,GAA2BC,MAChD,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,WAAU;AAAA,IACV,SACI,gBAAAD,EAACE,GAAA,EAAQ,IAAG,WAAU,cAAY,IAC7B,UAAAJ,GACL;AAAA,IAGH,UAAAC;AAAA,EAAA;AACL,GAGEI,IAAsD;AAAA,EACxD,OAAO;AAAA,EACP,aAAa;AAAA,EACb,aAAa;AACjB,GAWMC,IAAa,CAACC,MAA2B;AAC3C,QAAM,EAAE,UAAAC,GAAU,iBAAAC,GAAiB,mBAAAC,GAAmB,gBAAAV,GAAgB,SAAAW,GAAS,UAAAC,MAAaL;AAE5F,MAAIG,EAAkB,SAASF,CAAQ;AACnC,WAAO;AAGX,QAAMK,IAAUC;AAAA,IACZ;AAAA,IACAF,KAAY;AAAA,IACZJ,MAAaC,KAAmB;AAAA,EAAA,GAG9BM,sBACD,UAAA,EAAO,WAAWF,GAAS,MAAK,UAAS,SAAS,MAAMF,EAAQH,CAAQ,GACrE,UAAA,gBAAAN,EAAC,UAAK,WAAW,YAAYG,EAAUG,CAAQ,CAAC,IAAI,EAAA,CACxD;AAGJ,SAAOR,IAAiBD,EAAgBC,GAAgBe,CAAM,IAAIA;AACtE,GAkFMC,IAAmB,CAACT,MAAiC;AACvD,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,iBAAAS,IAAkB;AAAA,IAClB,mBAAAP,IAAoB,CAAA;AAAA,IACpB,kBAAAQ,IAAmBC;AAAA,IACnB,yBAAAC;AAAA,IACA,8BAAAC;AAAA,IACA,8BAAAC;AAAA,IACA,UAAAV,IAAW;AAAA,IACX,WAAAW;AAAA,IACA,GAAGC;AAAA,EAAA,IACHjB,GAEE,CAACkB,GAAkBC,CAAmB,IAAIC,EAASV,CAAe;AAGxE,EAAAW,EAAU,MAAM;AACZ,IAAIpB,KACAkB,EAAoBlB,CAAQ;AAAA,EAEpC,GAAG,CAACA,CAAQ,CAAC;AAEb,QAAMqB,IAAc,CAACC,MAAiC;AAClD,IAAAJ,EAAoBI,CAAE,GACtBZ,EAAiBY,CAAE;AAAA,EACvB,GAEMC,IAAoBjB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAS,KAAaA;AAAA,EAAA;AAGjB,SACI,gBAAAS,EAAC,OAAA,EAAK,GAAGR,GAAgB,WAAWO,GAChC,UAAA;AAAA,IAAA,gBAAA7B;AAAA,MAACI;AAAA,MAAA;AAAA,QACG,UAAS;AAAA,QACT,iBAAiBmB;AAAA,QACjB,mBAAAf;AAAA,QACA,gBAAgBU;AAAA,QAChB,SAASS;AAAA,QACT,UAAAjB;AAAA,MAAA;AAAA,IAAA;AAAA,IAGJ,gBAAAV;AAAA,MAACI;AAAA,MAAA;AAAA,QACG,UAAS;AAAA,QACT,iBAAiBmB;AAAA,QACjB,mBAAAf;AAAA,QACA,gBAAgBW;AAAA,QAChB,SAASQ;AAAA,QACT,UAAAjB;AAAA,MAAA;AAAA,IAAA;AAAA,IAGJ,gBAAAV;AAAA,MAACI;AAAA,MAAA;AAAA,QACG,UAAS;AAAA,QACT,iBAAiBmB;AAAA,QACjB,mBAAAf;AAAA,QACA,gBAAgBY;AAAA,QAChB,SAASO;AAAA,QACT,UAAAjB;AAAA,MAAA;AAAA,IAAA;AAAA,EACJ,GACJ;AAER;AAGAI,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\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;"}

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

@@ -0,0 +1,3 @@
+import { TableColumnDefinition } 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;

package/components/table/layout/columnSizing.js

@@ -0,0 +1,23 @@
+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)`;
+};
+export {
+  u as getColumnTrack,
+  o as toCssSize
+};
+//# sourceMappingURL=columnSizing.js.map

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

@@ -0,0 +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;"}

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

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

package/components/table/layout/useDraggableColumns.js

@@ -0,0 +1,47 @@
+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;
+  v(() => {
+    d || n((e) => {
+      const r = K(e, o);
+      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) => {
+    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 f = c.indexOf(r), C = c.indexOf(y);
+      if (f < 0 || C < 0)
+        return;
+      const b = h(c, f, C);
+      let x = 0;
+      const g = m.map((t) => {
+        if (!O(t))
+          return t.key;
+        const k = b[x];
+        return x += 1, k ?? t.key;
+      });
+      d || n(
+        (t) => JSON.stringify(t) === JSON.stringify(g) ? t : g
+      ), a?.(g);
+    },
+    orderedColumns: m
+  };
+};
+export {
+  E as useDraggableColumns
+};
+//# sourceMappingURL=useDraggableColumns.js.map

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

@@ -0,0 +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;"}

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

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

package/components/table/layout/useHorizontalSectionSync.js

@@ -0,0 +1,39 @@
+import { useRef as f, useCallback as u, useEffect as i } from "react";
+const L = "table-horizontal-scroll", p = (t) => {
+  const r = t?.currentTarget;
+  if (r && "scrollLeft" in r)
+    return r.scrollLeft;
+  const o = t?.target;
+  return o && "scrollLeft" in o ? o.scrollLeft : 0;
+}, y = ({ enabled: t }) => {
+  const r = f(null), o = f(null), s = f(0), e = u((c) => {
+    const n = (l) => {
+      if (l) {
+        if (c === 0) {
+          l.style.removeProperty("transform");
+          return;
+        }
+        l.style.transform = `translateX(-${c}px)`;
+      }
+    };
+    n(r.current), n(o.current);
+  }, []), a = u(
+    (c) => {
+      const n = p(c);
+      t && e(n), n !== s.current && (s.current = n, window.dispatchEvent(new CustomEvent(L)));
+    },
+    [t, e]
+  );
+  return i(() => {
+    t || (s.current = 0, e(0));
+  }, [t, e]), {
+    handleBodyScroll: a,
+    tableFooterRowRef: o,
+    tableHeadRowRef: r
+  };
+};
+export {
+  L as TABLE_HORIZONTAL_SCROLL_EVENT,
+  y as useHorizontalSectionSync
+};
+//# sourceMappingURL=useHorizontalSectionSync.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useHorizontalSectionSync.js","sources":["../../../../src/components/table/layout/useHorizontalSectionSync.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, type UIEvent } from 'react';\n\nexport const TABLE_HORIZONTAL_SCROLL_EVENT = 'table-horizontal-scroll';\n\nconst getScrollLeftFromEvent = (event: UIEvent<HTMLElement> | undefined) => {\n    const currentTarget = event?.currentTarget;\n\n    if (currentTarget && 'scrollLeft' in currentTarget) {\n        return (currentTarget as HTMLElement).scrollLeft;\n    }\n\n    const target = event?.target;\n\n    if (target && 'scrollLeft' in target) {\n        return (target as HTMLElement).scrollLeft;\n    }\n\n    return 0;\n};\n\ntype UseHorizontalSectionSyncProps = {\n    enabled: boolean;\n};\n\nexport const useHorizontalSectionSync = ({ enabled }: UseHorizontalSectionSyncProps) => {\n    const tableHeadRowRef = useRef<HTMLDivElement>(null);\n    const tableFooterRowRef = useRef<HTMLDivElement>(null);\n    const previousScrollLeftRef = useRef(0);\n\n    const syncHorizontalSections = useCallback((scrollLeft: number) => {\n        const applyTransform = (element: HTMLDivElement | null) => {\n            if (!element) {\n                return;\n            }\n\n            if (scrollLeft === 0) {\n                element.style.removeProperty('transform');\n                return;\n            }\n\n            element.style.transform = `translateX(-${scrollLeft}px)`;\n        };\n\n        applyTransform(tableHeadRowRef.current);\n        applyTransform(tableFooterRowRef.current);\n    }, []);\n\n    const handleBodyScroll = useCallback(\n        (event: UIEvent<HTMLElement> | undefined) => {\n            const scrollLeft = getScrollLeftFromEvent(event);\n\n            if (enabled) {\n                syncHorizontalSections(scrollLeft);\n            }\n\n            if (scrollLeft !== previousScrollLeftRef.current) {\n                previousScrollLeftRef.current = scrollLeft;\n                window.dispatchEvent(new CustomEvent(TABLE_HORIZONTAL_SCROLL_EVENT));\n            }\n        },\n        [enabled, syncHorizontalSections]\n    );\n\n    useEffect(() => {\n        if (!enabled) {\n            previousScrollLeftRef.current = 0;\n            syncHorizontalSections(0);\n        }\n    }, [enabled, syncHorizontalSections]);\n\n    return {\n        handleBodyScroll,\n        tableFooterRowRef,\n        tableHeadRowRef,\n    };\n};\n"],"names":["TABLE_HORIZONTAL_SCROLL_EVENT","getScrollLeftFromEvent","event","currentTarget","target","useHorizontalSectionSync","enabled","tableHeadRowRef","useRef","tableFooterRowRef","previousScrollLeftRef","syncHorizontalSections","useCallback","scrollLeft","applyTransform","element","handleBodyScroll","useEffect"],"mappings":";AAEO,MAAMA,IAAgC,2BAEvCC,IAAyB,CAACC,MAA4C;AACxE,QAAMC,IAAgBD,GAAO;AAE7B,MAAIC,KAAiB,gBAAgBA;AACjC,WAAQA,EAA8B;AAG1C,QAAMC,IAASF,GAAO;AAEtB,SAAIE,KAAU,gBAAgBA,IAClBA,EAAuB,aAG5B;AACX,GAMaC,IAA2B,CAAC,EAAE,SAAAC,QAA6C;AACpF,QAAMC,IAAkBC,EAAuB,IAAI,GAC7CC,IAAoBD,EAAuB,IAAI,GAC/CE,IAAwBF,EAAO,CAAC,GAEhCG,IAAyBC,EAAY,CAACC,MAAuB;AAC/D,UAAMC,IAAiB,CAACC,MAAmC;AACvD,UAAKA,GAIL;AAAA,YAAIF,MAAe,GAAG;AAClB,UAAAE,EAAQ,MAAM,eAAe,WAAW;AACxC;AAAA,QACJ;AAEA,QAAAA,EAAQ,MAAM,YAAY,eAAeF,CAAU;AAAA;AAAA,IACvD;AAEA,IAAAC,EAAeP,EAAgB,OAAO,GACtCO,EAAeL,EAAkB,OAAO;AAAA,EAC5C,GAAG,CAAA,CAAE,GAECO,IAAmBJ;AAAA,IACrB,CAACV,MAA4C;AACzC,YAAMW,IAAaZ,EAAuBC,CAAK;AAE/C,MAAII,KACAK,EAAuBE,CAAU,GAGjCA,MAAeH,EAAsB,YACrCA,EAAsB,UAAUG,GAChC,OAAO,cAAc,IAAI,YAAYb,CAA6B,CAAC;AAAA,IAE3E;AAAA,IACA,CAACM,GAASK,CAAsB;AAAA,EAAA;AAGpC,SAAAM,EAAU,MAAM;AACZ,IAAKX,MACDI,EAAsB,UAAU,GAChCC,EAAuB,CAAC;AAAA,EAEhC,GAAG,CAACL,GAASK,CAAsB,CAAC,GAE7B;AAAA,IACH,kBAAAK;AAAA,IACA,mBAAAP;AAAA,IACA,iBAAAF;AAAA,EAAA;AAER;"}

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

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+import { TableColumnDefinition } from '../Table.types';
+export declare const stabilizeMeasuredColumnMaxWidths: (previousMeasuredColumnMaxWidths: Record<string, string>, nextMeasuredColumnMaxWidths: Record<string, string>) => {
+    [k: string]: string;
+};
+type UseMeasuredColumnMaxWidthsProps<RowType extends Record<string, unknown>> = {
+    columns: TableColumnDefinition<RowType>[];
+    enabled: boolean;
+    tableWrapperRef: RefObject<HTMLDivElement | null>;
+};
+export declare const useMeasuredColumnMaxWidths: <RowType extends Record<string, unknown>>(props: UseMeasuredColumnMaxWidthsProps<RowType>) => Record<string, string>;
+export {};

package/components/table/layout/useMeasuredColumnMaxWidths.js

@@ -0,0 +1,85 @@
+import { useState as S, useRef as p, useMemo as w, useLayoutEffect as R } from "react";
+const A = 1, E = (t) => {
+  const e = t?.trim().match(/^(-?\d+(?:\.\d+)?)px$/);
+  return e ? Number(e[1]) : void 0;
+}, x = (t) => {
+  const e = t.getBoundingClientRect().width;
+  return e > 0 ? Math.ceil(e) : t.scrollWidth;
+}, O = (t) => {
+  if (!t)
+    return 0;
+  const e = window.getComputedStyle(t), n = Number.parseFloat(e.columnGap || e.gap || "0");
+  return Number.isFinite(n) ? Math.ceil(n) : 0;
+}, q = (t) => {
+  const e = t.querySelector(".table-head-label");
+  if (e) {
+    const s = t.querySelector(".sort-arrows");
+    return x(e) + (s ? x(s) : 0) + (s ? O(t.querySelector(".table-head-button")) : 0);
+  }
+  return (t.querySelector(".table-cell-content, .table-head-button-label") ?? t).scrollWidth;
+}, z = (t, e) => Object.fromEntries(
+  Object.entries(e).map(([n, s]) => {
+    const i = t[n], u = E(i), r = E(s);
+    return [
+      n,
+      u !== void 0 && r !== void 0 && Math.abs(u - r) <= A ? i : s
+    ];
+  })
+), P = (t) => {
+  const { columns: e, enabled: n, tableWrapperRef: s } = t, [i, u] = S({}), r = p(""), a = p({}), y = w(
+    () => e.map((o) => `${o.key}:${o.width === void 0 ? "auto" : String(o.width)}`).join("|"),
+    [e]
+  );
+  return R(() => {
+    const o = s.current;
+    if (!n || !o) {
+      r.current && (r.current = "", a.current = {}, u({}));
+      return;
+    }
+    if (e.length === 0) {
+      r.current && (r.current = "", a.current = {}, u({}));
+      return;
+    }
+    const h = e.filter((c) => c.width === void 0);
+    if (h.length === 0) {
+      r.current && (r.current = "", a.current = {}, u({}));
+      return;
+    }
+    const m = () => {
+      const c = Array.from(o.querySelectorAll("[data-column]")), C = Object.fromEntries(
+        h.flatMap((M) => {
+          const W = c.filter((d) => d.dataset.column === M.key).reduce(
+            (d, g) => Math.max(d, q(g)),
+            0
+          );
+          return W > 0 ? [[M.key, `${Math.ceil(W)}px`]] : [];
+        })
+      ), l = z(
+        a.current,
+        C
+      ), f = JSON.stringify(l);
+      f !== r.current && (r.current = f, a.current = l, u(l));
+    };
+    m();
+    const v = [
+      o,
+      ...Array.from(
+        o.querySelectorAll(
+          ".table-head, .table-body, .table-footer, .table-scroll-content"
+        )
+      )
+    ], b = new ResizeObserver(() => {
+      m();
+    });
+    return v.forEach((c) => {
+      b.observe(c);
+    }), () => {
+      b.disconnect();
+    };
+  }, [y, n, s]), i;
+};
+export {
+  z as stabilizeMeasuredColumnMaxWidths,
+  P as useMeasuredColumnMaxWidths
+};
+//# sourceMappingURL=useMeasuredColumnMaxWidths.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMeasuredColumnMaxWidths.js","sources":["../../../../src/components/table/layout/useMeasuredColumnMaxWidths.ts"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState, type RefObject } from 'react';\n\nimport type { TableColumnDefinition } from '../Table.types';\n\nconst MEASURED_WIDTH_JITTER_TOLERANCE_PX = 1;\n\nconst parsePixelWidth = (width?: string) => {\n    const match = width?.trim().match(/^(-?\\d+(?:\\.\\d+)?)px$/);\n\n    return match ? Number(match[1]) : undefined;\n};\n\nconst measureRenderedWidth = (element: HTMLElement) => {\n    const renderedWidth = element.getBoundingClientRect().width;\n\n    return renderedWidth > 0 ? Math.ceil(renderedWidth) : element.scrollWidth;\n};\n\nconst resolveFlexGapWidth = (element: HTMLElement | null) => {\n    if (!element) {\n        return 0;\n    }\n\n    const styles = window.getComputedStyle(element);\n    const gap = Number.parseFloat(styles.columnGap || styles.gap || '0');\n\n    return Number.isFinite(gap) ? Math.ceil(gap) : 0;\n};\n\nconst measureColumnContentWidth = (element: HTMLElement) => {\n    const headerLabelElement = element.querySelector<HTMLElement>('.table-head-label');\n\n    if (headerLabelElement) {\n        const sortArrowsElement = element.querySelector<HTMLElement>('.sort-arrows');\n\n        return (\n            measureRenderedWidth(headerLabelElement) +\n            (sortArrowsElement ? measureRenderedWidth(sortArrowsElement) : 0) +\n            (sortArrowsElement ? resolveFlexGapWidth(element.querySelector<HTMLElement>('.table-head-button')) : 0)\n        );\n    }\n\n    const contentElement =\n        element.querySelector<HTMLElement>('.table-cell-content, .table-head-button-label') ?? element;\n\n    return contentElement.scrollWidth;\n};\n\nexport const stabilizeMeasuredColumnMaxWidths = (\n    previousMeasuredColumnMaxWidths: Record<string, string>,\n    nextMeasuredColumnMaxWidths: Record<string, string>\n) =>\n    Object.fromEntries(\n        Object.entries(nextMeasuredColumnMaxWidths).map(([columnKey, nextMeasuredWidth]) => {\n            const previousMeasuredWidth = previousMeasuredColumnMaxWidths[columnKey];\n            const previousMeasuredWidthPx = parsePixelWidth(previousMeasuredWidth);\n            const nextMeasuredWidthPx = parsePixelWidth(nextMeasuredWidth);\n\n            return [\n                columnKey,\n                previousMeasuredWidthPx !== undefined &&\n                nextMeasuredWidthPx !== undefined &&\n                Math.abs(previousMeasuredWidthPx - nextMeasuredWidthPx) <= MEASURED_WIDTH_JITTER_TOLERANCE_PX\n                    ? previousMeasuredWidth\n                    : nextMeasuredWidth,\n            ];\n        })\n    );\n\ntype UseMeasuredColumnMaxWidthsProps<RowType extends Record<string, unknown>> = {\n    columns: TableColumnDefinition<RowType>[];\n    enabled: boolean;\n    tableWrapperRef: RefObject<HTMLDivElement | null>;\n};\n\nexport const useMeasuredColumnMaxWidths = <RowType extends Record<string, unknown>>(\n    props: UseMeasuredColumnMaxWidthsProps<RowType>\n) => {\n    const { columns, enabled, tableWrapperRef } = props;\n    const [measuredColumnMaxWidths, setMeasuredColumnMaxWidths] = useState<Record<string, string>>({});\n    const previousMeasuredWidthsRef = useRef('');\n    const previousMeasuredColumnMaxWidthsRef = useRef<Record<string, string>>({});\n    const columnsSignature = useMemo(\n        () =>\n            columns\n                .map(column => `${column.key}:${column.width === undefined ? 'auto' : String(column.width)}`)\n                .join('|'),\n        [columns]\n    );\n\n    useLayoutEffect(() => {\n        const wrapperElement = tableWrapperRef.current;\n\n        if (!enabled || !wrapperElement) {\n            if (previousMeasuredWidthsRef.current) {\n                previousMeasuredWidthsRef.current = '';\n                previousMeasuredColumnMaxWidthsRef.current = {};\n                setMeasuredColumnMaxWidths({});\n            }\n\n            return;\n        }\n\n        if (columns.length === 0) {\n            if (previousMeasuredWidthsRef.current) {\n                previousMeasuredWidthsRef.current = '';\n                previousMeasuredColumnMaxWidthsRef.current = {};\n                setMeasuredColumnMaxWidths({});\n            }\n\n            return;\n        }\n\n        const columnsWithoutWidth = columns.filter(column => column.width === undefined);\n\n        if (columnsWithoutWidth.length === 0) {\n            if (previousMeasuredWidthsRef.current) {\n                previousMeasuredWidthsRef.current = '';\n                previousMeasuredColumnMaxWidthsRef.current = {};\n                setMeasuredColumnMaxWidths({});\n            }\n\n            return;\n        }\n\n        const measureColumnMaxWidths = () => {\n            const columnElements = Array.from(wrapperElement.querySelectorAll<HTMLElement>('[data-column]'));\n            const nextMeasuredColumnMaxWidths = Object.fromEntries(\n                columnsWithoutWidth.flatMap(column => {\n                    const matchingElements = columnElements.filter(element => element.dataset.column === column.key);\n                    const measuredWidth = matchingElements.reduce(\n                        (largestWidth, element) => Math.max(largestWidth, measureColumnContentWidth(element)),\n                        0\n                    );\n\n                    return measuredWidth > 0 ? [[column.key, `${Math.ceil(measuredWidth)}px`]] : [];\n                })\n            );\n            const stabilizedMeasuredColumnMaxWidths = stabilizeMeasuredColumnMaxWidths(\n                previousMeasuredColumnMaxWidthsRef.current,\n                nextMeasuredColumnMaxWidths\n            );\n            const serializedMeasuredWidths = JSON.stringify(stabilizedMeasuredColumnMaxWidths);\n\n            if (serializedMeasuredWidths !== previousMeasuredWidthsRef.current) {\n                previousMeasuredWidthsRef.current = serializedMeasuredWidths;\n                previousMeasuredColumnMaxWidthsRef.current = stabilizedMeasuredColumnMaxWidths;\n                setMeasuredColumnMaxWidths(stabilizedMeasuredColumnMaxWidths);\n            }\n        };\n\n        measureColumnMaxWidths();\n\n        const observedElements = [\n            wrapperElement,\n            ...Array.from(\n                wrapperElement.querySelectorAll<HTMLElement>(\n                    '.table-head, .table-body, .table-footer, .table-scroll-content'\n                )\n            ),\n        ];\n        const resizeObserver = new ResizeObserver(() => {\n            measureColumnMaxWidths();\n        });\n\n        observedElements.forEach(element => {\n            resizeObserver.observe(element);\n        });\n\n        return () => {\n            resizeObserver.disconnect();\n        };\n    }, [columnsSignature, enabled, tableWrapperRef]);\n\n    return measuredColumnMaxWidths;\n};\n"],"names":["MEASURED_WIDTH_JITTER_TOLERANCE_PX","parsePixelWidth","width","match","measureRenderedWidth","element","renderedWidth","resolveFlexGapWidth","styles","gap","measureColumnContentWidth","headerLabelElement","sortArrowsElement","stabilizeMeasuredColumnMaxWidths","previousMeasuredColumnMaxWidths","nextMeasuredColumnMaxWidths","columnKey","nextMeasuredWidth","previousMeasuredWidth","previousMeasuredWidthPx","nextMeasuredWidthPx","useMeasuredColumnMaxWidths","props","columns","enabled","tableWrapperRef","measuredColumnMaxWidths","setMeasuredColumnMaxWidths","useState","previousMeasuredWidthsRef","useRef","previousMeasuredColumnMaxWidthsRef","columnsSignature","useMemo","column","useLayoutEffect","wrapperElement","columnsWithoutWidth","measureColumnMaxWidths","columnElements","measuredWidth","largestWidth","stabilizedMeasuredColumnMaxWidths","serializedMeasuredWidths","observedElements","resizeObserver"],"mappings":"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"}

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

@@ -0,0 +1,14 @@
+import { PointerEvent as ReactPointerEvent } from 'react';
+import { TableColumnDefinition } from '../Table.types';
+type UseResizableColumnsProps<RowType extends Record<string, unknown>> = {
+    columns: TableColumnDefinition<RowType>[];
+    enabled: boolean;
+    onColumnResize?: (columnKey: string, width?: number) => void;
+};
+export declare const useResizableColumns: <RowType extends Record<string, unknown>>(props: UseResizableColumnsProps<RowType>) => {
+    handleColumnResizeReset: (columnKey: string) => void;
+    handleColumnResizeStart: (columnKey: string, event: ReactPointerEvent<HTMLDivElement>) => void;
+    lastResizableColumnKey: string | Extract<keyof RowType, string> | undefined;
+    resizedColumns: TableColumnDefinition<RowType>[];
+};
+export {};

package/components/table/layout/useResizableColumns.js

@@ -0,0 +1,91 @@
+import { useState as z, useEffect as f } from "react";
+import { DEFAULT_MIN_RESIZE_WIDTH_PX as W, MIN_COLUMN_WIDTH_PX as R, DEFAULT_MAX_RESIZE_WIDTH_PX as p } from "../tableSizing.constants.js";
+const w = (c) => {
+  const l = (typeof c == "number" ? `${c}px` : c)?.trim().match(/^(-?\d+(?:\.\d+)?)px$/);
+  if (l)
+    return Math.round(Number(l[1]));
+}, S = (c) => {
+  const { columns: s, enabled: l, onColumnResize: a } = c, [y, u] = z({}), [r, h] = z(void 0);
+  f(() => {
+    a && u((e) => {
+      const n = Object.fromEntries(
+        Object.entries(e).flatMap(([o]) => {
+          const t = s.find((d) => d.key === o), i = w(t?.width);
+          return i === void 0 ? [] : [[o, i]];
+        })
+      );
+      return JSON.stringify(e) === JSON.stringify(n) ? e : n;
+    });
+  }, [s, a]), f(() => {
+    if (!r)
+      return;
+    const e = document.body.style.cursor, n = document.body.style.userSelect;
+    document.body.style.cursor = "col-resize", document.body.style.userSelect = "none";
+    const o = (i) => {
+      const d = Math.min(
+        r.maxResizeWidth,
+        Math.max(
+          r.minResizeWidth,
+          Math.round(r.startWidth + i.clientX - r.startX)
+        )
+      );
+      a?.(r.columnKey, d), u(
+        (m) => m[r.columnKey] === d ? m : {
+          ...m,
+          [r.columnKey]: d
+        }
+      );
+    }, t = () => {
+      h(void 0);
+    };
+    return window.addEventListener("pointermove", o), window.addEventListener("pointerup", t), window.addEventListener("pointercancel", t), () => {
+      document.body.style.cursor = e, document.body.style.userSelect = n, window.removeEventListener("pointermove", o), window.removeEventListener("pointerup", t), window.removeEventListener("pointercancel", t);
+    };
+  }, [a, r]);
+  const b = (e, n) => {
+    if (!l || n.button !== 0)
+      return;
+    const o = s.find((m) => m.key === e), t = n.currentTarget.closest(".table-head-cell");
+    if (!o || !t)
+      return;
+    n.preventDefault(), n.stopPropagation();
+    const i = Math.max(o.minResizeWidth ?? W, R), d = Math.max(o.maxResizeWidth ?? p, i);
+    h({
+      columnKey: e,
+      maxResizeWidth: d,
+      minResizeWidth: i,
+      startWidth: t.getBoundingClientRect().width,
+      startX: n.clientX
+    });
+  }, x = (e) => {
+    const n = s.find((t) => t.key === e), o = n?.minResizeWidth !== void 0 ? Math.max(n.minResizeWidth, R) : void 0;
+    h(void 0), a?.(e, o), u((t) => {
+      if (o === void 0) {
+        if (!(e in t))
+          return t;
+        const i = { ...t };
+        return delete i[e], i;
+      }
+      return t[e] === o ? t : {
+        ...t,
+        [e]: o
+      };
+    });
+  }, E = s.map((e) => {
+    const n = y[e.key];
+    return n === void 0 ? e : {
+      ...e,
+      width: n
+    };
+  });
+  return {
+    handleColumnResizeReset: x,
+    handleColumnResizeStart: b,
+    lastResizableColumnKey: s.at(-1)?.key,
+    resizedColumns: E
+  };
+};
+export {
+  S as useResizableColumns
+};
+//# sourceMappingURL=useResizableColumns.js.map