@algolia/satellite 1.0.0 → 1.1.0

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

@@ -5,4 +5,4 @@ import type { AutoCompleteProps, Option } from "./types";
  *
  * See the [Autocomplete documentation page](https://satellite.algolia.com/components/forms/autocomplete) for more information.
  */
-export declare const AutoComplete: <O extends Option = Option>({ locale: localeProp, id, labelId, "aria-label": ariaLabel, name, placeholder, autoFocus, inputValue: inputValueProp, onTextChange, onFocus, onBlur, disabled, clearable, renderValueTemplate, noWrap, separatorKeys, multiple, value, selectOnBlur, onChange, options, optionItemComponent, creatable, createFromInputValue, emptyState, maxResults: maxItems, menuFooter, menuSize, variant, icon: Icon, endItem, className, menuClassName, valuesClassName, internalsRef, }: AutoCompleteProps<O>) => JSX.Element;
+export declare const AutoComplete: import("react").ForwardRefExoticComponent<AutoCompleteProps<Option> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/cjs/AutoComplete/AutoComplete.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AutoComplete = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _downshift = require("downshift");
 var _react = require("react");
@@ -23,13 +23,14 @@ var _Satellite = require("../Satellite");
 var _ScrollIndicator = require("../ScrollIndicator");
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 var _Tag = require("../Tag");
+var _mergeRefs = require("../utils/mergeRefs");
 var _uniqBy = require("../utils/uniqBy");
 var _AutoCompleteContext = require("./components/AutoCompleteContext");
 var _AutoCompleteEmptyState = require("./components/AutoCompleteEmptyState");
 var _DefaultOptionItem = require("./components/DefaultOptionItem");
 var _utils = require("./utils");
 var _jsxRuntime = require("react/jsx-runtime");
-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;
+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;
 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 MENU_POPPER_OPTIONS = {
@@ -50,18 +51,30 @@ var updateRef = function updateRef(ref, value) {
     ref.current = value;
   }
 };
+var InvalidIcon = function InvalidIcon() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.XIcon, {
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["h-4 w-4 text-white bg-red-700 p-px rounded-full"])))
+  });
+};
+var ValidatedIcon = function ValidatedIcon() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.CheckIcon, {
+    className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["h-4 w-4 text-white bg-accent-600 p-px rounded-full"])))
+  });
+};
 
 /**
  * The `Autocomplete` component enables users to search and select from a list using real-time input matching.
  *
  * See the [Autocomplete documentation page](https://satellite.algolia.com/components/forms/autocomplete) for more information.
  */
-var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
+var AutoComplete = exports.AutoComplete = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var localeProp = _ref.locale,
     id = _ref.id,
     labelId = _ref.labelId,
     ariaLabel = _ref["aria-label"],
     name = _ref.name,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
     placeholder = _ref.placeholder,
     autoFocus = _ref.autoFocus,
     inputValueProp = _ref.inputValue,
@@ -95,9 +108,15 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
     valuesClassName = _ref.valuesClassName,
     internalsRef = _ref.internalsRef;
   var createPortal = (0, _Satellite.useCreatePortal)();
-  var _useField = (0, _Field.useField)(),
+  var _useField = (0, _Field.useField)({
+      required: required
+    }),
     status = _useField.state.status,
