@algolia/satellite 1.0.0-v3.99 → 1.0.0

package/dist/esm/Switch/Switch.js

@@ -0,0 +1,84 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _templateObject, _templateObject2;
+import cx from "clsx";
+import { useLayoutEffect, useRef, useState } from "react";
+import { BUTTON_SIZE_CLASSNAMES } from "../Button/styles";
+import { RadioGroupContext } from "../RadioGroup/RadiogroupContext";
+import stl from "../styles/helpers/satellitePrefixer";
+import { prefersReducedMotion } from "../utils/prefersReducedMotion";
+import { uniqueId } from "../utils/uniqueId";
+import { buildAnimationKeySelector } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The `Switch` component is used to select one option among a list of options.
+ *
+ * See the [Switch documentation page](https://satellite.algolia.com/components/controls/switch) for more information.
+ */
+export var Switch = function Switch(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    disabled = _ref.disabled,
+    name = _ref.name,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "medium" : _ref$size;
+  var _useState = useState(function () {
+      return uniqueId("SwitchName-");
+    }),
+    _useState2 = _slicedToArray(_useState, 1),
+    componentDefaultName = _useState2[0];
+  var radioName = name !== null && name !== void 0 ? name : componentDefaultName;
+  var containerRef = useRef(null);
+  var valueIndicatorRef = useRef(null);
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    valueIndicatorStyle = _useState4[0],
+    setValueIndicatorStyle = _useState4[1];
+
+  /**
+   * Positionning might be affected by different changes (changes in options order/number/label size, widget size etc),
+   * so we want to recompute things on every render. To avoid infinite loops, we check if the style
+   * actually changed before applying it.
+   */
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useLayoutEffect(function () {
+    var targetEl = document.querySelector(buildAnimationKeySelector(radioName, value));
+    if (!targetEl || !valueIndicatorRef.current || !containerRef.current) {
+      return setValueIndicatorStyle(undefined);
+    }
+    var containerRect = containerRef.current.getBoundingClientRect();
+    var targetRect = targetEl.getBoundingClientRect();
+    var duration = prefersReducedMotion ? "0ms" : "200ms";
+    var newValueIndicatorStyle = {
+      width: targetRect.width,
+      transform: "translateX(".concat(targetRect.x - containerRect.x, "px)"),
+      visibility: "visible",
+      transitionProperty: "width, transform",
+      transitionDuration: duration,
+      transitionTimingFunction: "ease-in-out"
+    };
+    if (newValueIndicatorStyle.transform !== (valueIndicatorStyle === null || valueIndicatorStyle === void 0 ? void 0 : valueIndicatorStyle.transform) || newValueIndicatorStyle.width !== (valueIndicatorStyle === null || valueIndicatorStyle === void 0 ? void 0 : valueIndicatorStyle.width)) {
+      setValueIndicatorStyle(newValueIndicatorStyle);
+    }
+  });
+  return /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
+    value: {
+      value: value,
+      name: radioName,
+      onChange: onChange,
+      disabled: disabled
+    },
+    children: /*#__PURE__*/_jsxs("div", {
+      ref: containerRef,
+      className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["switch\n           relative inline-flex typo-display-body rounded bg-grey-100\n           ", "\n          "])), size === "large" ? "switch-large space-x-1" : "space-x-2px"), BUTTON_SIZE_CLASSNAMES[size], className),
+      children: [/*#__PURE__*/_jsx("div", {
+        ref: valueIndicatorRef,
+        style: valueIndicatorStyle,
+        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            absolute top-0 left-0 z-0 min-w-4 h-full\n            btn btn-neutral\n            pointer-events-none invisible\n          "])))
+      }), children]
+    })
+  });
+};

package/dist/esm/Switch/Switch.tailwind.d.ts

@@ -0,0 +1,5 @@
+export = switchPlugin;
+declare const switchPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
+};

package/dist/esm/Switch/Switch.tailwind.js

