@algolia/satellite 1.0.0-beta.174 → 1.0.0-beta.176

package/cjs/Toast/Toasts.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Toasts = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var ToastPrimitive = _interopRequireWildcard(require("@radix-ui/react-toast"));
+var _reactTransitionGroup = require("react-transition-group");
+var _Satellite = require("../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _prefersReducedMotion = require("../utils/prefersReducedMotion");
+var _Toast = _interopRequireDefault(require("./Toast"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _excluded = ["content", "id", "autoDismissAfter"];
+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; }
+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 DEFAULT_TOASTS_LOCALE = {
+  hotkeyLabel: "Notifications"
+};
+var TRANSITION_TIMEOUT = 500;
+
+/**
+ * Toasts are brief notifications that providing timely feedback to users before vanishing after a short duration.
+ *
+ * See the [Toast documentation page](https://satellite.algolia.com/components/feedback/toast) for more information.
+ */
+var Toasts = exports.Toasts = function Toasts(_ref) {
+  var _ref$notifications = _ref.notifications,
+    notifications = _ref$notifications === void 0 ? [] : _ref$notifications,
+    propsLocale = _ref.locale;
+  var contextLocale = (0, _Satellite.useLocale)("toasts");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_TOASTS_LOCALE), contextLocale), propsLocale);
+  var createPortal = (0, _Satellite.useCreatePortal)();
+  if (process.env.NODE_ENV !== "production") {
+    if (notifications.length > 3) {
+      console.warn("Toasts: You should not display more than 3 toasts simultaneously.");
+    }
+    if (notifications.find(function (n) {
+      return n.autoDismissAfter && n.autoDismissAfter < 2000;
+    })) {
+      console.warn("Toasts: You should not set `autoDismissAfter` to less than 2000 ms, even for brief messages.");
+    }
+  }
+  return createPortal( /*#__PURE__*/(0, _jsxRuntime.jsxs)(ToastPrimitive.Provider, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.TransitionGroup, {
+      component: null,
+      children: notifications.map(function (_ref2) {
+        var content = _ref2.content,
+          id = _ref2.id,
+          autoDismissAfter = _ref2.autoDismissAfter,
+          rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+          classNames: !_prefersReducedMotion.prefersReducedMotion ? {
+            enter: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["toasts_item-enter"]))),
+            enterActive: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["toasts_item-enter-active"]))),
+            exit: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["toasts_item-exit"]))),
+            exitActive: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["toasts_item-exit-active"])))
+          } : {},
+          timeout: !_prefersReducedMotion.prefersReducedMotion ? TRANSITION_TIMEOUT : 0,
+          appear: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToastPrimitive.Root, {
+            open: true,
+            onOpenChange: function onOpenChange(open) {
+              var _rest$onDismiss;
+              if (!open) (_rest$onDismiss = rest.onDismiss) === null || _rest$onDismiss === void 0 || _rest$onDismiss.call(rest);
+            },
+            onSwipeEnd: function onSwipeEnd(e) {
+              return e.preventDefault();
+            } // Prevent swipe gesture
+            ,
+            duration: autoDismissAfter || Infinity,
+            // Accessibility issue from Radix: `role="status"` is not allowed on a `li` element, as a workaround,
+            // we use it on the child.
+            // See https://github.com/radix-ui/primitives/issues/1750
+            role: "listitem",
+            "aria-live": undefined,
+            "aria-atomic": undefined,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toast["default"], _objectSpread(_objectSpread({}, rest), {}, {
+              role: "status",
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              children: content
+            }))
+          })
+        }, id);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ToastPrimitive.Viewport, {
+      hotkey: ["metaKey", "F8"],
+      label: "".concat(locale.hotkeyLabel, " (CmdKey+F8/WinKey+F8)}"),
+      className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["z-notification bottom-0 right-0 fixed flex flex-col items-end p-4 gap-4"])))
+    })]
+  }));
+};
+var _default = exports["default"] = Toasts;

package/cjs/Toast/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Toast";
+export * from "./Toasts";
+export * from "./types";
+export { default } from "./Toast";