-    fieldLabelId = _useField.labelId;
+    fieldLabelId = _useField.labelId,
+    descriptionId = _useField.descriptionId,
+    inputId = _useField.inputId;
+  var isInvalid = status === "invalid";
+  var StatusIcon = isInvalid ? InvalidIcon : status === "validated" ? ValidatedIcon : _react.Fragment;
   var localeContext = (0, _Satellite.useLocale)("autoComplete");
   var locale = (0, _react.useMemo)(function () {
     return _objectSpread(_objectSpread(_objectSpread({}, _utils.DEFAULT_AUTOCOMPLETE_LOCALE), localeContext), localeProp);
@@ -171,7 +190,7 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
     }
   });
   var combobox = (0, _downshift.useCombobox)({
-    inputId: id,
+    inputId: id !== null && id !== void 0 ? id : inputId,
     labelId: labelId !== null && labelId !== void 0 ? labelId : fieldLabelId,
     items: items,
     itemToString: _utils.optionToString,
@@ -241,9 +260,12 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
     }
   });
   var inputProps = combobox.getInputProps(_objectSpread({
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    "aria-describedby": descriptionId,
+    "aria-invalid": isInvalid,
+    required: required
   }, multipleSelection.getDropdownProps({
-    ref: inputRef,
+    ref: (0, _mergeRefs.mergeRefs)([inputRef, ref]),
     autoFocus: autoFocus,
     disabled: disabled,
     // See https://github.com/downshift-js/downshift/issues/1108
@@ -309,24 +331,24 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AutoCompleteContext.AutoCompleteProvider, {
     locale: locale,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex"]))), className),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex"]))), className),
       ref: function ref(el) {
         setContainerElement(el);
         // @ts-expect-error
         setContainerMeasureRef(el);
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-container"]))), variant === "large" && (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-large py-1"]))), inputFocused && (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-focused"]))), disabled && (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-disabled"]))), status === "invalid" && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-invalid"]))), noWrap && (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-nowrap"])))),
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-container"]))), variant === "large" && (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-large py-1"]))), inputFocused && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-focused"]))), disabled && (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-disabled"]))), isInvalid && (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-invalid"]))), noWrap && (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-nowrap"])))),
         onClick: function onClick() {
           var _inputRef$current;
           return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
         },
         children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["mr-4 shrink-0"]))), (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-200" : inputFocused ? "text-accent-600" : "text-grey-500")),
+          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["mr-4 shrink-0"]))), (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-200" : inputFocused ? "text-accent-600" : "text-grey-500")),
           width: "1rem",
           height: "1rem"
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["flex items-center flex-1 max-h-full"]))), !noWrap && (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["flex-wrap overflow-y-scroll no-scrollbar"]))), multiple && (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["-ml-1"]))), valuesClassName),
+          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["flex items-center flex-1 max-h-full"]))), !noWrap && (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["flex-wrap overflow-y-scroll no-scrollbar"]))), multiple && (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["-ml-1"]))), valuesClassName),
           children: [multiple && selectedItems.map(function (option, index) {
             return renderValueTemplate ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({}, multipleSelection.getSelectedItemProps({
               selectedItem: option,
@@ -341,7 +363,7 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
                 evt.stopPropagation();
                 multipleSelection.removeSelectedItem(option);
               },
-              className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["m-1 max-w-48 ", ""])), disabled && "opacity-50")
+              className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["m-1 max-w-48 ", ""])), disabled && "opacity-50")
             }, multipleSelection.getSelectedItemProps({
               selectedItem: option,
               index: index
@@ -354,21 +376,21 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
             "data-lpignore": true
           }, inputProps), {}, {
-            id: id,
+            id: id !== null && id !== void 0 ? id : inputId,
             name: name,
             type: "text",
             placeholder: hasValue ? "" : placeholder,
             autoComplete: "off",
-            className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-input py-1.5"]))), multiple && (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["ml-1"]))), shouldRenderCustomTemplate && hasValue && (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["h-0 w-0 opacity-0"]))))
+            className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-input py-1.5"]))), multiple && (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["ml-1"]))), shouldRenderCustomTemplate && hasValue && (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["h-0 w-0 opacity-0"]))))
           }))]
         }), Boolean(showClearButton || endItem) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: (0, _clsx["default"])(showClearButton && endItem && (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["my-2 flex self-end space-x-4"])))),
+          className: (0, _clsx["default"])(showClearButton && endItem && (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["my-2 flex self-end space-x-4"])))),
           children: [!!endItem && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["text-grey-700 my-auto"]))),
+            className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["text-grey-700 my-auto"]))),
             children: endItem
           }), showClearButton && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
             type: "button",
-            className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["w-6 h-6 flex items-center justify-center text-grey-500"]))),
+            className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["w-6 h-6 flex items-center justify-center text-grey-500"]))),
             onClick: function onClick() {
               setInternalInputValue("");
               multipleSelection.setSelectedItems([]);
@@ -378,11 +400,11 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
               size: ".75rem"
             })
           })]
