@atom-learning/components 6.5.4 → 6.5.5

package/dist/components/data-table/DataTableError.js

@@ -1,11 +1,12 @@
-import { AsyncDataState as e } from "./DataTable.types.js";
-import { useDataTable as t } from "./DataTableContext.js";
+import { AsyncDataState } from "./DataTable.types.js";
+import { useDataTable } from "./DataTableContext.js";
 //#region src/components/data-table/DataTableError.tsx
-var n = ({ children: n }) => {
-	let { asyncDataState: r, runAsyncData: i } = t();
-	return r === e.REJECTED ? n(i) : null;
+var DataTableError = ({ children }) => {
+	const { asyncDataState, runAsyncData } = useDataTable();
+	if (asyncDataState !== AsyncDataState.REJECTED) return null;
+	return children(runAsyncData);
 };
 //#endregion
-export { n as DataTableError };
+export { DataTableError };
 
 //# sourceMappingURL=DataTableError.js.map

package/dist/components/data-table/DataTableError.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableError.js","names":[],"sources":["../../../src/components/data-table/DataTableError.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { AsyncDataState, DataTableContextType } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableError = ({\n  children\n}: {\n  children: (retry?: DataTableContextType['runAsyncData']) => React.ReactElement\n}) => {\n  const { asyncDataState, runAsyncData } = useDataTable()\n\n  if (asyncDataState !== AsyncDataState.REJECTED) return null\n\n  return children(runAsyncData)\n}\n"],"mappings":";;;AAKA,IAAa,KAAkB,EAC7B,kBAGI;CACJ,IAAM,EAAE,mBAAgB,oBAAiB,GAAc;AAIvD,QAFI,MAAmB,EAAe,WAE/B,EAAS,EAAa,GAF0B"}
+{"version":3,"file":"DataTableError.js","names":[],"sources":["../../../src/components/data-table/DataTableError.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { AsyncDataState, DataTableContextType } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableError = ({\n  children\n}: {\n  children: (retry?: DataTableContextType['runAsyncData']) => React.ReactElement\n}) => {\n  const { asyncDataState, runAsyncData } = useDataTable()\n\n  if (asyncDataState !== AsyncDataState.REJECTED) return null\n\n  return children(runAsyncData)\n}\n"],"mappings":";;;AAKA,IAAa,kBAAkB,EAC7B,eAGI;CACJ,MAAM,EAAE,gBAAgB,iBAAiB,cAAc;AAEvD,KAAI,mBAAmB,eAAe,SAAU,QAAO;AAEvD,QAAO,SAAS,aAAa"}

package/dist/components/data-table/DataTableGlobalFilter.js

@@ -1,29 +1,32 @@
-import { Label as e } from "../label/Label.js";
-import { AsyncDataState as t } from "./DataTable.types.js";
-import { useDataTable as n } from "./DataTableContext.js";
-import { SearchInput as r } from "../search-input/SearchInput.js";
-import i from "clsx";
-import * as a from "react";
-import { debounce as o } from "throttle-debounce";
+import { Label } from "../label/Label.js";
+import { AsyncDataState } from "./DataTable.types.js";
+import { useDataTable } from "./DataTableContext.js";
+import { SearchInput } from "../search-input/SearchInput.js";
+import clsx from "clsx";
+import * as React$1 from "react";
+import { debounce } from "throttle-debounce";
 //#region src/components/data-table/DataTableGlobalFilter.tsx
-var s = ({ onChange: s, label: c, hideLabel: l = !1, ...u }) => {
-	let { setGlobalFilter: d, getState: f, resetPagination: p, getTotalRows: m, asyncDataState: h } = n(), { globalFilter: g } = f();
-	if (h !== t.PENDING && m() === 0) return null;
-	let _ = o(250, (e) => {
-		let { target: { value: t } } = e;
-		s?.(e), p(), d(t);
+var DataTableGlobalFilter = ({ onChange, label, hideLabel = false, ...props }) => {
+	const { setGlobalFilter, getState, resetPagination, getTotalRows, asyncDataState } = useDataTable();
+	const { globalFilter } = getState();
+	if (!(asyncDataState === AsyncDataState.PENDING) && getTotalRows() === 0) return null;
+	const handleChange = debounce(250, (event) => {
+		const { target: { value } } = event;
+		onChange?.(event);
+		resetPagination();
+		setGlobalFilter(value);
 	});
-	return /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(e, {
-		htmlFor: c,
-		className: i("mb-3", l && "sr-only")
-	}, c), /* @__PURE__ */ a.createElement(r, {
-		...u,
-		defaultValue: g,
-		onChange: _,
-		name: c
+	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(Label, {
+		htmlFor: label,
+		className: clsx("mb-3", hideLabel && "sr-only")
+	}, label), /* @__PURE__ */ React$1.createElement(SearchInput, {
+		...props,
+		defaultValue: globalFilter,
+		onChange: handleChange,
+		name: label
 	}));
 };
 //#endregion
-export { s as DataTableGlobalFilter };
+export { DataTableGlobalFilter };
 
 //# sourceMappingURL=DataTableGlobalFilter.js.map

package/dist/components/data-table/DataTableGlobalFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableGlobalFilter.js","names":[],"sources":["../../../src/components/data-table/DataTableGlobalFilter.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\nimport { Label } from '../label/Label'\nimport { SearchInput } from '../search-input/SearchInput'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableSearchProps = React.ComponentProps<typeof SearchInput> & {\n  label: string\n  hideLabel?: boolean\n}\nexport const DataTableGlobalFilter = ({\n  onChange,\n  label,\n  hideLabel = false,\n  ...props\n}: DataTableSearchProps) => {\n  const {\n    setGlobalFilter,\n    getState,\n    resetPagination,\n    getTotalRows,\n    asyncDataState\n  } = useDataTable()\n  const { globalFilter } = getState()\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (isEmpty) return null\n\n  const handleChange = debounce(250, (event) => {\n    const {\n      target: { value }\n    } = event\n\n    onChange?.(event)\n    resetPagination()\n    setGlobalFilter(value)\n  })\n\n  return (\n    <>\n      <Label htmlFor={label} className={clsx('mb-3', hideLabel && 'sr-only')}>\n        {label}\n      </Label>\n      <SearchInput\n        {...props}\n        defaultValue={globalFilter}\n        onChange={handleChange}\n        name={label}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;;;;AAaA,IAAa,KAAyB,EACpC,aACA,UACA,eAAY,IACZ,GAAG,QACuB;CAC1B,IAAM,EACJ,oBACA,aACA,oBACA,iBACA,sBACE,GAAc,EACZ,EAAE,oBAAiB,GAAU;AAKnC,KAHkB,MAAmB,EAAe,WACtB,GAAc,KAAK,EAEpC,QAAO;CAEpB,IAAM,IAAe,EAAS,MAAM,MAAU;EAC5C,IAAM,EACJ,QAAQ,EAAE,eACR;AAIJ,EAFA,IAAW,EAAM,EACjB,GAAiB,EACjB,EAAgB,EAAM;GACtB;AAEF,QACE,kBAAA,cAAA,EAAA,UAAA,MACE,kBAAA,cAAC,GAAD;EAAO,SAAS;EAAO,WAAW,EAAK,QAAQ,KAAa,UAAU;EAE9D,EADL,EACK,EACR,kBAAA,cAAC,GAAD;EACE,GAAI;EACJ,cAAc;EACd,UAAU;EACV,MAAM;EACN,CAAA,CACD"}
+{"version":3,"file":"DataTableGlobalFilter.js","names":[],"sources":["../../../src/components/data-table/DataTableGlobalFilter.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\nimport { Label } from '../label/Label'\nimport { SearchInput } from '../search-input/SearchInput'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableSearchProps = React.ComponentProps<typeof SearchInput> & {\n  label: string\n  hideLabel?: boolean\n}\nexport const DataTableGlobalFilter = ({\n  onChange,\n  label,\n  hideLabel = false,\n  ...props\n}: DataTableSearchProps) => {\n  const {\n    setGlobalFilter,\n    getState,\n    resetPagination,\n    getTotalRows,\n    asyncDataState\n  } = useDataTable()\n  const { globalFilter } = getState()\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (isEmpty) return null\n\n  const handleChange = debounce(250, (event) => {\n    const {\n      target: { value }\n    } = event\n\n    onChange?.(event)\n    resetPagination()\n    setGlobalFilter(value)\n  })\n\n  return (\n    <>\n      <Label htmlFor={label} className={clsx('mb-3', hideLabel && 'sr-only')}>\n        {label}\n      </Label>\n      <SearchInput\n        {...props}\n        defaultValue={globalFilter}\n        onChange={handleChange}\n        name={label}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;;;;AAaA,IAAa,yBAAyB,EACpC,UACA,OACA,YAAY,OACZ,GAAG,YACuB;CAC1B,MAAM,EACJ,iBACA,UACA,iBACA,cACA,mBACE,cAAc;CAClB,MAAM,EAAE,iBAAiB,UAAU;AAKnC,KAFgB,EADE,mBAAmB,eAAe,YACtB,cAAc,KAAK,EAEpC,QAAO;CAEpB,MAAM,eAAe,SAAS,MAAM,UAAU;EAC5C,MAAM,EACJ,QAAQ,EAAE,YACR;AAEJ,aAAW,MAAM;AACjB,mBAAiB;AACjB,kBAAgB,MAAM;GACtB;AAEF,QACE,wBAAA,cAAA,QAAA,UAAA,MACE,wBAAA,cAAC,OAAD;EAAO,SAAS;EAAO,WAAW,KAAK,QAAQ,aAAa,UAAU;EAE9D,EADL,MACK,EACR,wBAAA,cAAC,aAAD;EACE,GAAI;EACJ,cAAc;EACd,UAAU;EACV,MAAM;EACN,CAAA,CACD"}

package/dist/components/data-table/DataTableHead.js

@@ -1,54 +1,69 @@
-import { Table as e } from "../table/Table.js";
-import { useDataTable as t } from "./DataTableContext.js";
-import { DataTableHeaderCell as n } from "./DataTableHeaderCell.js";
-import { DataTableSelectAllRowsCheckbox as r } from "./DataTableSelectAllRowsCheckbox.js";
-import i from "clsx";
-import * as a from "react";
+import { Table } from "../table/Table.js";
+import { useDataTable } from "./DataTableContext.js";
+import { DataTableHeaderCell } from "./DataTableHeaderCell.js";
+import { DataTableSelectAllRowsCheckbox } from "./DataTableSelectAllRowsCheckbox.js";
+import clsx from "clsx";
+import * as React$1 from "react";
 //#region src/components/data-table/DataTableHead.tsx
-var o = ({ sortable: o = !0, theme: s = "light", isSticky: c = !1, stickyOffset: l = 0, showTotalInFirstColumn: u, totalSuffix: d, style: f, className: p, ...m }) => {
-	let { getHeaderGroups: h, setIsSortable: g, enableRowSelection: _, getCanSomeRowsExpand: v, tablePosition: y, setTablePosition: b } = t();
-	a.useEffect(() => {
-		g(o);
-	}, [o, g]);
-	let x = a.useRef(null), S = a.useRef(null), C = a.useRef(0), [w, T] = a.useState(0), [E, D] = a.useState(!1), O = x?.current?.closest("thead");
-	if (O && y?.offsetTop === null) {
-		let e = l + O.getBoundingClientRect().height;
-		y && b({
-			...y,
-			offsetTop: e || 0
+var DataTableHead = ({ sortable = true, theme = "light", isSticky = false, stickyOffset = 0, showTotalInFirstColumn, totalSuffix, style, className, ...props }) => {
+	const { getHeaderGroups, setIsSortable, enableRowSelection, getCanSomeRowsExpand, tablePosition, setTablePosition } = useDataTable();
+	React$1.useEffect(() => {
+		setIsSortable(sortable);
+	}, [sortable, setIsSortable]);
+	const tableHeaderRowRef = React$1.useRef(null);
+	const tableRef = React$1.useRef(null);
+	const headerOffsetRef = React$1.useRef(0);
+	const [headerOffset, setHeaderOffset] = React$1.useState(0);
+	const [headerHide, setHeaderHide] = React$1.useState(false);
+	const tableHeadElement = tableHeaderRowRef?.current?.closest("thead");
+	if (tableHeadElement && tablePosition?.offsetTop === null) {
+		const intersectionOffset = stickyOffset + tableHeadElement.getBoundingClientRect().height;
+		if (tablePosition) setTablePosition({
+			...tablePosition,
+			offsetTop: intersectionOffset || 0
 		});
 	}
-	return a.useEffect(() => {
-		if (c && (!S.current && x.current && (S.current = x.current.closest("table")), S.current && y?.top !== null && y?.bottom !== null)) {
-			let e = y?.top != null && y?.bottom != null && y.top < l && y.bottom > 100 ? -y.top + l : 0;
-			e !== 0 && D(!0), C.current = e, T(e), requestAnimationFrame(() => {
-				D(!1);
-			});
+	React$1.useEffect(() => {
+		if (!isSticky) return;
+		if (!tableRef.current && tableHeaderRowRef.current) tableRef.current = tableHeaderRowRef.current.closest("table");
+		if (tableRef.current) {
+			if (tablePosition?.top !== null && tablePosition?.bottom !== null) {
+				const newOffset = tablePosition?.top != null && tablePosition?.bottom != null && tablePosition.top < stickyOffset && tablePosition.bottom > 100 ? -tablePosition.top + stickyOffset : 0;
+				if (newOffset !== 0) setHeaderHide(true);
+				headerOffsetRef.current = newOffset;
+				setHeaderOffset(newOffset);
+				requestAnimationFrame(() => {
+					setHeaderHide(false);
+				});
+			}
 		}
 	}, [
-		c,
-		l,
-		y
-	]), /* @__PURE__ */ a.createElement(e.Header, {
-		theme: s,
+		isSticky,
+		stickyOffset,
+		tablePosition
+	]);
+	return /* @__PURE__ */ React$1.createElement(Table.Header, {
+		theme,
 		style: {
-			...f,
-			"--header-offset": `${w}px`
+			...style,
+			"--header-offset": `${headerOffset}px`
 		},
-		...m,
-		className: i("relative", "z-3", "[&_tr:not(:last-child)>th]:border-b-none", "[&_tr:not(:first-child)>th]:rounded-none!", p)
-	}, h().map((t) => /* @__PURE__ */ a.createElement(e.Row, {
-		key: t.id,
-		ref: x,
-		className: c && w !== 0 ? i("translate-y-(--header-offset)", E ? "delay-0ms opacity-0 transition-none" : "delay-150ms opacity-100 transition-opacity duration-100", "[&_th]:last:before:absolute", "[&_th]:last:before:bottom-0", "[&_th]:last:before:pointer-events-none", "[&_th]:last:before:right-0", "[&_th]:last:before:shadow-sm", "[&_th]:last:before:top-0", "[&_th]:last:before:w-full") : void 0
-	}, v() && /* @__PURE__ */ a.createElement(e.HeaderCell, { className: "w-10" }), _ && /* @__PURE__ */ a.createElement(e.HeaderCell, { className: "w-10" }, /* @__PURE__ */ a.createElement(r, null)), t.headers.map((e, t) => /* @__PURE__ */ a.createElement(n, {
-		header: e,
-		key: e.id,
-		includeTotal: t === 0 && u,
-		totalSuffix: d
-	})))));
+		...props,
+		className: clsx("relative", "z-3", "[&_tr:not(:last-child)>th]:border-b-none", "[&_tr:not(:first-child)>th]:rounded-none!", className)
+	}, getHeaderGroups().map((headerGroup) => {
+		return /* @__PURE__ */ React$1.createElement(Table.Row, {
+			key: headerGroup.id,
+			ref: tableHeaderRowRef,
+			className: isSticky && headerOffset !== 0 ? clsx("translate-y-(--header-offset)", headerHide ? "delay-0ms opacity-0 transition-none" : "delay-150ms opacity-100 transition-opacity duration-100", "[&_th]:last:before:absolute", "[&_th]:last:before:bottom-0", "[&_th]:last:before:pointer-events-none", "[&_th]:last:before:right-0", "[&_th]:last:before:shadow-sm", "[&_th]:last:before:top-0", "[&_th]:last:before:w-full") : void 0
+		}, getCanSomeRowsExpand() && /* @__PURE__ */ React$1.createElement(Table.HeaderCell, { className: "w-10" }), enableRowSelection && /* @__PURE__ */ React$1.createElement(Table.HeaderCell, { className: "w-10" }, /* @__PURE__ */ React$1.createElement(DataTableSelectAllRowsCheckbox, null)), headerGroup.headers.map((header, index) => /* @__PURE__ */ React$1.createElement(DataTableHeaderCell, {
+			header,
+			key: header.id,
+			includeTotal: index === 0 && showTotalInFirstColumn,
+			totalSuffix
+		})));
+	}));
 };
 //#endregion
-export { o as DataTableHead };
+export { DataTableHead };
 
 //# sourceMappingURL=DataTableHead.js.map

package/dist/components/data-table/DataTableHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableHead.js","names":[],"sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\n\ntype DataTableHeadProps = Omit<\n  React.ComponentProps<typeof Table.Header>,\n  'children'\n> & {\n  sortable?: boolean\n  isSticky?: boolean\n  stickyOffset?: number\n  showTotalInFirstColumn?: boolean\n  totalSuffix?: string\n}\n\nexport const DataTableHead = ({\n  sortable = true,\n  theme = 'light',\n  isSticky = false,\n  stickyOffset = 0,\n  showTotalInFirstColumn,\n  totalSuffix,\n  style,\n  className,\n  ...props\n}: DataTableHeadProps): React.ReactElement => {\n  const {\n    getHeaderGroups,\n    setIsSortable,\n    enableRowSelection,\n    getCanSomeRowsExpand,\n    tablePosition,\n    setTablePosition\n  } = useDataTable()\n\n  React.useEffect(() => {\n    setIsSortable(sortable)\n  }, [sortable, setIsSortable])\n\n  const tableHeaderRowRef = React.useRef<HTMLTableRowElement>(null)\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const headerOffsetRef = React.useRef(0)\n\n  const [headerOffset, setHeaderOffset] = React.useState<number>(0)\n  const [headerHide, setHeaderHide] = React.useState<boolean>(false)\n\n  const tableHeadElement = tableHeaderRowRef?.current?.closest('thead')\n\n  if (tableHeadElement && tablePosition?.offsetTop === null) {\n    const tableHeadHeight = tableHeadElement.getBoundingClientRect().height\n    const intersectionOffset = stickyOffset + tableHeadHeight\n    if (tablePosition) {\n      setTablePosition({ ...tablePosition, offsetTop: intersectionOffset || 0 })\n    }\n  }\n\n  React.useEffect(() => {\n    if (!isSticky) return\n\n    if (!tableRef.current && tableHeaderRowRef.current) {\n      tableRef.current = tableHeaderRowRef.current.closest(\n        'table'\n      ) as HTMLTableElement | null\n    }\n\n    if (tableRef.current) {\n      if (tablePosition?.top !== null && tablePosition?.bottom !== null) {\n        const newOffset =\n          tablePosition?.top != null &&\n          tablePosition?.bottom != null &&\n          tablePosition.top < stickyOffset &&\n          tablePosition.bottom > 100\n            ? -tablePosition.top + stickyOffset\n            : 0\n\n        if (newOffset !== 0) setHeaderHide(true)\n\n        headerOffsetRef.current = newOffset\n        setHeaderOffset(newOffset)\n\n        requestAnimationFrame(() => {\n          setHeaderHide(false)\n        })\n      }\n    }\n  }, [isSticky, stickyOffset, tablePosition])\n\n  return (\n    <Table.Header\n      theme={theme}\n      style={{\n        ...style,\n        '--header-offset': `${headerOffset}px`\n      }}\n      {...props}\n      className={clsx(\n        'relative',\n        'z-3',\n        '[&_tr:not(:last-child)>th]:border-b-none',\n        '[&_tr:not(:first-child)>th]:rounded-none!',\n        className\n      )}\n    >\n      {getHeaderGroups().map((headerGroup) => {\n        return (\n          <Table.Row\n            key={headerGroup.id}\n            ref={tableHeaderRowRef}\n            className={\n              isSticky && headerOffset !== 0\n                ? clsx(\n                    'translate-y-(--header-offset)',\n                    headerHide\n                      ? 'delay-0ms opacity-0 transition-none'\n                      : 'delay-150ms opacity-100 transition-opacity duration-100',\n                    '[&_th]:last:before:absolute',\n                    '[&_th]:last:before:bottom-0',\n                    '[&_th]:last:before:pointer-events-none',\n                    '[&_th]:last:before:right-0',\n                    '[&_th]:last:before:shadow-sm',\n                    '[&_th]:last:before:top-0',\n                    '[&_th]:last:before:w-full'\n                  )\n                : undefined\n            }\n          >\n            {getCanSomeRowsExpand() && <Table.HeaderCell className=\"w-10\" />}\n            {enableRowSelection && (\n              <Table.HeaderCell className=\"w-10\">\n                <DataTableSelectAllRowsCheckbox />\n              </Table.HeaderCell>\n            )}\n            {headerGroup.headers.map((header, index) => (\n              <DataTableHeaderCell\n                header={header}\n                key={header.id}\n                includeTotal={index === 0 && showTotalInFirstColumn}\n                totalSuffix={totalSuffix}\n              />\n            ))}\n          </Table.Row>\n        )\n      })}\n    </Table.Header>\n  )\n}\n"],"mappings":";;;;;;;AAmBA,IAAa,KAAiB,EAC5B,cAAW,IACX,WAAQ,SACR,cAAW,IACX,kBAAe,GACf,2BACA,gBACA,UACA,cACA,GAAG,QACyC;CAC5C,IAAM,EACJ,oBACA,kBACA,uBACA,yBACA,kBACA,wBACE,GAAc;AAElB,GAAM,gBAAgB;AACpB,IAAc,EAAS;IACtB,CAAC,GAAU,EAAc,CAAC;CAE7B,IAAM,IAAoB,EAAM,OAA4B,KAAK,EAC3D,IAAW,EAAM,OAAgC,KAAK,EACtD,IAAkB,EAAM,OAAO,EAAE,EAEjC,CAAC,GAAc,KAAmB,EAAM,SAAiB,EAAE,EAC3D,CAAC,GAAY,KAAiB,EAAM,SAAkB,GAAM,EAE5D,IAAmB,GAAmB,SAAS,QAAQ,QAAQ;AAErE,KAAI,KAAoB,GAAe,cAAc,MAAM;EAEzD,IAAM,IAAqB,IADH,EAAiB,uBAAuB,CAAC;AAEjE,EAAI,KACF,EAAiB;GAAE,GAAG;GAAe,WAAW,KAAsB;GAAG,CAAC;;AAmC9E,QA/BA,EAAM,gBAAgB;AACf,YAED,CAAC,EAAS,WAAW,EAAkB,YACzC,EAAS,UAAU,EAAkB,QAAQ,QAC3C,QACD,GAGC,EAAS,WACP,GAAe,QAAQ,QAAQ,GAAe,WAAW,OAAM;GACjE,IAAM,IACJ,GAAe,OAAO,QACtB,GAAe,UAAU,QACzB,EAAc,MAAM,KACpB,EAAc,SAAS,MACnB,CAAC,EAAc,MAAM,IACrB;AAON,GALI,MAAc,KAAG,EAAc,GAAK,EAExC,EAAgB,UAAU,GAC1B,EAAgB,EAAU,EAE1B,4BAA4B;AAC1B,MAAc,GAAM;KACpB;;IAGL;EAAC;EAAU;EAAc;EAAc,CAAC,EAGzC,kBAAA,cAAC,EAAM,QAAP;EACS;EACP,OAAO;GACL,GAAG;GACH,mBAAmB,GAAG,EAAa;GACpC;EACD,GAAI;EACJ,WAAW,EACT,YACA,OACA,4CACA,6CACA,EACD;EA0CY,EAxCZ,GAAiB,CAAC,KAAK,MAEpB,kBAAA,cAAC,EAAM,KAAP;EACE,KAAK,EAAY;EACjB,KAAK;EACL,WACE,KAAY,MAAiB,IACzB,EACE,iCACA,IACI,wCACA,2DACJ,+BACA,+BACA,0CACA,8BACA,gCACA,4BACA,4BACD,GACD,KAAA;EAiBI,EAdT,GAAsB,IAAI,kBAAA,cAAC,EAAM,YAAP,EAAkB,WAAU,QAAS,CAAA,EAC/D,KACC,kBAAA,cAAC,EAAM,YAAP,EAAkB,WAAU,QAET,EADjB,kBAAA,cAAC,GAAA,KAAiC,CACjB,EAEpB,EAAY,QAAQ,KAAK,GAAQ,MAChC,kBAAA,cAAC,GAAD;EACU;EACR,KAAK,EAAO;EACZ,cAAc,MAAU,KAAK;EAChB;EACb,CAAA,CACF,CACQ,CAEd,CACW"}
+{"version":3,"file":"DataTableHead.js","names":[],"sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\n\ntype DataTableHeadProps = Omit<\n  React.ComponentProps<typeof Table.Header>,\n  'children'\n> & {\n  sortable?: boolean\n  isSticky?: boolean\n  stickyOffset?: number\n  showTotalInFirstColumn?: boolean\n  totalSuffix?: string\n}\n\nexport const DataTableHead = ({\n  sortable = true,\n  theme = 'light',\n  isSticky = false,\n  stickyOffset = 0,\n  showTotalInFirstColumn,\n  totalSuffix,\n  style,\n  className,\n  ...props\n}: DataTableHeadProps): React.ReactElement => {\n  const {\n    getHeaderGroups,\n    setIsSortable,\n    enableRowSelection,\n    getCanSomeRowsExpand,\n    tablePosition,\n    setTablePosition\n  } = useDataTable()\n\n  React.useEffect(() => {\n    setIsSortable(sortable)\n  }, [sortable, setIsSortable])\n\n  const tableHeaderRowRef = React.useRef<HTMLTableRowElement>(null)\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const headerOffsetRef = React.useRef(0)\n\n  const [headerOffset, setHeaderOffset] = React.useState<number>(0)\n  const [headerHide, setHeaderHide] = React.useState<boolean>(false)\n\n  const tableHeadElement = tableHeaderRowRef?.current?.closest('thead')\n\n  if (tableHeadElement && tablePosition?.offsetTop === null) {\n    const tableHeadHeight = tableHeadElement.getBoundingClientRect().height\n    const intersectionOffset = stickyOffset + tableHeadHeight\n    if (tablePosition) {\n      setTablePosition({ ...tablePosition, offsetTop: intersectionOffset || 0 })\n    }\n  }\n\n  React.useEffect(() => {\n    if (!isSticky) return\n\n    if (!tableRef.current && tableHeaderRowRef.current) {\n      tableRef.current = tableHeaderRowRef.current.closest(\n        'table'\n      ) as HTMLTableElement | null\n    }\n\n    if (tableRef.current) {\n      if (tablePosition?.top !== null && tablePosition?.bottom !== null) {\n        const newOffset =\n          tablePosition?.top != null &&\n          tablePosition?.bottom != null &&\n          tablePosition.top < stickyOffset &&\n          tablePosition.bottom > 100\n            ? -tablePosition.top + stickyOffset\n            : 0\n\n        if (newOffset !== 0) setHeaderHide(true)\n\n        headerOffsetRef.current = newOffset\n        setHeaderOffset(newOffset)\n\n        requestAnimationFrame(() => {\n          setHeaderHide(false)\n        })\n      }\n    }\n  }, [isSticky, stickyOffset, tablePosition])\n\n  return (\n    <Table.Header\n      theme={theme}\n      style={{\n        ...style,\n        '--header-offset': `${headerOffset}px`\n      }}\n      {...props}\n      className={clsx(\n        'relative',\n        'z-3',\n        '[&_tr:not(:last-child)>th]:border-b-none',\n        '[&_tr:not(:first-child)>th]:rounded-none!',\n        className\n      )}\n    >\n      {getHeaderGroups().map((headerGroup) => {\n        return (\n          <Table.Row\n            key={headerGroup.id}\n            ref={tableHeaderRowRef}\n            className={\n              isSticky && headerOffset !== 0\n                ? clsx(\n                    'translate-y-(--header-offset)',\n                    headerHide\n                      ? 'delay-0ms opacity-0 transition-none'\n                      : 'delay-150ms opacity-100 transition-opacity duration-100',\n                    '[&_th]:last:before:absolute',\n                    '[&_th]:last:before:bottom-0',\n                    '[&_th]:last:before:pointer-events-none',\n                    '[&_th]:last:before:right-0',\n                    '[&_th]:last:before:shadow-sm',\n                    '[&_th]:last:before:top-0',\n                    '[&_th]:last:before:w-full'\n                  )\n                : undefined\n            }\n          >\n            {getCanSomeRowsExpand() && <Table.HeaderCell className=\"w-10\" />}\n            {enableRowSelection && (\n              <Table.HeaderCell className=\"w-10\">\n                <DataTableSelectAllRowsCheckbox />\n              </Table.HeaderCell>\n            )}\n            {headerGroup.headers.map((header, index) => (\n              <DataTableHeaderCell\n                header={header}\n                key={header.id}\n                includeTotal={index === 0 && showTotalInFirstColumn}\n                totalSuffix={totalSuffix}\n              />\n            ))}\n          </Table.Row>\n        )\n      })}\n    </Table.Header>\n  )\n}\n"],"mappings":";;;;;;;AAmBA,IAAa,iBAAiB,EAC5B,WAAW,MACX,QAAQ,SACR,WAAW,OACX,eAAe,GACf,wBACA,aACA,OACA,WACA,GAAG,YACyC;CAC5C,MAAM,EACJ,iBACA,eACA,oBACA,sBACA,eACA,qBACE,cAAc;AAElB,SAAM,gBAAgB;AACpB,gBAAc,SAAS;IACtB,CAAC,UAAU,cAAc,CAAC;CAE7B,MAAM,oBAAoB,QAAM,OAA4B,KAAK;CACjE,MAAM,WAAW,QAAM,OAAgC,KAAK;CAC5D,MAAM,kBAAkB,QAAM,OAAO,EAAE;CAEvC,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAiB,EAAE;CACjE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAkB,MAAM;CAElE,MAAM,mBAAmB,mBAAmB,SAAS,QAAQ,QAAQ;AAErE,KAAI,oBAAoB,eAAe,cAAc,MAAM;EAEzD,MAAM,qBAAqB,eADH,iBAAiB,uBAAuB,CAAC;AAEjE,MAAI,cACF,kBAAiB;GAAE,GAAG;GAAe,WAAW,sBAAsB;GAAG,CAAC;;AAI9E,SAAM,gBAAgB;AACpB,MAAI,CAAC,SAAU;AAEf,MAAI,CAAC,SAAS,WAAW,kBAAkB,QACzC,UAAS,UAAU,kBAAkB,QAAQ,QAC3C,QACD;AAGH,MAAI,SAAS;OACP,eAAe,QAAQ,QAAQ,eAAe,WAAW,MAAM;IACjE,MAAM,YACJ,eAAe,OAAO,QACtB,eAAe,UAAU,QACzB,cAAc,MAAM,gBACpB,cAAc,SAAS,MACnB,CAAC,cAAc,MAAM,eACrB;AAEN,QAAI,cAAc,EAAG,eAAc,KAAK;AAExC,oBAAgB,UAAU;AAC1B,oBAAgB,UAAU;AAE1B,gCAA4B;AAC1B,mBAAc,MAAM;MACpB;;;IAGL;EAAC;EAAU;EAAc;EAAc,CAAC;AAE3C,QACE,wBAAA,cAAC,MAAM,QAAP;EACS;EACP,OAAO;GACL,GAAG;GACH,mBAAmB,GAAG,aAAa;GACpC;EACD,GAAI;EACJ,WAAW,KACT,YACA,OACA,4CACA,6CACA,UACD;EA0CY,EAxCZ,iBAAiB,CAAC,KAAK,gBAAgB;AACtC,SACE,wBAAA,cAAC,MAAM,KAAP;GACE,KAAK,YAAY;GACjB,KAAK;GACL,WACE,YAAY,iBAAiB,IACzB,KACE,iCACA,aACI,wCACA,2DACJ,+BACA,+BACA,0CACA,8BACA,gCACA,4BACA,4BACD,GACD,KAAA;GAiBI,EAdT,sBAAsB,IAAI,wBAAA,cAAC,MAAM,YAAP,EAAkB,WAAU,QAAS,CAAA,EAC/D,sBACC,wBAAA,cAAC,MAAM,YAAP,EAAkB,WAAU,QAET,EADjB,wBAAA,cAAC,gCAAA,KAAiC,CACjB,EAEpB,YAAY,QAAQ,KAAK,QAAQ,UAChC,wBAAA,cAAC,qBAAD;GACU;GACR,KAAK,OAAO;GACZ,cAAc,UAAU,KAAK;GAChB;GACb,CAAA,CACF,CACQ;GAEd,CACW"}

package/dist/components/data-table/DataTableHeaderCell.js

@@ -1,20 +1,21 @@
-import { styled as e } from "../../styled.js";
-import { Icon as t } from "../icon/Icon.js";
-import { Text as n } from "../text/Text.js";
-import { Table as r } from "../table/Table.js";
-import { useDataTable as i } from "./DataTableContext.js";
-import a from "clsx";
-import * as o from "react";
-import { ArrowDown as s, ArrowUp as c } from "@atom-learning/icons";
-import { flexRender as l } from "@tanstack/react-table";
-import { useHover as u } from "react-aria";
+import { styled } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import { Text } from "../text/Text.js";
+import { Table } from "../table/Table.js";
+import { useDataTable } from "./DataTableContext.js";
+import clsx from "clsx";
+import * as React$1 from "react";
+import { ArrowDown, ArrowUp } from "@atom-learning/icons";
+import { flexRender } from "@tanstack/react-table";
+import { useHover } from "react-aria";
 //#region src/components/data-table/DataTableHeaderCell.tsx
-var d = e(n, { base: [
+var StyledCount = styled(Text, { base: [
 	"text-grey-600",
 	"whitespace-nowrap",
 	"hidden",
 	"min-[800px]:block"
-] }), f = e(r.HeaderCell, {
+] });
+var StyledTableHeaderCell = styled(Table.HeaderCell, {
 	base: [],
 	variants: { isSortable: { true: [
 		"*:relative",
@@ -29,32 +30,44 @@ var d = e(n, { base: [
 		"hover:before:opacity-50",
 		"relative"
 	] } }
-}), p = {
-	asc: c,
-	desc: s
-}, m = ({ direction: e }) => /* @__PURE__ */ o.createElement(t, {
-	is: p[e],
+});
+var sortIcons = {
+	asc: ArrowUp,
+	desc: ArrowDown
+};
+var SortIcon = ({ direction }) => /* @__PURE__ */ React$1.createElement(Icon, {
+	is: sortIcons[direction],
 	size: "sm",
 	className: "stroke-primary-900 absolute left-1"
-}), h = ({ header: e, includeTotal: t = !1, totalSuffix: n = "items", children: r, className: s, ...c }) => {
-	let p = e.column.getIsSorted(), { isSortable: h, getRowModel: g } = i(), _ = e.column.getCanSort(), v = g()?.rows?.length, { hoverProps: y, isHovered: b } = u({}), x = (e, t) => {
-		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), t(e));
-	}, S = e.column.getToggleSortingHandler();
-	return /* @__PURE__ */ o.createElement(f, {
-		isSortable: h && _,
-		colSpan: e.colSpan,
-		onClick: h && _ && S ? S : void 0,
-		onKeyDown: (e) => h && _ && S && x(e, S),
-		tabIndex: h && _ ? 0 : -1,
-		...y,
-		className: s,
-		...c
-	}, /* @__PURE__ */ o.createElement("div", { className: a("flex", "gap-1", "items-center", e.colSpan > 1 ? "justify-center" : "justify-start") }, l(e.column.columnDef.header, e.getContext()), p && h && /* @__PURE__ */ o.createElement("div", { className: a("flex", "items-center", "relative", "size-6", "ml-2", b ? "bg-primary-200" : "bg-primary-100", "rounded-sm") }, /* @__PURE__ */ o.createElement(m, { direction: p })), t && /* @__PURE__ */ o.createElement(d, {
+});
+var DataTableHeaderCell = ({ header, includeTotal = false, totalSuffix = "items", children, className, ...props }) => {
+	const sortDirection = header.column.getIsSorted();
+	const { isSortable: isSortableTable, getRowModel } = useDataTable();
+	const isDataColumn = header.column.getCanSort();
+	const totalRows = getRowModel()?.rows?.length;
+	const { hoverProps, isHovered } = useHover({});
+	const handleKeyDown = (event, callback) => {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			callback(event);
+		}
+	};
+	const headerSortingHandler = header.column.getToggleSortingHandler();
+	return /* @__PURE__ */ React$1.createElement(StyledTableHeaderCell, {
+		isSortable: isSortableTable && isDataColumn,
+		colSpan: header.colSpan,
+		onClick: isSortableTable && isDataColumn && headerSortingHandler ? headerSortingHandler : void 0,
+		onKeyDown: (event) => isSortableTable && isDataColumn && headerSortingHandler && handleKeyDown(event, headerSortingHandler),
+		tabIndex: isSortableTable && isDataColumn ? 0 : -1,
+		...hoverProps,
+		className,
+		...props
+	}, /* @__PURE__ */ React$1.createElement("div", { className: clsx("flex", "gap-1", "items-center", header.colSpan > 1 ? "justify-center" : "justify-start") }, flexRender(header.column.columnDef.header, header.getContext()), sortDirection && isSortableTable && /* @__PURE__ */ React$1.createElement("div", { className: clsx("flex", "items-center", "relative", "size-6", "ml-2", isHovered ? "bg-primary-200" : "bg-primary-100", "rounded-sm") }, /* @__PURE__ */ React$1.createElement(SortIcon, { direction: sortDirection })), includeTotal && /* @__PURE__ */ React$1.createElement(StyledCount, {
 		size: "sm",
 		weight: "normal"
-	}, "(", v, " ", n, ")")));
+	}, "(", totalRows, " ", totalSuffix, ")")));
 };
 //#endregion
-export { h as DataTableHeaderCell };
+export { DataTableHeaderCell };
 
 //# sourceMappingURL=DataTableHeaderCell.js.map

package/dist/components/data-table/DataTableHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableHeaderCell.js","names":[],"sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp } from '@atom-learning/icons'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport clsx from 'clsx'\nimport * as React from 'react'\nimport { useHover } from 'react-aria'\n\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {\n  header: Header<Record<string, unknown>, unknown>\n  includeTotal?: boolean\n  totalSuffix?: string\n}\n\nconst StyledCount = styled(Text, {\n  base: ['text-grey-600', 'whitespace-nowrap', 'hidden', 'min-[800px]:block']\n})\n\nconst StyledTableHeaderCell = styled(Table.HeaderCell, {\n  base: [],\n  variants: {\n    isSortable: {\n      true: [\n        '*:relative',\n        'before:absolute',\n        'before:bg-primary-100',\n        'before:duration-200',\n        'before:ease-in',\n        'before:inset-0',\n        'before:opacity-0',\n        'before:transition-opacity',\n        'cursor-pointer',\n        'hover:before:opacity-50',\n        'relative'\n      ]\n    }\n  }\n})\n\nconst sortIcons = {\n  asc: ArrowUp,\n  desc: ArrowDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' | 'desc' }) => (\n  <Icon\n    is={sortIcons[direction]}\n    size=\"sm\"\n    className=\"stroke-primary-900 absolute left-1\"\n  />\n)\n\nexport const DataTableHeaderCell = ({\n  header,\n  includeTotal = false,\n  totalSuffix = 'items',\n  children,\n  className,\n  ...props\n}: DataTableHeaderProps) => {\n  const sortDirection = header.column.getIsSorted()\n  const { isSortable: isSortableTable, getRowModel } = useDataTable()\n  // false for display columns, e.g. \"Actions\"\n  const isDataColumn = header.column.getCanSort()\n\n  const totalRows = getRowModel()?.rows?.length\n\n  const { hoverProps, isHovered } = useHover({})\n\n  const handleKeyDown = (\n    event: React.KeyboardEvent<HTMLTableCellElement>,\n    callback: (event: unknown) => void | undefined\n  ) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      callback(event as unknown)\n    }\n  }\n\n  const headerSortingHandler = header.column.getToggleSortingHandler()\n\n  return (\n    <StyledTableHeaderCell\n      isSortable={isSortableTable && isDataColumn}\n      colSpan={header.colSpan}\n      onClick={\n        isSortableTable && isDataColumn && headerSortingHandler\n          ? headerSortingHandler\n          : undefined\n      }\n      onKeyDown={(event) =>\n        isSortableTable &&\n        isDataColumn &&\n        headerSortingHandler &&\n        handleKeyDown(event, headerSortingHandler)\n      }\n      tabIndex={isSortableTable && isDataColumn ? 0 : -1}\n      {...hoverProps}\n      className={className}\n      {...props}\n    >\n      <div\n        className={clsx(\n          'flex',\n          'gap-1',\n          'items-center',\n          header.colSpan > 1 ? 'justify-center' : 'justify-start'\n        )}\n      >\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {sortDirection && isSortableTable && (\n          <div\n            className={clsx(\n              'flex',\n              'items-center',\n              'relative',\n              'size-6',\n              'ml-2',\n              isHovered ? 'bg-primary-200' : 'bg-primary-100',\n              'rounded-sm'\n            )}\n          >\n            <SortIcon direction={sortDirection} />\n          </div>\n        )}\n        {includeTotal && (\n          <StyledCount size=\"sm\" weight=\"normal\">\n            ({totalRows} {totalSuffix})\n          </StyledCount>\n        )}\n      </div>\n    </StyledTableHeaderCell>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAoBA,IAAM,IAAc,EAAO,GAAM,EAC/B,MAAM;CAAC;CAAiB;CAAqB;CAAU;CAAoB,EAC5E,CAAC,EAEI,IAAwB,EAAO,EAAM,YAAY;CACrD,MAAM,EAAE;CACR,UAAU,EACR,YAAY,EACV,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,EACF,EACF;CACF,CAAC,EAEI,IAAY;CAChB,KAAK;CACL,MAAM;CACP,EAEK,KAAY,EAAE,mBAClB,kBAAA,cAAC,GAAD;CACE,IAAI,EAAU;CACd,MAAK;CACL,WAAU;CACV,CAAA,EAGS,KAAuB,EAClC,WACA,kBAAe,IACf,iBAAc,SACd,aACA,cACA,GAAG,QACuB;CAC1B,IAAM,IAAgB,EAAO,OAAO,aAAa,EAC3C,EAAE,YAAY,GAAiB,mBAAgB,GAAc,EAE7D,IAAe,EAAO,OAAO,YAAY,EAEzC,IAAY,GAAa,EAAE,MAAM,QAEjC,EAAE,eAAY,iBAAc,EAAS,EAAE,CAAC,EAExC,KACJ,GACA,MACG;AACH,GAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,gBAAgB,EACtB,EAAS,EAAiB;IAIxB,IAAuB,EAAO,OAAO,yBAAyB;AAEpE,QACE,kBAAA,cAAC,GAAD;EACE,YAAY,KAAmB;EAC/B,SAAS,EAAO;EAChB,SACE,KAAmB,KAAgB,IAC/B,IACA,KAAA;EAEN,YAAY,MACV,KACA,KACA,KACA,EAAc,GAAO,EAAqB;EAE5C,UAAU,KAAmB,IAAe,IAAI;EAChD,GAAI;EACO;EACX,GAAI;EAgCkB,EA9BtB,kBAAA,cAAC,OAAD,EACE,WAAW,EACT,QACA,SACA,gBACA,EAAO,UAAU,IAAI,mBAAmB,gBACzC,EAuBG,EArBH,EAAW,EAAO,OAAO,UAAU,QAAQ,EAAO,YAAY,CAAC,EAC/D,KAAiB,KAChB,kBAAA,cAAC,OAAD,EACE,WAAW,EACT,QACA,gBACA,YACA,UACA,QACA,IAAY,mBAAmB,kBAC/B,aACD,EAGG,EADJ,kBAAA,cAAC,GAAD,EAAU,WAAW,GAAiB,CAAA,CAClC,EAEP,KACC,kBAAA,cAAC,GAAD;EAAa,MAAK;EAAK,QAAO;EAEhB,EAFyB,KACnC,GAAU,KAAE,GAAY,IACd,CAEZ,CACgB"}
+{"version":3,"file":"DataTableHeaderCell.js","names":[],"sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp } from '@atom-learning/icons'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport clsx from 'clsx'\nimport * as React from 'react'\nimport { useHover } from 'react-aria'\n\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {\n  header: Header<Record<string, unknown>, unknown>\n  includeTotal?: boolean\n  totalSuffix?: string\n}\n\nconst StyledCount = styled(Text, {\n  base: ['text-grey-600', 'whitespace-nowrap', 'hidden', 'min-[800px]:block']\n})\n\nconst StyledTableHeaderCell = styled(Table.HeaderCell, {\n  base: [],\n  variants: {\n    isSortable: {\n      true: [\n        '*:relative',\n        'before:absolute',\n        'before:bg-primary-100',\n        'before:duration-200',\n        'before:ease-in',\n        'before:inset-0',\n        'before:opacity-0',\n        'before:transition-opacity',\n        'cursor-pointer',\n        'hover:before:opacity-50',\n        'relative'\n      ]\n    }\n  }\n})\n\nconst sortIcons = {\n  asc: ArrowUp,\n  desc: ArrowDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' | 'desc' }) => (\n  <Icon\n    is={sortIcons[direction]}\n    size=\"sm\"\n    className=\"stroke-primary-900 absolute left-1\"\n  />\n)\n\nexport const DataTableHeaderCell = ({\n  header,\n  includeTotal = false,\n  totalSuffix = 'items',\n  children,\n  className,\n  ...props\n}: DataTableHeaderProps) => {\n  const sortDirection = header.column.getIsSorted()\n  const { isSortable: isSortableTable, getRowModel } = useDataTable()\n  // false for display columns, e.g. \"Actions\"\n  const isDataColumn = header.column.getCanSort()\n\n  const totalRows = getRowModel()?.rows?.length\n\n  const { hoverProps, isHovered } = useHover({})\n\n  const handleKeyDown = (\n    event: React.KeyboardEvent<HTMLTableCellElement>,\n    callback: (event: unknown) => void | undefined\n  ) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      callback(event as unknown)\n    }\n  }\n\n  const headerSortingHandler = header.column.getToggleSortingHandler()\n\n  return (\n    <StyledTableHeaderCell\n      isSortable={isSortableTable && isDataColumn}\n      colSpan={header.colSpan}\n      onClick={\n        isSortableTable && isDataColumn && headerSortingHandler\n          ? headerSortingHandler\n          : undefined\n      }\n      onKeyDown={(event) =>\n        isSortableTable &&\n        isDataColumn &&\n        headerSortingHandler &&\n        handleKeyDown(event, headerSortingHandler)\n      }\n      tabIndex={isSortableTable && isDataColumn ? 0 : -1}\n      {...hoverProps}\n      className={className}\n      {...props}\n    >\n      <div\n        className={clsx(\n          'flex',\n          'gap-1',\n          'items-center',\n          header.colSpan > 1 ? 'justify-center' : 'justify-start'\n        )}\n      >\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {sortDirection && isSortableTable && (\n          <div\n            className={clsx(\n              'flex',\n              'items-center',\n              'relative',\n              'size-6',\n              'ml-2',\n              isHovered ? 'bg-primary-200' : 'bg-primary-100',\n              'rounded-sm'\n            )}\n          >\n            <SortIcon direction={sortDirection} />\n          </div>\n        )}\n        {includeTotal && (\n          <StyledCount size=\"sm\" weight=\"normal\">\n            ({totalRows} {totalSuffix})\n          </StyledCount>\n        )}\n      </div>\n    </StyledTableHeaderCell>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAoBA,IAAM,cAAc,OAAO,MAAM,EAC/B,MAAM;CAAC;CAAiB;CAAqB;CAAU;CAAoB,EAC5E,CAAC;AAEF,IAAM,wBAAwB,OAAO,MAAM,YAAY;CACrD,MAAM,EAAE;CACR,UAAU,EACR,YAAY,EACV,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,EACF,EACF;CACF,CAAC;AAEF,IAAM,YAAY;CAChB,KAAK;CACL,MAAM;CACP;AAED,IAAM,YAAY,EAAE,gBAClB,wBAAA,cAAC,MAAD;CACE,IAAI,UAAU;CACd,MAAK;CACL,WAAU;CACV,CAAA;AAGJ,IAAa,uBAAuB,EAClC,QACA,eAAe,OACf,cAAc,SACd,UACA,WACA,GAAG,YACuB;CAC1B,MAAM,gBAAgB,OAAO,OAAO,aAAa;CACjD,MAAM,EAAE,YAAY,iBAAiB,gBAAgB,cAAc;CAEnE,MAAM,eAAe,OAAO,OAAO,YAAY;CAE/C,MAAM,YAAY,aAAa,EAAE,MAAM;CAEvC,MAAM,EAAE,YAAY,cAAc,SAAS,EAAE,CAAC;CAE9C,MAAM,iBACJ,OACA,aACG;AACH,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,SAAM,gBAAgB;AACtB,YAAS,MAAiB;;;CAI9B,MAAM,uBAAuB,OAAO,OAAO,yBAAyB;AAEpE,QACE,wBAAA,cAAC,uBAAD;EACE,YAAY,mBAAmB;EAC/B,SAAS,OAAO;EAChB,SACE,mBAAmB,gBAAgB,uBAC/B,uBACA,KAAA;EAEN,YAAY,UACV,mBACA,gBACA,wBACA,cAAc,OAAO,qBAAqB;EAE5C,UAAU,mBAAmB,eAAe,IAAI;EAChD,GAAI;EACO;EACX,GAAI;EAgCkB,EA9BtB,wBAAA,cAAC,OAAD,EACE,WAAW,KACT,QACA,SACA,gBACA,OAAO,UAAU,IAAI,mBAAmB,gBACzC,EAuBG,EArBH,WAAW,OAAO,OAAO,UAAU,QAAQ,OAAO,YAAY,CAAC,EAC/D,iBAAiB,mBAChB,wBAAA,cAAC,OAAD,EACE,WAAW,KACT,QACA,gBACA,YACA,UACA,QACA,YAAY,mBAAmB,kBAC/B,aACD,EAGG,EADJ,wBAAA,cAAC,UAAD,EAAU,WAAW,eAAiB,CAAA,CAClC,EAEP,gBACC,wBAAA,cAAC,aAAD;EAAa,MAAK;EAAK,QAAO;EAEhB,EAFyB,KACnC,WAAU,KAAE,aAAY,IACd,CAEZ,CACgB"}

package/dist/components/data-table/DataTableLoading.js

@@ -1,21 +1,23 @@
-import { styled as e } from "../../styled.js";
-import { Loader as t } from "../loader/Loader.js";
-import { AsyncDataState as n } from "./DataTable.types.js";
-import { useDataTable as r } from "./DataTableContext.js";
-import * as i from "react";
+import { styled } from "../../styled.js";
+import { Loader } from "../loader/Loader.js";
+import { AsyncDataState } from "./DataTable.types.js";
+import { useDataTable } from "./DataTableContext.js";
+import * as React$1 from "react";
 //#region src/components/data-table/DataTableLoading.tsx
-var a = e(t, { base: [
+var PendingState = styled(Loader, { base: [
 	"absolute",
 	"left-1/2",
 	"top-1/2",
 	"-translate-x-1/2",
 	"-translate-y-1/2",
 	"z-1"
-] }), o = (e) => {
-	let { asyncDataState: t } = r();
-	return t === n.PENDING ? /* @__PURE__ */ i.createElement(a, e) : null;
+] });
+var DataTableLoading = (props) => {
+	const { asyncDataState } = useDataTable();
+	if (asyncDataState !== AsyncDataState.PENDING) return null;
+	return /* @__PURE__ */ React$1.createElement(PendingState, props);
 };
 //#endregion
-export { o as DataTableLoading };
+export { DataTableLoading };
 
 //# sourceMappingURL=DataTableLoading.js.map

package/dist/components/data-table/DataTableLoading.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableLoading.js","names":[],"sources":["../../../src/components/data-table/DataTableLoading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Loader } from '../loader/Loader'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\nconst PendingState = styled(Loader, {\n  base: [\n    'absolute',\n    'left-1/2',\n    'top-1/2',\n    '-translate-x-1/2',\n    '-translate-y-1/2',\n    'z-1'\n  ]\n})\n\nexport const DataTableLoading = (\n  props: React.ComponentProps<typeof PendingState>\n) => {\n  const { asyncDataState } = useDataTable()\n\n  if (asyncDataState !== AsyncDataState.PENDING) return null\n\n  return <PendingState {...props} />\n}\n"],"mappings":";;;;;;AAQA,IAAM,IAAe,EAAO,GAAQ,EAClC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAEW,KACX,MACG;CACH,IAAM,EAAE,sBAAmB,GAAc;AAIzC,QAFI,MAAmB,EAAe,UAE/B,kBAAA,cAAC,GAAiB,EAAS,GAFoB"}
+{"version":3,"file":"DataTableLoading.js","names":[],"sources":["../../../src/components/data-table/DataTableLoading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Loader } from '../loader/Loader'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\nconst PendingState = styled(Loader, {\n  base: [\n    'absolute',\n    'left-1/2',\n    'top-1/2',\n    '-translate-x-1/2',\n    '-translate-y-1/2',\n    'z-1'\n  ]\n})\n\nexport const DataTableLoading = (\n  props: React.ComponentProps<typeof PendingState>\n) => {\n  const { asyncDataState } = useDataTable()\n\n  if (asyncDataState !== AsyncDataState.PENDING) return null\n\n  return <PendingState {...props} />\n}\n"],"mappings":";;;;;;AAQA,IAAM,eAAe,OAAO,QAAQ,EAClC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAa,oBACX,UACG;CACH,MAAM,EAAE,mBAAmB,cAAc;AAEzC,KAAI,mBAAmB,eAAe,QAAS,QAAO;AAEtD,QAAO,wBAAA,cAAC,cAAiB,MAAS"}

package/dist/components/data-table/DataTableMetaData.js

@@ -1,23 +1,35 @@
-import { Text as e } from "../text/Text.js";
-import { useDataTable as t } from "./DataTableContext.js";
-import * as n from "react";
+import { Text } from "../text/Text.js";
+import { useDataTable } from "./DataTableContext.js";
+import * as React$1 from "react";
 //#region src/components/data-table/DataTableMetaData.tsx
-var r = {
+var defaultCopy = {
 	sorted_by: "Sorted by",
 	ascending: "ascending",
 	descending: "descending",
 	separator: "-"
-}, i = ({ copy: i, ...a }) => {
-	let { getState: o, columns: s, getRowModel: c, rowSelection: l } = t(), { sorting: u } = o(), d = u.length > 0, f = c()?.rows?.length, p = Object.keys(l || {}).length, m = {
-		...r,
-		...i
-	}, h = (e) => s.find((t) => t.id === e)?.header || e, g = (e) => `${m.separator} ${m.sorted_by} ${h(e[0].id)} ${e[0].desc ? m.descending : m.ascending}`;
-	return /* @__PURE__ */ n.createElement(e, {
+};
+var DataTableMetaData = ({ copy, ...rest }) => {
+	const { getState, columns, getRowModel, rowSelection } = useDataTable();
+	const { sorting } = getState();
+	const isSorted = sorting.length > 0;
+	const totalRows = getRowModel()?.rows?.length;
+	const selectedRows = Object.keys(rowSelection || {}).length;
+	const copyMerged = {
+		...defaultCopy,
+		...copy
+	};
+	const getColumnDisplayName = (id) => {
+		return columns.find((col) => col.id === id)?.header || id;
+	};
+	const getSortingString = (sorting) => {
+		return `${copyMerged.separator} ${copyMerged.sorted_by} ${getColumnDisplayName(sorting[0].id)} ${sorting[0].desc ? copyMerged.descending : copyMerged.ascending}`;
+	};
+	return /* @__PURE__ */ React$1.createElement(Text, {
 		weight: "bold",
-		...a
-	}, `${p || f} ${(p || f) === 1 ? "item" : "items"} ${p ? "selected" : ""} ${d ? g(u) : ""}`);
+		...rest
+	}, `${selectedRows || totalRows} ${(selectedRows || totalRows) === 1 ? "item" : "items"} ${selectedRows ? "selected" : ""} ${isSorted ? getSortingString(sorting) : ""}`);
 };
 //#endregion
-export { i as DataTableMetaData };
+export { DataTableMetaData };
 
 //# sourceMappingURL=DataTableMetaData.js.map

package/dist/components/data-table/DataTableMetaData.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableMetaData.js","names":[],"sources":["../../../src/components/data-table/DataTableMetaData.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTableContext'\n\nconst defaultCopy = {\n  sorted_by: 'Sorted by',\n  ascending: 'ascending',\n  descending: 'descending',\n  separator: '-'\n}\n\nexport const DataTableMetaData = ({\n  copy,\n  ...rest\n}: React.ComponentProps<typeof Text> & {\n  copy?: {\n    sorted_by?: string\n    ascending?: string\n    descending?: string\n    separator?: string\n  }\n  sortLabel?: string\n}) => {\n  const { getState, columns, getRowModel, rowSelection } = useDataTable()\n  const { sorting } = getState()\n  const isSorted = sorting.length > 0\n\n  const totalRows = getRowModel()?.rows?.length\n\n  const selectedRows = Object.keys(rowSelection || {}).length\n\n  const copyMerged = { ...defaultCopy, ...copy }\n\n  const getColumnDisplayName = (id: string) => {\n    const sortedColumn = columns.find((col) => col.id === id)\n    return sortedColumn?.header || id\n  }\n\n  const getSortingString = (sorting) => {\n    return `${copyMerged.separator} ${\n      copyMerged.sorted_by\n    } ${getColumnDisplayName(sorting[0].id)} ${\n      sorting[0].desc ? copyMerged.descending : copyMerged.ascending\n    }`\n  }\n\n  return (\n    <Text weight=\"bold\" {...rest}>{`${selectedRows || totalRows} ${\n      (selectedRows || totalRows) === 1 ? 'item' : 'items'\n    } ${selectedRows ? 'selected' : ''} ${isSorted ? getSortingString(sorting) : ''}`}</Text>\n  )\n}\n"],"mappings":";;;;AAKA,IAAM,IAAc;CAClB,WAAW;CACX,WAAW;CACX,YAAY;CACZ,WAAW;CACZ,EAEY,KAAqB,EAChC,SACA,GAAG,QASC;CACJ,IAAM,EAAE,aAAU,YAAS,gBAAa,oBAAiB,GAAc,EACjE,EAAE,eAAY,GAAU,EACxB,IAAW,EAAQ,SAAS,GAE5B,IAAY,GAAa,EAAE,MAAM,QAEjC,IAAe,OAAO,KAAK,KAAgB,EAAE,CAAC,CAAC,QAE/C,IAAa;EAAE,GAAG;EAAa,GAAG;EAAM,EAExC,KAAwB,MACP,EAAQ,MAAM,MAAQ,EAAI,OAAO,EAAG,EACpC,UAAU,GAG3B,KAAoB,MACjB,GAAG,EAAW,UAAU,GAC7B,EAAW,UACZ,GAAG,EAAqB,EAAQ,GAAG,GAAG,CAAC,GACtC,EAAQ,GAAG,OAAO,EAAW,aAAa,EAAW;AAIzD,QACE,kBAAA,cAAC,GAAD;EAAM,QAAO;EAAO,GAAI;EAEiE,EAF1D,GAAG,KAAgB,EAAU,IACzD,KAAgB,OAAe,IAAI,SAAS,QAC9C,GAAG,IAAe,aAAa,GAAG,GAAG,IAAW,EAAiB,EAAQ,GAAG,KAAY"}
+{"version":3,"file":"DataTableMetaData.js","names":[],"sources":["../../../src/components/data-table/DataTableMetaData.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTableContext'\n\nconst defaultCopy = {\n  sorted_by: 'Sorted by',\n  ascending: 'ascending',\n  descending: 'descending',\n  separator: '-'\n}\n\nexport const DataTableMetaData = ({\n  copy,\n  ...rest\n}: React.ComponentProps<typeof Text> & {\n  copy?: {\n    sorted_by?: string\n    ascending?: string\n    descending?: string\n    separator?: string\n  }\n  sortLabel?: string\n}) => {\n  const { getState, columns, getRowModel, rowSelection } = useDataTable()\n  const { sorting } = getState()\n  const isSorted = sorting.length > 0\n\n  const totalRows = getRowModel()?.rows?.length\n\n  const selectedRows = Object.keys(rowSelection || {}).length\n\n  const copyMerged = { ...defaultCopy, ...copy }\n\n  const getColumnDisplayName = (id: string) => {\n    const sortedColumn = columns.find((col) => col.id === id)\n    return sortedColumn?.header || id\n  }\n\n  const getSortingString = (sorting) => {\n    return `${copyMerged.separator} ${\n      copyMerged.sorted_by\n    } ${getColumnDisplayName(sorting[0].id)} ${\n      sorting[0].desc ? copyMerged.descending : copyMerged.ascending\n    }`\n  }\n\n  return (\n    <Text weight=\"bold\" {...rest}>{`${selectedRows || totalRows} ${\n      (selectedRows || totalRows) === 1 ? 'item' : 'items'\n    } ${selectedRows ? 'selected' : ''} ${isSorted ? getSortingString(sorting) : ''}`}</Text>\n  )\n}\n"],"mappings":";;;;AAKA,IAAM,cAAc;CAClB,WAAW;CACX,WAAW;CACX,YAAY;CACZ,WAAW;CACZ;AAED,IAAa,qBAAqB,EAChC,MACA,GAAG,WASC;CACJ,MAAM,EAAE,UAAU,SAAS,aAAa,iBAAiB,cAAc;CACvE,MAAM,EAAE,YAAY,UAAU;CAC9B,MAAM,WAAW,QAAQ,SAAS;CAElC,MAAM,YAAY,aAAa,EAAE,MAAM;CAEvC,MAAM,eAAe,OAAO,KAAK,gBAAgB,EAAE,CAAC,CAAC;CAErD,MAAM,aAAa;EAAE,GAAG;EAAa,GAAG;EAAM;CAE9C,MAAM,wBAAwB,OAAe;AAE3C,SADqB,QAAQ,MAAM,QAAQ,IAAI,OAAO,GAAG,EACpC,UAAU;;CAGjC,MAAM,oBAAoB,YAAY;AACpC,SAAO,GAAG,WAAW,UAAU,GAC7B,WAAW,UACZ,GAAG,qBAAqB,QAAQ,GAAG,GAAG,CAAC,GACtC,QAAQ,GAAG,OAAO,WAAW,aAAa,WAAW;;AAIzD,QACE,wBAAA,cAAC,MAAD;EAAM,QAAO;EAAO,GAAI;EAEiE,EAF1D,GAAG,gBAAgB,UAAU,IACzD,gBAAgB,eAAe,IAAI,SAAS,QAC9C,GAAG,eAAe,aAAa,GAAG,GAAG,WAAW,iBAAiB,QAAQ,GAAG,KAAY"}