@atom-learning/components 6.6.0-beta.1 → 6.6.0-beta.2

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"}

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

@@ -1,14 +1,14 @@
-import { styled as e } from "../../styled.js";
-import { Icon as t } from "../icon/Icon.js";
-import { Table as n } from "../table/Table.js";
-import { useDataTable as r } from "./DataTableContext.js";
-import { DataTableDataCell as i } from "./DataTableDataCell.js";
-import { DataTableRowSelectionCheckbox as a } from "./DataTableRowSelectionCheckbox.js";
-import o from "clsx";
-import * as s from "react";
-import { ChevronDown as c, ChevronRight as l } from "@atom-learning/icons";
+import { styled } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import { Table } from "../table/Table.js";
+import { useDataTable } from "./DataTableContext.js";
+import { DataTableDataCell } from "./DataTableDataCell.js";
+import { DataTableRowSelectionCheckbox } from "./DataTableRowSelectionCheckbox.js";
+import clsx from "clsx";
+import * as React$1 from "react";
+import { ChevronDown, ChevronRight } from "@atom-learning/icons";
 //#region src/components/data-table/DataTableRow.tsx
-var u = e(n.Row, {
+var StyledRow = styled(Table.Row, {
 	base: ["bg-[initial]", "relative"],
 	variants: {
 		isSelected: { true: ["odd:bg-primary-100"] },
@@ -29,49 +29,70 @@ var u = e(n.Row, {
 			"focus:[&_td]:bg-transparent"
 		] }
 	}
-}), d = (e) => e ? !!(e.closest("button, a, input, select, textarea") || e.getAttribute("role") === "button") : !1, f = ({ row: e, rowAction: f }) => {
-	let { enableRowSelection: p, disabledRows: m, getCanSomeRowsExpand: h } = r(), g = !!m?.[e.id], _ = e.getToggleExpandedHandler(), v = e.getToggleSelectedHandler(), y = () => e.getIsSomeSelected() ? "indeterminate" : e.getIsSelected(), b = (e, t) => {
-		f && (!t.target.closest("tr") || d(t.target) || f(e.original, t));
+});
+var isElementInteractive = (element) => {
+	if (!element) return false;
+	if (element.closest("button, a, input, select, textarea")) return true;
+	if (element.getAttribute("role") === "button") return true;
+	return false;
+};
+var DataTableRow = ({ row, rowAction }) => {
+	const { enableRowSelection, disabledRows, getCanSomeRowsExpand } = useDataTable();
+	const isDisabled = !!disabledRows?.[row.id];
+	const toggleExpandHandler = row.getToggleExpandedHandler();
+	const toggleSelectHandler = row.getToggleSelectedHandler();
+	const getCheckedState = () => {
+		if (row.getIsSomeSelected()) return "indeterminate";
+		return row.getIsSelected();
+	};
+	const handleRowClick = (rowData, event) => {
+		if (!rowAction) return;
+		if (!event.target.closest("tr") || isElementInteractive(event.target)) return;
+		rowAction(rowData.original, event);
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "Enter" || event.key === " ") {
+			if (isElementInteractive(event.target)) return;
+			event.preventDefault();
+			handleRowClick(row, event);
+		}
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			const nextRow = event.target.closest("tr")?.nextElementSibling;
+			if (nextRow && nextRow.tagName === "TR") nextRow.focus();
+		}
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			const previousRow = event.target.closest("tr")?.previousElementSibling;
+			if (previousRow && previousRow.tagName === "TR") previousRow.focus();
+		}
 	};
