@algolia/satellite 1.6.0 → 1.8.0

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

@@ -0,0 +1,142 @@
+import * as RadixAccordion from "@radix-ui/react-accordion";
+import type { ReactNode, VFC } from "react";
+import type { IconComponentType } from "../../Icons";
+declare type AccordionSharedProps = {
+    children: ReactNode;
+    /**
+     * Defines a class name for the `Accordion`.
+     */
+    className?: string;
+    /**
+     * Defines whether the `Accordion` is disabled, preventing the user from interacting with the accordion and all its items.
+     */
+    disabled?: boolean;
+};
+declare type AccordionSingleProps = {
+    /**
+     * Defines whether a single or multiple items can be expanded at a time.
+     * @default false
+     */
+    multiple?: false;
+    /**
+     * Defines the controlled value of the item to expand when `multiple` is `false`.
+     * Must be used in conjunction with `onValueChange`.
+     */
+    value?: RadixAccordion.AccordionSingleProps["value"];
+    /**
+     * Defines the value of the item to expand when initially rendered and `multiple` is `false`.
+     * Use when you do not need to control the state of the items.
+     */
+    defaultValue?: RadixAccordion.AccordionSingleProps["defaultValue"];
+    /**
+     * Defines the event handler called when the expanded state of an item changes and `multiple` is `false`.
+     */
+    onChange?: RadixAccordion.AccordionSingleProps["onValueChange"];
+    /**
+     * Allows closing content when clicking trigger for an open item when `multiple` is `false`.
+     * @default true
+     */
+    collapsible?: boolean;
+};
+declare type AccordionMultipleProps = {
+    /**
+     * Defines whether a single or multiple items can be expanded at a time.
+     * @default false
+     */
+    multiple: true;
+    /**
+     * Defines the controlled value of the item to expand when `multiple` is `true`.
+     * Must be used in conjunction with `onValueChange`.
+     */
+    value?: RadixAccordion.AccordionMultipleProps["value"];
+    /**
+     * Defines the value of the item to expand when initially rendered when `multiple` is `true`.
+     * Use when you do not need to control the state of the items.
+     */
+    defaultValue?: RadixAccordion.AccordionMultipleProps["defaultValue"];
+    /**
+     * Defines the event handler called when the expanded state of an item changes and `multiple` is `true`.
+     */
+    onChange?: RadixAccordion.AccordionMultipleProps["onValueChange"];
+    /**
+     * Only available when `multiple` is `false`.
+     */
+    collapsible?: never;
+};
+export declare type AccordionProps = AccordionSharedProps & (AccordionSingleProps | AccordionMultipleProps);
+export declare type AccordionItemProps = {
+    children: ReactNode;
+    /**
+     * Defines a class name for the item.
+     */
+    className?: string;
+    /**
+     * Defines a unique value for the item.
+     */
+    value: string;
+    /**
+     * Defines whether the item is disabled, preventing the user from interacting with the item.
+     */
+    disabled?: boolean;
+};
+export declare type AccordionHeaderProps = {
+    /**
+     * Defines the title of the header.
+     */
+    children: ReactNode;
+    /**
+     * Defines a class name for the header.
+     */
+    className?: string;
+    /**
+     * Defines an icon to display next to the title and description.
+     */
+    icon?: IconComponentType;
+    /**
+     * Defines a class name for the icon.
+     */
+    iconClassName?: string;
+    /**
+     * Defines a class name for the icon background.
+     */
+    iconBgClassName?: string;
+    /**
+     * Defines a description for the header.
+     */
+    description?: ReactNode;
+    /**
+     * Defines a meta value for the header.
+     */
+    meta?: ReactNode;
+    /**
+     * Defines an icon to display as the trigger.
+     * Defaults to a chevron icon.
+     */
+    triggerIcon?: IconComponentType;
+    /**
+     * Defines a class name for the trigger.
+     */
+    triggerClassName?: string;
+};
+export declare type AccordionContentProps = {
+    children: ReactNode;
+    /**
+     * Defines a class name for the content.
+     */
+    className?: string;
+};
+declare type AccordionComponent = VFC<AccordionProps> & {
+    Item: typeof AccordionItem;
+    Header: typeof AccordionHeader;
+    Content: typeof AccordionContent;
+};
+/**
+ * The `Accordion` component is a compact section for revealing and hiding content, ideal for keeping interfaces clean.
+ *
+ * See the [Accordion documentation page](https://satellite.algolia.com/components/actions/accordion) for more information.
+ */
+export declare const Accordion: AccordionComponent;
+declare const AccordionItem: import("react").ForwardRefExoticComponent<AccordionItemProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const AccordionHeader: import("react").ForwardRefExoticComponent<AccordionHeaderProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: import("react").ForwardRefExoticComponent<AccordionContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/cjs/Actions/Accordion/Accordion.js

