@algolia/satellite 2.1.0 → 2.2.1

package/dist/cjs/Fields/FilePicker/FilePicker.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.FilePicker = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -18,12 +19,14 @@ var _Satellite = require("./../../Satellite");
 var _satellitePrefixer = _interopRequireDefault(require("./../../styles/helpers/satellitePrefixer"));
 var _formatters = require("./../../utils/formatters");
 var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["clearable"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 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 FileCard = function FileCard(_ref) {
   var file = _ref.file,
     errors = _ref.errors,
+    clearable = _ref.clearable,
     removeFileTooltip = _ref.removeFileTooltip,
     onDelete = _ref.onDelete;
   var FileIcon = errors ? _Icons.AlertTriangleIcon : _Icons.FileTextIcon;
@@ -47,7 +50,7 @@ var FileCard = function FileCard(_ref) {
           children: (0, _formatters.formatHumanSize)(file.size)
         })]
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.IconButton, {
+    }), clearable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.IconButton, {
       icon: _Icons.TrashIcon,
       title: removeFileTooltip,
       size: "medium",
@@ -67,6 +70,9 @@ var DEFAULT_FILE_PICKER_LOCALE = {
 var FilePicker = exports.FilePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var contextLocale = (0, _Satellite.useLocale)("filePicker");
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_FILE_PICKER_LOCALE), contextLocale), props.locale);
+  var _props$clearable = props.clearable,
+    clearable = _props$clearable === void 0 ? true : _props$clearable,
+    dropzoneProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     files = _useState2[0],
@@ -117,7 +123,7 @@ var FilePicker = exports.FilePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-4"]))),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropzone.Dropzone, _objectSpread(_objectSpread({}, props), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropzone.Dropzone, _objectSpread(_objectSpread({}, dropzoneProps), {}, {
       ref: ref,
       onDrop: onDrop,
       hideFiles: true
@@ -128,6 +134,7 @@ var FilePicker = exports.FilePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
           errors = _ref5.errors;
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(FileCard, {
           file: file,
+          clearable: clearable,
           errors: errors,
           removeFileTooltip: locale.removeFile,
           onDelete: function onDelete() {

package/dist/cjs/Fields/Input/Input.js

@@ -123,7 +123,7 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
       }
     },
     children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-      className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["ml-4 shrink-0 ", ""])), disabled ? "text-grey-200" : focused ? "text-accent-600" : "text-grey-500"),