-	return /* @__PURE__ */ s.createElement(u, {
-		isSelected: e.getIsSelected(),
-		isDisabled: g,
-		isFocusable: !!f && !g,
-		...f && {
-			onClick: (t) => b(e, t),
+	return /* @__PURE__ */ React$1.createElement(StyledRow, {
+		isSelected: row.getIsSelected(),
+		isDisabled,
+		isFocusable: !!rowAction && !isDisabled,
+		...rowAction && {
+			onClick: (event) => handleRowClick(row, event),
 			tabIndex: 0,
 			className: "cursor-pointer",
-			onKeyDown: (t) => {
-				if (t.key === "Enter" || t.key === " ") {
-					if (d(t.target)) return;
-					t.preventDefault(), b(e, t);
-				}
-				if (t.key === "ArrowDown") {
-					t.preventDefault();
-					let e = t.target.closest("tr")?.nextElementSibling;
-					e && e.tagName === "TR" && e.focus();
-				}
-				if (t.key === "ArrowUp") {
-					t.preventDefault();
-					let e = t.target.closest("tr")?.previousElementSibling;
-					e && e.tagName === "TR" && e.focus();
-				}
-			}
+			onKeyDown: handleKeyDown
 		}
-	}, h() && /* @__PURE__ */ s.createElement(n.Cell, {
-		"data-testid": `expand-icon-${e.id}`,
-		onClick: _,
-		className: o("w-10", e.getCanExpand() ? "cursor-pointer" : "cursor-auto")
-	}, e.getCanExpand() && /* @__PURE__ */ s.createElement(t, { is: e.getIsExpanded() ? c : l })), p && /* @__PURE__ */ s.createElement(n.Cell, { className: "w-10" }, /* @__PURE__ */ s.createElement(a, {
-		row: e,
-		checked: y(),
-		onCheckedChange: v
-	})), e.getVisibleCells().map((e) => /* @__PURE__ */ s.createElement(i, {
-		key: e.id,
-		cell: e
-	})));
+	}, getCanSomeRowsExpand() && /* @__PURE__ */ React$1.createElement(Table.Cell, {
+		"data-testid": `expand-icon-${row.id}`,
+		onClick: toggleExpandHandler,
+		className: clsx("w-10", row.getCanExpand() ? "cursor-pointer" : "cursor-auto")
+	}, row.getCanExpand() && /* @__PURE__ */ React$1.createElement(Icon, { is: row.getIsExpanded() ? ChevronDown : ChevronRight })), enableRowSelection && /* @__PURE__ */ React$1.createElement(Table.Cell, { className: "w-10" }, /* @__PURE__ */ React$1.createElement(DataTableRowSelectionCheckbox, {
+		row,
+		checked: getCheckedState(),
+		onCheckedChange: toggleSelectHandler
+	})), row.getVisibleCells().map((cell) => {
+		return /* @__PURE__ */ React$1.createElement(DataTableDataCell, {
+			key: cell.id,
+			cell
+		});
+	}));
 };
 //#endregion