-        })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIcon, {})]
       }), createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayContainer.ClickAwayContainer, {
         element: menuRef.current,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.Card, _objectSpread(_objectSpread({}, menuPopper.attributes), {}, {
-          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["z-dropdown"]))), menuClassName),
+          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["z-dropdown"]))), menuClassName),
           style: _objectSpread(_objectSpread(_objectSpread({}, menuPopper.styles.popper), hideMenu && {
             display: "none"
           }), {}, {
@@ -393,7 +415,7 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
           elevation: "300",
           fullBleed: true,
           children: [hideMenu ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread({}, combobox.getMenuProps())) : items.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, combobox.getMenuProps({
-            className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["min-h-10"])))
+            className: (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["min-h-10"])))
           })), {}, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               role: "option",
@@ -404,15 +426,15 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
               })
             })
           })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollIndicator.ScrollIndicator, {
-            className: menuSize === "large" ? (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["max-h-96"]))) : (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["max-h-64"]))),
+            className: menuSize === "large" ? (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["max-h-96"]))) : (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["max-h-64"]))),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", _objectSpread(_objectSpread({}, combobox.getMenuProps()), {}, {
               children: items.map(function (item, index) {
                 return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", _objectSpread(_objectSpread({}, combobox.getItemProps({
                   item: item,
-                  className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-result flex items-center min-h-10 px-4 cursor-pointer"]))), index === combobox.highlightedIndex && (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100"]))), item.disabled && (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["cursor-not-allowed"]))))
+                  className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-result flex items-center min-h-10 px-4 cursor-pointer"]))), index === combobox.highlightedIndex && (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100"]))), item.disabled && (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["cursor-not-allowed"]))))
                 })), {}, {
                   children: item.value === SHOW_ALL_ITEMS_ID ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                    className: (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["w-full py-2 truncate text-center text-grey-900"]))),
+                    className: (0, _satellitePrefixer["default"])(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2["default"])(["w-full py-2 truncate text-center text-grey-900"]))),
                     children: item.label
                   }, item.value) : /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionItem, {
                     multiple: Boolean(multiple),
@@ -424,11 +446,12 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
               })
             }))
           }), !!menuFooter && /*#__PURE__*/(0, _jsxRuntime.jsx)("footer", {
-            className: (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["flex items-center justify-center min-h-12 p-4 bg-grey-100 border-t border-grey-200 text-grey-600"]))),
+            className: (0, _satellitePrefixer["default"])(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2["default"])(["flex items-center justify-center min-h-12 p-4 bg-grey-100 border-t border-grey-200 text-grey-600"]))),
             children: menuFooter
           })]
         }))
       }))]
     })
   });
-};
+});
+AutoComplete.displayName = "AutoComplete";

package/dist/cjs/AutoComplete/AutoComplete.tailwind.js

