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

package/dist/components/create-password-field/CreatePasswordField.js

@@ -1,37 +1,53 @@
-import { InlineMessage as e } from "../inline-message/InlineMessage.js";
-import { PasswordField as t } from "../password-field/PasswordField.js";
-import * as n from "react";
-import r from "invariant";
-import { throttle as i } from "throttle-debounce";
-import { useFormContext as a } from "react-hook-form";
+import { InlineMessage } from "../inline-message/InlineMessage.js";
+import { PasswordField } from "../password-field/PasswordField.js";
+import * as React$1 from "react";
+import invariant from "invariant";
+import { throttle } from "throttle-debounce";
+import { useFormContext } from "react-hook-form";
 //#region src/components/create-password-field/CreatePasswordField.tsx
-var o = ({ validate: o, defaultValidation: s, messageDirection: c = "row", label: l = "Create a password", name: u = "password", className: d, validation: f, appearance: p, ...m }) => {
-	let { formState: h, control: g } = a(), [_, v] = n.useState(!1), [y, b] = n.useState(s), x = h.touched[u], S = h.errors[u]?.type === "validate" || Object.values(y).every((e) => !e), C = n.useCallback(async (e) => {
-		let t = await o(e);
-		return t ? (r(typeof t == "object", "The validate function must return an object"), b(t), Object.values(t).every((e) => e)) : !1;
-	}, [b]), w = n.useCallback(i(500, C), [C]), T = (e, t) => e ? "success" : t ? "neutral" : "error", E = g.mode.isOnBlur && (_ || x) || g.mode.isOnSubmit && (_ || h.isSubmitted && S);
-	return /* @__PURE__ */ n.createElement("div", { className: d }, /* @__PURE__ */ n.createElement(t, {
-		label: l,
-		name: u,
-		onChange: (e) => w(e.target.value),
-		onBlur: () => v(!1),
-		onFocus: () => v(!0),
+var CreatePasswordField = ({ validate, defaultValidation, messageDirection = "row", label = "Create a password", name = "password", className, validation, appearance, ...remainingProps }) => {
+	const { formState, control } = useFormContext();
+	const [isFocused, setIsFocused] = React$1.useState(false);
+	const [validationResult, setValidationResult] = React$1.useState(defaultValidation);
+	const touched = formState.touched[name];
+	const error = formState.errors[name]?.type === "validate" || Object.values(validationResult).every((isValid) => !isValid);
+	const validatePassword = React$1.useCallback(async (password) => {
+		const result = await validate(password);
+		if (result) {
+			invariant(typeof result === "object", "The validate function must return an object");
+			setValidationResult(result);
+			return Object.values(result).every((isValid) => isValid);
+		}
+		return false;
+	}, [setValidationResult]);
+	const handleChange = React$1.useCallback(throttle(500, validatePassword), [validatePassword]);
+	const getMessageTheme = (result, isFocused) => {
+		if (result) return "success";
+		return isFocused ? "neutral" : "error";
+	};
+	const showValidation = control.mode.isOnBlur && (isFocused || touched) || control.mode.isOnSubmit && (isFocused || formState.isSubmitted && error);
+	return /* @__PURE__ */ React$1.createElement("div", { className }, /* @__PURE__ */ React$1.createElement(PasswordField, {
+		label,
+		name,
+		onChange: (e) => handleChange(e.target.value),
+		onBlur: () => setIsFocused(false),
+		onFocus: () => setIsFocused(true),
 		validation: {
-			...f,
-			validate: C
+			...validation,
+			validate: validatePassword
 		},
-		appearance: p,
-		...m
-	}), E && /* @__PURE__ */ n.createElement("div", {
-		style: { "--direction": c },
+		appearance,
+		...remainingProps
+	}), showValidation && /* @__PURE__ */ React$1.createElement("div", {
+		style: { "--direction": messageDirection },
 		className: "direction-(--direction) mt-2 flex flex-wrap gap-2"
-	}, Object.entries(y).map(([t, r]) => /* @__PURE__ */ n.createElement(e, {
-		key: t,
-		theme: T(r, _)
-	}, t))));
+	}, Object.entries(validationResult).map(([message, result]) => /* @__PURE__ */ React$1.createElement(InlineMessage, {
+		key: message,
+		theme: getMessageTheme(result, isFocused)
+	}, message))));
 };
-o.displayName = "CreatePasswordField";
+CreatePasswordField.displayName = "CreatePasswordField";
 //#endregion
-export { o as CreatePasswordField };
+export { CreatePasswordField };
 
 //# sourceMappingURL=CreatePasswordField.js.map

package/dist/components/create-password-field/CreatePasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreatePasswordField.js","names":[],"sources":["../../../src/components/create-password-field/CreatePasswordField.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\nimport { throttle } from 'throttle-debounce'\n\nimport { Override } from '~/utilities/types'\n\nimport { FieldElementWrapperProps } from '../field-wrapper/FieldWrapper'\nimport { InlineMessage } from '../inline-message/InlineMessage'\nimport { PasswordField } from '../password-field/PasswordField'\nimport { PasswordInput } from '../password-input/PasswordInput'\n\ntype ValidationResult = Record<string, boolean>\n\ntype CreatePasswordFieldProps = Override<\n  React.ComponentProps<typeof PasswordInput> & FieldElementWrapperProps,\n  {\n    label?: string\n    name?: string\n    validate: (\n      password: string\n    ) => Promise<ValidationResult | undefined> | ValidationResult\n    defaultValidation: ValidationResult\n    messageDirection?: 'row' | 'column'\n  }\n>\n\nexport const CreatePasswordField = ({\n  validate,\n  defaultValidation,\n  messageDirection = 'row',\n  label = 'Create a password',\n  name = 'password',\n  className,\n  validation,\n  appearance,\n  ...remainingProps\n}: CreatePasswordFieldProps) => {\n  const { formState, control } = useFormContext()\n  const [isFocused, setIsFocused] = React.useState<boolean>(false)\n  const [validationResult, setValidationResult] =\n    React.useState<ValidationResult>(defaultValidation)\n\n  const touched: boolean = formState.touched[name]\n  const error =\n    formState.errors[name]?.type === 'validate' ||\n    Object.values(validationResult).every((isValid) => !isValid)\n\n  const validatePassword = React.useCallback(\n    async (password: string) => {\n      const result = await validate(password)\n\n      if (result) {\n        invariant(\n          typeof result === 'object',\n          'The validate function must return an object'\n        )\n\n        setValidationResult(result)\n        return Object.values(result).every((isValid) => isValid)\n      }\n\n      return false\n    },\n    [setValidationResult]\n  )\n\n  const handleChange = React.useCallback(throttle(500, validatePassword), [\n    validatePassword\n  ])\n\n  const getMessageTheme = (result: boolean, isFocused: boolean) => {\n    if (result) return 'success'\n\n    return isFocused ? 'neutral' : 'error'\n  }\n\n  const showValidation: boolean =\n    (control.mode.isOnBlur && (isFocused || touched)) ||\n    (control.mode.isOnSubmit && (isFocused || (formState.isSubmitted && error)))\n\n  return (\n    <div className={className}>\n      <PasswordField\n        label={label}\n        name={name}\n        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n          handleChange(e.target.value)\n        }\n        onBlur={() => setIsFocused(false)}\n        onFocus={() => setIsFocused(true)}\n        validation={{ ...validation, validate: validatePassword }}\n        appearance={appearance}\n        {...remainingProps}\n      />\n      {showValidation && (\n        <div\n          style={{ '--direction': messageDirection }}\n          className=\"direction-(--direction) mt-2 flex flex-wrap gap-2\"\n        >\n          {Object.entries(validationResult).map(([message, result]) => (\n            <InlineMessage\n              key={message}\n              theme={getMessageTheme(result, isFocused)}\n            >\n              {message}\n            </InlineMessage>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nCreatePasswordField.displayName = 'CreatePasswordField'\n"],"mappings":";;;;;;;AA2BA,IAAa,KAAuB,EAClC,aACA,sBACA,sBAAmB,OACnB,WAAQ,qBACR,UAAO,YACP,cACA,eACA,eACA,GAAG,QAC2B;CAC9B,IAAM,EAAE,cAAW,eAAY,GAAgB,EACzC,CAAC,GAAW,KAAgB,EAAM,SAAkB,GAAM,EAC1D,CAAC,GAAkB,KACvB,EAAM,SAA2B,EAAkB,EAE/C,IAAmB,EAAU,QAAQ,IACrC,IACJ,EAAU,OAAO,IAAO,SAAS,cACjC,OAAO,OAAO,EAAiB,CAAC,OAAO,MAAY,CAAC,EAAQ,EAExD,IAAmB,EAAM,YAC7B,OAAO,MAAqB;EAC1B,IAAM,IAAS,MAAM,EAAS,EAAS;AAYvC,SAVI,KACF,EACE,OAAO,KAAW,UAClB,8CACD,EAED,EAAoB,EAAO,EACpB,OAAO,OAAO,EAAO,CAAC,OAAO,MAAY,EAAQ,IAGnD;IAET,CAAC,EAAoB,CACtB,EAEK,IAAe,EAAM,YAAY,EAAS,KAAK,EAAiB,EAAE,CACtE,EACD,CAAC,EAEI,KAAmB,GAAiB,MACpC,IAAe,YAEZ,IAAY,YAAY,SAG3B,IACH,EAAQ,KAAK,aAAa,KAAa,MACvC,EAAQ,KAAK,eAAe,KAAc,EAAU,eAAe;AAEtE,QACE,kBAAA,cAAC,OAAD,EAAgB,cA4BV,EA3BJ,kBAAA,cAAC,GAAD;EACS;EACD;EACN,WAAW,MACT,EAAa,EAAE,OAAO,MAAM;EAE9B,cAAc,EAAa,GAAM;EACjC,eAAe,EAAa,GAAK;EACjC,YAAY;GAAE,GAAG;GAAY,UAAU;GAAkB;EAC7C;EACZ,GAAI;EACJ,CAAA,EACD,KACC,kBAAA,cAAC,OAAD;EACE,OAAO,EAAE,eAAe,GAAkB;EAC1C,WAAU;EAUN,EARH,OAAO,QAAQ,EAAiB,CAAC,KAAK,CAAC,GAAS,OAC/C,kBAAA,cAAC,GAAD;EACE,KAAK;EACL,OAAO,EAAgB,GAAQ,EAAU;EAG3B,EADb,EACa,CAChB,CACE,CAEJ;;AAIV,EAAoB,cAAc"}
+{"version":3,"file":"CreatePasswordField.js","names":[],"sources":["../../../src/components/create-password-field/CreatePasswordField.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\nimport { throttle } from 'throttle-debounce'\n\nimport { Override } from '~/utilities/types'\n\nimport { FieldElementWrapperProps } from '../field-wrapper/FieldWrapper'\nimport { InlineMessage } from '../inline-message/InlineMessage'\nimport { PasswordField } from '../password-field/PasswordField'\nimport { PasswordInput } from '../password-input/PasswordInput'\n\ntype ValidationResult = Record<string, boolean>\n\ntype CreatePasswordFieldProps = Override<\n  React.ComponentProps<typeof PasswordInput> & FieldElementWrapperProps,\n  {\n    label?: string\n    name?: string\n    validate: (\n      password: string\n    ) => Promise<ValidationResult | undefined> | ValidationResult\n    defaultValidation: ValidationResult\n    messageDirection?: 'row' | 'column'\n  }\n>\n\nexport const CreatePasswordField = ({\n  validate,\n  defaultValidation,\n  messageDirection = 'row',\n  label = 'Create a password',\n  name = 'password',\n  className,\n  validation,\n  appearance,\n  ...remainingProps\n}: CreatePasswordFieldProps) => {\n  const { formState, control } = useFormContext()\n  const [isFocused, setIsFocused] = React.useState<boolean>(false)\n  const [validationResult, setValidationResult] =\n    React.useState<ValidationResult>(defaultValidation)\n\n  const touched: boolean = formState.touched[name]\n  const error =\n    formState.errors[name]?.type === 'validate' ||\n    Object.values(validationResult).every((isValid) => !isValid)\n\n  const validatePassword = React.useCallback(\n    async (password: string) => {\n      const result = await validate(password)\n\n      if (result) {\n        invariant(\n          typeof result === 'object',\n          'The validate function must return an object'\n        )\n\n        setValidationResult(result)\n        return Object.values(result).every((isValid) => isValid)\n      }\n\n      return false\n    },\n    [setValidationResult]\n  )\n\n  const handleChange = React.useCallback(throttle(500, validatePassword), [\n    validatePassword\n  ])\n\n  const getMessageTheme = (result: boolean, isFocused: boolean) => {\n    if (result) return 'success'\n\n    return isFocused ? 'neutral' : 'error'\n  }\n\n  const showValidation: boolean =\n    (control.mode.isOnBlur && (isFocused || touched)) ||\n    (control.mode.isOnSubmit && (isFocused || (formState.isSubmitted && error)))\n\n  return (\n    <div className={className}>\n      <PasswordField\n        label={label}\n        name={name}\n        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n          handleChange(e.target.value)\n        }\n        onBlur={() => setIsFocused(false)}\n        onFocus={() => setIsFocused(true)}\n        validation={{ ...validation, validate: validatePassword }}\n        appearance={appearance}\n        {...remainingProps}\n      />\n      {showValidation && (\n        <div\n          style={{ '--direction': messageDirection }}\n          className=\"direction-(--direction) mt-2 flex flex-wrap gap-2\"\n        >\n          {Object.entries(validationResult).map(([message, result]) => (\n            <InlineMessage\n              key={message}\n              theme={getMessageTheme(result, isFocused)}\n            >\n              {message}\n            </InlineMessage>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nCreatePasswordField.displayName = 'CreatePasswordField'\n"],"mappings":";;;;;;;AA2BA,IAAa,uBAAuB,EAClC,UACA,mBACA,mBAAmB,OACnB,QAAQ,qBACR,OAAO,YACP,WACA,YACA,YACA,GAAG,qBAC2B;CAC9B,MAAM,EAAE,WAAW,YAAY,gBAAgB;CAC/C,MAAM,CAAC,WAAW,gBAAgB,QAAM,SAAkB,MAAM;CAChE,MAAM,CAAC,kBAAkB,uBACvB,QAAM,SAA2B,kBAAkB;CAErD,MAAM,UAAmB,UAAU,QAAQ;CAC3C,MAAM,QACJ,UAAU,OAAO,OAAO,SAAS,cACjC,OAAO,OAAO,iBAAiB,CAAC,OAAO,YAAY,CAAC,QAAQ;CAE9D,MAAM,mBAAmB,QAAM,YAC7B,OAAO,aAAqB;EAC1B,MAAM,SAAS,MAAM,SAAS,SAAS;AAEvC,MAAI,QAAQ;AACV,aACE,OAAO,WAAW,UAClB,8CACD;AAED,uBAAoB,OAAO;AAC3B,UAAO,OAAO,OAAO,OAAO,CAAC,OAAO,YAAY,QAAQ;;AAG1D,SAAO;IAET,CAAC,oBAAoB,CACtB;CAED,MAAM,eAAe,QAAM,YAAY,SAAS,KAAK,iBAAiB,EAAE,CACtE,iBACD,CAAC;CAEF,MAAM,mBAAmB,QAAiB,cAAuB;AAC/D,MAAI,OAAQ,QAAO;AAEnB,SAAO,YAAY,YAAY;;CAGjC,MAAM,iBACH,QAAQ,KAAK,aAAa,aAAa,YACvC,QAAQ,KAAK,eAAe,aAAc,UAAU,eAAe;AAEtE,QACE,wBAAA,cAAC,OAAD,EAAgB,WA4BV,EA3BJ,wBAAA,cAAC,eAAD;EACS;EACD;EACN,WAAW,MACT,aAAa,EAAE,OAAO,MAAM;EAE9B,cAAc,aAAa,MAAM;EACjC,eAAe,aAAa,KAAK;EACjC,YAAY;GAAE,GAAG;GAAY,UAAU;GAAkB;EAC7C;EACZ,GAAI;EACJ,CAAA,EACD,kBACC,wBAAA,cAAC,OAAD;EACE,OAAO,EAAE,eAAe,kBAAkB;EAC1C,WAAU;EAUN,EARH,OAAO,QAAQ,iBAAiB,CAAC,KAAK,CAAC,SAAS,YAC/C,wBAAA,cAAC,eAAD;EACE,KAAK;EACL,OAAO,gBAAgB,QAAQ,UAAU;EAG3B,EADb,QACa,CAChB,CACE,CAEJ;;AAIV,oBAAoB,cAAc"}

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

@@ -1,42 +1,47 @@
-import { DataTableProvider as e } from "./DataTableContext.js";
-import { DataTableDataCell as t } from "./DataTableDataCell.js";
-import { DataTableRowSelectionCheckbox as n } from "./DataTableRowSelectionCheckbox.js";
-import { DataTableRow as r } from "./DataTableRow.js";
-import { DataTableBody as i } from "./DataTableBody.js";
-import { DataTableMetaData as a } from "./DataTableMetaData.js";
-import { DataTableBulkActions as o } from "./DataTableBulkActions.js";
-import { DataTableBulkActionsFloating as s } from "./DataTableBulkActionsFloating.js";
-import { DataTableEmptyState as c } from "./DataTableEmptyState.js";
-import { DataTableError as l } from "./DataTableError.js";
-import { DataTableGlobalFilter as u } from "./DataTableGlobalFilter.js";
-import { DataTableHeaderCell as d } from "./DataTableHeaderCell.js";
-import { DataTableSelectAllRowsCheckbox as f } from "./DataTableSelectAllRowsCheckbox.js";
-import { DataTableHead as p } from "./DataTableHead.js";
-import { DataTableLoading as m } from "./DataTableLoading.js";
-import { DataTableTable as h } from "./DataTableTable.js";
-import { DragAndDropTable as g } from "./drag-and-drop/DragAndDropTable.js";
-import { Pagination as _ } from "./pagination/Pagination.js";
+import { DataTableProvider } from "./DataTableContext.js";
+import { DataTableDataCell } from "./DataTableDataCell.js";
+import { DataTableRowSelectionCheckbox } from "./DataTableRowSelectionCheckbox.js";
+import { DataTableRow } from "./DataTableRow.js";
+import { DataTableBody } from "./DataTableBody.js";
+import { DataTableMetaData } from "./DataTableMetaData.js";
+import { DataTableBulkActions } from "./DataTableBulkActions.js";
+import { DataTableBulkActionsFloating } from "./DataTableBulkActionsFloating.js";
+import { DataTableEmptyState } from "./DataTableEmptyState.js";
+import { DataTableError } from "./DataTableError.js";
+import { DataTableGlobalFilter } from "./DataTableGlobalFilter.js";
+import { DataTableHeaderCell } from "./DataTableHeaderCell.js";
+import { DataTableSelectAllRowsCheckbox } from "./DataTableSelectAllRowsCheckbox.js";
+import { DataTableHead } from "./DataTableHead.js";
+import { DataTableLoading } from "./DataTableLoading.js";
+import { DataTableTable } from "./DataTableTable.js";
+import { DragAndDropTable } from "./drag-and-drop/DragAndDropTable.js";
+import { Pagination } from "./pagination/Pagination.js";
 //#region src/components/data-table/DataTable.tsx
-var v = Object.assign(e, {
-	Body: i,
-	DataCell: t,
-	DragAndDropTable: g,
-	GlobalFilter: u,
-	Head: p,
-	HeaderCell: d,
-	MetaData: a,
-	Pagination: _,
-	Row: r,
-	Table: h,
-	Loading: m,
-	Error: l,
-	EmptyState: c,
-	SelectAllRowsCheckbox: f,
-	RowSelectionCheckbox: n,
-	BulkActions: o,
-	BulkActionsFloating: s
+/** Context provider for DataTable state and logic.
+*
+* Children can call `useDataTable` to access everything provided by `@tanstack/react-table` plus
+* the functionality we've built on top.
+*/
+var DataTable = Object.assign(DataTableProvider, {
+	Body: DataTableBody,
+	DataCell: DataTableDataCell,
+	DragAndDropTable,
+	GlobalFilter: DataTableGlobalFilter,
+	Head: DataTableHead,
+	HeaderCell: DataTableHeaderCell,
+	MetaData: DataTableMetaData,
+	Pagination,
+	Row: DataTableRow,
+	Table: DataTableTable,
+	Loading: DataTableLoading,
+	Error: DataTableError,
+	EmptyState: DataTableEmptyState,
+	SelectAllRowsCheckbox: DataTableSelectAllRowsCheckbox,
+	RowSelectionCheckbox: DataTableRowSelectionCheckbox,
+	BulkActions: DataTableBulkActions,
+	BulkActionsFloating: DataTableBulkActionsFloating
 });
 //#endregion
-export { v as DataTable };
+export { DataTable };
 
 //# sourceMappingURL=DataTable.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","names":[],"sources":["../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import { DataTableBody } from './DataTableBody'\nimport { DataTableBulkActions } from './DataTableBulkActions'\nimport { DataTableBulkActionsFloating } from './DataTableBulkActionsFloating'\nimport { DataTableProvider } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableEmptyState } from './DataTableEmptyState'\nimport { DataTableError } from './DataTableError'\nimport { DataTableGlobalFilter } from './DataTableGlobalFilter'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableLoading } from './DataTableLoading'\nimport { DataTableMetaData } from './DataTableMetaData'\nimport { DataTableRow } from './DataTableRow'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTableTable } from './DataTableTable'\nimport { DragAndDropTable } from './drag-and-drop/DragAndDropTable'\nimport { Pagination } from './pagination/Pagination'\n\n/** Context provider for DataTable state and logic.\n *\n * Children can call `useDataTable` to access everything provided by `@tanstack/react-table` plus\n * the functionality we've built on top.\n */\nexport const DataTable = Object.assign(DataTableProvider, {\n  /** Default table body implementation for `DataTable`.\n   *\n   * Can be configured with alternating colours of rows. If you need more customisation options,\n   * you can build your own implementation with `useDataTable()` and the UI-only `Table` components.\n   */\n  Body: DataTableBody,\n\n  /** Default table data cell implementation for `DataTable`\n   *\n   *\n   */\n  DataCell: DataTableDataCell,\n\n  /**\n   * Used in place of `DataTable.Table` to render a table with rows that the user can sort by drag-and-drop\n   */\n  DragAndDropTable: DragAndDropTable,\n\n  /** Default global search implementation for `DataTable`\n   *\n   * If you need more customisation options, you can compose your own implementation with our UI-only input components and `useDataTable`.\n   */\n  GlobalFilter: DataTableGlobalFilter,\n\n  /** Default table head implementation\n   *\n   * Can be configured to be sortable and with different visual themes.\n   * If you need more customisation options, you can build your own implementation\n   * with `useDataTable` and the UI-only `Table` components.\n   */\n  Head: DataTableHead,\n\n  /** Default header implementation for `DataTable`\n   *\n   * Can be configured to make the column sortable. If you need more customisation options,\n   * you can build your own implementation with the UI-only `Table` components.\n   */\n  HeaderCell: DataTableHeaderCell,\n\n  /** Default pagination implementation for `DataTable`\n   *\n   * Can navigate forward, backward, or to any specific page. If you need more customisation options,\n   * you can build your own implementation with `useDataTable` and other UI components.\n   *\n   */\n  MetaData: DataTableMetaData,\n\n  /** Default display of amount of items and current sorting status for 'DataTable'\n   *\n   */\n  Pagination: Pagination,\n\n  /** Default row implementation for `DataTable`\n   *\n   * Renders all visible cells as `Table.Cell`. If you need more customisation options,\n   * you can build your own implementation with the UI-only `Table` components.\n   */\n  Row: DataTableRow,\n\n  /** Default table implementation for `DataTable`.\n   *\n   * Can be configured with sortable columns and different visual themes.\n   *\n   * If you need more customisation options, you can compose your own implementation with\n   * lower-level `DataTable` components or build the whole thing from\n   * scratch with `useDataTable` and the UI-only `Table` components.\n   *\n   */\n  Table: DataTableTable,\n\n  /** Default loading implementation for remote data\n   *\n   * Renders a loading component while fetching the paginated data using `getAsyncData`.\n   *\n   * If you need more customisation, you can compose your own implentation, `asyncDataState`\n   * can be retrieved from `useDataTable`\n   */\n  Loading: DataTableLoading,\n\n  /** Default error implementation for remote data\n   *\n   * Renders an error component when `getAsyncData` promise rejects.\n   * Children are rendered as a function, it exposes a `runAsyncData` function to the children component.\n   * `runAsyncData()` can be used to retry fetching the paginated data with the current pageIndex, pageSize\n   * and sorting parameters or your own custom paginated options.\n   *\n   * If you need more customisation, you can compose your own implentation, `asyncDataState` and `runAsyncData()`\n   * can be retrieved from `useDataTable`\n   *\n   */\n  Error: DataTableError,\n\n  /** Empty state implementation for `DataTable`.\n   *\n   * Extends the EmptyState component\n   */\n  EmptyState: DataTableEmptyState,\n\n  /** Select all rows checkbox.\n   *\n   * Renders a checkbox on the header, allowing for bulk selection/deselection of all selectable rows\n   */\n  SelectAllRowsCheckbox: DataTableSelectAllRowsCheckbox,\n\n  /** Individual row selection checkbox.\n   *\n   * Renders a checkbox on each row, allowing for individual selection/deselection of any selectable row\n   */\n  RowSelectionCheckbox: DataTableRowSelectionCheckbox,\n\n  /** Bulk actions for selected rows.\n   *\n   * Renders a toolbar with actions that can be applied to all selected rows\n   */\n  BulkActions: DataTableBulkActions,\n\n  /** Bulk actions for selected rows.\n   *\n   * Renders a toolbar with actions that can be applied to all selected rows\n   */\n  BulkActionsFloating: DataTableBulkActionsFloating\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAwBA,IAAa,IAAY,OAAO,OAAO,GAAmB;CAMxD,MAAM;CAMN,UAAU;CAKQ;CAMlB,cAAc;CAQd,MAAM;CAON,YAAY;CAQZ,UAAU;CAKE;CAOZ,KAAK;CAWL,OAAO;CASP,SAAS;CAaT,OAAO;CAMP,YAAY;CAMZ,uBAAuB;CAMvB,sBAAsB;CAMtB,aAAa;CAMb,qBAAqB;CACtB,CAAC"}
+{"version":3,"file":"DataTable.js","names":[],"sources":["../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import { DataTableBody } from './DataTableBody'\nimport { DataTableBulkActions } from './DataTableBulkActions'\nimport { DataTableBulkActionsFloating } from './DataTableBulkActionsFloating'\nimport { DataTableProvider } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableEmptyState } from './DataTableEmptyState'\nimport { DataTableError } from './DataTableError'\nimport { DataTableGlobalFilter } from './DataTableGlobalFilter'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableLoading } from './DataTableLoading'\nimport { DataTableMetaData } from './DataTableMetaData'\nimport { DataTableRow } from './DataTableRow'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTableTable } from './DataTableTable'\nimport { DragAndDropTable } from './drag-and-drop/DragAndDropTable'\nimport { Pagination } from './pagination/Pagination'\n\n/** Context provider for DataTable state and logic.\n *\n * Children can call `useDataTable` to access everything provided by `@tanstack/react-table` plus\n * the functionality we've built on top.\n */\nexport const DataTable = Object.assign(DataTableProvider, {\n  /** Default table body implementation for `DataTable`.\n   *\n   * Can be configured with alternating colours of rows. If you need more customisation options,\n   * you can build your own implementation with `useDataTable()` and the UI-only `Table` components.\n   */\n  Body: DataTableBody,\n\n  /** Default table data cell implementation for `DataTable`\n   *\n   *\n   */\n  DataCell: DataTableDataCell,\n\n  /**\n   * Used in place of `DataTable.Table` to render a table with rows that the user can sort by drag-and-drop\n   */\n  DragAndDropTable: DragAndDropTable,\n\n  /** Default global search implementation for `DataTable`\n   *\n   * If you need more customisation options, you can compose your own implementation with our UI-only input components and `useDataTable`.\n   */\n  GlobalFilter: DataTableGlobalFilter,\n\n  /** Default table head implementation\n   *\n   * Can be configured to be sortable and with different visual themes.\n   * If you need more customisation options, you can build your own implementation\n   * with `useDataTable` and the UI-only `Table` components.\n   */\n  Head: DataTableHead,\n\n  /** Default header implementation for `DataTable`\n   *\n   * Can be configured to make the column sortable. If you need more customisation options,\n   * you can build your own implementation with the UI-only `Table` components.\n   */\n  HeaderCell: DataTableHeaderCell,\n\n  /** Default pagination implementation for `DataTable`\n   *\n   * Can navigate forward, backward, or to any specific page. If you need more customisation options,\n   * you can build your own implementation with `useDataTable` and other UI components.\n   *\n   */\n  MetaData: DataTableMetaData,\n\n  /** Default display of amount of items and current sorting status for 'DataTable'\n   *\n   */\n  Pagination: Pagination,\n\n  /** Default row implementation for `DataTable`\n   *\n   * Renders all visible cells as `Table.Cell`. If you need more customisation options,\n   * you can build your own implementation with the UI-only `Table` components.\n   */\n  Row: DataTableRow,\n\n  /** Default table implementation for `DataTable`.\n   *\n   * Can be configured with sortable columns and different visual themes.\n   *\n   * If you need more customisation options, you can compose your own implementation with\n   * lower-level `DataTable` components or build the whole thing from\n   * scratch with `useDataTable` and the UI-only `Table` components.\n   *\n   */\n  Table: DataTableTable,\n\n  /** Default loading implementation for remote data\n   *\n   * Renders a loading component while fetching the paginated data using `getAsyncData`.\n   *\n   * If you need more customisation, you can compose your own implentation, `asyncDataState`\n   * can be retrieved from `useDataTable`\n   */\n  Loading: DataTableLoading,\n\n  /** Default error implementation for remote data\n   *\n   * Renders an error component when `getAsyncData` promise rejects.\n   * Children are rendered as a function, it exposes a `runAsyncData` function to the children component.\n   * `runAsyncData()` can be used to retry fetching the paginated data with the current pageIndex, pageSize\n   * and sorting parameters or your own custom paginated options.\n   *\n   * If you need more customisation, you can compose your own implentation, `asyncDataState` and `runAsyncData()`\n   * can be retrieved from `useDataTable`\n   *\n   */\n  Error: DataTableError,\n\n  /** Empty state implementation for `DataTable`.\n   *\n   * Extends the EmptyState component\n   */\n  EmptyState: DataTableEmptyState,\n\n  /** Select all rows checkbox.\n   *\n   * Renders a checkbox on the header, allowing for bulk selection/deselection of all selectable rows\n   */\n  SelectAllRowsCheckbox: DataTableSelectAllRowsCheckbox,\n\n  /** Individual row selection checkbox.\n   *\n   * Renders a checkbox on each row, allowing for individual selection/deselection of any selectable row\n   */\n  RowSelectionCheckbox: DataTableRowSelectionCheckbox,\n\n  /** Bulk actions for selected rows.\n   *\n   * Renders a toolbar with actions that can be applied to all selected rows\n   */\n  BulkActions: DataTableBulkActions,\n\n  /** Bulk actions for selected rows.\n   *\n   * Renders a toolbar with actions that can be applied to all selected rows\n   */\n  BulkActionsFloating: DataTableBulkActionsFloating\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwBA,IAAa,YAAY,OAAO,OAAO,mBAAmB;CAMxD,MAAM;CAMN,UAAU;CAKQ;CAMlB,cAAc;CAQd,MAAM;CAON,YAAY;CAQZ,UAAU;CAKE;CAOZ,KAAK;CAWL,OAAO;CASP,SAAS;CAaT,OAAO;CAMP,YAAY;CAMZ,uBAAuB;CAMvB,sBAAsB;CAMtB,aAAa;CAMb,qBAAqB;CACtB,CAAC"}

package/dist/components/data-table/DataTable.types.js

@@ -1,8 +1,12 @@
 //#region src/components/data-table/DataTable.types.ts
-var e = /* @__PURE__ */ function(e) {
-	return e.NONE = "none", e.PENDING = "pending", e.FULFILLED = "fulfilled", e.REJECTED = "rejected", e;
+var AsyncDataState = /* @__PURE__ */ function(AsyncDataState) {
+	AsyncDataState["NONE"] = "none";
+	AsyncDataState["PENDING"] = "pending";
+	AsyncDataState["FULFILLED"] = "fulfilled";
+	AsyncDataState["REJECTED"] = "rejected";
+	return AsyncDataState;
 }({});
 //#endregion
-export { e as AsyncDataState };
+export { AsyncDataState };
 
 //# sourceMappingURL=DataTable.types.js.map

package/dist/components/data-table/DataTable.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.types.js","names":[],"sources":["../../../src/components/data-table/DataTable.types.ts"],"sourcesContent":["import type {\n  ColumnOrderTableState,\n  ColumnPinningTableState,\n  ColumnSizingTableState,\n  ExpandedTableState,\n  FiltersTableState,\n  GroupingTableState,\n  PaginationTableState,\n  Row,\n  RowSelectionState,\n  RowSelectionTableState,\n  SortDirection,\n  SortingTableState,\n  Table,\n  VisibilityTableState\n} from '@tanstack/react-table'\nimport * as React from 'react'\n\nexport enum AsyncDataState {\n  NONE = 'none',\n  PENDING = 'pending',\n  FULFILLED = 'fulfilled',\n  REJECTED = 'rejected'\n}\n\nexport type TAsyncDataResult = {\n  total: number\n  results: TableData\n}\n\nexport type TAsyncDataOptions = {\n  pageIndex: number\n  pageSize: number\n  sortBy?: string\n  sortDirection?: SortDirection\n  globalFilter?: string\n}\n\nexport type TGetAsyncData = (\n  options: TAsyncDataOptions\n) => Promise<TAsyncDataResult | undefined>\n\nexport type TablePosition = {\n  top: number | null\n  bottom: number | null\n  offsetTop: number\n  isVisible: boolean\n}\n\nexport type DataTableContextType<T = unknown> = Table<T> & {\n  setIsSortable: React.Dispatch<React.SetStateAction<boolean>>\n  applyPagination: () => void\n  getTotalRows: () => number\n  isSortable: boolean\n  asyncDataState?: AsyncDataState\n  runAsyncData?: (options: Partial<TAsyncDataOptions>) => Promise<void>\n  hasAsyncData: boolean\n  disabledRows?: Record<string, boolean>\n  enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n  rowSelection: RowSelectionState\n  tablePosition?: TablePosition\n  setTablePosition: React.Dispatch<React.SetStateAction<TablePosition>>\n  data: TAsyncDataResult\n  columns: any\n  tableId: string\n  /**\n   * Directly update the data array that the table rows are built from.\n   * This is useful when re-ordering rows, but is high-risk if you're not sure what you're doing!\n   *\n   *  Note in particular that this value is also updated if you update the value of the `DataTable`'s `data` prop\n   *  — it's probably best to only use one of those two methods for any given table.\n   */\n  setData: React.Dispatch<React.SetStateAction<TAsyncDataResult>>\n}\n\nexport type TableData = Array<Record<string, unknown>>\n\nexport type InitialState = Partial<\n  VisibilityTableState &\n    ColumnOrderTableState &\n    ColumnPinningTableState &\n    FiltersTableState &\n    SortingTableState &\n    ExpandedTableState &\n    GroupingTableState &\n    ColumnSizingTableState &\n    PaginationTableState &\n    RowSelectionTableState\n>\n\nexport type TDefaultSort = { column: string; direction: SortDirection }\n"],"mappings":";AAkBA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,OAAA,QACA,EAAA,UAAA,WACA,EAAA,YAAA,aACA,EAAA,WAAA;KACD"}
+{"version":3,"file":"DataTable.types.js","names":[],"sources":["../../../src/components/data-table/DataTable.types.ts"],"sourcesContent":["import type {\n  ColumnOrderTableState,\n  ColumnPinningTableState,\n  ColumnSizingTableState,\n  ExpandedTableState,\n  FiltersTableState,\n  GroupingTableState,\n  PaginationTableState,\n  Row,\n  RowSelectionState,\n  RowSelectionTableState,\n  SortDirection,\n  SortingTableState,\n  Table,\n  VisibilityTableState\n} from '@tanstack/react-table'\nimport * as React from 'react'\n\nexport enum AsyncDataState {\n  NONE = 'none',\n  PENDING = 'pending',\n  FULFILLED = 'fulfilled',\n  REJECTED = 'rejected'\n}\n\nexport type TAsyncDataResult = {\n  total: number\n  results: TableData\n}\n\nexport type TAsyncDataOptions = {\n  pageIndex: number\n  pageSize: number\n  sortBy?: string\n  sortDirection?: SortDirection\n  globalFilter?: string\n}\n\nexport type TGetAsyncData = (\n  options: TAsyncDataOptions\n) => Promise<TAsyncDataResult | undefined>\n\nexport type TablePosition = {\n  top: number | null\n  bottom: number | null\n  offsetTop: number\n  isVisible: boolean\n}\n\nexport type DataTableContextType<T = unknown> = Table<T> & {\n  setIsSortable: React.Dispatch<React.SetStateAction<boolean>>\n  applyPagination: () => void\n  getTotalRows: () => number\n  isSortable: boolean\n  asyncDataState?: AsyncDataState\n  runAsyncData?: (options: Partial<TAsyncDataOptions>) => Promise<void>\n  hasAsyncData: boolean\n  disabledRows?: Record<string, boolean>\n  enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n  rowSelection: RowSelectionState\n  tablePosition?: TablePosition\n  setTablePosition: React.Dispatch<React.SetStateAction<TablePosition>>\n  data: TAsyncDataResult\n  columns: any\n  tableId: string\n  /**\n   * Directly update the data array that the table rows are built from.\n   * This is useful when re-ordering rows, but is high-risk if you're not sure what you're doing!\n   *\n   *  Note in particular that this value is also updated if you update the value of the `DataTable`'s `data` prop\n   *  — it's probably best to only use one of those two methods for any given table.\n   */\n  setData: React.Dispatch<React.SetStateAction<TAsyncDataResult>>\n}\n\nexport type TableData = Array<Record<string, unknown>>\n\nexport type InitialState = Partial<\n  VisibilityTableState &\n    ColumnOrderTableState &\n    ColumnPinningTableState &\n    FiltersTableState &\n    SortingTableState &\n    ExpandedTableState &\n    GroupingTableState &\n    ColumnSizingTableState &\n    PaginationTableState &\n    RowSelectionTableState\n>\n\nexport type TDefaultSort = { column: string; direction: SortDirection }\n"],"mappings":";AAkBA,IAAY,iBAAL,yBAAA,gBAAA;AACL,gBAAA,UAAA;AACA,gBAAA,aAAA;AACA,gBAAA,eAAA;AACA,gBAAA,cAAA;;KACD"}

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

@@ -1,20 +1,22 @@
-import { Table as e } from "../table/Table.js";
-import { useDataTable as t } from "./DataTableContext.js";
-import { DataTableRow as n } from "./DataTableRow.js";
-import * as r from "react";
+import { Table } from "../table/Table.js";
+import { useDataTable } from "./DataTableContext.js";
+import { DataTableRow } from "./DataTableRow.js";
+import * as React$1 from "react";
 //#region src/components/data-table/DataTableBody.tsx
-var i = ({ striped: i = !1, rowAction: a, ...o }) => {
-	let { getRowModel: s } = t();
-	return /* @__PURE__ */ r.createElement(e.Body, {
-		...o,
-		striped: i
-	}, s().rows.map((e) => /* @__PURE__ */ r.createElement(n, {
-		row: e,
-		key: e.id,
-		rowAction: a
-	})));
+var DataTableBody = ({ striped = false, rowAction, ...props }) => {
+	const { getRowModel } = useDataTable();
+	return /* @__PURE__ */ React$1.createElement(Table.Body, {
+		...props,
+		striped
+	}, getRowModel().rows.map((row) => {
+		return /* @__PURE__ */ React$1.createElement(DataTableRow, {
+			row,
+			key: row.id,
+			rowAction
+		});
+	}));
 };
 //#endregion
-export { i as DataTableBody };
+export { DataTableBody };
 
 //# sourceMappingURL=DataTableBody.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableBody.js","names":[],"sources":["../../../src/components/data-table/DataTableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableRow } from './DataTableRow'\n\ntype DataTableBodyProps = Omit<\n  React.ComponentProps<typeof Table.Body>,\n  'children'\n> & {\n  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nexport const DataTableBody = ({\n  striped = false,\n  rowAction,\n  ...props\n}: DataTableBodyProps) => {\n  const { getRowModel } = useDataTable()\n\n  return (\n    <Table.Body {...props} striped={striped}>\n      {getRowModel().rows.map((row) => {\n        return <DataTableRow row={row} key={row.id} rowAction={rowAction} />\n      })}\n    </Table.Body>\n  )\n}\n"],"mappings":";;;;;AAaA,IAAa,KAAiB,EAC5B,aAAU,IACV,cACA,GAAG,QACqB;CACxB,IAAM,EAAE,mBAAgB,GAAc;AAEtC,QACE,kBAAA,cAAC,EAAM,MAAP;EAAY,GAAI;EAAgB;EAInB,EAHV,GAAa,CAAC,KAAK,KAAK,MAChB,kBAAA,cAAC,GAAD;EAAmB;EAAK,KAAK,EAAI;EAAe;EAAa,CAAA,CACpE,CACS"}
+{"version":3,"file":"DataTableBody.js","names":[],"sources":["../../../src/components/data-table/DataTableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableRow } from './DataTableRow'\n\ntype DataTableBodyProps = Omit<\n  React.ComponentProps<typeof Table.Body>,\n  'children'\n> & {\n  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nexport const DataTableBody = ({\n  striped = false,\n  rowAction,\n  ...props\n}: DataTableBodyProps) => {\n  const { getRowModel } = useDataTable()\n\n  return (\n    <Table.Body {...props} striped={striped}>\n      {getRowModel().rows.map((row) => {\n        return <DataTableRow row={row} key={row.id} rowAction={rowAction} />\n      })}\n    </Table.Body>\n  )\n}\n"],"mappings":";;;;;AAaA,IAAa,iBAAiB,EAC5B,UAAU,OACV,WACA,GAAG,YACqB;CACxB,MAAM,EAAE,gBAAgB,cAAc;AAEtC,QACE,wBAAA,cAAC,MAAM,MAAP;EAAY,GAAI;EAAgB;EAInB,EAHV,aAAa,CAAC,KAAK,KAAK,QAAQ;AAC/B,SAAO,wBAAA,cAAC,cAAD;GAAmB;GAAK,KAAK,IAAI;GAAe;GAAa,CAAA;GACpE,CACS"}

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

@@ -1,11 +1,11 @@
-import { styled as e } from "../../styled.js";
-import { Button as t } from "../button/Button.js";
-import { useDataTable as n } from "./DataTableContext.js";
-import { Divider as r } from "../divider/Divider.js";
-import { DataTableMetaData as i } from "./DataTableMetaData.js";
-import * as a from "react";
+import { styled } from "../../styled.js";
+import { Button } from "../button/Button.js";
+import { useDataTable } from "./DataTableContext.js";
+import { Divider } from "../divider/Divider.js";
+import { DataTableMetaData } from "./DataTableMetaData.js";
+import * as React$1 from "react";
 //#region src/components/data-table/DataTableBulkActions.tsx
-var o = e("div", {
+var StyledContainer = styled("div", {
 	base: [
 		"flex",
 		"p-2",
@@ -17,29 +17,36 @@ var o = e("div", {
 		"rounded-t-sm"
 	],
 	variants: { isRowSelected: { true: ["bg-primary-100"] } }
-}), s = Object.assign(({ children: e, ...t }) => {
-	let { rowSelection: r } = n(), s = Object.keys(r || {}).length > 0;
-	return /* @__PURE__ */ a.createElement(o, {
-		isRowSelected: s,
-		...t
-	}, /* @__PURE__ */ a.createElement(i, null), /* @__PURE__ */ a.createElement("div", { className: "flex items-center justify-end" }, e));
+});
+var BulkActionsDefaultActions = ({ children }) => {
+	const { rowSelection } = useDataTable();
+	if (Object.keys(rowSelection || {}).length > 0) return null;
+	return children;
+};
+var BulkActionsSelectedRowActions = ({ cancelLabel = "Cancel", children }) => {
+	const { toggleAllPageRowsSelected, rowSelection } = useDataTable();
+	const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false);
+	if (Object.keys(rowSelection || {}).length === 0) return null;
+	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, children, React$1.Children.count(children) > 0 && /* @__PURE__ */ React$1.createElement(Divider, {
+		orientation: "vertical",
+		className: "mx-4"
+	}), /* @__PURE__ */ React$1.createElement(Button, {
+		theme: "neutral",
+		onClick: handleDeselectAllPageRows
+	}, cancelLabel));
+};
+var DataTableBulkActions = Object.assign(({ children, ...rest }) => {
+	const { rowSelection } = useDataTable();
+	const isRowSelected = Object.keys(rowSelection || {}).length > 0;
+	return /* @__PURE__ */ React$1.createElement(StyledContainer, {
+		isRowSelected,
+		...rest
+	}, /* @__PURE__ */ React$1.createElement(DataTableMetaData, null), /* @__PURE__ */ React$1.createElement("div", { className: "flex items-center justify-end" }, children));
 }, {
-	DefaultActions: ({ children: e }) => {
-		let { rowSelection: t } = n();
-		return Object.keys(t || {}).length > 0 ? null : e;
-	},
-	SelectedRowActions: ({ cancelLabel: e = "Cancel", children: i }) => {
-		let { toggleAllPageRowsSelected: o, rowSelection: s } = n();
-		return Object.keys(s || {}).length === 0 ? null : /* @__PURE__ */ a.createElement(a.Fragment, null, i, a.Children.count(i) > 0 && /* @__PURE__ */ a.createElement(r, {
-			orientation: "vertical",
-			className: "mx-4"
-		}), /* @__PURE__ */ a.createElement(t, {
-			theme: "neutral",
-			onClick: () => o(!1)
-		}, e));
-	}
+	DefaultActions: BulkActionsDefaultActions,
+	SelectedRowActions: BulkActionsSelectedRowActions
 });
 //#endregion
-export { s as DataTableBulkActions };
+export { DataTableBulkActions };
 
 //# sourceMappingURL=DataTableBulkActions.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableBulkActions.js","names":[],"sources":["../../../src/components/data-table/DataTableBulkActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '~/components/button/Button'\nimport { Divider } from '~/components/divider/Divider'\nimport { styled } from '~/styled'\n\nimport { useDataTable } from './DataTableContext'\nimport { DataTableMetaData } from './DataTableMetaData'\n\nconst StyledContainer = styled('div', {\n  base: [\n    'flex',\n    'p-2',\n    'w-full',\n    'mb-2',\n    'justify-between',\n    'items-center',\n    'min-h-16',\n    'rounded-t-sm'\n  ],\n  variants: {\n    isRowSelected: {\n      true: ['bg-primary-100']\n    }\n  }\n})\n\nconst BulkActionsDefaultActions = ({\n  children\n}: {\n  children: React.ReactElement\n}): React.ReactElement | null => {\n  const { rowSelection } = useDataTable()\n\n  if (Object.keys(rowSelection || {}).length > 0) return null\n\n  return children\n}\n\nconst BulkActionsSelectedRowActions = ({\n  cancelLabel = 'Cancel',\n  children\n}: {\n  cancelLabel?: string\n  children: React.ReactNode\n}) => {\n  const { toggleAllPageRowsSelected, rowSelection } = useDataTable()\n\n  const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n  if (Object.keys(rowSelection || {}).length === 0) return null\n\n  return (\n    <>\n      {children}\n      {React.Children.count(children) > 0 && (\n        <Divider orientation=\"vertical\" className=\"mx-4\" />\n      )}\n      <Button theme=\"neutral\" onClick={handleDeselectAllPageRows}>\n        {cancelLabel}\n      </Button>\n    </>\n  )\n}\n\nexport const DataTableBulkActions = Object.assign(\n  ({\n    children,\n    ...rest\n  }: {\n    children:\n      | React.ReactElement<\n          React.ComponentProps<typeof BulkActionsDefaultActions>\n        >\n      | React.ReactElement<\n          React.ComponentProps<typeof BulkActionsSelectedRowActions>\n        >\n      | [\n          React.ReactElement<\n            React.ComponentProps<typeof BulkActionsDefaultActions>\n          >,\n          React.ReactElement<\n            React.ComponentProps<typeof BulkActionsSelectedRowActions>\n          >\n        ]\n  }) => {\n    const { rowSelection } = useDataTable()\n\n    const isRowSelected = Object.keys(rowSelection || {}).length > 0\n\n    return (\n      <StyledContainer isRowSelected={isRowSelected} {...rest}>\n        <DataTableMetaData />\n        <div className=\"flex items-center justify-end\">{children}</div>\n      </StyledContainer>\n    )\n  },\n  {\n    DefaultActions: BulkActionsDefaultActions,\n    SelectedRowActions: BulkActionsSelectedRowActions\n  }\n)\n"],"mappings":";;;;;;;AASA,IAAM,IAAkB,EAAO,OAAO;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,eAAe,EACb,MAAM,CAAC,iBAAiB,EACzB,EACF;CACF,CAAC,EAwCW,IAAuB,OAAO,QACxC,EACC,aACA,GAAG,QAiBC;CACJ,IAAM,EAAE,oBAAiB,GAAc,EAEjC,IAAgB,OAAO,KAAK,KAAgB,EAAE,CAAC,CAAC,SAAS;AAE/D,QACE,kBAAA,cAAC,GAAD;EAAgC;EAAe,GAAI;EAGjC,EAFhB,kBAAA,cAAC,GAAA,KAAoB,EACrB,kBAAA,cAAC,OAAD,EAAK,WAAU,iCAAgD,EAAf,EAAe,CAC/C;GAGtB;CACE,iBAvE+B,EACjC,kBAG+B;EAC/B,IAAM,EAAE,oBAAiB,GAAc;AAIvC,SAFI,OAAO,KAAK,KAAgB,EAAE,CAAC,CAAC,SAAS,IAAU,OAEhD;;CA+DL,qBA5DmC,EACrC,iBAAc,UACd,kBAII;EACJ,IAAM,EAAE,8BAA2B,oBAAiB,GAAc;AAMlE,SAFI,OAAO,KAAK,KAAgB,EAAE,CAAC,CAAC,WAAW,IAAU,OAGvD,kBAAA,cAAA,EAAA,UAAA,MACG,GACA,EAAM,SAAS,MAAM,EAAS,GAAG,KAChC,kBAAA,cAAC,GAAD;GAAS,aAAY;GAAW,WAAU;GAAS,CAAA,EAErD,kBAAA,cAAC,GAAD;GAAQ,OAAM;GAAU,eAVY,EAA0B,GAAM;GAY3D,EADN,EACM,CACR;;CAuCJ,CACF"}
+{"version":3,"file":"DataTableBulkActions.js","names":[],"sources":["../../../src/components/data-table/DataTableBulkActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '~/components/button/Button'\nimport { Divider } from '~/components/divider/Divider'\nimport { styled } from '~/styled'\n\nimport { useDataTable } from './DataTableContext'\nimport { DataTableMetaData } from './DataTableMetaData'\n\nconst StyledContainer = styled('div', {\n  base: [\n    'flex',\n    'p-2',\n    'w-full',\n    'mb-2',\n    'justify-between',\n    'items-center',\n    'min-h-16',\n    'rounded-t-sm'\n  ],\n  variants: {\n    isRowSelected: {\n      true: ['bg-primary-100']\n    }\n  }\n})\n\nconst BulkActionsDefaultActions = ({\n  children\n}: {\n  children: React.ReactElement\n}): React.ReactElement | null => {\n  const { rowSelection } = useDataTable()\n\n  if (Object.keys(rowSelection || {}).length > 0) return null\n\n  return children\n}\n\nconst BulkActionsSelectedRowActions = ({\n  cancelLabel = 'Cancel',\n  children\n}: {\n  cancelLabel?: string\n  children: React.ReactNode\n}) => {\n  const { toggleAllPageRowsSelected, rowSelection } = useDataTable()\n\n  const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n  if (Object.keys(rowSelection || {}).length === 0) return null\n\n  return (\n    <>\n      {children}\n      {React.Children.count(children) > 0 && (\n        <Divider orientation=\"vertical\" className=\"mx-4\" />\n      )}\n      <Button theme=\"neutral\" onClick={handleDeselectAllPageRows}>\n        {cancelLabel}\n      </Button>\n    </>\n  )\n}\n\nexport const DataTableBulkActions = Object.assign(\n  ({\n    children,\n    ...rest\n  }: {\n    children:\n      | React.ReactElement<\n          React.ComponentProps<typeof BulkActionsDefaultActions>\n        >\n      | React.ReactElement<\n          React.ComponentProps<typeof BulkActionsSelectedRowActions>\n        >\n      | [\n          React.ReactElement<\n            React.ComponentProps<typeof BulkActionsDefaultActions>\n          >,\n          React.ReactElement<\n            React.ComponentProps<typeof BulkActionsSelectedRowActions>\n          >\n        ]\n  }) => {\n    const { rowSelection } = useDataTable()\n\n    const isRowSelected = Object.keys(rowSelection || {}).length > 0\n\n    return (\n      <StyledContainer isRowSelected={isRowSelected} {...rest}>\n        <DataTableMetaData />\n        <div className=\"flex items-center justify-end\">{children}</div>\n      </StyledContainer>\n    )\n  },\n  {\n    DefaultActions: BulkActionsDefaultActions,\n    SelectedRowActions: BulkActionsSelectedRowActions\n  }\n)\n"],"mappings":";;;;;;;AASA,IAAM,kBAAkB,OAAO,OAAO;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,eAAe,EACb,MAAM,CAAC,iBAAiB,EACzB,EACF;CACF,CAAC;AAEF,IAAM,6BAA6B,EACjC,eAG+B;CAC/B,MAAM,EAAE,iBAAiB,cAAc;AAEvC,KAAI,OAAO,KAAK,gBAAgB,EAAE,CAAC,CAAC,SAAS,EAAG,QAAO;AAEvD,QAAO;;AAGT,IAAM,iCAAiC,EACrC,cAAc,UACd,eAII;CACJ,MAAM,EAAE,2BAA2B,iBAAiB,cAAc;CAElE,MAAM,kCAAkC,0BAA0B,MAAM;AAExE,KAAI,OAAO,KAAK,gBAAgB,EAAE,CAAC,CAAC,WAAW,EAAG,QAAO;AAEzD,QACE,wBAAA,cAAA,QAAA,UAAA,MACG,UACA,QAAM,SAAS,MAAM,SAAS,GAAG,KAChC,wBAAA,cAAC,SAAD;EAAS,aAAY;EAAW,WAAU;EAAS,CAAA,EAErD,wBAAA,cAAC,QAAD;EAAQ,OAAM;EAAU,SAAS;EAExB,EADN,YACM,CACR;;AAIP,IAAa,uBAAuB,OAAO,QACxC,EACC,UACA,GAAG,WAiBC;CACJ,MAAM,EAAE,iBAAiB,cAAc;CAEvC,MAAM,gBAAgB,OAAO,KAAK,gBAAgB,EAAE,CAAC,CAAC,SAAS;AAE/D,QACE,wBAAA,cAAC,iBAAD;EAAgC;EAAe,GAAI;EAGjC,EAFhB,wBAAA,cAAC,mBAAA,KAAoB,EACrB,wBAAA,cAAC,OAAD,EAAK,WAAU,iCAAgD,EAAf,SAAe,CAC/C;GAGtB;CACE,gBAAgB;CAChB,oBAAoB;CACrB,CACF"}

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

@@ -1,36 +1,70 @@
-import { styled as e } from "../../styled.js";
-import { Icon as t } from "../icon/Icon.js";
-import { ActionIcon as n } from "../action-icon/ActionIcon.js";
-import { Text as r } from "../text/Text.js";
-import { Badge as i } from "../badge/Badge.js";
-import { useDataTable as a } from "./DataTableContext.js";
-import { BulkActionsSelectedRowActions as o } from "./DataTableBulkActionsSelectedRowActions.js";
-import * as s from "react";
-import { Close as c } from "@atom-learning/icons";
+import { styled } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import { ActionIcon } from "../action-icon/ActionIcon.js";
+import { Text } from "../text/Text.js";
+import { Badge } from "../badge/Badge.js";
+import { useDataTable } from "./DataTableContext.js";
+import { BulkActionsSelectedRowActions } from "./DataTableBulkActionsSelectedRowActions.js";
+import * as React$1 from "react";
+import { Close } from "@atom-learning/icons";
 //#region src/components/data-table/DataTableBulkActionsFloating.tsx
-var l = e("div", { base: /* @__PURE__ */ "flex.pl-3.pr-1.py-2.mb-4.mt-2.justify-between.items-center.rounded-lg.bg-primary-800.pointer-events-auto.z-2.w-full.mx-4.shadow-lg.sm:max-w-200.lg:max-w-250.lg:mb-8.lg:pl-4.lg:pr-1.lg:py-3.xl:max-w-350.xl:mb-8.xl:pl-6.xl:pr-2.xl:py-4".split(".") }), u = Object.assign(({ children: e, ...o }) => {
-	let { rowSelection: u, toggleAllPageRowsSelected: d } = a(), f = s.useRef(null), p = s.useMemo(() => Object.keys(u || {}).length, [u]);
-	return p === 0 ? null : /* @__PURE__ */ s.createElement("section", {
-		ref: f,
+var StyledContainer = styled("div", { base: [
+	"flex",
+	"pl-3",
+	"pr-1",
+	"py-2",
+	"mb-4",
+	"mt-2",
+	"justify-between",
+	"items-center",
+	"rounded-lg",
+	"bg-primary-800",
+	"pointer-events-auto",
+	"z-2",
+	"w-full",
+	"mx-4",
+	"shadow-lg",
+	"sm:max-w-200",
+	"lg:max-w-250",
+	"lg:mb-8",
+	"lg:pl-4",
+	"lg:pr-1",
+	"lg:py-3",
+	"xl:max-w-350",
+	"xl:mb-8",
+	"xl:pl-6",
+	"xl:pr-2",
+	"xl:py-4"
+] });
+var DataTableBulkActionsFloating = Object.assign(({ children, ...rest }) => {
+	const { rowSelection, toggleAllPageRowsSelected } = useDataTable();
+	const actionBarRef = React$1.useRef(null);
+	const numberOfSelectedRows = React$1.useMemo(() => {
+		return Object.keys(rowSelection || {}).length;
+	}, [rowSelection]);
+	const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false);
+	if (numberOfSelectedRows === 0) return null;
+	return /* @__PURE__ */ React$1.createElement("section", {
+		ref: actionBarRef,
 		className: "pointer-events-none sticky bottom-0 left-0 flex justify-center"
-	}, /* @__PURE__ */ s.createElement(l, o, /* @__PURE__ */ s.createElement("div", { className: "flex flex-auto items-center justify-start gap-2" }, /* @__PURE__ */ s.createElement(i, {
+	}, /* @__PURE__ */ React$1.createElement(StyledContainer, rest, /* @__PURE__ */ React$1.createElement("div", { className: "flex flex-auto items-center justify-start gap-2" }, /* @__PURE__ */ React$1.createElement(Badge, {
 		theme: "success",
 		size: "xs",
 		emphasis: "subtle",
 		className: "h-6 min-w-6"
-	}, p), /* @__PURE__ */ s.createElement(r, {
+	}, numberOfSelectedRows), /* @__PURE__ */ React$1.createElement(Text, {
 		size: "sm",
 		weight: "bold",
 		className: "text-white"
-	}, "selected")), /* @__PURE__ */ s.createElement("div", { className: "flex flex-auto items-center justify-end gap-3" }, e, /* @__PURE__ */ s.createElement(n, {
+	}, "selected")), /* @__PURE__ */ React$1.createElement("div", { className: "flex flex-auto items-center justify-end gap-3" }, children, /* @__PURE__ */ React$1.createElement(ActionIcon, {
 		appearance: "simple",
 		theme: "white",
 		size: "md",
-		onClick: () => d(!1),
+		onClick: handleDeselectAllPageRows,
 		label: "close"
-	}, /* @__PURE__ */ s.createElement(t, { is: c })))));
-}, { SelectedRowActions: o });
+	}, /* @__PURE__ */ React$1.createElement(Icon, { is: Close })))));
+}, { SelectedRowActions: BulkActionsSelectedRowActions });
 //#endregion
-export { u as DataTableBulkActionsFloating };
+export { DataTableBulkActionsFloating };
 
 //# sourceMappingURL=DataTableBulkActionsFloating.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableBulkActionsFloating.js","names":[],"sources":["../../../src/components/data-table/DataTableBulkActionsFloating.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Badge } from '../badge/Badge'\nimport { Icon } from '../icon/Icon'\nimport { Text } from '../text/Text'\nimport { BulkActionsSelectedRowActions } from './DataTableBulkActionsSelectedRowActions'\nimport { useDataTable } from './DataTableContext'\n\nconst StyledContainer = styled('div', {\n  base: [\n    'flex',\n    'pl-3',\n    'pr-1',\n    'py-2',\n    'mb-4',\n    'mt-2',\n    'justify-between',\n    'items-center',\n    'rounded-lg',\n    'bg-primary-800',\n    'pointer-events-auto',\n    'z-2',\n    'w-full',\n    'mx-4',\n    'shadow-lg',\n    'sm:max-w-200',\n    'lg:max-w-250',\n    'lg:mb-8',\n    'lg:pl-4',\n    'lg:pr-1',\n    'lg:py-3',\n    'xl:max-w-350',\n    'xl:mb-8',\n    'xl:pl-6',\n    'xl:pr-2',\n    'xl:py-4'\n  ]\n})\n\nexport const DataTableBulkActionsFloating = Object.assign(\n  ({\n    children,\n    ...rest\n  }: React.PropsWithChildren<React.ComponentProps<typeof StyledContainer>>) => {\n    const { rowSelection, toggleAllPageRowsSelected } = useDataTable()\n\n    const actionBarRef = React.useRef<HTMLDivElement>(null)\n\n    const numberOfSelectedRows = React.useMemo(() => {\n      return Object.keys(rowSelection || {}).length\n    }, [rowSelection])\n\n    const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n    if (numberOfSelectedRows === 0) return null\n\n    return (\n      <section\n        ref={actionBarRef}\n        className=\"pointer-events-none sticky bottom-0 left-0 flex justify-center\"\n      >\n        <StyledContainer {...rest}>\n          <div className=\"flex flex-auto items-center justify-start gap-2\">\n            <Badge\n              theme=\"success\"\n              size=\"xs\"\n              emphasis=\"subtle\"\n              className=\"h-6 min-w-6\"\n            >\n              {numberOfSelectedRows}\n            </Badge>\n            <Text size=\"sm\" weight=\"bold\" className=\"text-white\">\n              selected\n            </Text>\n          </div>\n          <div className=\"flex flex-auto items-center justify-end gap-3\">\n            {children}\n            <ActionIcon\n              appearance=\"simple\"\n              theme=\"white\"\n              size=\"md\"\n              onClick={handleDeselectAllPageRows}\n              label=\"close\"\n            >\n              <Icon is={Close} />\n            </ActionIcon>\n          </div>\n        </StyledContainer>\n      </section>\n    )\n  },\n  {\n    SelectedRowActions: BulkActionsSelectedRowActions\n  }\n)\n"],"mappings":";;;;;;;;;;AAYA,IAAM,IAAkB,EAAO,OAAO,EACpC,MAAM,sQA2BL,EACF,CAAC,EAEW,IAA+B,OAAO,QAChD,EACC,aACA,GAAG,QACwE;CAC3E,IAAM,EAAE,iBAAc,iCAA8B,GAAc,EAE5D,IAAe,EAAM,OAAuB,KAAK,EAEjD,IAAuB,EAAM,cAC1B,OAAO,KAAK,KAAgB,EAAE,CAAC,CAAC,QACtC,CAAC,EAAa,CAAC;AAMlB,QAFI,MAAyB,IAAU,OAGrC,kBAAA,cAAC,WAAD;EACE,KAAK;EACL,WAAU;EA6BF,EA3BR,kBAAA,cAAC,GAAoB,GACnB,kBAAA,cAAC,OAAD,EAAK,WAAU,mDAYT,EAXJ,kBAAA,cAAC,GAAD;EACE,OAAM;EACN,MAAK;EACL,UAAS;EACT,WAAU;EAGJ,EADL,EACK,EACR,kBAAA,cAAC,GAAD;EAAM,MAAK;EAAK,QAAO;EAAO,WAAU;EAEjC,EAF8C,WAE9C,CACH,EACN,kBAAA,cAAC,OAAD,EAAK,WAAU,iDAWT,EAVH,GACD,kBAAA,cAAC,GAAD;EACE,YAAW;EACX,OAAM;EACN,MAAK;EACL,eA7B8B,EAA0B,GAAM;EA8B9D,OAAM;EAGK,EADX,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAS,CAAA,CACR,CACT,CACU,CACV;GAGd,EACE,oBAAoB,GACrB,CACF"}
+{"version":3,"file":"DataTableBulkActionsFloating.js","names":[],"sources":["../../../src/components/data-table/DataTableBulkActionsFloating.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Badge } from '../badge/Badge'\nimport { Icon } from '../icon/Icon'\nimport { Text } from '../text/Text'\nimport { BulkActionsSelectedRowActions } from './DataTableBulkActionsSelectedRowActions'\nimport { useDataTable } from './DataTableContext'\n\nconst StyledContainer = styled('div', {\n  base: [\n    'flex',\n    'pl-3',\n    'pr-1',\n    'py-2',\n    'mb-4',\n    'mt-2',\n    'justify-between',\n    'items-center',\n    'rounded-lg',\n    'bg-primary-800',\n    'pointer-events-auto',\n    'z-2',\n    'w-full',\n    'mx-4',\n    'shadow-lg',\n    'sm:max-w-200',\n    'lg:max-w-250',\n    'lg:mb-8',\n    'lg:pl-4',\n    'lg:pr-1',\n    'lg:py-3',\n    'xl:max-w-350',\n    'xl:mb-8',\n    'xl:pl-6',\n    'xl:pr-2',\n    'xl:py-4'\n  ]\n})\n\nexport const DataTableBulkActionsFloating = Object.assign(\n  ({\n    children,\n    ...rest\n  }: React.PropsWithChildren<React.ComponentProps<typeof StyledContainer>>) => {\n    const { rowSelection, toggleAllPageRowsSelected } = useDataTable()\n\n    const actionBarRef = React.useRef<HTMLDivElement>(null)\n\n    const numberOfSelectedRows = React.useMemo(() => {\n      return Object.keys(rowSelection || {}).length\n    }, [rowSelection])\n\n    const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n    if (numberOfSelectedRows === 0) return null\n\n    return (\n      <section\n        ref={actionBarRef}\n        className=\"pointer-events-none sticky bottom-0 left-0 flex justify-center\"\n      >\n        <StyledContainer {...rest}>\n          <div className=\"flex flex-auto items-center justify-start gap-2\">\n            <Badge\n              theme=\"success\"\n              size=\"xs\"\n              emphasis=\"subtle\"\n              className=\"h-6 min-w-6\"\n            >\n              {numberOfSelectedRows}\n            </Badge>\n            <Text size=\"sm\" weight=\"bold\" className=\"text-white\">\n              selected\n            </Text>\n          </div>\n          <div className=\"flex flex-auto items-center justify-end gap-3\">\n            {children}\n            <ActionIcon\n              appearance=\"simple\"\n              theme=\"white\"\n              size=\"md\"\n              onClick={handleDeselectAllPageRows}\n              label=\"close\"\n            >\n              <Icon is={Close} />\n            </ActionIcon>\n          </div>\n        </StyledContainer>\n      </section>\n    )\n  },\n  {\n    SelectedRowActions: BulkActionsSelectedRowActions\n  }\n)\n"],"mappings":";;;;;;;;;;AAYA,IAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAa,+BAA+B,OAAO,QAChD,EACC,UACA,GAAG,WACwE;CAC3E,MAAM,EAAE,cAAc,8BAA8B,cAAc;CAElE,MAAM,eAAe,QAAM,OAAuB,KAAK;CAEvD,MAAM,uBAAuB,QAAM,cAAc;AAC/C,SAAO,OAAO,KAAK,gBAAgB,EAAE,CAAC,CAAC;IACtC,CAAC,aAAa,CAAC;CAElB,MAAM,kCAAkC,0BAA0B,MAAM;AAExE,KAAI,yBAAyB,EAAG,QAAO;AAEvC,QACE,wBAAA,cAAC,WAAD;EACE,KAAK;EACL,WAAU;EA6BF,EA3BR,wBAAA,cAAC,iBAAoB,MACnB,wBAAA,cAAC,OAAD,EAAK,WAAU,mDAYT,EAXJ,wBAAA,cAAC,OAAD;EACE,OAAM;EACN,MAAK;EACL,UAAS;EACT,WAAU;EAGJ,EADL,qBACK,EACR,wBAAA,cAAC,MAAD;EAAM,MAAK;EAAK,QAAO;EAAO,WAAU;EAEjC,EAF8C,WAE9C,CACH,EACN,wBAAA,cAAC,OAAD,EAAK,WAAU,iDAWT,EAVH,UACD,wBAAA,cAAC,YAAD;EACE,YAAW;EACX,OAAM;EACN,MAAK;EACL,SAAS;EACT,OAAM;EAGK,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAS,CAAA,CACR,CACT,CACU,CACV;GAGd,EACE,oBAAoB,+BACrB,CACF"}

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

@@ -1,19 +1,21 @@
-import { Button as e } from "../button/Button.js";
-import { useDataTable as t } from "./DataTableContext.js";
-import { Divider as n } from "../divider/Divider.js";
-import * as r from "react";
+import { Button } from "../button/Button.js";
+import { useDataTable } from "./DataTableContext.js";
+import { Divider } from "../divider/Divider.js";
+import * as React$1 from "react";
 //#region src/components/data-table/DataTableBulkActionsSelectedRowActions.tsx
-var i = ({ cancelLabel: i = "Cancel", showDividers: a = !0, children: o }) => {
-	let { toggleAllPageRowsSelected: s, rowSelection: c } = t();
-	return Object.keys(c || {}).length === 0 ? null : /* @__PURE__ */ r.createElement(r.Fragment, null, o, a && r.Children.count(o) > 0 && /* @__PURE__ */ r.createElement(n, {
+var BulkActionsSelectedRowActions = ({ cancelLabel = "Cancel", showDividers = true, children }) => {
+	const { toggleAllPageRowsSelected, rowSelection } = useDataTable();
+	const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false);
+	if (Object.keys(rowSelection || {}).length === 0) return null;
+	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, children, showDividers && React$1.Children.count(children) > 0 && /* @__PURE__ */ React$1.createElement(Divider, {
 		orientation: "vertical",
 		className: "mx-4"
-	}), /* @__PURE__ */ r.createElement(e, {
+	}), /* @__PURE__ */ React$1.createElement(Button, {
 		theme: "neutral",
-		onClick: () => s(!1)
-	}, i));
+		onClick: handleDeselectAllPageRows
+	}, cancelLabel));
 };
 //#endregion
-export { i as BulkActionsSelectedRowActions };
+export { BulkActionsSelectedRowActions };
 
 //# sourceMappingURL=DataTableBulkActionsSelectedRowActions.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableBulkActionsSelectedRowActions.js","names":[],"sources":["../../../src/components/data-table/DataTableBulkActionsSelectedRowActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button/Button'\nimport { Divider } from '../divider/Divider'\nimport { useDataTable } from './DataTableContext'\n\nexport const BulkActionsSelectedRowActions = ({\n  cancelLabel = 'Cancel',\n  showDividers = true,\n  children\n}: {\n  cancelLabel?: string\n  showDividers?: boolean\n  children: React.ReactNode\n}) => {\n  const { toggleAllPageRowsSelected, rowSelection } = useDataTable()\n\n  const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n  if (Object.keys(rowSelection || {}).length === 0) return null\n\n  return (\n    <>\n      {children}\n      {showDividers && React.Children.count(children) > 0 && (\n        <Divider orientation=\"vertical\" className=\"mx-4\" />\n      )}\n      <Button theme=\"neutral\" onClick={handleDeselectAllPageRows}>\n        {cancelLabel}\n      </Button>\n    </>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAa,KAAiC,EAC5C,iBAAc,UACd,kBAAe,IACf,kBAKI;CACJ,IAAM,EAAE,8BAA2B,oBAAiB,GAAc;AAMlE,QAFI,OAAO,KAAK,KAAgB,EAAE,CAAC,CAAC,WAAW,IAAU,OAGvD,kBAAA,cAAA,EAAA,UAAA,MACG,GACA,KAAgB,EAAM,SAAS,MAAM,EAAS,GAAG,KAChD,kBAAA,cAAC,GAAD;EAAS,aAAY;EAAW,WAAU;EAAS,CAAA,EAErD,kBAAA,cAAC,GAAD;EAAQ,OAAM;EAAU,eAVY,EAA0B,GAAM;EAY3D,EADN,EACM,CACR"}
+{"version":3,"file":"DataTableBulkActionsSelectedRowActions.js","names":[],"sources":["../../../src/components/data-table/DataTableBulkActionsSelectedRowActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button/Button'\nimport { Divider } from '../divider/Divider'\nimport { useDataTable } from './DataTableContext'\n\nexport const BulkActionsSelectedRowActions = ({\n  cancelLabel = 'Cancel',\n  showDividers = true,\n  children\n}: {\n  cancelLabel?: string\n  showDividers?: boolean\n  children: React.ReactNode\n}) => {\n  const { toggleAllPageRowsSelected, rowSelection } = useDataTable()\n\n  const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n  if (Object.keys(rowSelection || {}).length === 0) return null\n\n  return (\n    <>\n      {children}\n      {showDividers && React.Children.count(children) > 0 && (\n        <Divider orientation=\"vertical\" className=\"mx-4\" />\n      )}\n      <Button theme=\"neutral\" onClick={handleDeselectAllPageRows}>\n        {cancelLabel}\n      </Button>\n    </>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAa,iCAAiC,EAC5C,cAAc,UACd,eAAe,MACf,eAKI;CACJ,MAAM,EAAE,2BAA2B,iBAAiB,cAAc;CAElE,MAAM,kCAAkC,0BAA0B,MAAM;AAExE,KAAI,OAAO,KAAK,gBAAgB,EAAE,CAAC,CAAC,WAAW,EAAG,QAAO;AAEzD,QACE,wBAAA,cAAA,QAAA,UAAA,MACG,UACA,gBAAgB,QAAM,SAAS,MAAM,SAAS,GAAG,KAChD,wBAAA,cAAC,SAAD;EAAS,aAAY;EAAW,WAAU;EAAS,CAAA,EAErD,wBAAA,cAAC,QAAD;EAAQ,OAAM;EAAU,SAAS;EAExB,EADN,YACM,CACR"}