-export { f as DataTableRow };
+export { DataTableRow };
 
 //# sourceMappingURL=DataTableRow.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableRow.js","names":[],"sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@atom-learning/icons'\nimport type { Row } from '@tanstack/react-table'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\n\nexport type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {\n  row: Row<Record<string, unknown>>\n  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nconst StyledRow = styled(Table.Row, {\n  base: ['bg-[initial]', 'relative'],\n  variants: {\n    isSelected: {\n      true: ['odd:bg-primary-100']\n    },\n    isDisabled: {\n      true: ['opacity-30']\n    },\n    isFocusable: {\n      true: [\n        'translate-y-0',\n        'duration-200',\n        'ease-out',\n        'transition-shadow',\n        'transition-transform',\n        'hover:shadow-[0px_4px_11px_0px_hsla(0,0%,12%,0.12)]',\n        'hover:-translate-y-px',\n        'hover:z-3',\n        'focus:outline-2',\n        'focus:outline-primary-500',\n        'focus:outline-solid',\n        'focus:-outline-offset-4',\n        'focus:[&_td]:bg-transparent'\n      ]\n    }\n  }\n})\n\nconst isElementInteractive = (element: Element | null): boolean => {\n  if (!element) return false\n  if (element.closest('button, a, input, select, textarea')) return true\n  if (element.getAttribute('role') === 'button') return true\n  return false\n}\n\nexport const DataTableRow = ({ row, rowAction }: DataTableRowProps) => {\n  const { enableRowSelection, disabledRows, getCanSomeRowsExpand } =\n    useDataTable()\n\n  const isDisabled = !!disabledRows?.[row.id]\n\n  const toggleExpandHandler = row.getToggleExpandedHandler()\n  const toggleSelectHandler = row.getToggleSelectedHandler()\n\n  const getCheckedState = (): boolean | 'indeterminate' => {\n    if (row.getIsSomeSelected()) return 'indeterminate'\n    return row.getIsSelected()\n  }\n\n  const handleRowClick = (\n    rowData: Row<Record<string, unknown>>,\n    event: React.MouseEvent<HTMLTableRowElement>\n  ) => {\n    if (!rowAction) return\n\n    // Skip if clicking on an interactive element\n    const rowElement = (event.target as Element).closest('tr')\n    if (!rowElement || isElementInteractive(event.target as Element)) {\n      return\n    }\n\n    rowAction(rowData.original, event)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      if (isElementInteractive(event.target as Element)) {\n        return\n      }\n      event.preventDefault()\n      handleRowClick(\n        row,\n        event as unknown as React.MouseEvent<HTMLTableRowElement>\n      )\n    }\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const nextRow = currentRow?.nextElementSibling as HTMLElement\n      if (nextRow && nextRow.tagName === 'TR') {\n        nextRow.focus()\n      }\n    }\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const previousRow = currentRow?.previousElementSibling as HTMLElement\n      if (previousRow && previousRow.tagName === 'TR') {\n        previousRow.focus()\n      }\n    }\n  }\n\n  return (\n    <StyledRow\n      isSelected={row.getIsSelected()}\n      isDisabled={isDisabled}\n      isFocusable={!!rowAction && !isDisabled}\n      {...(rowAction && {\n        onClick: (event) => handleRowClick(row, event),\n        tabIndex: 0,\n        className: 'cursor-pointer',\n        onKeyDown: handleKeyDown\n      })}\n    >\n      {getCanSomeRowsExpand() && (\n        <Table.Cell\n          data-testid={`expand-icon-${row.id}`}\n          onClick={toggleExpandHandler}\n          className={clsx(\n            'w-10',\n            row.getCanExpand() ? 'cursor-pointer' : 'cursor-auto'\n          )}\n        >\n          {row.getCanExpand() && (\n            <Icon is={row.getIsExpanded() ? ChevronDown : ChevronRight} />\n          )}\n        </Table.Cell>\n      )}\n\n      {enableRowSelection && (\n        <Table.Cell className=\"w-10\">\n          <DataTableRowSelectionCheckbox\n            row={row}\n            checked={getCheckedState()}\n            onCheckedChange={toggleSelectHandler}\n          />\n        </Table.Cell>\n      )}\n      {row.getVisibleCells().map((cell) => {\n        return <DataTableDataCell key={cell.id} cell={cell} />\n      })}\n    </StyledRow>\n  )\n}\n"],"mappings":";;;;;;;;;;AAkBA,IAAM,IAAY,EAAO,EAAM,KAAK;CAClC,MAAM,CAAC,gBAAgB,WAAW;CAClC,UAAU;EACR,YAAY,EACV,MAAM,CAAC,qBAAqB,EAC7B;EACD,YAAY,EACV,MAAM,CAAC,aAAa,EACrB;EACD,aAAa,EACX,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EACF;EACF;CACF,CAAC,EAEI,KAAwB,MACvB,IAEL,GADI,EAAQ,QAAQ,qCAAqC,IACrD,EAAQ,aAAa,OAAO,KAAK,YAFhB,IAMV,KAAgB,EAAE,QAAK,mBAAmC;CACrE,IAAM,EAAE,uBAAoB,iBAAc,4BACxC,GAAc,EAEV,IAAa,CAAC,CAAC,IAAe,EAAI,KAElC,IAAsB,EAAI,0BAA0B,EACpD,IAAsB,EAAI,0BAA0B,EAEpD,UACA,EAAI,mBAAmB,GAAS,kBAC7B,EAAI,eAAe,EAGtB,KACJ,GACA,MACG;AACE,QAID,CADgB,EAAM,OAAmB,QAAQ,KAAK,IACvC,EAAqB,EAAM,OAAkB,IAIhE,EAAU,EAAQ,UAAU,EAAM;;AAgCpC,QACE,kBAAA,cAAC,GAAD;EACE,YAAY,EAAI,eAAe;EACnB;EACZ,aAAa,CAAC,CAAC,KAAa,CAAC;EAC7B,GAAK,KAAa;GAChB,UAAU,MAAU,EAAe,GAAK,EAAM;GAC9C,UAAU;GACV,WAAW;GACX,YAtCiB,MAAoD;AACzE,QAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,KAAK;AAC9C,SAAI,EAAqB,EAAM,OAAkB,CAC/C;AAGF,KADA,EAAM,gBAAgB,EACtB,EACE,GACA,EACD;;AAEH,QAAI,EAAM,QAAQ,aAAa;AAC7B,OAAM,gBAAgB;KAEtB,IAAM,IADc,EAAM,OAAuB,QAAQ,KAAK,EAClC;AAC5B,KAAI,KAAW,EAAQ,YAAY,QACjC,EAAQ,OAAO;;AAGnB,QAAI,EAAM,QAAQ,WAAW;AAC3B,OAAM,gBAAgB;KAEtB,IAAM,IADc,EAAM,OAAuB,QAAQ,KAAK,EAC9B;AAChC,KAAI,KAAe,EAAY,YAAY,QACzC,EAAY,OAAO;;;GAepB;EA6BS,EA3BT,GAAsB,IACrB,kBAAA,cAAC,EAAM,MAAP;EACE,eAAa,eAAe,EAAI;EAChC,SAAS;EACT,WAAW,EACT,QACA,EAAI,cAAc,GAAG,mBAAmB,cACzC;EAKU,EAHV,EAAI,cAAc,IACjB,kBAAA,cAAC,GAAD,EAAM,IAAI,EAAI,eAAe,GAAG,IAAc,GAAgB,CAAA,CAErD,EAGd,KACC,kBAAA,cAAC,EAAM,MAAP,EAAY,WAAU,QAMT,EALX,kBAAA,cAAC,GAAD;EACO;EACL,SAAS,GAAiB;EAC1B,iBAAiB;EACjB,CAAA,CACS,EAEd,EAAI,iBAAiB,CAAC,KAAK,MACnB,kBAAA,cAAC,GAAD;EAAmB,KAAK,EAAK;EAAU;EAAQ,CAAA,CACtD,CACQ"}
