@algolia/satellite 1.7.0 → 1.9.0

package/dist/cjs/Layout/Tables/DataTable/utils.d.ts

@@ -1,4 +1,4 @@
 import type { AdvancedColumnDefinition, DeterminatePagination, IndeterminatePagination, PaginationConfiguration, Row } from "./types";
 export declare const isDeterminatePagination: (pagination: PaginationConfiguration) => pagination is DeterminatePagination;
 export declare const isIndeterminatePagination: (pagination: PaginationConfiguration) => pagination is IndeterminatePagination;
-export declare const getCellValue: <Item extends {}>(column: AdvancedColumnDefinition<Item>, row: Row<Item>) => any;
+export declare const getCellValue: <Item extends object>(column: AdvancedColumnDefinition<Item>, row: Row<Item>) => any;

package/dist/cjs/Navigation/Stepper/Step.js

@@ -17,7 +17,7 @@ var _uniqueId = require("../../utils/uniqueId");
 var _StepperContext = require("./StepperContext");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["className", "index", "icon", "label", "name", "completed", "disabled"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31;
 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 BUTTON_SIZE_CLASSNAMES = {
@@ -63,6 +63,7 @@ var Step = exports.Step = function Step(_ref) {
   var activeLocale = typeof locale.activeStep === "function" ? locale.activeStep(stepName) : locale.activeStep;
   var completedLocale = typeof locale.completedStep === "function" ? locale.completedStep(stepName) : locale.completedStep;
   var incompletedLocale = typeof locale.incompletedStep === "function" ? locale.incompletedStep(stepName) : locale.incompletedStep;
+  var isVertical = context.orientation === "vertical";
   var Icon = CustomIcon;
   if (completed) {
     Icon = CheckIconInternal;
@@ -78,7 +79,7 @@ var Step = exports.Step = function Step(_ref) {
       "aria-label": disabled ? disabledLocale : active ? activeLocale : completed ? completedLocale : incompletedLocale,
       "aria-current": active ? "step" : undefined,
       disabled: disabled,
-      tabIndex: index === context.activeStep ? 0 : -1,
+      tabIndex: index === context.focusedStep ? 0 : -1,
       "data-step-idx": index,
       onClick: function onClick() {
         var _context$onStepChange;
@@ -96,20 +97,20 @@ var Step = exports.Step = function Step(_ref) {
         }
       },
       children: [context.connectors && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["absolute -z-10 border-l h-full group-last/step:hidden"]))), completed ? (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["border-green-600"]))) : (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["border-grey-200"]))), CONNECTOR_SIZE_CLASSNAMES[context.size])
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["absolute -z-10 group-last/step:hidden"]))), isVertical ? (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["border-l h-full"]))) : (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["border-t w-4 -right-px translate-x-full"]))), completed ? (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["border-green-600"]))) : (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["border-grey-200"]))), isVertical && CONNECTOR_SIZE_CLASSNAMES[context.size])
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["rounded-full flex items-center justify-center shrink-0 text-sm"]))), !active && !completed && (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100"]))), !active && !completed && !disabled && (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["group-hover/button:bg-white"]))), active && !completed && (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-800 text-white"]))), completed && (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["bg-green-600 text-white"]))), ICON_SIZE_CLASSNAMES[context.size]),
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["rounded-full flex items-center justify-center shrink-0 text-sm"]))), !active && !completed && (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100"]))), !active && !completed && !disabled && (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["group-hover/button:bg-white"]))), active && !completed && (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-800 text-white"]))), completed && (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["bg-green-600 text-white"]))), ICON_SIZE_CLASSNAMES[context.size]),
         children: Icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
           width: ICON_SIZE[context.size],
           height: ICON_SIZE[context.size]
         }) : index + 1
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _clsx["default"])(disabled && (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["text-grey-300"])))),
+        className: (0, _clsx["default"])(disabled && (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["text-grey-300"])))),
         children: [!!label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["text-sm line-clamp-1"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["text-sm line-clamp-1"]))),
           children: label
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["text-base line-clamp-2"]))), (completed || active) && (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["text-grey-900"]))), context.size === "small" && (0, _satellitePrefixer["default"])(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2["default"])(["text-sm"])))),
+          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2["default"])(["text-base line-clamp-2"]))), (completed || active) && (0, _satellitePrefixer["default"])(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2["default"])(["text-grey-900"]))), context.size === "small" && (0, _satellitePrefixer["default"])(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteral2["default"])(["text-sm"])))),
           children: name
         })]
       })]

