@kubit-ui-web/react-components 2.0.0-beta.5 → 2.0.0-beta.51

package/dist/esm/components/dataTable/components/dataTableHead.js

@@ -1,4 +1,67 @@
-import{j as i}from"../../../_virtual/jsx-runtime.js";import{TableCell as t}from"../../tableCell/tableCell.js";import{TableHead as e}from"../../tableHead/tableHead.js";import{TableRow as l}from"../../tableRow/tableRow.js";import{applyFlexToCell as o}from"../utils/cellConfig.js";import{applyGridToRow as n}from"../utils/rowConfig.js";const d=({columns:d,cssClasses:s,hidden:a,sticky:c,tableHeadConfig:r,tableHeadRowConfig:m,usingRowGroups:h})=>{const f=h?n({rowConfig:m}):m;/* @__PURE__ */
-return i.jsx(e,{additionalClasses:s?.table_head,component:h?"div":void 0,hidden:a,sticky:c,...r,children:/* @__PURE__ */i.jsx(l,{additionalClasses:s?.table_head_row,component:h?"div":void 0,hoverable:!1,...f,children:d?.map(e=>{const l=e.headerContent;if(l&&"object"==typeof l&&"complex"in l){const n=h?o({cellConfig:l.complex}):l.complex;/* @__PURE__ */
-return i.jsx(t,{additionalClasses:s?.table_head_cell,alignItems:f?.cellsAlignItems,component:h?"div":void 0,hidden:e.hidden,justifyContent:e.justifyContent,maxWidth:h?void 0:e.maxWidth,minWidth:h?void 0:e.minWidth,scope:"col",sticky:e.sticky,textAlign:e.textAlign,th:!0,verticalAlign:f?.cellsVerticalAlign,width:h?void 0:e.width,...n,children:n?.content},e.field)}const n=h?o({cellConfig:void 0}):void 0;/* @__PURE__ */
-return i.jsx(t,{additionalClasses:s?.table_head_cell,alignItems:f?.cellsAlignItems,component:h?"div":void 0,hidden:e.hidden,justifyContent:e.justifyContent,maxWidth:h?void 0:e.maxWidth,minWidth:h?void 0:e.minWidth,scope:"col",sticky:e.sticky,textAlign:e.textAlign,th:!0,verticalAlign:f?.cellsVerticalAlign,width:h?void 0:e.width,...n,children:l},e.field)})})})};export{d as DataTableHead};
+import { TableCell } from "../../tableCell/tableCell.js";
+import { TableHead } from "../../tableHead/tableHead.js";
+import { TableRow } from "../../tableRow/tableRow.js";
+import { applyFlexToCell } from "../utils/cellConfig.js";
+import { applyGridToRow } from "../utils/rowConfig.js";
+import { jsx } from "react/jsx-runtime";
+const DataTableHead = ({ columns: r, cssClasses: i, hidden: a, sticky: o, tableHeadConfig: s, tableHeadRowConfig: c, usingRowGroups: l }) => {
+	let u = l ? applyGridToRow({
+		columns: r,
+		rowConfig: c
+	}) : c;
+	return /* @__PURE__ */ jsx(TableHead, {
+		additionalClasses: i?.table_head,
+		component: l ? "div" : void 0,
+		hidden: a,
+		sticky: o,
+		...s,
+		children: /* @__PURE__ */ jsx(TableRow, {
+			additionalClasses: i?.table_head_row,
+			component: l ? "div" : void 0,
+			hoverable: !1,
+			...u,
+			children: r?.map((e) => {
+				let t = e.headerContent;
+				if (t && typeof t == "object" && "complex" in t) {
+					let n = l ? applyFlexToCell({ cellConfig: t.complex }) : t.complex;
+					return /* @__PURE__ */ jsx(TableCell, {
+						additionalClasses: i?.table_head_cell,
+						alignItems: u?.cellsAlignItems,
+						component: l ? "div" : void 0,
+						hidden: e.hidden,
+						justifyContent: e.justifyContent,
+						maxWidth: l ? void 0 : e.maxWidth,
+						minWidth: l ? void 0 : e.minWidth,
+						scope: "col",
+						sticky: e.sticky,
+						textAlign: e.textAlign,
+						th: !0,
+						verticalAlign: u?.cellsVerticalAlign,
+						width: l ? void 0 : e.width,
+						...n,
+						children: n?.content
+					}, e.field);
+				}
+				let n = l ? applyFlexToCell({ cellConfig: void 0 }) : void 0;
+				return /* @__PURE__ */ jsx(TableCell, {
+					additionalClasses: i?.table_head_cell,
+					alignItems: u?.cellsAlignItems,
+					component: l ? "div" : void 0,
+					hidden: e.hidden,
+					justifyContent: e.justifyContent,
+					maxWidth: l ? void 0 : e.maxWidth,
+					minWidth: l ? void 0 : e.minWidth,
+					scope: "col",
+					sticky: e.sticky,
+					textAlign: e.textAlign,
+					th: !0,
+					verticalAlign: u?.cellsVerticalAlign,
+					width: l ? void 0 : e.width,
+					...n,
+					children: t
+				}, e.field);
+			})
+		})
+	});
+};
+export { DataTableHead };

package/dist/esm/components/dataTable/components/dataTableRows.js