@@ -23,6 +23,7 @@ var autoCompletePlugin = plugin(function (_ref) {
       border: "1px solid ".concat(theme("colors.grey.500")),
       boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
       transition: "all 100ms ease-in-out",
+      outline: "1px solid transparent",
       "&:not(.autocomplete-disabled, .autocomplete-focused):hover": {
         borderColor: theme("colors.grey.600")
       },
@@ -58,7 +59,14 @@ var autoCompletePlugin = plugin(function (_ref) {
     },
     ".autocomplete-invalid:not(.autocomplete-disabled)": {
       backgroundColor: theme("colors.red.100"),
-      borderColor: theme("colors.red.700")
+      borderColor: theme("colors.red.700"),
+      "&:hover": {
+        backgroundColor: theme("colors.red.50"),
+        borderColor: theme("colors.red.700")
+      },
+      "&.autocomplete-focused, &.autocomplete-container:focus-within": {
+        outlineColor: theme("colors.red.700")
+      }
     },
     ".autocomplete-nowrap": {
       overflowX: "scroll",

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

@@ -15,6 +15,7 @@ export interface AutoCompleteBaseProps<T extends Option = Option> {
     labelId?: string;
     icon?: IconComponentType;
     name?: string;
+    required?: boolean;
     className?: string;
     valuesClassName?: string;
     menuClassName?: string;

package/dist/cjs/Checkbox/Checkbox.d.ts

@@ -19,5 +19,5 @@ export declare type CheckboxProps = CheckboxInputProps & CheckboxCustomProps;
  *
  * See the [Checkbox documentation page](https://satellite.algolia.com/components/controls/checkbox) for more information.
  */
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLInputElement>, "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "onChange" | "autoFocus" | "disabled" | "checked" | "required"> & CheckboxCustomProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLInputElement>, "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "onChange" | "required" | "autoFocus" | "disabled" | "checked"> & CheckboxCustomProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/cjs/Checkbox/Checkbox.js

@@ -15,14 +15,12 @@ var _Field = require("../Field");
 var _Icons = require("../Icons");
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 var _isRenderedChild = require("../utils/isRenderedChild");
+var _uniqueId = require("../utils/uniqueId");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["children", "className", "textPosition", "indeterminate", "defaultChecked", "checkedColor", "checked", "disabled"];
+var _excluded = ["children", "className", "textPosition", "indeterminate", "defaultChecked", "checkedColor", "checked", "disabled", "required"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 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 generateFieldId = function generateFieldId() {
-  return Math.random().toString(36).substring(7);
-};
 var STATUS_CLASSNAMES = {
   "default": "",
   invalid: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["checkbox-invalid"]))),
@@ -44,13 +42,19 @@ var Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (
     checkedColor = _ref.checkedColor,
     checked = _ref.checked,
     disabled = _ref.disabled,
+    required = _ref.required,
     checkboxProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var id = (0, _react.useMemo)(function () {
-    return checkboxProps.id || generateFieldId();
-  }, [checkboxProps.id]);
-  var _useField = (0, _Field.useField)(),
+  var _useField = (0, _Field.useField)({
+      required: required
+    }),
     status = _useField.state.status,
-    labelId = _useField.labelId;
+    labelId = _useField.labelId,
+    descriptionId = _useField.descriptionId,
+    inputId = _useField.inputId;
+  var id = (0, _react.useMemo)(function () {
+    var _ref2, _checkboxProps$id;
+    return (_ref2 = (_checkboxProps$id = checkboxProps.id) !== null && _checkboxProps$id !== void 0 ? _checkboxProps$id : inputId) !== null && _ref2 !== void 0 ? _ref2 : (0, _uniqueId.uniqueId)("checkbox");
+  }, [checkboxProps.id, inputId]);
   var isControlled = typeof checked === "boolean";
   var _useState = (0, _react.useState)(Boolean(isControlled ? checked : defaultChecked)),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -75,10 +79,14 @@ var Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CheckboxIcon, {
         className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["checkbox-icon"])))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({}, checkboxProps), {}, {
-        "aria-checked": indeterminate ? "mixed" : isChecked,
-        id: id,
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
         "aria-labelledby": labelId,
+        "aria-describedby": descriptionId
+      }, checkboxProps), {}, {
+        id: id !== null && id !== void 0 ? id : inputId,
+        required: required,
+        "aria-invalid": status === "invalid",
+        "aria-checked": indeterminate ? "mixed" : isChecked,
         className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n              opacity-0 absolute inset-0\n              ", "\n            "])), disabled ? "cursor-not-allowed" : "cursor-pointer"),
         type: "checkbox",
         ref: ref,
@@ -88,7 +96,7 @@ var Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (
       }))]
     }), (0, _isRenderedChild.isRenderedChild)(children) && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n            display-body\n            ", "\n            ", "\n          "])), disabled && "text-grey-300 cursor-not-allowed", textPosition === "left" ? "pr-2" : "pl-2"),
-      htmlFor: id,
+      htmlFor: id !== null && id !== void 0 ? id : inputId,
       children: children
     })]
   });

package/dist/cjs/Checkbox/Checkbox.tailwind.js

