@expcat/tigercat-react 2.0.0 → 2.0.19

package/dist/{chunk-TO2URY7X.mjs → chunk-7AFRHC7P.mjs}

@@ -1,9 +1,13 @@
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay
+} from "./chunk-HKAZXG74.mjs";
 import {
   useTigerConfig
 } from "./chunk-YSIXURBW.mjs";
 
 // src/components/TreeSelect.tsx
-import { useState, useMemo, useRef, useEffect, useId } from "react";
+import { useState, useMemo, useRef, useId } from "react";
 import {
   resolveLocaleText,
   mergeTigerLocale,
@@ -84,6 +88,21 @@ var TreeSelect = (props) => {
     () => defaultExpandAll ? new Set(getAllTreeSelectKeys(treeData)) : /* @__PURE__ */ new Set()
   );
   const containerRef = useRef(null);
+  const triggerRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const overlay = useAnchoredOverlay({
+    enabled: isOpen,
+    referenceRef: triggerRef,
+    floatingRef: dropdownRef,
+    containerRef,
+    placement: "bottom-start",
+    offset: 4,
+    matchReferenceWidth: true,
+    dismissOnOutside: true,
+    dismissOnEscape: true,
+    restoreFocusOnDismiss: true,
+    onDismiss: closeDropdown
+  });
   const displayLabel = useMemo(() => getTreeSelectDisplayLabel(treeData, value), [treeData, value]);
   const showClearButton = clearable && !disabled && value !== void 0 && (Array.isArray(value) ? value.length > 0 : value !== "");
   const matchedKeys = useMemo(() => {
@@ -162,20 +181,11 @@ var TreeSelect = (props) => {
       closeDropdown();
     }
   }
-  useEffect(() => {
-    if (!isOpen) return;
-    function handleClickOutside(e) {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        closeDropdown();
-      }
-    }
-    document.addEventListener("click", handleClickOutside);
-    return () => document.removeEventListener("click", handleClickOutside);
-  }, [isOpen]);
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: classNames(treeSelectBaseClasses, className), ...divProps, children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
+        ref: triggerRef,
         type: "button",
         className: getTreeSelectTriggerClasses(size, disabled, isOpen),
         ...getPickerComboboxAria({ expanded: isOpen, listboxId }),
@@ -223,58 +233,77 @@ var TreeSelect = (props) => {
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs("div", { ...getPickerListboxAria({ id: listboxId }), className: treeSelectDropdownClasses, children: [
-      searchable && /* @__PURE__ */ jsx(
-        "input",
+    renderOverlayPortal(
+      isOpen ? /* @__PURE__ */ jsxs(
+        "div",
         {
-          type: "text",
-          className: treeSelectSearchClasses,
-          placeholder: resolveLocaleText("Search...", mergedLocale?.common?.searchPlaceholder),
-          value: searchQuery,
-          "aria-label": resolveLocaleText("Search tree", mergedLocale?.common?.searchPlaceholder),
-          onChange: (e) => updateSearchValue(e.target.value)
-        }
-      ),
-      visibleNodes.length > 0 ? visibleNodes.map((flatNode) => {
-        const { node, level, hasChildren, isExpanded } = flatNode;
-        const selected = isSelected(node.key);
-        const indent = level * 20;
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ...getPickerOptionAria({ selected, disabled: !!node.disabled }),
-            className: getTreeSelectNodeClasses(selected, !!node.disabled, size),
-            style: { paddingLeft: `${indent + 8}px` },
-            onClick: (e) => {
-              e.stopPropagation();
-              handleNodeSelect(node);
-            },
-            children: [
-              hasChildren ? /* @__PURE__ */ jsx(
-                "span",
+          ref: dropdownRef,
+          ...getPickerListboxAria({ id: listboxId }),
+          className: classNames(treeSelectDropdownClasses, overlay.floatingClasses),
+          style: overlay.floatingStyles,
+          "data-positioned": overlay.positioned,
+          children: [
+            searchable && /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                className: treeSelectSearchClasses,
+                placeholder: resolveLocaleText(
+                  "Search...",
+                  mergedLocale?.common?.searchPlaceholder
+                ),
+                value: searchQuery,
+                "aria-label": resolveLocaleText(
+                  "Search tree",
+                  mergedLocale?.common?.searchPlaceholder
+                ),
+                onChange: (e) => updateSearchValue(e.target.value)
+              }
+            ),
+            visibleNodes.length > 0 ? visibleNodes.map((flatNode) => {
+              const { node, level, hasChildren, isExpanded } = flatNode;
+              const selected = isSelected(node.key);
+              const indent = level * 20;
+              return /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  className: classNames(
-                    "inline-flex items-center justify-center w-4 h-4 mr-1 transition-transform",
-                    isExpanded ? "rotate-90" : ""
-                  ),
-                  onClick: (e) => toggleExpand(node.key, e),
-                  children: /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", viewBox: icon20ViewBox, fill: "currentColor", children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      d: chevronRightSolidIcon20PathD,
-                      fillRule: "evenodd",
-                      clipRule: "evenodd"
-                    }
-                  ) })
-                }
-              ) : /* @__PURE__ */ jsx("span", { className: "w-4 mr-1" }),
-              /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: node.label })
-            ]
-          },
-          String(node.key)
-        );
-      }) : /* @__PURE__ */ jsx("div", { className: treeSelectEmptyClasses, children: resolveLocaleText("No data", emptyText, mergedLocale?.common?.emptyText) })
-    ] })
+                  ...getPickerOptionAria({ selected, disabled: !!node.disabled }),
+                  className: getTreeSelectNodeClasses(selected, !!node.disabled, size),
+                  style: { paddingLeft: `${indent + 8}px` },
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleNodeSelect(node);
+                  },
+                  children: [
+                    hasChildren ? /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: classNames(
+                          "inline-flex items-center justify-center w-4 h-4 mr-1 transition-transform",
+                          isExpanded ? "rotate-90" : ""
+                        ),
+                        onClick: (e) => toggleExpand(node.key, e),
+                        children: /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", viewBox: icon20ViewBox, fill: "currentColor", children: /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            d: chevronRightSolidIcon20PathD,
+                            fillRule: "evenodd",
+                            clipRule: "evenodd"
+                          }
+                        ) })
+                      }
+                    ) : /* @__PURE__ */ jsx("span", { className: "w-4 mr-1" }),
+                    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: node.label })
+                  ]
+                },
+                String(node.key)
+              );
+            }) : /* @__PURE__ */ jsx("div", { className: treeSelectEmptyClasses, children: resolveLocaleText("No data", emptyText, mergedLocale?.common?.emptyText) })
+          ]
+        }
+      ) : null,
+      overlay.target
+    )
   ] });
 };
 