@@ -0,0 +1,24 @@
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var switchPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  addComponents({
+    ".switch": {
+      // this + position relative helps create a new stack context (helps with z-index)
+      zIndex: "1",
+      boxShadow: "0 0 0 2px ".concat(theme("colors.grey.100")),
+      "&:focus-within:has(:focus-visible)": {
+        boxShadow: "\n          0 0 0 1px ".concat(theme("colors.grey.100"), ",\n          0 0 0 2px ").concat(theme("colors.accent.600"), "\n        ")
+      }
+    },
+    ".switch-large": {
+      boxShadow: "0 0 0 4px ".concat(theme("colors.grey.100")),
+      "&:focus-within:has(:focus-visible)": {
+        boxShadow: "\n          0 0 0 3px ".concat(theme("colors.grey.100"), ",\n          0 0 0 4px ").concat(theme("colors.accent.600"), "\n        ")
+      }
+    }
+  });
+});
+export default switchPlugin;

package/dist/esm/Switch/SwitchOption.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode, VFC } from "react";
+export interface SwitchOptionProps {
+    value: string;
+    disabled?: boolean;
+    children: ReactNode;
+}
+export declare const SwitchOption: VFC<SwitchOptionProps>;

package/dist/esm/Switch/SwitchOption.js

@@ -0,0 +1,38 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { useRadioGroupContext } from "../RadioGroup/RadiogroupContext";
+import stl from "../styles/helpers/satellitePrefixer";
+import { OverflowTooltipWrapper } from "../Tooltip/OverflowTooltipWrapper";
+import { buildAnimationProps } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var SwitchOption = function SwitchOption(_ref) {
+  var value = _ref.value,
+    disabled = _ref.disabled,
+    children = _ref.children;
+  var context = useRadioGroupContext();
+  var checked = context.value === value;
+  var inputDisabled = context.disabled || disabled;
+  return /*#__PURE__*/_jsxs("label", _objectSpread(_objectSpread({
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        inline-flex grow shrink justify-center items-center min-w-16 max-w-48 px-4 z-10 text-grey-600\n        ", "\n        ", "\n      "])), inputDisabled ? "cursor-not-allowed opacity-60 rounded bg-grey-100" : "cursor-pointer hover:text-grey-900", !checked && !inputDisabled && "rounded motion-safe:transition-colors active:bg-accent-200/20 motion-safe:duration-100 ease-linear")
+  }, buildAnimationProps(context.name, value)), {}, {
+    children: [/*#__PURE__*/_jsx("input", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["w-0 h-0 opacity-0"]))),
+      type: "radio",
+      value: value,
+      name: context.name,
+      checked: checked,
+      disabled: inputDisabled,
+      onChange: function onChange(evt) {
+        return context.onChange(evt.currentTarget.value);
+      }
+    }), /*#__PURE__*/_jsx(OverflowTooltipWrapper, {
+      children: /*#__PURE__*/_jsx("span", {
+        children: children
+      })
+    })]
+  }));
+};

package/dist/esm/Switch/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Switch";
+export * from "./SwitchOption";

package/dist/esm/Switch/index.js

@@ -0,0 +1,2 @@
+export * from "./Switch";
+export * from "./SwitchOption";

package/dist/esm/Switch/types.d.ts

@@ -0,0 +1,7 @@
+export declare type SwitchSize = "small" | "medium" | "large";
+export interface SwitchContextValue {
+    name: string;
+    value: string;
+    disabled?: boolean;
+    onChange: (value: string) => void;
+}

package/dist/esm/Switch/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Switch/utils.d.ts

@@ -0,0 +1,6 @@
+export declare const SWITCH_ANIMATION_KEY = "data-switch-animation-key";
+export declare const buildAnimationKeyValue: (name: string, value: string) => string;
+export declare const buildAnimationKeySelector: (name: string, value: string) => string;
+export declare const buildAnimationProps: (name: string, value: string) => {
+    "data-switch-animation-key": string;
+};

package/dist/esm/Switch/utils.js

