@algolia/satellite 1.1.0 → 1.1.2

package/dist/cjs/Layout/Sidebar/SidebarLink.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarLink = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Icons = require("../../Icons");
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _useLinkProps = require("../../utils/useLinkProps");
+var _SidebarContext = require("./SidebarContext");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+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) { (0, _defineProperty2["default"])(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; }
+var SidebarLink = exports.SidebarLink = function SidebarLink(props) {
+  var _linkProps$href;
+  var _useSidebarContext = (0, _SidebarContext.useSidebarContext)(),
+    isLinkActive = _useSidebarContext.isLinkActive;
+  var id = props.id,
+    className = props.className,
+    disabled = props.disabled,
+    Icon = props.icon,
+    children = props.children;
+  var linkProps = (0, _useLinkProps.useLinkProps)(props);
+  var isExternalLink = linkProps.target === "_blank";
+  var isActive = !disabled && !isExternalLink && isLinkActive((_linkProps$href = linkProps.href) !== null && _linkProps$href !== void 0 ? _linkProps$href : "");
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread({}, linkProps), {}, {
+    id: id,
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n          flex items-center overflow-hidden w-full\n          group hover:no-underline focus:outline-none\n          ", "\n        "])), disabled ? "cursor-not-allowed" : "cursor-pointer"), className),
+    "aria-current": isActive,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 mr-3 ", ""])), disabled ? "text-grey-300" : "text-grey-500"),
+      width: "1rem",
+      height: "1rem"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n          flex-1 inline-flex items-center overflow-hidden\n          ", ""])), disabled ? "text-grey-300" : isActive ? "font-semibold text-accent-600" : "typo-subdued group-focus:text-accent-600 group-hover:text-accent-600"),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["truncate"]))),
+        children: children
+      }), isExternalLink && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.ExternalLinkIcon, {
+        className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 ml-1 ", ""])), disabled ? "text-grey-300" : "text-grey-500 group-focus:text-accent-600 group-hover:text-accent-600"),
+        size: "1em"
+      })]
+    })]
+  }));
+};

package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/ActiveLinkIndicator.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActiveLinkIndicator = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3;
+var LINK_HEIGHT_PX = 24;
+var LINKS_SPACING_PX = 8;
+var ActiveLinkIndicator = exports.ActiveLinkIndicator = function ActiveLinkIndicator(_ref) {
+  var className = _ref.className,
+    activeIndex = _ref.activeIndex,
+    linksCount = _ref.linksCount;
+  var showIndicator = typeof activeIndex === "number" && activeIndex >= 0;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-4 flex justify-center"]))), className),
+    style: {
+      height: linksCount * LINK_HEIGHT_PX + (linksCount - 1) * LINKS_SPACING_PX
+    },
+    "aria-hidden": true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["w-px h-full bg-grey-200"]))),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n            w-px bg-accent-500\n            motion-safe:transition-transform motion-safe:duration-100 ease-in-out\n            ", "\n          "])), showIndicator ? "visible" : "hidden"),
+        style: {
+          height: LINK_HEIGHT_PX,
+          transform: typeof activeIndex === "number" ? "translateY(".concat(activeIndex * (LINK_HEIGHT_PX + LINKS_SPACING_PX), "px)") : undefined
+        }
+      })
+    })
+  });
+};

package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarGroupLink = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _Icons = require("../../../Icons");
+var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
+var _useLinkProps = require("../../../utils/useLinkProps");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3;
+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) { (0, _defineProperty2["default"])(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; }
+var SidebarGroupLink = exports.SidebarGroupLink = function SidebarGroupLink(props) {
+  var label = props.label,
+    active = props.active,
+    id = props.id,
+    disabled = props.disabled;
+  var linkProps = (0, _useLinkProps.useLinkProps)(props);
+  var isExternalLink = linkProps.target === "_blank";
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread({}, linkProps), {}, {
+    id: id,
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n        inline-flex w-full items-center hover:no-underline focus:outline-none leading-md\n        ", "\n        ", ""])), disabled ? "cursor-not-allowed" : "cursor-pointer", disabled ? "text-grey-300" : active ? "font-semibold text-accent-600" : "typo-subdued hover:text-accent-600 focus:text-accent-600"),
+    "aria-current": active,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["truncate"]))),
+      children: label
+    }), isExternalLink && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.ExternalLinkIcon, {
+      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["ml-1 shrink-0"]))),
+      size: "1em"
+    })]
+  }));
+};