+{"version":3,"file":"DataTableRow.js","names":[],"sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@atom-learning/icons'\nimport type { Row } from '@tanstack/react-table'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\n\nexport type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {\n  row: Row<Record<string, unknown>>\n  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nconst StyledRow = styled(Table.Row, {\n  base: ['bg-[initial]', 'relative'],\n  variants: {\n    isSelected: {\n      true: ['odd:bg-primary-100']\n    },\n    isDisabled: {\n      true: ['opacity-30']\n    },\n    isFocusable: {\n      true: [\n        'translate-y-0',\n        'duration-200',\n        'ease-out',\n        'transition-shadow',\n        'transition-transform',\n        'hover:shadow-[0px_4px_11px_0px_hsla(0,0%,12%,0.12)]',\n        'hover:-translate-y-px',\n        'hover:z-3',\n        'focus:outline-2',\n        'focus:outline-primary-500',\n        'focus:outline-solid',\n        'focus:-outline-offset-4',\n        'focus:[&_td]:bg-transparent'\n      ]\n    }\n  }\n})\n\nconst isElementInteractive = (element: Element | null): boolean => {\n  if (!element) return false\n  if (element.closest('button, a, input, select, textarea')) return true\n  if (element.getAttribute('role') === 'button') return true\n  return false\n}\n\nexport const DataTableRow = ({ row, rowAction }: DataTableRowProps) => {\n  const { enableRowSelection, disabledRows, getCanSomeRowsExpand } =\n    useDataTable()\n\n  const isDisabled = !!disabledRows?.[row.id]\n\n  const toggleExpandHandler = row.getToggleExpandedHandler()\n  const toggleSelectHandler = row.getToggleSelectedHandler()\n\n  const getCheckedState = (): boolean | 'indeterminate' => {\n    if (row.getIsSomeSelected()) return 'indeterminate'\n    return row.getIsSelected()\n  }\n\n  const handleRowClick = (\n    rowData: Row<Record<string, unknown>>,\n    event: React.MouseEvent<HTMLTableRowElement>\n  ) => {\n    if (!rowAction) return\n\n    // Skip if clicking on an interactive element\n    const rowElement = (event.target as Element).closest('tr')\n    if (!rowElement || isElementInteractive(event.target as Element)) {\n      return\n    }\n\n    rowAction(rowData.original, event)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      if (isElementInteractive(event.target as Element)) {\n        return\n      }\n      event.preventDefault()\n      handleRowClick(\n        row,\n        event as unknown as React.MouseEvent<HTMLTableRowElement>\n      )\n    }\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const nextRow = currentRow?.nextElementSibling as HTMLElement\n      if (nextRow && nextRow.tagName === 'TR') {\n        nextRow.focus()\n      }\n    }\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const previousRow = currentRow?.previousElementSibling as HTMLElement\n      if (previousRow && previousRow.tagName === 'TR') {\n        previousRow.focus()\n      }\n    }\n  }\n\n  return (\n    <StyledRow\n      isSelected={row.getIsSelected()}\n      isDisabled={isDisabled}\n      isFocusable={!!rowAction && !isDisabled}\n      {...(rowAction && {\n        onClick: (event) => handleRowClick(row, event),\n        tabIndex: 0,\n        className: 'cursor-pointer',\n        onKeyDown: handleKeyDown\n      })}\n    >\n      {getCanSomeRowsExpand() && (\n        <Table.Cell\n          data-testid={`expand-icon-${row.id}`}\n          onClick={toggleExpandHandler}\n          className={clsx(\n            'w-10',\n            row.getCanExpand() ? 'cursor-pointer' : 'cursor-auto'\n          )}\n        >\n          {row.getCanExpand() && (\n            <Icon is={row.getIsExpanded() ? ChevronDown : ChevronRight} />\n          )}\n        </Table.Cell>\n      )}\n\n      {enableRowSelection && (\n        <Table.Cell className=\"w-10\">\n          <DataTableRowSelectionCheckbox\n            row={row}\n            checked={getCheckedState()}\n            onCheckedChange={toggleSelectHandler}\n          />\n        </Table.Cell>\n      )}\n      {row.getVisibleCells().map((cell) => {\n        return <DataTableDataCell key={cell.id} cell={cell} />\n      })}\n    </StyledRow>\n  )\n}\n"],"mappings":";;;;;;;;;;AAkBA,IAAM,YAAY,OAAO,MAAM,KAAK;CAClC,MAAM,CAAC,gBAAgB,WAAW;CAClC,UAAU;EACR,YAAY,EACV,MAAM,CAAC,qBAAqB,EAC7B;EACD,YAAY,EACV,MAAM,CAAC,aAAa,EACrB;EACD,aAAa,EACX,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EACF;EACF;CACF,CAAC;AAEF,IAAM,wBAAwB,YAAqC;AACjE,KAAI,CAAC,QAAS,QAAO;AACrB,KAAI,QAAQ,QAAQ,qCAAqC,CAAE,QAAO;AAClE,KAAI,QAAQ,aAAa,OAAO,KAAK,SAAU,QAAO;AACtD,QAAO;;AAGT,IAAa,gBAAgB,EAAE,KAAK,gBAAmC;CACrE,MAAM,EAAE,oBAAoB,cAAc,yBACxC,cAAc;CAEhB,MAAM,aAAa,CAAC,CAAC,eAAe,IAAI;CAExC,MAAM,sBAAsB,IAAI,0BAA0B;CAC1D,MAAM,sBAAsB,IAAI,0BAA0B;CAE1D,MAAM,wBAAmD;AACvD,MAAI,IAAI,mBAAmB,CAAE,QAAO;AACpC,SAAO,IAAI,eAAe;;CAG5B,MAAM,kBACJ,SACA,UACG;AACH,MAAI,CAAC,UAAW;AAIhB,MAAI,CADgB,MAAM,OAAmB,QAAQ,KAAK,IACvC,qBAAqB,MAAM,OAAkB,CAC9D;AAGF,YAAU,QAAQ,UAAU,MAAM;;CAGpC,MAAM,iBAAiB,UAAoD;AACzE,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,OAAI,qBAAqB,MAAM,OAAkB,CAC/C;AAEF,SAAM,gBAAgB;AACtB,kBACE,KACA,MACD;;AAEH,MAAI,MAAM,QAAQ,aAAa;AAC7B,SAAM,gBAAgB;GAEtB,MAAM,UADc,MAAM,OAAuB,QAAQ,KAAK,EAClC;AAC5B,OAAI,WAAW,QAAQ,YAAY,KACjC,SAAQ,OAAO;;AAGnB,MAAI,MAAM,QAAQ,WAAW;AAC3B,SAAM,gBAAgB;GAEtB,MAAM,cADc,MAAM,OAAuB,QAAQ,KAAK,EAC9B;AAChC,OAAI,eAAe,YAAY,YAAY,KACzC,aAAY,OAAO;;;AAKzB,QACE,wBAAA,cAAC,WAAD;EACE,YAAY,IAAI,eAAe;EACnB;EACZ,aAAa,CAAC,CAAC,aAAa,CAAC;EAC7B,GAAK,aAAa;GAChB,UAAU,UAAU,eAAe,KAAK,MAAM;GAC9C,UAAU;GACV,WAAW;GACX,WAAW;GACZ;EA6BS,EA3BT,sBAAsB,IACrB,wBAAA,cAAC,MAAM,MAAP;EACE,eAAa,eAAe,IAAI;EAChC,SAAS;EACT,WAAW,KACT,QACA,IAAI,cAAc,GAAG,mBAAmB,cACzC;EAKU,EAHV,IAAI,cAAc,IACjB,wBAAA,cAAC,MAAD,EAAM,IAAI,IAAI,eAAe,GAAG,cAAc,cAAgB,CAAA,CAErD,EAGd,sBACC,wBAAA,cAAC,MAAM,MAAP,EAAY,WAAU,QAMT,EALX,wBAAA,cAAC,+BAAD;EACO;EACL,SAAS,iBAAiB;EAC1B,iBAAiB;EACjB,CAAA,CACS,EAEd,IAAI,iBAAiB,CAAC,KAAK,SAAS;AACnC,SAAO,wBAAA,cAAC,mBAAD;GAAmB,KAAK,KAAK;GAAU;GAAQ,CAAA;GACtD,CACQ"}

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

