@algolia/satellite 1.0.0-beta.17 → 1.0.0-beta.170

package/cjs/Sidebar/SidebarLinksGroup/types.d.ts

@@ -0,0 +1,10 @@
+import type { MouseEventHandler, ReactNode } from "react";
+export declare type SidebarLinksGroupLink = {
+    id?: string;
+    href: string;
+    target?: string;
+    rel?: string;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+    disabled?: boolean;
+    label: ReactNode;
+};

package/cjs/Sidebar/SidebarLinksGroup/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/Sidebar/SidebarNav.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode, VFC } from "react";
+export declare type SidebarNavSpacing = "small" | "large";
+export declare type SidebarNavProps = {
+    id?: string;
+    /** @ignore */
+    className?: string;
+    spacing?: SidebarNavSpacing;
+    label: string;
+    children: ReactNode;
+};
+export declare const SidebarNav: VFC<SidebarNavProps>;

package/cjs/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/cjs/Sidebar/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./Sidebar";
+export * from "./SidebarButtonLink";
+export * from "./SidebarHeader";
+export * from "./SidebarHeading";
+export * from "./SidebarLink";
+export * from "./SidebarLinksGroup";
+export * from "./SidebarNav";
+export * from "./types";
+export { useSidebarContext } from "./SidebarContext";

package/cjs/Sidebar/index.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useSidebarContext: true
+};
+Object.defineProperty(exports, "useSidebarContext", {
+  enumerable: true,
+  get: function get() {
+    return _SidebarContext.useSidebarContext;
+  }
+});
+var _Sidebar = require("./Sidebar");
+Object.keys(_Sidebar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Sidebar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Sidebar[key];
+    }
+  });
+});
+var _SidebarButtonLink = require("./SidebarButtonLink");
+Object.keys(_SidebarButtonLink).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _SidebarButtonLink[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SidebarButtonLink[key];
+    }
+  });
+});
+var _SidebarHeader = require("./SidebarHeader");
+Object.keys(_SidebarHeader).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _SidebarHeader[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SidebarHeader[key];
+    }
+  });
+});
+var _SidebarHeading = require("./SidebarHeading");
+Object.keys(_SidebarHeading).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _SidebarHeading[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SidebarHeading[key];
+    }
+  });
+});
+var _SidebarLink = require("./SidebarLink");
+Object.keys(_SidebarLink).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _SidebarLink[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SidebarLink[key];
+    }
+  });
+});
+var _SidebarLinksGroup = require("./SidebarLinksGroup");
+Object.keys(_SidebarLinksGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _SidebarLinksGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SidebarLinksGroup[key];
+    }
+  });
+});
+var _SidebarNav = require("./SidebarNav");
+Object.keys(_SidebarNav).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _SidebarNav[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SidebarNav[key];
+    }
+  });
+});
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _types[key];
+    }
+  });
+});
+var _SidebarContext = require("./SidebarContext");

package/cjs/Sidebar/types.d.ts

@@ -0,0 +1,6 @@
+export declare type SidebarVariant = "primary" | "secondary";
+export declare type SidebarLocation = Pick<Location, "pathname" | "hash" | "search">;
+export declare type SidebarLocale = {
+    primarySidebarLabel?: string;
+    secondarySidebarLabel?: string;
+};

package/cjs/Sidebar/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/Switch/Switch.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode, VFC } from "react";
+import type { SwitchSize } from "./types";
+export interface SwitchProps {
+    /** @ignore */
+    className?: string;
+    value: string;
+    disabled?: boolean;
+    onChange: (value: string) => void;
+    children: ReactNode;
+    size?: SwitchSize;
+    name?: string;
+}
+export declare const Switch: VFC<SwitchProps>;
+export default Switch;

