@algolia/satellite 1.8.0 → 1.10.0

package/dist/esm/Actions/index.js

@@ -1,4 +1,4 @@
-export { Accordion as ExperimentalAccordion } from "./Accordion/Accordion";
+export * from "./Accordion/Accordion";
 export * from "./Button/Button";
 export * from "./ButtonGroup/ButtonGroup";
 export * from "./ButtonLink/ButtonLink";
@@ -6,4 +6,5 @@ export * from "./IconButton/IconButton";
 export * from "./IconButtonLink/IconButtonLink";
 export * from "./Switch";
 export * from "./ToggleButton/ToggleButton";
-export * from "./ToggleGroup/ToggleGroup";
+export * from "./ToggleGroup/ToggleGroup";
+export {};

package/dist/esm/Fields/AutoComplete/AutoComplete.js

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31;
 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 cx from "clsx";
@@ -378,16 +378,16 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
             type: "text",
             placeholder: hasValue ? "" : placeholder,
             autoComplete: "off",
-            className: cx(stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["autocomplete-input py-1.5"]))), multiple && stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["ml-1"]))), shouldRenderCustomTemplate && hasValue && stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["h-0 w-0 opacity-0"]))))
+            className: cx(stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["autocomplete-input"]))), multiple && stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["ml-1"]))), shouldRenderCustomTemplate && hasValue ? stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["h-0 w-0 opacity-0"]))) : stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["py-1.5"]))))
           }))]
         }), Boolean(showClearButton || endItem) && /*#__PURE__*/_jsxs("div", {
-          className: cx(showClearButton && endItem && stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["my-2 flex self-end space-x-4"])))),
+          className: cx(showClearButton && endItem && stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["my-2 flex self-end space-x-4"])))),
           children: [!!endItem && /*#__PURE__*/_jsx("div", {
-            className: stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["text-grey-700 my-auto"]))),
+            className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["text-grey-700 my-auto"]))),
             children: endItem
           }), showClearButton && /*#__PURE__*/_jsx("button", {
             type: "button",
-            className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["w-6 h-6 flex items-center justify-center text-grey-500"]))),
+            className: stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["w-6 h-6 flex items-center justify-center text-grey-500"]))),
             onClick: function onClick() {
               setInternalInputValue("");
               multipleSelection.setSelectedItems([]);
@@ -401,7 +401,7 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }), createPortal( /*#__PURE__*/_jsx(ClickAwayContainer, {
         element: menuRef.current,
         children: /*#__PURE__*/_jsxs(Card, _objectSpread(_objectSpread({}, menuPopper.attributes), {}, {
-          className: cx(stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["z-dropdown"]))), menuClassName),
+          className: cx(stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["z-dropdown"]))), menuClassName),
           style: _objectSpread(_objectSpread(_objectSpread({}, menuPopper.styles.popper), hideMenu && {
             display: "none"
           }), {}, {
@@ -412,7 +412,7 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
           elevation: "300",
           fullBleed: true,
           children: [hideMenu ? /*#__PURE__*/_jsx("div", _objectSpread({}, combobox.getMenuProps())) : items.length === 0 ? /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, combobox.getMenuProps({
-            className: stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["min-h-10"])))
+            className: stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["min-h-10"])))
           })), {}, {
             children: /*#__PURE__*/_jsx("div", {
               role: "option",
@@ -423,15 +423,15 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
               })
             })
           })) : /*#__PURE__*/_jsx(ScrollIndicator, {
-            className: menuSize === "large" ? stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["max-h-96"]))) : stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["max-h-64"]))),
+            className: menuSize === "large" ? stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["max-h-96"]))) : stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["max-h-64"]))),
             children: /*#__PURE__*/_jsx("ul", _objectSpread(_objectSpread({}, combobox.getMenuProps()), {}, {
               children: items.map(function (item, index) {
                 return /*#__PURE__*/_jsx("li", _objectSpread(_objectSpread({}, combobox.getItemProps({
                   item: item,
-                  className: cx(stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["autocomplete-result flex items-center min-h-10 px-4 cursor-pointer"]))), index === combobox.highlightedIndex && stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["bg-grey-100"]))), item.disabled && stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["cursor-not-allowed"]))))
+                  className: cx(stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["autocomplete-result flex items-center min-h-10 px-4 cursor-pointer"]))), index === combobox.highlightedIndex && stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["bg-grey-100"]))), item.disabled && stl(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["cursor-not-allowed"]))))
                 })), {}, {
                   children: item.value === SHOW_ALL_ITEMS_ID ? /*#__PURE__*/_jsx("span", {
-                    className: stl(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["w-full py-2 truncate text-center text-grey-900"]))),
+                    className: stl(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["w-full py-2 truncate text-center text-grey-900"]))),
                     children: item.label
                   }, item.value) : /*#__PURE__*/_jsx(OptionItem, {
                     multiple: Boolean(multiple),
@@ -443,7 +443,7 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
               })
             }))
           }), !!menuFooter && /*#__PURE__*/_jsx("footer", {
-            className: stl(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["flex items-center justify-center min-h-12 p-4 bg-grey-100 border-t border-grey-200 text-grey-600"]))),
+            className: stl(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["flex items-center justify-center min-h-12 p-4 bg-grey-100 border-t border-grey-200 text-grey-600"]))),
             children: menuFooter
           })]
         }))

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

