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

package/cjs/Sidebar/SidebarNav.js

@@ -0,0 +1,48 @@
+"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 = 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);
+      })
+    })
+  });
+};
+
+exports.SidebarNav = SidebarNav;

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

@@ -1,19 +1,19 @@
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
-Object.defineProperty(exports, "default", {
+var _exportNames = {
+  useSidebarContext: true
+};
+Object.defineProperty(exports, "useSidebarContext", {
   enumerable: true,
   get: function get() {
-    return _Sidebar["default"];
+    return _SidebarContext.useSidebarContext;
   }
 });
 
-var _Sidebar = _interopRequireWildcard(require("./Sidebar"));
+var _Sidebar = require("./Sidebar");
 
 Object.keys(_Sidebar).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -27,35 +27,49 @@ Object.keys(_Sidebar).forEach(function (key) {
   });
 });
 
-var _types = require("./types");
+var _SidebarButtonLink = require("./SidebarButtonLink");
 
-Object.keys(_types).forEach(function (key) {
+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] === _types[key]) return;
+  if (key in exports && exports[key] === _SidebarButtonLink[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _types[key];
+      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 _SidebarContext = require("./SidebarContext");
+var _SidebarHeading = require("./SidebarHeading");
 
-Object.keys(_SidebarContext).forEach(function (key) {
+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] === _SidebarContext[key]) return;
+  if (key in exports && exports[key] === _SidebarHeading[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _SidebarContext[key];
+      return _SidebarHeading[key];
     }
   });
 });
 
-var _SidebarLink = require("./components/SidebarLink");
+var _SidebarLink = require("./SidebarLink");
 
 Object.keys(_SidebarLink).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -69,20 +83,46 @@ Object.keys(_SidebarLink).forEach(function (key) {
   });
 });
 
-var _SidebarHeader = require("./components/SidebarHeader");
+var _SidebarLinksGroup = require("./SidebarLinksGroup");
 
-Object.keys(_SidebarHeader).forEach(function (key) {
+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] === _SidebarHeader[key]) return;
+  if (key in exports && exports[key] === _SidebarLinksGroup[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _SidebarHeader[key];
+      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];
     }
   });
 });
 
-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 _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];
+    }
+  });
+});
 
-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 _SidebarContext = require("./SidebarContext");

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

@@ -11,7 +11,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -92,7 +92,7 @@ var Switch = function Switch(_ref) {
     },
     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),
+      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,

package/cjs/Tables/DataTable/DataTable.js

@@ -41,9 +41,11 @@ var _Header = _interopRequireDefault(require("./components/Header"));
 
 var _Loader = _interopRequireDefault(require("./components/Loader"));
 
+var _utils2 = require("./utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+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; }
 
@@ -111,17 +113,13 @@ 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 = (0, _react.useState)(),
@@ -136,19 +134,24 @@ var DataTable = function DataTable(_ref) {
   var computedColumns = (0, _compact["default"])([selectMode === "single" && {
     id: "_internal_singleSelect",
     accessor: "_internal_singleSelect",
-    Header: false,
+    Header: function Header() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["sr-only"]))),
+        children: "Selected row"
+      });
+    },
     Cell: function Cell(_ref2) {
       var row = _ref2.row;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (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"])(["", ""])), row.hovered || row.selected ? "opacity-100" : "opacity-0 select-none")
         })
       });
     },