package/cjs/Switch/Switch.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Switch = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _styles = require("../Button/styles");
+var _RadioGroup = require("../RadioGroup");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _prefersReducedMotion = require("../utils/prefersReducedMotion");
+var _uniqueId = _interopRequireDefault(require("../utils/uniqueId"));
+var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2;
+var Switch = exports.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 = (0, _react.useState)(function () {
+      return (0, _uniqueId["default"])("SwitchName-");
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
+    componentDefaultName = _useState2[0];
+  var radioName = name !== null && name !== void 0 ? name : componentDefaultName;
+  var containerRef = (0, _react.useRef)(null);
+  var valueIndicatorRef = (0, _react.useRef)(null);
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2["default"])(_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
+  (0, _react.useLayoutEffect)(function () {
+    var targetEl = document.querySelector((0, _utils.buildAnimationKeySelector)(radioName, value));
+    if (!targetEl || !valueIndicatorRef.current || !containerRef.current) {
+      return setValueIndicatorStyle(undefined);
+    }
+    var containerRect = containerRef.current.getBoundingClientRect();
+    var targetRect = targetEl.getBoundingClientRect();
+    var duration = _prefersReducedMotion.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__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioGroupContext.Provider, {
+    value: {
+      value: value,
+      name: radioName,
+      onChange: onChange,
+      disabled: disabled
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      ref: containerRef,
+      className: (0, _clsx["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]
+    })
+  });
+};
+var _default = exports["default"] = Switch;

package/cjs/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/cjs/Switch/Switch.tailwind.js

@@ -0,0 +1,25 @@
+"use strict";
+
+// @ts-check
+var plugin = require("tailwindcss/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        ")
+      }
+    }
+  });
+});
+module.exports = switchPlugin;

package/cjs/Switch/SwitchOption.d.ts

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

package/cjs/Switch/SwitchOption.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.SwitchOption = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _RadioGroup = require("../RadioGroup");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _OverflowTooltipWrapper = require("../Tooltip/OverflowTooltipWrapper");
+var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+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) { (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 SwitchOption = exports.SwitchOption = function SwitchOption(_ref) {
+  var value = _ref.value,
+    disabled = _ref.disabled,
+    children = _ref.children;
+  var context = (0, _RadioGroup.useRadioGroupContext)();
+  var checked = context.value === value;
+  var inputDisabled = context.disabled || disabled;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", _objectSpread(_objectSpread({
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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")
+  }, (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: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: children
+      })
+    })]
+  }));
+};
+var _default = exports["default"] = SwitchOption;

package/cjs/Switch/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Switch";
+export * from "./SwitchOption";
+export { default } from "./Switch";

package/cjs/Switch/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Switch["default"];
+  }
+});
+var _Switch = _interopRequireWildcard(require("./Switch"));
+Object.keys(_Switch).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Switch[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Switch[key];
+    }
+  });
+});
+var _SwitchOption = require("./SwitchOption");
+Object.keys(_SwitchOption).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _SwitchOption[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SwitchOption[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }

package/cjs/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/cjs/Switch/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/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/cjs/Switch/utils.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildAnimationProps = exports.buildAnimationKeyValue = exports.buildAnimationKeySelector = exports.SWITCH_ANIMATION_KEY = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var SWITCH_ANIMATION_KEY = exports.SWITCH_ANIMATION_KEY = "data-switch-animation-key";
+var buildAnimationKeyValue = exports.buildAnimationKeyValue = function buildAnimationKeyValue(name, value) {
+  return "".concat(name, "-").concat(value);
+};
+var buildAnimationKeySelector = exports.buildAnimationKeySelector = function buildAnimationKeySelector(name, value) {
+  return "[".concat(SWITCH_ANIMATION_KEY, "=\"").concat(buildAnimationKeyValue(name, value), "\"]");
+};
+var buildAnimationProps = exports.buildAnimationProps = function buildAnimationProps(name, value) {
+  return (0, _defineProperty2["default"])({}, SWITCH_ANIMATION_KEY, buildAnimationKeyValue(name, value));
+};

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

@@ -0,0 +1,69 @@
+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);
+/**
+ * Tables are used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
+ *
+ * #### Do
+ *
+ * - Organize columns and rows based on the needs of your users. To help people read the table, order the columns by importance from left to right, with the key pieces of content opening the row
+ * - Include units of measurement symbols in the header so you don't need to repeat them throughout the columns
+ * - Indicate sorting capabilities of a column with a chevron in the cell header
+ * - Start by columns with highest value to the user, and continue with less important ones
+ *
+ * #### Do not
+ *
+ * - Center align text in cells
+ *
+ * ## Best practices
+ *
+ * - 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, sortMode, pagination, selectMode, selection, onSelectionChange, canSelectItem, canHoverRow, onRowHoveredChanged, locale: propsLocale, }: DataTableProps<Item>) => JSX.Element;
+export default DataTable;