@@ -1,10 +1,10 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3;
 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 { forwardRef, useMemo, useReducer, useState } from "react";
+import { forwardRef, useMemo, useReducer, useRef } from "react";
 import { useLocale } from "../../../Satellite";
 import stl from "../../../styles/helpers/satellitePrefixer";
 import { useField } from "../../Field";
@@ -12,11 +12,11 @@ import { DatePickerCalendar } from "../components/Calendar";
 import { DatePickerDisplay } from "../components/Display";
 import { DatePickerFooter } from "../components/Footer";
 import { DatePickerFooterActions } from "../components/FooterActions";
-import { DatePickerModal } from "../components/Modal";
+import { DatePickerPopover } from "../components/Popover";
 import { DatePickerSidePanel } from "../components/SidePanel";
 import { DEFAULT_DATE_PICKER_LOCALE, formatDate } from "../utils";
 import { DatePickerActionTypes, datePickerReducer, initDatePickerReducer } from "./datePickerReducer";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * The `DatePicker` component allows users to easily select a date, featuring a calendar view, month/year navigation, and custom options.
  *
@@ -26,10 +26,6 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$initialValue, _props$validate, _props$id, _props$calendarProps;
   var contextLocale = useLocale("datePicker");
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DATE_PICKER_LOCALE), contextLocale), props.locale);
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    targetElement = _useState2[0],
-    setTargetElement = _useState2[1];
   var isControlled = props.value !== undefined;
   var _useReducer = useReducer(datePickerReducer, isControlled ? {} : {
       selected: (_props$initialValue = props.initialValue) !== null && _props$initialValue !== void 0 ? _props$initialValue : null
@@ -94,79 +90,76 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     status = _useField.state.status,
     inputId = _useField.inputId;
   var isInvalid = status === "invalid";
-  return /*#__PURE__*/_jsxs("div", {
-    children: [/*#__PURE__*/_jsx("span", {
-      ref: setTargetElement,
-      className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["inline-block"]))),
-      children: props.renderTarget ? props.renderTarget({
-        toggle: state.show ? handleClose : handleOpen,
-        isOpen: state.show
-      }) : /*#__PURE__*/_jsx(DatePickerDisplay, {
-        id: (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : inputId,
-        ref: ref,
-        onClick: state.show ? handleClose : handleOpen,
-        size: props.buttonSize,
-        className: isInvalid ? stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["border-red-700 bg-red-100 bg-none focus:outline-1 focus:outline focus:outline-red-700 focus:shadow-none focus:bg-none focus:bg-red-100 focus:border-red-700 hover:border-red-700 hover:bg-red-50 hover:bg-none"]))) : undefined,
-        children: value ? /*#__PURE__*/_jsx("time", {
-          dateTime: value.toISOString(),
-          children: formatDate(value)
-        }) : locale.openButton
-      })
-    }), /*#__PURE__*/_jsx(DatePickerModal, {
-      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["date-picker"]))),
-      show: state.show,
-      onClickAway: function onClickAway(evt) {
-        if (!(targetElement !== null && targetElement !== void 0 && targetElement.contains(evt.target))) {
-          dispatch({
-            type: DatePickerActionTypes.show,
-            payload: false
-          });
-        }
-      },
-      targetElement: targetElement,
-      placement: props.modalPlacement,
-      children: /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["flex"]))),
-        children: [/*#__PURE__*/_jsxs("div", {
-          children: [/*#__PURE__*/_jsx(DatePickerCalendar, _objectSpread(_objectSpread(_objectSpread({
-            mode: "single",
-            numberOfMonths: 1,
-            defaultMonth: value !== null && value !== void 0 ? value : undefined
-          }, (_props$calendarProps = props === null || props === void 0 ? void 0 : props.calendarProps) !== null && _props$calendarProps !== void 0 ? _props$calendarProps : {}), {}, {
-            selected: value !== null && value !== void 0 ? value : undefined,
-            onDayClick: handleDayClick
-          }, yearProps), {}, {
-            locale: locale
-          })), /*#__PURE__*/_jsxs(DatePickerFooter, {
-            children: [props.renderLeftFooter && /*#__PURE__*/_jsx("div", {
-              children: props.renderLeftFooter({
-                state: state,
-                dispatch: dispatch
-              })
-            }), !props.renderRightPanel && /*#__PURE__*/_jsx(DatePickerFooterActions, {
-              onCancel: handleClose,
-              onApply: handleApply,
-              disableApply: !isValid,
-              locale: locale
-            })]
-          })]
-        }), props.renderRightPanel && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx("div", {
-            className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["h-full w-px bg-red-800"])))
-          }), /*#__PURE__*/_jsxs(DatePickerSidePanel, {
-            children: [props.renderRightPanel({
+  var cancelElementRef = useRef(null);
+  return /*#__PURE__*/_jsx(DatePickerPopover, {
+    isOpen: state.show,
+    onOpenChange: function onOpenChange(open) {
+      return dispatch({
+        type: DatePickerActionTypes.show,
+        payload: open
+      });
+    },
+    placement: props.modalPlacement,
+    title: locale.title,
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["date-picker"]))),
+    onOpenAutoFocus: function onOpenAutoFocus(evt) {
+      var _cancelElementRef$cur;
+      evt.preventDefault();
+      (_cancelElementRef$cur = cancelElementRef.current) === null || _cancelElementRef$cur === void 0 || _cancelElementRef$cur.focus();
+    },
+    trigger: props.renderTarget ? props.renderTarget({
+      toggle: state.show ? handleClose : handleOpen,
+      isOpen: state.show
+    }) : /*#__PURE__*/_jsx(DatePickerDisplay, {
+      id: (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : inputId,
+      ref: ref,
+      onClick: state.show ? handleClose : handleOpen,
+      size: props.buttonSize,
+      className: isInvalid ? stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["border-red-700 bg-red-100 bg-none focus:outline-1 focus:outline focus:outline-red-700 focus:shadow-none focus:bg-none focus:bg-red-100 focus:border-red-700 hover:border-red-700 hover:bg-red-50 hover:bg-none"]))) : undefined,
+      children: value ? /*#__PURE__*/_jsx("time", {
+        dateTime: value.toISOString(),
+        children: formatDate(value)
+      }) : locale.openButton
+    }),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex"]))),
+      children: [/*#__PURE__*/_jsxs("div", {
+        children: [/*#__PURE__*/_jsx(DatePickerCalendar, _objectSpread(_objectSpread(_objectSpread({
+          mode: "single",
+          numberOfMonths: 1,
+          defaultMonth: value !== null && value !== void 0 ? value : undefined
+        }, (_props$calendarProps = props === null || props === void 0 ? void 0 : props.calendarProps) !== null && _props$calendarProps !== void 0 ? _props$calendarProps : {}), {}, {
+          selected: value !== null && value !== void 0 ? value : undefined,
+          onDayClick: handleDayClick
+        }, yearProps), {}, {
+          locale: locale
+        })), /*#__PURE__*/_jsxs(DatePickerFooter, {
+          children: [props.renderLeftFooter && /*#__PURE__*/_jsx("div", {
+            children: props.renderLeftFooter({
               state: state,
               dispatch: dispatch
-            }), /*#__PURE__*/_jsx(DatePickerFooterActions, {
-              onCancel: handleClose,
-              onApply: handleApply,
-              disableApply: !isValid,
-              locale: locale
-            })]
+            })
+          }), !props.renderRightPanel && /*#__PURE__*/_jsx(DatePickerFooterActions, {
+            onCancel: handleClose,
+            onApply: handleApply,
+            disableApply: !isValid,
+            locale: locale,
+            ref: cancelElementRef
           })]
         })]
-      })
-    })]
+      }), props.renderRightPanel && /*#__PURE__*/_jsxs(DatePickerSidePanel, {
+        children: [props.renderRightPanel({
+          state: state,
+          dispatch: dispatch
+        }), /*#__PURE__*/_jsx(DatePickerFooterActions, {
+          onCancel: handleClose,
+          onApply: handleApply,
+          disableApply: !isValid,
+          locale: locale,
+          ref: cancelElementRef
+        })]
+      })]
+    })
   });
 });
 DatePicker.displayName = "DatePicker";

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