package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode, VFC } from "react";
+import { type IconComponentType } from "../../../Icons";
+import type { SidebarLinksGroupLink } from "./types";
+declare type SidebarLinksGroupBaseProps = {
+    id?: string;
+    /** @ignore */
+    className?: string;
+    links: SidebarLinksGroupLink[];
+};
+export declare type StaticSidebarLinksGroupProps = SidebarLinksGroupBaseProps & {
+    title?: never;
+    icon?: never;
+    initialIsOpen?: never;
+    onGroupToggle?: never;
+};
+export declare type CollapsibleSidebarLinksGroupProps = SidebarLinksGroupBaseProps & {
+    title: ReactNode;
+    icon: IconComponentType;
+    initialIsOpen?: boolean;
+    onGroupToggle?: (open: boolean) => void;
+};
+export declare type SidebarLinksGroupProps = StaticSidebarLinksGroupProps | CollapsibleSidebarLinksGroupProps;
+export declare const SidebarLinksGroup: VFC<SidebarLinksGroupProps>;
+export {};

package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarLinksGroup = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
+var _react = require("react");
+var _usePrevious = _interopRequireDefault(require("react-use/lib/usePrevious"));
+var _Icons = require("../../../Icons");
+var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
+var _SidebarContext = require("../SidebarContext");
+var _ActiveLinkIndicator = require("./ActiveLinkIndicator");
+var _SidebarGroupLink = require("./SidebarGroupLink");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+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) { (0, _defineProperty2["default"])(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; }
+var isCollapsibleSidebarLinksGroupProps = function isCollapsibleSidebarLinksGroupProps(props) {
+  return "title" in props && "icon" in props;
+};
+var SidebarLinksGroup = exports.SidebarLinksGroup = function SidebarLinksGroup(props) {
+  var _useSidebarContext = (0, _SidebarContext.useSidebarContext)(),
+    isLinkActive = _useSidebarContext.isLinkActive;
+  var id = props.id,
+    className = props.className,
+    links = props.links;
+  var contentId = (0, _react.useMemo)(function () {
+    return (0, _uniqueId["default"])("links-group-");
+  }, []);
+  var activeLinkIndex = links.findIndex(function (link) {
+    return !link.disabled && isLinkActive(link.href);
+  });
+  var previousActiveLinkIndex = (0, _usePrevious["default"])(activeLinkIndex);
+  var hasMatchingLink = activeLinkIndex >= 0;
+  var _useState = (0, _react.useState)(!isCollapsibleSidebarLinksGroupProps(props) || hasMatchingLink || props.initialIsOpen !== false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (isCollapsibleSidebarLinksGroupProps(props)) {
+      var _props$onGroupToggle;
+      (_props$onGroupToggle = props.onGroupToggle) === null || _props$onGroupToggle === void 0 || _props$onGroupToggle.call(props, isOpen);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+  (0, _react.useEffect)(function () {
+    if (!isOpen && activeLinkIndex >= 0 && typeof previousActiveLinkIndex === "number" && activeLinkIndex !== previousActiveLinkIndex) {
+      setIsOpen(true);
+    }
+  }, [activeLinkIndex, previousActiveLinkIndex, isOpen]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    id: id,
+    className: className,
+    children: [isCollapsibleSidebarLinksGroupProps(props) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+      className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n          flex w-full text-left items-center mb-4 overflow-hidden focus:outline-none group cursor-pointer"]))),
+      onClick: function onClick() {
+        return setIsOpen(!isOpen);
+      },
+      "aria-expanded": isOpen,
+      "aria-controls": contentId,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(props.icon, {
+        className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 text-grey-500 mr-3"]))),
+        width: "1rem",
+        height: "1rem"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["truncate display-subheading uppercase text-grey-800 group-focus:text-accent-500 group-hover:text-accent-500 mr-2"]))),
+        children: props.title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.ChevronRightIcon, {
+        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 text-grey-500 motion-safe:transition-all motion-safe:duration-150 ease-in-out ", ""])), isOpen && "rotate-90"),
+        size: "1rem"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      id: contentId,
+      className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex ", ""])), !isOpen && "hidden"),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ActiveLinkIndicator.ActiveLinkIndicator, {
+        className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 mr-3"]))),
+        activeIndex: activeLinkIndex,
+        linksCount: links.length
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["flex-1 space-y-2 overflow-hidden"]))),
+        children: links.map(function (link, idx) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["overflow-hidden"]))),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SidebarGroupLink.SidebarGroupLink, _objectSpread(_objectSpread({}, link), {}, {
+              active: activeLinkIndex === idx
+            }))
+          }, "".concat(idx, "-").concat(link.href));
+        })
+      })]
+    })]
+  });
+};