package/cjs/{Flag → Toast}/index.js

@@ -8,30 +8,30 @@ var _exportNames = {};
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _Flag["default"];
+    return _Toast["default"];
   }
 });
-var _Flag = _interopRequireWildcard(require("./Flag"));
-Object.keys(_Flag).forEach(function (key) {
+var _Toast = _interopRequireWildcard(require("./Toast"));
+Object.keys(_Toast).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Flag[key]) return;
+  if (key in exports && exports[key] === _Toast[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _Flag[key];
+      return _Toast[key];
     }
   });
 });
-var _Flags = require("./Flags");
-Object.keys(_Flags).forEach(function (key) {
+var _Toasts = require("./Toasts");
+Object.keys(_Toasts).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Flags[key]) return;
+  if (key in exports && exports[key] === _Toasts[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _Flags[key];
+      return _Toasts[key];
     }
   });
 });

package/cjs/Toast/types.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+import type { IconComponentType } from "../Icons";
+import type { ColorVariant } from "../types";
+export declare type Notification = {
+    /** Defines an unique ID for the `Toast`. */
+    id: string;
+    /** Defines the title for the `Toast`. */
+    title: string;
+    /** Defines the content for the `Toast`. */
+    content?: ReactNode;
+    /** Defines the icon for the `Toast`. */
+    icon?: IconComponentType;
+    /**
+     * Defines the color variant of the `Toast`.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Defines the color variant of the `Toast`.
+     * @default "blue"
+     */
+    variant?: ColorVariant;
+    /** Defines if and how long before the `Toast` should be dismissed (in ms). */
+    autoDismissAfter?: number;
+    /**
+     * Defines a function called when the `Toast` dismiss button is clicked or the `autoDismissAfter` time has elapsed.
+     * Dismiss button won't be rendered if absent.
+     */
+    onDismiss?: () => void;
+    /** Define locale for the `Toast`. */
+    locale?: {
+        dismissText?: string;
+    };
+};

package/cjs/Toast/types.js

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

package/cjs/index.d.ts

@@ -20,7 +20,7 @@ export * from "./Dropdown";
 export * from "./Dropzone";
 export * from "./EmptyState";
 export * from "./Field";
-export * from "./Flag";
+export * from "./Toast";
 export * from "./FlexGrid";
 export * from "./HelpUnderline";
 export * from "./Icons";

package/cjs/index.js

@@ -254,15 +254,15 @@ Object.keys(_Field).forEach(function (key) {
     }
   });
 });
-var _Flag = require("./Flag");
-Object.keys(_Flag).forEach(function (key) {
+var _Toast = require("./Toast");
+Object.keys(_Toast).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Flag[key]) return;
+  if (key in exports && exports[key] === _Toast[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _Flag[key];
+      return _Toast[key];
     }
   });
 });

package/cjs/styles/tailwind.config.js

@@ -142,5 +142,5 @@ module.exports = {
       }
     }
   },