+      className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["ml-4 shrink-0 ", ""])), disabled ? "text-grey-300" : focused ? "text-accent-600" : "text-grey-500"),
       width: iconSize,
       height: iconSize
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({

package/dist/cjs/Fields/Input/Input.tailwind.js

@@ -2,8 +2,6 @@
 
 // @ts-check
 var plugin = require("tailwindcss/plugin");
-var disabledColor = require("../../styles/disabledColor");
-var rgba = require("../../styles/rgba");
 var inputPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
     theme = _ref.theme;
@@ -18,7 +16,6 @@ var inputPlugin = plugin(function (_ref) {
       backgroundColor: theme("colors.white"),
       border: "1px solid ".concat(theme("colors.grey.500")),
       borderRadius: theme("borderRadius.DEFAULT"),
-      boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
       overflow: "hidden",
       transition: "all 100ms ease-in-out",
       "&:not(.input-disabled, .focusable-show):hover": {
@@ -46,15 +43,18 @@ var inputPlugin = plugin(function (_ref) {
         "&::placeholder": {
           color: theme("colors.grey.600")
         }
+      },
+      "&:has(input:read-only:not(input:disabled))": {
+        backgroundColor: theme("colors.grey.100"),
+        borderColor: "transparent"
       }
     },
     ".input-disabled": {
       cursor: "not-allowed",
-      background: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
-      borderColor: disabledColor(theme("colors.grey.200")),
-      boxShadow: "none",
+      background: theme("colors.grey.100"),
+      borderColor: theme("colors.grey.200"),
       "input, input::placeholder": {
-        color: theme("colors.grey.300"),
+        color: theme("colors.grey.600"),
         pointerEvents: "none"
       }
     },

package/dist/cjs/Fields/TextArea/TextArea.tailwind.js

@@ -2,8 +2,6 @@
 
 // @ts-check
 var plugin = require("tailwindcss/plugin");
-var disabledColor = require("../../styles/disabledColor");
-var rgba = require("../../styles/rgba");
 var textAreaPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
     theme = _ref.theme;
@@ -14,7 +12,6 @@ var textAreaPlugin = plugin(function (_ref) {
       backgroundColor: theme("colors.white"),
       border: "1px solid ".concat(theme("colors.grey.500")),
       borderRadius: theme("borderRadius.DEFAULT"),
-      boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
       transition: "all 100ms ease-in-out",
       fontSize: theme("fontSize.base"),
       lineHeight: theme("lineHeight.base"),
@@ -25,8 +22,11 @@ var textAreaPlugin = plugin(function (_ref) {
         borderColor: theme("colors.grey.600")
       },
       "&:has(textarea:disabled)": {
-        borderColor: disabledColor(theme("colors.grey.200")),
-        boxShadow: "none"
+        borderColor: theme("colors.grey.200")
+      },
+      "&:has(textarea:read-only:not(textarea:disabled))": {
+        backgroundColor: theme("colors.grey.100"),
+        borderColor: "transparent"
       }
     },
     ".text-area-invalid": {
@@ -55,8 +55,8 @@ var textAreaPlugin = plugin(function (_ref) {
       },
       "&:disabled": {
         cursor: "not-allowed",
-        color: theme("colors.grey.300"),
-        background: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)")
+        color: theme("colors.grey.600"),
+        background: theme("colors.grey.100")
       }
     },
     ".text-area-invalid:not(.text-area:disabled)": {

package/dist/cjs/Overlay/MenuButton/MenuButton.d.ts

@@ -19,7 +19,7 @@ export declare const MenuButton: {
     Divider: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLDivElement>>;
     Item: import("react").ForwardRefExoticComponent<import("./useMenuItemProps").BaseItemProps<HTMLDivElement> & DropdownMenu.DropdownMenuItemProps & {
         startIcon?: import("../..").IconComponentType | undefined;
-        variant?: "default" | "destructive" | undefined;
+        variant?: "destructive" | "default" | undefined;
     } & {
         children?: import("react").ReactNode;
     } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/Overlay/MenuButton/components/items/Item.d.ts

@@ -19,7 +19,7 @@ export declare const Item: import("react").ForwardRefExoticComponent<BaseItemPro
      * Variant of the item
      * @default "default"
      */
-    variant?: "default" | "destructive" | undefined;
+    variant?: "destructive" | "default" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/Overlay/Modal/Modal.d.ts

@@ -2,7 +2,7 @@ import type { FC, ReactNode } from "react";
 import { ModalFooter } from "./components/ModalFooter";
 import { ModalSection } from "./components/ModalSection";
 import type { XOR } from "../../types";
-export declare type ModalSizeVariant = "medium" | "large";
+export declare type ModalSizeVariant = "small" | "medium" | "large";
 export declare type ModalLocale = {
     dismissText?: string;
     modalTitle?: string;

package/dist/cjs/Overlay/Modal/Modal.js

@@ -21,7 +21,7 @@ var _Satellite = require("./../../Satellite");
 var _satellitePrefixer = _interopRequireDefault(require("./../../styles/helpers/satellitePrefixer"));
 var _prefersReducedMotion = require("./../../utils/prefersReducedMotion");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
 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 && {}.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; }
@@ -31,8 +31,14 @@ var DEFAULT_MODAL_LOCALE = {
   modalTitle: "Modal"
 };
 var SIZE_CLASSNAMES = {
-  medium: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["modal-dialog-medium"]))),
-  large: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["modal-dialog-large"])))
+  small: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["modal-dialog-small"]))),
+  medium: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["modal-dialog-medium"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["modal-dialog-large"])))
+};
+var SIZE_PADDING_CLASSNAMES = {
+  small: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["p-6"]))),
+  medium: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["p-8"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["p-10"])))
 };
 
 /**
@@ -80,10 +86,10 @@ var Modal = exports.Modal = function Modal(_ref) {
       asChild: true,
       children: triggerButton
     }), createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(Dialog.Overlay, {
-      className: (0, _clsx["default"])(animate && !_prefersReducedMotion.prefersReducedMotion && (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["modal-animated"]))), (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["modal-overlay bg-grey-900/30 z-modalOverlay inset-0 fixed w-full h-full flex items-start justify-center overflow-x-hidden overflow-y-auto px-4 py-10"])))),
+      className: (0, _clsx["default"])(animate && !_prefersReducedMotion.prefersReducedMotion && (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["modal-animated"]))), (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["modal-overlay bg-grey-900/30 z-modalOverlay inset-0 fixed w-full h-full flex items-start justify-center overflow-x-hidden overflow-y-auto px-4 py-10"])))),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Dialog.Content, {
         ref: dialogContentRef,
-        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["modal-content"]))), SIZE_CLASSNAMES[size], centerY && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex m-auto"])))),
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["modal-content"]))), SIZE_CLASSNAMES[size], centerY && (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["flex m-auto"])))),
         "aria-describedby": undefined,
         onOpenAutoFocus: function onOpenAutoFocus(e) {
           var _closeButtonRef$curre;
@@ -101,28 +107,28 @@ var Modal = exports.Modal = function Modal(_ref) {
           }
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["modal-container"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["modal-container"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Card, {
             as: "div",
             elevation: "500",
-            className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["relative"]))), className),
+            className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["relative"]))), className),
             fullBleed: true,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("header", {
-              className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["min-h-14 flex items-center justify-between space-x-2"]))), title ? (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["border-b border-grey-100 pl-8 pr-16"]))) : (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["justify-end px-8"]))), !title && hideCloseIcon && (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
+              className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["min-h-14 flex items-center justify-between space-x-2"]))), title ? (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["border-b border-grey-100 pl-8 pr-16"]))) : (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["justify-end px-8"]))), !title && hideCloseIcon && (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Dialog.Title, {
                 asChild: true,
                 children: title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                  className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["flex-1 display-heading truncate"]))),
+                  className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["flex-1 display-heading truncate"]))),
                   children: title
                 }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVisuallyHidden.VisuallyHidden, {
                   children: locale.modalTitle
                 })
               })
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: (0, _clsx["default"])(!fullBleed && (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["p-10"])))),
+              className: (0, _clsx["default"])(!fullBleed && SIZE_PADDING_CLASSNAMES[size]),
               children: children
             }), !hideCloseIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["-mr-2 absolute top-3 right-8"]))),
+              className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["-mr-2 absolute top-3 right-8"]))),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Dialog.Close, {
                 ref: closeButtonRef,
                 asChild: true,

package/dist/cjs/Overlay/Modal/Modal.tailwind.js

@@ -19,6 +19,9 @@ var modalPlugin = plugin(function (_ref) {
       }
     },
     // Sizes
+    ".modal-dialog-small": {
+      maxWidth: "480px"
+    },
     ".modal-dialog-medium": {
       maxWidth: "640px"
     },

package/dist/cjs/Satellite/locale.d.ts

@@ -1,3 +1,4 @@
+import type { IconButtonWithFeedbackLocale } from "../Actions";
 import type { AutoCompleteLocale, DateInputLocale, DatePickerLocale, DropzoneLocale, ExperimentalDateRangeInputLocale, ExperimentalFormLocale, FilePickerLocale, InputPropsLocale } from "../Fields";
 import type { AnnouncementBadgeLocale, TagLocale, ToastLocale, ToastsLocale } from "../Indicators";
 import type { UserAvatarLocale } from "../Indicators/Avatars";
@@ -17,6 +18,7 @@ export declare type ComponentsLocales = {
     filePicker?: FilePickerLocale;
     form?: ExperimentalFormLocale;
     input?: InputPropsLocale;
+    iconButtonWithFeedback?: IconButtonWithFeedbackLocale;
     modal?: ModalLocale;
     pagination?: PaginationLocale;
     popover?: PopoverLocale;

package/dist/cjs/Typography/Typography.tailwind.js

@@ -83,7 +83,7 @@ var typographyPlugin = plugin(function (_ref) {
           "display-small": {
             fontSize: theme("fontSize.lg"),
             lineHeight: theme("lineHeight.lg"),
-            fontWeight: theme("fontWeight.normal")
+            fontWeight: theme("fontWeight.semibold")
           },
           "display-heading": {
             fontSize: theme("fontSize.md"),

package/dist/cjs/utils/isCssPropertySupported.d.ts

@@ -1 +1 @@
-export declare const isCssPropertySupported: <P extends number | typeof Symbol.iterator | "filter" | "fill" | "width" | "height" | "color" | "alignmentBaseline" | "baselineShift" | "clip" | "clipPath" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "cursor" | "direction" | "display" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "imageRendering" | "letterSpacing" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "mask" | "offset" | "opacity" | "order" | "overflow" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "textDecoration" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "wordSpacing" | "writingMode" | "grid" | "translate" | "content" | "marker" | "all" | "item" | "border" | "left" | "right" | "columns" | "top" | "bottom" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "animation" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backfaceVisibility" | "background" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockSize" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStart" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImage" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStart" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRadius" | "borderRight" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderStyle" | "borderTop" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "borderWidth" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "clear" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRule" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "counterIncrement" | "counterReset" | "counterSet" | "cssFloat" | "cssText" | "emptyCells" | "flex" | "flexBasis" | "flexDirection" | "flexFlow" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "font" | "fontFeatureSettings" | "fontKerning" | "fontOpticalSizing" | "fontSynthesis" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "gap" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridColumnEnd" | "gridColumnGap" | "gridColumnStart" | "gridGap" | "gridRow" | "gridRowEnd" | "gridRowGap" | "gridRowStart" | "gridTemplate" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hyphens" | "imageOrientation" | "inlineSize" | "inset" | "insetBlock" | "insetBlockEnd" | "insetBlockStart" | "insetInline" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "lineBreak" | "lineHeight" | "listStyle" | "listStyleImage" | "listStylePosition" | "listStyleType" | "margin" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetDistance" | "offsetPath" | "offsetRotate" | "orphans" | "outline" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "padding" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "perspective" | "perspectiveOrigin" | "placeContent" | "placeItems" | "placeSelf" | "position" | "printColorAdjust" | "quotes" | "resize" | "rowGap" | "rubyPosition" | "scrollBehavior" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInline" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInline" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "scrollbarGutter" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasis" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textOrientation" | "textOverflow" | "textShadow" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transformBox" | "transformOrigin" | "transformStyle" | "transition" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "userSelect" | "verticalAlign" | "webkitAlignContent" | "webkitAlignItems" | "webkitAlignSelf" | "webkitAnimation" | "webkitAnimationDelay" | "webkitAnimationDirection" | "webkitAnimationDuration" | "webkitAnimationFillMode" | "webkitAnimationIterationCount" | "webkitAnimationName" | "webkitAnimationPlayState" | "webkitAnimationTimingFunction" | "webkitAppearance" | "webkitBackfaceVisibility" | "webkitBackgroundClip" | "webkitBackgroundOrigin" | "webkitBackgroundSize" | "webkitBorderBottomLeftRadius" | "webkitBorderBottomRightRadius" | "webkitBorderRadius" | "webkitBorderTopLeftRadius" | "webkitBorderTopRightRadius" | "webkitBoxAlign" | "webkitBoxFlex" | "webkitBoxOrdinalGroup" | "webkitBoxOrient" | "webkitBoxPack" | "webkitBoxShadow" | "webkitBoxSizing" | "webkitFilter" | "webkitFlex" | "webkitFlexBasis" | "webkitFlexDirection" | "webkitFlexFlow" | "webkitFlexGrow" | "webkitFlexShrink" | "webkitFlexWrap" | "webkitJustifyContent" | "webkitLineClamp" | "webkitMask" | "webkitMaskBoxImage" | "webkitMaskBoxImageOutset" | "webkitMaskBoxImageRepeat" | "webkitMaskBoxImageSlice" | "webkitMaskBoxImageSource" | "webkitMaskBoxImageWidth" | "webkitMaskClip" | "webkitMaskComposite" | "webkitMaskImage" | "webkitMaskOrigin" | "webkitMaskPosition" | "webkitMaskRepeat" | "webkitMaskSize" | "webkitOrder" | "webkitPerspective" | "webkitPerspectiveOrigin" | "webkitTextFillColor" | "webkitTextSizeAdjust" | "webkitTextStroke" | "webkitTextStrokeColor" | "webkitTextStrokeWidth" | "webkitTransform" | "webkitTransformOrigin" | "webkitTransformStyle" | "webkitTransition" | "webkitTransitionDelay" | "webkitTransitionDuration" | "webkitTransitionProperty" | "webkitTransitionTimingFunction" | "webkitUserSelect" | "whiteSpace" | "widows" | "willChange" | "wordBreak" | "wordWrap" | "zIndex" | "getPropertyPriority" | "getPropertyValue" | "removeProperty" | "setProperty">(prop: P, value: CSSStyleDeclaration[P]) => boolean;
+export declare const isCssPropertySupported: <P extends number | typeof Symbol.iterator | "filter" | "fill" | "width" | "height" | "color" | "alignmentBaseline" | "baselineShift" | "clip" | "clipPath" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "cursor" | "direction" | "display" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "imageRendering" | "letterSpacing" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "mask" | "offset" | "opacity" | "order" | "overflow" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "textDecoration" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "wordSpacing" | "writingMode" | "grid" | "marker" | "translate" | "content" | "item" | "all" | "border" | "left" | "right" | "columns" | "top" | "bottom" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "animation" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backfaceVisibility" | "background" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockSize" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStart" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImage" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStart" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRadius" | "borderRight" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderStyle" | "borderTop" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "borderWidth" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "clear" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRule" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "counterIncrement" | "counterReset" | "counterSet" | "cssFloat" | "cssText" | "emptyCells" | "flex" | "flexBasis" | "flexDirection" | "flexFlow" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "font" | "fontFeatureSettings" | "fontKerning" | "fontOpticalSizing" | "fontSynthesis" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "gap" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridColumnEnd" | "gridColumnGap" | "gridColumnStart" | "gridGap" | "gridRow" | "gridRowEnd" | "gridRowGap" | "gridRowStart" | "gridTemplate" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hyphens" | "imageOrientation" | "inlineSize" | "inset" | "insetBlock" | "insetBlockEnd" | "insetBlockStart" | "insetInline" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "lineBreak" | "lineHeight" | "listStyle" | "listStyleImage" | "listStylePosition" | "listStyleType" | "margin" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetDistance" | "offsetPath" | "offsetRotate" | "orphans" | "outline" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "padding" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "perspective" | "perspectiveOrigin" | "placeContent" | "placeItems" | "placeSelf" | "position" | "printColorAdjust" | "quotes" | "resize" | "rowGap" | "rubyPosition" | "scrollBehavior" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInline" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInline" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "scrollbarGutter" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasis" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textOrientation" | "textOverflow" | "textShadow" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transformBox" | "transformOrigin" | "transformStyle" | "transition" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "userSelect" | "verticalAlign" | "webkitAlignContent" | "webkitAlignItems" | "webkitAlignSelf" | "webkitAnimation" | "webkitAnimationDelay" | "webkitAnimationDirection" | "webkitAnimationDuration" | "webkitAnimationFillMode" | "webkitAnimationIterationCount" | "webkitAnimationName" | "webkitAnimationPlayState" | "webkitAnimationTimingFunction" | "webkitAppearance" | "webkitBackfaceVisibility" | "webkitBackgroundClip" | "webkitBackgroundOrigin" | "webkitBackgroundSize" | "webkitBorderBottomLeftRadius" | "webkitBorderBottomRightRadius" | "webkitBorderRadius" | "webkitBorderTopLeftRadius" | "webkitBorderTopRightRadius" | "webkitBoxAlign" | "webkitBoxFlex" | "webkitBoxOrdinalGroup" | "webkitBoxOrient" | "webkitBoxPack" | "webkitBoxShadow" | "webkitBoxSizing" | "webkitFilter" | "webkitFlex" | "webkitFlexBasis" | "webkitFlexDirection" | "webkitFlexFlow" | "webkitFlexGrow" | "webkitFlexShrink" | "webkitFlexWrap" | "webkitJustifyContent" | "webkitLineClamp" | "webkitMask" | "webkitMaskBoxImage" | "webkitMaskBoxImageOutset" | "webkitMaskBoxImageRepeat" | "webkitMaskBoxImageSlice" | "webkitMaskBoxImageSource" | "webkitMaskBoxImageWidth" | "webkitMaskClip" | "webkitMaskComposite" | "webkitMaskImage" | "webkitMaskOrigin" | "webkitMaskPosition" | "webkitMaskRepeat" | "webkitMaskSize" | "webkitOrder" | "webkitPerspective" | "webkitPerspectiveOrigin" | "webkitTextFillColor" | "webkitTextSizeAdjust" | "webkitTextStroke" | "webkitTextStrokeColor" | "webkitTextStrokeWidth" | "webkitTransform" | "webkitTransformOrigin" | "webkitTransformStyle" | "webkitTransition" | "webkitTransitionDelay" | "webkitTransitionDuration" | "webkitTransitionProperty" | "webkitTransitionTimingFunction" | "webkitUserSelect" | "whiteSpace" | "widows" | "willChange" | "wordBreak" | "wordWrap" | "zIndex" | "getPropertyPriority" | "getPropertyValue" | "removeProperty" | "setProperty">(prop: P, value: CSSStyleDeclaration[P]) => boolean;

package/dist/cjs/utils/prefersReducedMotion.js

@@ -10,4 +10,4 @@ var _window$matchMedia, _window;
  *
  * @returns {boolean}
  */