@@ -0,0 +1,11 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+export var SWITCH_ANIMATION_KEY = "data-switch-animation-key";
+export var buildAnimationKeyValue = function buildAnimationKeyValue(name, value) {
+  return "".concat(name, "-").concat(value);
+};
+export var buildAnimationKeySelector = function buildAnimationKeySelector(name, value) {
+  return "[".concat(SWITCH_ANIMATION_KEY, "=\"").concat(buildAnimationKeyValue(name, value), "\"]");
+};
+export var buildAnimationProps = function buildAnimationProps(name, value) {
+  return _defineProperty({}, SWITCH_ANIMATION_KEY, buildAnimationKeyValue(name, value));
+};

package/dist/esm/Tables/DataTable/DataTable.d.ts

@@ -0,0 +1,55 @@
+import type { ReactNode } from "react";
+import type { ColumnDefinition, DataConfiguration, GetItemId, PaginationConfiguration, Row, SelectMode, Sorting, Status } from "./types";
+declare type CanSelectItem<Item> = (item: Item, idx: number) => boolean;
+export declare type SortMode = "single" | "multi";
+export declare type DataTableLocale = {
+    selectAllButton?: string;
+    noDataTitle?: string;
+    noDataDescription?: string;
+    loadingTitle?: string;
+    loadingDescription?: string;
+    errorTitle?: string;
+    errorDescription?: string;
+};
+interface BaseDataTableProps<Item> {
+    /** The data which will be passed along to the table for rendering */
+    data: Item[];
+    /** Quite a few cases require you to specify the `itemID` which you can do using this prop */
+    itemId?: GetItemId<Item>;
+    /** The columns define the layout of your table and the respective rows and cells */
+    columns: ColumnDefinition<Item>[];
+    pagination?: PaginationConfiguration;
+    /** the `onChange` is triggered when either sorting or paginating */
+    onChange?(dataConfiguration: DataConfiguration): void;
+    /** Specify the global status of the table */
+    status?: Status;
+    /** Allows for specifying a custom empty state */
+    noDataContent?: ReactNode;
+    /** Allows for specifying a custom error state */
+    errorContent?: ReactNode;
+    canHoverRow?(row: Row<Item>): boolean;
+    onRowHoveredChanged?(row: Row<Item> | null): void;
+    sorting?: Sorting[];
+    sortMode?: SortMode;
+    locale?: DataTableLocale;
+}
+declare type DataTableWithSelectMode<Item> = {
+    selectMode: Exclude<SelectMode, "none">;
+    selection?: string[];
+    onSelectionChange?(rowId: string[]): void;
+    canSelectItem?: CanSelectItem<Item>;
+};
+declare type DataTableWithoutSelectMode = {
+    selectMode?: Extract<SelectMode, "none">;
+    selection?: never;
+    onSelectionChange?: never;
+    canSelectItem?: never;
+};
+export declare type DataTableProps<Item> = BaseDataTableProps<Item> & (DataTableWithSelectMode<Item> | DataTableWithoutSelectMode);
+/**
+ * The `DataTable` component displays tabular data in a grid layout. It allows users to view, sort, filter, and interact with data in a structured way.
+ *
+ * See the [Data Table documentation page](https://satellite.algolia.com/layouts/data-table) for more information.
+ */
+export declare const DataTable: <Item extends {}>({ data, itemId, columns, onChange, status, noDataContent, errorContent, sorting, sortMode, pagination, selectMode, selection, onSelectionChange, canSelectItem, canHoverRow, onRowHoveredChanged, locale: propsLocale, }: DataTableProps<Item>) => JSX.Element;
+export {};

package/dist/esm/Tables/DataTable/DataTable.js

