@algolia/satellite 1.0.0-beta.166 → 1.0.0-beta.167

package/cjs/AutoComplete/AutoComplete.d.ts

@@ -16,5 +16,5 @@ import type { AutoCompleteProps, Option } from "./types";
  * - Provide matching results quickly
  * - Style different data
  */
-export declare const AutoComplete: <O extends Option = Option>({ locale: localeProp, id, 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: <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 default AutoComplete;

package/cjs/AutoComplete/AutoComplete.js

@@ -69,6 +69,8 @@ var updateRef = function updateRef(ref, value) {
 var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
   var localeProp = _ref.locale,
     id = _ref.id,
+    labelId = _ref.labelId,
+    ariaLabel = _ref["aria-label"],
     name = _ref.name,
     placeholder = _ref.placeholder,
     autoFocus = _ref.autoFocus,
@@ -103,8 +105,9 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
     valuesClassName = _ref.valuesClassName,
     internalsRef = _ref.internalsRef;
   var createPortal = (0, _Satellite.useCreatePortal)();
-  var _useFieldState = (0, _Field.useFieldState)(),
-    status = _useFieldState.status;
+  var _useField = (0, _Field.useField)(),
+    status = _useField.state.status,
+    fieldLabelId = _useField.labelId;
   var localeContext = (0, _Satellite.useLocale)("autoComplete");
   var locale = (0, _react.useMemo)(function () {
     return _objectSpread(_objectSpread(_objectSpread({}, _utils.DEFAULT_AUTOCOMPLETE_LOCALE), localeContext), localeProp);
@@ -172,6 +175,8 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
     }
   });
   var combobox = (0, _downshift.useCombobox)({
+    inputId: id,
+    labelId: labelId !== null && labelId !== void 0 ? labelId : fieldLabelId,
     items: items,
     itemToString: _utils.optionToString,
     scrollIntoView: function scrollIntoView(node) {
@@ -252,7 +257,9 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
       return Boolean(item.disabled);
     }
   });
-  var inputProps = combobox.getInputProps(multipleSelection.getDropdownProps({
+  var inputProps = combobox.getInputProps(_objectSpread({
+    "aria-label": ariaLabel
+  }, multipleSelection.getDropdownProps({
     ref: inputRef,
     autoFocus: autoFocus,
     disabled: disabled,
@@ -284,7 +291,7 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
         }
       }
     }
-  }));
+  })));
   (0, _react.useEffect)(function () {
     if (!combobox.isOpen) return;
     if (items.length === 0 && combobox.highlightedIndex >= 0) {

package/cjs/AutoComplete/index.d.ts

@@ -3,4 +3,5 @@ export * from "./components/DefaultOptionItem";
 export * from "./components/AutoCompleteEmptyState";
 export * from "./components/AutocompleteContext";
 export * from "./types";
+export { defaultCreateFromInputValue } from "./utils";
 export { default } from "./AutoComplete";

package/cjs/AutoComplete/index.js

@@ -4,13 +4,21 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
+var _exportNames = {
+  defaultCreateFromInputValue: true
+};
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
     return _AutoComplete["default"];
   }
 });
+Object.defineProperty(exports, "defaultCreateFromInputValue", {
+  enumerable: true,
+  get: function get() {
+    return _utils.defaultCreateFromInputValue;
+  }
+});
 var _AutoComplete = _interopRequireWildcard(require("./AutoComplete"));
 Object.keys(_AutoComplete).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -71,5 +79,6 @@ Object.keys(_types).forEach(function (key) {
     }
   });
 });
+var _utils = require("./utils");
 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 && Object.prototype.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; }

package/cjs/AutoComplete/types.d.ts