package/dist/{chunk-MGQWVJHX.mjs → chunk-ALSOPYM5.mjs}

@@ -1,6 +1,10 @@
 import {
   useControlledState
 } from "./chunk-MEFARVQI.mjs";
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay
+} from "./chunk-HKAZXG74.mjs";
 import {
   useTigerConfig
 } from "./chunk-YSIXURBW.mjs";
@@ -316,19 +320,6 @@ function useTimePickerState(allProps) {
   const handleInputClick = () => {
     togglePanel();
   };
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (panelRef.current && inputWrapperRef.current && !panelRef.current.contains(event.target) && !inputWrapperRef.current.contains(event.target)) {
-        closePanel();
-      }
-    };
-    if (isOpen) {
-      document.addEventListener("click", handleClickOutside);
-      return () => {
-        document.removeEventListener("click", handleClickOutside);
-      };
-    }
-  }, [isOpen]);
   useEffect(() => {
     if (!isOpen) return;
     const panel = panelRef.current;
@@ -599,6 +590,17 @@ var Icon = ({ path, className }) => /* @__PURE__ */ jsx3(
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var TimePicker = (allProps) => {
   const ctx = useTimePickerState(allProps);
+  const overlay = useAnchoredOverlay({
+    enabled: ctx.isOpen,
+    referenceRef: ctx.inputWrapperRef,
+    floatingRef: ctx.panelRef,
+    placement: "bottom-start",
+    offset: 4,
+    layout: "bottom-sheet-sm",
+    dismissOnOutside: true,
+    dismissOnEscape: true,
+    onDismiss: ctx.closePanel
+  });
   return /* @__PURE__ */ jsxs3("div", { className: ctx.containerClasses, ...ctx.divProps, children: [
     /* @__PURE__ */ jsxs3("div", { ref: ctx.inputWrapperRef, className: timePickerInputWrapperClasses, children: [
       /* @__PURE__ */ jsx4(
@@ -640,55 +642,60 @@ var TimePicker = (allProps) => {
         }
       )
     ] }),
-    ctx.isOpen && /* @__PURE__ */ jsxs3(
-      "div",
-      {
-        ref: ctx.panelRef,
-        className: timePickerPanelClasses,
-        role: "dialog",
-        "aria-label": ctx.labels.dialog,
-        onKeyDown: ctx.handlePanelKeyDown,
-        children: [
-          ctx.isRangeMode && /* @__PURE__ */ jsxs3("div", { className: timePickerRangeHeaderClasses, children: [
-            /* @__PURE__ */ jsx4(
-              "button",
-              {
-                type: "button",
-                className: getTimePickerRangeTabButtonClasses(ctx.activePart === "start"),
-                onClick: () => ctx.setActivePart("start"),
-                "aria-label": ctx.labels.start,
-                "aria-selected": ctx.activePart === "start",
-                children: ctx.labels.start
-              }
-            ),
-            /* @__PURE__ */ jsx4(
-              "button",
-              {
-                type: "button",
-                className: getTimePickerRangeTabButtonClasses(ctx.activePart === "end"),
-                onClick: () => ctx.setActivePart("end"),
-                "aria-label": ctx.labels.end,
-                "aria-selected": ctx.activePart === "end",
-                children: ctx.labels.end
-              }
-            )
-          ] }),
-          renderTimePickerMobile(ctx),
-          renderTimePickerDesktop(ctx),
-          /* @__PURE__ */ jsxs3("div", { className: timePickerFooterClasses, children: [
-            /* @__PURE__ */ jsx4("button", { type: "button", className: timePickerFooterButtonClasses, onClick: ctx.setNow, children: ctx.labels.now }),
-            /* @__PURE__ */ jsx4(
-              "button",
-              {
-                type: "button",
-                className: timePickerFooterButtonClasses,
-                onClick: ctx.closePanel,
-                children: ctx.labels.ok
-              }
-            )
-          ] })
-        ]
-      }
+    renderOverlayPortal(
+      ctx.isOpen ? /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          ref: ctx.panelRef,
+          className: `${timePickerPanelClasses} ${overlay.floatingClasses}`,
+          style: overlay.floatingStyles,
+          "data-positioned": overlay.positioned,
+          role: "dialog",
+          "aria-label": ctx.labels.dialog,
+          onKeyDown: ctx.handlePanelKeyDown,
+          children: [
+            ctx.isRangeMode && /* @__PURE__ */ jsxs3("div", { className: timePickerRangeHeaderClasses, children: [
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  className: getTimePickerRangeTabButtonClasses(ctx.activePart === "start"),
+                  onClick: () => ctx.setActivePart("start"),
+                  "aria-label": ctx.labels.start,
+                  "aria-selected": ctx.activePart === "start",
+                  children: ctx.labels.start
+                }
+              ),
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  className: getTimePickerRangeTabButtonClasses(ctx.activePart === "end"),
+                  onClick: () => ctx.setActivePart("end"),
+                  "aria-label": ctx.labels.end,
+                  "aria-selected": ctx.activePart === "end",
+                  children: ctx.labels.end
+                }
+              )
+            ] }),
+            renderTimePickerMobile(ctx),
+            renderTimePickerDesktop(ctx),
+            /* @__PURE__ */ jsxs3("div", { className: timePickerFooterClasses, children: [
+              /* @__PURE__ */ jsx4("button", { type: "button", className: timePickerFooterButtonClasses, onClick: ctx.setNow, children: ctx.labels.now }),
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  className: timePickerFooterButtonClasses,
+                  onClick: ctx.closePanel,
+                  children: ctx.labels.ok
+                }
+              )
+            ] })
+          ]
+        }
+      ) : null,
+      overlay.target
     )
   ] });
 };

