@algolia/satellite 1.0.0-beta.130 → 1.0.0-beta.133

package/cjs/Switch/Switch.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,25 +11,23 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _react = _interopRequireWildcard(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _react = require("react");
 
 var _styles = require("../Button/styles");
 
 var _RadioGroup = require("../RadioGroup");
 
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+
 var _uniqueId = _interopRequireDefault(require("../utils/uniqueId"));
 
 var _utils = require("./utils");
 
-var _templateObject, _templateObject2;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _jsxRuntime = require("react/jsx-runtime");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _templateObject, _templateObject2;
 
 var Switch = function Switch(_ref) {
   var className = _ref.className,
@@ -87,21 +83,23 @@ var Switch = function Switch(_ref) {
       setValueIndicatorStyle(newValueIndicatorStyle);
     }
   });
-  return /*#__PURE__*/_react["default"].createElement(_RadioGroup.RadioGroupContext.Provider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioGroupContext.Provider, {
     value: {
       value: value,
       name: radioName,
       onChange: onChange,
       disabled: disabled
-    }
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    ref: containerRef,
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["switch\n           relative inline-flex typo-display-body rounded bg-grey-100\n           ", "\n          "])), size === "large" ? "switch-large space-x-1" : "space-x-2px"), _styles.BUTTON_SIZE_CLASSNAMES[size], className)
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    ref: valueIndicatorRef,
-    style: valueIndicatorStyle,
-    className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n            absolute top-0 left-0 z-0 min-w-4 h-full\n            btn btn-neutral \n            pointer-events-none invisible\n          "])))
-  }), children));
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      ref: containerRef,
+      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["switch\n           relative inline-flex typo-display-body rounded bg-grey-100\n           ", "\n          "])), size === "large" ? "switch-large space-x-1" : "space-x-2px"), _styles.BUTTON_SIZE_CLASSNAMES[size], className),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: valueIndicatorRef,
+        style: valueIndicatorStyle,
+        className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n            absolute top-0 left-0 z-0 min-w-4 h-full\n            btn btn-neutral\n            pointer-events-none invisible\n          "])))
+      }), children]
+    })
+  });
 };
 
 exports.Switch = Switch;

package/cjs/Switch/SwitchOption.d.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent } from "react";
+import type { FunctionComponent } from "react";
 export interface SwitchOptionProps {
     value: string;
     disabled?: boolean;

package/cjs/Switch/SwitchOption.js

@@ -7,22 +7,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.SwitchOption = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _RadioGroup = require("../RadioGroup");
 
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
-var _RadioGroup = require("../RadioGroup");
-
 var _OverflowTooltipWrapper = require("../Tooltip/OverflowTooltipWrapper");
 
 var _utils = require("./utils");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _templateObject, _templateObject2;
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 var SwitchOption = function SwitchOption(_ref) {
   var value = _ref.value,
       disabled = _ref.disabled,
@@ -30,19 +34,23 @@ var SwitchOption = function SwitchOption(_ref) {
   var context = (0, _RadioGroup.useRadioGroupContext)();
   var checked = context.value === value;
   var inputDisabled = context.disabled || disabled;
-  return /*#__PURE__*/_react["default"].createElement("label", (0, _extends2["default"])({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", _objectSpread(_objectSpread({
     className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n        inline-flex justify-center items-center min-w-16 max-w-48 px-4 z-10 flex-grow flex-shrink\n        ", "\n        ", "\n      "])), inputDisabled ? "cursor-not-allowed opacity-60 rounded bg-grey-100" : "cursor-pointer", !checked && !inputDisabled && "rounded hover:bg-accent-200 hover:bg-opacity-20 transition-colors duration-100 ease-linear")
-  }, (0, _utils.buildAnimationProps)(context.name, value)), /*#__PURE__*/_react["default"].createElement("input", {
-    className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["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__*/_react["default"].createElement(_OverflowTooltipWrapper.OverflowTooltipWrapper, null, children));
+  }, (0, _utils.buildAnimationProps)(context.name, value)), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["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__*/(0, _jsxRuntime.jsx)(_OverflowTooltipWrapper.OverflowTooltipWrapper, {
+      children: children
+    })]
+  }));
 };
 
 exports.SwitchOption = SwitchOption;

package/cjs/Tables/DataTable/DataTable.d.ts