@@ -0,0 +1,149 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Accordion = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var RadixAccordion = _interopRequireWildcard(require("@radix-ui/react-accordion"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _Icons = require("../../Icons");
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+var _excluded = ["children", "className"],
+  _excluded2 = ["onChange", "multiple"],
+  _excluded3 = ["onChange", "multiple", "collapsible"];
+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; }
+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 ICON_SIZE = 16;
+var TRIGGER_ICON_SIZE = 20;
+
+/**
+ * The `Accordion` component is a compact section for revealing and hiding content, ideal for keeping interfaces clean.
+ *
+ * See the [Accordion documentation page](https://satellite.algolia.com/components/actions/accordion) for more information.
+ */
+var Accordion = exports.Accordion = function Accordion(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var sharedProps = {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex flex-col"]))), className)
+  };
+  if (props.multiple) {
+    var _onChange = props.onChange,
+      _multiple = props.multiple,
+      _rest = (0, _objectWithoutProperties2["default"])(props, _excluded2);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(RadixAccordion.Root, _objectSpread(_objectSpread(_objectSpread({}, _rest), sharedProps), {}, {
+      type: "multiple",
+      onValueChange: _onChange,
+      children: children
+    }));
+  }
+  var onChange = props.onChange,
+    multiple = props.multiple,
+    _props$collapsible = props.collapsible,
+    collapsible = _props$collapsible === void 0 ? true : _props$collapsible,
+    rest = (0, _objectWithoutProperties2["default"])(props, _excluded3);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RadixAccordion.Root, _objectSpread(_objectSpread(_objectSpread({}, rest), sharedProps), {}, {
+    type: "single",
+    onValueChange: onChange,
+    collapsible: collapsible,
+    children: children
+  }));
+};
+Accordion.displayName = "Accordion";
+var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+  var value = _ref2.value,
+    disabled = _ref2.disabled,
+    children = _ref2.children,
+    className = _ref2.className;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RadixAccordion.Item, {
+    value: value,
+    disabled: disabled,
+    ref: ref,
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["group/accordion-item flex flex-col"]))), className),
+    children: children
+  });
+});
+AccordionItem.displayName = "AccordionItem";
+var AccordionHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, ref) {
+  var children = _ref3.children,
+    description = _ref3.description,
+    Icon = _ref3.icon,
+    _ref3$iconClassName = _ref3.iconClassName,
+    iconClassName = _ref3$iconClassName === void 0 ? (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["typo-subdued"]))) : _ref3$iconClassName,
+    _ref3$iconBgClassName = _ref3.iconBgClassName,
+    iconBgClassName = _ref3$iconBgClassName === void 0 ? (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100"]))) : _ref3$iconBgClassName,
+    meta = _ref3.meta,
+    triggerIcon = _ref3.triggerIcon,
+    triggerClassName = _ref3.triggerClassName,
+    className = _ref3.className;
+  var TriggerIcon = triggerIcon || _Icons.ChevronDownIcon;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RadixAccordion.Header, {
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(RadixAccordion.Trigger, {
+      ref: ref,
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["group/accordion-trigger flex gap-x-3 items-center w-full justify-between px-3.5 py-2.5 group-first/accordion-item:rounded-t group-last/accordion-item:rounded-b bg-white border-2 border-transparent focus-visible:outline-none focus-visible:border-accent-600 enabled:hover:bg-grey-50 motion-safe:transition-colors"]))), triggerClassName),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-x-3 grow"]))),
+        children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["rounded-full w-8 h-8 flex items-center justify-center shrink-0"]))), iconBgClassName),
+          "aria-hidden": true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+            className: (0, _clsx["default"])(iconClassName, (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["group-disabled/accordion-trigger:text-grey-300"])))),
+            width: ICON_SIZE,
+            height: ICON_SIZE
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-y-1 text-left grow"]))),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["typo-display-heading line-clamp-2 group-disabled/accordion-trigger:text-grey-300"]))),
+            children: children
+          }), typeof description !== "undefined" && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["typo-display-body typo-subdued line-clamp-3 group-disabled/accordion-trigger:text-grey-300"]))),
+            children: description
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-x-2"]))),
+        children: [typeof meta !== "undefined" && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["typo-display-caption group-disabled/accordion-trigger:text-grey-300"]))),
+          children: meta
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TriggerIcon, {
+          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 typo-subdued group-disabled/accordion-trigger:text-grey-300"]))),
+          // Don't rotate the trigger icon if it's a custom one.
+          !triggerIcon && (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])([" group-data-[state=open]/accordion-trigger:rotate-180 motion-safe:transition-transform motion-safe:duration-300 motion-safe:ease-out"])))),
+          width: TRIGGER_ICON_SIZE,
+          height: TRIGGER_ICON_SIZE,
+          "aria-hidden": true
+        })]
+      })]
+    })
+  });
+});
+AccordionHeader.displayName = "AccordionHeader";
+var AccordionContent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
+  var children = _ref4.children,
+    className = _ref4.className;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RadixAccordion.Content, {
+    ref: ref,
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["typo-display-body typo-subdued overflow-hidden accordion-content"]))), className),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["px-4 pt-2 pb-4"]))),
+      children: children
+    })
+  });
+});
+AccordionContent.displayName = "AccordionContent";
+Accordion.Item = AccordionItem;
+Accordion.Header = AccordionHeader;
+Accordion.Content = AccordionContent;

