@algolia/satellite 1.0.0-beta.134 → 1.0.0-beta.137

package/esm/Sidebar/SidebarLink.js

@@ -0,0 +1,42 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+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) { _defineProperty(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; }
+
+import cx from "clsx";
+import stl from "../styles/helpers/satellitePrefixer";
+import useLinkProps from "../utils/useLinkProps";
+import { useSidebarContext } from "./SidebarContext";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var SidebarLink = function SidebarLink(props) {
+  var _linkProps$href;
+
+  var _useSidebarContext = useSidebarContext(),
+      isLinkActive = _useSidebarContext.isLinkActive;
+
+  var id = props.id,
+      className = props.className,
+      disabled = props.disabled,
+      Icon = props.icon,
+      children = props.children;
+  var linkProps = useLinkProps(props);
+  var isActive = !disabled && isLinkActive((_linkProps$href = linkProps.href) !== null && _linkProps$href !== void 0 ? _linkProps$href : "");
+  return /*#__PURE__*/_jsxs("a", _objectSpread(_objectSpread({}, linkProps), {}, {
+    id: id,
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          flex items-center\n          group hover:no-underline focus:outline-none\n          ", "\n        "])), disabled ? "cursor-not-allowed" : "cursor-pointer"), className),
+    "aria-current": isActive,
+    children: [/*#__PURE__*/_jsx(Icon, {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["shrink-0 mr-3 ", ""])), disabled ? "text-grey-300" : "text-grey-500"),
+      width: "1rem",
+      height: "1rem"
+    }), /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          flex-1 truncate\n          ", ""])), disabled ? "text-grey-300" : isActive ? "font-semibold text-accent-600" : "typo-subdued focus:text-accent-600 group-hover:text-accent-600"),
+      children: children
+    })]
+  }));
+};

package/esm/Sidebar/SidebarLinksGroup/ActiveLinkIndicator.d.ts

@@ -0,0 +1,8 @@
+import type { FC } from "react";
+declare type ActiveLinkIndicatorProps = {
+    className?: string;
+    activeIndex?: number;
+    linksCount: number;
+};
+export declare const ActiveLinkIndicator: FC<ActiveLinkIndicatorProps>;
+export {};

package/esm/Sidebar/SidebarLinksGroup/ActiveLinkIndicator.js

