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

package/components/table/render/header/TableBatchDropdown.d.ts

@@ -4,6 +4,10 @@ export type TableBatchDropdownProps = {
      * Dropdown items rendered for batch actions in the selection header.
      */
     items: NonNullable<ButtonDropdownProps['items']>;
+    /**
+     * Optional class names for the dropdown menu.
+     */
+    dropdownClassName?: ButtonDropdownProps['dropdownClassName'];
 };
-declare const TableBatchDropdown: ({ items }: TableBatchDropdownProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableBatchDropdown: ({ items, dropdownClassName, ...remainingProps }: TableBatchDropdownProps) => import("react/jsx-runtime").JSX.Element;
 export default TableBatchDropdown;

package/components/table/render/header/TableBatchDropdown.js

@@ -1,28 +1,30 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useState as a, useEffect as l } from "react";
-import i from "../../../dropdown/ButtonDropdown.js";
-import { TABLE_HORIZONTAL_SCROLL_EVENT as n } from "../../layout/useHorizontalSectionSync.js";
-const f = ({ items: r }) => {
-  const [s, e] = a(!1);
-  return l(() => {
-    const o = () => e(!1);
-    return window.addEventListener(n, o), () => window.removeEventListener(n, o);
-  }, []), /* @__PURE__ */ t(
-    i,
+import { jsx as n } from "react/jsx-runtime";
+import { useState as i, useEffect as m } from "react";
+import p from "../../../dropdown/ButtonDropdown.js";
+import { TABLE_HORIZONTAL_SCROLL_EVENT as r } from "../../layout/useHorizontalSectionSync.js";
+const h = ({ items: a, dropdownClassName: o, ...s }) => {
+  const [l, e] = i(!1);
+  return m(() => {
+    const t = () => e(!1);
+    return window.addEventListener(r, t), () => window.removeEventListener(r, t);
+  }, []), /* @__PURE__ */ n(
+    p,
     {
-      title: /* @__PURE__ */ t("span", { className: "rioglyph rioglyph-checkboxes" }),
+      ...s,
+      title: /* @__PURE__ */ n("span", { className: "rioglyph rioglyph-checkboxes" }),
       variant: "outline",
       bsSize: "sm",
       toggleClassName: "table-batch-dropdown-button no-hover-scale",
+      dropdownClassName: o ? `text-normal ${o}` : "text-normal",
       iconOnly: !0,
-      items: r,
-      open: s,
+      items: a,
+      open: l,
       onOpen: () => e(!0),
       onClose: () => e(!1)
     }
   );
 };
 export {
-  f as default
+  h as default
 };
 //# sourceMappingURL=TableBatchDropdown.js.map

package/components/table/render/header/TableBatchDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBatchDropdown.js","sources":["../../../../../src/components/table/render/header/TableBatchDropdown.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport ButtonDropdown, { type ButtonDropdownProps } from '../../../dropdown/ButtonDropdown';\nimport { TABLE_HORIZONTAL_SCROLL_EVENT } from '../../layout/useHorizontalSectionSync';\n\nexport type TableBatchDropdownProps = {\n    /**\n     * Dropdown items rendered for batch actions in the selection header.\n     */\n    items: NonNullable<ButtonDropdownProps['items']>;\n};\n\nconst TableBatchDropdown = ({ items }: TableBatchDropdownProps) => {\n    const [open, setOpen] = useState(false);\n\n    useEffect(() => {\n        const handleHorizontalScroll = () => setOpen(false);\n\n        window.addEventListener(TABLE_HORIZONTAL_SCROLL_EVENT, handleHorizontalScroll);\n\n        return () => window.removeEventListener(TABLE_HORIZONTAL_SCROLL_EVENT, handleHorizontalScroll);\n    }, []);\n\n    return (\n        <ButtonDropdown\n            title={<span className='rioglyph rioglyph-checkboxes' />}\n            variant='outline'\n            bsSize='sm'\n            toggleClassName='table-batch-dropdown-button no-hover-scale'\n            iconOnly\n            items={items}\n            open={open}\n            onOpen={() => setOpen(true)}\n            onClose={() => setOpen(false)}\n        />\n    );\n};\n\nexport default TableBatchDropdown;\n"],"names":["TableBatchDropdown","items","open","setOpen","useState","useEffect","handleHorizontalScroll","TABLE_HORIZONTAL_SCROLL_EVENT","jsx","ButtonDropdown"],"mappings":";;;;AAYA,MAAMA,IAAqB,CAAC,EAAE,OAAAC,QAAqC;AAC/D,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK;AAEtC,SAAAC,EAAU,MAAM;AACZ,UAAMC,IAAyB,MAAMH,EAAQ,EAAK;AAElD,kBAAO,iBAAiBI,GAA+BD,CAAsB,GAEtE,MAAM,OAAO,oBAAoBC,GAA+BD,CAAsB;AAAA,EACjG,GAAG,CAAA,CAAE,GAGD,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,OAAO,gBAAAD,EAAC,QAAA,EAAK,WAAU,+BAAA,CAA+B;AAAA,MACtD,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,iBAAgB;AAAA,MAChB,UAAQ;AAAA,MACR,OAAAP;AAAA,MACA,MAAAC;AAAA,MACA,QAAQ,MAAMC,EAAQ,EAAI;AAAA,MAC1B,SAAS,MAAMA,EAAQ,EAAK;AAAA,IAAA;AAAA,EAAA;AAGxC;"}
+{"version":3,"file":"TableBatchDropdown.js","sources":["../../../../../src/components/table/render/header/TableBatchDropdown.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport ButtonDropdown, { type ButtonDropdownProps } from '../../../dropdown/ButtonDropdown';\nimport { TABLE_HORIZONTAL_SCROLL_EVENT } from '../../layout/useHorizontalSectionSync';\n\nexport type TableBatchDropdownProps = {\n    /**\n     * Dropdown items rendered for batch actions in the selection header.\n     */\n    items: NonNullable<ButtonDropdownProps['items']>;\n\n    /**\n     * Optional class names for the dropdown menu.\n     */\n    dropdownClassName?: ButtonDropdownProps['dropdownClassName'];\n};\n\nconst TableBatchDropdown = ({ items, dropdownClassName, ...remainingProps }: TableBatchDropdownProps) => {\n    const [open, setOpen] = useState(false);\n\n    useEffect(() => {\n        const handleHorizontalScroll = () => setOpen(false);\n\n        window.addEventListener(TABLE_HORIZONTAL_SCROLL_EVENT, handleHorizontalScroll);\n\n        return () => window.removeEventListener(TABLE_HORIZONTAL_SCROLL_EVENT, handleHorizontalScroll);\n    }, []);\n\n    return (\n        <ButtonDropdown\n            {...remainingProps}\n            title={<span className='rioglyph rioglyph-checkboxes' />}\n            variant='outline'\n            bsSize='sm'\n            toggleClassName='table-batch-dropdown-button no-hover-scale'\n            dropdownClassName={dropdownClassName ? `text-normal ${dropdownClassName}` : 'text-normal'}\n            iconOnly\n            items={items}\n            open={open}\n            onOpen={() => setOpen(true)}\n            onClose={() => setOpen(false)}\n        />\n    );\n};\n\nexport default TableBatchDropdown;\n"],"names":["TableBatchDropdown","items","dropdownClassName","remainingProps","open","setOpen","useState","useEffect","handleHorizontalScroll","TABLE_HORIZONTAL_SCROLL_EVENT","jsx","ButtonDropdown"],"mappings":";;;;AAiBA,MAAMA,IAAqB,CAAC,EAAE,OAAAC,GAAO,mBAAAC,GAAmB,GAAGC,QAA8C;AACrG,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK;AAEtC,SAAAC,EAAU,MAAM;AACZ,UAAMC,IAAyB,MAAMH,EAAQ,EAAK;AAElD,kBAAO,iBAAiBI,GAA+BD,CAAsB,GAEtE,MAAM,OAAO,oBAAoBC,GAA+BD,CAAsB;AAAA,EACjG,GAAG,CAAA,CAAE,GAGD,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGR;AAAA,MACJ,OAAO,gBAAAO,EAAC,QAAA,EAAK,WAAU,+BAAA,CAA+B;AAAA,MACtD,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,iBAAgB;AAAA,MAChB,mBAAmBR,IAAoB,eAAeA,CAAiB,KAAK;AAAA,MAC5E,UAAQ;AAAA,MACR,OAAAD;AAAA,MACA,MAAAG;AAAA,MACA,QAAQ,MAAMC,EAAQ,EAAI;AAAA,MAC1B,SAAS,MAAMA,EAAQ,EAAK;AAAA,IAAA;AAAA,EAAA;AAGxC;"}

package/components/table/render/header/TableColumnFilter.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import { ButtonDropdownProps } from '../../../dropdown/ButtonDropdown';
-export type TableColumnFilterProps = {
+export type TableColumnFilterProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'onClick' | 'role'> & {
     /**
      * Custom dropdown content rendered below the filter trigger.
      */

package/components/table/render/header/TableColumnFilter.js

@@ -1,9 +1,9 @@
-import { jsx as s, jsxs as x } from "react/jsx-runtime";
-import { useState as w, useEffect as y } from "react";
-import E from "../../../../utils/classNames.js";
-import L from "../../../dropdown/ButtonDropdown.js";
-import { TABLE_HORIZONTAL_SCROLL_EVENT as d } from "../../layout/useHorizontalSectionSync.js";
-const _ = (p) => {
+import { jsx as s, jsxs as w } from "react/jsx-runtime";
+import { useState as y, useEffect as E } from "react";
+import L from "../../../../utils/classNames.js";
+import S from "../../../dropdown/ButtonDropdown.js";
+import { TABLE_HORIZONTAL_SCROLL_EVENT as p } from "../../layout/useHorizontalSectionSync.js";
+const j = (d) => {
   const {
     activeCount: a = 0,
     active: c = !1,
@@ -17,18 +17,20 @@ const _ = (p) => {
     popperConfig: v,
     pullRight: C = !0,
     toggleClassName: N,
-    usePortal: O = !0
-  } = p, [b, n] = w(!1), e = i !== void 0, r = e ? i : b, l = a > 0;
-  return y(() => {
+    usePortal: O = !0,
+    ...b
+  } = d, [x, n] = y(!1), e = i !== void 0, r = e ? i : x, l = a > 0;
+  return E(() => {
     const t = () => {
       r && (e || n(!1), o?.());
     };
-    return window.addEventListener(d, t), () => window.removeEventListener(d, t);
+    return window.addEventListener(p, t), () => window.removeEventListener(p, t);
   }, [e, r, o]), /* @__PURE__ */ s(
-    L,
+    S,
     {
+      ...b,
       id: g,
-      title: /* @__PURE__ */ x("span", { className: "display-flex gap-0 align-items-center text-color-dark", children: [
+      title: /* @__PURE__ */ w("span", { className: "display-flex gap-0 align-items-center text-color-dark", children: [
         /* @__PURE__ */ s(
           "span",
           {
@@ -54,7 +56,7 @@ const _ = (p) => {
       usePortal: O,
       className: f,
       popperConfig: v,
-      toggleClassName: E(
+      toggleClassName: L(
         "table-head-filter-button no-hover-scale border-color-light bg-decent hover-bg-lighter rounded-small",
         l && "padding-left-2",
         N
@@ -65,6 +67,6 @@ const _ = (p) => {
   );
 };
 export {
-  _ as default
+  j as default
 };
 //# sourceMappingURL=TableColumnFilter.js.map

package/components/table/render/header/TableColumnFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableColumnFilter.js","sources":["../../../../../src/components/table/render/header/TableColumnFilter.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from 'react';\n\nimport classNames from '../../../../utils/classNames';\nimport ButtonDropdown, { type ButtonDropdownProps } from '../../../dropdown/ButtonDropdown';\nimport { TABLE_HORIZONTAL_SCROLL_EVENT } from '../../layout/useHorizontalSectionSync';\n\nexport type TableColumnFilterProps = {\n    /**\n     * Custom dropdown content rendered below the filter trigger.\n     */\n    children?: ReactNode;\n\n    /**\n     * Optional classes for the outer dropdown component.\n     */\n    className?: ButtonDropdownProps['className'];\n\n    /**\n     * Optional classes for the dropdown menu.\n     */\n    dropdownClassName?: ButtonDropdownProps['dropdownClassName'];\n\n    /**\n     * Optional DOM id for the dropdown trigger.\n     */\n    id?: ButtonDropdownProps['id'];\n\n    /**\n     * Called when the dropdown closes.\n     */\n    onClose?: ButtonDropdownProps['onClose'];\n\n    /**\n     * Called when the dropdown opens.\n     */\n    onOpen?: ButtonDropdownProps['onOpen'];\n\n    /**\n     * Controlled open state for the dropdown.\n     */\n    open?: ButtonDropdownProps['open'];\n\n    /**\n     * Optional Popper configuration passed to the underlying dropdown.\n     */\n    popperConfig?: ButtonDropdownProps['popperConfig'];\n\n    /**\n     * Aligns the dropdown menu to the right side of the trigger.\n     *\n     * @default true\n     */\n    pullRight?: ButtonDropdownProps['pullRight'];\n\n    /**\n     * Optional classes for the dropdown toggle button.\n     */\n    toggleClassName?: ButtonDropdownProps['toggleClassName'];\n\n    /**\n     * Renders the dropdown through a portal.\n     *\n     * @default true\n     */\n    usePortal?: ButtonDropdownProps['usePortal'];\n\n    /**\n     * Renders the active filter icon variant.\n     *\n     * @default false\n     */\n    active?: boolean;\n\n    /**\n     * Optional number of currently active filters shown next to the filter icon.\n     *\n     * @default 0\n     */\n    activeCount?: number;\n};\n\nconst TableColumnFilter = (props: TableColumnFilterProps) => {\n    const {\n        activeCount = 0,\n        active = false,\n        children,\n        className,\n        dropdownClassName,\n        id,\n        onClose,\n        onOpen,\n        open,\n        popperConfig,\n        pullRight = true,\n        toggleClassName,\n        usePortal = true,\n    } = props;\n\n    const [internalOpen, setInternalOpen] = useState(false);\n\n    const isControlled = open !== undefined;\n    const isOpen = isControlled ? open : internalOpen;\n    const hasActiveFilters = activeCount > 0;\n\n    useEffect(() => {\n        const handleHorizontalScroll = () => {\n            if (!isOpen) {\n                return;\n            }\n\n            if (!isControlled) {\n                setInternalOpen(false);\n            }\n\n            onClose?.();\n        };\n\n        window.addEventListener(TABLE_HORIZONTAL_SCROLL_EVENT, handleHorizontalScroll);\n\n        return () => window.removeEventListener(TABLE_HORIZONTAL_SCROLL_EVENT, handleHorizontalScroll);\n    }, [isControlled, isOpen, onClose]);\n\n    return (\n        <ButtonDropdown\n            id={id}\n            title={\n                <span className='display-flex gap-0 align-items-center text-color-dark'>\n                    <span\n                        className={`text-size-16 rioglyph ${active ? 'rioglyph-filter-active' : 'rioglyph-filter'}`}\n                        aria-hidden='true'\n                    />\n                    {hasActiveFilters && <span className='text-medium'>{activeCount}</span>}\n                </span>\n            }\n            bsStyle='default'\n            variant='outline'\n            bsSize='xs'\n            noCaret\n            iconOnly={!hasActiveFilters}\n            open={isOpen}\n            onOpen={event => {\n                if (!isControlled) {\n                    setInternalOpen(true);\n                }\n\n                onOpen?.(event);\n            }}\n            onClose={() => {\n                if (!isControlled) {\n                    setInternalOpen(false);\n                }\n\n                onClose?.();\n            }}\n            pullRight={pullRight}\n            usePortal={usePortal}\n            className={className}\n            popperConfig={popperConfig}\n            toggleClassName={classNames(\n                'table-head-filter-button no-hover-scale border-color-light bg-decent hover-bg-lighter rounded-small',\n                hasActiveFilters && 'padding-left-2',\n                toggleClassName\n            )}\n            dropdownClassName={dropdownClassName}\n            customDropdown={children}\n        />\n    );\n};\n\nexport default TableColumnFilter;\n"],"names":["TableColumnFilter","props","activeCount","active","children","className","dropdownClassName","id","onClose","onOpen","open","popperConfig","pullRight","toggleClassName","usePortal","internalOpen","setInternalOpen","useState","isControlled","isOpen","hasActiveFilters","useEffect","handleHorizontalScroll","TABLE_HORIZONTAL_SCROLL_EVENT","jsx","ButtonDropdown","jsxs","event","classNames"],"mappings":";;;;;AAiFA,MAAMA,IAAoB,CAACC,MAAkC;AACzD,QAAM;AAAA,IACF,aAAAC,IAAc;AAAA,IACd,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,IAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,iBAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,EAAA,IACZb,GAEE,CAACc,GAAcC,CAAe,IAAIC,EAAS,EAAK,GAEhDC,IAAeR,MAAS,QACxBS,IAASD,IAAeR,IAAOK,GAC/BK,IAAmBlB,IAAc;AAEvC,SAAAmB,EAAU,MAAM;AACZ,UAAMC,IAAyB,MAAM;AACjC,MAAKH,MAIAD,KACDF,EAAgB,EAAK,GAGzBR,IAAA;AAAA,IACJ;AAEA,kBAAO,iBAAiBe,GAA+BD,CAAsB,GAEtE,MAAM,OAAO,oBAAoBC,GAA+BD,CAAsB;AAAA,EACjG,GAAG,CAACJ,GAAcC,GAAQX,CAAO,CAAC,GAG9B,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,IAAAlB;AAAA,MACA,OACI,gBAAAmB,EAAC,QAAA,EAAK,WAAU,yDACZ,UAAA;AAAA,QAAA,gBAAAF;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW,yBAAyBrB,IAAS,2BAA2B,iBAAiB;AAAA,YACzF,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEfiB,KAAoB,gBAAAI,EAAC,QAAA,EAAK,WAAU,eAAe,UAAAtB,EAAA,CAAY;AAAA,MAAA,GACpE;AAAA,MAEJ,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,SAAO;AAAA,MACP,UAAU,CAACkB;AAAA,MACX,MAAMD;AAAA,MACN,QAAQ,CAAAQ,MAAS;AACb,QAAKT,KACDF,EAAgB,EAAI,GAGxBP,IAASkB,CAAK;AAAA,MAClB;AAAA,MACA,SAAS,MAAM;AACX,QAAKT,KACDF,EAAgB,EAAK,GAGzBR,IAAA;AAAA,MACJ;AAAA,MACA,WAAAI;AAAA,MACA,WAAAE;AAAA,MACA,WAAAT;AAAA,MACA,cAAAM;AAAA,MACA,iBAAiBiB;AAAA,QACb;AAAA,QACAR,KAAoB;AAAA,QACpBP;AAAA,MAAA;AAAA,MAEJ,mBAAAP;AAAA,MACA,gBAAgBF;AAAA,IAAA;AAAA,EAAA;AAG5B;"}
+{"version":3,"file":"TableColumnFilter.js","sources":["../../../../../src/components/table/render/header/TableColumnFilter.tsx"],"sourcesContent":["import { useEffect, useState, type HTMLAttributes, type ReactNode } from 'react';\n\nimport classNames from '../../../../utils/classNames';\nimport ButtonDropdown, { type ButtonDropdownProps } from '../../../dropdown/ButtonDropdown';\nimport { TABLE_HORIZONTAL_SCROLL_EVENT } from '../../layout/useHorizontalSectionSync';\n\nexport type TableColumnFilterProps = Omit<\n    HTMLAttributes<HTMLDivElement>,\n    'children' | 'className' | 'onClick' | 'role'\n> & {\n    /**\n     * Custom dropdown content rendered below the filter trigger.\n     */\n    children?: ReactNode;\n\n    /**\n     * Optional classes for the outer dropdown component.\n     */\n    className?: ButtonDropdownProps['className'];\n\n    /**\n     * Optional classes for the dropdown menu.\n     */\n    dropdownClassName?: ButtonDropdownProps['dropdownClassName'];\n\n    /**\n     * Optional DOM id for the dropdown trigger.\n     */\n    id?: ButtonDropdownProps['id'];\n\n    /**\n     * Called when the dropdown closes.\n     */\n    onClose?: ButtonDropdownProps['onClose'];\n\n    /**\n     * Called when the dropdown opens.\n     */\n    onOpen?: ButtonDropdownProps['onOpen'];\n\n    /**\n     * Controlled open state for the dropdown.\n     */\n    open?: ButtonDropdownProps['open'];\n\n    /**\n     * Optional Popper configuration passed to the underlying dropdown.\n     */\n    popperConfig?: ButtonDropdownProps['popperConfig'];\n\n    /**\n     * Aligns the dropdown menu to the right side of the trigger.\n     *\n     * @default true\n     */\n    pullRight?: ButtonDropdownProps['pullRight'];\n\n    /**\n     * Optional classes for the dropdown toggle button.\n     */\n    toggleClassName?: ButtonDropdownProps['toggleClassName'];\n\n    /**\n     * Renders the dropdown through a portal.\n     *\n     * @default true\n     */\n    usePortal?: ButtonDropdownProps['usePortal'];\n\n    /**\n     * Renders the active filter icon variant.\n     *\n     * @default false\n     */\n    active?: boolean;\n\n    /**\n     * Optional number of currently active filters shown next to the filter icon.\n     *\n     * @default 0\n     */\n    activeCount?: number;\n};\n\nconst TableColumnFilter = (props: TableColumnFilterProps) => {\n    const {\n        activeCount = 0,\n        active = false,\n        children,\n        className,\n        dropdownClassName,\n        id,\n        onClose,\n        onOpen,\n        open,\n        popperConfig,\n        pullRight = true,\n        toggleClassName,\n        usePortal = true,\n        ...remainingProps\n    } = props;\n\n    const [internalOpen, setInternalOpen] = useState(false);\n\n    const isControlled = open !== undefined;\n    const isOpen = isControlled ? open : internalOpen;\n    const hasActiveFilters = activeCount > 0;\n\n    useEffect(() => {\n        const handleHorizontalScroll = () => {\n            if (!isOpen) {\n                return;\n            }\n\n            if (!isControlled) {\n                setInternalOpen(false);\n            }\n\n            onClose?.();\n        };\n\n        window.addEventListener(TABLE_HORIZONTAL_SCROLL_EVENT, handleHorizontalScroll);\n\n        return () => window.removeEventListener(TABLE_HORIZONTAL_SCROLL_EVENT, handleHorizontalScroll);\n    }, [isControlled, isOpen, onClose]);\n\n    return (\n        <ButtonDropdown\n            {...remainingProps}\n            id={id}\n            title={\n                <span className='display-flex gap-0 align-items-center text-color-dark'>\n                    <span\n                        className={`text-size-16 rioglyph ${active ? 'rioglyph-filter-active' : 'rioglyph-filter'}`}\n                        aria-hidden='true'\n                    />\n                    {hasActiveFilters && <span className='text-medium'>{activeCount}</span>}\n                </span>\n            }\n            bsStyle='default'\n            variant='outline'\n            bsSize='xs'\n            noCaret\n            iconOnly={!hasActiveFilters}\n            open={isOpen}\n            onOpen={event => {\n                if (!isControlled) {\n                    setInternalOpen(true);\n                }\n\n                onOpen?.(event);\n            }}\n            onClose={() => {\n                if (!isControlled) {\n                    setInternalOpen(false);\n                }\n\n                onClose?.();\n            }}\n            pullRight={pullRight}\n            usePortal={usePortal}\n            className={className}\n            popperConfig={popperConfig}\n            toggleClassName={classNames(\n                'table-head-filter-button no-hover-scale border-color-light bg-decent hover-bg-lighter rounded-small',\n                hasActiveFilters && 'padding-left-2',\n                toggleClassName\n            )}\n            dropdownClassName={dropdownClassName}\n            customDropdown={children}\n        />\n    );\n};\n\nexport default TableColumnFilter;\n"],"names":["TableColumnFilter","props","activeCount","active","children","className","dropdownClassName","id","onClose","onOpen","open","popperConfig","pullRight","toggleClassName","usePortal","remainingProps","internalOpen","setInternalOpen","useState","isControlled","isOpen","hasActiveFilters","useEffect","handleHorizontalScroll","TABLE_HORIZONTAL_SCROLL_EVENT","jsx","ButtonDropdown","jsxs","event","classNames"],"mappings":";;;;;AAoFA,MAAMA,IAAoB,CAACC,MAAkC;AACzD,QAAM;AAAA,IACF,aAAAC,IAAc;AAAA,IACd,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,IAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,iBAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,IACHd,GAEE,CAACe,GAAcC,CAAe,IAAIC,EAAS,EAAK,GAEhDC,IAAeT,MAAS,QACxBU,IAASD,IAAeT,IAAOM,GAC/BK,IAAmBnB,IAAc;AAEvC,SAAAoB,EAAU,MAAM;AACZ,UAAMC,IAAyB,MAAM;AACjC,MAAKH,MAIAD,KACDF,EAAgB,EAAK,GAGzBT,IAAA;AAAA,IACJ;AAEA,kBAAO,iBAAiBgB,GAA+BD,CAAsB,GAEtE,MAAM,OAAO,oBAAoBC,GAA+BD,CAAsB;AAAA,EACjG,GAAG,CAACJ,GAAcC,GAAQZ,CAAO,CAAC,GAG9B,gBAAAiB;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGX;AAAA,MACJ,IAAAR;AAAA,MACA,OACI,gBAAAoB,EAAC,QAAA,EAAK,WAAU,yDACZ,UAAA;AAAA,QAAA,gBAAAF;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW,yBAAyBtB,IAAS,2BAA2B,iBAAiB;AAAA,YACzF,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEfkB,KAAoB,gBAAAI,EAAC,QAAA,EAAK,WAAU,eAAe,UAAAvB,EAAA,CAAY;AAAA,MAAA,GACpE;AAAA,MAEJ,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,SAAO;AAAA,MACP,UAAU,CAACmB;AAAA,MACX,MAAMD;AAAA,MACN,QAAQ,CAAAQ,MAAS;AACb,QAAKT,KACDF,EAAgB,EAAI,GAGxBR,IAASmB,CAAK;AAAA,MAClB;AAAA,MACA,SAAS,MAAM;AACX,QAAKT,KACDF,EAAgB,EAAK,GAGzBT,IAAA;AAAA,MACJ;AAAA,MACA,WAAAI;AAAA,MACA,WAAAE;AAAA,MACA,WAAAT;AAAA,MACA,cAAAM;AAAA,MACA,iBAAiBkB;AAAA,QACb;AAAA,QACAR,KAAoB;AAAA,QACpBR;AAAA,MAAA;AAAA,MAEJ,mBAAAP;AAAA,MACA,gBAAgBF;AAAA,IAAA;AAAA,EAAA;AAG5B;"}

package/components/table/render/header/TableDraggableHeaderCell.d.ts

@@ -1,3 +1,4 @@
+import { TableRowData } from '../../Table.types';
 import { SharedHeaderCellProps } from './TableHeader.types';
-declare const TableDraggableHeaderCell: <RowType extends Record<string, unknown>>(props: SharedHeaderCellProps<RowType>) => import("react/jsx-runtime").JSX.Element;
+declare const TableDraggableHeaderCell: (props: SharedHeaderCellProps<TableRowData>) => import("react/jsx-runtime").JSX.Element;
 export default TableDraggableHeaderCell;

package/components/table/render/header/TableDraggableHeaderCell.js

@@ -1,54 +1,64 @@
-import { jsxs as S, jsx as i } from "react/jsx-runtime";
-import { useSortable as x } from "@dnd-kit/sortable";
-import C from "./TableHeaderCellContent.js";
-import A from "./TableHeaderCellResizeHandle.js";
-import { resolveAriaSort as h } from "./resolveAriaSort.js";
-import { resolveHeaderCellClassName as y } from "./resolveHeaderCellClassName.js";
-import { resolveHeaderCellStyle as H } from "./resolveHeaderCellStyle.js";
-import { resolveAriaSpan as s, resolveAriaColIndex as R } from "../../shared/resolveTableAria.js";
-const E = (r) => {
-  const { column: e, header: n, hideWhileDragging: a, isResizable: m, showSelectionColumn: t } = r, l = e.columnKey ?? String(e.key), { attributes: d, listeners: c, setActivatorNodeRef: f, setNodeRef: p, transform: o, transition: g, isDragging: u } = x({
-    id: l
-  }), { role: w, ...v } = d, b = {
-    ...v,
-    ...c
+import { jsxs as y, jsx as s } from "react/jsx-runtime";
+import { useSortable as A } from "@dnd-kit/sortable";
+import h from "./TableHeaderCellContent.js";
+import H from "./TableHeaderCellResizeHandle.js";
+import { resolveAriaSort as R } from "./resolveAriaSort.js";
+import { resolveHeaderCellClassName as w } from "./resolveHeaderCellClassName.js";
+import { resolveHeaderCellStyle as k } from "./resolveHeaderCellStyle.js";
+import { resolveAriaSpan as n, resolveAriaColIndex as D } from "../../shared/resolveTableAria.js";
+const P = (r) => {
+  const {
+    column: e,
+    header: m,
+    hideWhileDragging: t,
+    htmlAttributes: c,
+    isResizable: d,
+    showSelectionColumn: a,
+    stickyLeftColumnCount: u
+  } = r, l = u ?? 0, i = e.columnKey ?? String(e.key), { attributes: f, listeners: p, setActivatorNodeRef: g, setNodeRef: v, transform: o, transition: C, isDragging: b } = A({
+    id: i
+  }), { role: N, ...S } = f, x = {
+    ...S,
+    ...p
   };
-  return /* @__PURE__ */ S(
+  return /* @__PURE__ */ y(
     "div",
     {
-      ref: p,
-      className: y(e, n, {
+      ref: v,
+      ...c,
+      className: w(e, m, {
         isDraggable: !0,
-        isDragging: u,
-        isResizable: m
+        isDragging: b,
+        isResizable: d,
+        isStickyLeftColumn: l > 0 && e.columnStart <= l
       }),
-      "data-column": l,
+      "data-column": i,
       role: "columnheader",
-      "aria-colindex": R(e.columnStart, t),
-      "aria-colspan": s(e.colSpan),
+      "aria-colindex": D(e.columnStart, a),
+      "aria-colspan": n(e.colSpan),
       "aria-rowindex": e.rowStart,
-      "aria-rowspan": s(e.rowSpan),
-      "aria-sort": h(e),
-      style: H(e, t, {
-        pointerEvents: a ? "none" : void 0,
-        transform: a ? void 0 : o ? `translate3d(${o.x}px, ${o.y}px, 0)` : void 0,
-        transition: g
+      "aria-rowspan": n(e.rowSpan),
+      "aria-sort": R(e),
+      style: k(e, a, {
+        pointerEvents: t ? "none" : void 0,
+        transform: t ? void 0 : o ? `translate3d(${o.x}px, ${o.y}px, 0)` : void 0,
+        transition: C
       }),
       children: [
-        /* @__PURE__ */ i(
-          C,
+        /* @__PURE__ */ s(
+          h,
           {
             ...r,
-            dragActivatorProps: b,
-            dragActivatorRef: f
+            dragActivatorProps: x,
+            dragActivatorRef: g
           }
         ),
-        /* @__PURE__ */ i(A, { ...r })
+        /* @__PURE__ */ s(H, { ...r })
       ]
     }
   );
 };
 export {
-  E as default
+  P as default
 };
 //# sourceMappingURL=TableDraggableHeaderCell.js.map

package/components/table/render/header/TableDraggableHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableDraggableHeaderCell.js","sources":["../../../../../src/components/table/render/header/TableDraggableHeaderCell.tsx"],"sourcesContent":["import { useSortable } from '@dnd-kit/sortable';\n\nimport TableHeaderCellContent from './TableHeaderCellContent';\nimport TableHeaderCellResizeHandle from './TableHeaderCellResizeHandle';\nimport { resolveAriaSort } from './resolveAriaSort';\nimport { resolveHeaderCellClassName } from './resolveHeaderCellClassName';\nimport { resolveHeaderCellStyle } from './resolveHeaderCellStyle';\nimport type { SharedHeaderCellProps } from './TableHeader.types';\nimport { resolveAriaColIndex, resolveAriaSpan } from '../../shared/resolveTableAria';\n\nconst TableDraggableHeaderCell = <RowType extends Record<string, unknown>>(props: SharedHeaderCellProps<RowType>) => {\n    const { column, header, hideWhileDragging, isResizable, showSelectionColumn } = props;\n\n    const columnKey = column.columnKey ?? String(column.key);\n\n    const { attributes, listeners, setActivatorNodeRef, setNodeRef, transform, transition, isDragging } = useSortable({\n        id: columnKey,\n    });\n\n    const { role: _sortableRole, ...sortableAttributes } = attributes;\n\n    const dragActivatorProps = {\n        ...sortableAttributes,\n        ...listeners,\n    };\n\n    return (\n        <div\n            ref={setNodeRef}\n            className={resolveHeaderCellClassName(column, header, {\n                isDraggable: true,\n                isDragging,\n                isResizable,\n            })}\n            data-column={columnKey}\n            role='columnheader'\n            aria-colindex={resolveAriaColIndex(column.columnStart, showSelectionColumn)}\n            aria-colspan={resolveAriaSpan(column.colSpan)}\n            aria-rowindex={column.rowStart}\n            aria-rowspan={resolveAriaSpan(column.rowSpan)}\n            aria-sort={resolveAriaSort(column)}\n            style={resolveHeaderCellStyle(column, showSelectionColumn, {\n                pointerEvents: hideWhileDragging ? 'none' : undefined,\n                transform: hideWhileDragging\n                    ? undefined\n                    : transform\n                      ? `translate3d(${transform.x}px, ${transform.y}px, 0)`\n                      : undefined,\n                transition,\n            })}\n        >\n            <TableHeaderCellContent\n                {...props}\n                dragActivatorProps={dragActivatorProps}\n                dragActivatorRef={setActivatorNodeRef}\n            />\n            <TableHeaderCellResizeHandle {...props} />\n        </div>\n    );\n};\n\nexport default TableDraggableHeaderCell;\n"],"names":["TableDraggableHeaderCell","props","column","header","hideWhileDragging","isResizable","showSelectionColumn","columnKey","attributes","listeners","setActivatorNodeRef","setNodeRef","transform","transition","isDragging","useSortable","_sortableRole","sortableAttributes","dragActivatorProps","jsxs","resolveHeaderCellClassName","resolveAriaColIndex","resolveAriaSpan","resolveAriaSort","resolveHeaderCellStyle","jsx","TableHeaderCellContent","TableHeaderCellResizeHandle"],"mappings":";;;;;;;;AAUA,MAAMA,IAA2B,CAA0CC,MAA0C;AACjH,QAAM,EAAE,QAAAC,GAAQ,QAAAC,GAAQ,mBAAAC,GAAmB,aAAAC,GAAa,qBAAAC,MAAwBL,GAE1EM,IAAYL,EAAO,aAAa,OAAOA,EAAO,GAAG,GAEjD,EAAE,YAAAM,GAAY,WAAAC,GAAW,qBAAAC,GAAqB,YAAAC,GAAY,WAAAC,GAAW,YAAAC,GAAY,YAAAC,EAAA,IAAeC,EAAY;AAAA,IAC9G,IAAIR;AAAA,EAAA,CACP,GAEK,EAAE,MAAMS,GAAe,GAAGC,MAAuBT,GAEjDU,IAAqB;AAAA,IACvB,GAAGD;AAAA,IACH,GAAGR;AAAA,EAAA;AAGP,SACI,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKR;AAAA,MACL,WAAWS,EAA2BlB,GAAQC,GAAQ;AAAA,QAClD,aAAa;AAAA,QACb,YAAAW;AAAA,QACA,aAAAT;AAAA,MAAA,CACH;AAAA,MACD,eAAaE;AAAA,MACb,MAAK;AAAA,MACL,iBAAec,EAAoBnB,EAAO,aAAaI,CAAmB;AAAA,MAC1E,gBAAcgB,EAAgBpB,EAAO,OAAO;AAAA,MAC5C,iBAAeA,EAAO;AAAA,MACtB,gBAAcoB,EAAgBpB,EAAO,OAAO;AAAA,MAC5C,aAAWqB,EAAgBrB,CAAM;AAAA,MACjC,OAAOsB,EAAuBtB,GAAQI,GAAqB;AAAA,QACvD,eAAeF,IAAoB,SAAS;AAAA,QAC5C,WAAWA,IACL,SACAQ,IACE,eAAeA,EAAU,CAAC,OAAOA,EAAU,CAAC,WAC5C;AAAA,QACR,YAAAC;AAAA,MAAA,CACH;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAACC;AAAA,UAAA;AAAA,YACI,GAAGzB;AAAA,YACJ,oBAAAiB;AAAA,YACA,kBAAkBR;AAAA,UAAA;AAAA,QAAA;AAAA,QAEtB,gBAAAe,EAACE,GAAA,EAA6B,GAAG1B,EAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpD;"}
+{"version":3,"file":"TableDraggableHeaderCell.js","sources":["../../../../../src/components/table/render/header/TableDraggableHeaderCell.tsx"],"sourcesContent":["import { useSortable } from '@dnd-kit/sortable';\n\nimport type { TableRowData } from '../../Table.types';\nimport TableHeaderCellContent from './TableHeaderCellContent';\nimport TableHeaderCellResizeHandle from './TableHeaderCellResizeHandle';\nimport { resolveAriaSort } from './resolveAriaSort';\nimport { resolveHeaderCellClassName } from './resolveHeaderCellClassName';\nimport { resolveHeaderCellStyle } from './resolveHeaderCellStyle';\nimport type { SharedHeaderCellProps } from './TableHeader.types';\nimport { resolveAriaColIndex, resolveAriaSpan } from '../../shared/resolveTableAria';\n\nconst TableDraggableHeaderCell = (props: SharedHeaderCellProps<TableRowData>) => {\n    const {\n        column,\n        header,\n        hideWhileDragging,\n        htmlAttributes,\n        isResizable,\n        showSelectionColumn,\n        stickyLeftColumnCount,\n    } = props;\n\n    const stickyLeftColumns = stickyLeftColumnCount ?? 0;\n\n    const columnKey = column.columnKey ?? String(column.key);\n\n    const { attributes, listeners, setActivatorNodeRef, setNodeRef, transform, transition, isDragging } = useSortable({\n        id: columnKey,\n    });\n\n    const { role: _sortableRole, ...sortableAttributes } = attributes;\n\n    const dragActivatorProps = {\n        ...sortableAttributes,\n        ...listeners,\n    };\n\n    return (\n        <div\n            ref={setNodeRef}\n            {...htmlAttributes}\n            className={resolveHeaderCellClassName(column, header, {\n                isDraggable: true,\n                isDragging,\n                isResizable,\n                isStickyLeftColumn: stickyLeftColumns > 0 && column.columnStart <= stickyLeftColumns,\n            })}\n            data-column={columnKey}\n            role='columnheader'\n            aria-colindex={resolveAriaColIndex(column.columnStart, showSelectionColumn)}\n            aria-colspan={resolveAriaSpan(column.colSpan)}\n            aria-rowindex={column.rowStart}\n            aria-rowspan={resolveAriaSpan(column.rowSpan)}\n            aria-sort={resolveAriaSort(column)}\n            style={resolveHeaderCellStyle(column, showSelectionColumn, {\n                pointerEvents: hideWhileDragging ? 'none' : undefined,\n                transform: hideWhileDragging\n                    ? undefined\n                    : transform\n                      ? `translate3d(${transform.x}px, ${transform.y}px, 0)`\n                      : undefined,\n                transition,\n            })}\n        >\n            <TableHeaderCellContent\n                {...props}\n                dragActivatorProps={dragActivatorProps}\n                dragActivatorRef={setActivatorNodeRef}\n            />\n            <TableHeaderCellResizeHandle {...props} />\n        </div>\n    );\n};\n\nexport default TableDraggableHeaderCell;\n"],"names":["TableDraggableHeaderCell","props","column","header","hideWhileDragging","htmlAttributes","isResizable","showSelectionColumn","stickyLeftColumnCount","stickyLeftColumns","columnKey","attributes","listeners","setActivatorNodeRef","setNodeRef","transform","transition","isDragging","useSortable","_sortableRole","sortableAttributes","dragActivatorProps","jsxs","resolveHeaderCellClassName","resolveAriaColIndex","resolveAriaSpan","resolveAriaSort","resolveHeaderCellStyle","jsx","TableHeaderCellContent","TableHeaderCellResizeHandle"],"mappings":";;;;;;;;AAWA,MAAMA,IAA2B,CAACC,MAA+C;AAC7E,QAAM;AAAA,IACF,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,uBAAAC;AAAA,EAAA,IACAP,GAEEQ,IAAoBD,KAAyB,GAE7CE,IAAYR,EAAO,aAAa,OAAOA,EAAO,GAAG,GAEjD,EAAE,YAAAS,GAAY,WAAAC,GAAW,qBAAAC,GAAqB,YAAAC,GAAY,WAAAC,GAAW,YAAAC,GAAY,YAAAC,EAAA,IAAeC,EAAY;AAAA,IAC9G,IAAIR;AAAA,EAAA,CACP,GAEK,EAAE,MAAMS,GAAe,GAAGC,MAAuBT,GAEjDU,IAAqB;AAAA,IACvB,GAAGD;AAAA,IACH,GAAGR;AAAA,EAAA;AAGP,SACI,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKR;AAAA,MACJ,GAAGT;AAAA,MACJ,WAAWkB,EAA2BrB,GAAQC,GAAQ;AAAA,QAClD,aAAa;AAAA,QACb,YAAAc;AAAA,QACA,aAAAX;AAAA,QACA,oBAAoBG,IAAoB,KAAKP,EAAO,eAAeO;AAAA,MAAA,CACtE;AAAA,MACD,eAAaC;AAAA,MACb,MAAK;AAAA,MACL,iBAAec,EAAoBtB,EAAO,aAAaK,CAAmB;AAAA,MAC1E,gBAAckB,EAAgBvB,EAAO,OAAO;AAAA,MAC5C,iBAAeA,EAAO;AAAA,MACtB,gBAAcuB,EAAgBvB,EAAO,OAAO;AAAA,MAC5C,aAAWwB,EAAgBxB,CAAM;AAAA,MACjC,OAAOyB,EAAuBzB,GAAQK,GAAqB;AAAA,QACvD,eAAeH,IAAoB,SAAS;AAAA,QAC5C,WAAWA,IACL,SACAW,IACE,eAAeA,EAAU,CAAC,OAAOA,EAAU,CAAC,WAC5C;AAAA,QACR,YAAAC;AAAA,MAAA,CACH;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAACC;AAAA,UAAA;AAAA,YACI,GAAG5B;AAAA,YACJ,oBAAAoB;AAAA,YACA,kBAAkBR;AAAA,UAAA;AAAA,QAAA;AAAA,QAEtB,gBAAAe,EAACE,GAAA,EAA6B,GAAG7B,EAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpD;"}

package/components/table/render/header/TableHeader.types.d.ts

@@ -1,13 +1,12 @@
 import { DragEndEvent } from '@dnd-kit/core';
 import { HTMLAttributes, MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent, ReactNode, Ref } from 'react';
-import { TableViewModel } from '../../model/tableViewModel.types';
-import { TableSortDirection } from '../../Table.types';
-export type HeaderColumn<RowType extends Record<string, unknown>> = NonNullable<TableViewModel<RowType>['header']>['columns'][number];
-export type TableHeaderSectionProps<RowType extends Record<string, unknown>> = {
-    header: NonNullable<TableViewModel<RowType>['header']>;
+import { TableViewHeader } from '../../model/tableView.types';
+import { TableHtmlAttributes, TableRowData, TableSortDirection } from '../../Table.types';
+export type HeaderColumn<RowType extends TableRowData = TableRowData> = TableViewHeader<RowType>['columns'][number];
+export type TableHeaderSectionProps<RowType extends TableRowData = TableRowData> = {
+    header: TableViewHeader<RowType>;
     headerClassName?: string;
     draggableColumnKeys?: string[];
-    draggableColumns?: boolean;
     isAllSelected?: boolean;
     isSomeRowsSelected?: boolean;
     lastResizableColumnKey?: string;
@@ -17,19 +16,22 @@ export type TableHeaderSectionProps<RowType extends Record<string, unknown>> = {
     onToggleAllSelection?: () => void;
     selectionHeaderContent?: ReactNode;
     showSelectionColumn?: boolean;
+    stickyLeftColumnCount?: number;
     tableHeadRowRef: Ref<HTMLDivElement>;
     onSortChange?: (columnKey: string, direction: TableSortDirection, event: ReactMouseEvent<HTMLButtonElement>) => void;
-    resizeableColumns?: boolean;
 };
-export type SharedHeaderCellProps<RowType extends Record<string, unknown>> = {
+export type SharedHeaderCellProps<RowType extends TableRowData = TableRowData> = {
     column: HeaderColumn<RowType>;
-    header: NonNullable<TableViewModel<RowType>['header']>;
+    header: TableViewHeader<RowType>;
     dragActivatorProps?: HTMLAttributes<HTMLSpanElement>;
     dragActivatorRef?: Ref<HTMLSpanElement>;
+    htmlAttributes?: TableHtmlAttributes;
     hideWhileDragging?: boolean;
+    hasResettableWidth?: boolean;
     isResizable: boolean;
     onColumnResizeReset?: (columnKey: string) => void;
     onColumnResizeStart?: (columnKey: string, event: ReactPointerEvent<HTMLDivElement>) => void;
     onSortChange?: (columnKey: string, direction: TableSortDirection, event: ReactMouseEvent<HTMLButtonElement>) => void;
     showSelectionColumn?: boolean;
+    stickyLeftColumnCount?: number;
 };

package/components/table/render/header/TableHeaderCellContent.d.ts

@@ -1,3 +1,4 @@
+import { TableRowData } from '../../Table.types';
 import { SharedHeaderCellProps } from './TableHeader.types';
-declare const TableHeaderCellContent: <RowType extends Record<string, unknown>>(props: SharedHeaderCellProps<RowType>) => import("react/jsx-runtime").JSX.Element;
+declare const TableHeaderCellContent: (props: SharedHeaderCellProps<TableRowData>) => import("react/jsx-runtime").JSX.Element;
 export default TableHeaderCellContent;

package/components/table/render/header/TableHeaderCellContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderCellContent.js","sources":["../../../../../src/components/table/render/header/TableHeaderCellContent.tsx"],"sourcesContent":["import classNames from '../../../../utils/classNames';\nimport SortArrows from '../../SortArrows';\nimport type { SharedHeaderCellProps } from './TableHeader.types';\n\nconst TableHeaderCellContent = <RowType extends Record<string, unknown>>(props: SharedHeaderCellProps<RowType>) => {\n    const { column, dragActivatorProps, dragActivatorRef, hideWhileDragging, onSortChange } = props;\n    const ariaLabel = column.hideLabel && typeof column.label === 'string' ? column.label : undefined;\n    const labelContent = column.hideLabel ? null : column.icon ? (\n        <span className='display-inline-flex align-items-center gap-5'>\n            <span className={classNames('text-color-dark rioglyph', column.icon)} />\n            <span>{column.label}</span>\n        </span>\n    ) : (\n        column.label\n    );\n    const wrappedLabelContent = labelContent === null ? null : <span className='table-head-label'>{labelContent}</span>;\n\n    return (\n        <div className={classNames('table-head-cell-content', hideWhileDragging && 'table-head-cell-content-hidden')}>\n            <div className='table-head-cell-content-row'>\n                {column.sortable ? (\n                    <button\n                        type='button'\n                        className={classNames('table-head-button', column.filter && 'table-head-button-has-filter')}\n                        aria-label={ariaLabel}\n                        onClick={event =>\n                            onSortChange?.(\n                                column.columnKey ?? String(column.key),\n                                column.sortDirection === 'asc' ? 'desc' : 'asc',\n                                event\n                            )\n                        }\n                    >\n                        <SortArrows direction={column.sortDirection} />\n                        <span\n                            ref={dragActivatorRef}\n                            className={classNames(\n                                'table-head-button-label',\n                                dragActivatorProps && 'table-head-drag-label'\n                            )}\n                            {...dragActivatorProps}\n                        >\n                            {wrappedLabelContent}\n                        </span>\n                    </button>\n                ) : (\n                    <span\n                        ref={dragActivatorRef}\n                        className={classNames(\n                            'table-head-label-wrapper',\n                            column.filter && 'table-head-label-wrapper-has-filter',\n                            dragActivatorProps && 'table-head-drag-label'\n                        )}\n                        aria-label={ariaLabel}\n                        {...dragActivatorProps}\n                    >\n                        {wrappedLabelContent}\n                    </span>\n                )}\n                {column.filter && <span className='table-head-filter'>{column.filter}</span>}\n            </div>\n        </div>\n    );\n};\n\nexport default TableHeaderCellContent;\n"],"names":["TableHeaderCellContent","props","column","dragActivatorProps","dragActivatorRef","hideWhileDragging","onSortChange","ariaLabel","labelContent","jsxs","jsx","classNames","wrappedLabelContent","event","SortArrows"],"mappings":";;;AAIA,MAAMA,IAAyB,CAA0CC,MAA0C;AAC/G,QAAM,EAAE,QAAAC,GAAQ,oBAAAC,GAAoB,kBAAAC,GAAkB,mBAAAC,GAAmB,cAAAC,MAAiBL,GACpFM,IAAYL,EAAO,aAAa,OAAOA,EAAO,SAAU,WAAWA,EAAO,QAAQ,QAClFM,IAAeN,EAAO,YAAY,OAAOA,EAAO,OAClD,gBAAAO,EAAC,QAAA,EAAK,WAAU,gDACZ,UAAA;AAAA,IAAA,gBAAAC,EAAC,UAAK,WAAWC,EAAW,4BAA4BT,EAAO,IAAI,GAAG;AAAA,IACtE,gBAAAQ,EAAC,QAAA,EAAM,UAAAR,EAAO,MAAA,CAAM;AAAA,EAAA,EAAA,CACxB,IAEAA,EAAO,OAELU,IAAsBJ,MAAiB,OAAO,yBAAQ,QAAA,EAAK,WAAU,oBAAoB,UAAAA,EAAA,CAAa;AAE5G,SACI,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAW,2BAA2BN,KAAqB,gCAAgC,GACvG,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,+BACV,UAAA;AAAA,IAAAP,EAAO,WACJ,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,WAAWE,EAAW,qBAAqBT,EAAO,UAAU,8BAA8B;AAAA,QAC1F,cAAYK;AAAA,QACZ,SAAS,CAAAM,MACLP;AAAA,UACIJ,EAAO,aAAa,OAAOA,EAAO,GAAG;AAAA,UACrCA,EAAO,kBAAkB,QAAQ,SAAS;AAAA,UAC1CW;AAAA,QAAA;AAAA,QAIR,UAAA;AAAA,UAAA,gBAAAH,EAACI,GAAA,EAAW,WAAWZ,EAAO,cAAA,CAAe;AAAA,UAC7C,gBAAAQ;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,KAAKN;AAAA,cACL,WAAWO;AAAA,gBACP;AAAA,gBACAR,KAAsB;AAAA,cAAA;AAAA,cAEzB,GAAGA;AAAA,cAEH,UAAAS;AAAA,YAAA;AAAA,UAAA;AAAA,QACL;AAAA,MAAA;AAAA,IAAA,IAGJ,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKN;AAAA,QACL,WAAWO;AAAA,UACP;AAAA,UACAT,EAAO,UAAU;AAAA,UACjBC,KAAsB;AAAA,QAAA;AAAA,QAE1B,cAAYI;AAAA,QACX,GAAGJ;AAAA,QAEH,UAAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAGRV,EAAO,UAAU,gBAAAQ,EAAC,UAAK,WAAU,qBAAqB,YAAO,OAAA,CAAO;AAAA,EAAA,EAAA,CACzE,EAAA,CACJ;AAER;"}
+{"version":3,"file":"TableHeaderCellContent.js","sources":["../../../../../src/components/table/render/header/TableHeaderCellContent.tsx"],"sourcesContent":["import classNames from '../../../../utils/classNames';\nimport SortArrows from '../../SortArrows';\nimport type { TableRowData } from '../../Table.types';\nimport type { SharedHeaderCellProps } from './TableHeader.types';\n\nconst TableHeaderCellContent = (props: SharedHeaderCellProps<TableRowData>) => {\n    const { column, dragActivatorProps, dragActivatorRef, hideWhileDragging, onSortChange } = props;\n\n    const ariaLabel = column.hideLabel && typeof column.label === 'string' ? column.label : undefined;\n\n    const labelContent = column.hideLabel ? null : column.icon ? (\n        <span className='display-inline-flex align-items-center gap-5'>\n            <span className={classNames('text-color-dark rioglyph', column.icon)} />\n            <span>{column.label}</span>\n        </span>\n    ) : (\n        column.label\n    );\n\n    const wrappedLabelContent = labelContent === null ? null : <span className='table-head-label'>{labelContent}</span>;\n\n    return (\n        <div className={classNames('table-head-cell-content', hideWhileDragging && 'table-head-cell-content-hidden')}>\n            <div className='table-head-cell-content-row'>\n                {column.sortable ? (\n                    <button\n                        type='button'\n                        className={classNames('table-head-button', column.filter && 'table-head-button-has-filter')}\n                        aria-label={ariaLabel}\n                        onClick={event =>\n                            onSortChange?.(\n                                column.columnKey ?? String(column.key),\n                                column.sortDirection === 'asc' ? 'desc' : 'asc',\n                                event\n                            )\n                        }\n                    >\n                        <SortArrows direction={column.sortDirection} />\n                        <span\n                            ref={dragActivatorRef}\n                            className={classNames(\n                                'table-head-button-label',\n                                dragActivatorProps && 'table-head-drag-label'\n                            )}\n                            {...dragActivatorProps}\n                        >\n                            {wrappedLabelContent}\n                        </span>\n                    </button>\n                ) : (\n                    <span\n                        ref={dragActivatorRef}\n                        className={classNames(\n                            'table-head-label-wrapper',\n                            column.filter && 'table-head-label-wrapper-has-filter',\n                            dragActivatorProps && 'table-head-drag-label'\n                        )}\n                        aria-label={ariaLabel}\n                        {...dragActivatorProps}\n                    >\n                        {wrappedLabelContent}\n                    </span>\n                )}\n                {column.filter && <span className='table-head-filter'>{column.filter}</span>}\n            </div>\n        </div>\n    );\n};\n\nexport default TableHeaderCellContent;\n"],"names":["TableHeaderCellContent","props","column","dragActivatorProps","dragActivatorRef","hideWhileDragging","onSortChange","ariaLabel","labelContent","jsxs","jsx","classNames","wrappedLabelContent","event","SortArrows"],"mappings":";;;AAKA,MAAMA,IAAyB,CAACC,MAA+C;AAC3E,QAAM,EAAE,QAAAC,GAAQ,oBAAAC,GAAoB,kBAAAC,GAAkB,mBAAAC,GAAmB,cAAAC,MAAiBL,GAEpFM,IAAYL,EAAO,aAAa,OAAOA,EAAO,SAAU,WAAWA,EAAO,QAAQ,QAElFM,IAAeN,EAAO,YAAY,OAAOA,EAAO,OAClD,gBAAAO,EAAC,QAAA,EAAK,WAAU,gDACZ,UAAA;AAAA,IAAA,gBAAAC,EAAC,UAAK,WAAWC,EAAW,4BAA4BT,EAAO,IAAI,GAAG;AAAA,IACtE,gBAAAQ,EAAC,QAAA,EAAM,UAAAR,EAAO,MAAA,CAAM;AAAA,EAAA,EAAA,CACxB,IAEAA,EAAO,OAGLU,IAAsBJ,MAAiB,OAAO,yBAAQ,QAAA,EAAK,WAAU,oBAAoB,UAAAA,EAAA,CAAa;AAE5G,SACI,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAW,2BAA2BN,KAAqB,gCAAgC,GACvG,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,+BACV,UAAA;AAAA,IAAAP,EAAO,WACJ,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,WAAWE,EAAW,qBAAqBT,EAAO,UAAU,8BAA8B;AAAA,QAC1F,cAAYK;AAAA,QACZ,SAAS,CAAAM,MACLP;AAAA,UACIJ,EAAO,aAAa,OAAOA,EAAO,GAAG;AAAA,UACrCA,EAAO,kBAAkB,QAAQ,SAAS;AAAA,UAC1CW;AAAA,QAAA;AAAA,QAIR,UAAA;AAAA,UAAA,gBAAAH,EAACI,GAAA,EAAW,WAAWZ,EAAO,cAAA,CAAe;AAAA,UAC7C,gBAAAQ;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,KAAKN;AAAA,cACL,WAAWO;AAAA,gBACP;AAAA,gBACAR,KAAsB;AAAA,cAAA;AAAA,cAEzB,GAAGA;AAAA,cAEH,UAAAS;AAAA,YAAA;AAAA,UAAA;AAAA,QACL;AAAA,MAAA;AAAA,IAAA,IAGJ,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKN;AAAA,QACL,WAAWO;AAAA,UACP;AAAA,UACAT,EAAO,UAAU;AAAA,UACjBC,KAAsB;AAAA,QAAA;AAAA,QAE1B,cAAYI;AAAA,QACX,GAAGJ;AAAA,QAEH,UAAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAGRV,EAAO,UAAU,gBAAAQ,EAAC,UAAK,WAAU,qBAAqB,YAAO,OAAA,CAAO;AAAA,EAAA,EAAA,CACzE,EAAA,CACJ;AAER;"}

package/components/table/render/header/TableHeaderCellResizeHandle.d.ts

@@ -1,3 +1,4 @@
+import { TableRowData } from '../../Table.types';
 import { SharedHeaderCellProps } from './TableHeader.types';
-declare const TableHeaderCellResizeHandle: <RowType extends Record<string, unknown>>(props: SharedHeaderCellProps<RowType>) => import("react/jsx-runtime").JSX.Element | null;
+declare const TableHeaderCellResizeHandle: (props: SharedHeaderCellProps<TableRowData>) => import("react/jsx-runtime").JSX.Element | null;
 export default TableHeaderCellResizeHandle;

package/components/table/render/header/TableHeaderCellResizeHandle.js

@@ -1,17 +1,17 @@
-import { jsx as r } from "react/jsx-runtime";
-import c from "../../../../utils/classNames.js";
+import { jsx as i } from "react/jsx-runtime";
+import u from "../../../../utils/classNames.js";
 const d = (n) => {
-  const { column: l, isResizable: s, onColumnResizeReset: t, onColumnResizeStart: a } = n, o = l.columnKey, i = l.source?.width !== void 0;
-  return !s || !o ? null : /* @__PURE__ */ r(
+  const { column: t, hasResettableWidth: o, isResizable: s, onColumnResizeReset: a, onColumnResizeStart: r } = n, l = t.columnKey;
+  return !s || !l ? null : /* @__PURE__ */ i(
     "div",
     {
-      className: c(
+      className: u(
         "table-column-resize-handle",
-        i && "table-column-resize-handle-has-width"
+        o && "table-column-resize-handle-has-width"
       ),
-      onPointerDown: (e) => a?.(o, e),
+      onPointerDown: (e) => r?.(l, e),
       onDoubleClick: (e) => {
-        e.preventDefault(), e.stopPropagation(), t?.(o);
+        o && (e.preventDefault(), e.stopPropagation(), a?.(l));
       }
     }
   );

package/components/table/render/header/TableHeaderCellResizeHandle.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderCellResizeHandle.js","sources":["../../../../../src/components/table/render/header/TableHeaderCellResizeHandle.tsx"],"sourcesContent":["import classNames from '../../../../utils/classNames';\nimport type { SharedHeaderCellProps } from './TableHeader.types';\n\nconst TableHeaderCellResizeHandle = <RowType extends Record<string, unknown>>(\n    props: SharedHeaderCellProps<RowType>\n) => {\n    const { column, isResizable, onColumnResizeReset, onColumnResizeStart } = props;\n\n    const columnKey = column.columnKey;\n    const hasExplicitWidth = column.source?.width !== undefined;\n\n    if (!isResizable || !columnKey) {\n        return null;\n    }\n\n    return (\n        <div\n            className={classNames(\n                'table-column-resize-handle',\n                hasExplicitWidth && 'table-column-resize-handle-has-width'\n            )}\n            onPointerDown={event => onColumnResizeStart?.(columnKey, event)}\n            onDoubleClick={event => {\n                event.preventDefault();\n                event.stopPropagation();\n                onColumnResizeReset?.(columnKey);\n            }}\n        />\n    );\n};\n\nexport default TableHeaderCellResizeHandle;\n"],"names":["TableHeaderCellResizeHandle","props","column","isResizable","onColumnResizeReset","onColumnResizeStart","columnKey","hasExplicitWidth","jsx","classNames","event"],"mappings":";;AAGA,MAAMA,IAA8B,CAChCC,MACC;AACD,QAAM,EAAE,QAAAC,GAAQ,aAAAC,GAAa,qBAAAC,GAAqB,qBAAAC,MAAwBJ,GAEpEK,IAAYJ,EAAO,WACnBK,IAAmBL,EAAO,QAAQ,UAAU;AAElD,SAAI,CAACC,KAAe,CAACG,IACV,OAIP,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC;AAAA,QACP;AAAA,QACAF,KAAoB;AAAA,MAAA;AAAA,MAExB,eAAe,CAAAG,MAASL,IAAsBC,GAAWI,CAAK;AAAA,MAC9D,eAAe,CAAAA,MAAS;AACpB,QAAAA,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNN,IAAsBE,CAAS;AAAA,MACnC;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
+{"version":3,"file":"TableHeaderCellResizeHandle.js","sources":["../../../../../src/components/table/render/header/TableHeaderCellResizeHandle.tsx"],"sourcesContent":["import classNames from '../../../../utils/classNames';\nimport type { TableRowData } from '../../Table.types';\nimport type { SharedHeaderCellProps } from './TableHeader.types';\n\nconst TableHeaderCellResizeHandle = (props: SharedHeaderCellProps<TableRowData>) => {\n    const { column, hasResettableWidth, isResizable, onColumnResizeReset, onColumnResizeStart } = props;\n\n    const columnKey = column.columnKey;\n\n    if (!isResizable || !columnKey) {\n        return null;\n    }\n\n    return (\n        <div\n            className={classNames(\n                'table-column-resize-handle',\n                hasResettableWidth && 'table-column-resize-handle-has-width'\n            )}\n            onPointerDown={event => onColumnResizeStart?.(columnKey, event)}\n            onDoubleClick={event => {\n                if (!hasResettableWidth) {\n                    return;\n                }\n\n                event.preventDefault();\n                event.stopPropagation();\n                onColumnResizeReset?.(columnKey);\n            }}\n        />\n    );\n};\n\nexport default TableHeaderCellResizeHandle;\n"],"names":["TableHeaderCellResizeHandle","props","column","hasResettableWidth","isResizable","onColumnResizeReset","onColumnResizeStart","columnKey","jsx","classNames","event"],"mappings":";;AAIA,MAAMA,IAA8B,CAACC,MAA+C;AAChF,QAAM,EAAE,QAAAC,GAAQ,oBAAAC,GAAoB,aAAAC,GAAa,qBAAAC,GAAqB,qBAAAC,MAAwBL,GAExFM,IAAYL,EAAO;AAEzB,SAAI,CAACE,KAAe,CAACG,IACV,OAIP,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC;AAAA,QACP;AAAA,QACAN,KAAsB;AAAA,MAAA;AAAA,MAE1B,eAAe,CAAAO,MAASJ,IAAsBC,GAAWG,CAAK;AAAA,MAC9D,eAAe,CAAAA,MAAS;AACpB,QAAKP,MAILO,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNL,IAAsBE,CAAS;AAAA,MACnC;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

package/components/table/render/header/TableHeaderDragOverlay.d.ts

@@ -1,13 +1,14 @@
+import { TableRowData } from '../../Table.types';
 import { HeaderColumn } from './TableHeader.types';
-type TableHeaderDragOverlayProps<RowType extends Record<string, unknown>> = {
-    column?: HeaderColumn<RowType>;
+type TableHeaderDragOverlayProps = {
+    column?: HeaderColumn<TableRowData>;
     header: NonNullable<{
-        columns: HeaderColumn<RowType>[];
+        columns: HeaderColumn<TableRowData>[];
         rowCount: number;
         totalColumnCount: number;
     }>;
     showSelectionColumn?: boolean;
     width?: number;
 };
-declare const TableHeaderDragOverlay: <RowType extends Record<string, unknown>>(props: TableHeaderDragOverlayProps<RowType>) => import("react/jsx-runtime").JSX.Element | null;
+declare const TableHeaderDragOverlay: (props: TableHeaderDragOverlayProps) => import("react/jsx-runtime").JSX.Element | null;
 export default TableHeaderDragOverlay;

package/components/table/render/header/TableHeaderDragOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderDragOverlay.js","sources":["../../../../../src/components/table/render/header/TableHeaderDragOverlay.tsx"],"sourcesContent":["import classNames from '../../../../utils/classNames';\nimport TableHeaderCellContent from './TableHeaderCellContent';\nimport { resolveHeaderCellClassName } from './resolveHeaderCellClassName';\nimport type { HeaderColumn } from './TableHeader.types';\n\ntype TableHeaderDragOverlayProps<RowType extends Record<string, unknown>> = {\n    column?: HeaderColumn<RowType>;\n    header: NonNullable<{ columns: HeaderColumn<RowType>[]; rowCount: number; totalColumnCount: number }>;\n    showSelectionColumn?: boolean;\n    width?: number;\n};\n\nconst TableHeaderDragOverlay = <RowType extends Record<string, unknown>>(\n    props: TableHeaderDragOverlayProps<RowType>\n) => {\n    const { column, header, showSelectionColumn, width } = props;\n\n    if (!column) {\n        return null;\n    }\n\n    return (\n        <div\n            className={classNames(\n                resolveHeaderCellClassName(column, header, {\n                    isDraggable: true,\n                    isResizable: false,\n                }),\n                'table-head-cell-drag-overlay'\n            )}\n            data-column={column.columnKey ?? String(column.key)}\n            role='presentation'\n            style={{ width }}\n        >\n            <TableHeaderCellContent\n                column={column}\n                header={header}\n                isResizable={false}\n                showSelectionColumn={showSelectionColumn}\n            />\n        </div>\n    );\n};\n\nexport default TableHeaderDragOverlay;\n"],"names":["TableHeaderDragOverlay","props","column","header","showSelectionColumn","width","jsx","classNames","resolveHeaderCellClassName","TableHeaderCellContent"],"mappings":";;;;AAYA,MAAMA,IAAyB,CAC3BC,MACC;AACD,QAAM,EAAE,QAAAC,GAAQ,QAAAC,GAAQ,qBAAAC,GAAqB,OAAAC,MAAUJ;AAEvD,SAAKC,IAKD,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC;AAAA,QACPC,EAA2BN,GAAQC,GAAQ;AAAA,UACvC,aAAa;AAAA,UACb,aAAa;AAAA,QAAA,CAChB;AAAA,QACD;AAAA,MAAA;AAAA,MAEJ,eAAaD,EAAO,aAAa,OAAOA,EAAO,GAAG;AAAA,MAClD,MAAK;AAAA,MACL,OAAO,EAAE,OAAAG,EAAA;AAAA,MAET,UAAA,gBAAAC;AAAA,QAACG;AAAA,QAAA;AAAA,UACG,QAAAP;AAAA,UACA,QAAAC;AAAA,UACA,aAAa;AAAA,UACb,qBAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA,IArBG;AAwBf;"}
+{"version":3,"file":"TableHeaderDragOverlay.js","sources":["../../../../../src/components/table/render/header/TableHeaderDragOverlay.tsx"],"sourcesContent":["import classNames from '../../../../utils/classNames';\nimport TableHeaderCellContent from './TableHeaderCellContent';\nimport { resolveHeaderCellClassName } from './resolveHeaderCellClassName';\nimport type { TableRowData } from '../../Table.types';\nimport type { HeaderColumn } from './TableHeader.types';\n\ntype TableHeaderDragOverlayProps = {\n    column?: HeaderColumn<TableRowData>;\n    header: NonNullable<{ columns: HeaderColumn<TableRowData>[]; rowCount: number; totalColumnCount: number }>;\n    showSelectionColumn?: boolean;\n    width?: number;\n};\n\nconst TableHeaderDragOverlay = (props: TableHeaderDragOverlayProps) => {\n    const { column, header, showSelectionColumn, width } = props;\n\n    if (!column) {\n        return null;\n    }\n\n    return (\n        <div\n            className={classNames(\n                resolveHeaderCellClassName(column, header, {\n                    isDraggable: true,\n                    isResizable: false,\n                }),\n                'table-head-cell-drag-overlay'\n            )}\n            data-column={column.columnKey ?? String(column.key)}\n            role='presentation'\n            style={{ width }}\n        >\n            <TableHeaderCellContent\n                column={column}\n                header={header}\n                isResizable={false}\n                showSelectionColumn={showSelectionColumn}\n            />\n        </div>\n    );\n};\n\nexport default TableHeaderDragOverlay;\n"],"names":["TableHeaderDragOverlay","props","column","header","showSelectionColumn","width","jsx","classNames","resolveHeaderCellClassName","TableHeaderCellContent"],"mappings":";;;;AAaA,MAAMA,IAAyB,CAACC,MAAuC;AACnE,QAAM,EAAE,QAAAC,GAAQ,QAAAC,GAAQ,qBAAAC,GAAqB,OAAAC,MAAUJ;AAEvD,SAAKC,IAKD,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC;AAAA,QACPC,EAA2BN,GAAQC,GAAQ;AAAA,UACvC,aAAa;AAAA,UACb,aAAa;AAAA,QAAA,CAChB;AAAA,QACD;AAAA,MAAA;AAAA,MAEJ,eAAaD,EAAO,aAAa,OAAOA,EAAO,GAAG;AAAA,MAClD,MAAK;AAAA,MACL,OAAO,EAAE,OAAAG,EAAA;AAAA,MAET,UAAA,gBAAAC;AAAA,QAACG;AAAA,QAAA;AAAA,UACG,QAAAP;AAAA,UACA,QAAAC;AAAA,UACA,aAAa;AAAA,UACb,qBAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA,IArBG;AAwBf;"}

package/components/table/render/header/TableStaticHeaderCell.d.ts

@@ -1,3 +1,4 @@
+import { TableRowData } from '../../Table.types';
 import { SharedHeaderCellProps } from './TableHeader.types';
-declare const TableStaticHeaderCell: <RowType extends Record<string, unknown>>(props: SharedHeaderCellProps<RowType>) => import("react/jsx-runtime").JSX.Element;
+declare const TableStaticHeaderCell: (props: SharedHeaderCellProps<TableRowData>) => import("react/jsx-runtime").JSX.Element;
 export default TableStaticHeaderCell;

package/components/table/render/header/TableStaticHeaderCell.js

@@ -1,36 +1,48 @@
-import { jsxs as n, jsx as l } from "react/jsx-runtime";
-import s from "../../../../utils/classNames.js";
-import d from "./TableHeaderCellContent.js";
-import c from "./TableHeaderCellResizeHandle.js";
-import { resolveAriaSort as p } from "./resolveAriaSort.js";
-import { resolveHeaderCellClassName as S } from "./resolveHeaderCellClassName.js";
-import { resolveHeaderCellStyle as f } from "./resolveHeaderCellStyle.js";
-import { resolveAriaSpan as o, resolveAriaColIndex as C } from "../../shared/resolveTableAria.js";
-const y = (r) => {
-  const { column: e, header: i, hideWhileDragging: t, isResizable: m, showSelectionColumn: a } = r;
-  return /* @__PURE__ */ n(
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import u from "../../../../utils/classNames.js";
+import C from "./TableHeaderCellContent.js";
+import f from "./TableHeaderCellResizeHandle.js";
+import { resolveAriaSort as S } from "./resolveAriaSort.js";
+import { resolveHeaderCellClassName as p } from "./resolveHeaderCellClassName.js";
+import { resolveHeaderCellStyle as h } from "./resolveHeaderCellStyle.js";
+import { resolveAriaSpan as t, resolveAriaColIndex as y } from "../../shared/resolveTableAria.js";
+const L = (r) => {
+  const {
+    column: e,
+    header: i,
+    hideWhileDragging: m,
+    htmlAttributes: n,
+    isResizable: s,
+    showSelectionColumn: l,
+    stickyLeftColumnCount: c
+  } = r, a = c ?? 0;
+  return /* @__PURE__ */ d(
     "div",
     {
-      className: s(
-        S(e, i, { isResizable: m }),
-        t && "table-head-cell-drag-placeholder"
+      ...n,
+      className: u(
+        p(e, i, {
+          isResizable: s,
+          isStickyLeftColumn: a > 0 && e.columnStart <= a
+        }),
+        m && "table-head-cell-drag-placeholder"
       ),
       "data-column": e.columnKey ?? String(e.key),
       role: "columnheader",
-      "aria-colindex": C(e.columnStart, a),
-      "aria-colspan": o(e.colSpan),
+      "aria-colindex": y(e.columnStart, l),
+      "aria-colspan": t(e.colSpan),
       "aria-rowindex": e.rowStart,
-      "aria-rowspan": o(e.rowSpan),
-      "aria-sort": p(e),
-      style: f(e, a),
+      "aria-rowspan": t(e.rowSpan),
+      "aria-sort": S(e),
+      style: h(e, l),
       children: [
-        /* @__PURE__ */ l(d, { ...r }),
-        /* @__PURE__ */ l(c, { ...r })
+        /* @__PURE__ */ o(C, { ...r }),
+        /* @__PURE__ */ o(f, { ...r })
       ]
     }
   );
 };
 export {
-  y as default
+  L as default
 };
 //# sourceMappingURL=TableStaticHeaderCell.js.map

package/components/table/render/header/TableStaticHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableStaticHeaderCell.js","sources":["../../../../../src/components/table/render/header/TableStaticHeaderCell.tsx"],"sourcesContent":["import classNames from '../../../../utils/classNames';\nimport TableHeaderCellContent from './TableHeaderCellContent';\nimport TableHeaderCellResizeHandle from './TableHeaderCellResizeHandle';\nimport { resolveAriaSort } from './resolveAriaSort';\nimport { resolveHeaderCellClassName } from './resolveHeaderCellClassName';\nimport { resolveHeaderCellStyle } from './resolveHeaderCellStyle';\nimport type { SharedHeaderCellProps } from './TableHeader.types';\nimport { resolveAriaColIndex, resolveAriaSpan } from '../../shared/resolveTableAria';\n\nconst TableStaticHeaderCell = <RowType extends Record<string, unknown>>(props: SharedHeaderCellProps<RowType>) => {\n    const { column, header, hideWhileDragging, isResizable, showSelectionColumn } = props;\n\n    return (\n        <div\n            className={classNames(\n                resolveHeaderCellClassName(column, header, { isResizable }),\n                hideWhileDragging && 'table-head-cell-drag-placeholder'\n            )}\n            data-column={column.columnKey ?? String(column.key)}\n            role='columnheader'\n            aria-colindex={resolveAriaColIndex(column.columnStart, showSelectionColumn)}\n            aria-colspan={resolveAriaSpan(column.colSpan)}\n            aria-rowindex={column.rowStart}\n            aria-rowspan={resolveAriaSpan(column.rowSpan)}\n            aria-sort={resolveAriaSort(column)}\n            style={resolveHeaderCellStyle(column, showSelectionColumn)}\n        >\n            <TableHeaderCellContent {...props} />\n            <TableHeaderCellResizeHandle {...props} />\n        </div>\n    );\n};\n\nexport default TableStaticHeaderCell;\n"],"names":["TableStaticHeaderCell","props","column","header","hideWhileDragging","isResizable","showSelectionColumn","jsxs","classNames","resolveHeaderCellClassName","resolveAriaColIndex","resolveAriaSpan","resolveAriaSort","resolveHeaderCellStyle","jsx","TableHeaderCellContent","TableHeaderCellResizeHandle"],"mappings":";;;;;;;;AASA,MAAMA,IAAwB,CAA0CC,MAA0C;AAC9G,QAAM,EAAE,QAAAC,GAAQ,QAAAC,GAAQ,mBAAAC,GAAmB,aAAAC,GAAa,qBAAAC,MAAwBL;AAEhF,SACI,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC;AAAA,QACPC,EAA2BP,GAAQC,GAAQ,EAAE,aAAAE,GAAa;AAAA,QAC1DD,KAAqB;AAAA,MAAA;AAAA,MAEzB,eAAaF,EAAO,aAAa,OAAOA,EAAO,GAAG;AAAA,MAClD,MAAK;AAAA,MACL,iBAAeQ,EAAoBR,EAAO,aAAaI,CAAmB;AAAA,MAC1E,gBAAcK,EAAgBT,EAAO,OAAO;AAAA,MAC5C,iBAAeA,EAAO;AAAA,MACtB,gBAAcS,EAAgBT,EAAO,OAAO;AAAA,MAC5C,aAAWU,EAAgBV,CAAM;AAAA,MACjC,OAAOW,EAAuBX,GAAQI,CAAmB;AAAA,MAEzD,UAAA;AAAA,QAAA,gBAAAQ,EAACC,GAAA,EAAwB,GAAGd,GAAO;AAAA,QACnC,gBAAAa,EAACE,GAAA,EAA6B,GAAGf,EAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpD;"}
+{"version":3,"file":"TableStaticHeaderCell.js","sources":["../../../../../src/components/table/render/header/TableStaticHeaderCell.tsx"],"sourcesContent":["import classNames from '../../../../utils/classNames';\nimport type { TableRowData } from '../../Table.types';\nimport TableHeaderCellContent from './TableHeaderCellContent';\nimport TableHeaderCellResizeHandle from './TableHeaderCellResizeHandle';\nimport { resolveAriaSort } from './resolveAriaSort';\nimport { resolveHeaderCellClassName } from './resolveHeaderCellClassName';\nimport { resolveHeaderCellStyle } from './resolveHeaderCellStyle';\nimport type { SharedHeaderCellProps } from './TableHeader.types';\nimport { resolveAriaColIndex, resolveAriaSpan } from '../../shared/resolveTableAria';\n\nconst TableStaticHeaderCell = (props: SharedHeaderCellProps<TableRowData>) => {\n    const {\n        column,\n        header,\n        hideWhileDragging,\n        htmlAttributes,\n        isResizable,\n        showSelectionColumn,\n        stickyLeftColumnCount,\n    } = props;\n\n    const stickyLeftColumns = stickyLeftColumnCount ?? 0;\n\n    return (\n        <div\n            {...htmlAttributes}\n            className={classNames(\n                resolveHeaderCellClassName(column, header, {\n                    isResizable,\n                    isStickyLeftColumn: stickyLeftColumns > 0 && column.columnStart <= stickyLeftColumns,\n                }),\n                hideWhileDragging && 'table-head-cell-drag-placeholder'\n            )}\n            data-column={column.columnKey ?? String(column.key)}\n            role='columnheader'\n            aria-colindex={resolveAriaColIndex(column.columnStart, showSelectionColumn)}\n            aria-colspan={resolveAriaSpan(column.colSpan)}\n            aria-rowindex={column.rowStart}\n            aria-rowspan={resolveAriaSpan(column.rowSpan)}\n            aria-sort={resolveAriaSort(column)}\n            style={resolveHeaderCellStyle(column, showSelectionColumn)}\n        >\n            <TableHeaderCellContent {...props} />\n            <TableHeaderCellResizeHandle {...props} />\n        </div>\n    );\n};\n\nexport default TableStaticHeaderCell;\n"],"names":["TableStaticHeaderCell","props","column","header","hideWhileDragging","htmlAttributes","isResizable","showSelectionColumn","stickyLeftColumnCount","stickyLeftColumns","jsxs","classNames","resolveHeaderCellClassName","resolveAriaColIndex","resolveAriaSpan","resolveAriaSort","resolveHeaderCellStyle","jsx","TableHeaderCellContent","TableHeaderCellResizeHandle"],"mappings":";;;;;;;;AAUA,MAAMA,IAAwB,CAACC,MAA+C;AAC1E,QAAM;AAAA,IACF,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,uBAAAC;AAAA,EAAA,IACAP,GAEEQ,IAAoBD,KAAyB;AAEnD,SACI,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGL;AAAA,MACJ,WAAWM;AAAA,QACPC,EAA2BV,GAAQC,GAAQ;AAAA,UACvC,aAAAG;AAAA,UACA,oBAAoBG,IAAoB,KAAKP,EAAO,eAAeO;AAAA,QAAA,CACtE;AAAA,QACDL,KAAqB;AAAA,MAAA;AAAA,MAEzB,eAAaF,EAAO,aAAa,OAAOA,EAAO,GAAG;AAAA,MAClD,MAAK;AAAA,MACL,iBAAeW,EAAoBX,EAAO,aAAaK,CAAmB;AAAA,MAC1E,gBAAcO,EAAgBZ,EAAO,OAAO;AAAA,MAC5C,iBAAeA,EAAO;AAAA,MACtB,gBAAcY,EAAgBZ,EAAO,OAAO;AAAA,MAC5C,aAAWa,EAAgBb,CAAM;AAAA,MACjC,OAAOc,EAAuBd,GAAQK,CAAmB;AAAA,MAEzD,UAAA;AAAA,QAAA,gBAAAU,EAACC,GAAA,EAAwB,GAAGjB,GAAO;AAAA,QACnC,gBAAAgB,EAACE,GAAA,EAA6B,GAAGlB,EAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpD;"}

package/components/table/render/header/resolveAriaSort.d.ts

@@ -1,2 +1,3 @@
+import { TableRowData } from '../../Table.types';
 import { HeaderColumn } from './TableHeader.types';
-export declare const resolveAriaSort: <RowType extends Record<string, unknown>>(column: HeaderColumn<RowType>) => "none" | "ascending" | "descending" | undefined;
+export declare const resolveAriaSort: (column: HeaderColumn<TableRowData>) => "none" | "ascending" | "descending" | undefined;

package/components/table/render/header/resolveAriaSort.js.map

@@ -1 +1 @@
-{"version":3,"file":"resolveAriaSort.js","sources":["../../../../../src/components/table/render/header/resolveAriaSort.ts"],"sourcesContent":["import type { HeaderColumn } from './TableHeader.types';\n\nexport const resolveAriaSort = <RowType extends Record<string, unknown>>(column: HeaderColumn<RowType>) => {\n    if (!column.sortable) {\n        return;\n    }\n\n    if (column.sortDirection === 'asc') {\n        return 'ascending';\n    }\n\n    if (column.sortDirection === 'desc') {\n        return 'descending';\n    }\n\n    return 'none';\n};\n"],"names":["resolveAriaSort","column"],"mappings":"AAEO,MAAMA,IAAkB,CAA0CC,MAAkC;AACvG,MAAKA,EAAO;AAIZ,WAAIA,EAAO,kBAAkB,QAClB,cAGPA,EAAO,kBAAkB,SAClB,eAGJ;AACX;"}
+{"version":3,"file":"resolveAriaSort.js","sources":["../../../../../src/components/table/render/header/resolveAriaSort.ts"],"sourcesContent":["import type { TableRowData } from '../../Table.types';\nimport type { HeaderColumn } from './TableHeader.types';\n\nexport const resolveAriaSort = (column: HeaderColumn<TableRowData>) => {\n    if (!column.sortable) {\n        return;\n    }\n\n    if (column.sortDirection === 'asc') {\n        return 'ascending';\n    }\n\n    if (column.sortDirection === 'desc') {\n        return 'descending';\n    }\n\n    return 'none';\n};\n"],"names":["resolveAriaSort","column"],"mappings":"AAGO,MAAMA,IAAkB,CAACC,MAAuC;AACnE,MAAKA,EAAO;AAIZ,WAAIA,EAAO,kBAAkB,QAClB,cAGPA,EAAO,kBAAkB,SAClB,eAGJ;AACX;"}