@@ -2,29 +2,30 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2;
 var _excluded = ["id", "range", "displayOnlyRanges", "calendarProps", "initialState", "stateReducer", "onAction", "validate", "renderTarget", "renderLeftFooter", "renderRightPanel", "buttonSize", "modalPlacement", "locale"];
 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 { useMemo, useReducer, useState } from "react";
+import { useMemo, useReducer, useRef } from "react";
 import { useLocale } from "../../../Satellite";
 import stl from "../../../styles/helpers/satellitePrefixer";
 import { DatePickerCalendar } from "../components/Calendar";
 import { DatePickerFooter } from "../components/Footer";
 import { DatePickerFooterActions } from "../components/FooterActions";
-import { DatePickerModal } from "../components/Modal";
+import { DatePickerPopover } from "../components/Popover";
 import { DatePickerSidePanel } from "../components/SidePanel";
 import { DEFAULT_DATE_PICKER_LOCALE } from "../utils";
 import { DateRangePickerDisplay } from "./DateRangePickerDisplay";
 import { DateRangePickerActionTypes, dateRangePickerReducer, initDateRangePickerReducer } from "./dateRangePickerReducer";
 import { isCompleteTimeRange, isEmptyTimeRange } from "./dateRangePickerTimeRange";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var defaultValidator = function defaultValidator(_ref) {
   var candidateRange = _ref.candidateRange;
   return isCompleteTimeRange(candidateRange) ? null : [new Error("Invalid time range")];
 };
 var DEFAULT_DATE_RANGE_PICKER_LOCALE = _objectSpread(_objectSpread({}, DEFAULT_DATE_PICKER_LOCALE), {}, {
-  openButton: "Enter a date period..."
+  openButton: "Enter a date period...",
+  title: "Date Range Picker"
 });
 
 /**
@@ -55,16 +56,13 @@ export var DateRangePicker = function DateRangePicker(_ref2) {
     props = _objectWithoutProperties(_ref2, _excluded);
   var contextLocale = useLocale("datePicker");
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DATE_RANGE_PICKER_LOCALE), contextLocale), propsLocale);
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    targetElement = _useState2[0],
-    setTargetElement = _useState2[1];
   var _useReducer = useReducer(function (state, action) {
       return stateReducer(state, action, dateRangePickerReducer);
     }, initialState, initDateRangePickerReducer),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],
     baseDispatch = _useReducer2[1];
+  var cancelElementRef = useRef(null);
 
   // Computed properties
   var isValid = !((_validate = validate(state)) !== null && _validate !== void 0 && _validate.length);
@@ -174,81 +172,75 @@ export var DateRangePicker = function DateRangePicker(_ref2) {
       editableYear: false
     };
   }, [props, displayedRange]);
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsx(DatePickerPopover, {
+    isOpen: state.show,
+    onOpenChange: function onOpenChange(open) {
+      return dispatch({
+        type: DateRangePickerActionTypes.show,
+        payload: open
+      });
+    },
+    placement: modalPlacement,
+    title: locale.title,
     className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["date-range-picker"]))),
-    children: [/*#__PURE__*/_jsx("span", {
-      ref: setTargetElement,
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["inline-block"]))),
-      children: renderTarget ? renderTarget({
-        toggle: state.show ? handleClose : handleOpen,
-        isOpen: state.show
-      }) : /*#__PURE__*/_jsx(DateRangePickerDisplay, {
-        id: id,
-        onClick: state.show ? handleClose : handleOpen,
-        range: initialRange !== null && initialRange !== void 0 ? initialRange : {
-          start: null,
-          end: null
-        },
-        buttonSize: buttonSize,
-        locale: locale
-      })
-    }), /*#__PURE__*/_jsx(DatePickerModal, {
-      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["date-range-picker"]))),
-      show: state.show,
-      onClickAway: function onClickAway(evt) {
-        if (!(targetElement !== null && targetElement !== void 0 && targetElement.contains(evt.target))) {
-          dispatch({
-            type: DateRangePickerActionTypes.show,
-            payload: false
-          });
-        }
+    onOpenAutoFocus: function onOpenAutoFocus(evt) {
+      var _cancelElementRef$cur;
+      evt.preventDefault();
+      (_cancelElementRef$cur = cancelElementRef.current) === null || _cancelElementRef$cur === void 0 || _cancelElementRef$cur.focus();
+    },
+    trigger: renderTarget ? renderTarget({
+      toggle: state.show ? handleClose : handleOpen,
+      isOpen: state.show
+    }) : /*#__PURE__*/_jsx(DateRangePickerDisplay, {
+      id: id,
+      range: initialRange !== null && initialRange !== void 0 ? initialRange : {
+        start: null,
+        end: null
       },
-      targetElement: targetElement,
-      placement: modalPlacement,
-      children: /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["flex"]))),
-        children: [/*#__PURE__*/_jsxs("div", {
-          children: [/*#__PURE__*/_jsx(DatePickerCalendar, _objectSpread(_objectSpread(_objectSpread({
-            mode: "default",
-            defaultMonth: (_initialRange$start = initialRange === null || initialRange === void 0 ? void 0 : initialRange.start) !== null && _initialRange$start !== void 0 ? _initialRange$start : undefined,
-            numberOfMonths: 2
-          }, calendarProps), {}, {
-            selected: selectedDays,
-            modifiers: modifiers,
-            onDayClick: handleDayClick,
-            onDayMouseEnter: handleMouseEnter,
-            onDayMouseLeave: handleMouseLeave
-          }, yearProps), {}, {
-            locale: locale
-          })), /*#__PURE__*/_jsxs(DatePickerFooter, {
-            children: [renderLeftFooter && /*#__PURE__*/_jsx("div", {
-              children: renderLeftFooter({
-                state: state,
-                dispatch: dispatch
-              })
-            }), !renderRightPanel && /*#__PURE__*/_jsx(DatePickerFooterActions, {
-              onCancel: handleCancel,
-              onApply: handleApply,
-              disableApply: !isValid,
-              locale: locale
-            })]
-          })]
-        }), renderRightPanel && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx("div", {
-            className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["h-full w-px bg-red-800"])))
-          }), /*#__PURE__*/_jsxs(DatePickerSidePanel, {
-            children: [renderRightPanel({
+      buttonSize: buttonSize,
+      locale: locale
+    }),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex"]))),
+      children: [/*#__PURE__*/_jsxs("div", {
+        children: [/*#__PURE__*/_jsx(DatePickerCalendar, _objectSpread(_objectSpread(_objectSpread({
+          mode: "default",
+          defaultMonth: (_initialRange$start = initialRange === null || initialRange === void 0 ? void 0 : initialRange.start) !== null && _initialRange$start !== void 0 ? _initialRange$start : undefined,
+          numberOfMonths: 2
+        }, calendarProps), {}, {
+          selected: selectedDays,
+          modifiers: modifiers,
+          onDayClick: handleDayClick,
+          onDayMouseEnter: handleMouseEnter,
+          onDayMouseLeave: handleMouseLeave
+        }, yearProps), {}, {
+          locale: locale
+        })), /*#__PURE__*/_jsxs(DatePickerFooter, {
+          children: [renderLeftFooter && /*#__PURE__*/_jsx("div", {
+            children: renderLeftFooter({
               state: state,
               dispatch: dispatch
-            }), /*#__PURE__*/_jsx(DatePickerFooterActions, {
-              onCancel: handleCancel,
-              onApply: handleApply,
-              disableApply: !isValid,
-              locale: locale
-            })]
+            })
+          }), !renderRightPanel && /*#__PURE__*/_jsx(DatePickerFooterActions, {
+            onCancel: handleCancel,
+            onApply: handleApply,
+            disableApply: !isValid,
+            locale: locale,
+            ref: cancelElementRef
           })]
         })]
-      })
-    })]
+      }), renderRightPanel && /*#__PURE__*/_jsxs(DatePickerSidePanel, {
+        children: [renderRightPanel({
+          state: state,
+          dispatch: dispatch
+        }), /*#__PURE__*/_jsx(DatePickerFooterActions, {
+          onCancel: handleCancel,
+          onApply: handleApply,
+          disableApply: !isValid,
+          locale: locale,
+          ref: cancelElementRef
+        })]
+      })]
+    })
   });
 };

