@algolia/satellite 1.10.2 → 2.0.0-rc.1

package/dist/cjs/Fields/DateInput/DateInput.js

@@ -0,0 +1,169 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DateInput = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _dateFns = require("date-fns");
+var _react = require("react");
+var _Actions = require("../../Actions");
+var _Icons = require("../../Icons");
+var _Satellite = require("../../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _DatePicker = require("../DatePicker");
+var _Input = require("../Input");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2;
+var _excluded = ["id", "defaultValue", "value", "onChange", "valueFormat", "placeholder", "separator", "locale", "datePickerProps"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DEFAULT_DATE_INPUT_LOCALE = {
+  tooltip: function tooltip(open) {
+    return "".concat(open ? "Close" : "Open", " date picker");
+  }
+};
+var NOW = new Date();
+/**
+ * Parses and validates a date string
+ * @param {string} value - The date string to parse
+ * @param {string} format - The expected format of the date string
+ * @param {Date} referenceDate - A reference date to use for parsing
+ * @returns {Date | null} The parsed Date object if valid, null otherwise
+ */
+var parseAndValidateDate = function parseAndValidateDate(value, format, referenceDate) {
+  var date = (0, _dateFns.parse)(value, format, referenceDate);
+  // See https://github.com/date-fns/date-fns/issues/942#issuecomment-516808982
+  if ((0, _dateFns.isValid)(date) && value.length === format.length) {
+    return date;
+  }
+  return null;
+};
+
+/**
+ * The `DateInput` component provides a date input field with an integrated date picker.
+ * It allows users to either type a date manually or select one from a calendar interface.
+ *
+ * See the [DateInput documentation page](https://satellite.algolia.com/components/forms/date-input) for more information.
+ */
+var DateInput = exports.DateInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _ref2;
+  var id = _ref.id,
+    defaultValue = _ref.defaultValue,
+    controlledValue = _ref.value,
+    onChange = _ref.onChange,
+    _valueFormat = _ref.valueFormat,
+    _placeholder = _ref.placeholder,
+    _ref$separator = _ref.separator,
+    separator = _ref$separator === void 0 ? "/" : _ref$separator,
+    propsLocale = _ref.locale,
+    datePickerProps = _ref.datePickerProps,
+    inputProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  // Get localization from context and merge with props and defaults
+  var contextLocale = (0, _Satellite.useLocale)("dateInput");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DATE_INPUT_LOCALE), contextLocale), propsLocale);
+
+  // Defaults
+  var valueFormat = _valueFormat || "MM".concat(separator, "dd").concat(separator, "yyyy");
+  var placeholder = _placeholder || "mm".concat(separator, "dd").concat(separator, "yyyy");
+
+  // State for input value and internal date value
+  var _useState = (0, _react.useState)(defaultValue ? (0, _dateFns.format)(defaultValue, valueFormat) : ""),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var _useState3 = (0, _react.useState)((_ref2 = controlledValue !== null && controlledValue !== void 0 ? controlledValue : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : null),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    internalValue = _useState4[0],
+    setInternalValue = _useState4[1];
+  var isControlled = controlledValue !== undefined;
+  var rawValue = isControlled ? controlledValue : internalValue;
+  var value = rawValue ? (0, _dateFns.startOfDay)(rawValue) : null;
+  var oldValue = (0, _react.useRef)(value);
+
+  /**
+   * Handles changes to the `DateInput` input field
+   */
+  var handleInputChange = function handleInputChange(e) {
+    var value = e.currentTarget.value;
+    setInputValue(value);
+    var date = parseAndValidateDate(value, valueFormat, NOW);
+    setInternalValue(date);
+    onChange === null || onChange === void 0 || onChange(date);
+  };
+
+  /**
+   * Handles changes from the `DateInput` date picker
+   */
+  var handleDatePickerChange = function handleDatePickerChange(date) {
+    // We do this because the DatePicker call this callback twice
+    if (oldValue.current && date && (0, _dateFns.isEqual)(oldValue.current, date)) {
+      return;
+    }
+    oldValue.current = date;
+    if (!isControlled && date) {
+      setInternalValue(date);
+      setInputValue((0, _dateFns.format)(date, valueFormat));
+    }
+    onChange === null || onChange === void 0 || onChange(date);
+  };
+
+  /**
+   * Handles the `DateInput` value key up event
+   */
+  var handleInputKeyUp = function handleInputKeyUp(e) {
+    if (e.key === "Backspace" || e.key === "Delete") {
+      return;
+    }
+    var value = e.currentTarget.value;
+    var valueLength = value.length;
+    if (valueLength === 2 || valueLength === 5) {
+      setInputValue(function (v) {
+        return v + separator;
+      });
+    }
+  };
+
+  // Update input value when controlled value changes
+  (0, _react.useEffect)(function () {
+    if (isControlled && value) {
+      setInputValue((0, _dateFns.format)(value, valueFormat));
+    }
+  }, [isControlled, value, valueFormat]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
+    value: inputValue,
+    onChange: handleInputChange
+  }, inputProps), {}, {
+    type: "text",
+    onKeyUp: handleInputKeyUp,
+    ref: ref,
+    id: id,
+    placeholder: placeholder,
+    endItem: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker.DatePicker, _objectSpread(_objectSpread({}, datePickerProps), {}, {
+      renderTarget: function renderTarget(_ref3) {
+        var isOpen = _ref3.isOpen,
+          toggle = _ref3.toggle;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.IconButton, {
+          disabled: inputProps.disabled,
+          showTooltip: inputProps.disabled ? false : undefined,
+          variant: "subtle",
+          title: locale.tooltip(isOpen),
+          icon: _Icons.CalendarIcon,
+          className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["-mr-2"]))),
+          onClick: toggle
+        });
+      },
+      modalPlacement: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.modalPlacement) || "bottom-end",
+      popoverAnchor: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["absolute inset-0 pointer-events-none"])))
+      }),
+      value: value,
+      onChange: handleDatePickerChange
+    }))
+  }));
+});
+DateInput.displayName = "DateInput";

