@algolia/satellite 1.0.0-beta.135 → 1.0.0-beta.138

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) {

package/esm/Tabs/ContentTabs.js

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import { Tabs as ReachTabs, Tab, TabList, TabPanel, TabPanels } from "@reach/tabs";
-import cx from "classnames";
+import cx from "clsx";
 import { useEffect, useState } from "react";
 import Badge from "../Badge";
 import stl from "../styles/helpers/satellitePrefixer";

package/esm/Tabs/LinkTabs.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import cx from "classnames";
+import cx from "clsx";
 import useLocation from "react-use/lib/useLocation";
 import stl from "../styles/helpers/satellitePrefixer";
 import matchLocation from "../utils/matchLocation";

package/esm/Tabs/components/LinkTab.js

@@ -7,7 +7,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 Badge from "../../Badge";
 import stl from "../../styles/helpers/satellitePrefixer";
 import useLinkProps from "../../utils/useLinkProps";

package/esm/Tag/Tag.js

@@ -9,7 +9,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 { forwardRef } from "react";
 import { X } from "react-feather";
 import { useLocale } from "../Satellite";
@@ -24,8 +24,8 @@ var DEFAULT_TAG_LOCALE = {
 var VARIANT_CLASSNAMES = {
   accent: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["bg-accent-100 border-accent-200 text-accent-700"]))),
   grey: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-grey-100 border-grey-200 text-grey-700"]))),
-  blue: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["bg-blue-100 border-blue-200 text-blue-700"]))),
-  green: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-green-100 border-green-300 text-green-800"]))),
+  blue: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["bg-blue-100 border-blue-200 text-blue-800"]))),
+  green: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-green-100 border-green-300 text-green-900"]))),
   orange: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["bg-orange-100 border-orange-300 text-orange-800"]))),
   red: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["bg-red-100 border-red-200 text-red-700"]))),
   pink: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["bg-pink-100 border-pink-200 text-pink-700"])))
@@ -85,7 +85,6 @@ export var Tag = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   return /*#__PURE__*/_jsxs("span", _objectSpread(_objectSpread({}, props), {}, {
     className: tagClassName,
-    "aria-label": title,
     ref: ref,
     children: [/*#__PURE__*/_jsx("span", {
       className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["truncate flex-1"]))),

package/esm/TextArea/TextArea.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 { forwardRef } from "react";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/Toggle/Toggle.js

@@ -1,17 +1,18 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var _excluded = ["className"];
+var _excluded = ["className", "checked", "defaultChecked"];
 
 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 { forwardRef } from "react";
+import cx from "clsx";
+import { forwardRef, useState } from "react";
 import { Check, X } from "react-feather";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -25,22 +26,49 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
  */
 export var Toggle = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
+      checked = _ref.checked,
+      defaultChecked = _ref.defaultChecked,
       inputProps = _objectWithoutProperties(_ref, _excluded);
 
+  var isControlled = typeof checked === "boolean";
+
+  var _useState = useState(Boolean(isControlled ? checked : defaultChecked)),
+      _useState2 = _slicedToArray(_useState, 2),
+      internalChecked = _useState2[0],
+      setInternalChecked = _useState2[1];
+
+  var isChecked = Boolean(isControlled ? checked : internalChecked);
+
+  var handleChange = function handleChange(evt) {
+    var _inputProps$onChange;
+
+    (_inputProps$onChange = inputProps.onChange) === null || _inputProps$onChange === void 0 ? void 0 : _inputProps$onChange.call(inputProps, evt);
+
+    if (!isControlled && !evt.isDefaultPrevented()) {
+      setInternalChecked(evt.currentTarget.checked);
+    }
+  };
+
   return /*#__PURE__*/_jsxs("div", {
     translate: "yes",
     className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["toggle-container"]))), className),
     children: [/*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, inputProps), {}, {
+      onChange: handleChange,
+      checked: isChecked,
+      "aria-checked": isChecked,
       type: "checkbox",
+      role: "switch",
       ref: ref
     })), /*#__PURE__*/_jsxs("div", {
       className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["toggle flex justify-around items-center"]))),
       children: [/*#__PURE__*/_jsx(Check, {
         size: 12,
-        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["text-white"])))
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["text-white"]))),
+        "aria-hidden": true
       }), /*#__PURE__*/_jsx(X, {
         size: 12,
-        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["text-grey-300"])))
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["text-grey-300"]))),
+        "aria-hidden": true
       })]
     })]
   });

package/esm/Tooltip/OverflowTooltipWrapper.js

@@ -9,7 +9,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 { useState } from "react";
 import { usePopper } from "react-popper";
 import { useCreatePortal } from "../Satellite";

package/esm/Tooltip/Tooltip.js

@@ -9,7 +9,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 { forwardRef } from "react";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/Tooltip/TooltipWrapper.js