@@ -0,0 +1,243 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import compact from "lodash/compact";
+import get from "lodash/get";
+import { useEffect, useState } from "react";
+import { Checkbox } from "../../Checkbox";
+import { RadioButton } from "../../RadioGroup";
+import { useLocale } from "../../Satellite";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { toSentenceCase } from "../../utils";
+import { Table } from "../Table";
+import { DataTableBody } from "./components/Body";
+import { DataTableFooter } from "./components/Footer";
+import { DataTableHeader } from "./components/Header";
+import { DataTableLoader } from "./components/Loader";
+import { isDeterminatePagination, isIndeterminatePagination } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_DATATABLE_LOCALE = {
+  selectAllButton: "Select all",
+  noDataTitle: "Empty",
+  noDataDescription: "There is no data to display",
+  loadingTitle: "It appears to be taking a while to get your data",
+  loadingDescription: "Please hold or try again later",
+  errorTitle: "Error",
+  errorDescription: "An error occurred while loading data."
+};
+
+// Selection
+
+var DEFAULT_GET_ITEM_ID = function DEFAULT_GET_ITEM_ID(_, idx) {
+  return String(idx);
+};
+
+/**
+ * The `DataTable` component displays tabular data in a grid layout. It allows users to view, sort, filter, and interact with data in a structured way.
+ *
+ * See the [Data Table documentation page](https://satellite.algolia.com/layouts/data-table) for more information.
+ */
+export var DataTable = function DataTable(_ref) {
+  var data = _ref.data,
+    itemId = _ref.itemId,
+    columns = _ref.columns,
+    onChange = _ref.onChange,
+    _ref$status = _ref.status,
+    status = _ref$status === void 0 ? "success" : _ref$status,
+    noDataContent = _ref.noDataContent,
+    errorContent = _ref.errorContent,
+    _ref$sorting = _ref.sorting,
+    sorting = _ref$sorting === void 0 ? [] : _ref$sorting,
+    _ref$sortMode = _ref.sortMode,
+    sortMode = _ref$sortMode === void 0 ? "single" : _ref$sortMode,
+    _ref$pagination = _ref.pagination,
+    pagination = _ref$pagination === void 0 ? false : _ref$pagination,
+    _ref$selectMode = _ref.selectMode,
+    selectMode = _ref$selectMode === void 0 ? "none" : _ref$selectMode,
+    selection = _ref.selection,
+    onSelectionChange = _ref.onSelectionChange,
+    canSelectItem = _ref.canSelectItem,
+    canHoverRow = _ref.canHoverRow,
+    onRowHoveredChanged = _ref.onRowHoveredChanged,
+    propsLocale = _ref.locale;
+  var contextLocale = useLocale("dataTable");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DATATABLE_LOCALE), contextLocale), propsLocale);
+  if (process.env.NODE_ENV !== "production") {
+    var _selection$length;
+    if (itemId === undefined && (sorting.length > 0 || selectMode !== "none")) {
+      console.warn("You did not provide a custom `itemId` function, but you have defined `sorting` and/or `selectMode`. This can lead to unexpected results.");
+    }
+    if (selectMode === "single" && ((_selection$length = selection === null || selection === void 0 ? void 0 : selection.length) !== null && _selection$length !== void 0 ? _selection$length : 0) > 1) {
+      console.warn("You can only have one selected item at a time in single `selectMode`.");
+    }
+  }
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    hoveredRowId = _useState2[0],
+    setHoveredRowId = _useState2[1];
+  useEffect(function () {
+    // Reset hovered row when data changes to avoid inconsistent state
+    setHoveredRowId(undefined);
+  }, [data]);
+  var computedColumns = compact([selectMode === "single" && {
+    id: "_internal_singleSelect",
+    accessor: "_internal_singleSelect",
+    Header: function Header() {
+      return /*#__PURE__*/_jsx("span", {
+        className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["sr-only"]))),
+        children: "Selected row"
+      });
+    },
+    Cell: function Cell(_ref2) {
+      var row = _ref2.row;
+      return /*#__PURE__*/_jsx("div", {
+        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex"]))),
+        children: /*#__PURE__*/_jsx(RadioButton, {
+          defaultChecked: row.selected,
+          disabled: !row.selectable,
+          className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["", ""])), row.hovered || row.selected ? "opacity-100" : "opacity-0 select-none")
+        })
+      });
+    },
+    className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["w-3"])))
+  }, selectMode === "multi" && {
+    id: "_internal_multiSelect",
+    accessor: "_internal_multiSelect",
+    Header: function Header() {
+      var unselectableRows = rows.filter(function (row) {
+        return !row.selectable && row.selected;
+      }).map(function (r) {
+        return r.id;
+      });
+      var selectableRows = rows.filter(function (row) {
+        return row.selectable;
+      }).map(function (r) {
+        return r.id;
+      });
+      var selectionLength = (selection !== null && selection !== void 0 ? selection : []).length;
+      var dataLength = pagination ? pagination.itemsPerPage : data.length;
+      var isChecked = selectionLength === dataLength;
+      var isIndeterminate = selectionLength > 0 && selectionLength !== dataLength;
+      return /*#__PURE__*/_jsx(Checkbox, {
+        "aria-label": locale.selectAllButton,
+        checked: isChecked,
+        indeterminate: isIndeterminate,
+        onClick: function onClick() {
+          return isChecked ? onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(unselectableRows) : isIndeterminate ? onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(selectionLength === selectableRows.length + unselectableRows.length ? unselectableRows : [].concat(_toConsumableArray(unselectableRows), _toConsumableArray(selectableRows))) : onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([].concat(_toConsumableArray(unselectableRows), _toConsumableArray(selectableRows)));
+        }
+      });
+    },
+    Cell: function Cell(_ref3) {
+      var row = _ref3.row;
+      return /*#__PURE__*/_jsx("div", {
+        className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex"]))),
+        children: /*#__PURE__*/_jsx(Checkbox, {
+          checked: row.selected,
+          disabled: !row.selectable,
+          className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["", ""])), row.hovered || row.selected ? "opacity-100" : "opacity-0 select-none")
+        })
+      });
+    },
+    className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["w-3"])))
+  }].concat(_toConsumableArray(columns.map(function (c) {
+    var _c$Header;
+    return typeof c === "string" ? {
+      id: c,
+      accessor: c,
+      Header: toSentenceCase(c)
+    } : _objectSpread(_objectSpread({}, c), {}, {
+      Header: (_c$Header = c.Header) !== null && _c$Header !== void 0 ? _c$Header : toSentenceCase(c.id)
+    });
+  }))));
+  var getItemIdInternal = itemId || DEFAULT_GET_ITEM_ID;
+  var rows = data.map(function (item, index) {
+    var _ref4;
+    var id = typeof getItemIdInternal === "string" ? String(get(item, getItemIdInternal, DEFAULT_GET_ITEM_ID(item, index))) : getItemIdInternal(item, index);
+    var hovered = hoveredRowId === id;
+    var sanitizedSelection = (_ref4 = selectMode === "single" ? selection === null || selection === void 0 ? void 0 : selection.slice(0, 1) : selectMode === "none" ? [] : selection) !== null && _ref4 !== void 0 ? _ref4 : [];
+    var selected = sanitizedSelection.includes(id);
+    var selectable = selectMode !== "none" && (!canSelectItem || canSelectItem(item, index));
+    return {
+      item: item,
+      id: id,
+      hovered: hovered,
+      selected: selected,
+      selectable: selectable
+    };
+  });
+  var internalSorting = computedColumns.map(function (c) {
+    var _sorting$find;
+    if (c.sort === undefined) return [c.id, "none"];
+    var columnDirection = (_sorting$find = sorting.find(function (_ref5) {
+      var _ref6 = _slicedToArray(_ref5, 1),
+        columnId = _ref6[0];
+      return columnId === c.id;
+    })) === null || _sorting$find === void 0 ? void 0 : _sorting$find[1];
+    if (columnDirection) return [c.id, columnDirection];
+    return [c.id, "desc"];
+  });
+  var shouldRenderPagination = function shouldRenderPagination() {
+    if (isDeterminatePagination(pagination)) return pagination && pagination.totalItemsCount > 0;
+    if (isIndeterminatePagination(pagination)) return pagination && data.length > 0;
+    return false;
+  };
+  var onRowHoverChange = function onRowHoverChange(row) {
+    setHoveredRowId(row === null || row === void 0 ? void 0 : row.id);
+    onRowHoveredChanged === null || onRowHoveredChanged === void 0 || onRowHoveredChanged(row);
+  };
+  var onToggleSort = function onToggleSort(columnId, direction) {
+    var newSorting = internalSorting.map(function (_ref7) {
+      var _ref8 = _slicedToArray(_ref7, 2),
+        colId = _ref8[0],
+        d = _ref8[1];
+      return columnId === colId ? [columnId, direction] : [colId, sortMode === "multi" ? d : "none"];
+    });
+    onChange === null || onChange === void 0 || onChange({
+      pagination: pagination,
+      sorting: newSorting
+    });
+  };
+  var handlePaginationChange = function handlePaginationChange(dataConfiguration) {
+    return onChange === null || onChange === void 0 ? void 0 : onChange(dataConfiguration);
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["relative"]))),
+    children: [status === "loading" && /*#__PURE__*/_jsx("div", {
+      className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["absolute bg-white/50 z-10 w-full h-full flex items-center justify-center"]))),
+      children: /*#__PURE__*/_jsx(DataTableLoader, {
+        className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["-mt-12"]))),
+        locale: locale
+      })
+    }), /*#__PURE__*/_jsxs(Table, {
+      className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["datatable ", " ", ""])), status === "loading" && "pointer-events-none select-none", status === "loading" && data.length === 0 && "h-48"),
+      highlight: false,
+      footer: shouldRenderPagination() && /*#__PURE__*/_jsx(DataTableFooter, {
+        pagination: pagination,
+        onChange: handlePaginationChange
+      }),
+      children: [/*#__PURE__*/_jsx(DataTableHeader, {
+        disabled: status !== "success" || rows.length === 0,
+        columns: computedColumns,
+        onToggleSort: onToggleSort,
+        sorting: internalSorting
+      }), /*#__PURE__*/_jsx(DataTableBody, {
+        rows: rows,
+        columns: computedColumns,
+        status: status,
+        noDataContent: noDataContent,
+        errorContent: errorContent,
+        selectMode: selectMode,
+        selection: selection,
+        canHoverRow: canHoverRow,
+        onRowHoverChange: onRowHoverChange,
+        onSelectionChange: onSelectionChange,
+        locale: locale
+      })]
+    })]
+  });
+};