@@ -1,6 +1,15 @@
-import React from "react";
-import type { ColumnDefinition, Row, Status, SelectMode, PaginationConfiguration, Sorting, DataConfiguration, GetItemId } from "./types";
+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 DataTableLocale = {
+    selectAllButton?: string;
+    noDataTitle?: string;
+    noDataDescription?: string;
+    loadingTitle?: string;
+    loadingDescription?: string;
+    errorTitle?: string;
+    errorDescription?: string;
+};
 interface BaseDataTableProps<Item> {
     data: Item[];
     itemId?: GetItemId<Item>;
@@ -8,11 +17,12 @@ interface BaseDataTableProps<Item> {
     sorting?: Sorting[];
     onChange?(dataConfiguration: DataConfiguration): void;
     status?: Status;
-    noDataContent?: React.ReactNode;
-    errorContent?: React.ReactNode;
+    noDataContent?: ReactNode;
+    errorContent?: ReactNode;
     columns: ColumnDefinition<Item>[];
     canHoverRow?(row: Row<Item>): boolean;
     onRowHoveredChanged?(row: Row<Item> | null): void;
+    locale?: DataTableLocale;
 }
 declare type DataTableWithSelectMode<Item> = {
     selectMode: Exclude<SelectMode, "none">;
@@ -46,5 +56,5 @@ export declare type DataTableProps<Item> = BaseDataTableProps<Item> & (DataTable
  * - If a cell is empty or unavailable, keep the cell empty to reduce noise and help with legibility.
  * - Truncate long text to make it fit into a cell. However, choose column width wisely based on expected values, and adjust the table accordingly
  */
-export declare const DataTable: <Item extends {}>({ data, itemId, columns, onChange, status, noDataContent, errorContent, sorting, pagination, selectMode, selection, onSelectionChange, canSelectItem, canHoverRow, onRowHoveredChanged, }: DataTableProps<Item>) => JSX.Element;
+export declare const DataTable: <Item extends {}>({ data, itemId, columns, onChange, status, noDataContent, errorContent, sorting, pagination, selectMode, selection, onSelectionChange, canSelectItem, canHoverRow, onRowHoveredChanged, locale, }: DataTableProps<Item>) => JSX.Element;
 export default DataTable;

package/cjs/Tables/DataTable/DataTable.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,39 +15,37 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _react = _interopRequireWildcard(require("react"));
-
 var _compact = _interopRequireDefault(require("lodash/compact"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
-var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _react = require("react");
 
 var _Checkbox = _interopRequireDefault(require("../../Checkbox"));
 
 var _RadioGroup = require("../../RadioGroup");
 
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+
 var _utils = require("../../utils");
 
 var _Table = _interopRequireDefault(require("../Table"));
 
-var _Header = _interopRequireDefault(require("./components/Header"));
+var _Body = _interopRequireDefault(require("./components/Body"));
 
 var _Footer = _interopRequireDefault(require("./components/Footer"));
 
-var _Body = _interopRequireDefault(require("./components/Body"));
+var _Header = _interopRequireDefault(require("./components/Header"));
 
 var _Loader = _interopRequireDefault(require("./components/Loader"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _jsxRuntime = require("react/jsx-runtime");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var DEFAULT_GET_ITEM_ID = function DEFAULT_GET_ITEM_ID(_, idx) {
   return String(idx);
@@ -94,7 +90,8 @@ var DataTable = function DataTable(_ref) {
       onSelectionChange = _ref.onSelectionChange,
       canSelectItem = _ref.canSelectItem,
       canHoverRow = _ref.canHoverRow,
-      onRowHoveredChanged = _ref.onRowHoveredChanged;
+      onRowHoveredChanged = _ref.onRowHoveredChanged,
+      locale = _ref.locale;
 
   if (process.env.NODE_ENV !== "production") {
     var _selection$length;
@@ -127,13 +124,14 @@ var DataTable = function DataTable(_ref) {
     Header: false,
     Cell: function Cell(_ref2) {
       var row = _ref2.row;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex"])))
-      }, /*#__PURE__*/_react["default"].createElement(_RadioGroup.RadioButton, {
-        defaultChecked: row.selected,
-        disabled: !row.selectable,
-        className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["", ""])), row.hovered || row.selected ? "opacity-100" : "opacity-0 select-none")
-      }));
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex"]))),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioButton, {
+          defaultChecked: row.selected,
+          disabled: !row.selectable,
+          className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["", ""])), row.hovered || row.selected ? "opacity-100" : "opacity-0 select-none")
+        })
+      });
     },
     className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-3"])))
   }, selectMode === "multi" && {
@@ -154,8 +152,8 @@ var DataTable = function DataTable(_ref) {
       var dataLength = pagination ? pagination.itemsPerPage : data.length;
       var isChecked = selectionLength === dataLength;
       var isIndeterminate = selectionLength > 0 && selectionLength !== dataLength;
-      return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
-        "aria-label": "Select all" // Small hack to position the checkbox in the center of the header
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox["default"], {
+        "aria-label": (locale === null || locale === void 0 ? void 0 : locale.selectAllButton) || "Select all" // Small hack to position the checkbox in the center of the header
         ,
         className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["absolute mb-2.5"]))),
         checked: isChecked,