package/dist/cjs/Layout/Sidebar/SidebarNav.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarNav = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("react");
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _SidebarContext = require("./SidebarContext");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+var SidebarNav = exports.SidebarNav = function SidebarNav(_ref) {
+  var id = _ref.id,
+    className = _ref.className,
+    spacingProp = _ref.spacing,
+    label = _ref.label,
+    children = _ref.children;
+  var _useSidebarContext = (0, _SidebarContext.useSidebarContext)(),
+    variant = _useSidebarContext.variant;
+  var spacing = typeof spacingProp === "string" ? spacingProp : variant === "primary" ? "small" : "large";
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("nav", {
+    id: id,
+    className: className,
+    "aria-label": label,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+      className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["", ""])), spacing === "small" ? "space-y-2" : "px-3 space-y-8"),
+      children: _react.Children.map(children, function (child, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+          children: child
+        }, index);
+      })
+    })
+  });
+};

package/dist/cjs/Layout/Tables/DataTable/DataTable.js

@@ -0,0 +1,248 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DataTable = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _compact = _interopRequireDefault(require("lodash/compact"));
+var _get = _interopRequireDefault(require("lodash/get"));
+var _react = require("react");
+var _Fields = require("../../../Fields");
+var _Satellite = require("../../../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
+var _utils = require("../../../utils");
+var _Table = require("../Table");
+var _Body = require("./components/Body");
+var _Footer = require("./components/Footer");
+var _Header = require("./components/Header");
+var _Loader = require("./components/Loader");
+var _utils2 = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+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) { (0, _defineProperty2["default"])(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; }
+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.
+ */
+var DataTable = exports.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 = (0, _Satellite.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 = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    hoveredRowId = _useState2[0],
+    setHoveredRowId = _useState2[1];
+  (0, _react.useEffect)(function () {
+    // Reset hovered row when data changes to avoid inconsistent state
+    setHoveredRowId(undefined);
+  }, [data]);
+  var computedColumns = (0, _compact["default"])([selectMode === "single" && {
+    id: "_internal_singleSelect",
+    accessor: "_internal_singleSelect",
+    Header: function Header() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["sr-only"]))),
+        children: "Selected row"
+      });
+    },
+    Cell: function Cell(_ref2) {
+      var row = _ref2.row;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex"]))),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fields.RadioButton, {
+          defaultChecked: row.selected,
+          disabled: !row.selectable,
+          className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["", ""])), row.hovered || row.selected ? "opacity-100" : "opacity-0 select-none")
+        })
+      });
+    },
+    className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["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__*/(0, _jsxRuntime.jsx)(_Fields.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((0, _toConsumableArray2["default"])(unselectableRows), (0, _toConsumableArray2["default"])(selectableRows))) : onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([].concat((0, _toConsumableArray2["default"])(unselectableRows), (0, _toConsumableArray2["default"])(selectableRows)));
+        }
+      });
+    },
+    Cell: function Cell(_ref3) {
+      var row = _ref3.row;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex"]))),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fields.Checkbox, {
+          checked: row.selected,
+          disabled: !row.selectable,
+          className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["", ""])), row.hovered || row.selected ? "opacity-100" : "opacity-0 select-none")
+        })
+      });
+    },
+    className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["w-3"])))
+  }].concat((0, _toConsumableArray2["default"])(columns.map(function (c) {
+    var _c$Header;
+    return typeof c === "string" ? {
+      id: c,
+      accessor: c,
+      Header: (0, _utils.toSentenceCase)(c)
+    } : _objectSpread(_objectSpread({}, c), {}, {
+      Header: (_c$Header = c.Header) !== null && _c$Header !== void 0 ? _c$Header : (0, _utils.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((0, _get["default"])(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 = (0, _slicedToArray2["default"])(_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 ((0, _utils2.isDeterminatePagination)(pagination)) return pagination && pagination.totalItemsCount > 0;
+    if ((0, _utils2.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 = (0, _slicedToArray2["default"])(_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__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["relative"]))),
+    children: [status === "loading" && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["absolute bg-white/50 z-10 w-full h-full flex items-center justify-center"]))),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loader.DataTableLoader, {
+        className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["-mt-12"]))),
+        locale: locale
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Table.Table, {
+      className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["datatable ", " ", ""])), status === "loading" && "pointer-events-none select-none", status === "loading" && data.length === 0 && "h-48"),
+      highlight: false,
+      footer: shouldRenderPagination() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.DataTableFooter, {
+        pagination: pagination,
+        onChange: handlePaginationChange
+      }),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header.DataTableHeader, {
+        disabled: status !== "success" || rows.length === 0,
+        columns: computedColumns,
+        onToggleSort: onToggleSort,
+        sorting: internalSorting
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Body.DataTableBody, {
+        rows: rows,
+        columns: computedColumns,
+        status: status,
+        noDataContent: noDataContent,
+        errorContent: errorContent,
+        selectMode: selectMode,
+        selection: selection,
+        canHoverRow: canHoverRow,
+        onRowHoverChange: onRowHoverChange,
+        onSelectionChange: onSelectionChange,
+        locale: locale
+      })]
+    })]
+  });
+};