package/dist/{chunk-YCKY72BW.mjs → chunk-BOGOQ44C.mjs}

@@ -1,6 +1,6 @@
 import {
   Select
-} from "./chunk-PAN256RW.mjs";
+} from "./chunk-KVCI2346.mjs";
 import {
   Radio
 } from "./chunk-IIWUQK2P.mjs";

package/dist/{chunk-Q327ESD2.mjs → chunk-BUXHI6UK.mjs}

@@ -1,7 +1,7 @@
 import {
-  renderBodyPortal,
-  useFloating
-} from "./chunk-SEWNVIHH.mjs";
+  renderOverlayPortal,
+  useAnchoredOverlay
+} from "./chunk-HKAZXG74.mjs";
 
 // src/components/Menu.tsx
 import React5 from "react";
@@ -268,8 +268,6 @@ import React4, { useState as useState2, useMemo as useMemo2, useCallback as useC
 import {
   classNames as classNames3,
   getSubMenuTitleClasses,
-  getSubmenuPopupZIndex,
-  getTransformOrigin,
   getMenuItemIndent as getMenuItemIndent2,
   isKeyOpen,
   menuItemIconClasses as menuItemIconClasses2,
@@ -367,16 +365,18 @@ var SubMenu = ({
   const isExpanded = isPopup ? isHovered || isOpenByKeyboard : isOpen;
   const popupPortal = Boolean(isPopup && menuContext?.popupPortal);
   const popupPlacement = menuContext?.mode === "horizontal" && level === 0 ? "bottom-start" : "right-start";
-  const {
-    x: popupX,
-    y: popupY,
-    placement: currentPopupPlacement
-  } = useFloating({
+  const overlay = useAnchoredOverlay({
     referenceRef: titleRef,
     floatingRef: popupRef,
-    enabled: popupPortal && isExpanded,
+    enabled: isPopup && isExpanded,
     placement: popupPlacement,
-    offset: 4
+    offset: 4,
+    portal: popupPortal,
+    dismissOnEscape: true,
+    onDismiss: () => {
+      setIsOpenByKeyboard(false);
+      setIsHovered(false);
+    }
   });
   const isInlineOrVertical = menuContext?.mode !== "horizontal" && !isPopup;
   const [hasRenderedInline, setHasRenderedInline] = useState2(
@@ -572,22 +572,14 @@ var SubMenu = ({
       }
       return child;
     });
-    const popupZIndex = isPopup ? getSubmenuPopupZIndex(level) : {};
     if (isPopup) {
-      const popupStyle = popupPortal ? {
-        display: isExpanded ? "block" : "none",
-        position: "absolute",
-        left: popupX,
-        top: popupY,
-        transformOrigin: getTransformOrigin(currentPopupPlacement),
-        ...popupZIndex
-      } : { display: isExpanded ? "block" : "none", ...popupZIndex };
       const popup = /* @__PURE__ */ jsx4(
         "ul",
         {
-          ref: popupPortal ? popupRef : void 0,
-          className: contentClasses,
-          style: popupStyle,
+          ref: popupRef,
+          className: classNames3(contentClasses, overlay.floatingClasses),
+          style: { ...overlay.floatingStyles, display: isExpanded ? "block" : "none" },
+          "data-positioned": overlay.positioned,
           role: "menu",
           "aria-hidden": isExpanded ? void 0 : "true",
           onMouseEnter: popupPortal ? handleMouseEnter : void 0,
@@ -596,20 +588,7 @@ var SubMenu = ({
           children: enhancedChildren
         }
       );
-      if (popupPortal) {
-        return renderBodyPortal(popup);
-      }
-      return /* @__PURE__ */ jsx4(
-        "ul",
-        {
-          className: contentClasses,
-          style: { display: isExpanded ? "block" : "none", ...popupZIndex },
-          role: "menu",
-          "aria-hidden": isExpanded ? void 0 : "true",
-          "data-tiger-submenu-popup": "",
-          children: enhancedChildren
-        }
-      );
+      return renderOverlayPortal(popup, overlay.target, !popupPortal);
     }
     if (!hasRenderedInline) return null;
     const isHidden = !isExpanded;

package/dist/{chunk-TORX7SG4.mjs → chunk-CC7IOSNI.mjs}

@@ -3,7 +3,7 @@ import {
   useBodyScrollLock,
   useEscapeKey,
   useFocusTrap
-} from "./chunk-SEWNVIHH.mjs";
+} from "./chunk-HKAZXG74.mjs";
 import {
   useTigerConfig
 } from "./chunk-YSIXURBW.mjs";
@@ -117,7 +117,6 @@ var Drawer = ({
     },
     [maskClosable, handleClose]
   );
-  useEscapeKey({ enabled: open, onEscape: handleClose });
   useBodyScrollLock({ enabled: open });
   const previousVisible = useRef(false);
   useEffect(() => {
@@ -138,6 +137,7 @@ var Drawer = ({
   const reactId = useId();
   const drawerId = useMemo(() => `tiger-drawer-${reactId}`, [reactId]);
   const titleId = `${drawerId}-title`;
+  const overlayHostId = `${drawerId}-overlay-host`;
   const {
     ["aria-labelledby"]: _ariaLabelledby,
     role: _role,
@@ -146,10 +146,12 @@ var Drawer = ({
   } = rest;
   const ariaLabelledby = rest["aria-labelledby"] ?? (title || header ? titleId : void 0);
   const dialogRef = useRef(null);
+  const rootRef = useRef(null);
   const closeButtonRef = useRef(null);
   const previousActiveElementRef = useRef(null);
   const touchStartRef = useRef(null);
   const touchCurrentRef = useRef(null);
+  useEscapeKey({ enabled: open, onEscape: handleClose, layerRef: rootRef });
   const resolvedCloseAriaLabel = resolveLocaleText(
     "Close drawer",
     closeAriaLabel,
@@ -167,7 +169,7 @@ var Drawer = ({
     }
     restoreFocus(previousActiveElementRef.current);
   }, [open]);
-  useFocusTrap({ enabled: open, containerRef: dialogRef });
+  useFocusTrap({ enabled: open, containerRef: rootRef });
   const resetTouchGesture = useCallback(() => {
     touchStartRef.current = null;
     touchCurrentRef.current = null;
@@ -235,10 +237,12 @@ var Drawer = ({
   const drawerContent = /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: rootRef,
       className: containerClasses,
       style: { zIndex },
       hidden: !open && !isClosingBeforeDestroy,
       "aria-hidden": !open ? "true" : void 0,
+      "data-tiger-overlay-layer": "",
       "data-tiger-drawer-root": "",
       children: [
         mask && /* @__PURE__ */ jsx(
@@ -265,6 +269,7 @@ var Drawer = ({
             role: "dialog",
             "aria-modal": "true",
             "aria-labelledby": ariaLabelledby,
+            "aria-owns": overlayHostId,
             tabIndex: -1,
             ref: dialogRef,
             onTouchStart: handleTouchStart,
@@ -291,7 +296,8 @@ var Drawer = ({
               footer && /* @__PURE__ */ jsx("div", { className: footerClasses, children: footer })
             ]
           }
-        )
+        ),
+        /* @__PURE__ */ jsx("div", { id: overlayHostId, className: "contents", "data-tiger-overlay-host": "" })
       ]
     }
   );

package/dist/{chunk-OVE2ZUJJ.mjs → chunk-D33BIMGK.mjs}

@@ -2,7 +2,7 @@ import {
   Dropdown,
   DropdownItem,
   DropdownMenu
-} from "./chunk-YI7NQWUV.mjs";
+} from "./chunk-YI6YWH66.mjs";
 import {
   useTigerConfig
 } from "./chunk-YSIXURBW.mjs";

package/dist/{chunk-PYDWF4ED.mjs → chunk-D3KP72UC.mjs}

@@ -1,6 +1,10 @@
 import {
   useControlledState
 } from "./chunk-MEFARVQI.mjs";
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay
+} from "./chunk-HKAZXG74.mjs";
 import {
   useTigerConfig
 } from "./chunk-YSIXURBW.mjs";
@@ -106,6 +110,7 @@ function useDatePickerState(props) {
   );
   const calendarRef = useRef(null);
   const mobileCalendarRef = useRef(null);
+  const panelRef = useRef(null);
   const inputWrapperRef = useRef(null);
   const inputRef = useRef(null);
   const pendingFocusIsoRef = useRef(null);
@@ -390,12 +395,6 @@ function useDatePickerState(props) {
   };
   useEffect(() => {
     if (isOpen) {
-      const handleClickOutside = (event) => {
-        if (calendarRef.current && mobileCalendarRef.current && inputWrapperRef.current && !calendarRef.current.contains(event.target) && !mobileCalendarRef.current.contains(event.target) && !inputWrapperRef.current.contains(event.target)) {
-          closeCalendar();
-        }
-      };
-      document.addEventListener("click", handleClickOutside);
       const preferred = pendingFocusIsoRef.current ?? getPreferredFocusIso();
       pendingFocusIsoRef.current = null;
       setTimeout(() => {
@@ -403,7 +402,7 @@ function useDatePickerState(props) {
         const fallback = getFirstEnabledIsoInView();
         if (fallback) focusDateButtonByIso(fallback);
       }, 0);
-      return () => document.removeEventListener("click", handleClickOutside);
+      return;
     }
     setTimeout(() => restoreFocus(), 0);
   }, [
@@ -433,6 +432,7 @@ function useDatePickerState(props) {
   return {
     inputWrapperRef,
     inputRef,
+    panelRef,
     calendarRef,
     mobileCalendarRef,
     isOpen,
@@ -726,6 +726,17 @@ function renderDatePickerCalendar(ctx) {
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var DatePicker = (props) => {
   const ctx = useDatePickerState(props);
+  const overlay = useAnchoredOverlay({
+    enabled: ctx.isOpen,
+    referenceRef: ctx.inputWrapperRef,
+    floatingRef: ctx.panelRef,
+    placement: "bottom-start",
+    offset: 4,
+    layout: "bottom-sheet-sm",
+    dismissOnOutside: true,
+    dismissOnEscape: true,
+    onDismiss: ctx.closeCalendar
+  });
   return /* @__PURE__ */ jsxs3("div", { className: ctx.containerClasses, ...ctx.divProps, children: [
     /* @__PURE__ */ jsxs3("div", { ref: ctx.inputWrapperRef, className: datePickerInputWrapperClasses, children: [
       /* @__PURE__ */ jsx4(
@@ -767,8 +778,22 @@ var DatePicker = (props) => {
         }
       )
     ] }),
-    ctx.isOpen && renderDatePickerMobile(ctx),
-    ctx.isOpen && renderDatePickerCalendar(ctx)
+    renderOverlayPortal(
+      ctx.isOpen ? /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          ref: ctx.panelRef,
+          className: overlay.floatingClasses,
+          style: overlay.floatingStyles,
+          "data-positioned": overlay.positioned,
+          children: [
+            renderDatePickerMobile(ctx),
+            renderDatePickerCalendar(ctx)
+          ]
+        }
+      ) : null,
+      overlay.target
+    )
   ] });
 };