@@ -0,0 +1,32 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import cx from "clsx";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+var LINK_HEIGHT_PX = 24;
+var LINKS_SPACING_PX = 8;
+export var ActiveLinkIndicator = function ActiveLinkIndicator(_ref) {
+  var className = _ref.className,
+      activeIndex = _ref.activeIndex,
+      linksCount = _ref.linksCount;
+  var showIndicator = typeof activeIndex === "number" && activeIndex >= 0;
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-4 flex justify-center"]))), className),
+    style: {
+      height: linksCount * LINK_HEIGHT_PX + (linksCount - 1) * LINKS_SPACING_PX
+    },
+    "aria-hidden": true,
+    children: /*#__PURE__*/_jsx("div", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["w-px h-full bg-grey-200"]))),
+      children: /*#__PURE__*/_jsx("div", {
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            w-px bg-accent-500\n            transition-transform 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/esm/Sidebar/SidebarLinksGroup/SidebarGroupLink.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from "react";
+import type { SidebarLinksGroupLink } from "./types";
+declare type LinkProps = SidebarLinksGroupLink & {
+    active: boolean;
+};
+export declare const SidebarGroupLink: FC<LinkProps>;
+export {};

package/esm/Sidebar/{components/SidebarHeader.js → SidebarLinksGroup/SidebarGroupLink.js}

@@ -1,31 +1,25 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
 var _templateObject;
 
-var _excluded = ["className", "children"];
-
 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) { _defineProperty(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; }
 
-import cx from "classnames";
 import stl from "../../styles/helpers/satellitePrefixer";
-import { useSidebarContext } from "../SidebarContext";
+import useLinkProps from "../../utils/useLinkProps";
 import { jsx as _jsx } from "react/jsx-runtime";
-export var SidebarHeader = function SidebarHeader(_ref) {
-  var className = _ref.className,
-      children = _ref.children,
-      headingProps = _objectWithoutProperties(_ref, _excluded);
-
-  var _useSidebarContext = useSidebarContext(),
-      variant = _useSidebarContext.variant,
-      collapsed = _useSidebarContext.collapsed;
-
-  return /*#__PURE__*/_jsx("h3", _objectSpread(_objectSpread({}, headingProps), {}, {
-    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        h-10 pl-8\n        flex items-center\n        display-subheading uppercase\n        ", "\n        ", "\n      "])), variant === "dark" ? "text-white" : "text-grey-900", collapsed && "invisible overflow-hidden"), className),
-    children: children
+export var SidebarGroupLink = function SidebarGroupLink(props) {
+  var label = props.label,
+      active = props.active,
+      id = props.id,
+      disabled = props.disabled;
+  var linkProps = useLinkProps(props);
+  return /*#__PURE__*/_jsx("a", _objectSpread(_objectSpread({}, linkProps), {}, {
+    id: id,
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        block 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: label
   }));
-};
-export default SidebarHeader;
+};

package/esm/Sidebar/SidebarLinksGroup/SidebarLinksGroup.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import type { IconComponentType } from "../../types";
+import type { SidebarLinksGroupLink } from "./types";
+declare type SidebarLinksGroupBaseProps = {
+    id?: string;
+    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: (props: SidebarLinksGroupProps) => JSX.Element;
+export {};

package/esm/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js

@@ -0,0 +1,100 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+
+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) { _defineProperty(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; }
+
+import { uniqueId } from "lodash";
+import { useEffect, useMemo, useState } from "react";
+import { ChevronRight } from "react-feather";
+import usePrevious from "react-use/lib/usePrevious";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { useSidebarContext } from "../SidebarContext";
+import { ActiveLinkIndicator } from "./ActiveLinkIndicator";
+import { SidebarGroupLink } from "./SidebarGroupLink";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+var isCollapsibleSidebarLinksGroupProps = function isCollapsibleSidebarLinksGroupProps(props) {
+  return "title" in props && "icon" in props;
+};
+
+export var SidebarLinksGroup = function SidebarLinksGroup(props) {
+  var _useSidebarContext = useSidebarContext(),
+      isLinkActive = _useSidebarContext.isLinkActive;
+
+  var id = props.id,
+      className = props.className,
+      links = props.links;
+  var contentId = useMemo(function () {
+    return uniqueId("links-group-");
+  }, []);
+  var activeLinkIndex = links.findIndex(function (link) {
+    return !link.disabled && isLinkActive(link.href);
+  });
+  var previousActiveLinkIndex = usePrevious(activeLinkIndex);
+  var hasMatchingLink = activeLinkIndex >= 0;
+
+  var _useState = useState(!isCollapsibleSidebarLinksGroupProps(props) || hasMatchingLink || props.initialIsOpen !== false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  useEffect(function () {
+    if (isCollapsibleSidebarLinksGroupProps(props)) {
+      var _props$onGroupToggle;
+
+      (_props$onGroupToggle = props.onGroupToggle) === null || _props$onGroupToggle === void 0 ? void 0 : _props$onGroupToggle.call(props, isOpen);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [isOpen]);
+  useEffect(function () {
+    if (!isOpen && activeLinkIndex >= 0 && typeof previousActiveLinkIndex === "number" && activeLinkIndex !== previousActiveLinkIndex) {
+      setIsOpen(true);
+    }
+  }, [activeLinkIndex, previousActiveLinkIndex, isOpen]);
+  return /*#__PURE__*/_jsxs("div", {
+    id: id,
+    className: className,
+    children: [isCollapsibleSidebarLinksGroupProps(props) && /*#__PURE__*/_jsxs("button", {
+      className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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__*/_jsx(props.icon, {
+        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["shrink-0 text-grey-500 mr-3"]))),
+        size: "1rem"
+      }), /*#__PURE__*/_jsx("span", {
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["truncate display-subheading uppercase text-grey-800 group-hover:text-accent-500 mr-2"]))),
+        children: props.title
+      }), /*#__PURE__*/_jsx(ChevronRight, {
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["shrink-0 text-grey-500 transition-all duration-150 ease-in-out ", ""])), isOpen && "rotate-90"),
+        size: "1rem"
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      id: contentId,
+      className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex ", ""])), !isOpen && "hidden"),
+      children: [/*#__PURE__*/_jsx(ActiveLinkIndicator, {
+        className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["shrink-0 mr-3"]))),
+        activeIndex: activeLinkIndex,
+        linksCount: links.length
+      }), /*#__PURE__*/_jsx("ul", {
+        className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["flex-1 space-y-2 overflow-hidden"]))),
+        children: links.map(function (link, idx) {
+          return /*#__PURE__*/_jsx("li", {
+            className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["truncate"]))),
+            children: /*#__PURE__*/_jsx(SidebarGroupLink, _objectSpread(_objectSpread({}, link), {}, {
+              active: activeLinkIndex === idx
+            }))
+          }, "".concat(idx, "-").concat(link.href));
+        })
+      })]
+    })]
+  });
+};