package/dist/cjs/Navigation/Stepper/Stepper.d.ts

@@ -7,6 +7,7 @@ export declare type StepperLocale = {
     completedStep?: string | ((stepName: string) => string);
 };
 export declare type StepperSizes = "small" | "default" | "large";
+export declare type StepperOrientation = "horizontal" | "vertical";
 export interface StepperProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     /**
      * Defines the steps of the Stepper.
@@ -27,6 +28,11 @@ export interface StepperProps extends Omit<HTMLAttributes<HTMLDivElement>, "chil
      * @default "default"
      */
     size?: StepperSizes;
+    /**
+     * Defines the orientation of the Stepper.
+     * @default "vertical"
+     */
+    orientation?: StepperOrientation;
     /**
      * Defines whether the connectors should be displayed.
      * @default true

package/dist/cjs/Navigation/Stepper/Stepper.js

@@ -17,8 +17,8 @@ var _Step = require("./Step");
 var _StepperContext = require("./StepperContext");
 var _utils = require("./utils");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-var _excluded = ["steps", "activeStep", "onStepChange", "size", "connectors", "locale", "className"];
+var _templateObject, _templateObject2, _templateObject3;
+var _excluded = ["steps", "activeStep", "onStepChange", "size", "orientation", "connectors", "locale", "className"];
 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_TAG_LOCALE = {
@@ -41,6 +41,8 @@ var Stepper = exports.Stepper = function Stepper(_ref) {
     _onStepChange = _ref.onStepChange,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? "default" : _ref$size,
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? "vertical" : _ref$orientation,
     _ref$connectors = _ref.connectors,
     connectors = _ref$connectors === void 0 ? true : _ref$connectors,
     propsLocale = _ref.locale,
@@ -87,6 +89,7 @@ var Stepper = exports.Stepper = function Stepper(_ref) {
       activeStep: activeStep,
       focusedStep: focusedStep,
       size: size,
+      orientation: orientation,
       connectors: connectors,
       locale: locale,
       onStepChange: function onStepChange(index) {
@@ -103,11 +106,14 @@ var Stepper = exports.Stepper = function Stepper(_ref) {
       className: (0, _clsx["default"])(className),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ol", {
         role: "presentation",
-        className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex flex-col isolate"]))),
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex isolate"]))), orientation === "vertical" ? (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex-col"]))) : (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["gap-0"])))),
         ref: containerRef,
         onFocus: function onFocus() {
           setFocusedStep(activeStep);
         },
+        onBlur: function onBlur() {
+          setFocusedStep(activeStep);
+        },
         onKeyDown: function onKeyDown(event) {
           switch (event.key) {
             case "ArrowLeft":

package/dist/cjs/Navigation/Stepper/StepperContext.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
-import type { StepperLocale, StepperSizes } from "./Stepper";
+import type { StepperLocale, StepperOrientation, StepperSizes } from "./Stepper";
 export declare type StepperContextType = {
     activeStep: number;
     focusedStep: number;
     size: StepperSizes;
+    orientation: StepperOrientation;
     connectors: boolean;
     locale: StepperLocale;
     onStepChange?: (index: number) => void;

package/dist/cjs/Overlay/Dropdown/DropdownContext.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export interface DropdownContextInterface {
-    showMenu(show: boolean): void;
+    showMenu: (show: boolean) => void;
 }
 export declare const DropdownContext: import("react").Context<DropdownContextInterface | null>;
 export declare const useDropdownContext: () => DropdownContextInterface;

package/dist/cjs/Overlay/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroupContext.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export interface DropdownCollapsibleItemsGroupContextInterface {
     expandedItems: readonly string[];
-    onItemClick(name: string): void;
+    onItemClick: (name: string) => void;
 }
 export declare const DropdownCollapsibleItemsGroupContext: import("react").Context<DropdownCollapsibleItemsGroupContextInterface | null>;
 /** @deprecated */