package/dist/esm/Tables/DataTable/DataTable.tailwind.d.ts

@@ -0,0 +1,5 @@
+export = datatablePlugin;
+declare const datatablePlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
+};

package/dist/esm/Tables/DataTable/DataTable.tailwind.js

@@ -0,0 +1,22 @@
+import _plugin from "tailwindcss/plugin";
+// purgecss whitelist: th, td, tr
+
+var plugin = _plugin;
+var datatablePlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  addComponents({
+    ".datatable": {
+      th: {
+        padding: "0 !important"
+      },
+      "tr.row-disabled td": {
+        cursor: "not-allowed"
+      },
+      "tr:not(.row-disabled):hover td": {
+        backgroundColor: theme("colors.grey.50")
+      }
+    }
+  });
+});
+export default datatablePlugin;

package/dist/esm/Tables/DataTable/components/Body.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import type { DataTableLocale, DataTableProps } from "../DataTable";
+import type { AdvancedColumnDefinition, Row, SelectMode, Status } from "../types";
+export interface DataTableBodyProps<Item> extends Pick<DataTableProps<Item>, "selection" | "onSelectionChange" | "canHoverRow"> {
+    rows: Row<Item>[];
+    status?: Status;
+    noDataContent?: ReactNode;
+    errorContent?: ReactNode;
+    columns: AdvancedColumnDefinition<Item>[];
+    onRowHoverChange(row: Row<Item> | null): void;
+    selectMode: SelectMode;
+    locale: Required<DataTableLocale>;
+}
+export declare const DataTableBody: <Item extends {}>({ rows, columns, status, noDataContent, errorContent, selectMode, selection, onSelectionChange, onRowHoverChange, canHoverRow, locale, }: DataTableBodyProps<Item>) => JSX.Element;