@@ -1,6 +1,62 @@
-import{j as e}from"../../../_virtual/jsx-runtime.js";import{TableCell as i}from"../../tableCell/tableCell.js";import{TableRow as t}from"../../tableRow/tableRow.js";import{applyFlexToCell as o}from"../utils/cellConfig.js";import{isRowHoverable as l}from"../utils/hoverable.js";import{applyGridToRow as n}from"../utils/rowConfig.js";const s=({activeRows:s,columns:r,cssClasses:a,hoverable:c,hoverableRows:d,isRowGroup:m=!1,nonHoverableRows:f,rows:g,usingRowGroups:u})=>{const v=m?{table_row:a?.row_group_table_body.table_body}:a?.table_body_row,b=m?a?.row_group_table_body_cell:a?.table_body_cell;
-/* @__PURE__ */
-return e.jsx(e.Fragment,{children:g?.map((a,m)=>{const g=u?n({rowConfig:a?.config}):a?.config;/* @__PURE__ */
-return e.jsx(t,{active:Boolean(a.id&&s?.includes(a.id)),additionalClasses:v,hoverable:l({hoverable:c,hoverableRows:d,nonHoverableRows:f,row:a}),...g,children:r?.map(t=>{const l=t.valueGetter?t.valueGetter(a[t.field],a):a[t.field];if(l&&"object"==typeof l&&"complex"in l){const n=u?o({cellConfig:l.complex}):l.complex;/* @__PURE__ */
-return e.jsx(i,{additionalClasses:b,alignItems:a.config?.cellsAlignItems,justifyContent:t.valueJustifyContent??t.justifyContent,maxWidth:u?void 0:t.maxWidth,minWidth:u?void 0:t.minWidth,role:"row",sticky:t.sticky,textAlign:t.valueTextAlign??t.textAlign,verticalAlign:a.config?.cellsVerticalAlign,width:u?void 0:t.width,...n,children:n?.content},t.field)}const n=u?o({cellConfig:void 0}):void 0;/* @__PURE__ */
-return e.jsx(i,{additionalClasses:b,alignItems:a.config?.cellsAlignItems,justifyContent:t.valueJustifyContent??t.justifyContent,maxWidth:u?void 0:t.maxWidth,minWidth:u?void 0:t.minWidth,role:"row",sticky:t.sticky,textAlign:t.valueTextAlign??t.textAlign,verticalAlign:a.config?.cellsVerticalAlign,width:u?void 0:t.width,...n,children:l},t.field)})},a.id??m)})})};export{s as DataTableRows};
+import { TableCell } from "../../tableCell/tableCell.js";
+import { TableRow } from "../../tableRow/tableRow.js";
+import { applyFlexToCell } from "../utils/cellConfig.js";
+import { applyGridToRow } from "../utils/rowConfig.js";
+import { isRowHoverable } from "../utils/hoverable.js";
+import { Fragment, jsx } from "react/jsx-runtime";
+const DataTableRows = ({ activeRows: i, columns: a, cssClasses: o, hoverable: s, hoverableRows: c, isRowGroup: l = !1, nonHoverableRows: u, rows: d, usingRowGroups: f }) => {
+	let p = l ? { table_row: o?.row_group_table_body.table_body } : o?.table_body_row, m = l ? o?.row_group_table_body_cell : o?.table_body_cell;
+	return /* @__PURE__ */ jsx(Fragment, { children: d?.map((r, o) => {
+		let l = f ? applyGridToRow({
+			columns: a,
+			rowConfig: r?.config
+		}) : r?.config;
+		return /* @__PURE__ */ jsx(TableRow, {
+			active: !!(r.id && i?.includes(r.id)),
+			additionalClasses: p,
+			hoverable: isRowHoverable({
+				hoverable: s,
+				hoverableRows: c,
+				nonHoverableRows: u,
+				row: r
+			}),
+			...l,
+			children: a?.map((e) => {
+				let t = e.valueGetter ? e.valueGetter(r[e.field], r) : r[e.field];
+				if (t && typeof t == "object" && "complex" in t) {
+					let n = f ? applyFlexToCell({ cellConfig: t.complex }) : t.complex;
+					return /* @__PURE__ */ jsx(TableCell, {
+						additionalClasses: m,
+						alignItems: r.config?.cellsAlignItems,
+						justifyContent: e.valueJustifyContent ?? e.justifyContent,
+						maxWidth: f ? void 0 : e.maxWidth,
+						minWidth: f ? void 0 : e.minWidth,
+						role: "row",
+						sticky: e.sticky,
+						textAlign: e.valueTextAlign ?? e.textAlign,
+						verticalAlign: r.config?.cellsVerticalAlign,
+						width: f ? void 0 : e.width,
+						...n,
+						children: n?.content
+					}, e.field);
+				}
+				let n = f ? applyFlexToCell({ cellConfig: void 0 }) : void 0;
+				return /* @__PURE__ */ jsx(TableCell, {
+					additionalClasses: m,
+					alignItems: r.config?.cellsAlignItems,
+					justifyContent: e.valueJustifyContent ?? e.justifyContent,
+					maxWidth: f ? void 0 : e.maxWidth,
+					minWidth: f ? void 0 : e.minWidth,
+					role: "row",
+					sticky: e.sticky,
+					textAlign: e.valueTextAlign ?? e.textAlign,
+					verticalAlign: r.config?.cellsVerticalAlign,
+					width: f ? void 0 : e.width,
+					...n,
+					children: t
+				}, e.field);
+			})
+		}, r.id ?? o);
+	}) });
+};
+export { DataTableRows };

package/dist/esm/components/dataTable/components/hiddenDataTableHead.js