@@ -34,14 +34,20 @@ var checkboxPlugin = plugin(function (_ref) {
       }
     },
     ".group\\/checkbox:hover": {
-      "& > .checkbox:not(.checkbox-disabled, .checkbox-checked, .checkbox-indeterminate, :has(input:focus))": {
+      "& > .checkbox:not(.checkbox-disabled, .checkbox-checked, .checkbox-indeterminate, .checkbox-invalid, :has(input:focus))": {
         borderColor: theme("colors.grey.600")
       }
     },
     ".checkbox-invalid:not(.checkbox-disabled)": {
       color: theme("colors.red.700"),
       background: theme("colors.red.100"),
-      borderColor: "currentColor"
+      borderColor: "currentColor",
+      "&:hover": {
+        background: theme("colors.red.50")
+      },
+      "&:focus-within": {
+        outline: "1px solid ".concat(theme("colors.red.700"))
+      }
     },
     ".checkbox-checked, .checkbox-indeterminate": {
       borderColor: "currentColor",

package/dist/cjs/DatePicker/DatePicker/DatePicker.d.ts

@@ -1,4 +1,4 @@
-import type { Dispatch, MouseEvent, ReactNode, VFC } from "react";
+import type { Dispatch, MouseEvent, ReactNode } from "react";
 import type { DatePickerCalendarProps } from "../components/Calendar";
 import type { DatePickerDisplayProps } from "../components/Display";
 import type { DatePickerFooterActionsProps } from "../components/FooterActions";
@@ -17,6 +17,7 @@ interface RenderTargetParams {
     isOpen: boolean;
 }
 export declare type DatePickerProps = {
+    id?: string;
     calendarProps?: Pick<DatePickerCalendarProps, "fromMonth" | "toMonth" | "disabled">;
     onOpen?: DatePickerDisplayProps["onClick"];
     onChange?: (value: Date | null) => void;
@@ -29,11 +30,12 @@ export declare type DatePickerProps = {
     value?: Date | null;
     initialValue?: Date | null;
     buttonSize?: DatePickerDisplayProps["size"];
+    required?: boolean;
 } & SharedDatePickerProps;
 /**
  * The `DatePicker` component allows users to easily select a date, featuring a calendar view, month/year navigation, and custom options.
  *
  * See the [Date Picker documentation page](https://satellite.algolia.com/layouts/date-picker) for more information.
  */
-export declare const DatePicker: VFC<DatePickerProps>;
+export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/cjs/DatePicker/DatePicker/DatePicker.js

@@ -9,6 +9,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
+var _Field = require("../../Field");
 var _Satellite = require("../../Satellite");
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 var _Calendar = require("../components/Calendar");
@@ -20,7 +21,7 @@ var _SidePanel = require("../components/SidePanel");
 var _utils = require("../utils");
 var _datePickerReducer = require("./datePickerReducer");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 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; }
 /**
@@ -28,8 +29,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  *
  * See the [Date Picker documentation page](https://satellite.algolia.com/layouts/date-picker) for more information.
  */
-var DatePicker = exports.DatePicker = function DatePicker(props) {
-  var _props$initialValue, _props$validate, _props$calendarProps;
+var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$initialValue, _props$validate, _props$id, _props$calendarProps;
   var contextLocale = (0, _Satellite.useLocale)("datePicker");
   var locale = _objectSpread(_objectSpread(_objectSpread({}, _utils.DEFAULT_DATE_PICKER_LOCALE), contextLocale), props.locale);
   var _useState = (0, _react.useState)(null),
@@ -94,6 +95,12 @@ var DatePicker = exports.DatePicker = function DatePicker(props) {
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [props]);
+  var _useField = (0, _Field.useField)({
+      required: props.required || false
+    }),
+    status = _useField.state.status,
+    inputId = _useField.inputId;
+  var isInvalid = status === "invalid";
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       ref: setTargetElement,
@@ -102,15 +109,18 @@ var DatePicker = exports.DatePicker = function DatePicker(props) {
         toggle: state.show ? handleClose : handleOpen,
         isOpen: state.show
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Display.DatePickerDisplay, {
+        id: (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : inputId,
+        ref: ref,
         onClick: state.show ? handleClose : handleOpen,
         size: props.buttonSize,
+        className: isInvalid ? (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["border-red-700 bg-red-100 bg-none focus:outline-1 focus:outline focus:outline-red-700 focus:shadow-none focus:bg-none focus:bg-red-100 focus:border-red-700 hover:border-red-700 hover:bg-red-50 hover:bg-none"]))) : undefined,
         children: value ? /*#__PURE__*/(0, _jsxRuntime.jsx)("time", {
           dateTime: value.toISOString(),
           children: (0, _utils.formatDate)(value)
         }) : locale.openButton
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.DatePickerModal, {
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["date-picker"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["date-picker"]))),
       show: state.show,
       onClickAway: function onClickAway(evt) {
         if (!(targetElement !== null && targetElement !== void 0 && targetElement.contains(evt.target))) {
@@ -123,7 +133,7 @@ var DatePicker = exports.DatePicker = function DatePicker(props) {
       targetElement: targetElement,
       placement: props.modalPlacement,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["flex"]))),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Calendar.DatePickerCalendar, _objectSpread(_objectSpread(_objectSpread({
             mode: "single",
@@ -149,7 +159,7 @@ var DatePicker = exports.DatePicker = function DatePicker(props) {
           })]
         }), props.renderRightPanel && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["h-full w-px bg-red-800"])))
