@algolia/satellite 1.10.2 → 2.0.0-rc.1

package/dist/esm/Avatars/types.d.ts

@@ -1,17 +1,39 @@
-export declare type ApplicationAvatarSize = "small" | "medium";
+export declare const applicationAvatarSizes: readonly ["small", "medium"];
+export declare type ApplicationAvatarSize = (typeof applicationAvatarSizes)[number];
 export declare type MinimalApplication = {
+    /**
+     * The application ID.
+     */
     applicationId: string;
+    /**
+     * The name of the application.
+     */
     name?: string;
 };
 declare type UserAvatarWithName = {
+    /**
+     * The name of the user.
+     */
     name: string;
+    /**
+     * The email of the user.
+     */
     email?: string;
 };
 declare type UserAvatarWithEmail = {
+    /**
+     * The email of the user.
+     */
     email: string;
+    /**
+     * The name of the user.
+     */
     name?: string;
 };
 export declare type MinimalUser = (UserAvatarWithName | UserAvatarWithEmail) & {
+    /**
+     * The avatar of the user.
+     */
     avatar?: string;
 };
 export {};

package/dist/esm/Avatars/types.js

@@ -1 +1 @@
-export {};
+export var applicationAvatarSizes = ["small", "medium"];

package/dist/esm/Fields/AutoComplete/components/AutoCompleteContext.d.ts

@@ -1,10 +1,10 @@
-import type { PropsWithChildren, VFC } from "react";
+import type { FC, PropsWithChildren } from "react";
 import type { AutoCompleteLocale } from "../types";
 declare type AutoCompleteContextType = {
     locale: Required<AutoCompleteLocale>;
 };
 declare type AutoCompleteProviderProps = PropsWithChildren<AutoCompleteContextType>;
-export declare const AutoCompleteProvider: VFC<AutoCompleteProviderProps>;
+export declare const AutoCompleteProvider: FC<AutoCompleteProviderProps>;
 export declare const useIsInsideAutoComplete: () => boolean;
 export declare const useAutoCompleteLocale: () => Required<AutoCompleteLocale>;
 export {};

package/dist/esm/Fields/AutoComplete/components/AutoCompleteEmptyState.d.ts

@@ -1,12 +1,16 @@
-import type { ReactNode, VFC } from "react";
+import type { FC, ReactNode } from "react";
 import type { MedallionVariant } from "../../../Helpers";
 import { type IconComponentType } from "../../../Icons";
 export interface AutoCompleteEmptyStateProps {
     icon?: IconComponentType;
     variant?: MedallionVariant;
-    /** Descriptive title for state */
+    /**
+     * Descriptive title for state
+     */
     title: ReactNode;
-    /** Optional description to explain why the screen is empty or define next steps */
+    /**
+     * Optional description to explain why the screen is empty or define next steps
+     */
     description?: ReactNode;
 }
-export declare const AutoCompleteEmptyState: VFC<AutoCompleteEmptyStateProps>;
+export declare const AutoCompleteEmptyState: FC<AutoCompleteEmptyStateProps>;

package/dist/esm/Fields/AutoComplete/components/DefaultOptionItem.d.ts

@@ -1,6 +1,6 @@
-import type { VFC } from "react";
+import type { FC } from "react";
 import type { AutoCompleteLocale, OptionItemProps } from "../types";
 export declare type DefaultOptionItemProps = OptionItemProps & {
     locale?: AutoCompleteLocale;
 };
-export declare const DefaultOptionItem: VFC<DefaultOptionItemProps>;
+export declare const DefaultOptionItem: FC<DefaultOptionItemProps>;