package/dist/cjs/Overlay/MenuButton/components/collapsible/CollapsibleItemsGroupContext.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export interface CollapsibleItemsGroupContextInterface {
     expandedItems: readonly string[];
-    onItemClick(name: string): void;
+    onItemClick: (name: string) => void;
 }
 export declare const CollapsibleItemsGroupContext: import("react").Context<CollapsibleItemsGroupContextInterface | null>;
 export declare const useCollapsibleItemsGroup: () => CollapsibleItemsGroupContextInterface;

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

@@ -44,7 +44,7 @@ export declare type ModalProps = XOR<ModalControlledProps, ModalUncontrolledProp
      * The element that should receive focus once the `Modal` is opened.
      * If unspecified, the first focusable element will be focused.
      * If an element is passed, it will be focused.
-     * If 'skip' is passed, the close button will be focused if present, with a fallback on the dialog element itself.
+     * If 'skipContent' is passed, the close button will be focused if present, with a fallback on the dialog element itself.
      */
     autoFocusOnOpenElement?: HTMLElement | null | "skipContent";
     children: ReactNode;

package/dist/cjs/Overlay/Popover/Popover.js

@@ -64,6 +64,7 @@ var Popover = exports.Popover = function Popover(_ref) {
   }, []);
   var isControlled = typeof open !== "undefined";
   var triggerRef = (0, _react.useRef)(null);