package/esm/Sidebar/SidebarLinksGroup/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./SidebarLinksGroup";
+export type { SidebarLinksGroupLink } from "./types";

package/esm/Sidebar/SidebarLinksGroup/index.js

@@ -0,0 +1,2 @@
+export * from "./SidebarLinksGroup";
+export {};

package/esm/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/esm/Sidebar/SidebarLinksGroup/types.js

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

package/esm/Sidebar/SidebarNav.d.ts

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

package/esm/Sidebar/SidebarNav.js

@@ -0,0 +1,33 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import { Children } from "react";
+import stl from "../styles/helpers/satellitePrefixer";
+import { useSidebarContext } from "./SidebarContext";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var SidebarNav = function SidebarNav(_ref) {
+  var id = _ref.id,
+      className = _ref.className,
+      spacingProp = _ref.spacing,
+      label = _ref.label,
+      children = _ref.children;
+
+  var _useSidebarContext = useSidebarContext(),
+      variant = _useSidebarContext.variant;
+
+  var spacing = typeof spacingProp === "string" ? spacingProp : variant === "primary" ? "small" : "large";
+  return /*#__PURE__*/_jsx("nav", {
+    id: id,
+    className: className,
+    "aria-label": label,
+    children: /*#__PURE__*/_jsx("ul", {
+      className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["", ""])), spacing === "small" ? "space-y-2" : "px-3 space-y-8"),
+      children: Children.map(children, function (child, index) {
+        return /*#__PURE__*/_jsx("li", {
+          children: child
+        }, index);
+      })
+    })
+  });
+};

package/esm/Sidebar/index.d.ts

@@ -1,6 +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 * from "./SidebarContext";
-export * from "./components/SidebarLink";
-export * from "./components/SidebarHeader";
-export { default } from "./Sidebar";
+export { useSidebarContext } from "./SidebarContext";

package/esm/Sidebar/index.js

@@ -1,6 +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 * from "./SidebarContext";
-export * from "./components/SidebarLink";
-export * from "./components/SidebarHeader";
-export { default } from "./Sidebar";
+export { useSidebarContext } from "./SidebarContext";

package/esm/Sidebar/types.d.ts

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

package/esm/Switch/Switch.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 var _templateObject, _templateObject2;
 
-import cx from "classnames";
+import cx from "clsx";
 import { useLayoutEffect, useRef, useState } from "react";
 import { BUTTON_SIZE_CLASSNAMES } from "../Button/styles";
 import { RadioGroupContext } from "../RadioGroup";

package/esm/Tables/DataTable/DataTable.js

@@ -3,7 +3,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
 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; }
 
@@ -22,6 +22,7 @@ import DataTableBody from "./components/Body";
 import DataTableFooter from "./components/Footer";
 import DataTableHeader from "./components/Header";
 import DataTableLoader from "./components/Loader";
