@algolia/satellite 2.1.0 → 2.2.1

package/README.md

@@ -54,7 +54,7 @@ import ReactDOM from "react-dom";
 
 import "@algolia/satellite/satellite.min.css";
 
-import { Satellite, Button, stl } from "@algolia/satellite/Button";
+import { Satellite, Button, stl } from "@algolia/satellite";
 
 const loading = true;
 

package/dist/cjs/Actions/Button/PolymorphicIconButton.d.ts

@@ -15,7 +15,6 @@ export interface IconButtonBaseProps {
     size?: ButtonSize;
     /**
      * Whether the `IconButton` is disabled.
-     * @default false
      */
     disabled?: boolean;
     /**
@@ -28,7 +27,6 @@ export interface IconButtonBaseProps {
     title: string;
     /**
      * Whether to show the tooltip.
-     * @default false
      */
     showTooltip?: boolean;
     /**
@@ -36,6 +34,16 @@ export interface IconButtonBaseProps {
      * @default top
      */
     tooltipSide?: TooltipWrapperBaseProps["side"];
+    /**
+     * The delay before showing the tooltip.
+     * @default 500
+     */
+    tooltipDelay?: TooltipWrapperBaseProps["delay"];
+    /**
+     * The delay before hiding the tooltip.
+     * @default 500
+     */
+    tooltipHideDelay?: TooltipWrapperBaseProps["hideDelay"];
     /**
      * Whether the `IconButton` is loading.
      * @default false

package/dist/cjs/Actions/Button/PolymorphicIconButton.js

@@ -16,7 +16,7 @@ var _Indicators = require("./../../Indicators");
 var _Overlay = require("./../../Overlay");
 var _satellitePrefixer = _interopRequireDefault(require("./../../styles/helpers/satellitePrefixer"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["as", "className", "variant", "size", "icon", "title", "showTooltip", "tooltipSide", "loading"];
+var _excluded = ["as", "className", "variant", "size", "icon", "title", "showTooltip", "tooltipSide", "tooltipDelay", "tooltipHideDelay", "loading"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 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; }
@@ -47,6 +47,10 @@ var PolymorphicIconButton = exports.PolymorphicIconButton = /*#__PURE__*/(0, _re
     showTooltip = props.showTooltip,
     _props$tooltipSide = props.tooltipSide,
     tooltipSide = _props$tooltipSide === void 0 ? "top" : _props$tooltipSide,
+    _props$tooltipDelay = props.tooltipDelay,
+    tooltipDelay = _props$tooltipDelay === void 0 ? 500 : _props$tooltipDelay,
+    _props$tooltipHideDel = props.tooltipHideDelay,
+    tooltipHideDelay = _props$tooltipHideDel === void 0 ? 500 : _props$tooltipHideDel,
     _props$loading = props.loading,
     loading = _props$loading === void 0 ? false : _props$loading,
     cleanedProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
@@ -61,12 +65,14 @@ var PolymorphicIconButton = exports.PolymorphicIconButton = /*#__PURE__*/(0, _re
     cleanedProps.type = "button";
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Overlay.TooltipWrapper, {
-    delay: 500,
+    delay: tooltipDelay,
+    hideDelay: tooltipHideDelay,
     show: showTooltip,
     side: tooltipSide,
     content: title,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Tag, _objectSpread(_objectSpread({}, cleanedProps), {}, {
       className: iconButtonClassName,
+      "aria-busy": loading,
       "aria-label": title,
       ref: ref,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {

package/dist/cjs/Actions/IconButtonWithFeedback/IconButtonWithFeedback.d.ts

@@ -0,0 +1,68 @@
+import type { FC, MouseEvent } from "react";
+import type { IconButtonProps } from "../../Actions/IconButton/IconButton";
+import type { IconComponentType } from "../../Icons";
+export declare const RESET_STATUS_DELAY = 100;
+export declare type IconButtonWithFeedbackLocale = {
+    /**
+     * The tooltip message shown after a successful click.
+     * @default "Success"
+     */
+    success?: string;
+    /**
+     * The tooltip message shown after an error occurs in the `onClick` handler.
+     * @default "Something went wrong"
+     */
+    error?: string;
+    /**
+     * The tooltip message shown while the action is loading.
+     * @default "Loading..."
+     */
+    loading?: string;
+};
+export declare type IconButtonWithFeedbackProps = Omit<IconButtonProps, "title" | "showTooltip" | "loading" | "onClick"> & {
+    /**
+     * The icon to display when the action succeeds.
+     * Set to `false` to disable the success icon.
+     * @default CheckIcon
+     */
+    successIcon?: IconComponentType | false;
+    /**
+     * The icon to display when the action fails.
+     * Set to `false` to disable the error icon.
+     * @default AlertTriangleIcon
+     */
+    errorIcon?: IconComponentType | false;
+    /**
+     * The tooltip message shown by default.
+     */
+    message: string;
+    /**
+     * The locale for the tooltip messages.
+     */
+    locale?: IconButtonWithFeedbackLocale;
+    /**
+     * How long to show the success message tooltip (ms).
+     * @default 1000
+     */
+    tooltipSuccessMessageDuration?: number;
+    /**
+     * How long to show the error message tooltip (ms).
+     * @default 2000
+     */
+    tooltipErrorMessageDuration?: number;
+    /**
+     * Called when the button is clicked.
+     * Can be async.
+     */
+    onClick?: (evt: MouseEvent<HTMLButtonElement>) => Promise<void> | void;
+    /**
+     * Called when an error occurs during `onClick`.
+     */
+    onError?: (error: unknown) => void;
+};
+/**
+ * A compact, icon-only button that displays contextual tooltips on hover and click, enhancing user understanding and confirmation.
+ *
+ * See the [IconButtonWithFeedback documentation page](https://zeroheight.com/8261d6576/p/70da74-icon-button-with-feedback) for more information.
+ */
+export declare const IconButtonWithFeedback: FC<IconButtonWithFeedbackProps>;

package/dist/cjs/Actions/IconButtonWithFeedback/IconButtonWithFeedback.js

@@ -0,0 +1,209 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RESET_STATUS_DELAY = exports.IconButtonWithFeedback = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _useMountedState = _interopRequireDefault(require("react-use/lib/useMountedState"));
+var _spinDelay = require("spin-delay");
+var _IconButton = require("./../IconButton/IconButton");
+var _Icons = require("./../../Icons");
+var _Satellite = require("./../../Satellite");
+var _useTimeoutFn7 = require("./../../utils/useTimeoutFn");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["icon", "successIcon", "errorIcon", "message", "tooltipDelay", "tooltipHideDelay", "tooltipSuccessMessageDuration", "tooltipErrorMessageDuration", "onClick", "onError", "locale"];
+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_TOOLTIP_SHOW_DELAY = 250;
+var DEFAULT_TOOLTIP_HIDE_DELAY = 500;
+var DEFAULT_TOOLTIP_SUCCESS_MESSAGE_DURATION = 1000;
+var DEFAULT_TOOLTIP_ERROR_MESSAGE_DURATION = 2000;
+
+// Used in the tests but not re-exported externally.
+var RESET_STATUS_DELAY = exports.RESET_STATUS_DELAY = 100;
+var DEFAULT_ICON_WITH_BUTTON_FEEDBACK_LOCALE = {
+  success: "Success",
+  error: "Something went wrong",
+  loading: "Loading..."
+};
+/**
+ * A compact, icon-only button that displays contextual tooltips on hover and click, enhancing user understanding and confirmation.
+ *
+ * See the [IconButtonWithFeedback documentation page](https://zeroheight.com/8261d6576/p/70da74-icon-button-with-feedback) for more information.
+ */
+var IconButtonWithFeedback = exports.IconButtonWithFeedback = function IconButtonWithFeedback(_ref) {
+  var iconProp = _ref.icon,
+    _ref$successIcon = _ref.successIcon,
+    successIcon = _ref$successIcon === void 0 ? _Icons.CheckIcon : _ref$successIcon,
+    _ref$errorIcon = _ref.errorIcon,
+    errorIcon = _ref$errorIcon === void 0 ? _Icons.AlertTriangleIcon : _ref$errorIcon,
+    message = _ref.message,
+    _ref$tooltipDelay = _ref.tooltipDelay,
+    tooltipDelay = _ref$tooltipDelay === void 0 ? DEFAULT_TOOLTIP_SHOW_DELAY : _ref$tooltipDelay,
+    _ref$tooltipHideDelay = _ref.tooltipHideDelay,
+    tooltipHideDelay = _ref$tooltipHideDelay === void 0 ? DEFAULT_TOOLTIP_HIDE_DELAY : _ref$tooltipHideDelay,
+    _ref$tooltipSuccessMe = _ref.tooltipSuccessMessageDuration,
+    tooltipSuccessMessageDuration = _ref$tooltipSuccessMe === void 0 ? DEFAULT_TOOLTIP_SUCCESS_MESSAGE_DURATION : _ref$tooltipSuccessMe,
+    _ref$tooltipErrorMess = _ref.tooltipErrorMessageDuration,
+    tooltipErrorMessageDuration = _ref$tooltipErrorMess === void 0 ? DEFAULT_TOOLTIP_ERROR_MESSAGE_DURATION : _ref$tooltipErrorMess,
+    onClick = _ref.onClick,
+    onError = _ref.onError,
+    propsLocale = _ref.locale,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var contextLocale = (0, _Satellite.useLocale)("iconButtonWithFeedback");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_ICON_WITH_BUTTON_FEEDBACK_LOCALE), contextLocale), propsLocale);
+  var _useState = (0, _react.useState)("idle"),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    showTooltip = _useState4[0],
+    setShowTooltip = _useState4[1];
+  var mounted = (0, _useMountedState["default"])();
+
+  // Use a delayed loading state to prevent flickering of the loading spinner.
+  var isLoading = (0, _spinDelay.useSpinDelay)(status === "loading", {
+    delay: 200,
+    minDuration: 600
+  });
+
+  // Show the tooltip after a delay when the button is hovered/focused.
+  var _useTimeoutFn = (0, _useTimeoutFn7.useTimeoutFn)(function () {
+      if (mounted()) setShowTooltip(true);
+    }, tooltipDelay, false),
+    _useTimeoutFn2 = (0, _slicedToArray2["default"])(_useTimeoutFn, 3),
+    cancelShowTooltip = _useTimeoutFn2[1],
+    scheduleShowTooltip = _useTimeoutFn2[2];
+
+  // Hide the tooltip after a delay when the button is unhovered/unfocused.
+  var _useTimeoutFn3 = (0, _useTimeoutFn7.useTimeoutFn)(function () {
+      if (mounted()) setShowTooltip(false);
+    }, status === "error" ? tooltipErrorMessageDuration : tooltipSuccessMessageDuration, false),
+    _useTimeoutFn4 = (0, _slicedToArray2["default"])(_useTimeoutFn3, 3),
+    scheduleHideTooltip = _useTimeoutFn4[2];
+
+  // Reset the tooltip status after a delay when the tooltip is hidden.
+  var _useTimeoutFn5 = (0, _useTimeoutFn7.useTimeoutFn)(function () {
+      if (mounted()) setStatus("idle");
+    }, tooltipHideDelay + RESET_STATUS_DELAY, false),
+    _useTimeoutFn6 = (0, _slicedToArray2["default"])(_useTimeoutFn5, 3),
+    scheduleResetStatus = _useTimeoutFn6[2];
+
+  // Auto-hide tooltip while showing success/error messages.
+  (0, _react.useEffect)(function () {
+    if (status === "idle" || isLoading) return;
+    scheduleHideTooltip();
+  }, [status, isLoading, scheduleHideTooltip]);
+
+  // After tooltip fully fades out, go back to idle.
+  (0, _react.useEffect)(function () {
+    if (showTooltip || status !== "success" && status !== "error") return;
+    scheduleResetStatus();
+  }, [showTooltip, status, scheduleResetStatus]);
+  var getTitle = function getTitle() {
+    if (isLoading) return locale.loading;
+    switch (status) {
+      case "success":
+        return locale.success;
+      case "error":
+        return locale.error;
+      default:
+        return message;
+    }
+  };
+  var getIcon = function getIcon() {
+    if (status === "error" && errorIcon) return errorIcon;
+    if (status === "success" && successIcon) return successIcon;
+    return iconProp;
+  };
+  var title = getTitle();
+  var icon = getIcon();
+  var handleClick = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(evt) {
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!evt.defaultPrevented) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            cancelShowTooltip();
+            setStatus("loading");
+            setShowTooltip(true);
+            _context.prev = 5;
+            _context.next = 8;
+            return onClick === null || onClick === void 0 ? void 0 : onClick(evt);
+          case 8:
+            if (mounted()) {
+              _context.next = 10;
+              break;
+            }
+            return _context.abrupt("return");
+          case 10:
+            setStatus("success");
+            _context.next = 19;
+            break;
+          case 13:
+            _context.prev = 13;
+            _context.t0 = _context["catch"](5);
+            if (mounted()) {
+              _context.next = 17;
+              break;
+            }
+            return _context.abrupt("return");
+          case 17:
+            setStatus("error");
+            onError === null || onError === void 0 || onError(_context.t0);
+          case 19:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[5, 13]]);
+    }));
+    return function handleClick(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  // Common handler for pointer enter/focus
+  var handleShowTooltip = function handleShowTooltip(e) {
+    var _props$onPointerEnter, _props$onFocus;
+    // Call the original handler if provided
+    if (e.type === "pointerenter") (_props$onPointerEnter = props.onPointerEnter) === null || _props$onPointerEnter === void 0 || _props$onPointerEnter.call(props, e);
+    if (e.type === "focus") (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, e);
+    if (isLoading || status !== "idle") return;
+    scheduleShowTooltip();
+  };
+
+  // Common handler for pointer leave/blur
+  var handleHideTooltip = function handleHideTooltip(e) {
+    var _props$onPointerLeave, _props$onBlur;
+    if (e.type === "pointerleave") (_props$onPointerLeave = props.onPointerLeave) === null || _props$onPointerLeave === void 0 || _props$onPointerLeave.call(props, e);
+    if (e.type === "blur") (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, e);
+    if (isLoading || status !== "idle") return;
+    cancelShowTooltip();
+    setShowTooltip(false);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.IconButton, _objectSpread(_objectSpread({}, props), {}, {
+    title: title,
+    showTooltip: showTooltip,
+    tooltipHideDelay: tooltipHideDelay,
+    icon: icon,
+    loading: isLoading,
+    onClick: handleClick,
+    onPointerEnter: handleShowTooltip,
+    onPointerLeave: handleHideTooltip,
+    onFocus: handleShowTooltip,
+    onBlur: handleHideTooltip
+  }));
+};