package/dist/esm/Fields/DatePicker/DateRangePicker/DateRangePickerDisplay.d.ts

@@ -1,13 +1,12 @@
-import type { VFC } from "react";
+/// <reference types="react" />
 import type { WithRequiredProperty } from "../../../types";
 import { type DatePickerDisplayProps } from "../components/Display";
 import type { DatePickerLocale } from "../types";
 import type { DateRangePickerTimeRange } from "./dateRangePickerTimeRange";
 export interface DateRangePickerDisplayProps {
     id?: string;
-    onClick: DatePickerDisplayProps["onClick"];
     range: DateRangePickerTimeRange;
     buttonSize?: DatePickerDisplayProps["size"];
     locale: WithRequiredProperty<DatePickerLocale, "openButton">;
 }
-export declare const DateRangePickerDisplay: VFC<DateRangePickerDisplayProps>;
+export declare const DateRangePickerDisplay: import("react").ForwardRefExoticComponent<DateRangePickerDisplayProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -1,20 +1,26 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _templateObject;
+var _excluded = ["id", "range", "buttonSize", "locale"];
+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 { forwardRef } from "react";
 import stl from "../../../styles/helpers/satellitePrefixer";
 import { DatePickerDisplay } from "../components/Display";
 import { formatDate } from "../utils";
 import { isCompleteTimeRange } from "./dateRangePickerTimeRange";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export var DateRangePickerDisplay = function DateRangePickerDisplay(_ref) {
+export var DateRangePickerDisplay = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
-    onClick = _ref.onClick,
     range = _ref.range,
     buttonSize = _ref.buttonSize,
-    locale = _ref.locale;
-  return /*#__PURE__*/_jsx(DatePickerDisplay, {
+    locale = _ref.locale,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(DatePickerDisplay, _objectSpread(_objectSpread({}, props), {}, {
     id: id,
-    onClick: onClick,
     size: buttonSize,
+    ref: ref,
     children: isCompleteTimeRange(range) ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("time", {
         dateTime: range.start.toISOString(),
@@ -26,5 +32,6 @@ export var DateRangePickerDisplay = function DateRangePickerDisplay(_ref) {
         children: formatDate(range.end)
       })]
     }) : locale.openButton
-  });
-};
+  }));
+});
+DateRangePickerDisplay.displayName = "DateRangePickerDisplay";