package/dist/cjs/Actions/Accordion/Accordion.tailwind.d.ts

@@ -0,0 +1,5 @@
+export = accordionPlugin;
+declare const accordionPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
+};

package/dist/cjs/Actions/Accordion/Accordion.tailwind.js

@@ -0,0 +1,44 @@
+"use strict";
+
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+var accordionPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents;
+  var animationDuration = "300ms";
+  var animationEasing = "ease-out";
+  addComponents({
+    /* eslint-disable @algolia/stl/prefer-stl-helper */
+    "@media (prefers-reduced-motion: no-preference)": {
+      ".accordion-content": {
+        "&[data-state='open']": {
+          animation: "stl-accordion-content-slide-down ".concat(animationDuration, " ").concat(animationEasing)
+        },
+        "&[data-state='closed']": {
+          animation: "stl-accordion-content-slide-up ".concat(animationDuration, " ").concat(animationEasing)
+        }
+      }
+    },
+    "@keyframes stl-accordion-content-slide-down": {
+      from: {
+        height: "0",
+        opacity: "0"
+      },
+      to: {
+        height: "var(--radix-accordion-content-height)",
+        opacity: "1"
+      }
+    },
+    "@keyframes stl-accordion-content-slide-up": {
+      from: {
+        height: "var(--radix-accordion-content-height)",
+        opacity: "1"
+      },
+      to: {
+        height: "0",
+        opacity: "0"
+      }
+    }
+    /* eslint-enable @algolia/stl/prefer-stl-helper */
+  });
+});
+module.exports = accordionPlugin;

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

@@ -43,7 +43,7 @@ var PolymorphicButton = exports.PolymorphicButton = /*#__PURE__*/(0, _react.forw
     children = props.children,
     cleanedProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   if (loading) {
-    // @ts-expect-error
+    // @ts-expect-error disabled is not present in PolymorphicButtonProps
     cleanedProps.disabled = true;
   }
   var buttonClassName = (0, _clsx["default"])(BASE_CLASSNAMES, _styles.BUTTON_SIZE_CLASSNAMES[size], _styles.BUTTON_VARIANT_CLASSNAMES[variant], cleanedProps.disabled && (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["btn-disabled"]))), className);