+  var closeButtonRef = (0, _react.useRef)(null);
   var createPortal = (0, _Satellite.useCreatePortal)();
   if (children.type === _react.Fragment) {
     throw new Error("Popover component doesn't accept a Fragment as a child.");
@@ -90,6 +91,10 @@ var Popover = exports.Popover = function Popover(_ref) {
       onOpenAutoFocus: function onOpenAutoFocus(e) {
         if (autoFocusOnOpenElement === false) {
           e.preventDefault();
+        } else if (autoFocusOnOpenElement === "skipContent") {
+          var _closeButtonRef$curre;
+          e.preventDefault();
+          (_closeButtonRef$curre = closeButtonRef.current) === null || _closeButtonRef$curre === void 0 || _closeButtonRef$curre.focus();
         } else if (autoFocusOnOpenElement instanceof HTMLElement) {
           e.preventDefault();
           autoFocusOnOpenElement.focus();
@@ -123,6 +128,7 @@ var Popover = exports.Popover = function Popover(_ref) {
           className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["mt-2"]))),
           children: footer
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PopoverPrimitive.Close, {
+          ref: closeButtonRef,
           className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["absolute top-2 right-2"]))),
           asChild: true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.IconButton, {

package/dist/cjs/Overlay/Popover/types.d.ts

@@ -63,10 +63,12 @@ export interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, "titl
     avoidCollisions?: boolean;
     /**
      * The element that should receive focus once the `Popover` is opened.
-     * If `undefined` or `null` is passed, the first focusable element will be focused.
-     * If `false`, no element will be focused.
+     * If unspecified, the first focusable element will be focused.
+     * If an element is passed, it will be focused.
+     * If `false`, no element will be focused automatically for you. You should manage focus yourself.
+     * If 'skipContent' is passed, the close button will be focused.
      */
-    autoFocusOnOpenElement?: HTMLElement | null | false;
+    autoFocusOnOpenElement?: HTMLElement | null | false | "skipContent";
     /**
      * Defines the locale of the `Popover`.
      */

package/dist/cjs/styles/helpers/makePurgeCssExtractor.js

@@ -1,8 +1,8 @@
 "use strict";
 
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 // @ts-check
 var prefixTailwindClassName = require("./prefixTailwindClassName");
 

package/dist/cjs/utils/useTriggerInputChange.js

@@ -11,15 +11,16 @@ var _react = require("react");
  */
 var useTriggerInputChange = exports.useTriggerInputChange = function useTriggerInputChange(inputRef) {
   var triggerInputChange = (0, _react.useCallback)(function (value) {
+    var _Object$getOwnPropert;
     var input = inputRef.current;
     if (!input) return;
 
-    // @ts-ignore
-    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set;
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    var nativeInputValueSetter = (_Object$getOwnPropert = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")) === null || _Object$getOwnPropert === void 0 ? void 0 : _Object$getOwnPropert.set;
     var ev2 = new Event("input", {
       bubbles: true
     });
-    nativeInputValueSetter.call(input, value);
+    nativeInputValueSetter === null || nativeInputValueSetter === void 0 || nativeInputValueSetter.call(input, value);
     input.dispatchEvent(ev2);
   }, [inputRef]);
   return triggerInputChange;

package/dist/esm/Actions/Button/PolymorphicButton.js

@@ -33,7 +33,7 @@ export var PolymorphicButton = /*#__PURE__*/forwardRef(function (props, ref) {
     children = props.children,
     cleanedProps = _objectWithoutProperties(props, _excluded);
   if (loading) {
-    // @ts-expect-error
+    // @ts-expect-error disabled is not present in PolymorphicButtonProps
     cleanedProps.disabled = true;
   }
   var buttonClassName = cx(BASE_CLASSNAMES, BUTTON_SIZE_CLASSNAMES[size], BUTTON_VARIANT_CLASSNAMES[variant], cleanedProps.disabled && stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["btn-disabled"]))), className);
@@ -41,7 +41,7 @@ export var PolymorphicButton = /*#__PURE__*/forwardRef(function (props, ref) {
   var iconClassNames = cx(getIconColorClassName(props), loading && stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["invisible"]))));
   var textClassNames = cx(loading && stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["invisible"]))));
   if (isButtonType(props) && !Object.prototype.hasOwnProperty.call(cleanedProps, "type")) {
-    // @ts-expect-error
+    // @ts-expect-error type is not present in PolymorphicButtonProps
     cleanedProps.type = "button";
   }
   return /*#__PURE__*/_jsxs(Component, _objectSpread(_objectSpread({}, cleanedProps), {}, {

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

@@ -44,13 +44,13 @@ export var PolymorphicIconButton = /*#__PURE__*/forwardRef(function (props, ref)
     loading = _props$loading === void 0 ? false : _props$loading,
     cleanedProps = _objectWithoutProperties(props, _excluded);
   if (loading) {
-    // @ts-expect-error
+    // @ts-expect-error disabled prop is not present in PolymorphicIconButtonProps
     cleanedProps.disabled = true;
   }
   var iconButtonClassName = cx(BASE_CLASSNAMES, SIZE_CLASSNAMES[size], VARIANT_CLASSNAMES[variant], cleanedProps.disabled && stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["btn-disabled"]))), className);
   var loaderClassNames = stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["absolute ", ""])), (variant === "destructive" || variant === "primary") && "text-white");
   if (isButtonType(props) && !Object.prototype.hasOwnProperty.call(cleanedProps, "type")) {
-    // @ts-ignore
+    // @ts-expect-error type is not present in PolymorphicIconButtonProps
     cleanedProps.type = "button";
   }
   return /*#__PURE__*/_jsx(TooltipWrapper, {

package/dist/esm/Actions/Button/types.d.ts

@@ -25,8 +25,8 @@ declare type AsProp<C extends React.ElementType> = {
     as?: C;
 };
 declare type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
-declare type PolymorphicComponentProp<C extends React.ElementType, Props = {}> = React.PropsWithChildren<Props & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
-export declare type PolymorphicComponentPropWithRef<C extends React.ElementType, Props = {}> = PolymorphicComponentProp<C, Props> & {
+declare type PolymorphicComponentProp<C extends React.ElementType, Props = object> = React.PropsWithChildren<Props & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
+export declare type PolymorphicComponentPropWithRef<C extends React.ElementType, Props = object> = PolymorphicComponentProp<C, Props> & {
     ref?: PolymorphicRef<C>;
 };
 export declare type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>["ref"];

package/dist/esm/Fields/AutoComplete/AutoComplete.js

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31;
 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 cx from "clsx";
@@ -271,7 +271,7 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
       if (!multiple && value && !newInputValue) {
         multipleSelection.setSelectedItems([]);
       }
-      (_menuPopper$update = menuPopper.update) === null || _menuPopper$update === void 0 || _menuPopper$update.call(menuPopper);
+      void ((_menuPopper$update = menuPopper.update) === null || _menuPopper$update === void 0 ? void 0 : _menuPopper$update.call(menuPopper));
     },
     // We need to make sure to define event handlers here so that they can be composed properly
     onFocus: function onFocus(evt) {
@@ -285,7 +285,7 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
     },
     onKeyDown: function onKeyDown(evt) {
       if (combobox.isOpen && ["ArrowLeft", "ArrowRight"].includes(evt.key)) {
-        // @ts-expect-error
+        // @ts-expect-error wrong type
         evt.nativeEvent.preventDownshiftDefault = true;
       }
       if (multiple && creatable && inputValue.trim().length > 0 && separatorKeys !== null && separatorKeys !== void 0 && separatorKeys.includes(evt.key)) {
@@ -323,7 +323,7 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
   if (oldHideMenu.current !== hideMenu) {
     var _menuPopper$update2;
     oldHideMenu.current = hideMenu;
-    (_menuPopper$update2 = menuPopper.update) === null || _menuPopper$update2 === void 0 || _menuPopper$update2.call(menuPopper);
+    void ((_menuPopper$update2 = menuPopper.update) === null || _menuPopper$update2 === void 0 ? void 0 : _menuPopper$update2.call(menuPopper));
   }
   return /*#__PURE__*/_jsx(AutoCompleteProvider, {
     locale: locale,
@@ -331,7 +331,7 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
       className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex"]))), className),
       ref: function ref(el) {
         setContainerElement(el);
-        // @ts-expect-error
+        // @ts-expect-error - setContainerMeasureRef does accept HTMLDivElement | null
         setContainerMeasureRef(el);
       },
       children: [/*#__PURE__*/_jsxs("div", {
@@ -378,16 +378,16 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
             type: "text",
             placeholder: hasValue ? "" : placeholder,
             autoComplete: "off",
-            className: cx(stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["autocomplete-input py-1.5"]))), multiple && stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["ml-1"]))), shouldRenderCustomTemplate && hasValue && stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["h-0 w-0 opacity-0"]))))
+            className: cx(stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["autocomplete-input"]))), multiple && stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["ml-1"]))), shouldRenderCustomTemplate && hasValue ? stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["h-0 w-0 opacity-0"]))) : stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["py-1.5"]))))
           }))]
         }), Boolean(showClearButton || endItem) && /*#__PURE__*/_jsxs("div", {
-          className: cx(showClearButton && endItem && stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["my-2 flex self-end space-x-4"])))),
+          className: cx(showClearButton && endItem && stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["my-2 flex self-end space-x-4"])))),
           children: [!!endItem && /*#__PURE__*/_jsx("div", {
-            className: stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["text-grey-700 my-auto"]))),
+            className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["text-grey-700 my-auto"]))),
             children: endItem
           }), showClearButton && /*#__PURE__*/_jsx("button", {
             type: "button",
-            className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["w-6 h-6 flex items-center justify-center text-grey-500"]))),
+            className: stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["w-6 h-6 flex items-center justify-center text-grey-500"]))),
             onClick: function onClick() {
               setInternalInputValue("");
               multipleSelection.setSelectedItems([]);
@@ -401,7 +401,7 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }), createPortal( /*#__PURE__*/_jsx(ClickAwayContainer, {
         element: menuRef.current,
         children: /*#__PURE__*/_jsxs(Card, _objectSpread(_objectSpread({}, menuPopper.attributes), {}, {
-          className: cx(stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["z-dropdown"]))), menuClassName),
+          className: cx(stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["z-dropdown"]))), menuClassName),
           style: _objectSpread(_objectSpread(_objectSpread({}, menuPopper.styles.popper), hideMenu && {
             display: "none"
           }), {}, {
@@ -412,7 +412,7 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
           elevation: "300",
           fullBleed: true,
           children: [hideMenu ? /*#__PURE__*/_jsx("div", _objectSpread({}, combobox.getMenuProps())) : items.length === 0 ? /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, combobox.getMenuProps({
-            className: stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["min-h-10"])))
+            className: stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["min-h-10"])))
           })), {}, {
             children: /*#__PURE__*/_jsx("div", {
               role: "option",
@@ -423,15 +423,15 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
               })
             })
           })) : /*#__PURE__*/_jsx(ScrollIndicator, {
-            className: menuSize === "large" ? stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["max-h-96"]))) : stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["max-h-64"]))),
+            className: menuSize === "large" ? stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["max-h-96"]))) : stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["max-h-64"]))),
             children: /*#__PURE__*/_jsx("ul", _objectSpread(_objectSpread({}, combobox.getMenuProps()), {}, {
               children: items.map(function (item, index) {
                 return /*#__PURE__*/_jsx("li", _objectSpread(_objectSpread({}, combobox.getItemProps({
                   item: item,
-                  className: cx(stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["autocomplete-result flex items-center min-h-10 px-4 cursor-pointer"]))), index === combobox.highlightedIndex && stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["bg-grey-100"]))), item.disabled && stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["cursor-not-allowed"]))))
+                  className: cx(stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["autocomplete-result flex items-center min-h-10 px-4 cursor-pointer"]))), index === combobox.highlightedIndex && stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["bg-grey-100"]))), item.disabled && stl(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["cursor-not-allowed"]))))
                 })), {}, {
                   children: item.value === SHOW_ALL_ITEMS_ID ? /*#__PURE__*/_jsx("span", {
-                    className: stl(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["w-full py-2 truncate text-center text-grey-900"]))),
+                    className: stl(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["w-full py-2 truncate text-center text-grey-900"]))),
                     children: item.label
                   }, item.value) : /*#__PURE__*/_jsx(OptionItem, {
                     multiple: Boolean(multiple),
@@ -443,7 +443,7 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
               })
             }))
           }), !!menuFooter && /*#__PURE__*/_jsx("footer", {
-            className: stl(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["flex items-center justify-center min-h-12 p-4 bg-grey-100 border-t border-grey-200 text-grey-600"]))),
+            className: stl(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["flex items-center justify-center min-h-12 p-4 bg-grey-100 border-t border-grey-200 text-grey-600"]))),
             children: menuFooter
           })]
         }))