-var prefersReducedMotion = exports.prefersReducedMotion = typeof window !== "undefined" && ((_window$matchMedia = (_window = window).matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, "(prefers-reduced-motion: reduce)").matches) === true;
+var prefersReducedMotion = exports.prefersReducedMotion = typeof window !== "undefined" && ((_window$matchMedia = (_window = window).matchMedia) === null || _window$matchMedia === void 0 || (_window$matchMedia = _window$matchMedia.call(_window, "(prefers-reduced-motion: reduce)")) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.matches) === true;

package/dist/cjs/utils/useTimeoutFn.d.ts

@@ -0,0 +1,2 @@
+export declare type UseTimeoutFnReturn = [() => boolean | null, () => void, () => void];
+export declare function useTimeoutFn(fn: () => void, ms?: number, setOnMount?: boolean): UseTimeoutFnReturn;

package/dist/cjs/utils/useTimeoutFn.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTimeoutFn = useTimeoutFn;
+var _react = require("react");
+// Taken from: https://github.com/streamich/react-use/blob/master/src/useTimeoutFn.ts
+// `setOnMount` has been added compared to the original implementation.
+function useTimeoutFn(fn) {
+  var ms = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var setOnMount = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var ready = (0, _react.useRef)(false);
+  var timeout = (0, _react.useRef)();
+  var callback = (0, _react.useRef)(fn);
+  var isReady = (0, _react.useCallback)(function () {
+    return ready.current;
+  }, []);
+  var set = (0, _react.useCallback)(function () {
+    ready.current = false;
+    timeout.current && clearTimeout(timeout.current);
+    timeout.current = setTimeout(function () {
+      ready.current = true;
+      callback.current();
+    }, ms);
+  }, [ms]);
+  var clear = (0, _react.useCallback)(function () {
+    ready.current = null;
+    timeout.current && clearTimeout(timeout.current);
+  }, []);
+
+  // update ref when function changes
+  (0, _react.useEffect)(function () {
+    callback.current = fn;
+  }, [fn]);
+
+  // set on mount, clear on unmount
+  (0, _react.useEffect)(function () {
+    if (setOnMount) set();
+    return clear;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setOnMount, ms]);
+  return [isReady, clear, set];
+}

package/dist/esm/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/esm/Actions/Button/PolymorphicIconButton.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-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) { _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; }
@@ -40,6 +40,10 @@ export var PolymorphicIconButton = /*#__PURE__*/forwardRef(function (props, ref)
     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 = _objectWithoutProperties(props, _excluded);
@@ -54,12 +58,14 @@ export var PolymorphicIconButton = /*#__PURE__*/forwardRef(function (props, ref)
     cleanedProps.type = "button";
   }
   return /*#__PURE__*/_jsx(TooltipWrapper, {
-    delay: 500,
+    delay: tooltipDelay,
+    hideDelay: tooltipHideDelay,
     show: showTooltip,
     side: tooltipSide,
     content: title,
     children: /*#__PURE__*/_jsx(Tag, _objectSpread(_objectSpread({}, cleanedProps), {}, {
       className: iconButtonClassName,
+      "aria-busy": loading,
       "aria-label": title,
       ref: ref,
       children: /*#__PURE__*/_jsxs(_Fragment, {

package/dist/esm/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>;