package/dist/cjs/Actions/SegmentedControl/SegmentedControl.d.ts

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 import type { SegmentedControlSize } from "./types";
 export interface SegmentedControlProps {
     /**
-     * The class name of the `Switch`.
+     * The class name of the `SegmentedControl`.
      */
     className?: string;
     /**
@@ -10,7 +10,7 @@ export interface SegmentedControlProps {
      */
     value: string;
     /**
-     * Whether the `Switch` is disabled.
+     * Whether the `SegmentedControl` is disabled.
      */
     disabled?: boolean;
     /**
@@ -18,11 +18,11 @@ export interface SegmentedControlProps {
      */
     onChange: (value: string) => void;
     /**
-     * The content of the `Switch`.
+     * The content of the `SegmentedControl`.
      */
     children: ReactNode;
     /**
-     * The size of the `Switch`.
+     * The size of the `SegmentedControl`.
      */
     size?: SegmentedControlSize;
     /**

package/dist/cjs/Actions/index.d.ts

@@ -2,6 +2,8 @@ export * from "./Accordion/Accordion";
 export * from "./Button/Button";
 export * from "./ButtonGroup/ButtonGroup";
 export * from "./ButtonLink/ButtonLink";
+export type { IconButtonWithFeedbackLocale, IconButtonWithFeedbackProps, } from "./IconButtonWithFeedback/IconButtonWithFeedback";
+export { IconButtonWithFeedback } from "./IconButtonWithFeedback/IconButtonWithFeedback";
 export * from "./IconButton/IconButton";
 export * from "./IconButtonLink/IconButtonLink";
 export * from "./SegmentedControl";

package/dist/cjs/Actions/index.js

@@ -3,9 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  IconButtonWithFeedback: true
+};
+Object.defineProperty(exports, "IconButtonWithFeedback", {
+  enumerable: true,
+  get: function get() {
+    return _IconButtonWithFeedback.IconButtonWithFeedback;
+  }
+});
 var _Accordion = require("./Accordion/Accordion");
 Object.keys(_Accordion).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Accordion[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -17,6 +27,7 @@ Object.keys(_Accordion).forEach(function (key) {
 var _Button = require("./Button/Button");
 Object.keys(_Button).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Button[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -28,6 +39,7 @@ Object.keys(_Button).forEach(function (key) {
 var _ButtonGroup = require("./ButtonGroup/ButtonGroup");
 Object.keys(_ButtonGroup).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ButtonGroup[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -39,6 +51,7 @@ Object.keys(_ButtonGroup).forEach(function (key) {
 var _ButtonLink = require("./ButtonLink/ButtonLink");
 Object.keys(_ButtonLink).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ButtonLink[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -47,9 +60,11 @@ Object.keys(_ButtonLink).forEach(function (key) {
     }
   });
 });
+var _IconButtonWithFeedback = require("./IconButtonWithFeedback/IconButtonWithFeedback");
 var _IconButton = require("./IconButton/IconButton");
 Object.keys(_IconButton).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _IconButton[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -61,6 +76,7 @@ Object.keys(_IconButton).forEach(function (key) {
 var _IconButtonLink = require("./IconButtonLink/IconButtonLink");
 Object.keys(_IconButtonLink).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _IconButtonLink[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -72,6 +88,7 @@ Object.keys(_IconButtonLink).forEach(function (key) {
 var _SegmentedControl = require("./SegmentedControl");
 Object.keys(_SegmentedControl).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _SegmentedControl[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -83,6 +100,7 @@ Object.keys(_SegmentedControl).forEach(function (key) {
 var _ToggleButton = require("./ToggleButton/ToggleButton");
 Object.keys(_ToggleButton).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ToggleButton[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -94,6 +112,7 @@ Object.keys(_ToggleButton).forEach(function (key) {
 var _ToggleGroup = require("./ToggleGroup/ToggleGroup");
 Object.keys(_ToggleGroup).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ToggleGroup[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,

package/dist/cjs/Fields/AutoComplete/AutoComplete.js

@@ -176,14 +176,14 @@ var AutoComplete = exports.AutoComplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     selectedItems: selectedItems,
     onSelectedItemsChange: function onSelectedItemsChange(changes) {
       if (typeof changes.selectedItems === "undefined") {
-        onChange(null);
+        onChange(null, changes.type);
       } else if (multiple) {
         onChange((0, _uniqBy.uniqBy)(changes.selectedItems, function (i) {
           return i.value;
-        }));
+        }), changes.type);
       } else {
         var _changes$selectedItem;
-        onChange((_changes$selectedItem = changes.selectedItems[0]) !== null && _changes$selectedItem !== void 0 ? _changes$selectedItem : null);
+        onChange((_changes$selectedItem = changes.selectedItems[0]) !== null && _changes$selectedItem !== void 0 ? _changes$selectedItem : null, changes.type);
       }
     }
   });
@@ -199,6 +199,7 @@ var AutoComplete = exports.AutoComplete = /*#__PURE__*/(0, _react.forwardRef)(fu
       });
     },
     defaultHighlightedIndex: 0,