+import { isDeterminatePagination, isIndeterminatePagination } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var DEFAULT_DATATABLE_LOCALE = {
@@ -86,17 +87,13 @@ export var DataTable = function DataTable(_ref) {
   if (process.env.NODE_ENV !== "production") {
     var _selection$length;
 
-    if (itemId === undefined && (sorting.length > 0 || selectMode !== null)) {
+    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`.");
     }
-
-    if (pagination && data.length > pagination.itemsPerPage) {
-      console.warn("`pagination.itemsPerPage` (".concat(pagination.itemsPerPage, ") doesn't match `data.length` (").concat(data.length, ")."));
-    }
   }
 
   var _useState = useState(),
@@ -111,19 +108,24 @@ export var DataTable = function DataTable(_ref) {
   var computedColumns = compact([selectMode === "single" && {
     id: "_internal_singleSelect",
     accessor: "_internal_singleSelect",
-    Header: false,
+    Header: function Header() {
+      return /*#__PURE__*/_jsx("span", {
+        className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["sr-only"]))),
+        children: "Selected row"
+      });
+    },
     Cell: function Cell(_ref2) {
       var row = _ref2.row;
       return /*#__PURE__*/_jsx("div", {
-        className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex"]))),
+        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex"]))),
         children: /*#__PURE__*/_jsx(RadioButton, {
           defaultChecked: row.selected,
           disabled: !row.selectable,
-          className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["", ""])), row.hovered || row.selected ? "opacity-100" : "opacity-0 select-none")
+          className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["", ""])), row.hovered || row.selected ? "opacity-100" : "opacity-0 select-none")
         })
       });
     },
-    className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-3"])))
+    className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["w-3"])))
   }, selectMode === "multi" && {
     id: "_internal_multiSelect",
     accessor: "_internal_multiSelect",
@@ -145,7 +147,7 @@ export var DataTable = function DataTable(_ref) {
       return /*#__PURE__*/_jsx(Checkbox, {
         "aria-label": locale.selectAllButton // Small hack to position the checkbox in the center of the header
         ,
-        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["absolute mb-2.5"]))),
+        className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["absolute mb-2.5"]))),
         checked: isChecked,
         indeterminate: isIndeterminate,
         onClick: function onClick() {
@@ -156,15 +158,15 @@ export var DataTable = function DataTable(_ref) {
     Cell: function Cell(_ref3) {
       var row = _ref3.row;
       return /*#__PURE__*/_jsx("div", {
-        className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex"]))),
+        className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex"]))),
         children: /*#__PURE__*/_jsx(Checkbox, {
           checked: row.selected,
           disabled: !row.selectable,
-          className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["", ""])), row.hovered || row.selected ? "opacity-100" : "opacity-0 select-none")
+          className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["", ""])), row.hovered || row.selected ? "opacity-100" : "opacity-0 select-none")
         })
       });
     },
-    className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["w-3"])))
+    className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["w-3"])))
   }].concat(_toConsumableArray(columns.map(function (c) {
     var _c$Header;
 
@@ -204,12 +206,18 @@ export var DataTable = function DataTable(_ref) {
     })) === null || _sorting$find === void 0 ? void 0 : _sorting$find[1]) !== null && _sorting$find$ !== void 0 ? _sorting$find$ : "desc" : "none"];
   });
 
+  var shouldRenderPagination = function shouldRenderPagination() {
+    if (isDeterminatePagination(pagination)) return pagination && pagination.totalItemsCount > 0;
+    if (isIndeterminatePagination(pagination)) return pagination && data.length > 0;
+    return false;
+  };
+
   var onRowHoverChange = function onRowHoverChange(row) {
     setHoveredRowId(row === null || row === void 0 ? void 0 : row.id);
     onRowHoveredChanged === null || onRowHoveredChanged === void 0 ? void 0 : onRowHoveredChanged(row);
   };
 
-  var handleToggleSort = function handleToggleSort(columnId, direction) {
+  var onToggleSort = function onToggleSort(columnId, direction) {
     var newSorting = internalSorting.map(function (_ref7) {
       var _ref8 = _slicedToArray(_ref7, 2),
           colId = _ref8[0],
@@ -228,24 +236,24 @@ export var DataTable = function DataTable(_ref) {
   };
 
   return /*#__PURE__*/_jsxs("div", {
-    className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["relative"]))),
+    className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["relative"]))),
     children: [status === "loading" && /*#__PURE__*/_jsx("div", {
-      className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["absolute bg-white/50 z-10 w-full h-full flex items-center justify-center"]))),
+      className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["absolute bg-white/50 z-10 w-full h-full flex items-center justify-center"]))),
       children: /*#__PURE__*/_jsx(DataTableLoader, {
-        className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["-mt-12"]))),
+        className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["-mt-12"]))),
         locale: locale
       })
     }), /*#__PURE__*/_jsxs(Table, {
-      className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["datatable ", " ", ""])), status === "loading" && "pointer-events-none select-none", status === "loading" && data.length === 0 && "h-48"),
+      className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["datatable ", " ", ""])), status === "loading" && "pointer-events-none select-none", status === "loading" && data.length === 0 && "h-48"),
       highlight: false,
-      footer: pagination !== false && /*#__PURE__*/_jsx(DataTableFooter, {
+      footer: shouldRenderPagination() && /*#__PURE__*/_jsx(DataTableFooter, {
         pagination: pagination,
         onChange: handlePaginationChange
       }),
       children: [/*#__PURE__*/_jsx(DataTableHeader, {
         disabled: status !== "success" || rows.length === 0,
         columns: computedColumns,
-        onToggleSort: handleToggleSort,
+        onToggleSort: onToggleSort,
         sorting: internalSorting
       }), /*#__PURE__*/_jsx(DataTableBody, {
         rows: rows,

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

@@ -6,6 +6,9 @@ var datatablePlugin = plugin(function (_ref) {
       theme = _ref.theme;
   addComponents({
     ".datatable": {
+      th: {
+        padding: "0 !important"
+      },
       "tr.row-disabled td": {
         cursor: "not-allowed"
       },

package/esm/Tables/DataTable/components/HeaderCell.d.ts

@@ -3,6 +3,7 @@ import type { AdvancedColumnDefinition, SortingDirection } from "../types";
 export interface HeaderCellProps<Item> extends HTMLAttributes<HTMLTableCellElement> {
     column: AdvancedColumnDefinition<Item>;
     disabled?: boolean;
+    isSortingEnabled?: boolean;
     sortingDirection?: SortingDirection;
     onToggleSort: (columnId: string, sortingDirection: SortingDirection) => void;
     children: ReactNode;

package/esm/Tables/DataTable/components/HeaderCell.js

@@ -3,13 +3,13 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["sortingDirection", "onToggleSort", "column", "disabled", "children"];
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 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) { _defineProperty(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; }
 
-import cx from "classnames";
+import cx from "clsx";
 import { ChevronDown, ChevronUp } from "react-feather";
 import stl from "../../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -28,22 +28,32 @@ export var HeaderCell = function HeaderCell(_ref) {
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/_jsx("th", _objectSpread(_objectSpread({}, props), {}, {
-    "aria-sort": sortingDirection === "desc" ? "descending" : sortingDirection === "asc" ? "ascending" : "none",
+  var InternalCellComponent = sort && !disabled ? "button" : "span";
+
+  var handleSorting = function handleSorting() {
+    if (disabled) return;
+    onToggleSort(id, sortingDirection === "desc" ? "asc" : sortingDirection === "asc" ? "none" : "desc");
+  };
+
+  var sortButtonProps = sort ? {
     onClick: function onClick() {
-      return sort && !disabled && onToggleSort(id, sortingDirection === "desc" ? "asc" : sortingDirection === "asc" ? "none" : "desc");
+      return handleSorting();
     },
-    className: cx(className, stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["group ", ""])), sort && (disabled ? "cursor-not-allowed" : "cursor-pointer"))),
-    children: /*#__PURE__*/_jsxs("span", {
-      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["inline-flex items-center"]))),
+    className: disabled ? stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["cursor-not-allowed"]))) : stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["cursor-pointer"])))
+  } : {};
+  return /*#__PURE__*/_jsx("th", _objectSpread(_objectSpread({}, props), {}, {
+    "aria-sort": sortingDirection === "desc" ? "descending" : sortingDirection === "asc" ? "ascending" : "none",
+    className: className,
+    children: /*#__PURE__*/_jsxs(InternalCellComponent, _objectSpread(_objectSpread({}, sortButtonProps), {}, {
+      className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["px-4 py-[14px] inline-flex items-center focus:outline-none focus:text-accent-600"]))), sortButtonProps.className),
       children: [children, sort ? sortingDirection === "desc" ? /*#__PURE__*/_jsx(ChevronDown, {
         className: iconClassName
       }) : sortingDirection === "asc" ? /*#__PURE__*/_jsx(ChevronUp, {
         className: iconClassName
       }) : /*#__PURE__*/_jsx(ChevronDown, {
-        className: cx(iconClassName, stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["text-grey-300 opacity-0 group-hover:opacity-100"]))))
+        className: cx(iconClassName, stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["text-grey-300"]))))
       }) : null]
-    })
+    }))
   }));
 };
 export default HeaderCell;

package/esm/Tables/Table/Table.js

@@ -10,7 +10,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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) { _defineProperty(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; }
 
-import cx from "classnames";
+import cx from "clsx";
 import stl from "../../styles/helpers/satellitePrefixer";
 import Footer from "./components/Footer";
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/Tables/Table/components/Footer.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3;
 
-import cx from "classnames";
+import cx from "clsx";
 import stl from "../../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var Footer = function Footer(_ref) {