package/dist/esm/Fields/DatePicker/components/Display.d.ts

@@ -2,7 +2,6 @@ import type { ReactNode } from "react";
 import type { ButtonProps, ButtonSize } from "../../../Actions";
 export interface DatePickerDisplayProps extends ButtonProps {
     id?: string;
-    onClick: ButtonProps["onClick"];
     children: ReactNode;
     size?: ButtonSize;
 }

package/dist/esm/Fields/DatePicker/components/Display.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["id", "size", "onClick", "children"];
+var _excluded = ["id", "size", "children"];
 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 { forwardRef } from "react";
@@ -10,14 +10,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export var DatePickerDisplay = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
     size = _ref.size,
-    onClick = _ref.onClick,
     children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
     id: id,
     size: size,
     startIcon: CalendarIcon,
-    onClick: onClick,
     ref: ref
   }, props), {}, {
     children: children

package/dist/esm/Fields/DatePicker/components/FooterActions.d.ts

@@ -1,4 +1,4 @@
-import type { VFC } from "react";
+/// <reference types="react" />
 import type { ButtonProps } from "../../../Actions";
 import type { WithRequiredProperty } from "../../../types";
 import type { DatePickerLocale } from "../types";
@@ -8,4 +8,4 @@ export interface DatePickerFooterActionsProps {
     disableApply: boolean;
     locale: WithRequiredProperty<DatePickerLocale, "cancel" | "apply">;
 }
-export declare const DatePickerFooterActions: VFC<DatePickerFooterActionsProps>;
+export declare const DatePickerFooterActions: import("react").ForwardRefExoticComponent<DatePickerFooterActionsProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/esm/Fields/DatePicker/components/FooterActions.js

@@ -1,9 +1,10 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
+import { forwardRef } from "react";
 import { Button } from "../../../Actions";
 import stl from "../../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export var DatePickerFooterActions = function DatePickerFooterActions(_ref) {
+export var DatePickerFooterActions = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onCancel = _ref.onCancel,
     onApply = _ref.onApply,
     disableApply = _ref.disableApply,
@@ -13,6 +14,7 @@ export var DatePickerFooterActions = function DatePickerFooterActions(_ref) {
     children: [/*#__PURE__*/_jsx(Button, {
       onClick: onCancel,
       className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-2"]))),
+      ref: ref,
       children: locale.cancel
     }), /*#__PURE__*/_jsx(Button, {
       disabled: disableApply,
@@ -21,4 +23,5 @@ export var DatePickerFooterActions = function DatePickerFooterActions(_ref) {
       children: locale.apply
     })]
   });
-};
+});
+DatePickerFooterActions.displayName = "AccordionItem";

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

@@ -0,0 +1,13 @@
+import * as Popover from "@radix-ui/react-popover";
+import type { FC, ReactNode } from "react";
+export interface DatePickerPopoverProps {
+    isOpen: boolean;
+    onOpenChange: (open: boolean) => void;
+    trigger: ReactNode;
+    children: ReactNode;
+    placement?: Popover.PopoverContentProps["side"] | `${Popover.PopoverContentProps["side"] & string}-${Popover.PopoverContentProps["align"] & string}`;
+    onOpenAutoFocus?: (event: Event) => void;
+    title?: string;
+    className?: string;
+}
+export declare const DatePickerPopover: FC<DatePickerPopoverProps>;