package/dist/cjs/Fields/DateInput/index.d.ts

@@ -0,0 +1 @@
+export * from "./DateInput";

package/dist/cjs/Fields/DateInput/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _DateInput = require("./DateInput");
+Object.keys(_DateInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DateInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DateInput[key];
+    }
+  });
+});

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

@@ -17,19 +17,61 @@ interface RenderTargetParams {
     isOpen: boolean;
 }
 export declare type DatePickerProps = {
+    /**
+     * The id of the `DatePicker`.
+     */
     id?: string;
+    /**
+     * The props of the `DatePicker` calendar.
+     */
     calendarProps?: Pick<DatePickerCalendarProps, "fromMonth" | "toMonth" | "disabled">;
+    /**
+     * The callback function that is called when the `DatePicker` is opened.
+     */
     onOpen?: DatePickerDisplayProps["onClick"];
+    /**
+     * The callback function that is called when the `DatePicker` is changed.
+     */
     onChange?: (value: Date | null) => void;
+    /**
+     * The callback function that is called when the `DatePicker` is submitted.
+     */
     onSubmit?: (event: MouseEvent<HTMLButtonElement>, value: Date | null) => void;
+    /**
+     * The callback function that is called when the `DatePicker` is canceled.
+     */
     onCancel?: DatePickerFooterActionsProps["onCancel"];
+    /**
+     * The callback function that is called to validate the `DatePicker`.
+     */
     validate?: (state: DatePickerReducerState) => Error[] | null;
+    /**
+     * The callback function that is called to render the left footer of the `DatePicker`.
+     */
     renderLeftFooter?: (args: LeftFooterComponentArgs) => ReactNode;
+    /**
+     * The callback function that is called to render the right panel of the `DatePicker`.
+     */
     renderRightPanel?: (args: RightSidePanelComponentArgs) => ReactNode;
+    /**
+     * The callback function that is called to render the target of the `DatePicker`.
+     */
     renderTarget?: (args: RenderTargetParams) => ReactNode;
+    /**
+     * The value of the `DatePicker`.
+     */
     value?: Date | null;
+    /**
+     * The initial value of the `DatePicker`.
+     */
     initialValue?: Date | null;
+    /**
+     * The size of the `DatePicker` button.
+     */
     buttonSize?: DatePickerDisplayProps["size"];
+    /**
+     * Whether the `DatePicker` is required.
+     */
     required?: boolean;
 } & SharedDatePickerProps;
 /**

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

@@ -114,6 +114,7 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
       evt.preventDefault();
       (_cancelElementRef$cur = cancelElementRef.current) === null || _cancelElementRef$cur === void 0 || _cancelElementRef$cur.focus();
     },
+    anchor: props.popoverAnchor,
     trigger: props.renderTarget ? props.renderTarget({
       toggle: state.show ? handleClose : handleOpen,
       isOpen: state.show

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

@@ -1,4 +1,4 @@
-import type { Dispatch, ReactNode, VFC } from "react";
+import type { Dispatch, FC, ReactNode } from "react";
 import type { DatePickerCalendarProps } from "../components/Calendar";
 import type { SharedDatePickerProps } from "../types";
 import type { DateRangePickerDisplayProps } from "./DateRangePickerDisplay";
@@ -18,17 +18,53 @@ interface RenderTargetParams {
     isOpen: boolean;
 }
 export declare type DateRangePickerProps = {
+    /**
+     * The id of the `DateRangePicker`.
+     */
     id?: string;