@@ -11,6 +11,8 @@ export declare type AutoCompleteLocale = {
 };
 export interface AutoCompleteBaseProps<T extends Option = Option> {
     id?: string;
+    "aria-label"?: string;
+    labelId?: string;
     icon?: IconComponentType;
     name?: string;
     className?: string;

package/cjs/Checkbox/Checkbox.js

@@ -49,8 +49,9 @@ var Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (
   var id = (0, _react.useMemo)(function () {
     return checkboxProps.id || generateFieldId();
   }, [checkboxProps.id]);
-  var _useFieldState = (0, _Field.useFieldState)(),
-    status = _useFieldState.status;
+  var _useField = (0, _Field.useField)(),
+    status = _useField.state.status,
+    labelId = _useField.labelId;
   var isControlled = typeof checked === "boolean";
   var _useState = (0, _react.useState)(Boolean(isControlled ? checked : defaultChecked)),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -78,6 +79,7 @@ var Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({}, checkboxProps), {}, {
         "aria-checked": indeterminate ? "mixed" : isChecked,
         id: id,
+        "aria-labelledby": labelId,
         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,

package/cjs/Dropzone/Dropzone.js

@@ -70,8 +70,9 @@ var Dropzone = exports.Dropzone = function Dropzone(_ref2) {
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     focused = _useState4[0],
     setFocused = _useState4[1];
-  var _useFieldState = (0, _Field.useFieldState)(),
-    status = _useFieldState.status;
+  var _useField = (0, _Field.useField)(),
+    status = _useField.state.status,
+    labelId = _useField.labelId;
   var onDrop = (0, _react.useCallback)(function (acceptedFiles, fileRejections) {
     var updatedFiles = multiple ? [].concat((0, _toConsumableArray2["default"])(files), (0, _toConsumableArray2["default"])(acceptedFiles)) : acceptedFiles;
     setFiles(updatedFiles);
@@ -110,6 +111,7 @@ var Dropzone = exports.Dropzone = function Dropzone(_ref2) {
   })), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread({}, getInputProps({
       id: dropzoneId,
+      "aria-labelledby": labelId,
       onFocus: function onFocus() {
         return setFocused(true);
       },

package/cjs/Field/Field.d.ts

@@ -1,10 +1,11 @@
-import type { ReactChild, ReactNode, VFC } from "react";
-import type { FieldState } from "./FieldStateContext";
+import { type ReactChild, type ReactNode, type VFC } from "react";
+import type { FieldState } from "./FieldContext";
 export interface FieldProps {
     /** @ignore */
     className?: string;
     /** Label to display above the nested input */
     label?: ReactChild;
+    labelId?: string;
     labelFor?: string;
     /** Helpful description to show below the `Field` */
     description?: ReactNode;

package/cjs/Field/Field.js

@@ -1,20 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Field = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
 var _reactFeather = require("react-feather");
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
-var _FieldStateContext = _interopRequireWildcard(require("./FieldStateContext"));
+var _utils = require("../utils");
+var _FieldContext = require("./FieldContext");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-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 && Object.prototype.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; }
 /**
  * Use text fields to help users enter, select, and search for text. Text fields are normally found within a form but can also be part of a modal, search, or card
  *
@@ -53,20 +52,31 @@ var Field = exports.Field = function Field(_ref) {
   var className = _ref.className,
     label = _ref.label,
     labelFor = _ref.labelFor,
+    labelIdProp = _ref.labelId,
     description = _ref.description,
     _ref$state = _ref.state,
-    state = _ref$state === void 0 ? _FieldStateContext.DEFAULT_STATE : _ref$state,
+    state = _ref$state === void 0 ? _FieldContext.DEFAULT_FIELD_STATE : _ref$state,
     _ref$inline = _ref.inline,
     inline = _ref$inline === void 0 ? false : _ref$inline,
     children = _ref.children;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldStateContext["default"].Provider, {
-    value: state,
+  var hasLabel = !!label;
+  var labelId = (0, _react.useMemo)(
+  // eslint-disable-next-line @algolia/satellite/prefer-stl-helper
+  function () {
+    return hasLabel ? labelIdProp !== null && labelIdProp !== void 0 ? labelIdProp : (0, _utils.uniqueId)("stl-field-label-") : undefined;
+  }, [labelIdProp, hasLabel]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldContext.FieldContext.Provider, {
+    value: {
+      state: state,
+      labelId: labelId
+    },
     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 && "flex-col"),
         htmlFor: labelFor,
-        children: [!!label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: [hasLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          id: labelId,
           className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["truncate ", ""])), inline ? "mr-2" : "mb-1"),
           children: label
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/cjs/Field/FieldContext.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare type FieldState = {
+    status: "default";
+} | {
+    status: "validated";
+} | {
+    status: "invalid";
+    errors: string[];
+};
+export declare type FieldContextValue = {
+    state: FieldState;
+    labelId?: string;
+};
+export declare const DEFAULT_FIELD_STATE: FieldState;
+export declare const DEFAULT_CONTEXT_VALUE: FieldContextValue;
+export declare const FieldContext: import("react").Context<FieldContextValue>;

package/cjs/Field/FieldContext.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldContext = exports.DEFAULT_FIELD_STATE = exports.DEFAULT_CONTEXT_VALUE = void 0;
+var _react = require("react");
+var DEFAULT_FIELD_STATE = exports.DEFAULT_FIELD_STATE = {
+  status: "default"
+};
+var DEFAULT_CONTEXT_VALUE = exports.DEFAULT_CONTEXT_VALUE = {
+  state: DEFAULT_FIELD_STATE
+};
+var FieldContext = exports.FieldContext = /*#__PURE__*/(0, _react.createContext)(DEFAULT_CONTEXT_VALUE);

package/cjs/Field/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./Field";
-export * from "./FieldStateContext";
-export * from "./useFieldState";
+export type { FieldState, FieldContextValue } from "./FieldContext";
+export { FieldContext } from "./FieldContext";
+export * from "./useField";
 export { default } from "./Field";

package/cjs/Field/index.js

@@ -4,7 +4,15 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
+var _exportNames = {
+  FieldContext: true
+};
+Object.defineProperty(exports, "FieldContext", {
+  enumerable: true,
+  get: function get() {
+    return _FieldContext.FieldContext;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
@@ -23,27 +31,16 @@ Object.keys(_Field).forEach(function (key) {
     }
   });
 });
-var _FieldStateContext = require("./FieldStateContext");
-Object.keys(_FieldStateContext).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _FieldStateContext[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _FieldStateContext[key];
-    }
-  });
-});
-var _useFieldState = require("./useFieldState");
-Object.keys(_useFieldState).forEach(function (key) {
+var _FieldContext = require("./FieldContext");
+var _useField = require("./useField");
+Object.keys(_useField).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useFieldState[key]) return;
+  if (key in exports && exports[key] === _useField[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _useFieldState[key];
+      return _useField[key];
     }
   });
 });

package/cjs/Field/useField.d.ts

@@ -0,0 +1,2 @@
+import type { FieldContextValue } from "./FieldContext";
+export declare const useField: () => FieldContextValue;

package/cjs/Field/useField.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useField = void 0;
+var _react = require("react");
+var _FieldContext = require("./FieldContext");
+var useField = exports.useField = function useField() {
+  return (0, _react.useContext)(_FieldContext.FieldContext);
+};

package/cjs/Input/Input.js

@@ -13,7 +13,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _react = require("react");
 var _reactFeather = require("react-feather");
 var _Button = require("../Button");
-var _useFieldState2 = _interopRequireDefault(require("../Field/useFieldState"));
+var _Field = require("../Field");
 var _Satellite = require("../Satellite");
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 var _isNil = _interopRequireDefault(require("../utils/isNil"));
@@ -88,8 +88,9 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     inputRefCallback = _useForwardedRef2[0],
     inputRef = _useForwardedRef2[1];
   var triggerInputChange = (0, _useTriggerInputChange["default"])(inputRef);
-  var _useFieldState = (0, _useFieldState2["default"])(),
-    status = _useFieldState.status;
+  var _useField = (0, _Field.useField)(),
+    status = _useField.state.status,
+    labelId = _useField.labelId;
   var isControlled = ("value" in inputProps);
   var _useState3 = (0, _react.useState)(function () {
       return isControlled ? inputProps.value : inputProps.defaultValue;
@@ -121,7 +122,8 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
       className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["mx-4 no-search-input-decoration"]))),
       ref: inputRefCallback,