@@ -9,7 +9,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 throttle from "lodash.throttle";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { usePopper } from "react-popper";

package/esm/UserContent/UserContent.js

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

package/esm/UserContent/UserContent.tailwind.js

@@ -68,7 +68,7 @@ export default plugin(function (_ref) {
           "&:after": {
             content: "''",
             background: toBG("ExternalLink", {
-              stroke: theme("colors.nebula.600"),
+              stroke: theme("colors.accent.600"),
               viewBox: "0 0 24 24",
               width: "100%",
               height: "100%"

package/esm/utils/onlyText.d.ts

@@ -0,0 +1,3 @@
+import type { ReactNode } from "react";
+declare const onlyText: (children: ReactNode | ReactNode[]) => string;
+export default onlyText;

package/esm/utils/onlyText.js

@@ -0,0 +1,41 @@
+import { Children, isValidElement } from "react";
+
+var hasChildren = function hasChildren(element) {
+  return /*#__PURE__*/isValidElement(element) && Boolean(element.props.children);
+};
+
+var childToString = function childToString(child) {
+  if (typeof child === "undefined" || child === null || typeof child === "boolean") {
+    return "";
+  }
+
+  if (JSON.stringify(child) === "{}") {
+    return "";
+  }
+
+  return child.toString();
+}; // Code stolen from `react-children-utils`
+// @see https://github.com/fernandopasik/react-children-utilities/blob/main/src/lib/onlyText.ts
+
+
+var onlyText = function onlyText(children) {
+  if (!(children instanceof Array) && ! /*#__PURE__*/isValidElement(children)) {
+    return childToString(children);
+  }
+
+  return Children.toArray(children).reduce(function (text, child) {
+    var newText = "";
+
+    if ( /*#__PURE__*/isValidElement(child) && hasChildren(child)) {
+      newText = onlyText(child.props.children);
+    } else if ( /*#__PURE__*/isValidElement(child) && !hasChildren(child)) {
+      newText = "";
+    } else {
+      newText = childToString(child);
+    }
+
+    return text.concat(newText);
+  }, "");
+};
+
+export default onlyText;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@algolia/satellite",
-  "version": "1.0.0-beta.135",
+  "version": "1.0.0-beta.138",
   "description": "Algolia design system React components",
   "scripts": {
     "clean": "rimraf dist",
@@ -17,16 +17,17 @@
     "build:storybook": "yarn build-storybook -o .storybook-static",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s --commit-path ./",
     "dev": "start-storybook -p 6060",
-    "test:storybook": "test-storybook --url https://algolia-satellite.netlify.app/ --no-stories-json",
     "quality": "run-s quality:test quality:types quality:lint",
     "quality:lint": "eslint 'src/**/*.{ts,tsx}'",
     "quality:types": "tsc",
     "quality:test": "jest --config jest.config.js",
+    "quality:accessibility": "run-p -r dev quality:test-storybook",
+    "quality:test-storybook": "wait-on tcp:6060 && test-storybook --url http://localhost:6060 --no-stories-json --maxWorkers=2",
     "preversion": "yarn quality",
     "version": "yarn changelog && git add CHANGELOG.md",
     "postversion": "git push && git push --tags",
     "release": "./scripts/release.sh",
-    "chromatic": "cross-env NODE_ENV=storybook chromatic --build-script-name build:storybook --exit-zero-on-changes --auto-accept-changes master"
+    "chromatic": "chromatic --build-script-name build:storybook --exit-zero-on-changes --auto-accept-changes master"
   },
   "publishConfig": {
     "access": "public"
@@ -67,7 +68,7 @@
     "@babel/runtime": "^7.17.7",
     "@popperjs/core": "^2.4.4",
     "@reach/tabs": "^0.16.1",
-    "classnames": "^2.3.1",
+    "clsx": "^1.2.1",
     "color": "^4.2.3",
     "date-fns": "2.22.1",
     "diacritics": "^1.3.0",
@@ -87,18 +88,11 @@
       "require": "./cjs/index.js",
       "default": "./esm/index.js"
     },
-    "./satellite.min.css": {
-      "default": "./satellite.min.css"
-    },
-    "./satellite.css": {
-      "default": "./satellite.css"
-    },
-    "./cjs/styles/tailwind.config.js": {
-      "default": "./cjs/styles/tailwind.config.js"
-    },
-    "./esm/styles/tailwind.config.js": {
-      "default": "./esm/styles/tailwind.config.js"
-    }
+    "./satellite.min.css": "./satellite.min.css",
+    "./scss/colors.scss": "./scss/colors.scss",
+    "./scss/variables.scss": "./scss/variables.scss",
+    "./cjs/styles/tailwind.config.js": "./cjs/styles/tailwind.config.js",
+    "./esm/styles/tailwind.config.js": "./esm/styles/tailwind.config.js"
   },
   "typings": "./esm/index.d.ts"
 }