@@ -1,2 +1,25 @@
-import{j as e}from"../../../_virtual/jsx-runtime.js";import{TableCell as o}from"../../tableCell/tableCell.js";import{TableHead as l}from"../../tableHead/tableHead.js";import{TableRow as t}from"../../tableRow/tableRow.js";const a=({columns:a,cssClasses:s})=>/* @__PURE__ */e.jsx(l,{additionalClasses:s?.row_group_table_head,hidden:!0,children:/* @__PURE__ */e.jsx(t,{additionalClasses:s?.row_group_table_head_row,children:a?.map(l=>{let t=l.headerHiddenContent;if(!t){const e=l.headerContent;t=e&&"object"==typeof e&&"complex"in e?e.complex?.content:e}/* @__PURE__ */
-return e.jsx(o,{additionalClasses:s?.row_group_table_head_cell,scope:"col",th:!0,children:t},l.field)})})});export{a as HiddenDataTableHead};
+import { TableCell } from "../../tableCell/tableCell.js";
+import { TableHead } from "../../tableHead/tableHead.js";
+import { TableRow } from "../../tableRow/tableRow.js";
+import { jsx } from "react/jsx-runtime";
+const HiddenDataTableHead = ({ columns: r, cssClasses: i }) => /* @__PURE__ */ jsx(TableHead, {
+	additionalClasses: i?.row_group_table_head,
+	hidden: !0,
+	children: /* @__PURE__ */ jsx(TableRow, {
+		additionalClasses: i?.row_group_table_head_row,
+		children: r?.map((t) => {
+			let n = t.headerHiddenContent;
+			if (!n) {
+				let e = t.headerContent;
+				n = e && typeof e == "object" && "complex" in e ? e.complex?.content : e;
+			}
+			return /* @__PURE__ */ jsx(TableCell, {
+				additionalClasses: i?.row_group_table_head_cell,
+				scope: "col",
+				th: !0,
+				children: n
+			}, t.field);
+		})
+	})
+});
+export { HiddenDataTableHead };

package/dist/esm/components/dataTable/dataTable.js

@@ -1 +1,30 @@
-import{j as o}from"../../_virtual/jsx-runtime.js";import{forwardRef as s,useRef as a,useImperativeHandle as r}from"react";import{useClassName as t}from"../../lib/hooks/useClassName/useClassName.js";import{DataTableStandAlone as e}from"./dataTableStandAlone.js";import{useDataTableHasScroll as l}from"./hooks/useDataTableHasScroll.js";import{useDataTableShadow as i}from"./hooks/useDataTableShadow.js";import{useDataTableStickyDividers as m}from"./hooks/useDataTableStickyDividers.js";import{useDataTableStickyLeftColumns as h}from"./hooks/useDataTableStickyLeftColumns.js";import{useDataTableStickyRightColumns as f}from"./hooks/useDataTableStickyRightColumns.js";const n=s(({additionalClasses:s,variant:n,...d},u)=>{const c=t({additionalClassNames:s,component:"DATA_TABLE",variant:n}),j=a(null);r(u,()=>j.current,[]);const{hasScroll:p}=l({ref:j});return f({ref:j}),h({ref:j}),m({ref:j}),i({headBoxShadow:c.headboxshadow,leftBoxShadow:c.leftboxshadow,ref:j,rightBoxShadow:c.rightboxshadow}),/* @__PURE__ */o.jsx(e,{ref:j,cssClasses:c,hasScroll:p,...d})});export{n as DataTable};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { DataTableStandAlone } from "./dataTableStandAlone.js";
+import { useDataTableHasScroll } from "./hooks/useDataTableHasScroll.js";
+import { useDataTableShadow } from "./hooks/useDataTableShadow.js";
+import { useDataTableStickyDividers } from "./hooks/useDataTableStickyDividers.js";
+import { useDataTableStickyLeftColumns } from "./hooks/useDataTableStickyLeftColumns.js";
+import { useDataTableStickyRightColumns } from "./hooks/useDataTableStickyRightColumns.js";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const DataTable = forwardRef(({ additionalClasses: e, variant: t, ...n }, r) => {
+	let i = useClassName({
+		additionalClassNames: e,
+		component: "DATA_TABLE",
+		variant: t
+	}), a = useRef(null);
+	useImperativeHandle(r, () => a.current, []);
+	let { hasScroll: o } = useDataTableHasScroll({ ref: a });
+	return useDataTableStickyRightColumns({ ref: a }), useDataTableStickyLeftColumns({ ref: a }), useDataTableStickyDividers({ ref: a }), useDataTableShadow({
+		headBoxShadow: i.headboxshadow,
+		leftBoxShadow: i.leftboxshadow,
+		ref: a,
+		rightBoxShadow: i.rightboxshadow
+	}), /* @__PURE__ */ jsx(DataTableStandAlone, {
+		ref: a,
+		cssClasses: i,
+		hasScroll: o,
+		...n
+	});
+});
+export { DataTable };

package/dist/esm/components/dataTable/dataTableStandAlone.js

