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

package/components/table/layout/useHorizontalSectionSync.js

@@ -1,43 +1,44 @@
-import { useRef as a, useState as p, useCallback as i, useEffect as y } from "react";
-const m = "table-horizontal-scroll", R = (t) => {
-  const e = t?.currentTarget;
-  if (e && "scrollLeft" in e)
-    return e.scrollLeft;
-  const o = t?.target;
-  return o && "scrollLeft" in o ? o.scrollLeft : 0;
-}, H = ({ enabled: t, hasFooterCells: e = !0 }) => {
-  const o = a(null), n = a(null), l = a(0), [L, u] = p(!1), s = i(
-    (c) => {
-      const r = (f) => {
-        if (f) {
-          if (c === 0) {
-            f.style.removeProperty("transform");
+import { useRef as f, useState as S, useCallback as m, useEffect as g } from "react";
+const h = "table-horizontal-scroll", R = (r) => {
+  const o = r?.currentTarget;
+  if (o && "scrollLeft" in o)
+    return o.scrollLeft;
+  const e = r?.target;
+  return e && "scrollLeft" in e ? e.scrollLeft : 0;
+}, z = ({ enabled: r, hasFooterCells: o = !0 }) => {
+  const e = f(null), c = f(null), a = f(0), [L, i] = S(!1), [H, u] = S(!1), l = m(
+    (s) => {
+      const n = (t) => {
+        if (t) {
+          if (s === 0) {
+            t.style.removeProperty("transform");
             return;
           }
-          f.style.transform = `translateX(-${c}px)`;
+          t.style.transform = `translateX(-${s}px)`;
         }
       };
-      r(o.current), e ? r(n.current) : n.current && n.current.style.removeProperty("transform");
+      n(e.current), o ? n(c.current) : c.current && c.current.style.removeProperty("transform");
     },
-    [e]
-  ), S = i(
-    (c) => {
-      const r = R(c);
-      u(r > 0), t && s(r), r !== l.current && (l.current = r, window.dispatchEvent(new CustomEvent(m)));
+    [o]
+  ), p = m(
+    (s) => {
+      const n = s?.currentTarget, t = R(s), y = n ? Math.max(n.scrollWidth - n.clientWidth, 0) : 0, E = Math.max(y - t, 0);
+      i(t > 0), u(E > 1), r && l(t), t !== a.current && (a.current = t, window.dispatchEvent(new CustomEvent(h)));
     },
-    [t, s]
+    [r, l]
   );
-  return y(() => {
-    t || (l.current = 0, u(!1), s(0));
-  }, [t, s]), {
-    handleBodyScroll: S,
-    hasHorizontalScrollOffset: L,
-    tableFooterRowRef: n,
-    tableHeadRowRef: o
+  return g(() => {
+    r || (a.current = 0, i(!1), u(!1), l(0));
+  }, [r, l]), {
+    handleBodyScroll: p,
+    hasHorizontalScrollEndOffset: H,
+    hasHorizontalScrollStartOffset: L,
+    tableFooterRowRef: c,
+    tableHeadRowRef: e
   };
 };
 export {
-  m as TABLE_HORIZONTAL_SCROLL_EVENT,
-  H as useHorizontalSectionSync
+  h as TABLE_HORIZONTAL_SCROLL_EVENT,
+  z as useHorizontalSectionSync
 };
 //# sourceMappingURL=useHorizontalSectionSync.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useHorizontalSectionSync.js","sources":["../../../../src/components/table/layout/useHorizontalSectionSync.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState, 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    hasFooterCells?: boolean;\n};\n\nexport const useHorizontalSectionSync = ({ enabled, hasFooterCells = true }: UseHorizontalSectionSyncProps) => {\n    const tableHeadRowRef = useRef<HTMLDivElement>(null);\n    const tableFooterRowRef = useRef<HTMLDivElement>(null);\n    const previousScrollLeftRef = useRef(0);\n    const [hasHorizontalScrollOffset, setHasHorizontalScrollOffset] = useState(false);\n\n    const syncHorizontalSections = useCallback(\n        (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\n            if (hasFooterCells) {\n                applyTransform(tableFooterRowRef.current);\n            } else if (tableFooterRowRef.current) {\n                tableFooterRowRef.current.style.removeProperty('transform');\n            }\n        },\n        [hasFooterCells]\n    );\n\n    const handleBodyScroll = useCallback(\n        (event: UIEvent<HTMLElement> | undefined) => {\n            const scrollLeft = getScrollLeftFromEvent(event);\n            setHasHorizontalScrollOffset(scrollLeft > 0);\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            setHasHorizontalScrollOffset(false);\n            syncHorizontalSections(0);\n        }\n    }, [enabled, syncHorizontalSections]);\n\n    return {\n        handleBodyScroll,\n        hasHorizontalScrollOffset,\n        tableFooterRowRef,\n        tableHeadRowRef,\n    };\n};\n"],"names":["TABLE_HORIZONTAL_SCROLL_EVENT","getScrollLeftFromEvent","event","currentTarget","target","useHorizontalSectionSync","enabled","hasFooterCells","tableHeadRowRef","useRef","tableFooterRowRef","previousScrollLeftRef","hasHorizontalScrollOffset","setHasHorizontalScrollOffset","useState","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,GAOaC,IAA2B,CAAC,EAAE,SAAAC,GAAS,gBAAAC,IAAiB,SAA0C;AAC3G,QAAMC,IAAkBC,EAAuB,IAAI,GAC7CC,IAAoBD,EAAuB,IAAI,GAC/CE,IAAwBF,EAAO,CAAC,GAChC,CAACG,GAA2BC,CAA4B,IAAIC,EAAS,EAAK,GAE1EC,IAAyBC;AAAA,IAC3B,CAACC,MAAuB;AACpB,YAAMC,IAAiB,CAACC,MAAmC;AACvD,YAAKA,GAIL;AAAA,cAAIF,MAAe,GAAG;AAClB,YAAAE,EAAQ,MAAM,eAAe,WAAW;AACxC;AAAA,UACJ;AAEA,UAAAA,EAAQ,MAAM,YAAY,eAAeF,CAAU;AAAA;AAAA,MACvD;AAEA,MAAAC,EAAeV,EAAgB,OAAO,GAElCD,IACAW,EAAeR,EAAkB,OAAO,IACjCA,EAAkB,WACzBA,EAAkB,QAAQ,MAAM,eAAe,WAAW;AAAA,IAElE;AAAA,IACA,CAACH,CAAc;AAAA,EAAA,GAGba,IAAmBJ;AAAA,IACrB,CAACd,MAA4C;AACzC,YAAMe,IAAahB,EAAuBC,CAAK;AAC/C,MAAAW,EAA6BI,IAAa,CAAC,GAEvCX,KACAS,EAAuBE,CAAU,GAGjCA,MAAeN,EAAsB,YACrCA,EAAsB,UAAUM,GAChC,OAAO,cAAc,IAAI,YAAYjB,CAA6B,CAAC;AAAA,IAE3E;AAAA,IACA,CAACM,GAASS,CAAsB;AAAA,EAAA;AAGpC,SAAAM,EAAU,MAAM;AACZ,IAAKf,MACDK,EAAsB,UAAU,GAChCE,EAA6B,EAAK,GAClCE,EAAuB,CAAC;AAAA,EAEhC,GAAG,CAACT,GAASS,CAAsB,CAAC,GAE7B;AAAA,IACH,kBAAAK;AAAA,IACA,2BAAAR;AAAA,IACA,mBAAAF;AAAA,IACA,iBAAAF;AAAA,EAAA;AAER;"}
+{"version":3,"file":"useHorizontalSectionSync.js","sources":["../../../../src/components/table/layout/useHorizontalSectionSync.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState, 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    hasFooterCells?: boolean;\n};\n\nexport const useHorizontalSectionSync = ({ enabled, hasFooterCells = true }: UseHorizontalSectionSyncProps) => {\n    const tableHeadRowRef = useRef<HTMLDivElement>(null);\n    const tableFooterRowRef = useRef<HTMLDivElement>(null);\n    const previousScrollLeftRef = useRef(0);\n\n    const [hasHorizontalScrollStartOffset, setHasHorizontalScrollStartOffset] = useState(false);\n    const [hasHorizontalScrollEndOffset, setHasHorizontalScrollEndOffset] = useState(false);\n\n    const syncHorizontalSections = useCallback(\n        (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\n            if (hasFooterCells) {\n                applyTransform(tableFooterRowRef.current);\n            } else if (tableFooterRowRef.current) {\n                tableFooterRowRef.current.style.removeProperty('transform');\n            }\n        },\n        [hasFooterCells]\n    );\n\n    const handleBodyScroll = useCallback(\n        (event: UIEvent<HTMLElement> | undefined) => {\n            const currentTarget = event?.currentTarget as HTMLElement | undefined;\n            const scrollLeft = getScrollLeftFromEvent(event);\n            const maxScrollLeft = currentTarget\n                ? Math.max(currentTarget.scrollWidth - currentTarget.clientWidth, 0)\n                : 0;\n            const remainingScrollLeft = Math.max(maxScrollLeft - scrollLeft, 0);\n\n            setHasHorizontalScrollStartOffset(scrollLeft > 0);\n            setHasHorizontalScrollEndOffset(remainingScrollLeft > 1);\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            setHasHorizontalScrollStartOffset(false);\n            setHasHorizontalScrollEndOffset(false);\n            syncHorizontalSections(0);\n        }\n    }, [enabled, syncHorizontalSections]);\n\n    return {\n        handleBodyScroll,\n        hasHorizontalScrollEndOffset,\n        hasHorizontalScrollStartOffset,\n        tableFooterRowRef,\n        tableHeadRowRef,\n    };\n};\n"],"names":["TABLE_HORIZONTAL_SCROLL_EVENT","getScrollLeftFromEvent","event","currentTarget","target","useHorizontalSectionSync","enabled","hasFooterCells","tableHeadRowRef","useRef","tableFooterRowRef","previousScrollLeftRef","hasHorizontalScrollStartOffset","setHasHorizontalScrollStartOffset","useState","hasHorizontalScrollEndOffset","setHasHorizontalScrollEndOffset","syncHorizontalSections","useCallback","scrollLeft","applyTransform","element","handleBodyScroll","maxScrollLeft","remainingScrollLeft","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,GAOaC,IAA2B,CAAC,EAAE,SAAAC,GAAS,gBAAAC,IAAiB,SAA0C;AAC3G,QAAMC,IAAkBC,EAAuB,IAAI,GAC7CC,IAAoBD,EAAuB,IAAI,GAC/CE,IAAwBF,EAAO,CAAC,GAEhC,CAACG,GAAgCC,CAAiC,IAAIC,EAAS,EAAK,GACpF,CAACC,GAA8BC,CAA+B,IAAIF,EAAS,EAAK,GAEhFG,IAAyBC;AAAA,IAC3B,CAACC,MAAuB;AACpB,YAAMC,IAAiB,CAACC,MAAmC;AACvD,YAAKA,GAIL;AAAA,cAAIF,MAAe,GAAG;AAClB,YAAAE,EAAQ,MAAM,eAAe,WAAW;AACxC;AAAA,UACJ;AAEA,UAAAA,EAAQ,MAAM,YAAY,eAAeF,CAAU;AAAA;AAAA,MACvD;AAEA,MAAAC,EAAeZ,EAAgB,OAAO,GAElCD,IACAa,EAAeV,EAAkB,OAAO,IACjCA,EAAkB,WACzBA,EAAkB,QAAQ,MAAM,eAAe,WAAW;AAAA,IAElE;AAAA,IACA,CAACH,CAAc;AAAA,EAAA,GAGbe,IAAmBJ;AAAA,IACrB,CAAChB,MAA4C;AACzC,YAAMC,IAAgBD,GAAO,eACvBiB,IAAalB,EAAuBC,CAAK,GACzCqB,IAAgBpB,IAChB,KAAK,IAAIA,EAAc,cAAcA,EAAc,aAAa,CAAC,IACjE,GACAqB,IAAsB,KAAK,IAAID,IAAgBJ,GAAY,CAAC;AAElE,MAAAN,EAAkCM,IAAa,CAAC,GAChDH,EAAgCQ,IAAsB,CAAC,GAEnDlB,KACAW,EAAuBE,CAAU,GAGjCA,MAAeR,EAAsB,YACrCA,EAAsB,UAAUQ,GAChC,OAAO,cAAc,IAAI,YAAYnB,CAA6B,CAAC;AAAA,IAE3E;AAAA,IACA,CAACM,GAASW,CAAsB;AAAA,EAAA;AAGpC,SAAAQ,EAAU,MAAM;AACZ,IAAKnB,MACDK,EAAsB,UAAU,GAChCE,EAAkC,EAAK,GACvCG,EAAgC,EAAK,GACrCC,EAAuB,CAAC;AAAA,EAEhC,GAAG,CAACX,GAASW,CAAsB,CAAC,GAE7B;AAAA,IACH,kBAAAK;AAAA,IACA,8BAAAP;AAAA,IACA,gCAAAH;AAAA,IACA,mBAAAF;AAAA,IACA,iBAAAF;AAAA,EAAA;AAER;"}

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

@@ -26,7 +26,8 @@ type InternalTableStyle = CSSProperties & {
 export declare const useTableLayout: <RowType extends TableRowData>(props: UseTableLayoutProps<RowType>) => {
     columnsWithAreas: TableColumnWithArea<RowType>[];
     handleBodyScroll: (event: import('react').UIEvent<HTMLElement> | undefined) => void;
-    hasHorizontalScrollOffset: boolean;
+    hasHorizontalScrollEndOffset: boolean;
+    hasHorizontalScrollStartOffset: boolean;
     tableUseOverflow: boolean;
     tableWrapperRef: import('react').MutableRefObject<HTMLDivElement | null>;
     tableFooterRowRef: import('react').RefObject<HTMLDivElement>;

package/components/table/layout/useTableLayout.js

@@ -1,59 +1,66 @@
 import { useMeasuredColumnMaxWidths as N } from "./useMeasuredColumnMaxWidths.js";
-import { MIN_COLUMN_WIDTH_PX as O } from "../tableSizing.constants.js";
-import { toCssSize as l, getColumnTrack as R } from "./columnSizing.js";
-import { useHorizontalSectionSync as L } from "./useHorizontalSectionSync.js";
-import $ from "../../../hooks/useResizeObserver.js";
-const h = 50, B = (r) => {
+import { MIN_COLUMN_WIDTH_PX as R } from "../tableSizing.constants.js";
+import { toCssSize as l, getColumnTrack as L } from "./columnSizing.js";
+import { useHorizontalSectionSync as $ } from "./useHorizontalSectionSync.js";
+import B from "../../../hooks/useResizeObserver.js";
+const h = 50, E = (r) => {
   if (!r)
     return;
   const a = r.trim().match(/^(-?\d+(?:\.\d+)?)px$/);
   if (a)
     return Number(a[1]);
-}, j = (r) => {
-  const { bodyMaxHeight: a, cardsStyle: d, columns: n, hasFooterCells: p, rowSeparatorWidth: u, showSelectionColumn: i, style: b } = r, [c, , { inlineSize: f }] = $(), t = n.map((e, o) => ({
-    column: e,
+}, k = (r) => {
+  const { bodyMaxHeight: a, cardsStyle: d, columns: n, hasFooterCells: p, rowSeparatorWidth: u, showSelectionColumn: i, style: b } = r, [c, , { inlineSize: f }] = B(), e = n.map((t, o) => ({
+    column: t,
     columnIndex: o,
     areaName: `table-col-${o + 1}`
-  })), s = f ?? c.current?.clientWidth, W = (i ? h : 0) + n.reduce((e, o) => {
+  })), s = f ?? c.current?.clientWidth, S = (i ? h : 0) + n.reduce((t, o) => {
     if (o.width === void 0)
-      return e + O;
-    const H = B(l(o.width));
-    return e + (H ?? 0);
-  }, 0), m = s !== void 0 && W > s, S = s !== void 0 ? `${s}px` : "100%", { handleBodyScroll: w, hasHorizontalScrollOffset: x, tableFooterRowRef: C, tableHeadRowRef: M } = L({
+      return t + R;
+    const v = E(l(o.width));
+    return t + (v ?? 0);
+  }, 0), m = s !== void 0 && S > s, W = s !== void 0 ? `${s}px` : "100%", {
+    handleBodyScroll: w,
+    hasHorizontalScrollEndOffset: x,
+    hasHorizontalScrollStartOffset: C,
+    tableFooterRowRef: M,
+    tableHeadRowRef: T
+  } = $({
     enabled: !!a,
     hasFooterCells: p
-  }), T = N({
+  }), g = N({
     columns: n,
     enabled: m,
     tableWrapperRef: c
-  }), g = t.length > 0 ? [
+  }), y = e.length > 0 ? [
     i ? `${h}px` : void 0,
-    ...t.map(({ column: e }) => R(e, T[e.key]))
-  ].filter(Boolean).join(" ") : "minmax(0, 1fr)", y = t.length > 0 ? `"${[
+    ...e.map(({ column: t }) => L(t, g[t.key]))
+  ].filter(Boolean).join(" ") : "minmax(0, 1fr)", z = e.length > 0 ? `"${[
     i ? "table-selection" : void 0,
-    ...t.map(({ areaName: e }) => e)
-  ].filter(Boolean).join(" ")}"` : "none", _ = l(d?.minWidth) ?? "280px", v = l(d?.maxWidth) ?? "1fr", z = {
+    ...e.map(({ areaName: t }) => t)
+  ].filter(Boolean).join(" ")}"` : "none", H = l(d?.minWidth) ?? "280px", O = l(d?.maxWidth) ?? "1fr", _ = {
     ...b ?? {},
-    "--table-columns": g,
-    "--table-areas": y,
-    "--table-cards-min": _,
-    "--table-cards-max": v,
+    "--table-columns": y,
+    "--table-areas": z,
+    "--table-cards-min": H,
+    "--table-cards-max": O,
     "--table-column-count": String(n.length + (i ? 1 : 0)),
     "--table-row-separator-width": l(u),
-    "--table-width": S
+    "--table-width": W
   };
   return {
-    columnsWithAreas: t,
+    columnsWithAreas: e,
     handleBodyScroll: w,
-    hasHorizontalScrollOffset: x,
+    hasHorizontalScrollEndOffset: x,
+    hasHorizontalScrollStartOffset: C,
     tableUseOverflow: m,
     tableWrapperRef: c,
-    tableFooterRowRef: C,
-    tableHeadRowRef: M,
-    wrapperStyle: z
+    tableFooterRowRef: M,
+    tableHeadRowRef: T,
+    wrapperStyle: _
   };
 };
 export {
-  j as useTableLayout
+  k as useTableLayout
 };
 //# sourceMappingURL=useTableLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useTableLayout.js","sources":["../../../../src/components/table/layout/useTableLayout.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nimport type { TableCardsStyleSettings, TableColumnDefinition, TableRowData } from '../Table.types';\nimport { useMeasuredColumnMaxWidths } from './useMeasuredColumnMaxWidths';\nimport { MIN_COLUMN_WIDTH_PX } from '../tableSizing.constants';\nimport { getColumnTrack, toCssSize } from './columnSizing';\nimport { useHorizontalSectionSync } from './useHorizontalSectionSync';\nimport useResizeObserver from '../../../useResizeObserver';\n\nconst TABLE_SELECTION_COLUMN_WIDTH_PX = 50;\n\nconst parsePixelSize = (value?: string) => {\n    if (!value) {\n        return;\n    }\n\n    const match = value.trim().match(/^(-?\\d+(?:\\.\\d+)?)px$/);\n\n    if (!match) {\n        return;\n    }\n\n    return Number(match[1]);\n};\n\nexport type TableColumnWithArea<RowType extends TableRowData> = {\n    column: TableColumnDefinition<RowType>;\n    columnIndex: number;\n    areaName: string;\n};\n\ntype UseTableLayoutProps<RowType extends TableRowData> = {\n    bodyMaxHeight?: string;\n    cardsStyle?: TableCardsStyleSettings;\n    columns: TableColumnDefinition<RowType>[];\n    hasFooterCells?: boolean;\n    rowSeparatorWidth?: number | string;\n    showSelectionColumn?: boolean;\n    style?: CSSProperties;\n};\n\ntype InternalTableStyle = CSSProperties & {\n    '--table-columns'?: string;\n    '--table-areas'?: string;\n    '--table-cards-min'?: string;\n    '--table-cards-max'?: string;\n    '--table-column-count'?: string;\n    '--table-row-separator-width'?: string;\n    '--table-width'?: string;\n};\n\nexport const useTableLayout = <RowType extends TableRowData>(props: UseTableLayoutProps<RowType>) => {\n    const { bodyMaxHeight, cardsStyle, columns, hasFooterCells, rowSeparatorWidth, showSelectionColumn, style } = props;\n    const [tableWrapperRef, , { inlineSize }] = useResizeObserver<HTMLDivElement>();\n\n    const columnsWithAreas: TableColumnWithArea<RowType>[] = columns.map((column, columnIndex) => ({\n        column,\n        columnIndex,\n        areaName: `table-col-${columnIndex + 1}`,\n    }));\n\n    const wrapperWidth = inlineSize ?? tableWrapperRef.current?.clientWidth;\n\n    const minWidthTotal =\n        (showSelectionColumn ? TABLE_SELECTION_COLUMN_WIDTH_PX : 0) +\n        columns.reduce((totalWidth, column) => {\n            if (column.width === undefined) {\n                return totalWidth + MIN_COLUMN_WIDTH_PX;\n            }\n\n            const columnWidth = parsePixelSize(toCssSize(column.width));\n\n            return totalWidth + (columnWidth ?? 0);\n        }, 0);\n\n    const tableUseOverflow = wrapperWidth !== undefined && minWidthTotal > wrapperWidth;\n    const tableWidth = wrapperWidth !== undefined ? `${wrapperWidth}px` : '100%';\n\n    const { handleBodyScroll, hasHorizontalScrollOffset, tableFooterRowRef, tableHeadRowRef } =\n        useHorizontalSectionSync({\n            enabled: !!bodyMaxHeight,\n            hasFooterCells,\n        });\n\n    const measuredColumnMaxWidths = useMeasuredColumnMaxWidths({\n        columns,\n        enabled: tableUseOverflow,\n        tableWrapperRef,\n    });\n\n    const gridTemplateColumns =\n        columnsWithAreas.length > 0\n            ? [\n                  showSelectionColumn ? `${TABLE_SELECTION_COLUMN_WIDTH_PX}px` : undefined,\n                  ...columnsWithAreas.map(({ column }) => getColumnTrack(column, measuredColumnMaxWidths[column.key])),\n              ]\n                  .filter(Boolean)\n                  .join(' ')\n            : 'minmax(0, 1fr)';\n\n    const gridTemplateAreas =\n        columnsWithAreas.length > 0\n            ? `\"${[\n                  showSelectionColumn ? 'table-selection' : undefined,\n                  ...columnsWithAreas.map(({ areaName }) => areaName),\n              ]\n                  .filter(Boolean)\n                  .join(' ')}\"`\n            : 'none';\n\n    const cardsMinWidth = toCssSize(cardsStyle?.minWidth) ?? '280px';\n    const cardsMaxWidth = toCssSize(cardsStyle?.maxWidth) ?? '1fr';\n\n    const wrapperStyle: InternalTableStyle = {\n        ...(style ?? {}),\n        '--table-columns': gridTemplateColumns,\n        '--table-areas': gridTemplateAreas,\n        '--table-cards-min': cardsMinWidth,\n        '--table-cards-max': cardsMaxWidth,\n        '--table-column-count': String(columns.length + (showSelectionColumn ? 1 : 0)),\n        '--table-row-separator-width': toCssSize(rowSeparatorWidth),\n        '--table-width': tableWidth,\n    };\n\n    return {\n        columnsWithAreas,\n        handleBodyScroll,\n        hasHorizontalScrollOffset,\n        tableUseOverflow,\n        tableWrapperRef,\n        tableFooterRowRef,\n        tableHeadRowRef,\n        wrapperStyle,\n    };\n};\n"],"names":["TABLE_SELECTION_COLUMN_WIDTH_PX","parsePixelSize","value","match","useTableLayout","props","bodyMaxHeight","cardsStyle","columns","hasFooterCells","rowSeparatorWidth","showSelectionColumn","style","tableWrapperRef","inlineSize","useResizeObserver","columnsWithAreas","column","columnIndex","wrapperWidth","minWidthTotal","totalWidth","MIN_COLUMN_WIDTH_PX","columnWidth","toCssSize","tableUseOverflow","tableWidth","handleBodyScroll","hasHorizontalScrollOffset","tableFooterRowRef","tableHeadRowRef","useHorizontalSectionSync","measuredColumnMaxWidths","useMeasuredColumnMaxWidths","gridTemplateColumns","getColumnTrack","gridTemplateAreas","areaName","cardsMinWidth","cardsMaxWidth","wrapperStyle"],"mappings":";;;;;AASA,MAAMA,IAAkC,IAElCC,IAAiB,CAACC,MAAmB;AACvC,MAAI,CAACA;AACD;AAGJ,QAAMC,IAAQD,EAAM,KAAA,EAAO,MAAM,uBAAuB;AAExD,MAAKC;AAIL,WAAO,OAAOA,EAAM,CAAC,CAAC;AAC1B,GA4BaC,IAAiB,CAA+BC,MAAwC;AACjG,QAAM,EAAE,eAAAC,GAAe,YAAAC,GAAY,SAAAC,GAAS,gBAAAC,GAAgB,mBAAAC,GAAmB,qBAAAC,GAAqB,OAAAC,MAAUP,GACxG,CAACQ,GAAA,EAAmB,EAAE,YAAAC,EAAA,CAAY,IAAIC,EAAA,GAEtCC,IAAmDR,EAAQ,IAAI,CAACS,GAAQC,OAAiB;AAAA,IAC3F,QAAAD;AAAA,IACA,aAAAC;AAAA,IACA,UAAU,aAAaA,IAAc,CAAC;AAAA,EAAA,EACxC,GAEIC,IAAeL,KAAcD,EAAgB,SAAS,aAEtDO,KACDT,IAAsBX,IAAkC,KACzDQ,EAAQ,OAAO,CAACa,GAAYJ,MAAW;AACnC,QAAIA,EAAO,UAAU;AACjB,aAAOI,IAAaC;AAGxB,UAAMC,IAActB,EAAeuB,EAAUP,EAAO,KAAK,CAAC;AAE1D,WAAOI,KAAcE,KAAe;AAAA,EACxC,GAAG,CAAC,GAEFE,IAAmBN,MAAiB,UAAaC,IAAgBD,GACjEO,IAAaP,MAAiB,SAAY,GAAGA,CAAY,OAAO,QAEhE,EAAE,kBAAAQ,GAAkB,2BAAAC,GAA2B,mBAAAC,GAAmB,iBAAAC,EAAA,IACpEC,EAAyB;AAAA,IACrB,SAAS,CAAC,CAACzB;AAAA,IACX,gBAAAG;AAAA,EAAA,CACH,GAECuB,IAA0BC,EAA2B;AAAA,IACvD,SAAAzB;AAAA,IACA,SAASiB;AAAA,IACT,iBAAAZ;AAAA,EAAA,CACH,GAEKqB,IACFlB,EAAiB,SAAS,IACpB;AAAA,IACIL,IAAsB,GAAGX,CAA+B,OAAO;AAAA,IAC/D,GAAGgB,EAAiB,IAAI,CAAC,EAAE,QAAAC,EAAA,MAAakB,EAAelB,GAAQe,EAAwBf,EAAO,GAAG,CAAC,CAAC;AAAA,EAAA,EAElG,OAAO,OAAO,EACd,KAAK,GAAG,IACb,kBAEJmB,IACFpB,EAAiB,SAAS,IACpB,IAAI;AAAA,IACAL,IAAsB,oBAAoB;AAAA,IAC1C,GAAGK,EAAiB,IAAI,CAAC,EAAE,UAAAqB,EAAA,MAAeA,CAAQ;AAAA,EAAA,EAEjD,OAAO,OAAO,EACd,KAAK,GAAG,CAAC,MACd,QAEJC,IAAgBd,EAAUjB,GAAY,QAAQ,KAAK,SACnDgC,IAAgBf,EAAUjB,GAAY,QAAQ,KAAK,OAEnDiC,IAAmC;AAAA,IACrC,GAAI5B,KAAS,CAAA;AAAA,IACb,mBAAmBsB;AAAA,IACnB,iBAAiBE;AAAA,IACjB,qBAAqBE;AAAA,IACrB,qBAAqBC;AAAA,IACrB,wBAAwB,OAAO/B,EAAQ,UAAUG,IAAsB,IAAI,EAAE;AAAA,IAC7E,+BAA+Ba,EAAUd,CAAiB;AAAA,IAC1D,iBAAiBgB;AAAA,EAAA;AAGrB,SAAO;AAAA,IACH,kBAAAV;AAAA,IACA,kBAAAW;AAAA,IACA,2BAAAC;AAAA,IACA,kBAAAH;AAAA,IACA,iBAAAZ;AAAA,IACA,mBAAAgB;AAAA,IACA,iBAAAC;AAAA,IACA,cAAAU;AAAA,EAAA;AAER;"}
+{"version":3,"file":"useTableLayout.js","sources":["../../../../src/components/table/layout/useTableLayout.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nimport type { TableCardsStyleSettings, TableColumnDefinition, TableRowData } from '../Table.types';\nimport { useMeasuredColumnMaxWidths } from './useMeasuredColumnMaxWidths';\nimport { MIN_COLUMN_WIDTH_PX } from '../tableSizing.constants';\nimport { getColumnTrack, toCssSize } from './columnSizing';\nimport { useHorizontalSectionSync } from './useHorizontalSectionSync';\nimport useResizeObserver from '../../../useResizeObserver';\n\nconst TABLE_SELECTION_COLUMN_WIDTH_PX = 50;\n\nconst parsePixelSize = (value?: string) => {\n    if (!value) {\n        return;\n    }\n\n    const match = value.trim().match(/^(-?\\d+(?:\\.\\d+)?)px$/);\n\n    if (!match) {\n        return;\n    }\n\n    return Number(match[1]);\n};\n\nexport type TableColumnWithArea<RowType extends TableRowData> = {\n    column: TableColumnDefinition<RowType>;\n    columnIndex: number;\n    areaName: string;\n};\n\ntype UseTableLayoutProps<RowType extends TableRowData> = {\n    bodyMaxHeight?: string;\n    cardsStyle?: TableCardsStyleSettings;\n    columns: TableColumnDefinition<RowType>[];\n    hasFooterCells?: boolean;\n    rowSeparatorWidth?: number | string;\n    showSelectionColumn?: boolean;\n    style?: CSSProperties;\n};\n\ntype InternalTableStyle = CSSProperties & {\n    '--table-columns'?: string;\n    '--table-areas'?: string;\n    '--table-cards-min'?: string;\n    '--table-cards-max'?: string;\n    '--table-column-count'?: string;\n    '--table-row-separator-width'?: string;\n    '--table-width'?: string;\n};\n\nexport const useTableLayout = <RowType extends TableRowData>(props: UseTableLayoutProps<RowType>) => {\n    const { bodyMaxHeight, cardsStyle, columns, hasFooterCells, rowSeparatorWidth, showSelectionColumn, style } = props;\n    const [tableWrapperRef, , { inlineSize }] = useResizeObserver<HTMLDivElement>();\n\n    const columnsWithAreas: TableColumnWithArea<RowType>[] = columns.map((column, columnIndex) => ({\n        column,\n        columnIndex,\n        areaName: `table-col-${columnIndex + 1}`,\n    }));\n\n    const wrapperWidth = inlineSize ?? tableWrapperRef.current?.clientWidth;\n\n    const minWidthTotal =\n        (showSelectionColumn ? TABLE_SELECTION_COLUMN_WIDTH_PX : 0) +\n        columns.reduce((totalWidth, column) => {\n            if (column.width === undefined) {\n                return totalWidth + MIN_COLUMN_WIDTH_PX;\n            }\n\n            const columnWidth = parsePixelSize(toCssSize(column.width));\n\n            return totalWidth + (columnWidth ?? 0);\n        }, 0);\n\n    const tableUseOverflow = wrapperWidth !== undefined && minWidthTotal > wrapperWidth;\n    const tableWidth = wrapperWidth !== undefined ? `${wrapperWidth}px` : '100%';\n\n    const {\n        handleBodyScroll,\n        hasHorizontalScrollEndOffset,\n        hasHorizontalScrollStartOffset,\n        tableFooterRowRef,\n        tableHeadRowRef,\n    } = useHorizontalSectionSync({\n        enabled: !!bodyMaxHeight,\n        hasFooterCells,\n    });\n\n    const measuredColumnMaxWidths = useMeasuredColumnMaxWidths({\n        columns,\n        enabled: tableUseOverflow,\n        tableWrapperRef,\n    });\n\n    const gridTemplateColumns =\n        columnsWithAreas.length > 0\n            ? [\n                  showSelectionColumn ? `${TABLE_SELECTION_COLUMN_WIDTH_PX}px` : undefined,\n                  ...columnsWithAreas.map(({ column }) => getColumnTrack(column, measuredColumnMaxWidths[column.key])),\n              ]\n                  .filter(Boolean)\n                  .join(' ')\n            : 'minmax(0, 1fr)';\n\n    const gridTemplateAreas =\n        columnsWithAreas.length > 0\n            ? `\"${[\n                  showSelectionColumn ? 'table-selection' : undefined,\n                  ...columnsWithAreas.map(({ areaName }) => areaName),\n              ]\n                  .filter(Boolean)\n                  .join(' ')}\"`\n            : 'none';\n\n    const cardsMinWidth = toCssSize(cardsStyle?.minWidth) ?? '280px';\n    const cardsMaxWidth = toCssSize(cardsStyle?.maxWidth) ?? '1fr';\n\n    const wrapperStyle: InternalTableStyle = {\n        ...(style ?? {}),\n        '--table-columns': gridTemplateColumns,\n        '--table-areas': gridTemplateAreas,\n        '--table-cards-min': cardsMinWidth,\n        '--table-cards-max': cardsMaxWidth,\n        '--table-column-count': String(columns.length + (showSelectionColumn ? 1 : 0)),\n        '--table-row-separator-width': toCssSize(rowSeparatorWidth),\n        '--table-width': tableWidth,\n    };\n\n    return {\n        columnsWithAreas,\n        handleBodyScroll,\n        hasHorizontalScrollEndOffset,\n        hasHorizontalScrollStartOffset,\n        tableUseOverflow,\n        tableWrapperRef,\n        tableFooterRowRef,\n        tableHeadRowRef,\n        wrapperStyle,\n    };\n};\n"],"names":["TABLE_SELECTION_COLUMN_WIDTH_PX","parsePixelSize","value","match","useTableLayout","props","bodyMaxHeight","cardsStyle","columns","hasFooterCells","rowSeparatorWidth","showSelectionColumn","style","tableWrapperRef","inlineSize","useResizeObserver","columnsWithAreas","column","columnIndex","wrapperWidth","minWidthTotal","totalWidth","MIN_COLUMN_WIDTH_PX","columnWidth","toCssSize","tableUseOverflow","tableWidth","handleBodyScroll","hasHorizontalScrollEndOffset","hasHorizontalScrollStartOffset","tableFooterRowRef","tableHeadRowRef","useHorizontalSectionSync","measuredColumnMaxWidths","useMeasuredColumnMaxWidths","gridTemplateColumns","getColumnTrack","gridTemplateAreas","areaName","cardsMinWidth","cardsMaxWidth","wrapperStyle"],"mappings":";;;;;AASA,MAAMA,IAAkC,IAElCC,IAAiB,CAACC,MAAmB;AACvC,MAAI,CAACA;AACD;AAGJ,QAAMC,IAAQD,EAAM,KAAA,EAAO,MAAM,uBAAuB;AAExD,MAAKC;AAIL,WAAO,OAAOA,EAAM,CAAC,CAAC;AAC1B,GA4BaC,IAAiB,CAA+BC,MAAwC;AACjG,QAAM,EAAE,eAAAC,GAAe,YAAAC,GAAY,SAAAC,GAAS,gBAAAC,GAAgB,mBAAAC,GAAmB,qBAAAC,GAAqB,OAAAC,MAAUP,GACxG,CAACQ,GAAA,EAAmB,EAAE,YAAAC,EAAA,CAAY,IAAIC,EAAA,GAEtCC,IAAmDR,EAAQ,IAAI,CAACS,GAAQC,OAAiB;AAAA,IAC3F,QAAAD;AAAA,IACA,aAAAC;AAAA,IACA,UAAU,aAAaA,IAAc,CAAC;AAAA,EAAA,EACxC,GAEIC,IAAeL,KAAcD,EAAgB,SAAS,aAEtDO,KACDT,IAAsBX,IAAkC,KACzDQ,EAAQ,OAAO,CAACa,GAAYJ,MAAW;AACnC,QAAIA,EAAO,UAAU;AACjB,aAAOI,IAAaC;AAGxB,UAAMC,IAActB,EAAeuB,EAAUP,EAAO,KAAK,CAAC;AAE1D,WAAOI,KAAcE,KAAe;AAAA,EACxC,GAAG,CAAC,GAEFE,IAAmBN,MAAiB,UAAaC,IAAgBD,GACjEO,IAAaP,MAAiB,SAAY,GAAGA,CAAY,OAAO,QAEhE;AAAA,IACF,kBAAAQ;AAAA,IACA,8BAAAC;AAAA,IACA,gCAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,iBAAAC;AAAA,EAAA,IACAC,EAAyB;AAAA,IACzB,SAAS,CAAC,CAAC1B;AAAA,IACX,gBAAAG;AAAA,EAAA,CACH,GAEKwB,IAA0BC,EAA2B;AAAA,IACvD,SAAA1B;AAAA,IACA,SAASiB;AAAA,IACT,iBAAAZ;AAAA,EAAA,CACH,GAEKsB,IACFnB,EAAiB,SAAS,IACpB;AAAA,IACIL,IAAsB,GAAGX,CAA+B,OAAO;AAAA,IAC/D,GAAGgB,EAAiB,IAAI,CAAC,EAAE,QAAAC,EAAA,MAAamB,EAAenB,GAAQgB,EAAwBhB,EAAO,GAAG,CAAC,CAAC;AAAA,EAAA,EAElG,OAAO,OAAO,EACd,KAAK,GAAG,IACb,kBAEJoB,IACFrB,EAAiB,SAAS,IACpB,IAAI;AAAA,IACAL,IAAsB,oBAAoB;AAAA,IAC1C,GAAGK,EAAiB,IAAI,CAAC,EAAE,UAAAsB,EAAA,MAAeA,CAAQ;AAAA,EAAA,EAEjD,OAAO,OAAO,EACd,KAAK,GAAG,CAAC,MACd,QAEJC,IAAgBf,EAAUjB,GAAY,QAAQ,KAAK,SACnDiC,IAAgBhB,EAAUjB,GAAY,QAAQ,KAAK,OAEnDkC,IAAmC;AAAA,IACrC,GAAI7B,KAAS,CAAA;AAAA,IACb,mBAAmBuB;AAAA,IACnB,iBAAiBE;AAAA,IACjB,qBAAqBE;AAAA,IACrB,qBAAqBC;AAAA,IACrB,wBAAwB,OAAOhC,EAAQ,UAAUG,IAAsB,IAAI,EAAE;AAAA,IAC7E,+BAA+Ba,EAAUd,CAAiB;AAAA,IAC1D,iBAAiBgB;AAAA,EAAA;AAGrB,SAAO;AAAA,IACH,kBAAAV;AAAA,IACA,kBAAAW;AAAA,IACA,8BAAAC;AAAA,IACA,gCAAAC;AAAA,IACA,kBAAAJ;AAAA,IACA,iBAAAZ;AAAA,IACA,mBAAAiB;AAAA,IACA,iBAAAC;AAAA,IACA,cAAAU;AAAA,EAAA;AAER;"}

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

@@ -1,64 +1,66 @@
-import { jsxs as y, jsx as s } from "react/jsx-runtime";
+import { jsxs as R, jsx as m } from "react/jsx-runtime";
 import { useSortable as A } from "@dnd-kit/sortable";
-import h from "./TableHeaderCellContent.js";
+import k 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) => {
+import { resolveAriaSort as w } from "./resolveAriaSort.js";
+import { resolveHeaderCellClassName as D } from "./resolveHeaderCellClassName.js";
+import { resolveHeaderCellStyle as N } from "./resolveHeaderCellStyle.js";
+import { resolveAriaSpan as c, resolveAriaColIndex as L } from "../../shared/resolveTableAria.js";
+const _ = (t) => {
   const {
     column: e,
-    header: m,
-    hideWhileDragging: t,
-    htmlAttributes: c,
+    header: r,
+    hideWhileDragging: a,
+    htmlAttributes: u,
     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,
+    showSelectionColumn: l,
+    stickyLeftColumnCount: C,
+    stickyRightColumnCount: f
+  } = t, i = C ?? 0, n = f ?? 0, s = e.columnKey ?? String(e.key), { attributes: g, listeners: p, setActivatorNodeRef: S, setNodeRef: v, transform: o, transition: b, isDragging: y } = A({
+    id: s
+  }), { role: T, ...h } = g, x = {
+    ...h,
     ...p
   };
-  return /* @__PURE__ */ y(
+  return /* @__PURE__ */ R(
     "div",
     {
       ref: v,
-      ...c,
-      className: w(e, m, {
+      ...u,
+      className: D(e, r, {
         isDraggable: !0,
-        isDragging: b,
+        isDragging: y,
         isResizable: d,
-        isStickyLeftColumn: l > 0 && e.columnStart <= l
+        isStickyLeftColumn: i > 0 && e.columnStart <= i,
+        isStickyRightColumn: n > 0 && e.columnStart + e.colSpan - 1 > r.totalColumnCount - n
       }),
-      "data-column": i,
+      "data-column": s,
       role: "columnheader",
-      "aria-colindex": D(e.columnStart, a),
-      "aria-colspan": n(e.colSpan),
+      "aria-colindex": L(e.columnStart, l),
+      "aria-colspan": c(e.colSpan),
       "aria-rowindex": e.rowStart,
-      "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
+      "aria-rowspan": c(e.rowSpan),
+      "aria-sort": w(e),
+      style: N(e, l, {
+        pointerEvents: a ? "none" : void 0,
+        transform: a ? void 0 : o ? `translate3d(${o.x}px, ${o.y}px, 0)` : void 0,
+        transition: b
       }),
       children: [
-        /* @__PURE__ */ s(
-          h,
+        /* @__PURE__ */ m(
+          k,
           {
-            ...r,
+            ...t,
             dragActivatorProps: x,
-            dragActivatorRef: g
+            dragActivatorRef: S
           }
         ),
-        /* @__PURE__ */ s(H, { ...r })
+        /* @__PURE__ */ m(H, { ...t })
       ]
     }
   );
 };
 export {
-  P as default
+  _ 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 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;"}
+{"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        stickyRightColumnCount,\n    } = props;\n\n    const stickyLeftColumns = stickyLeftColumnCount ?? 0;\n    const stickyRightColumns = stickyRightColumnCount ?? 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                isStickyRightColumn:\n                    stickyRightColumns > 0 &&\n                    column.columnStart + column.colSpan - 1 > header.totalColumnCount - stickyRightColumns,\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","stickyRightColumnCount","stickyLeftColumns","stickyRightColumns","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,IACA,wBAAAC;AAAA,EAAA,IACAR,GAEES,IAAoBF,KAAyB,GAC7CG,IAAqBF,KAA0B,GAE/CG,IAAYV,EAAO,aAAa,OAAOA,EAAO,GAAG,GAEjD,EAAE,YAAAW,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,GAAGX;AAAA,MACJ,WAAWoB,EAA2BvB,GAAQC,GAAQ;AAAA,QAClD,aAAa;AAAA,QACb,YAAAgB;AAAA,QACA,aAAAb;AAAA,QACA,oBAAoBI,IAAoB,KAAKR,EAAO,eAAeQ;AAAA,QACnE,qBACIC,IAAqB,KACrBT,EAAO,cAAcA,EAAO,UAAU,IAAIC,EAAO,mBAAmBQ;AAAA,MAAA,CAC3E;AAAA,MACD,eAAaC;AAAA,MACb,MAAK;AAAA,MACL,iBAAec,EAAoBxB,EAAO,aAAaK,CAAmB;AAAA,MAC1E,gBAAcoB,EAAgBzB,EAAO,OAAO;AAAA,MAC5C,iBAAeA,EAAO;AAAA,MACtB,gBAAcyB,EAAgBzB,EAAO,OAAO;AAAA,MAC5C,aAAW0B,EAAgB1B,CAAM;AAAA,MACjC,OAAO2B,EAAuB3B,GAAQK,GAAqB;AAAA,QACvD,eAAeH,IAAoB,SAAS;AAAA,QAC5C,WAAWA,IACL,SACAa,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,GAAG9B;AAAA,YACJ,oBAAAsB;AAAA,YACA,kBAAkBR;AAAA,UAAA;AAAA,QAAA;AAAA,QAEtB,gBAAAe,EAACE,GAAA,EAA6B,GAAG/B,EAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpD;"}

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

@@ -17,6 +17,7 @@ export type TableHeaderSectionProps<RowType extends TableRowData = TableRowData>
     selectionHeaderContent?: ReactNode;
     showSelectionColumn?: boolean;
     stickyLeftColumnCount?: number;
+    stickyRightColumnCount?: number;
     tableHeadRowRef: Ref<HTMLDivElement>;
     onSortChange?: (columnKey: string, direction: TableSortDirection, event: ReactMouseEvent<HTMLButtonElement>) => void;
 };
@@ -34,4 +35,5 @@ export type SharedHeaderCellProps<RowType extends TableRowData = TableRowData> =
     onSortChange?: (columnKey: string, direction: TableSortDirection, event: ReactMouseEvent<HTMLButtonElement>) => void;
     showSelectionColumn?: boolean;
     stickyLeftColumnCount?: number;
+    stickyRightColumnCount?: number;
 };

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

@@ -7,7 +7,7 @@ const u = (c) => {
     /* @__PURE__ */ a("span", { children: e.label })
   ] }) : e.label, o = s === null ? null : /* @__PURE__ */ a("span", { className: "table-head-label", children: s });
   return /* @__PURE__ */ a("div", { className: l("table-head-cell-content", d && "table-head-cell-content-hidden"), children: /* @__PURE__ */ r("div", { className: "table-head-cell-content-row", children: [
-    e.sortable ? /* @__PURE__ */ r(
+    e.sortable ? /* @__PURE__ */ a(
       "button",
       {
         type: "button",
@@ -18,21 +18,21 @@ const u = (c) => {
           e.sortDirection === "asc" ? "desc" : "asc",
           h
         ),
-        children: [
-          /* @__PURE__ */ a(p, { direction: e.sortDirection }),
-          /* @__PURE__ */ a(
-            "span",
-            {
-              ref: n,
-              className: l(
-                "table-head-button-label",
-                t && "table-head-drag-label"
-              ),
-              ...t,
-              children: o
-            }
-          )
-        ]
+        children: /* @__PURE__ */ r(
+          "span",
+          {
+            ref: n,
+            className: l(
+              "table-head-button-label",
+              t && "table-head-drag-label"
+            ),
+            ...t,
+            children: [
+              /* @__PURE__ */ a(p, { direction: e.sortDirection }),
+              o
+            ]
+          }
+        )
       }
     ) : /* @__PURE__ */ a(
       "span",

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 { 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;"}
+{"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                        <span\n                            ref={dragActivatorRef}\n                            className={classNames(\n                                'table-head-button-label',\n                                dragActivatorProps && 'table-head-drag-label'\n                            )}\n                            {...dragActivatorProps}\n                        >\n                            <SortArrows direction={column.sortDirection} />\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,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,WAAWC,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,gBAAAJ;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,KAAKL;AAAA,YACL,WAAWO;AAAA,cACP;AAAA,cACAR,KAAsB;AAAA,YAAA;AAAA,YAEzB,GAAGA;AAAA,YAEJ,UAAA;AAAA,cAAA,gBAAAO,EAACI,GAAA,EAAW,WAAWZ,EAAO,cAAA,CAAe;AAAA,cAC5CU;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACL;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/TableStaticHeaderCell.js

@@ -1,48 +1,50 @@
-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) => {
+import { jsxs as C, jsx as i } from "react/jsx-runtime";
+import S from "../../../../utils/classNames.js";
+import f from "./TableHeaderCellContent.js";
+import h from "./TableHeaderCellResizeHandle.js";
+import { resolveAriaSort as p } from "./resolveAriaSort.js";
+import { resolveHeaderCellClassName as y } from "./resolveHeaderCellClassName.js";
+import { resolveHeaderCellStyle as g } from "./resolveHeaderCellStyle.js";
+import { resolveAriaSpan as n, resolveAriaColIndex as k } from "../../shared/resolveTableAria.js";
+const N = (o) => {
   const {
     column: e,
-    header: i,
+    header: l,
     hideWhileDragging: m,
-    htmlAttributes: n,
-    isResizable: s,
-    showSelectionColumn: l,
-    stickyLeftColumnCount: c
-  } = r, a = c ?? 0;
-  return /* @__PURE__ */ d(
+    htmlAttributes: s,
+    isResizable: c,
+    showSelectionColumn: t,
+    stickyLeftColumnCount: u,
+    stickyRightColumnCount: d
+  } = o, r = u ?? 0, a = d ?? 0;
+  return /* @__PURE__ */ C(
     "div",
     {
-      ...n,
-      className: u(
-        p(e, i, {
-          isResizable: s,
-          isStickyLeftColumn: a > 0 && e.columnStart <= a
+      ...s,
+      className: S(
+        y(e, l, {
+          isResizable: c,
+          isStickyLeftColumn: r > 0 && e.columnStart <= r,
+          isStickyRightColumn: a > 0 && e.columnStart + e.colSpan - 1 > l.totalColumnCount - a
         }),
         m && "table-head-cell-drag-placeholder"
       ),
       "data-column": e.columnKey ?? String(e.key),
       role: "columnheader",
-      "aria-colindex": y(e.columnStart, l),
-      "aria-colspan": t(e.colSpan),
+      "aria-colindex": k(e.columnStart, t),
+      "aria-colspan": n(e.colSpan),
       "aria-rowindex": e.rowStart,
-      "aria-rowspan": t(e.rowSpan),
-      "aria-sort": S(e),
-      style: h(e, l),
+      "aria-rowspan": n(e.rowSpan),
+      "aria-sort": p(e),
+      style: g(e, t),
       children: [
-        /* @__PURE__ */ o(C, { ...r }),
-        /* @__PURE__ */ o(f, { ...r })
+        /* @__PURE__ */ i(f, { ...o }),
+        /* @__PURE__ */ i(h, { ...o })
       ]
     }
   );
 };
 export {
-  L as default
+  N 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 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;"}
+{"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        stickyRightColumnCount,\n    } = props;\n\n    const stickyLeftColumns = stickyLeftColumnCount ?? 0;\n    const stickyRightColumns = stickyRightColumnCount ?? 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                    isStickyRightColumn:\n                        stickyRightColumns > 0 &&\n                        column.columnStart + column.colSpan - 1 > header.totalColumnCount - stickyRightColumns,\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","stickyRightColumnCount","stickyLeftColumns","stickyRightColumns","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,IACA,wBAAAC;AAAA,EAAA,IACAR,GAEES,IAAoBF,KAAyB,GAC7CG,IAAqBF,KAA0B;AAErD,SACI,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGP;AAAA,MACJ,WAAWQ;AAAA,QACPC,EAA2BZ,GAAQC,GAAQ;AAAA,UACvC,aAAAG;AAAA,UACA,oBAAoBI,IAAoB,KAAKR,EAAO,eAAeQ;AAAA,UACnE,qBACIC,IAAqB,KACrBT,EAAO,cAAcA,EAAO,UAAU,IAAIC,EAAO,mBAAmBQ;AAAA,QAAA,CAC3E;AAAA,QACDP,KAAqB;AAAA,MAAA;AAAA,MAEzB,eAAaF,EAAO,aAAa,OAAOA,EAAO,GAAG;AAAA,MAClD,MAAK;AAAA,MACL,iBAAea,EAAoBb,EAAO,aAAaK,CAAmB;AAAA,MAC1E,gBAAcS,EAAgBd,EAAO,OAAO;AAAA,MAC5C,iBAAeA,EAAO;AAAA,MACtB,gBAAcc,EAAgBd,EAAO,OAAO;AAAA,MAC5C,aAAWe,EAAgBf,CAAM;AAAA,MACjC,OAAOgB,EAAuBhB,GAAQK,CAAmB;AAAA,MAEzD,UAAA;AAAA,QAAA,gBAAAY,EAACC,GAAA,EAAwB,GAAGnB,GAAO;AAAA,QACnC,gBAAAkB,EAACE,GAAA,EAA6B,GAAGpB,EAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpD;"}

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

@@ -9,4 +9,5 @@ export declare const resolveHeaderCellClassName: (column: HeaderColumn<TableRowD
     isDragging?: boolean;
     isResizable: boolean;
     isStickyLeftColumn?: boolean;
+    isStickyRightColumn?: boolean;
 }) => string;