+    /**
+     * The range of the `DateRangePicker`.
+     */
     range: DateRangePickerTimeRange | null;
+    /**
+     * The ranges to only display in the `DateRangePicker`.
+     */
     displayOnlyRanges?: DateRangePickerTimeRange[];
+    /**
+     * The props of the `DateRangePicker` calendar.
+     */
     calendarProps?: Pick<DatePickerCalendarProps, "fromMonth" | "toMonth" | "disabled" | "numberOfMonths">;
+    /**
+     * The reducer of the `DateRangePicker`.
+     */
     stateReducer?: (state: DateRangePickerReducerState, action: DateRangePickerReducerAction, defaultReducer: typeof dateRangePickerReducer) => DateRangePickerReducerState;
+    /**
+     * The initial state of the `DateRangePicker`.
+     */
     initialState?: Partial<DateRangePickerReducerState>;
+    /**
+     * The callback function that is called when the `DateRangePicker` is changed.
+     */
     onAction?: (action: DateRangePickerReducerAction, state: DateRangePickerReducerState) => void;
+    /**
+     * The callback function that is called to validate the `DateRangePicker`.
+     */
     validate?: (state: DateRangePickerReducerState) => Error[] | null;
+    /**
+     * The callback function that is called to render the target of the `DateRangePicker`.
+     */
     renderTarget?: (args: RenderTargetParams) => ReactNode;
+    /**
+     * The callback function that is called to render the left footer of the `DateRangePicker`.
+     */
     renderLeftFooter?: (args: LeftFooterComponentArgs) => ReactNode;
+    /**
+     * The callback function that is called to render the right panel of the `DateRangePicker`.
+     */
     renderRightPanel?: (args: RightSidePanelComponentArgs) => ReactNode;
+    /**
+     * The size of the `DateRangePicker` button.
+     */
     buttonSize?: DateRangePickerDisplayProps["buttonSize"];
 } & SharedDatePickerProps;
 /**
@@ -36,5 +72,5 @@ export declare type DateRangePickerProps = {
  *
  * See the [Date Range Picker documentation page](https://satellite.algolia.com/layouts/date-range-picker) for more information.
  */
-export declare const DateRangePicker: VFC<DateRangePickerProps>;
+export declare const DateRangePicker: FC<DateRangePickerProps>;
 export {};

package/dist/cjs/Fields/DatePicker/DateRangePicker/DateRangePicker.js

@@ -195,6 +195,7 @@ var DateRangePicker = exports.DateRangePicker = function DateRangePicker(_ref2)
       evt.preventDefault();
       (_cancelElementRef$cur = cancelElementRef.current) === null || _cancelElementRef$cur === void 0 || _cancelElementRef$cur.focus();
     },