@@ -1,10 +1,123 @@
-import{j as a}from"../../_virtual/jsx-runtime.js";import{forwardRef as o,Fragment as s}from"react";import{TableBody as e}from"../tableBody/tableBody.js";import{pickCustomAttributes as t}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{Table as i}from"../table/table.js";import{TableCaption as l}from"../tableCaption/tableCaption.js";import{TableDivider as r}from"../tableDivider/tableDivider.js";import{DataTableHead as n}from"./components/dataTableHead.js";import{DataTableRows as d}from"./components/dataTableRows.js";import{HiddenDataTableHead as c}from"./components/hiddenDataTableHead.js";import{applyZIndexToWrapper as b,applyPositionToWrapper as m}from"./utils/tableConfig.js";const p=o(({activeRows:o,caption:p,columns:h,config:v,cssClasses:w,hasScroll:u,hoverable:f,hoverableRows:j,nonHoverableRows:C,rowGroups:g,rows:x,stickyHead:R,styles:y,..._},H)=>{const S=g&&g.length>0,k=t(_);/* @__PURE__ */
-return a.jsxs("div",{ref:H,className:w?.data_table,"data-testid":"data-table",...k,children:[
-/* @__PURE__ */a.jsxs("div",{"aria-label":u?_["aria-label"]:void 0,"aria-labelledby":u?_["aria-labelledby"]:void 0,className:w?.scrollablecontainer,"data-datatable-scrollable-container":!0,role:u?"region":void 0,...u?{tabIndex:0}:{},children:[
-/* @__PURE__ */a.jsxs(i,{additionalClasses:w?.table,"aria-hidden":!!S||void 0,autoLeftStickyCalc:!1,autoRightStickyCalc:!1,component:S?"div":void 0,disableShadowEffects:!0,hasScrollDisabled:!0,sticky:R,...b({tableConfig:v?.table}),children:[!!p?.content&&/* @__PURE__ */a.jsx(l,{additionalClasses:w?.table_caption,component:S?"div":void 0,...p,children:p?.content}),
-/* @__PURE__ */a.jsx(n,{columns:h,cssClasses:w,sticky:R,tableHeadConfig:v?.tableHead,tableHeadRowConfig:v?.tableHeadRow,usingRowGroups:S}),!S&&x&&x.length>0&&/* @__PURE__ */a.jsx(e,{additionalClasses:w?.table_body,...v?.tableBody,children:/* @__PURE__ */a.jsx(d,{activeRows:o,columns:h,cssClasses:w,hoverable:f,hoverableRows:j,nonHoverableRows:C,rows:x,usingRowGroups:S})})]}),g?.map((t,n)=>/* @__PURE__ */a.jsxs(s,{children:[!!t.divider&&/* @__PURE__ */a.jsx(r,{variant:"DEFAULT",...t.divider,children:t.divider?.content}),
-/* @__PURE__ */a.jsxs(i,{additionalClasses:w?.row_group_table,autoLeftStickyCalc:!1,autoRightStickyCalc:!1,disableShadowEffects:!0,hasScrollDisabled:!0,...m({tableConfig:t.config?.table}),children:[!!t.caption?.content&&/* @__PURE__ */a.jsx(l,{additionalClasses:w?.row_group_table_caption,...t.caption,children:t.caption?.content}),
-/* @__PURE__ */a.jsx(c,{columns:h,cssClasses:w}),
-/* @__PURE__ */a.jsx(e,{additionalClasses:w?.row_group_table_body,...t.config?.tableBody,children:/* @__PURE__ */a.jsx(d,{activeRows:o,columns:h,cssClasses:w,hoverable:f,hoverableRows:j,isRowGroup:!0,nonHoverableRows:C,rows:t.rows,usingRowGroups:S})})]})]},`${t.caption?.["data-testid"]}-${n.toString()}`))]}),
-/* @__PURE__ */a.jsx("div",{className:w?.leftboxshadowcontainer,"data-datatable-left-shadow":!0}),
-/* @__PURE__ */a.jsx("div",{className:w?.rightboxshadowcontainer,"data-datatable-right-shadow":!0})]})});export{p as DataTableStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { TableBody } from "../tableBody/tableBody.js";
+import { Table } from "../table/table.js";
+import { TableCaption } from "../tableCaption/tableCaption.js";
+import { TableDivider } from "../tableDivider/tableDivider.js";
+import { DataTableHead } from "./components/dataTableHead.js";
+import { DataTableRows } from "./components/dataTableRows.js";
+import { HiddenDataTableHead } from "./components/hiddenDataTableHead.js";
+import { applyPositionToWrapper, applyZIndexToWrapper } from "./utils/tableConfig.js";
+import { Fragment, forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const DataTableStandAlone = forwardRef(({ activeRows: n, caption: r, columns: i, config: a, cssClasses: o, hasScroll: s, hoverable: c, hoverableRows: l, nonHoverableRows: u, rowGroups: d, rows: f, stickyHead: p, styles: m, ...h }, g) => {
+	let _ = d && d.length > 0, v = pickCustomAttributes(h);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: g,
+		className: o?.data_table,
+		"data-testid": "data-table",
+		...v,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				"aria-label": s ? h["aria-label"] : void 0,
+				"aria-labelledby": s ? h["aria-labelledby"] : void 0,
+				className: o?.scrollablecontainer,
+				"data-datatable-scrollable-container": !0,
+				role: s ? "region" : void 0,
+				...s ? { tabIndex: 0 } : {},
+				children: [/* @__PURE__ */ jsxs(Table, {
+					additionalClasses: o?.table,
+					"aria-hidden": _ ? !0 : void 0,
+					autoLeftStickyCalc: !1,
+					autoRightStickyCalc: !1,
+					component: _ ? "div" : void 0,
+					disableShadowEffects: !0,
+					hasScrollDisabled: !0,
+					sticky: p,
+					...applyZIndexToWrapper({
+						tableConfig: a?.table,
+						zIndex: 1
+					}),
+					children: [
+						!!r?.content && /* @__PURE__ */ jsx(TableCaption, {
+							additionalClasses: o?.table_caption,
+							component: _ ? "div" : void 0,
+							...r,
+							children: r?.content
+						}),
+						/* @__PURE__ */ jsx(DataTableHead, {
+							columns: i,
+							cssClasses: o,
+							sticky: p,
+							tableHeadConfig: a?.tableHead,
+							tableHeadRowConfig: a?.tableHeadRow,
+							usingRowGroups: _
+						}),
+						!_ && f && f.length > 0 && /* @__PURE__ */ jsx(TableBody, {
+							additionalClasses: o?.table_body,
+							...a?.tableBody,
+							children: /* @__PURE__ */ jsx(DataTableRows, {
+								activeRows: n,
+								columns: i,
+								cssClasses: o,
+								hoverable: c,
+								hoverableRows: l,
+								nonHoverableRows: u,
+								rows: f,
+								usingRowGroups: _
+							})
+						})
+					]
+				}), d?.map((e, t) => /* @__PURE__ */ jsxs(Fragment, { children: [!!e.divider && /* @__PURE__ */ jsx(TableDivider, {
+					variant: "DEFAULT",
+					...e.divider,
+					children: e.divider?.content
+				}), /* @__PURE__ */ jsxs(Table, {
+					additionalClasses: o?.row_group_table,
+					autoLeftStickyCalc: !1,
+					autoRightStickyCalc: !1,
+					disableShadowEffects: !0,
+					hasScrollDisabled: !0,
+					...applyPositionToWrapper({
+						position: "static",
+						tableConfig: e.config?.table
+					}),
+					children: [
+						!!e.caption?.content && /* @__PURE__ */ jsx(TableCaption, {
+							additionalClasses: o?.row_group_table_caption,
+							...e.caption,
+							children: e.caption?.content
+						}),
+						/* @__PURE__ */ jsx(HiddenDataTableHead, {
+							columns: i,
+							cssClasses: o
+						}),
+						/* @__PURE__ */ jsx(TableBody, {
+							additionalClasses: o?.row_group_table_body,
+							...e.config?.tableBody,
+							children: /* @__PURE__ */ jsx(DataTableRows, {
+								activeRows: n,
+								columns: i,
+								cssClasses: o,
+								hoverable: c,
+								hoverableRows: l,
+								isRowGroup: !0,
+								nonHoverableRows: u,
+								rows: e.rows,
+								usingRowGroups: _
+							})
+						})
+					]
+				})] }, `${e.caption?.["data-testid"]}-${t.toString()}`))]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: o?.leftboxshadowcontainer,
+				"data-datatable-left-shadow": !0
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: o?.rightboxshadowcontainer,
+				"data-datatable-right-shadow": !0
+			})
+		]
+	});
+});
+export { DataTableStandAlone };