-  plugins: [require("./base.tailwind"), require("../utilities/overlay.tailwind"), require("../utilities/utilities.tailwind"), require("../Typography/Typography.tailwind"), require("../FlexGrid/FlexGrid.tailwind"), require("../AutoComplete/AutoComplete.tailwind"), require("../Button/Button.tailwind"), require("../Card/Card.tailwind"), require("../Checkbox/Checkbox.tailwind"), require("../EmptyState/EmptyState.tailwind"), require("../Flag/Flag.tailwind"), require("../HelpUnderline/HelpUnderline.tailwind"), require("../Input/Input.tailwind"), require("../InstantSearch/InstantSearch.tailwind"), require("../KeyboardKey/KeyboardKey.tailwind"), require("../Medallion/Medallion.tailwind"), require("../Modal/Modal.tailwind"), require("../ProgressBar/ProgressBar.tailwind"), require("../ProgressSpinner/ProgressSpinner.tailwind"), require("../RadioGroup/RadioButton.tailwind"), require("../ScrollIndicator/ScrollIndicator.tailwind"), require("../Select/Select.tailwind"), require("../Separator/Separator.tailwind"), require("../Switch/Switch.tailwind"), require("../Tabs/Tabs.tailwind"), require("../Tables/DataTable/DataTable.tailwind"), require("../Tables/Table/Table.tailwind"), require("../Tag/Tag.tailwind"), require("../TextArea/TextArea.tailwind"), require("../Toggle/Toggle.tailwind"), require("../Tooltip/Tooltip.tailwind"), require("../UserContent/UserContent.tailwind"), require("../DatePicker/DatePicker.tailwind")]
+  plugins: [require("./base.tailwind"), require("../utilities/overlay.tailwind"), require("../utilities/utilities.tailwind"), require("../Typography/Typography.tailwind"), require("../FlexGrid/FlexGrid.tailwind"), require("../AutoComplete/AutoComplete.tailwind"), require("../Button/Button.tailwind"), require("../Card/Card.tailwind"), require("../Checkbox/Checkbox.tailwind"), require("../EmptyState/EmptyState.tailwind"), require("../Toast/Toast.tailwind"), require("../HelpUnderline/HelpUnderline.tailwind"), require("../Input/Input.tailwind"), require("../InstantSearch/InstantSearch.tailwind"), require("../KeyboardKey/KeyboardKey.tailwind"), require("../Medallion/Medallion.tailwind"), require("../Modal/Modal.tailwind"), require("../ProgressBar/ProgressBar.tailwind"), require("../ProgressSpinner/ProgressSpinner.tailwind"), require("../RadioGroup/RadioButton.tailwind"), require("../ScrollIndicator/ScrollIndicator.tailwind"), require("../Select/Select.tailwind"), require("../Separator/Separator.tailwind"), require("../Switch/Switch.tailwind"), require("../Tabs/Tabs.tailwind"), require("../Tables/DataTable/DataTable.tailwind"), require("../Tables/Table/Table.tailwind"), require("../Tag/Tag.tailwind"), require("../TextArea/TextArea.tailwind"), require("../Toggle/Toggle.tailwind"), require("../Tooltip/Tooltip.tailwind"), require("../UserContent/UserContent.tailwind"), require("../DatePicker/DatePicker.tailwind")]
 };

package/cjs/types.d.ts