+    isOpen: inputValue ? items.length > 0 ? undefined : true : undefined,
     getA11yStatusMessage: function getA11yStatusMessage(_ref2) {
       var isOpen = _ref2.isOpen,
         resultCount = _ref2.resultCount,
@@ -285,7 +286,13 @@ var AutoComplete = exports.AutoComplete = /*#__PURE__*/(0, _react.forwardRef)(fu
       setInputFocused(true);
     },
     onBlur: function onBlur(evt) {
+      var _evt$relatedTarget;
       _onBlur === null || _onBlur === void 0 || _onBlur(evt);
+
+      // Do not update inputFocused if the blur is caused by the clear button
+      if (evt.relatedTarget instanceof Element && ((_evt$relatedTarget = evt.relatedTarget) === null || _evt$relatedTarget === void 0 ? void 0 : _evt$relatedTarget.getAttribute("aria-label")) === locale.clearInputButton) {
+        return;
+      }
       setInputFocused(false);
     },
     onKeyDown: function onKeyDown(evt) {
@@ -344,7 +351,8 @@ var AutoComplete = exports.AutoComplete = /*#__PURE__*/(0, _react.forwardRef)(fu
         className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-container"]))), inputFocused && (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["focusable-show"]))), variant === "large" && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-large py-1"]))), disabled && (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-disabled"]))), isInvalid && (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-invalid"]))), noWrap && (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-nowrap"])))),
         onClick: function onClick() {
           var _inputRef$current;
-          return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+          (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+          combobox.openMenu();
         },
         children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
           className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["mr-4 shrink-0"]))), (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-200" : inputFocused ? "text-accent-600" : "text-grey-500")),
@@ -394,7 +402,12 @@ var AutoComplete = exports.AutoComplete = /*#__PURE__*/(0, _react.forwardRef)(fu
           }), showClearButton && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
             type: "button",
             className: (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["w-6 h-6 flex items-center justify-center text-grey-500"]))),
