@algolia/satellite 1.10.1 → 1.11.0

package/dist/esm/Fields/DateInput/DateInput.js

@@ -0,0 +1,162 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { format, isEqual, isValid, parse, startOfDay } from "date-fns";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { IconButton } from "../../Actions";
+import { CalendarIcon } from "../../Icons";
+import { useLocale } from "../../Satellite";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { DatePicker } from "../DatePicker";
+import { Input } from "../Input";
+import { jsx as _jsx } from "react/jsx-runtime";
+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 = parse(value, format, referenceDate);
+  // See https://github.com/date-fns/date-fns/issues/942#issuecomment-516808982
+  if (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.
+ */
+export var DateInput = /*#__PURE__*/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 = _objectWithoutProperties(_ref, _excluded);
+  // Get localization from context and merge with props and defaults
+  var contextLocale = 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 = useState(defaultValue ? format(defaultValue, valueFormat) : ""),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var _useState3 = useState((_ref2 = controlledValue !== null && controlledValue !== void 0 ? controlledValue : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    internalValue = _useState4[0],
+    setInternalValue = _useState4[1];
+  var isControlled = controlledValue !== undefined;
+  var rawValue = isControlled ? controlledValue : internalValue;
+  var value = rawValue ? startOfDay(rawValue) : null;
+  var oldValue = 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 && isEqual(oldValue.current, date)) {
+      return;
+    }
+    oldValue.current = date;
+    if (!isControlled && date) {
+      setInternalValue(date);
+      setInputValue(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
+  useEffect(function () {
+    if (isControlled && value) {
+      setInputValue(format(value, valueFormat));
+    }
+  }, [isControlled, value, valueFormat]);
+  return /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({
+    value: inputValue,
+    onChange: handleInputChange
+  }, inputProps), {}, {
+    type: "text",
+    onKeyUp: handleInputKeyUp,
+    ref: ref,
+    id: id,
+    placeholder: placeholder,
+    endItem: /*#__PURE__*/_jsx(DatePicker, _objectSpread(_objectSpread({}, datePickerProps), {}, {
+      renderTarget: function renderTarget(_ref3) {
+        var isOpen = _ref3.isOpen,
+          toggle = _ref3.toggle;
+        return /*#__PURE__*/_jsx(IconButton, {
+          disabled: inputProps.disabled,
+          showTooltip: inputProps.disabled ? false : undefined,
+          variant: "subtle",
+          title: locale.tooltip(isOpen),
+          icon: CalendarIcon,
+          className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["-mr-2"]))),
+          onClick: toggle
+        });
+      },
+      modalPlacement: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.modalPlacement) || "bottom-end",
+      popoverAnchor: /*#__PURE__*/_jsx("div", {
+        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["absolute inset-0 pointer-events-none"])))
+      }),
+      value: value,
+      onChange: handleDatePickerChange
+    }))
+  }));
+});
+DateInput.displayName = "DateInput";

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

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

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

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

package/dist/esm/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/esm/Fields/DatePicker/DatePicker/DatePicker.js

@@ -107,6 +107,7 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
       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/esm/Fields/DatePicker/DateRangePicker/DateRangePicker.d.ts