@@ -13,12 +13,12 @@ export declare type AtLeastOne<Type, Union = {
 export declare type WithRequiredProperty<Type, Key extends keyof Type> = Type & {
     [Property in Key]-?: Type[Property];
 };
-declare type Without<Type, Union> = {
-    [Property in Exclude<keyof Type, keyof Union>]?: never;
-};
 /**
  * Makes two types mutually exclusive
  * https://stackoverflow.com/questions/42123407/does-typescript-support-mutually-exclusive-types
  */
+declare type Without<Type, Union> = {
+    [Property in Exclude<keyof Type, keyof Union>]?: never;
+};
 export declare type XOR<Type, Union> = Type | Union extends object ? (Without<Type, Union> & Union) | (Without<Union, Type> & Type) : Type | Union;
 export {};

package/cjs/utils/getTextFromReactNode.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Returns the text content of a React node.
+ */
+export declare const getTextFromReactNode: (node: React.ReactNode) => string;

package/cjs/utils/getTextFromReactNode.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTextFromReactNode = void 0;
+var _react = require("react");
+/**
+ * Returns the text content of a React node.
+ */
+var getTextFromReactNode = exports.getTextFromReactNode = function getTextFromReactNode(node) {
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return node.toString();
+  if ( /*#__PURE__*/(0, _react.isValidElement)(node)) {
+    return _react.Children.toArray(node.props.children).map(function (child) {
+      return getTextFromReactNode(child);
+    }).join(" ");
+  }
+  return "";
+};

package/esm/AutoComplete/AutoComplete.js

@@ -20,7 +20,7 @@ import ScrollIndicator from "../ScrollIndicator";
 import stl from "../styles/helpers/satellitePrefixer";
 import Tag from "../Tag";
 import uniqBy from "../utils/uniqBy";
-import { AutocompleteProvider } from "./components/AutocompleteContext";
+import { AutoCompleteProvider } from "./components/AutoCompleteContext";
 import AutoCompleteEmptyState from "./components/AutoCompleteEmptyState";
 import { DefaultOptionItem } from "./components/DefaultOptionItem";
 import { DEFAULT_AUTOCOMPLETE_LOCALE, defaultCreateFromInputValue, filter, optionToString } from "./utils";
@@ -293,20 +293,15 @@ export var AutoComplete = function AutoComplete(_ref) {
   var shouldShowDefaultEmptyState = emptyState === undefined && !!inputValue.length;
   var shouldShowEmptyState = !!emptyState;
   var hideMenu = !combobox.isOpen || items.length === 0 && !shouldShowEmptyState && !shouldShowDefaultEmptyState;
-  var OptionItem = useMemo(function () {
-    return optionItemComponent !== null && optionItemComponent !== void 0 ? optionItemComponent : function (props) {
-      return /*#__PURE__*/_jsx(DefaultOptionItem, _objectSpread(_objectSpread({}, props), {}, {
-        locale: locale
-      }));
-    };
-  }, [optionItemComponent, locale]);
+  var OptionItem = optionItemComponent !== null && optionItemComponent !== void 0 ? optionItemComponent : DefaultOptionItem;
   useEffect(function () {
     updateRef(internalsRef, {
       inputRef: inputRef,
       inputValue: inputValue
     });
   }, [inputRef, internalsRef, inputValue]);
-  return /*#__PURE__*/_jsx(AutocompleteProvider, {
+  return /*#__PURE__*/_jsx(AutoCompleteProvider, {
+    locale: locale,
     children: /*#__PURE__*/_jsxs("div", {
       className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex"]))), className),
       ref: function ref(el) {

package/esm/AutoComplete/components/AutoCompleteContext.d.ts

@@ -0,0 +1,10 @@
+import type { PropsWithChildren, VFC } from "react";
+import type { AutoCompleteLocale } from "../types";
+declare type AutoCompleteContextType = {
+    locale: Required<AutoCompleteLocale>;
+};
+declare type AutoCompleteProviderProps = PropsWithChildren<AutoCompleteContextType>;
+export declare const AutoCompleteProvider: VFC<AutoCompleteProviderProps>;
+export declare const useIsInsideAutoComplete: () => boolean;
+export declare const useAutoCompleteLocale: () => Required<AutoCompleteLocale>;
+export {};

package/esm/AutoComplete/components/AutoCompleteContext.js

@@ -0,0 +1,23 @@
+import { createContext, useContext } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+var AutoCompleteContext = /*#__PURE__*/createContext(null);
+export var AutoCompleteProvider = function AutoCompleteProvider(_ref) {
+  var locale = _ref.locale,
+    children = _ref.children;
+  return /*#__PURE__*/_jsx(AutoCompleteContext.Provider, {
+    value: {
+      locale: locale
+    },
+    children: children
+  });
+};
+export var useIsInsideAutoComplete = function useIsInsideAutoComplete() {
+  return !!useContext(AutoCompleteContext);
+};
+export var useAutoCompleteLocale = function useAutoCompleteLocale() {
+  var context = useContext(AutoCompleteContext);
+  if (!context) {
+    throw new Error("useAutoCompleteLocale must be used inside AutoCompleteProvider");
+  }
+  return context.locale;
+};

package/esm/AutoComplete/components/DefaultOptionItem.js

@@ -1,6 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+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) { _defineProperty(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; }
 import stl from "../../styles/helpers/satellitePrefixer";
+import { useAutoCompleteLocale } from "./AutoCompleteContext";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var metadataSpacer = /*#__PURE__*/_jsx("span", {
@@ -11,12 +15,14 @@ export var DefaultOptionItem = function DefaultOptionItem(_ref) {
   var _locale$optionItemPre;
   var option = _ref.option,
     multiple = _ref.multiple,
-    locale = _ref.locale;
+    localeProp = _ref.locale;
+  var contextLocale = useAutoCompleteLocale();
+  var locale = _objectSpread(_objectSpread({}, contextLocale), localeProp);
   return /*#__PURE__*/_jsxs("div", {
     className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["truncate py-2"]))),
     children: [/*#__PURE__*/_jsx("span", {
       className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["font-semibold text-md text-grey-900"]))),
-      children: option["new"] ? "".concat(locale === null || locale === void 0 || (_locale$optionItemPre = locale.optionItemPrefix) === null || _locale$optionItemPre === void 0 ? void 0 : _locale$optionItemPre.call(locale, multiple), " ").concat(option.label) : option.label
+      children: option["new"] ? "".concat((_locale$optionItemPre = locale.optionItemPrefix) === null || _locale$optionItemPre === void 0 ? void 0 : _locale$optionItemPre.call(locale, multiple), " ").concat(option.label) : option.label
     }), option.metadata && option.metadata.length > 0 && /*#__PURE__*/_jsx("ul", {
       className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["flex text-grey-600"]))),
       children: option.metadata.map(function (metadata, idx) {

package/esm/AutoComplete/index.d.ts

@@ -1,7 +1,7 @@
 export * from "./AutoComplete";
 export * from "./components/DefaultOptionItem";
 export * from "./components/AutoCompleteEmptyState";
-export * from "./components/AutocompleteContext";
+export * from "./components/AutoCompleteContext";
 export * from "./types";
 export { defaultCreateFromInputValue } from "./utils";
 export { default } from "./AutoComplete";

package/esm/AutoComplete/index.js

@@ -1,7 +1,7 @@
 export * from "./AutoComplete";
 export * from "./components/DefaultOptionItem";
 export * from "./components/AutoCompleteEmptyState";
-export * from "./components/AutocompleteContext";
+export * from "./components/AutoCompleteContext";
 export * from "./types";
 export { defaultCreateFromInputValue } from "./utils";
 export { default } from "./AutoComplete";

package/esm/Button/Button.tailwind.js

@@ -14,6 +14,7 @@ var buttonPlugin = plugin(function (_ref) {
       position: "relative",
       borderRadius: theme("borderRadius.DEFAULT"),
       cursor: "pointer",
+      minWidth: "min-content",
       "&, &:hover": {
         textDecoration: "none"
       },

package/esm/Button/PolymorphicButton.js

@@ -57,7 +57,7 @@ export var PolymorphicButton = /*#__PURE__*/forwardRef(function (props, ref) {
       height: ICON_SIZE,
       className: cx(stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["shrink-0"]))), iconClassNames)
     }), /*#__PURE__*/_jsx("span", {
-      className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["truncate text-center px-1"]))), textClassNames),
+      className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["whitespace-nowrap px-1"]))), textClassNames),
       children: children
     }), EndIcon && /*#__PURE__*/_jsx(EndIcon, {
       width: ICON_SIZE,

package/esm/Dropdown/Dropdown.d.ts

@@ -35,10 +35,6 @@ declare type DropdownSubComponents = {
     Title: typeof DropdownTitle;
 };
 export declare const DEFAULT_DROPDOWN_POPPER_MODIFIERS: StrictModifier[];
-/**
- * The `Dropdown` component helps users select an item from a list of available options.
- *
- * See the [Dropdown documentation page](https://satellite.algolia.com/components/actions/dropdown) for more information.
- */
+/** @deprecated use `MenuButton` instead */
 export declare const Dropdown: VFC<DropdownProps> & DropdownSubComponents;
 export default Dropdown;

package/esm/Dropdown/Dropdown.js

@@ -29,13 +29,7 @@ export var DEFAULT_DROPDOWN_POPPER_MODIFIERS = [{
     offset: [0, 16]
   }
 }];
-
-/**
- * The `Dropdown` component helps users select an item from a list of available options.
- *
- * See the [Dropdown documentation page](https://satellite.algolia.com/components/actions/dropdown) for more information.
- */
-export var Dropdown = function Dropdown(_ref) {
+var _Dropdown = function _Dropdown(_ref) {
   var _renderFooter;
   var _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? "bottom-start" : _ref$placement,
@@ -111,12 +105,15 @@ export var Dropdown = function Dropdown(_ref) {
     })
   });
 };