@@ -1,23 +1,23 @@
-import { Checkbox as e } from "../checkbox/Checkbox.js";
-import { useDataTable as t } from "./DataTableContext.js";
-import * as n from "react";
+import { Checkbox } from "../checkbox/Checkbox.js";
+import { useDataTable } from "./DataTableContext.js";
+import * as React$1 from "react";
 //#region src/components/data-table/DataTableRowSelectionCheckbox.tsx
-var r = ({ row: r, checked: i, onCheckedChange: a, label: o = `Row ${r.id} selection` }) => {
-	let { tableId: s } = t();
-	return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement("label", {
-		htmlFor: `${s}_row_${r.id}_selection`,
+var DataTableRowSelectionCheckbox = ({ row, checked, onCheckedChange, label = `Row ${row.id} selection` }) => {
+	const { tableId } = useDataTable();
+	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement("label", {
+		htmlFor: `${tableId}_row_${row.id}_selection`,
 		className: "sr-only"
-	}, o), /* @__PURE__ */ n.createElement(e, {
+	}, label), /* @__PURE__ */ React$1.createElement(Checkbox, {
 		size: "lg",
-		style: { "--depth": r.depth },
-		checked: i,
-		onCheckedChange: a,
-		name: `${s}_row_${r.id}_selection`,
-		disabled: !r.getCanSelect(),
+		style: { "--depth": row.depth },
+		checked,
+		onCheckedChange,
+		name: `${tableId}_row_${row.id}_selection`,
+		disabled: !row.getCanSelect(),
 		className: "mr-3 ml-[calc((var(--depth,0)*2)*4px)]"
 	}));
 };
 //#endregion
-export { r as DataTableRowSelectionCheckbox };
+export { DataTableRowSelectionCheckbox };
 
 //# sourceMappingURL=DataTableRowSelectionCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableRowSelectionCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableRowSelectionCheckbox.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableRowSelectionCheckbox = ({\n  row,\n  checked,\n  onCheckedChange,\n  label = `Row ${row.id} selection`\n}: {\n  row: Row<Record<string, unknown>>\n  checked: boolean | 'indeterminate'\n  onCheckedChange: (value: boolean) => void\n  label?: string\n}): React.ReactElement => {\n  const { tableId } = useDataTable()\n\n  return (\n    <>\n      <label htmlFor={`${tableId}_row_${row.id}_selection`} className=\"sr-only\">\n        {label}\n      </label>\n      <Checkbox\n        size=\"lg\"\n        style={{ '--depth': row.depth }}\n        checked={checked}\n        onCheckedChange={onCheckedChange}\n        name={`${tableId}_row_${row.id}_selection`}\n        disabled={!row.getCanSelect()}\n        className=\"mr-3 ml-[calc((var(--depth,0)*2)*4px)]\"\n      />\n    </>\n  )\n}\n"],"mappings":";;;;AAMA,IAAa,KAAiC,EAC5C,QACA,YACA,oBACA,WAAQ,OAAO,EAAI,GAAG,kBAME;CACxB,IAAM,EAAE,eAAY,GAAc;AAElC,QACE,kBAAA,cAAA,EAAA,UAAA,MACE,kBAAA,cAAC,SAAD;EAAO,SAAS,GAAG,EAAQ,OAAO,EAAI,GAAG;EAAa,WAAU;EAExD,EADL,EACK,EACR,kBAAA,cAAC,GAAD;EACE,MAAK;EACL,OAAO,EAAE,WAAW,EAAI,OAAO;EACtB;EACQ;EACjB,MAAM,GAAG,EAAQ,OAAO,EAAI,GAAG;EAC/B,UAAU,CAAC,EAAI,cAAc;EAC7B,WAAU;EACV,CAAA,CACD"}
+{"version":3,"file":"DataTableRowSelectionCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableRowSelectionCheckbox.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableRowSelectionCheckbox = ({\n  row,\n  checked,\n  onCheckedChange,\n  label = `Row ${row.id} selection`\n}: {\n  row: Row<Record<string, unknown>>\n  checked: boolean | 'indeterminate'\n  onCheckedChange: (value: boolean) => void\n  label?: string\n}): React.ReactElement => {\n  const { tableId } = useDataTable()\n\n  return (\n    <>\n      <label htmlFor={`${tableId}_row_${row.id}_selection`} className=\"sr-only\">\n        {label}\n      </label>\n      <Checkbox\n        size=\"lg\"\n        style={{ '--depth': row.depth }}\n        checked={checked}\n        onCheckedChange={onCheckedChange}\n        name={`${tableId}_row_${row.id}_selection`}\n        disabled={!row.getCanSelect()}\n        className=\"mr-3 ml-[calc((var(--depth,0)*2)*4px)]\"\n      />\n    </>\n  )\n}\n"],"mappings":";;;;AAMA,IAAa,iCAAiC,EAC5C,KACA,SACA,iBACA,QAAQ,OAAO,IAAI,GAAG,kBAME;CACxB,MAAM,EAAE,YAAY,cAAc;AAElC,QACE,wBAAA,cAAA,QAAA,UAAA,MACE,wBAAA,cAAC,SAAD;EAAO,SAAS,GAAG,QAAQ,OAAO,IAAI,GAAG;EAAa,WAAU;EAExD,EADL,MACK,EACR,wBAAA,cAAC,UAAD;EACE,MAAK;EACL,OAAO,EAAE,WAAW,IAAI,OAAO;EACtB;EACQ;EACjB,MAAM,GAAG,QAAQ,OAAO,IAAI,GAAG;EAC/B,UAAU,CAAC,IAAI,cAAc;EAC7B,WAAU;EACV,CAAA,CACD"}

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

@@ -1,20 +1,29 @@
-import { Checkbox as e } from "../checkbox/Checkbox.js";
-import { useDataTable as t } from "./DataTableContext.js";
-import * as n from "react";
+import { Checkbox } from "../checkbox/Checkbox.js";
+import { useDataTable } from "./DataTableContext.js";
+import * as React$1 from "react";
 //#region src/components/data-table/DataTableSelectAllRowsCheckbox.tsx
-var r = ({ label: r = "All rows selection" }) => {
-	let { getIsAllPageRowsSelected: i, getIsSomePageRowsSelected: a, toggleAllPageRowsSelected: o, tableId: s } = t();
-	return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement("label", {
-		htmlFor: `${s}_all_rows_selection`,
+var DataTableSelectAllRowsCheckbox = ({ label = "All rows selection" }) => {
+	const { getIsAllPageRowsSelected, getIsSomePageRowsSelected, toggleAllPageRowsSelected, tableId } = useDataTable();
+	const getCheckedState = () => {
+		if (getIsSomePageRowsSelected()) return "indeterminate";
+		if (getIsAllPageRowsSelected()) return true;
+		return false;
+	};
+	const updateCheckedState = () => {
+		if (getIsSomePageRowsSelected()) return toggleAllPageRowsSelected(false);
+		return toggleAllPageRowsSelected(!getIsAllPageRowsSelected());
+	};
+	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement("label", {
+		htmlFor: `${tableId}_all_rows_selection`,
 		className: "sr-only"
-	}, r), /* @__PURE__ */ n.createElement(e, {
+	}, label), /* @__PURE__ */ React$1.createElement(Checkbox, {
 		size: "lg",
-		checked: a() ? "indeterminate" : !!i(),
-		onCheckedChange: () => a() ? o(!1) : o(!i()),
-		name: `${s}_allRowsSelection`
+		checked: getCheckedState(),
+		onCheckedChange: updateCheckedState,
+		name: `${tableId}_allRowsSelection`
 	}));
 };
 //#endregion
-export { r as DataTableSelectAllRowsCheckbox };
+export { DataTableSelectAllRowsCheckbox };
 
 //# sourceMappingURL=DataTableSelectAllRowsCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { Label } from '../label/Label'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableSelectAllRowsCheckbox = ({\n  label = 'All rows selection'\n}: {\n  label?: string\n}) => {\n  const {\n    getIsAllPageRowsSelected,\n    getIsSomePageRowsSelected,\n    toggleAllPageRowsSelected,\n    tableId\n  } = useDataTable()\n\n  const getCheckedState = () => {\n    if (getIsSomePageRowsSelected()) return 'indeterminate'\n    if (getIsAllPageRowsSelected()) return true\n    return false\n  }\n\n  const updateCheckedState = () => {\n    if (getIsSomePageRowsSelected()) {\n      return toggleAllPageRowsSelected(false)\n    }\n    return toggleAllPageRowsSelected(!getIsAllPageRowsSelected())\n  }\n\n  return (\n    <>\n      <label htmlFor={`${tableId}_all_rows_selection`} className=\"sr-only\">\n        {label}\n      </label>\n      <Checkbox\n        size=\"lg\"\n        checked={getCheckedState()}\n        onCheckedChange={updateCheckedState}\n        name={`${tableId}_allRowsSelection`}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;AAMA,IAAa,KAAkC,EAC7C,WAAQ,2BAGJ;CACJ,IAAM,EACJ,6BACA,8BACA,8BACA,eACE,GAAc;AAelB,QACE,kBAAA,cAAA,EAAA,UAAA,MACE,kBAAA,cAAC,SAAD;EAAO,SAAS,GAAG,EAAQ;EAAsB,WAAU;EAEnD,EADL,EACK,EACR,kBAAA,cAAC,GAAD;EACE,MAAK;EACL,SAnBA,GAA2B,GAAS,kBACxC,EAAI,GAA0B;EAmB1B,uBAdA,GAA2B,GACtB,EAA0B,GAAM,GAElC,EAA0B,CAAC,GAA0B,CAAC;EAYzD,MAAM,GAAG,EAAQ;EACjB,CAAA,CACD"}
+{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { Label } from '../label/Label'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableSelectAllRowsCheckbox = ({\n  label = 'All rows selection'\n}: {\n  label?: string\n}) => {\n  const {\n    getIsAllPageRowsSelected,\n    getIsSomePageRowsSelected,\n    toggleAllPageRowsSelected,\n    tableId\n  } = useDataTable()\n\n  const getCheckedState = () => {\n    if (getIsSomePageRowsSelected()) return 'indeterminate'\n    if (getIsAllPageRowsSelected()) return true\n    return false\n  }\n\n  const updateCheckedState = () => {\n    if (getIsSomePageRowsSelected()) {\n      return toggleAllPageRowsSelected(false)\n    }\n    return toggleAllPageRowsSelected(!getIsAllPageRowsSelected())\n  }\n\n  return (\n    <>\n      <label htmlFor={`${tableId}_all_rows_selection`} className=\"sr-only\">\n        {label}\n      </label>\n      <Checkbox\n        size=\"lg\"\n        checked={getCheckedState()}\n        onCheckedChange={updateCheckedState}\n        name={`${tableId}_allRowsSelection`}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;AAMA,IAAa,kCAAkC,EAC7C,QAAQ,2BAGJ;CACJ,MAAM,EACJ,0BACA,2BACA,2BACA,YACE,cAAc;CAElB,MAAM,wBAAwB;AAC5B,MAAI,2BAA2B,CAAE,QAAO;AACxC,MAAI,0BAA0B,CAAE,QAAO;AACvC,SAAO;;CAGT,MAAM,2BAA2B;AAC/B,MAAI,2BAA2B,CAC7B,QAAO,0BAA0B,MAAM;AAEzC,SAAO,0BAA0B,CAAC,0BAA0B,CAAC;;AAG/D,QACE,wBAAA,cAAA,QAAA,UAAA,MACE,wBAAA,cAAC,SAAD;EAAO,SAAS,GAAG,QAAQ;EAAsB,WAAU;EAEnD,EADL,MACK,EACR,wBAAA,cAAC,UAAD;EACE,MAAK;EACL,SAAS,iBAAiB;EAC1B,iBAAiB;EACjB,MAAM,GAAG,QAAQ;EACjB,CAAA,CACD"}