@@ -167,13 +165,14 @@ var DataTable = function DataTable(_ref) {
     },
     Cell: function Cell(_ref3) {
       var row = _ref3.row;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex"])))
-      }, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
-        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")
-      }));
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex"]))),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox["default"], {
+          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) {
@@ -238,36 +237,39 @@ var DataTable = function DataTable(_ref) {
     return onChange === null || onChange === void 0 ? void 0 : onChange(dataConfiguration);
   };
 
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["relative"])))
-  }, status === "loading" && /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["absolute bg-white z-10 bg-opacity-50 w-full h-full flex items-center justify-center"])))
-  }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
-    className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["-mt-12"])))
-  })), /*#__PURE__*/_react["default"].createElement(_Table["default"], {
-    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: pagination !== false && /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
-      pagination: pagination,
-      onChange: handlePaginationChange
-    })
-  }, /*#__PURE__*/_react["default"].createElement(_Header["default"], {
-    disabled: status !== "success" || rows.length === 0,
-    columns: computedColumns,
-    onToggleSort: handleToggleSort,
-    sorting: internalSorting
-  }), /*#__PURE__*/_react["default"].createElement(_Body["default"], {
-    rows: rows,
-    columns: computedColumns,
-    status: status,
-    noDataContent: noDataContent,
-    errorContent: errorContent,
-    selectMode: selectMode,
-    selection: selection,
-    canHoverRow: canHoverRow,
-    onRowHoverChange: onRowHoverChange,
-    onSelectionChange: onSelectionChange
-  })));
+  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 z-10 bg-opacity-50 w-full h-full flex items-center justify-center"]))),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loader["default"], {
+        className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["-mt-12"])))
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Table["default"], {
+      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: pagination !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer["default"], {
+        pagination: pagination,
+        onChange: handlePaginationChange
+      }),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {
+        disabled: status !== "success" || rows.length === 0,
+        columns: computedColumns,
+        onToggleSort: handleToggleSort,
+        sorting: internalSorting
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Body["default"], {
+        rows: rows,
+        columns: computedColumns,
+        status: status,
+        noDataContent: noDataContent,
+        errorContent: errorContent,
+        selectMode: selectMode,
+        selection: selection,
+        canHoverRow: canHoverRow,
+        onRowHoverChange: onRowHoverChange,
+        onSelectionChange: onSelectionChange
+      })]
+    })]
+  });
 };
 
 exports.DataTable = DataTable;

package/cjs/Tables/DataTable/components/Body.d.ts

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

package/cjs/Tables/DataTable/components/Body.js

@@ -7,27 +7,27 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Body = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
-var _react = _interopRequireDefault(require("react"));
+var _EmptyState = _interopRequireDefault(require("../../../EmptyState"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
 
-var _EmptyState = _interopRequireDefault(require("../../../EmptyState"));
-
 var _utils = require("../utils");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _react = require("react");
+
 var _templateObject, _templateObject2, _templateObject3;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var Body = function Body(_ref) {
   var rows = _ref.rows,
@@ -43,7 +43,8 @@ var Body = function Body(_ref) {
       _ref$canHoverRow = _ref.canHoverRow,
       canHoverRow = _ref$canHoverRow === void 0 ? function () {
     return true;
-  } : _ref$canHoverRow;
+  } : _ref$canHoverRow,
+      locale = _ref.locale;
 
   var handleRowSelection = function handleRowSelection(row) {
     if (!onSelectionChange) return;
@@ -74,50 +75,64 @@ var Body = function Body(_ref) {
   };
 
   if (status === "error") {
-    return /*#__PURE__*/_react["default"].createElement("tbody", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
-      colSpan: columns.length
-    }, /*#__PURE__*/_react["default"].createElement("span", {
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex justify-center py-6"])))
-    }, errorContent || /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
-      title: "Error",
-      description: "An error occurred while loading data.",
-      centered: true,
-      usageContext: "result"
-    })))));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+          colSpan: columns.length,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex justify-center py-6"]))),
+            children: errorContent || /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmptyState["default"], {
+              title: (locale === null || locale === void 0 ? void 0 : locale.errorTitle) || "Error",
+              description: (locale === null || locale === void 0 ? void 0 : locale.errorDescription) || "An error occurred while loading data.",
+              centered: true,
+              usageContext: "result"
+            })
+          })
+        })
+      })
+    });
   }
 
   if (rows.length === 0 && status !== "loading") {
-    return /*#__PURE__*/_react["default"].createElement("tbody", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
-      colSpan: columns.length
-    }, /*#__PURE__*/_react["default"].createElement("span", {
-      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex justify-center py-6"])))
-    }, noDataContent || /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
-      title: "Empty",
-      description: "There is no data to display",
-      centered: true,
-      usageContext: "result"
-    })))));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+          colSpan: columns.length,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex justify-center py-6"]))),
+            children: noDataContent || /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmptyState["default"], {
+              title: (locale === null || locale === void 0 ? void 0 : locale.noDataTitle) || "Empty",
+              description: (locale === null || locale === void 0 ? void 0 : locale.noDataDescription) || "There is no data to display",
+              centered: true,
+              usageContext: "result"
+            })
+          })
+        })
+      })
+    });
   }
 