-Dropdown.ButtonItem = DropdownButtonItem;
-Dropdown.LinkItem = DropdownLinkItem;
-Dropdown.RadioItem = DropdownRadioItem;
-Dropdown.ToggleItem = DropdownToggleItem;
-Dropdown.CollapsibleItem = DropdownCollapsibleItem;
-Dropdown.FooterItem = DropdownFooterItem;
-Dropdown.Divider = DropdownDivider;
-Dropdown.Title = DropdownTitle;
+_Dropdown.ButtonItem = DropdownButtonItem;
+_Dropdown.LinkItem = DropdownLinkItem;
+_Dropdown.RadioItem = DropdownRadioItem;
+_Dropdown.ToggleItem = DropdownToggleItem;
+_Dropdown.CollapsibleItem = DropdownCollapsibleItem;
+_Dropdown.FooterItem = DropdownFooterItem;
+_Dropdown.Divider = DropdownDivider;
+_Dropdown.Title = DropdownTitle;
+
+/** @deprecated use `MenuButton` instead */
+export var Dropdown = _Dropdown;
 export default Dropdown;

package/esm/Dropdown/DropdownButton.d.ts

@@ -7,5 +7,8 @@ export interface DropdownButtonProps extends Omit<ButtonProps, "title" | "endIco
     renderFooter?: (args: RenderTargetParams) => ReactNode;
     children: ReactNode;
 }