package/dist/esm/Fields/AutoComplete/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentType, FocusEventHandler, ForwardedRef, ReactNode, RefObject } from "react";
+import type { ComponentType, FocusEventHandler, ForwardedRef, PropsWithChildren, ReactNode, RefObject } from "react";
 import type { IconComponentType } from "../../Icons";
 export declare type AutoCompleteVariant = "medium" | "large";
 export declare type AutoCompleteLocale = {
@@ -10,70 +10,209 @@ export declare type AutoCompleteLocale = {
     optionItemPrefix?: (multiple: boolean) => string;
 };
 export interface AutoCompleteBaseProps<T extends Option = Option> {
+    /**
+     * The id of the `AutoComplete`.
+     */
     id?: string;
+    /**
+     * The aria-label of the `AutoComplete`.
+     */
     "aria-label"?: string;
+    /**
+     * The label id of the `AutoComplete`.
+     */
     labelId?: string;
+    /**
+     * The icon of the `AutoComplete`.
+     */
     icon?: IconComponentType;
+    /**
+     * The name of the `AutoComplete`.
+     */
     name?: string;
+    /**
+     * Whether the `AutoComplete` is required.
+     * @default false
+     */
     required?: boolean;
+    /**
+     * The class name of the `AutoComplete`.
+     */
     className?: string;
+    /**
+     * The class name of the `AutoComplete` values.
+     */
     valuesClassName?: string;
+    /**
+     * The class name of the `AutoComplete` menu.
+     */
     menuClassName?: string;
+    /**
+     * The variant of the `AutoComplete`.
+     * @default "medium"
+     */
     variant?: AutoCompleteVariant;
+    /**
+     * The placeholder of the `AutoComplete`.
+     */
     placeholder?: string;
+    /**
+     * Whether the `AutoComplete` is disabled.
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * Whether the `AutoComplete` should be focused.
+     */
     autoFocus?: boolean;
+    /**
+     * The options of the `AutoComplete`.
+     */
     options?: T[];
+    /**
+     * The current value of the `AutoComplete`.
+     */
     inputValue?: string;
+    /**
+     * The callback function that is called when the text of the `AutoComplete` changes.
+     */
     onTextChange?: (text: string) => any;
+    /**
+     * The callback function that is called when the `AutoComplete` gains focus.
+     */
     onFocus?: FocusEventHandler<HTMLInputElement>;
+    /**
+     * The callback function that is called when the `AutoComplete` loses focus.
+     */
     onBlur?: FocusEventHandler<HTMLInputElement>;
+    /**
+     * Whether the `AutoComplete` is creatable.
+     */
     creatable?: boolean;
+    /**
+     * Whether the `AutoComplete` should clear the input value.
+     */
     clearable?: boolean;
+    /**
+     * Whether the `AutoComplete` should select the option on blur.
+     */
     selectOnBlur?: boolean;
+    /**
+     * The maximum number of results to display in the `AutoComplete` menu.
+     * @default 7
+     */
     maxResults?: number;
+    /**
+     * The function used to create options from the input value.
+     */
     createFromInputValue?: CreateFromInputValue<T>;
+    /**
+     * The keys used to split the input value into multiple options.
+     */
     separatorKeys?: string[];
+    /**
+     * The template used to render the value of the `AutoComplete`.
+     */
     renderValueTemplate?: (args: RenderValueTemplateArgs<T>) => JSX.Element;
+    /**
+     * The empty state of the `AutoComplete`.
+     */
     emptyState?: ReactNode;
+    /**
+     * The footer of the `AutoComplete` menu.
+     */
     menuFooter?: ReactNode;
+    /**
+     * The component used to render the option items.
+     */
     optionItemComponent?: OptionItemComponentType<T>;
-    /** Keep the input on a single line */
+    /**
+     * Whether the input should be kept on a single line.
+     */
     noWrap?: boolean;
+    /**
+     * The end item of the `AutoComplete`.
+     */
     endItem?: ReactNode;
     /**
-     * `medium` will display about 5 results in the dropdown; use `large` variant to display more
+     * The size of the `AutoComplete` menu.
+     * `medium` will display about 5 results in the dropdown; use `large` variant to display more.
      * @default "medium"
      */
     menuSize?: "medium" | "large";
+    /**
+     * The locale of the `AutoComplete`.
+     */
     locale?: AutoCompleteLocale;
-    /** @deprecated Use of this props is discouraged and is only there for backwards compatibility */
+    /**
+     * @deprecated Use of this props is discouraged and is only there for backwards compatibility.
+     */
     internalsRef?: ForwardedRef<AutoCompleteInternals>;
 }
 export interface AutoCompleteInternals {
-    /** Current internal inputValue */
+    /**
+     * Current internal inputValue
+     */
     inputValue: string;
-    /** RefObject containing the underlying combobox input element */
+    /**
+     * RefObject containing the underlying combobox input element
+     */
     inputRef: RefObject<HTMLInputElement>;
 }
 export interface AutoCompleteSingleProps<T extends Option = Option> extends AutoCompleteBaseProps<T> {
+    /**
+     * Whether the `AutoComplete` is a multiple selection.
+     */
     multiple?: false;
+    /**
+     * The value of the `AutoComplete`.
+     */
     value?: T;
+    /**
+     * The callback function that is called when the value of the `AutoComplete` changes.
+     */
     onChange: (option: T | null) => void;
 }
 export interface AutoCompleteMultiProps<T extends Option = Option> extends AutoCompleteBaseProps<T> {
+    /**
+     * Whether the `AutoComplete` is a multiple selection.
+     */
     multiple: true;
+    /**
+     * The value of the `AutoComplete`.
+     */
     value?: T[];
+    /**
+     * The callback function that is called when the value of the `AutoComplete` changes.
+     */
     onChange: (option: T[] | null) => void;
 }
 export declare type AutoCompleteProps<T extends Option = Option> = AutoCompleteMultiProps<T> | AutoCompleteSingleProps<T>;
 declare type OptionsValue = string | number | boolean;
 export interface Option {
+    /**
+     * The value of the `Option`.
+     */
     value: OptionsValue;
+    /**
+     * The label of the `Option`.
+     */
     label: string;
+    /**
+     * The metadata of the `Option`.
+     */
     metadata?: string[];
+    /**
+     * Whether the `Option` is new.
+     */
     new?: boolean;
+    /**
+     * Whether the `Option` is disabled.
+     */
     disabled?: boolean;
+    /**
+     * Whether the `Option` should bypass the needle match.
+     */
     bypassNeedleMatch?: boolean;
 }
 export interface OptionItemProps<T extends Option = Option> {
@@ -82,7 +221,7 @@ export interface OptionItemProps<T extends Option = Option> {
     inputValue: string;
     highlighted: boolean;
 }
-export declare type OptionItemComponentType<T extends Option = Option> = ComponentType<OptionItemProps<T>>;
+export declare type OptionItemComponentType<T extends Option = Option> = ComponentType<PropsWithChildren<OptionItemProps<T>>>;
 export interface OptionRendererParams {
     multiple: boolean;
     inputValue: string;

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

@@ -1,13 +1,16 @@
 import type { HTMLAttributes, InputHTMLAttributes } from "react";
 declare type CheckboxCustomProps = {
     /**
-     * `Checkbox` text position
+     * The text position of the `Checkbox`.
      * @default right
      */
     textPosition?: "left" | "right";
+    /**
+     * Whether the `Checkbox` is indeterminate.
+     */
     indeterminate?: boolean;
     /**
-     * Color of the `Checkbox`
+     * The color of the `Checkbox` when it is checked.
      * @default accent.600
      */
     checkedColor?: string;

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

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import type { DatePickerProps } from "../DatePicker";
+import type { InputProps } from "../Input";
+declare type DateValue = Date | null;
+export declare type DateInputLocale = {
+    tooltip?: (open: boolean) => string;
+};
+export interface DateInputProps extends Omit<InputProps, "type" | "defaultValue" | "value" | "onChange" | "locale" | "endItem"> {
+    /**
+     * Defines the default value of the `DateInput`.
+     */
+    defaultValue?: DateValue;
+    /**
+     * Defines the value of the `DateInput`.
+     */
+    value?: DateValue;
+    /**
+     * Defines the function to call when the `DateInput` value changes.
+     */
+    onChange?: (value: DateValue) => void;
+    /**
+     * Defines the format of the `DateInput` value.
+     * @default "MM/dd/yyyy"
+     */
+    valueFormat?: string;
+    /**
+     * Defines the separator of the `DateInput` value.
+     * @default "/"
+     */
+    separator?: string;
+    /**
+     * Defines the locale of the `DateInput`.
+     */
+    locale?: DateInputLocale;
+    /**
+     * Defines the props to pass to the `DatePicker`.
+     */
+    datePickerProps?: Omit<DatePickerProps, "value" | "onChange" | "renderTarget">;
+}
+/**
+ * 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 declare const DateInput: import("react").ForwardRefExoticComponent<DateInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

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