@@ -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;
 /**

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

@@ -188,6 +188,7 @@ export var 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/esm/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/esm/Fields/DatePicker/components/Popover.js

@@ -11,6 +11,7 @@ export var DatePickerPopover = function DatePickerPopover(_ref) {
     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,
@@ -27,7 +28,10 @@ export var DatePickerPopover = function DatePickerPopover(_ref) {
     children: [/*#__PURE__*/_jsx(Popover.Trigger, {
       asChild: true,
       children: trigger
-    }), createPortal( /*#__PURE__*/_jsx(Popover.Content, {
+    }), anchor ? /*#__PURE__*/_jsx(Popover.Anchor, {
+      asChild: true,
+      children: anchor
+    }) : null, createPortal( /*#__PURE__*/_jsx(Popover.Content, {
       side: side,
       sideOffset: 16,
       align: align,

package/dist/esm/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/esm/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/esm/Fields/Field/Field.d.ts

@@ -1,24 +1,47 @@
 import { type ReactChild, type ReactNode, type VFC } 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;
 }
 /**

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

@@ -13,7 +13,7 @@ import * as yup from "yup";
 import { z } from "zod";
 import stl from "../../../styles/helpers/satellitePrefixer";
 import { Field } from "../../Field";
-import { AutoComplete, Checkbox, DatePicker, Dropzone } from "../../index";
+import { AutoComplete, Checkbox, DateInput, Dropzone } from "../../index";
 import { Input } from "../../Input";
 import { RadioButton, RadioGroup } from "../../RadioGroup";
 import { RangeSlider } from "../../RangeSlider";
@@ -98,6 +98,10 @@ var zodSchema = z.object({
         message: "You must specify a birthday"
       };
     }
+  }).refine(function (val) {
+    return val < now;
+  }, {
+    message: "You must specify a birthday in the past"
   }),
   age: z.coerce.number().min(1, {
     message: "You must specify an age"
@@ -367,14 +371,16 @@ export var RHFComplexComponent = function RHFComplexComponent() {
               description: "Please specify your birthday",
               state: getFieldState("birthday"),
               className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["w-full"]))),
-              children: /*#__PURE__*/_jsx(DatePicker, _objectSpread({
+              children: /*#__PURE__*/_jsx(DateInput, _objectSpread({
                 id: "birthday",
-                calendarProps: {
-                  disabled: {
-                    after: now
+                required: true,
+                datePickerProps: {
+                  calendarProps: {
+                    disabled: {
+                      after: now
+                    }
                   }
-                },
-                required: true
+                }
               }, field))
             });
           }
@@ -573,7 +579,9 @@ var yupSchema = yup.object({
     value: yup.string()
   })).min(1, "You must specify at least one job position"),
   employmentStatus: yup.string().oneOf(employmentStatuses).required("You must specify an employment status"),
-  birthday: yup.date().required("You must specify a birthday"),
+  birthday: yup.date().required("You must specify a birthday").test("birthday", "You must specify a birthday in the past", function (value) {
+    return value < now;
+  }),
   age: yup.number().min(18, "You must be at least 18 years old").max(100, "You must be at most 100 years old").required("You must specify an age"),
   interest: yup.number().min(5, "Your level of interest must be at least 5").required(),
   idealLocation: yup.array(yup.number().min(10, "Your minimum ideal location must be 10 km").max(40, "Your maximum ideal location must be 40 km").required()).required(),
@@ -764,14 +772,16 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           description: "Please specify your birthday",
           state: getFieldState("birthday"),
           className: stl(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["w-full"]))),
-          children: /*#__PURE__*/_jsx(DatePicker, {
+          children: /*#__PURE__*/_jsx(DateInput, {
             id: "birthday",
-            calendarProps: {
-              disabled: {
-                after: now
+            required: true,
+            datePickerProps: {
+              calendarProps: {
+                disabled: {
+                  after: now
+                }
               }
             },
-            required: true,
             onChange: function onChange(value) {
               return formik.setFieldValue("birthday", value);
             },

package/dist/esm/Fields/Input/Input.d.ts

@@ -8,15 +8,32 @@ export declare type InputPropsLocale = {
     decrement?: string;
 };
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "checked" | "defaultChecked"> {
+    /**
+     * Define the type of the `Input`.
+     * @default "text"
+     */
     type?: "text" | "number" | "search" | "email" | "password";
+    /**
+     * Define the variant of the `Input`.
+     * @default "medium"
+     */
     variant?: InputVariant;
+    /**
+     * Define the start icon of the `Input`.
+     */
     startIcon?: IconComponentType;
+    /**
+     * Define the end item of the `Input`.
+     */
     endItem?: ReactNode;
     /**
-     * Define whether or not a "clear input" x button should show on hover
+     * Define whether or not a "clear input" x button should show on hover.
      * @default false
      */
     clearable?: boolean;
+    /**
+     * Define the locale of the `Input`.
+     */
     locale?: InputPropsLocale;
 }
 /**

package/dist/esm/Fields/Input/Input.js

@@ -109,9 +109,11 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, externalRef) {
   return /*#__PURE__*/_jsxs("div", {
     className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n            input group\n            ", "\n            ", "\n          "])), focused && "focusable-show", disabled && "input-disabled"), VARIANT_CLASSNAMES[variant], STATUS_CLASSNAMES[status], className),
     style: style,
-    onClick: function onClick() {
-      var _inputRef$current;
-      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    onClick: function onClick(e) {
+      if (e.currentTarget.contains(e.target)) {
+        var _inputRef$current;
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+      }
     },
     children: [Icon && /*#__PURE__*/_jsx(Icon, {
       className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["ml-4 shrink-0 ", ""])), disabled ? "text-grey-200" : focused ? "text-accent-600" : "text-grey-500"),