+            className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["h-full w-px bg-red-800"])))
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SidePanel.DatePickerSidePanel, {
             children: [props.renderRightPanel({
               state: state,
@@ -165,4 +175,5 @@ var DatePicker = exports.DatePicker = function DatePicker(props) {
       })
     })]
   });
-};
+});
+DatePicker.displayName = "DatePicker";

package/dist/cjs/DatePicker/components/Display.d.ts

@@ -1,9 +1,9 @@
-import type { ReactNode, VFC } from "react";
+import type { ReactNode } from "react";
 import type { ButtonProps, ButtonSize } from "../../Button";
-export interface DatePickerDisplayProps {
+export interface DatePickerDisplayProps extends ButtonProps {
     id?: string;
     onClick: ButtonProps["onClick"];
     children: ReactNode;
     size?: ButtonSize;
 }
-export declare const DatePickerDisplay: VFC<DatePickerDisplayProps>;
+export declare const DatePickerDisplay: import("react").ForwardRefExoticComponent<DatePickerDisplayProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/cjs/DatePicker/components/Display.js

@@ -1,22 +1,33 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DatePickerDisplay = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
 var _Button = require("../../Button");
 var _Icons = require("../../Icons");
 var _jsxRuntime = require("react/jsx-runtime");
-var DatePickerDisplay = exports.DatePickerDisplay = function DatePickerDisplay(_ref) {
+var _excluded = ["id", "size", "onClick", "children"];
+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 DatePickerDisplay = exports.DatePickerDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var id = _ref.id,
     size = _ref.size,
     onClick = _ref.onClick,
-    children = _ref.children;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+    children = _ref.children,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, _objectSpread(_objectSpread({
     id: id,
     size: size,
     startIcon: _Icons.CalendarIcon,
     onClick: onClick,
+    ref: ref
+  }, props), {}, {
     children: children
-  });
-};
+  }));
+});
+DatePickerDisplay.displayName = "Display";

package/dist/cjs/Dropzone/Dropzone.d.ts

@@ -1,4 +1,4 @@
-import type { VFC } from "react";
+/// <reference types="react" />
 import type { FileRejection, DropzoneProps as ReactDropZoneProps } from "react-dropzone";
 export declare type DropzoneLocale = {
     clearInput?: string;
@@ -14,6 +14,8 @@ export interface DropzoneBaseProps {
     className?: string;
     /** @default false */
     multiple?: boolean;
+    /** @default false */
+    required?: boolean;
     locale?: DropzoneLocale;
 }
 export declare type DropzoneProps = DropzoneBaseProps & Omit<ReactDropZoneProps, "onDrop" | "onDropAccepted" | "onDropRejected" | "multiple">;
@@ -22,4 +24,4 @@ export declare type DropzoneProps = DropzoneBaseProps & Omit<ReactDropZoneProps,
  *
  * See the [Dropzone documentation page](https://satellite.algolia.com/components/forms/dropzone) for more information.
  */
-export declare const Dropzone: VFC<DropzoneProps>;
+export declare const Dropzone: import("react").ForwardRefExoticComponent<DropzoneBaseProps & Omit<ReactDropZoneProps, "onDrop" | "multiple" | "onDropAccepted" | "onDropRejected"> & import("react").RefAttributes<HTMLInputElement>>;