-    className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-3"])))
+    className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-3"])))
   }, selectMode === "multi" && {
     id: "_internal_multiSelect",
     accessor: "_internal_multiSelect",
@@ -170,7 +173,7 @@ var DataTable = function DataTable(_ref) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox["default"], {
         "aria-label": locale.selectAllButton // 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"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["absolute mb-2.5"]))),
         checked: isChecked,
         indeterminate: isIndeterminate,
         onClick: function onClick() {
@@ -181,15 +184,15 @@ var DataTable = function DataTable(_ref) {
     Cell: function Cell(_ref3) {
       var row = _ref3.row;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (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"])(["", ""])), row.hovered || row.selected ? "opacity-100" : "opacity-0 select-none")
         })
       });
     },
-    className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["w-3"])))
+    className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["w-3"])))
   }].concat((0, _toConsumableArray2["default"])(columns.map(function (c) {
     var _c$Header;
 
@@ -229,12 +232,18 @@ 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 ((0, _utils2.isDeterminatePagination)(pagination)) return pagination && pagination.totalItemsCount > 0;
+    if ((0, _utils2.isIndeterminatePagination)(pagination)) return pagination && data.length > 0;
+    return false;
+  };
+
   var onRowHoverChange = function onRowHoverChange(row) {
     setHoveredRowId(row === null || row === void 0 ? void 0 : row.id);
     onRowHoveredChanged === null || onRowHoveredChanged === void 0 ? void 0 : onRowHoveredChanged(row);
   };
 
-  var handleToggleSort = function handleToggleSort(columnId, direction) {
+  var onToggleSort = function onToggleSort(columnId, direction) {
     var newSorting = internalSorting.map(function (_ref7) {
       var _ref8 = (0, _slicedToArray2["default"])(_ref7, 2),
           colId = _ref8[0],
@@ -253,24 +262,24 @@ var DataTable = function DataTable(_ref) {
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["relative"]))),
+    className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["relative"]))),
     children: [status === "loading" && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["absolute bg-white/50 z-10 w-full h-full flex items-center justify-center"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["absolute bg-white/50 z-10 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"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["-mt-12"]))),
         locale: locale
       })
     }), /*#__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"),
+      className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (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"], {
+      footer: shouldRenderPagination() && /*#__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,
+        onToggleSort: onToggleSort,
         sorting: internalSorting
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Body["default"], {
         rows: rows,

package/cjs/Tables/DataTable/DataTable.tailwind.js

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

package/cjs/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/cjs/Tables/DataTable/components/HeaderCell.js

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _reactFeather = require("react-feather");
 
@@ -23,7 +23,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 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; }
 
@@ -43,22 +43,32 @@ var HeaderCell = function HeaderCell(_ref) {
       disabled = _ref.disabled,
       children = _ref.children,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.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: (0, _classnames["default"])(className, (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["group ", ""])), sort && (disabled ? "cursor-not-allowed" : "cursor-pointer"))),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["inline-flex items-center"]))),
+    className: disabled ? (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["cursor-not-allowed"]))) : (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["cursor-pointer"])))
+  } : {};
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("th", _objectSpread(_objectSpread({}, props), {}, {
+    "aria-sort": sortingDirection === "desc" ? "descending" : sortingDirection === "asc" ? "ascending" : "none",
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(InternalCellComponent, _objectSpread(_objectSpread({}, sortButtonProps), {}, {
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["px-4 py-[14px] inline-flex items-center focus:outline-none focus:text-accent-600"]))), sortButtonProps.className),
       children: [children, sort ? sortingDirection === "desc" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.ChevronDown, {
         className: iconClassName
       }) : sortingDirection === "asc" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.ChevronUp, {
         className: iconClassName
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.ChevronDown, {
-        className: (0, _classnames["default"])(iconClassName, (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["text-grey-300 opacity-0 group-hover:opacity-100"]))))
+        className: (0, _clsx["default"])(iconClassName, (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["text-grey-300"]))))
       }) : null]
-    })
+    }))
   }));
 };
 

package/cjs/Tables/Table/Table.js

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
@@ -58,7 +58,7 @@ var Table = function Table(_ref) {
       highlight = _ref$highlight === void 0 ? true : _ref$highlight,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["rounded text-grey-900 bg-white display-body"]))), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["rounded text-grey-900 bg-white display-body"]))), className),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["overflow-x-auto"]))),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("table", _objectSpread(_objectSpread({}, props), {}, {

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

@@ -9,7 +9,7 @@ exports["default"] = exports.Footer = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
 
@@ -26,7 +26,7 @@ var Footer = function Footer(_ref) {
     small: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["py-1 px-4"])))
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100 border-t border-grey-200 text-grey-600 flex items-center justify-center"]))), SIZE_CLASSNAMES[size]),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100 border-t border-grey-200 text-grey-600 flex items-center justify-center"]))), SIZE_CLASSNAMES[size]),
     children: children
   });
 };

package/cjs/Tabs/ContentTabs.js

@@ -13,7 +13,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _tabs = require("@reach/tabs");
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -59,7 +59,7 @@ var ContentTabs = function ContentTabs(_ref) {
     onChange: handleTabsChange,
     defaultIndex: internalTabIndex,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tabs.TabList, {
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tabs-tabbar border-b border-grey-200 flex overflow-x-auto whitespace-nowrap space-x-6"]))), className),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tabs-tabbar border-b border-grey-200 flex overflow-x-auto whitespace-nowrap space-x-6"]))), className),
       children: tabs.map(function (_ref2, index) {
         var _ref2$variant = _ref2.variant,
             variant = _ref2$variant === void 0 ? "accent" : _ref2$variant,
@@ -68,7 +68,7 @@ var ContentTabs = function ContentTabs(_ref) {
             label = _ref2.label,
             value = _ref2.value;
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_tabs.Tab, {
-          className: (0, _classnames["default"])(_utils.ACTIVE_UNDERLINE_VARIANT_CLASSNAMES[variant], (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["tab pb-3 text-base leading-sm"]))), className),
+          className: (0, _clsx["default"])(_utils.ACTIVE_UNDERLINE_VARIANT_CLASSNAMES[variant], (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["tab pb-3 text-base leading-sm"]))), className),
           disabled: disabled,
           children: [label, value && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge["default"], {
             size: "small",

package/cjs/Tabs/LinkTabs.js

@@ -9,7 +9,7 @@ exports.defaultUrlMatcher = exports["default"] = exports.LinkTabs = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _useLocation = _interopRequireDefault(require("react-use/lib/useLocation"));
 
@@ -73,7 +73,7 @@ var LinkTabs = function LinkTabs(_ref) {
   tabIndex = tabIndex === -1 ? 0 : tabIndex;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("nav", {
     role: "tablist",
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tabs-tabbar border-b border-grey-200 flex overflow-x-auto whitespace-nowrap space-x-6"]))), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tabs-tabbar border-b border-grey-200 flex overflow-x-auto whitespace-nowrap space-x-6"]))), className),
     children: tabs.map(function (tab, index) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkTab["default"], {
         tab: tab,

package/cjs/Tabs/Tabs.tailwind.js

@@ -10,25 +10,25 @@ var tabsPlugin = plugin(function (_ref) {
     ".tabs-tabbar": {
       scrollBehavior: "smooth"
     },
-    ".tab[data-selected]": {
+    ".tab[aria-selected=true]": {
       color: theme("colors.grey.900")
     },
-    ".tab-grey[data-selected], .tab-grey:hover, .tab-grey:focus": {
+    ".tab-grey[aria-selected=true], .tab-grey:hover, .tab-grey:focus": {
       borderBottomColor: theme("colors.grey.300")
     },
-    ".tab-accent[data-selected], .tab-accent:hover, .tab-accent:focus": {
+    ".tab-accent[aria-selected=true], .tab-accent:hover, .tab-accent:focus": {
       borderBottomColor: theme("colors.accent.600")
     },
-    ".tab-blue[data-selected], .tab-blue:hover, .tab-blue:focus": {
+    ".tab-blue[aria-selected=true], .tab-blue:hover, .tab-blue:focus": {
       borderBottomColor: theme("colors.blue.600")
     },
-    ".tab-green[data-selected], .tab-green:hover, .tab-green:focus": {
+    ".tab-green[aria-selected=true], .tab-green:hover, .tab-green:focus": {
       borderBottomColor: theme("colors.green.600")
     },
-    ".tab-orange[data-selected], .tab-orange:hover, .tab-orange:focus": {
+    ".tab-orange[aria-selected=true], .tab-orange:hover, .tab-orange:focus": {
       borderBottomColor: theme("colors.orange.600")
     },
-    ".tab-red[data-selected], .tab-red:hover, .tab-red:focus": {
+    ".tab-red[aria-selected=true], .tab-red:hover, .tab-red:focus": {
       borderBottomColor: theme("colors.red.600")
     },
     ".tab": {
@@ -40,7 +40,7 @@ var tabsPlugin = plugin(function (_ref) {
       display: "inline-flex",
       justifyContent: "center",
       minWidth: theme("spacing.12"),
-      "&[disabled], &[data-disabled=true]": {
+      "&[disabled], &[aria-disabled=true]": {
         color: theme("colors.grey.400"),
         borderBottomColor: "transparent",
         cursor: "not-allowed"