package/dist/esm/components/dataTable/hooks/useDataTableHasScroll.js

@@ -1 +1,20 @@
-import{useState as r,useEffect as e}from"react";import{ResizeObserver as t}from"../../../lib/utils/resizeObserver/resizeObserver.js";import{hasScroll as o}from"../../../lib/utils/scroll/hasScroll.js";const s=({ref:s})=>{const[l,c]=r(!1);return e(()=>{const r=s.current?.querySelector?.("[data-datatable-scrollable-container]");let e;if(r instanceof HTMLElement){const s=r=>{c(o(r))};s(r),e=new t(()=>{s(r)}),e.observe(r)}return()=>{e?.disconnect()}},[]),{hasScroll:l}};export{s as useDataTableHasScroll};
+import { hasScroll } from "../../../lib/utils/scroll/hasScroll.js";
+import { useEffect, useState } from "react";
+const useDataTableHasScroll = ({ ref: n }) => {
+	let [r, i] = useState(!1);
+	return useEffect(() => {
+		let e = n.current?.querySelector?.("[data-datatable-scrollable-container]"), t;
+		if (e instanceof HTMLElement) {
+			let n = (e) => {
+				i(hasScroll(e));
+			};
+			n(e), t = new ResizeObserver(() => {
+				n(e);
+			}), t.observe(e);
+		}
+		return () => {
+			t?.disconnect();
+		};
+	}, []), { hasScroll: r };
+};
+export { useDataTableHasScroll };

package/dist/esm/components/dataTable/hooks/useDataTableShadow.js

@@ -1 +1,21 @@
-import{useEffect as e}from"react";import{ResizeObserver as t}from"../../../lib/utils/resizeObserver/resizeObserver.js";const s=({headBoxShadow:s,leftBoxShadow:a,ref:r,rightBoxShadow:l})=>(e(()=>{const e=r.current,o=e?.querySelector("[data-datatable-scrollable-container]");let c;const i=()=>{if(!o)return;const t=o.querySelector("[data-table-head]");if(t instanceof HTMLElement&&t.hasAttribute("data-sticky")&&s&&(o.scrollTop?t.classList.add(s):t.classList.remove(s)),a){const t=e?.querySelector("[data-datatable-left-shadow]");t instanceof HTMLElement&&(o.scrollLeft?(t.style.boxShadow=a,t.classList.add(a),t.style.height=`${o.clientHeight}px`):t.classList.remove(a))}if(l){const t=e?.querySelector("[data-datatable-right-shadow]");t instanceof HTMLElement&&(o.scrollLeft+o.clientWidth<o.scrollWidth?(t.classList.add(l),t.style.height=`${o.clientHeight}px`):t.classList.remove(l))}};return o instanceof HTMLElement&&(i(),o?.addEventListener("scroll",i),c=new t(()=>{i()}),c.observe(o)),()=>{o?.removeEventListener("scroll",i),c?.disconnect()}},[]),{});export{s as useDataTableShadow};
+import { useEffect } from "react";
+const useDataTableShadow = ({ headBoxShadow: t, leftBoxShadow: n, ref: r, rightBoxShadow: i }) => (useEffect(() => {
+	let e = r.current, a = e?.querySelector("[data-datatable-scrollable-container]"), o, s = () => {
+		if (!a) return;
+		let r = a.querySelector("[data-table-head]");
+		if (r instanceof HTMLElement && r.hasAttribute("data-sticky") && t && (a.scrollTop ? r.classList.add(t) : r.classList.remove(t)), n) {
+			let t = e?.querySelector("[data-datatable-left-shadow]");
+			t instanceof HTMLElement && (a.scrollLeft ? (t.style.boxShadow = n, t.classList.add(n), t.style.height = `${a.clientHeight}px`) : t.classList.remove(n));
+		}
+		if (i) {
+			let t = e?.querySelector("[data-datatable-right-shadow]");
+			t instanceof HTMLElement && (a.scrollLeft + a.clientWidth < a.scrollWidth ? (t.classList.add(i), t.style.height = `${a.clientHeight}px`) : t.classList.remove(i));
+		}
+	};
+	return a instanceof HTMLElement && (s(), a?.addEventListener("scroll", s), o = new ResizeObserver(() => {
+		s();
+	}), o.observe(a)), () => {
+		a?.removeEventListener("scroll", s), o?.disconnect();
+	};
+}, []), {});
+export { useDataTableShadow };