-            onClick: function onClick() {
+            onClick: function onClick(evt) {
+              var _inputRef$current2;
+              // We stop propagation to avoid calling the onClick handler of the container
+              // which would open the combobox
+              evt.stopPropagation();
+              (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
               setInternalInputValue("");
               multipleSelection.setSelectedItems([]);
             },

package/dist/cjs/Fields/AutoComplete/types.d.ts

@@ -1,3 +1,4 @@
+import { UseMultipleSelectionStateChangeTypes } from "downshift";
 import type { ComponentType, FocusEventHandler, ForwardedRef, PropsWithChildren, ReactNode, RefObject } from "react";
 import type { IconComponentType } from "../../Icons";
 export declare type AutoCompleteVariant = "medium" | "large";
@@ -171,8 +172,11 @@ export interface AutoCompleteSingleProps<T extends Option = Option> extends Auto
     /**
      * The callback function that is called when the value of the `AutoComplete` changes.
      */
-    onChange: (option: T | null) => void;
+    onChange: (option: T | null, changeType?: AutoCompleteChangeTypesValue) => void;
 }
+declare type UseMultipleSelectionStateChangeTypesKey = keyof typeof UseMultipleSelectionStateChangeTypes;
+export declare type AutoCompleteChangeTypesValue = (typeof UseMultipleSelectionStateChangeTypes)[UseMultipleSelectionStateChangeTypesKey];
+export declare const AutoCompleteChangeTypes: typeof UseMultipleSelectionStateChangeTypes;
 export interface AutoCompleteMultiProps<T extends Option = Option> extends AutoCompleteBaseProps<T> {
     /**
      * Whether the `AutoComplete` is a multiple selection.
@@ -185,7 +189,7 @@ export interface AutoCompleteMultiProps<T extends Option = Option> extends AutoC
     /**
      * The callback function that is called when the value of the `AutoComplete` changes.
      */
-    onChange: (option: T[] | null) => void;
+    onChange: (option: T[] | null, changeType?: AutoCompleteChangeTypesValue) => void;
 }
 export declare type AutoCompleteProps<T extends Option = Option> = AutoCompleteMultiProps<T> | AutoCompleteSingleProps<T>;
 declare type OptionsValue = string | number | boolean;

package/dist/cjs/Fields/AutoComplete/types.js

@@ -2,4 +2,7 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+exports.AutoCompleteChangeTypes = void 0;
+var _downshift = require("downshift");
+var AutoCompleteChangeTypes = exports.AutoCompleteChangeTypes = _downshift.UseMultipleSelectionStateChangeTypes;

package/dist/cjs/Fields/FilePicker/FilePicker.d.ts

@@ -5,6 +5,11 @@ export declare type FilePickerLocale = {
 };
 export declare type FilePickerProps = DropzoneProps & {
     locale?: FilePickerLocale;
+    /**
+     * Whether the picked files can be cleared.
+     * @default true
+     */
+    clearable?: boolean;
 };
 /**
  * The `FilePicker` component allows users to select multiple files for attachment, supporting both drag-and-drop and browse options.
@@ -13,4 +18,9 @@ export declare type FilePickerProps = DropzoneProps & {
  */
 export declare const FilePicker: import("react").ForwardRefExoticComponent<import("../../Fields/Dropzone").DropzoneBaseProps & Omit<import("react-dropzone").DropzoneProps, "multiple" | "onDropAccepted" | "onDropRejected"> & {
     locale?: FilePickerLocale | undefined;
+    /**
+     * Whether the picked files can be cleared.
+     * @default true
+     */
+    clearable?: boolean | undefined;
 } & import("react").RefAttributes<HTMLElement>>;