+/**
+ * @deprecated use `MenuButton` instead
+ */
 export declare const DropdownButton: import("react").ForwardRefExoticComponent<DropdownButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default DropdownButton;

package/esm/Dropdown/DropdownButton.js

@@ -8,6 +8,9 @@ import { ChevronDown } from "react-feather";
 import Button from "../Button";
 import Dropdown from "./Dropdown";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated use `MenuButton` instead
+ */
 export var DropdownButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     title = _ref.title,

package/esm/Dropdown/components/DropdownButtonItem.d.ts

@@ -10,5 +10,6 @@ export declare type DropdownButtonItemProps = DropdownBaseItemProps<HTMLButtonEl
      */
     variant?: "default" | "destructive";
 };
+/** @deprecated */
 export declare const DropdownButtonItem: VFC<DropdownButtonItemProps>;
 export default DropdownButtonItem;

package/esm/Dropdown/components/DropdownButtonItem.js

@@ -10,7 +10,7 @@ import stl from "../../styles/helpers/satellitePrefixer";
 import useDropdownItemProps from "../useDropdownItemProps";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var DropdownButtonItem = function DropdownButtonItem(props) {
+var _DropdownButtonItem = function _DropdownButtonItem(props) {
   var dropdownItemProps = useDropdownItemProps(props);
   // `toggle` is destructured here because we don't want it passed to the `button`
   var _props$dropdownItemPr = _objectSpread(_objectSpread({}, props), dropdownItemProps),
@@ -32,7 +32,10 @@ export var DropdownButtonItem = function DropdownButtonItem(props) {
     })]
   }));
 };