package/dist/esm/components/dataTable/hooks/useDataTableStickyDividers.js

@@ -1 +1,29 @@
-import{useEffect as e}from"react";import{ResizeObserver as t}from"../../../lib/utils/resizeObserver/resizeObserver.js";import{hasHorizontalScroll as r}from"../../../lib/utils/scroll/hasScroll.js";const l=({ref:l})=>(e(()=>{const e=l.current?.querySelector("[data-datatable-scrollable-container]");let o;if(e instanceof HTMLElement){const s=e=>{const t=r(e),o=e.querySelectorAll("[data-table-divider]"),s=e.querySelectorAll('[data-sticky="left"]').length>0;let a=0,n=0;if(s){const e=l.current?.querySelector("[data-datatable-left-shadow]");if(e){const t=window.getComputedStyle(e).getPropertyValue("z-index");t&&(a=parseInt(t,10))}}else{e.querySelectorAll("[data-table-row]").forEach(e=>{e instanceof HTMLElement&&(n=Math.max(n,e.offsetWidth))})}o.forEach(e=>{e instanceof HTMLElement&&(s?(e.style.position=t?"sticky":"",e.style.left=t?"0":"",e.style.zIndex=t?`${a+1}`:""):e.style.width=t?`${n}px`:"")})};s(e),o=new t(()=>{s(e)}),o.observe(e)}return()=>{o?.disconnect()}},[]),{});export{l as useDataTableStickyDividers};
+import { hasHorizontalScroll } from "../../../lib/utils/scroll/hasScroll.js";
+import { useEffect } from "react";
+const useDataTableStickyDividers = ({ ref: n }) => (useEffect(() => {
+	let t = n.current?.querySelector("[data-datatable-scrollable-container]"), r;
+	if (t instanceof HTMLElement) {
+		let i = (t) => {
+			let r = hasHorizontalScroll(t), i = t.querySelectorAll("[data-table-divider]"), a = t.querySelectorAll("[data-sticky=\"left\"]").length > 0, o = 0, s = 0;
+			if (a) {
+				let e = n.current?.querySelector("[data-datatable-left-shadow]");
+				if (e) {
+					let t = window.getComputedStyle(e).getPropertyValue("z-index");
+					t && (o = parseInt(t, 10));
+				}
+			} else t.querySelectorAll("[data-table-row]").forEach((e) => {
+				e instanceof HTMLElement && (s = Math.max(s, e.offsetWidth));
+			});
+			i.forEach((e) => {
+				e instanceof HTMLElement && (a ? (e.style.position = r ? "sticky" : "", e.style.left = r ? "0" : "", e.style.zIndex = r ? `${o + 1}` : "") : e.style.width = r ? `${s}px` : "");
+			});
+		};
+		i(t), r = new ResizeObserver(() => {
+			i(t);
+		}), r.observe(t);
+	}
+	return () => {
+		r?.disconnect();
+	};
+}, []), {});
+export { useDataTableStickyDividers };

package/dist/esm/components/dataTable/hooks/useDataTableStickyLeftColumns.js

@@ -1 +1,25 @@
-import{useEffect as e}from"react";import{ResizeObserver as t}from"../../../lib/utils/resizeObserver/resizeObserver.js";import{hasHorizontalScroll as r}from"../../../lib/utils/scroll/hasScroll.js";const l=({ref:l})=>(e(()=>{const e=l.current?.querySelector("[data-datatable-scrollable-container]"),o=l.current?.querySelector("[data-datatable-left-shadow]");let a;if(e instanceof HTMLElement){const l=e=>{const t=r(e),l=e.querySelectorAll("[data-table-row]");let a=0;l.forEach(e=>{if(e instanceof HTMLElement){const r=Array.from(e.querySelectorAll('[data-sticky="left"]'));let l=0;r.forEach(e=>{e instanceof HTMLElement&&(e.style.left=t?`${l}px`:"auto",l+=e.offsetWidth)}),a=Math.max(a,l)}}),o instanceof HTMLElement&&(o.style.left=`${a}px`)};l(e),a=new t(()=>{l(e)}),a.observe(e)}return()=>{a?.disconnect()}},[]),{});export{l as useDataTableStickyLeftColumns};
+import { hasHorizontalScroll } from "../../../lib/utils/scroll/hasScroll.js";
+import { useEffect } from "react";
+const useDataTableStickyLeftColumns = ({ ref: n }) => (useEffect(() => {
+	let t = n.current?.querySelector("[data-datatable-scrollable-container]"), r = n.current?.querySelector("[data-datatable-left-shadow]"), i;
+	if (t instanceof HTMLElement) {
+		let n = (t) => {
+			let n = hasHorizontalScroll(t), i = t.querySelectorAll("[data-table-row]"), a = 0;
+			i.forEach((e) => {
+				if (e instanceof HTMLElement) {
+					let t = Array.from(e.querySelectorAll("[data-sticky=\"left\"]")), r = 0;
+					t.forEach((e) => {
+						e instanceof HTMLElement && (e.style.left = n ? `${r}px` : "auto", r += e.offsetWidth);
+					}), a = Math.max(a, r);
+				}
+			}), r instanceof HTMLElement && (r.style.left = `${a}px`);
+		};
+		n(t), i = new ResizeObserver(() => {
+			n(t);
+		}), i.observe(t);
+	}
+	return () => {
+		i?.disconnect();
+	};
+}, []), {});
+export { useDataTableStickyLeftColumns };