package/dist/esm/Fields/DatePicker/components/Calendar.js

@@ -10,10 +10,7 @@ export var DatePickerCalendar = function DatePickerCalendar(props) {
   var curatedProps = Object.fromEntries(Object.entries(props).filter(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 1),
       key = _ref2[0];
-    return (
-      // @ts-expect-error
-      !excludedDayPickerPropsList.includes(key)
-    );
+    return !excludedDayPickerPropsList.includes(key);
   }));
 
   /**

package/dist/esm/Fields/Field/Field.js

@@ -50,6 +50,10 @@ export var Field = function Field(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     requiredContext = _useState2[0],
     setRequiredContext = _useState2[1];
+  var _useState3 = useState(undefined),
+    _useState4 = _slicedToArray(_useState3, 2),
+    elementToFocusContext = _useState4[0],
+    setElementToFocusContext = _useState4[1];
   if (process.env.NODE_ENV !== "production") {
     if (typeof requiredProp !== "undefined" && typeof requiredContext !== "undefined" && requiredProp !== requiredContext) {
       console.warn("The `required` prop is set to different values on both the Field (`required=".concat(requiredProp, "`) and the underlying input component (`required=").concat(requiredContext, "`)."));
@@ -78,13 +82,19 @@ export var Field = function Field(_ref) {
       labelId: labelId,
       descriptionId: descriptionId,
       inputId: labelFor,
-      setRequired: setRequiredContext
+      setRequired: setRequiredContext,
+      setElementToFocus: setElementToFocusContext
     },
     children: /*#__PURE__*/_jsxs("div", {
       className: className,
       children: [/*#__PURE__*/_jsxs("label", {
         className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["cursor-pointer flex ", ""])), inline ? "items-center" : "flex-col"),
         htmlFor: labelFor,
+        onClick: function onClick() {
+          if (!(elementToFocusContext !== null && elementToFocusContext !== void 0 && elementToFocusContext.closest("[aria-disabled=true]")) && !(elementToFocusContext !== null && elementToFocusContext !== void 0 && elementToFocusContext.closest("[disabled=true]"))) {
+            elementToFocusContext === null || elementToFocusContext === void 0 || elementToFocusContext.focus();
+          }
+        },
         children: [hasLabel && /*#__PURE__*/_jsxs("div", {
           id: labelId,
           className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["truncate ", ""])), inline ? "mr-2" : "mb-1"),

package/dist/esm/Fields/Field/FieldContext.d.ts

@@ -13,6 +13,7 @@ export declare type FieldContextValue = {
     descriptionId?: string;
     inputId?: string;
     setRequired?: (required?: boolean) => void;
+    setElementToFocus?: (elementToFocus?: HTMLElement) => void;
 };
 export declare const DEFAULT_FIELD_STATE: FieldState;
 export declare const DEFAULT_CONTEXT_VALUE: FieldContextValue;

package/dist/esm/Fields/Field/useField.d.ts

@@ -1,5 +1,6 @@
 import type { FieldContextValue } from "./FieldContext";
 export declare type UseFieldProps = {
     required?: boolean;
+    elementToFocus?: HTMLElement;
 };
-export declare const useField: ({ required }?: UseFieldProps) => FieldContextValue;
+export declare const useField: ({ required, elementToFocus }?: UseFieldProps) => FieldContextValue;

package/dist/esm/Fields/Field/useField.js

@@ -1,19 +1,24 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["setRequired"];
+var _excluded = ["setRequired", "setElementToFocus"];
 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 { useContext, useEffect } from "react";
 import { FieldContext } from "./FieldContext";
 export var useField = function useField() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    required = _ref.required;
+    required = _ref.required,
+    elementToFocus = _ref.elementToFocus;
   var _useContext = useContext(FieldContext),
     setRequired = _useContext.setRequired,
+    setElementToFocus = _useContext.setElementToFocus,
     contextValue = _objectWithoutProperties(_useContext, _excluded);
   useEffect(function () {
     return setRequired === null || setRequired === void 0 ? void 0 : setRequired(required);
   }, [setRequired, required]);
+  useEffect(function () {
+    return setElementToFocus === null || setElementToFocus === void 0 ? void 0 : setElementToFocus(elementToFocus);
+  }, [setElementToFocus, elementToFocus]);
   return _objectSpread({
     setRequired: setRequired
   }, contextValue);

package/dist/esm/Fields/Form/stories/ExtraErrors.js

@@ -213,25 +213,12 @@ export var FormikExtraErrorsComponent = function FormikExtraErrorsComponent() {
     children: /*#__PURE__*/_jsxs("div", {
       className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
       children: [/*#__PURE__*/_jsxs(Form, {
-        onSubmit: ( /*#__PURE__*/function () {
-          var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(e) {
-            return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-              while (1) switch (_context3.prev = _context3.next) {
-                case 0:
-                  setRevalidationEnabled(true);
-                  formik.handleSubmit(e);
-                  // notice that you might want to hook your validations into Formik onSubmit handler (called just above)
-                  // not directly here
-                case 2:
-                case "end":
-                  return _context3.stop();
-              }
-            }, _callee3);
-          }));
-          return function (_x3) {
-            return _ref3.apply(this, arguments);
-          };
-        }()),
+        onSubmit: function onSubmit(e) {
+          setRevalidationEnabled(true);
+          formik.handleSubmit(e);
+          // notice that you might want to hook your validations into Formik onSubmit handler (called just above)
+          // not directly here
+        },
         onChange: function onChange() {
           return setExtraErrors([]);
         },