-DropdownButtonItem.defaultProps = {
+_DropdownButtonItem.defaultProps = {
   toggle: true
 };
+
+/** @deprecated */
+export var DropdownButtonItem = _DropdownButtonItem;
 export default DropdownButtonItem;

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItem.d.ts

@@ -6,5 +6,6 @@ export interface DropdownCollapsibleItemProps {
     onClick?: (evt: MouseEvent<HTMLElement>, name: string, expandedItems: readonly string[]) => void;
     children: ReactNode;
 }
+/** @deprecated */
 export declare const DropdownCollapsibleItem: VFC<DropdownCollapsibleItemProps>;
 export default DropdownCollapsibleItem;

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItem.js

@@ -8,6 +8,7 @@ import { uniqueId } from "../../../utils";
 import { useDropdownCollapsibleItemsGroup } from "./DropdownCollapsibleItemsGroupContext";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+/** @deprecated */
 export var DropdownCollapsibleItem = function DropdownCollapsibleItem(_ref) {
   var title = _ref.title,
     name = _ref.name,

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroup.d.ts

@@ -4,4 +4,5 @@ export declare type DropdownCollapsibleItemsGroupProps = {
     onItemClick(name: string): void;
     children: ReactNode;
 };
+/** @deprecated */
 export declare const DropdownCollapsibleItemsGroup: VFC<DropdownCollapsibleItemsGroupProps>;

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroup.js

@@ -1,5 +1,6 @@
 import { DropdownCollapsibleItemsGroupContext } from "./DropdownCollapsibleItemsGroupContext";
 import { jsx as _jsx } from "react/jsx-runtime";
+/** @deprecated */
 export var DropdownCollapsibleItemsGroup = function DropdownCollapsibleItemsGroup(_ref) {
   var expandedItems = _ref.expandedItems,
     onItemClick = _ref.onItemClick,

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroupContext.d.ts

@@ -4,4 +4,5 @@ export interface DropdownCollapsibleItemsGroupContextInterface {
     onItemClick(name: string): void;
 }
 export declare const DropdownCollapsibleItemsGroupContext: import("react").Context<DropdownCollapsibleItemsGroupContextInterface | null>;
+/** @deprecated */
 export declare const useDropdownCollapsibleItemsGroup: () => DropdownCollapsibleItemsGroupContextInterface;

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroupContext.js

@@ -1,5 +1,7 @@
 import { createContext, useContext } from "react";
 export var DropdownCollapsibleItemsGroupContext = /*#__PURE__*/createContext(null);
+
+/** @deprecated */
 export var useDropdownCollapsibleItemsGroup = function useDropdownCollapsibleItemsGroup() {
   var context = useContext(DropdownCollapsibleItemsGroupContext);
   if (!context) {

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsMultiGroup.d.ts

@@ -5,5 +5,6 @@ export declare type DropdownCollapsibleItemsMultiGroupProps = {
 };
 /**
  * Multiple collapsible item can be open at a given time
+ * @deprecated
  */
 export declare const DropdownCollapsibleItemsMultiGroup: VFC<DropdownCollapsibleItemsMultiGroupProps>;

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsMultiGroup.js

@@ -5,6 +5,7 @@ import { DropdownCollapsibleItemsGroup } from "./DropdownCollapsibleItemsGroup";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Multiple collapsible item can be open at a given time
+ * @deprecated
  */
 export var DropdownCollapsibleItemsMultiGroup = function DropdownCollapsibleItemsMultiGroup(_ref) {
   var initialExpandedItems = _ref.initialExpandedItems,

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsSingleGroup.d.ts

@@ -5,5 +5,6 @@ export declare type DropdownCollapsibleItemsExclusiveGroupProps = {
 };
 /**
  * Only one collapsible item can be open at a given time (unless you manually override)
+ * @deprecated
  */
 export declare const DropdownCollapsibleItemsSingleGroup: VFC<DropdownCollapsibleItemsExclusiveGroupProps>;

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsSingleGroup.js

@@ -4,6 +4,7 @@ import { DropdownCollapsibleItemsGroup } from "./DropdownCollapsibleItemsGroup";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Only one collapsible item can be open at a given time (unless you manually override)
+ * @deprecated
  */
 export var DropdownCollapsibleItemsSingleGroup = function DropdownCollapsibleItemsSingleGroup(_ref) {
   var initialExpandedItem = _ref.initialExpandedItem,

package/esm/Dropdown/components/DropdownDivider.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
+/** @deprecated */
 export declare const DropdownDivider: () => JSX.Element;
 export default DropdownDivider;

package/esm/Dropdown/components/DropdownDivider.js

@@ -1,6 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
 import stl from "../../styles/helpers/satellitePrefixer";
+
+/** @deprecated */
 import { jsx as _jsx } from "react/jsx-runtime";
 export var DropdownDivider = function DropdownDivider() {
   return /*#__PURE__*/_jsx("div", {