@@ -51,7 +51,7 @@ var PolymorphicButton = exports.PolymorphicButton = /*#__PURE__*/(0, _react.forw
   var iconClassNames = (0, _clsx["default"])((0, _styles.getIconColorClassName)(props), loading && (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["invisible"]))));
   var textClassNames = (0, _clsx["default"])(loading && (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["invisible"]))));
   if ((0, _types.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__*/(0, _jsxRuntime.jsxs)(Component, _objectSpread(_objectSpread({}, cleanedProps), {}, {

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

@@ -51,13 +51,13 @@ var PolymorphicIconButton = exports.PolymorphicIconButton = /*#__PURE__*/(0, _re
     loading = _props$loading === void 0 ? false : _props$loading,
     cleanedProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   if (loading) {
-    // @ts-expect-error
+    // @ts-expect-error disabled prop is not present in PolymorphicIconButtonProps
     cleanedProps.disabled = true;
   }
   var iconButtonClassName = (0, _clsx["default"])(BASE_CLASSNAMES, SIZE_CLASSNAMES[size], VARIANT_CLASSNAMES[variant], cleanedProps.disabled && (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["btn-disabled"]))), className);
   var loaderClassNames = (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["absolute ", ""])), (variant === "destructive" || variant === "primary") && "text-white");
   if ((0, _types.isButtonType)(props) && !Object.prototype.hasOwnProperty.call(cleanedProps, "type")) {
-    // @ts-ignore
+    // @ts-expect-error type is not present in PolymorphicIconButtonProps
     cleanedProps.type = "button";
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Overlay.TooltipWrapper, {

package/dist/cjs/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/cjs/Actions/ToggleGroup/ToggleGroup.d.ts

@@ -15,7 +15,7 @@ declare type ToggleGroupSingleProps = {
     type: "single";
     /**
      * Defines the controlled value of the pressed item.
-     * Must be used in conjunction with `onValueChange`.
+     * Must be used in conjunction with `onChange`.
      */
     value?: RadixToggleGroupSingleProps["value"];
     /**
@@ -31,7 +31,7 @@ declare type ToggleGroupMultipleProps = {
     type: "multiple";
     /**
      * Defines the controlled value of the pressed items.
-     * Must be used in conjunction with `onValueChange`.
+     * Must be used in conjunction with `onChange`.
      */
     value?: RadixToggleGroupMultipleProps["value"];
     /**

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

@@ -1,3 +1,5 @@
+export type { AccordionProps as ExperimentalAccordionProps, AccordionContentProps as ExperimentalAccordionContentProps, AccordionHeaderProps as ExperimentalAccordionHeaderProps, AccordionItemProps as ExperimentalAccordionItemProps, } from "./Accordion/Accordion";
+export { Accordion as ExperimentalAccordion } from "./Accordion/Accordion";
 export * from "./Button/Button";
 export * from "./ButtonGroup/ButtonGroup";
 export * from "./ButtonLink/ButtonLink";

package/dist/cjs/Actions/index.js

@@ -3,9 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  ExperimentalAccordion: true
+};
+Object.defineProperty(exports, "ExperimentalAccordion", {
+  enumerable: true,
+  get: function get() {
+    return _Accordion.Accordion;
+  }
+});
+var _Accordion = require("./Accordion/Accordion");
 var _Button = require("./Button/Button");
 Object.keys(_Button).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Button[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -17,6 +28,7 @@ Object.keys(_Button).forEach(function (key) {
 var _ButtonGroup = require("./ButtonGroup/ButtonGroup");
 Object.keys(_ButtonGroup).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ButtonGroup[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -28,6 +40,7 @@ Object.keys(_ButtonGroup).forEach(function (key) {
 var _ButtonLink = require("./ButtonLink/ButtonLink");
 Object.keys(_ButtonLink).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ButtonLink[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -39,6 +52,7 @@ Object.keys(_ButtonLink).forEach(function (key) {
 var _IconButton = require("./IconButton/IconButton");
 Object.keys(_IconButton).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _IconButton[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -50,6 +64,7 @@ Object.keys(_IconButton).forEach(function (key) {
 var _IconButtonLink = require("./IconButtonLink/IconButtonLink");
 Object.keys(_IconButtonLink).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _IconButtonLink[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -61,6 +76,7 @@ Object.keys(_IconButtonLink).forEach(function (key) {
 var _Switch = require("./Switch");
 Object.keys(_Switch).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Switch[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -72,6 +88,7 @@ Object.keys(_Switch).forEach(function (key) {
 var _ToggleButton = require("./ToggleButton/ToggleButton");
 Object.keys(_ToggleButton).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ToggleButton[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -83,6 +100,7 @@ Object.keys(_ToggleButton).forEach(function (key) {
 var _ToggleGroup = require("./ToggleGroup/ToggleGroup");
 Object.keys(_ToggleGroup).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ToggleGroup[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,

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

@@ -276,7 +276,7 @@ var AutoComplete = exports.AutoComplete = /*#__PURE__*/(0, _react.forwardRef)(fu
       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) {
@@ -290,7 +290,7 @@ var AutoComplete = exports.AutoComplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     },
     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)) {
@@ -328,7 +328,7 @@ var AutoComplete = exports.AutoComplete = /*#__PURE__*/(0, _react.forwardRef)(fu
   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__*/(0, _jsxRuntime.jsx)(_AutoCompleteContext.AutoCompleteProvider, {
     locale: locale,
@@ -336,7 +336,7 @@ var AutoComplete = exports.AutoComplete = /*#__PURE__*/(0, _react.forwardRef)(fu
       className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex"]))), className),
       ref: function ref(el) {
         setContainerElement(el);
-        // @ts-expect-error
+        // @ts-expect-error - setContainerMeasureRef does accept HTMLDivElement | null
         setContainerMeasureRef(el);
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

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

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

package/dist/cjs/Fields/Field/Field.js

@@ -57,12 +57,16 @@ var Field = exports.Field = function Field(_ref) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     requiredContext = _useState2[0],
     setRequiredContext = _useState2[1];
+  var _useState3 = (0, _react.useState)(undefined),
+    _useState4 = (0, _slicedToArray2["default"])(_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, "`)."));
     }
   }
-  var form = (0, _useForm.useExperimentalForm)();
+  var form = (0, _useForm.useForm)();
   var addField = form === null || form === void 0 ? void 0 : form.addField;
   var removeField = form === null || form === void 0 ? void 0 : form.removeField;
   (0, _react.useEffect)(function () {
@@ -85,13 +89,19 @@ var Field = exports.Field = function Field(_ref) {
       labelId: labelId,
       descriptionId: descriptionId,
       inputId: labelFor,
-      setRequired: setRequiredContext
+      setRequired: setRequiredContext,
+      setElementToFocus: setElementToFocusContext
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: className,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
         className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["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__*/(0, _jsxRuntime.jsxs)("div", {
           id: labelId,
           className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["truncate ", ""])), inline ? "mr-2" : "mb-1"),

package/dist/cjs/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/cjs/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/cjs/Fields/Field/useField.js

@@ -9,18 +9,23 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _FieldContext = require("./FieldContext");
-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) { (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 useField = exports.useField = function useField() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    required = _ref.required;
+    required = _ref.required,
+    elementToFocus = _ref.elementToFocus;
   var _useContext = (0, _react.useContext)(_FieldContext.FieldContext),
     setRequired = _useContext.setRequired,
+    setElementToFocus = _useContext.setElementToFocus,
     contextValue = (0, _objectWithoutProperties2["default"])(_useContext, _excluded);
   (0, _react.useEffect)(function () {
     return setRequired === null || setRequired === void 0 ? void 0 : setRequired(required);
   }, [setRequired, required]);
+  (0, _react.useEffect)(function () {
+    return setElementToFocus === null || setElementToFocus === void 0 ? void 0 : setElementToFocus(elementToFocus);
+  }, [setElementToFocus, elementToFocus]);
   return _objectSpread({
     setRequired: setRequired
   }, contextValue);