-  return /*#__PURE__*/_react["default"].createElement("tbody", null, rows.map(function (row, rowIndex) {
-    return /*#__PURE__*/_react["default"].createElement("tr", (0, _extends2["default"])({}, additionalRowProps(row), {
-      key: rowIndex
-    }), columns.map(function (column) {
-      var value = (0, _utils.getCellValue)(column, row);
-      var Cell = column.Cell;
-      return Cell ? /*#__PURE__*/_react["default"].createElement("td", {
-        className: column === null || column === void 0 ? void 0 : column.className,
-        key: column.id
-      }, /*#__PURE__*/_react["default"].createElement(Cell, {
-        row: rows[rowIndex],
-        column: column,
-        value: value
-      })) : /*#__PURE__*/_react["default"].createElement("td", {
-        className: column === null || column === void 0 ? void 0 : column.className,
-        key: column.id
-      }, value !== null && value !== void 0 ? value : "-");
-    }));
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+    children: rows.map(function (row, rowIndex) {
+      return /*#__PURE__*/(0, _react.createElement)("tr", _objectSpread(_objectSpread({}, additionalRowProps(row)), {}, {
+        key: rowIndex
+      }), columns.map(function (column) {
+        var value = (0, _utils.getCellValue)(column, row);
+        var Cell = column.Cell;
+        return Cell ? /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+          className: column === null || column === void 0 ? void 0 : column.className,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Cell, {
+            row: rows[rowIndex],
+            column: column,
+            value: value
+          })
+        }, column.id) : /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+          className: column === null || column === void 0 ? void 0 : column.className,
+          children: value !== null && value !== void 0 ? value : "-"
+        }, column.id);
+      }));
+    })
+  });
 };
 
 exports.Body = Body;

package/cjs/Tables/DataTable/components/Footer.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { PaginationConfiguration, DataConfiguration } from "../types";
+import type { DataConfiguration, PaginationConfiguration } from "../types";
 export interface FooterProps {
     pagination: PaginationConfiguration;
     onChange(dataConfiguration: DataConfiguration): void;

package/cjs/Tables/DataTable/components/Footer.js

@@ -11,24 +11,24 @@ exports["default"] = exports.Footer = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireDefault(require("react"));
-
 var _Pagination = _interopRequireWildcard(require("../../../Pagination"));
 
 var _utils = require("../utils");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var Footer = function Footer(_ref) {
   var pagination = _ref.pagination,
       onChange = _ref.onChange;
-  return (0, _utils.isDeterminatePagination)(pagination) ? /*#__PURE__*/_react["default"].createElement(_Pagination["default"], {
+  return (0, _utils.isDeterminatePagination)(pagination) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pagination["default"], {
     nbPages: Math.ceil(pagination.totalItemsCount / pagination.itemsPerPage),
     currentPage: pagination.currentPage,
     maxButtons: 8,
@@ -50,7 +50,7 @@ var Footer = function Footer(_ref) {
         sorting: []
       });
     })
-  }) : (0, _utils.isIndeterminatePagination)(pagination) ? /*#__PURE__*/_react["default"].createElement(_Pagination.CompactPagination, {
+  }) : (0, _utils.isIndeterminatePagination)(pagination) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pagination.CompactPagination, {
     label: "compact",
     currentPage: pagination.currentPage,
     showGoToFirstPage: true,