-      type: type
+      type: type,
+      "aria-labelledby": labelId
     }, inputProps), {}, {
       readOnly: readOnly,
       disabled: disabled,

package/esm/AutoComplete/AutoComplete.d.ts

@@ -16,5 +16,5 @@ import type { AutoCompleteProps, Option } from "./types";
  * - Provide matching results quickly
  * - Style different data
  */
-export declare const AutoComplete: <O extends Option = Option>({ locale: localeProp, id, 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: <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 default AutoComplete;

package/esm/AutoComplete/AutoComplete.js

@@ -13,7 +13,7 @@ import { usePopper } from "react-popper";
 import useMeasure from "react-use/lib/useMeasure";
 import { Card } from "../Card";
 import { ClickAwayContainer } from "../ClickAwayContainer";
-import { useFieldState } from "../Field";
+import { useField } from "../Field";
 import { useCreatePortal, useLocale } from "../Satellite";
 import ScrollIndicator from "../ScrollIndicator";
 import stl from "../styles/helpers/satellitePrefixer";
@@ -63,6 +63,8 @@ var updateRef = function updateRef(ref, value) {
 export var AutoComplete = function AutoComplete(_ref) {
   var localeProp = _ref.locale,
     id = _ref.id,
+    labelId = _ref.labelId,
+    ariaLabel = _ref["aria-label"],
     name = _ref.name,
     placeholder = _ref.placeholder,
     autoFocus = _ref.autoFocus,
@@ -97,8 +99,9 @@ export var AutoComplete = function AutoComplete(_ref) {
     valuesClassName = _ref.valuesClassName,
     internalsRef = _ref.internalsRef;
   var createPortal = useCreatePortal();
-  var _useFieldState = useFieldState(),
-    status = _useFieldState.status;
+  var _useField = useField(),
+    status = _useField.state.status,
+    fieldLabelId = _useField.labelId;
   var localeContext = useLocale("autoComplete");
   var locale = useMemo(function () {
     return _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_AUTOCOMPLETE_LOCALE), localeContext), localeProp);
@@ -166,6 +169,8 @@ export var AutoComplete = function AutoComplete(_ref) {
     }
   });
   var combobox = useCombobox({
+    inputId: id,
+    labelId: labelId !== null && labelId !== void 0 ? labelId : fieldLabelId,
     items: items,
     itemToString: optionToString,
     scrollIntoView: function scrollIntoView(node) {
@@ -246,7 +251,9 @@ export var AutoComplete = function AutoComplete(_ref) {
       return Boolean(item.disabled);
     }
   });
-  var inputProps = combobox.getInputProps(multipleSelection.getDropdownProps({
+  var inputProps = combobox.getInputProps(_objectSpread({
+    "aria-label": ariaLabel
+  }, multipleSelection.getDropdownProps({
     ref: inputRef,
     autoFocus: autoFocus,
     disabled: disabled,
@@ -278,7 +285,7 @@ export var AutoComplete = function AutoComplete(_ref) {
         }
       }
     }
-  }));
+  })));
   useEffect(function () {
     if (!combobox.isOpen) return;
     if (items.length === 0 && combobox.highlightedIndex >= 0) {

package/esm/AutoComplete/index.d.ts

@@ -3,4 +3,5 @@ export * from "./components/DefaultOptionItem";
 export * from "./components/AutoCompleteEmptyState";
 export * from "./components/AutocompleteContext";
 export * from "./types";
+export { defaultCreateFromInputValue } from "./utils";
 export { default } from "./AutoComplete";

package/esm/AutoComplete/index.js

@@ -3,4 +3,5 @@ export * from "./components/DefaultOptionItem";
 export * from "./components/AutoCompleteEmptyState";
 export * from "./components/AutocompleteContext";
 export * from "./types";
+export { defaultCreateFromInputValue } from "./utils";
 export { default } from "./AutoComplete";

package/esm/AutoComplete/types.d.ts

@@ -11,6 +11,8 @@ export declare type AutoCompleteLocale = {
 };
 export interface AutoCompleteBaseProps<T extends Option = Option> {
     id?: string;
+    "aria-label"?: string;
+    labelId?: string;
     icon?: IconComponentType;
     name?: string;
     className?: string;

package/esm/Checkbox/Checkbox.js

@@ -9,7 +9,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import cx from "clsx";
 import { forwardRef, useMemo, useState } from "react";
 import { Check, Minus } from "react-feather";
-import { useFieldState } from "../Field";
+import { useField } from "../Field";
 import stl from "../styles/helpers/satellitePrefixer";
 import isRenderedChild from "../utils/isRenderedChild";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -43,8 +43,9 @@ export var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = useMemo(function () {
     return checkboxProps.id || generateFieldId();
   }, [checkboxProps.id]);
-  var _useFieldState = useFieldState(),
-    status = _useFieldState.status;
+  var _useField = useField(),
+    status = _useField.state.status,
+    labelId = _useField.labelId;
   var isControlled = typeof checked === "boolean";
   var _useState = useState(Boolean(isControlled ? checked : defaultChecked)),
     _useState2 = _slicedToArray(_useState, 2),
@@ -72,6 +73,7 @@ export var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }), /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, checkboxProps), {}, {
         "aria-checked": indeterminate ? "mixed" : isChecked,
         id: id,
+        "aria-labelledby": labelId,
         className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n              opacity-0 absolute inset-0\n              ", "\n            "])), disabled ? "cursor-not-allowed" : "cursor-pointer"),
         type: "checkbox",
         ref: ref,

package/esm/Dropzone/Dropzone.js

@@ -12,7 +12,7 @@ import { Fragment, useCallback, useMemo, useState } from "react";
 import { useDropzone } from "react-dropzone";
 import { Check, UploadCloud, X } from "react-feather";
 import { IconButton } from "../Button";
-import { useFieldState } from "../Field";
+import { useField } from "../Field";
 import { useLocale } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
 import { formatHumanSize } from "../utils/formatters";
@@ -64,8 +64,9 @@ export var Dropzone = function Dropzone(_ref2) {
     _useState4 = _slicedToArray(_useState3, 2),
     focused = _useState4[0],
     setFocused = _useState4[1];
-  var _useFieldState = useFieldState(),
-    status = _useFieldState.status;
+  var _useField = useField(),
+    status = _useField.state.status,
+    labelId = _useField.labelId;
   var onDrop = useCallback(function (acceptedFiles, fileRejections) {
     var updatedFiles = multiple ? [].concat(_toConsumableArray(files), _toConsumableArray(acceptedFiles)) : acceptedFiles;
     setFiles(updatedFiles);
@@ -104,6 +105,7 @@ export var Dropzone = function Dropzone(_ref2) {
   })), {}, {
     children: [/*#__PURE__*/_jsx("input", _objectSpread({}, getInputProps({
       id: dropzoneId,
+      "aria-labelledby": labelId,
       onFocus: function onFocus() {
         return setFocused(true);
       },

package/esm/Field/Field.d.ts

@@ -1,10 +1,11 @@
-import type { ReactChild, ReactNode, VFC } from "react";
-import type { FieldState } from "./FieldStateContext";
+import { type ReactChild, type ReactNode, type VFC } from "react";
+import type { FieldState } from "./FieldContext";
 export interface FieldProps {
     /** @ignore */
     className?: string;
     /** Label to display above the nested input */
     label?: ReactChild;
+    labelId?: string;
     labelFor?: string;
     /** Helpful description to show below the `Field` */
     description?: ReactNode;

package/esm/Field/Field.js

@@ -1,9 +1,11 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 import cx from "clsx";
+import { useMemo } from "react";
 import { AlertCircle } from "react-feather";
 import stl from "../styles/helpers/satellitePrefixer";
-import FieldStateContext, { DEFAULT_STATE } from "./FieldStateContext";
+import { uniqueId } from "../utils";
+import { DEFAULT_FIELD_STATE, FieldContext } from "./FieldContext";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -44,20 +46,31 @@ export var Field = function Field(_ref) {
   var className = _ref.className,
     label = _ref.label,
     labelFor = _ref.labelFor,
+    labelIdProp = _ref.labelId,
     description = _ref.description,
     _ref$state = _ref.state,
-    state = _ref$state === void 0 ? DEFAULT_STATE : _ref$state,
+    state = _ref$state === void 0 ? DEFAULT_FIELD_STATE : _ref$state,
     _ref$inline = _ref.inline,
     inline = _ref$inline === void 0 ? false : _ref$inline,
     children = _ref.children;
-  return /*#__PURE__*/_jsx(FieldStateContext.Provider, {
-    value: state,
+  var hasLabel = !!label;
+  var labelId = useMemo(
+  // eslint-disable-next-line @algolia/satellite/prefer-stl-helper
+  function () {
+    return hasLabel ? labelIdProp !== null && labelIdProp !== void 0 ? labelIdProp : uniqueId("stl-field-label-") : undefined;
+  }, [labelIdProp, hasLabel]);
+  return /*#__PURE__*/_jsx(FieldContext.Provider, {
+    value: {
+      state: state,
+      labelId: labelId
+    },
     children: /*#__PURE__*/_jsxs("div", {
       className: className,
       children: [/*#__PURE__*/_jsxs("label", {
         className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["cursor-pointer flex ", ""])), !inline && "flex-col"),
         htmlFor: labelFor,
-        children: [!!label && /*#__PURE__*/_jsx("div", {
+        children: [hasLabel && /*#__PURE__*/_jsx("div", {
+          id: labelId,
           className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["truncate ", ""])), inline ? "mr-2" : "mb-1"),
           children: label
         }), /*#__PURE__*/_jsx("div", {

package/esm/Field/FieldContext.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare type FieldState = {
+    status: "default";
+} | {
+    status: "validated";
+} | {
+    status: "invalid";
+    errors: string[];
+};
+export declare type FieldContextValue = {
+    state: FieldState;
+    labelId?: string;
+};
+export declare const DEFAULT_FIELD_STATE: FieldState;
+export declare const DEFAULT_CONTEXT_VALUE: FieldContextValue;
+export declare const FieldContext: import("react").Context<FieldContextValue>;

package/esm/Field/FieldContext.js

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+export var DEFAULT_FIELD_STATE = {
+  status: "default"
+};
+export var DEFAULT_CONTEXT_VALUE = {
+  state: DEFAULT_FIELD_STATE
+};
+export var FieldContext = /*#__PURE__*/createContext(DEFAULT_CONTEXT_VALUE);

package/esm/Field/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./Field";
-export * from "./FieldStateContext";
-export * from "./useFieldState";
+export type { FieldState, FieldContextValue } from "./FieldContext";
+export { FieldContext } from "./FieldContext";
+export * from "./useField";
 export { default } from "./Field";

package/esm/Field/index.js

@@ -1,4 +1,4 @@
 export * from "./Field";
-export * from "./FieldStateContext";
-export * from "./useFieldState";
+export { FieldContext } from "./FieldContext";
+export * from "./useField";
 export { default } from "./Field";

package/esm/Field/useField.d.ts

@@ -0,0 +1,2 @@
+import type { FieldContextValue } from "./FieldContext";
+export declare const useField: () => FieldContextValue;

package/esm/Field/useField.js

@@ -0,0 +1,5 @@
+import { useContext } from "react";
+import { FieldContext } from "./FieldContext";
+export var useField = function useField() {
+  return useContext(FieldContext);
+};

package/esm/Input/Input.js

@@ -10,7 +10,7 @@ import cx from "clsx";
 import { forwardRef, Fragment, useEffect, useState } from "react";
 import { Check, ChevronDown, ChevronUp, Search, X } from "react-feather";
 import { IconButton } from "../Button";
-import useFieldState from "../Field/useFieldState";
+import { useField } from "../Field";
 import { useLocale } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
 import isNil from "../utils/isNil";
@@ -82,8 +82,9 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, externalRef) {
     inputRefCallback = _useForwardedRef2[0],
     inputRef = _useForwardedRef2[1];
   var triggerInputChange = useTriggerInputChange(inputRef);
-  var _useFieldState = useFieldState(),
-    status = _useFieldState.status;
+  var _useField = useField(),
+    status = _useField.state.status,
+    labelId = _useField.labelId;
   var isControlled = ("value" in inputProps);
   var _useState3 = useState(function () {
       return isControlled ? inputProps.value : inputProps.defaultValue;
@@ -115,7 +116,8 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, externalRef) {
     }), /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({
       className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["mx-4 no-search-input-decoration"]))),
       ref: inputRefCallback,
-      type: type
+      type: type,
+      "aria-labelledby": labelId
     }, inputProps), {}, {
       readOnly: readOnly,
       disabled: disabled,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@algolia/satellite",
-  "version": "1.0.0-beta.166",
+  "version": "1.0.0-beta.167",
   "description": "Algolia design system React components",
   "scripts": {
     "clean": "rimraf dist",

package/cjs/Field/FieldStateContext.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-export declare type FieldState = {
-    status: "default";
-} | {
-    status: "validated";
-} | {
-    status: "invalid";
-    errors: string[];
-};
-export declare const DEFAULT_STATE: FieldState;
-export declare const FieldStateContext: import("react").Context<FieldState>;
-export default FieldStateContext;

package/cjs/Field/FieldStateContext.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.FieldStateContext = exports.DEFAULT_STATE = void 0;
-var _react = require("react");
-var DEFAULT_STATE = exports.DEFAULT_STATE = {
-  status: "default"
-};
-var FieldStateContext = exports.FieldStateContext = /*#__PURE__*/(0, _react.createContext)(DEFAULT_STATE);
-var _default = exports["default"] = FieldStateContext;

package/cjs/Field/useFieldState.d.ts

@@ -1,2 +0,0 @@
-export declare const useFieldState: () => import("./FieldStateContext").FieldState;
-export default useFieldState;

package/cjs/Field/useFieldState.js

@@ -1,15 +0,0 @@
-"use strict";
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useFieldState = exports["default"] = void 0;
-var _react = require("react");
-var _FieldStateContext = _interopRequireWildcard(require("./FieldStateContext"));
-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 && Object.prototype.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; }
-var useFieldState = exports.useFieldState = function useFieldState() {
-  return (0, _react.useContext)(_FieldStateContext["default"]) || _FieldStateContext.DEFAULT_STATE;
-};
-var _default = exports["default"] = useFieldState;

package/esm/Field/FieldStateContext.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-export declare type FieldState = {
-    status: "default";
-} | {
-    status: "validated";
-} | {
-    status: "invalid";
-    errors: string[];
-};
-export declare const DEFAULT_STATE: FieldState;
-export declare const FieldStateContext: import("react").Context<FieldState>;
-export default FieldStateContext;

package/esm/Field/FieldStateContext.js

@@ -1,6 +0,0 @@
-import { createContext } from "react";
-export var DEFAULT_STATE = {
-  status: "default"
-};
-export var FieldStateContext = /*#__PURE__*/createContext(DEFAULT_STATE);
-export default FieldStateContext;

package/esm/Field/useFieldState.d.ts

@@ -1,2 +0,0 @@
-export declare const useFieldState: () => import("./FieldStateContext").FieldState;
-export default useFieldState;

package/esm/Field/useFieldState.js

@@ -1,6 +0,0 @@
-import { useContext } from "react";
-import FieldStateContext, { DEFAULT_STATE } from "./FieldStateContext";
-export var useFieldState = function useFieldState() {
-  return useContext(FieldStateContext) || DEFAULT_STATE;
-};
-export default useFieldState;