package/dist/esm/components/dataTable/hooks/useDataTableStickyRightColumns.js

@@ -1 +1,31 @@
-import{useEffect as t}from"react";import{ResizeObserver as e}from"../../../lib/utils/resizeObserver/resizeObserver.js";import{hasHorizontalScroll as r,hasVerticalScroll as o}from"../../../lib/utils/scroll/hasScroll.js";const a=({ref:a})=>(t(()=>{const t=a.current?.querySelector("[data-datatable-scrollable-container]"),l=a.current?.querySelector("[data-datatable-right-shadow]");let s;if(t instanceof HTMLElement){const a=t=>{const e=r(t),a=t.querySelectorAll("[data-table-row]");let s=0;if(a.forEach(t=>{if(t instanceof HTMLElement){const r=Array.from(t.querySelectorAll('[data-sticky="true"], [data-sticky="right"]')).reverse();let o=0;r.forEach(t=>{t instanceof HTMLElement&&(t.style.right=e?`${o}px`:"auto",o+=t.offsetWidth)}),s=Math.max(s,o)}}),l instanceof HTMLElement){if(o(t)){const e=t.offsetWidth-t.clientWidth;s+=e}l.style.right=`${s}px`}};a(t),s=new e(()=>{a(t)}),s.observe(t)}return()=>{s?.disconnect()}},[]),{});export{a as useDataTableStickyRightColumns};
+import { hasHorizontalScroll, hasVerticalScroll } from "../../../lib/utils/scroll/hasScroll.js";
+import { useEffect } from "react";
+const useDataTableStickyRightColumns = ({ ref: r }) => (useEffect(() => {
+	let n = r.current?.querySelector("[data-datatable-scrollable-container]"), i = r.current?.querySelector("[data-datatable-right-shadow]"), a;
+	if (n instanceof HTMLElement) {
+		let r = (n) => {
+			let r = hasHorizontalScroll(n), a = n.querySelectorAll("[data-table-row]"), o = 0;
+			if (a.forEach((e) => {
+				if (e instanceof HTMLElement) {
+					let t = Array.from(e.querySelectorAll("[data-sticky=\"true\"], [data-sticky=\"right\"]")).reverse(), n = 0;
+					t.forEach((e) => {
+						e instanceof HTMLElement && (e.style.right = r ? `${n}px` : "auto", n += e.offsetWidth);
+					}), o = Math.max(o, n);
+				}
+			}), i instanceof HTMLElement) {
+				if (hasVerticalScroll(n)) {
+					let e = n.offsetWidth - n.clientWidth;
+					o += e;
+				}
+				i.style.right = `${o}px`;
+			}
+		};
+		r(n), a = new ResizeObserver(() => {
+			r(n);
+		}), a.observe(n);
+	}
+	return () => {
+		a?.disconnect();
+	};
+}, []), {});
+export { useDataTableStickyRightColumns };

package/dist/esm/components/dataTable/utils/cellConfig.js

@@ -1 +1,2 @@
-const o=({cellConfig:o})=>({...o});export{o as applyFlexToCell};
+const applyFlexToCell = ({ cellConfig: e }) => ({ ...e });
+export { applyFlexToCell };

package/dist/esm/components/dataTable/utils/hoverable.js

@@ -1 +1,5 @@
-const e=({hoverable:e,hoverableRows:o,nonHoverableRows:d,row:i})=>{let l;return o?l=Boolean(i.id&&o.includes(i.id)):d?l=!(i.id&&d.includes(i.id)):void 0!==e&&(l=e),l};export{e as isRowHoverable};
+const isRowHoverable = ({ hoverable: e, hoverableRows: t, nonHoverableRows: n, row: r }) => {
+	let i;
+	return t ? i = !!(r.id && t.includes(r.id)) : n ? i = !(r.id && n.includes(r.id)) : e !== void 0 && (i = e), i;
+};
+export { isRowHoverable };

package/dist/esm/components/dataTable/utils/rowConfig.js

@@ -1 +1,2 @@
-const o=({rowConfig:o})=>({...o});export{o as applyGridToRow};
+const applyGridToRow = ({ rowConfig: e }) => ({ ...e });
+export { applyGridToRow };

package/dist/esm/components/dataTable/utils/tableConfig.js

@@ -1 +1,2 @@
-const o=({tableConfig:o})=>({...o}),t=({tableConfig:o})=>({...o});export{t as applyPositionToWrapper,o as applyZIndexToWrapper};
+const applyZIndexToWrapper = ({ tableConfig: e }) => ({ ...e }), applyPositionToWrapper = ({ tableConfig: e }) => ({ ...e });
+export { applyPositionToWrapper, applyZIndexToWrapper };

package/dist/esm/components/dot/dot.js