+    anchor: props.popoverAnchor,
     trigger: renderTarget ? renderTarget({
       toggle: state.show ? handleClose : handleOpen,
       isOpen: state.show

package/dist/cjs/Fields/DatePicker/components/Calendar.d.ts

@@ -1,4 +1,4 @@
-import type { VFC } from "react";
+import type { FC } from "react";
 import type { DayPickerDefaultProps, DayPickerRangeProps, DayPickerSingleProps } from "react-day-picker";
 import type { WithRequiredProperty } from "../../../types";
 import type { DatePickerLocale } from "../types";
@@ -13,5 +13,5 @@ export declare type EditableYearProps = {
 export declare type DatePickerCalendarProps = Omit<Omit<DayPickerSingleProps | DayPickerRangeProps | DayPickerDefaultProps, "locale">, ExcludedDayPickerProps> & EditableYearProps & {
     locale: WithRequiredProperty<DatePickerLocale, "nextMonth" | "previousMonth">;
 };
-export declare const DatePickerCalendar: VFC<DatePickerCalendarProps>;
+export declare const DatePickerCalendar: FC<DatePickerCalendarProps>;
 export {};

package/dist/cjs/Fields/DatePicker/components/Footer.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode, VFC } from "react";
+import type { FC, ReactNode } from "react";
 export declare type DatePickerFooterProps = {
     children: ReactNode;
 };
-export declare const DatePickerFooter: VFC<DatePickerFooterProps>;
+export declare const DatePickerFooter: FC<DatePickerFooterProps>;

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

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/Fields/DatePicker/components/NavBar.d.ts

@@ -1,4 +1,4 @@
-import type { VFC } from "react";
+import type { FC } from "react";
 import type { CaptionProps } from "react-day-picker";
 import type { WithRequiredProperty } from "../../../types";
 import type { DatePickerLocale } from "../types";
@@ -6,4 +6,4 @@ import type { EditableYearProps } from "./Calendar";
 export declare type NavBarProps = CaptionProps & EditableYearProps & {
     locale: WithRequiredProperty<DatePickerLocale, "nextMonth" | "previousMonth">;
 };
-export declare const NavBar: VFC<NavBarProps>;
+export declare const NavBar: FC<NavBarProps>;

package/dist/cjs/Fields/DatePicker/components/Popover.d.ts

@@ -5,6 +5,7 @@ export interface DatePickerPopoverProps {
     onOpenChange: (open: boolean) => void;
     trigger: ReactNode;
     children: ReactNode;
+    anchor?: ReactNode;
     placement?: Popover.PopoverContentProps["side"] | `${Popover.PopoverContentProps["side"] & string}-${Popover.PopoverContentProps["align"] & string}`;
     onOpenAutoFocus?: (event: Event) => void;
     title?: string;

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

@@ -21,6 +21,7 @@ var DatePickerPopover = exports.DatePickerPopover = function DatePickerPopover(_
     onOpenChange = _ref.onOpenChange,
     trigger = _ref.trigger,
     children = _ref.children,
+    anchor = _ref.anchor,
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? "bottom-start" : _ref$placement,
     onOpenAutoFocus = _ref.onOpenAutoFocus,
@@ -37,7 +38,10 @@ var DatePickerPopover = exports.DatePickerPopover = function DatePickerPopover(_
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Popover.Trigger, {
       asChild: true,
       children: trigger
-    }), createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(Popover.Content, {
+    }), anchor ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Popover.Anchor, {
+      asChild: true,
+      children: anchor
+    }) : null, createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(Popover.Content, {
       side: side,
       sideOffset: 16,
       align: align,

package/dist/cjs/Fields/DatePicker/components/SidePanel.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode, VFC } from "react";
+import type { FC, ReactNode } from "react";
 export declare type DatePickerSidePanelProps = {
     children: ReactNode;
 };
-export declare const DatePickerSidePanel: VFC<DatePickerSidePanelProps>;
+export declare const DatePickerSidePanel: FC<DatePickerSidePanelProps>;

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

@@ -1,4 +1,5 @@
 import type { Locale as DateFnsLocale } from "date-fns";
+import type { ReactNode } from "react";
 import type { DatePickerPopoverProps } from "./components";
 export declare type DatePickerLocale = {
     /** The date-fns locale object used to localize dates. Defaults to* `en-US`. */
@@ -17,11 +18,31 @@ export declare type DatePickerLocale = {
     title?: string;
 };
 export declare type SharedDatePickerProps = {
+    /**
+     * The placement of the `DatePicker`/`DateRangePicker` modal.
+     * @todo Rename this prop to `side`/`align` in the next major version
+     */
     modalPlacement?: DatePickerPopoverProps["placement"];
+    /**
+     * The anchor element for the `DatePicker`/`DateRangePicker` popover.
+     */
+    popoverAnchor?: ReactNode;
+    /**
+     * The locale of the `DatePicker`/`DateRangePicker`.
+     */
     locale?: DatePickerLocale;
 } & ({
+    /**
+     * Whether the year is editable.
+     */
     editableYear?: false;
 } | {
+    /**
+     * Whether the year is editable.
+     */
     editableYear: true;
+    /**
+     * The years to display in the `DatePicker`/`DateRangePicker`.
+     */
     years?: number[];
 });

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

@@ -5,23 +5,102 @@ export declare type DropzoneLocale = {
     placeholder?: (multiple: boolean) => string;
 };
 export interface DropzoneBaseProps {
+    /**
+     * The id of the `Dropzone`.
+     */
     id?: string;
+    /**
+     * The callback function that is called when files are added to the `Dropzone`.
+     */
     onChange?(acceptedFiles: File[], fileRejections: FileRejection[]): void;
+    /**
+     * The placeholder of the `Dropzone`.
+     */
     placeholder?: string;
-    /** @default false */
+    /**
+     * Whether the `Dropzone` is clearable.
+     * @default false
+     */
     clearable?: boolean;
-    /** @ignore */
+    /**
+     * The class name of the `Dropzone`.
+     */
     className?: string;
-    /** @default false */
+    /**
+     * Whether the `Dropzone` allows multiple files.
+     * @default false
+     */
     multiple?: boolean;
-    /** @default false */
+    /**
+     * Whether the `Dropzone` is required.
+     * @default false
+     */
     required?: boolean;
+    /**
+     * The locale of the `Dropzone`.
+     */
     locale?: DropzoneLocale;
+    /**
+     * The accepted file types of the `Dropzone`.
+     */
+    accept?: ReactDropZoneProps["accept"];
+    /**
+     * The minimum file size of the `Dropzone`.
+     */
+    minSize?: ReactDropZoneProps["minSize"];
+    /**
+     * The maximum file size of the `Dropzone`.
+     */
+    maxSize?: ReactDropZoneProps["maxSize"];
+    /**
+     * The maximum number of files of the `Dropzone`.
+     */
+    maxFiles?: ReactDropZoneProps["maxFiles"];
+    /**
+     * Whether the `Dropzone` prevents the drop event on the document.
+     */
+    preventDropOnDocument?: ReactDropZoneProps["preventDropOnDocument"];
+    /**
+     * Whether the `Dropzone` prevents the click event on the document.
+     */
+    noClick?: ReactDropZoneProps["noClick"];
+    /**
+     * Whether the `Dropzone` prevents the keyboard event on the document.
+     */
+    noKeyboard?: ReactDropZoneProps["noKeyboard"];
+    /**
+     * Whether the `Dropzone` prevents the drag event on the document.
+     */
+    noDrag?: ReactDropZoneProps["noDrag"];
+    /**
+     * Whether the `Dropzone` prevents the drag events bubbling.
+     */
+    noDragEventsBubbling?: ReactDropZoneProps["noDragEventsBubbling"];
+    /**
+     * Whether the `Dropzone` is disabled.
+     */
+    disabled?: ReactDropZoneProps["disabled"];
+    /**
+     * The callback function that is called to get the files from the event.
+     */
+    getFilesFromEvent?: ReactDropZoneProps["getFilesFromEvent"];
+    /**
+     * The callback function that is called when the file dialog is canceled.
+     */
+    onFileDialogCancel?: ReactDropZoneProps["onFileDialogCancel"];
+    /**
+     * The callback function that is called when the file dialog is opened.
+     */
+    onFileDialogOpen?: ReactDropZoneProps["onFileDialogOpen"];
+    /**
+     * The callback function that is called to validate the file.
+     */
+    validator?: ReactDropZoneProps["validator"];
 }
-export declare type DropzoneProps = DropzoneBaseProps & Omit<ReactDropZoneProps, "onDrop" | "onDropAccepted" | "onDropRejected" | "multiple">;
+export declare type DropzoneProps = DropzoneBaseProps;
 /**
  * The `Dropzone` component is used to upload files.
  *
  * See the [Dropzone documentation page](https://satellite.algolia.com/components/forms/dropzone) for more information.
  */
-export declare const Dropzone: import("react").ForwardRefExoticComponent<DropzoneBaseProps & Omit<ReactDropZoneProps, "onDrop" | "multiple" | "onDropAccepted" | "onDropRejected"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Dropzone: import("react").ForwardRefExoticComponent<DropzoneBaseProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/cjs/Fields/Field/Field.d.ts

@@ -1,24 +1,47 @@
-import { type ReactChild, type ReactNode, type VFC } from "react";
+import { type FC, type ReactChild, type ReactNode } from "react";
 import type { FieldState } from "./FieldContext";
 export interface FieldProps {
-    /** @ignore */
+    /**
+     * The class name of the `Field`.
+     */
     className?: string;
-    /** Define a label to display above the nested input. */
+    /**
+     * Define a label to display above the nested input.
+     */
     label?: ReactChild;
-    /** Define the `id` of the label. */
+    /**
+     * Define the `id` of the label.
+     */
     labelId?: string;
-    /** Define the `id` of the input used by the label. */
+    /**
+     * Define the `id` of the input used by the label.
+     */
     labelFor?: string;
-    /** Define an helpful description to show below the `Field`. */
+    /**
+     * Define an helpful description to show below the `Field`.
+     */
     description?: ReactNode;
-    /** Define the state of the `Field`. */
+    /**
+     * Define the state of the `Field`.
+     */
     state?: FieldState;
-    /** Define if the `Field` should be displayed inline. */
+    /**
+     * Define if the `Field` should be displayed inline.
+     * @default false
+     */
     inline?: boolean;
-    /** Define if the `Field` is required. */
+    /**
+     * Define if the `Field` is required.
+     */
     required?: boolean;
-    /** Define the visibility of the required indicator. */
+    /**
+     * Define the visibility of the required indicator.
+     * @default false
+     */
     hideRequiredIndicator?: boolean;
+    /**
+     * The children of the `Field`.
+     */
     children: ReactNode;
 }
 /**
@@ -26,4 +49,4 @@ export interface FieldProps {
  *
  * See the [Field documentation page](https://satellite.algolia.com/components/forms/field) for more information.
  */
-export declare const Field: VFC<FieldProps>;
+export declare const Field: FC<FieldProps>;

package/dist/cjs/Fields/Form/Form.d.ts

@@ -1,4 +1,4 @@
-import type { FC, HTMLAttributes, ReactNode, VFC } from "react";
+import type { FC, HTMLAttributes, PropsWithChildren, ReactNode } from "react";
 import type { ButtonProps } from "../../Actions";
 import type { AlertProps } from "../../Indicators";
 import type { FormContextField } from "./FormContext";
@@ -12,7 +12,7 @@ export interface FormErrorMessageProps extends Omit<AlertProps, "children"> {
     locale?: FormLocale;
     extraErrors?: string[];
 }
-export declare const FormErrorMessage: VFC<FormErrorMessageProps>;
-export declare const Form: FC<FormProps>;
-export declare const FormSubmit: FC<ButtonProps>;
-export declare const FormReset: FC<ButtonProps>;
+export declare const FormErrorMessage: FC<FormErrorMessageProps>;
+export declare const Form: FC<PropsWithChildren<FormProps>>;
+export declare const FormSubmit: FC<PropsWithChildren<ButtonProps>>;
+export declare const FormReset: FC<PropsWithChildren<ButtonProps>>;