@algolia/satellite 1.10.2 → 1.11.0

package/dist/cjs/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/cjs/Avatars/types.js

@@ -2,4 +2,6 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+exports.applicationAvatarSizes = void 0;
+var applicationAvatarSizes = exports.applicationAvatarSizes = ["small", "medium"];

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

@@ -4,9 +4,13 @@ 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>;

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

@@ -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> {

package/dist/cjs/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/cjs/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/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

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