@@ -1,2 +1,23 @@
-import{j as s}from"../../_virtual/jsx-runtime.js";import{forwardRef as a}from"react";import{useClassName as e}from"../../lib/hooks/useClassName/useClassName.js";import{DotStandAlone as t}from"./dotStandAlone.js";const o=a(({additionalSizeClasses:a,additionalVariantClasses:o,maxNumber:r,number:i,size:n,variant:m,...l},d)=>{const u=e({additionalClassNames:o,component:"DOT",variant:m}),p=e({additionalClassNames:a,component:"DOT",variant:n}),f="number"==typeof i&&"number"==typeof r?i>r?`+${r}`:i.toString():void 0;/* @__PURE__ */
-return s.jsx(t,{...l,ref:d,cssSizeClasses:p,cssVariantClasses:u,formatedNumber:f})});export{o as Dot};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { DotStandAlone } from "./dotStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const Dot = forwardRef(({ additionalSizeClasses: e, additionalVariantClasses: t, maxNumber: n, number: r, size: i, variant: a, ...o }, s) => {
+	let c = useClassName({
+		additionalClassNames: t,
+		component: "DOT",
+		variant: a
+	}), l = useClassName({
+		additionalClassNames: e,
+		component: "DOT",
+		variant: i
+	}), u = typeof r == "number" ? typeof n == "number" && r > n ? `+${n}` : r.toString() : void 0;
+	return /* @__PURE__ */ jsx(DotStandAlone, {
+		...o,
+		ref: s,
+		cssSizeClasses: l,
+		cssVariantClasses: c,
+		formatedNumber: u
+	});
+});
+export { Dot };

package/dist/esm/components/dot/dotStandAlone.js

@@ -1,2 +1,19 @@
-import{j as s}from"../../_virtual/jsx-runtime.js";import{forwardRef as t}from"react";import{classNames as i}from"../../lib/utils/classNames/classNames.js";import{pickCustomAttributes as e}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";const r=t(({cssSizeClasses:t,cssVariantClasses:r,formatedNumber:a,height:o,label:m,width:l,...c},d)=>{const u=e(c);/* @__PURE__ */
-return s.jsxs("span",{ref:d,className:i(t?.dot,r?.dot),"data-testid":"dot",style:o||l?{height:o,width:l}:void 0,...u,children:[m,a]})});export{r as DotStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { classNames } from "../../lib/utils/classNames/classNames.js";
+import { forwardRef } from "react";
+import { jsxs } from "react/jsx-runtime";
+const DotStandAlone = forwardRef(({ cssSizeClasses: e, cssVariantClasses: t, formatedNumber: n, height: r, label: i, width: a, ...o }, s) => {
+	let c = pickCustomAttributes(o);
+	return /* @__PURE__ */ jsxs("span", {
+		ref: s,
+		className: classNames(e?.dot, t?.dot),
+		"data-testid": "dot",
+		style: r || a ? {
+			height: r,
+			width: a
+		} : void 0,
+		...c,
+		children: [i, n]
+	});
+});
+export { DotStandAlone };

package/dist/esm/components/icon/icon.js

@@ -1,3 +1,52 @@
-import{j as t}from"../../_virtual/jsx-runtime.js";import{forwardRef as s}from"react";import{useClassName as e}from"../../lib/hooks/useClassName/useClassName.js";import{classNames as i}from"../../lib/utils/classNames/classNames.js";import{pickCustomAttributes as a}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{IconStandAlone as o}from"./iconStandAlone.js";const l=s(({className:s,color:l,height:r,icon:n,id:c,tabIndex:d,title:m,width:b,...u},h)=>{const{altText:j,disabled:p,onClick:x,screenReaderText:C,...N}=u,f=a(u),k=!(Object.keys(u).includes("color")&&!l)&&!!l,I=e({component:"ICON"});return n?x?/* @__PURE__ */t.jsxs("button",{"aria-disabled":p,"aria-label":u["aria-label"]||j,className:i(I.button,s),"data-testid":"button",disabled:p,id:c,style:{height:r,width:b},tabIndex:d,title:m||"",type:"button",onClick:x,...f,children:[
-/* @__PURE__ */t.jsx("screen-reader-only",{children:C}),
-/* @__PURE__ */t.jsx(o,{icon:n,...N,ref:h,"aria-label":void 0,className:s,cssClasses:I,"data-testid":void 0,height:r,id:void 0,linearIcon:k,width:b})]}):/* @__PURE__ */t.jsx(o,{icon:n,...N,ref:h,altText:j,className:s,cssClasses:I,"data-testid":"icon",height:r,linearIcon:k,width:b}):null});export{l as Icon,l as IconBasic};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { classNames } from "../../lib/utils/classNames/classNames.js";
+import { ScreenReaderOnly } from "../../lib/components/screen-reader-only/screenReaderOnly.js";
+import { IconStandAlone } from "./iconStandAlone.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const IconBasic = forwardRef(({ className: e, color: t, height: n, icon: r, id: i, tabIndex: a, title: o, width: s, ...c }, l) => {
+	let { altText: u, disabled: d, onClick: f, screenReaderText: p, ...m } = c, h = pickCustomAttributes(c), g = !(Object.keys(c).includes("color") && !t) && !!t, _ = useClassName({ component: "ICON" });
+	return r ? f ? /* @__PURE__ */ jsxs("button", {
+		"aria-disabled": d,
+		"aria-label": c["aria-label"] || u,
+		className: classNames(_.button, e),
+		"data-testid": "button",
+		disabled: d,
+		id: i,
+		style: {
+			height: n,
+			width: s
+		},
+		tabIndex: a,
+		title: o || "",
+		type: "button",
+		onClick: f,
+		...h,
+		children: [/* @__PURE__ */ jsx(ScreenReaderOnly, { children: p }), /* @__PURE__ */ jsx(IconStandAlone, {
+			icon: r,
+			...m,
+			ref: l,
+			"aria-label": void 0,
+			className: e,
+			cssClasses: _,
+			"data-testid": void 0,
+			height: n,
+			id: void 0,
+			linearIcon: g,
+			width: s
+		})]
+	}) : /* @__PURE__ */ jsx(IconStandAlone, {
+		icon: r,
+		...m,
+		ref: l,
+		altText: u,
+		className: e,
+		cssClasses: _,
+		"data-testid": "icon",
+		height: n,
+		linearIcon: g,
+		width: s
+	}) : null;
+});
+export { IconBasic };