@adaptabletools/adaptable-cjs 22.1.1 → 23.0.0-canary.0

package/src/components/Dashboard/DashboardManager.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const ModuleManager_1 = require("../DragAndDropContext/ModuleManager");
 const DashboardManager = ({ tabs, onTabsChange, availableToolbars, api, disabled, }) => {
@@ -19,6 +20,6 @@ const DashboardManager = ({ tabs, onTabsChange, availableToolbars, api, disabled
         }));
         onTabsChange(dashboardTabs);
     }, []);
-    return (React.createElement(ModuleManager_1.ModuleManager, { availableItems: availableToolbars, disabled: disabled, onTabsChange: handleTabsChange, tabs: moduleTabs, tabsTitle: moduleInfo.FriendlyName + ' Tabs', unusedPanelTitle: 'Available Toolbars', dragItemText: "Drag into a Tab below" }));
+    return ((0, jsx_runtime_1.jsx)(ModuleManager_1.ModuleManager, { availableItems: availableToolbars, disabled: disabled, onTabsChange: handleTabsChange, tabs: moduleTabs, tabsTitle: moduleInfo.FriendlyName + ' Tabs', unusedPanelTitle: 'Available Toolbars', dragItemText: "Drag into a Tab below" }));
 };
 exports.default = DashboardManager;

package/src/components/Dashboard/DashboardToolbar.js

@@ -2,16 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DashboardToolbar = DashboardToolbar;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 const Flex_1 = require("../Flex");
 function DashboardToolbar(props) {
-    return (React.createElement("div", { className: (0, join_1.default)('ab-Dashboard__toolbar', props.className) },
-        React.createElement("div", { className: "ab-Dashboard__toolbar-content" }, props.children),
-        React.createElement(Flex_1.Flex, { className: "ab-Dashboard__toolbar-title twa:items-center twa:justify-center twa:px-2 twa:pb-1 twa:opacity-70", flexDirection: "row" },
-            React.createElement("span", { className: "twa:text-2" }, props.title),
-            props.showConfigure && (React.createElement(SimpleButton_1.default, { "aria-label": `Configure ${props.title}`, icon: "spanner", variant: "text", tone: "none", "data-name": "configure", iconSize: 16, className: "twa:ml-1", tooltip: props.tooltip || `Configure ${props.title}`, onClick: () => props.onConfigure() })),
-            props.showClose && (React.createElement(SimpleButton_1.default, { "aria-label": `Close ${props.title}`, style: { alignSelf: 'flex-end' }, disabled: props.accessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, "data-name": "close", icon: "close", variant: "text", tone: "none", iconSize: 16, className: "twa:ml-1", tooltip: props.tooltip || `Close ${props.title} Toolbar`, onClick: () => props.onClose?.() })))));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, join_1.default)('ab-Dashboard__toolbar', props.className), children: [(0, jsx_runtime_1.jsx)("div", { className: "ab-Dashboard__toolbar-content", children: props.children }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-Dashboard__toolbar-title twa:items-center twa:justify-center twa:px-2 twa:pb-1 twa:opacity-70", flexDirection: "row", children: [(0, jsx_runtime_1.jsx)("span", { className: "twa:text-2", children: props.title }), props.showConfigure && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "aria-label": `Configure ${props.title}`, icon: "spanner", variant: "text", tone: "none", "data-name": "configure", iconSize: 16, className: "twa:ml-1", tooltip: props.tooltip || `Configure ${props.title}`, onClick: () => props.onConfigure() })), props.showClose && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "aria-label": `Close ${props.title}`, style: { alignSelf: 'flex-end' }, disabled: props.accessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, "data-name": "close", icon: "close", variant: "text", tone: "none", iconSize: 16, className: "twa:ml-1", tooltip: props.tooltip || `Close ${props.title} Toolbar`, onClick: () => props.onClose?.() }))] })] }));
 }

package/src/components/Datepicker/index.js

@@ -2,154 +2,291 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Datepicker = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const OverlayTrigger_1 = tslib_1.__importDefault(require("../OverlayTrigger"));
 const react_1 = require("react");
 const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
-const FieldWrap_1 = tslib_1.__importDefault(require("../FieldWrap"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 const FormatHelper_1 = require("../../Utilities/Helpers/FormatHelper");
 const DatepickerContext_1 = require("./DatepickerContext");
-const react_day_picker_1 = require("react-day-picker");
 const AdaptableDateInlineInput_1 = require("../../View/Components/AdaptableInput/AdaptableDateInlineInput");
 const date_fns_1 = require("date-fns");
-const Select_1 = require("../Select");
 const Flex_1 = require("../Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
-const onDatePickerDropdownKeyDown = (e) => {
+const utils_1 = require("~/lib/utils");
+const popover_1 = require("~/components/ui/popover");
+const calendar_1 = require("~/components/ui/calendar");
+const input_group_1 = require("~/components/ui/input-group");
+const NewSelect_1 = require("../NewSelect");
+const twUtils_1 = require("../twUtils");
+// ── Caption dropdown components (month/year) ──────────────────────────
+const onCaptionKeyDown = (e) => {
     if (e.key === 'Escape' || e.key === 'Enter') {
         e.stopPropagation();
     }
 };
-const DatePickerComponents = {
-    YearsDropdown: (props) => {
-        const onChange = (0, react_1.useCallback)((value) => {
-            props.onChange?.({
-                target: {
-                    value,
-                },
-            });
-        }, [props.onChange]);
-        return (React.createElement(Select_1.Select, { onKeyDown: onDatePickerDropdownKeyDown, value: props.value, onChange: onChange, options: props.options }));
-    },
-    MonthsDropdown: (props) => {
-        const onChange = (0, react_1.useCallback)((value) => {
-            props.onChange?.({
-                target: {
-                    value,
-                },
-            });
-        }, [props.onChange]);
-        return (React.createElement(Select_1.Select, { onKeyDown: onDatePickerDropdownKeyDown, value: `${props.value}`, onChange: onChange, options: props.options.map((option) => {
-                return {
-                    label: option.label,
-                    value: `${option.value}`,
-                };
-            }) }));
-    },
-};
-const DatepickerOverlay = ({ onHide, children, onKeyDown, onMouseDown, overlayDOMRef, }) => {
-    const domRef = React.useRef(null);
-    return (React.createElement("div", { className: "ab-Datepicker-Overlay", tabIndex: -1, ref: (el) => {
-            domRef.current = el;
-            overlayDOMRef.current = el;
-        }, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onBlur: (e) => {
-            const { relatedTarget } = e;
-            const node = domRef.current;
-            // relatedTarget is the newly focused element as a result of this blur event
-            // so we close the overlay when the newly focused element is outside the overlay
-            if (relatedTarget == null || !node.contains?.(relatedTarget)) {
-                onHide();
-            }
-        } }, children));
+const DatepickerSelectPortalContext = React.createContext(null);
+function DatepickerYearsDropdown(props) {
+    const container = React.useContext(DatepickerSelectPortalContext);
+    const { onChange, options = [], value } = props;
+    return ((0, jsx_runtime_1.jsx)("div", { className: "twa:relative twa:z-10 twa:inline-flex twa:min-w-0 twa:shrink-0", onKeyDown: onCaptionKeyDown, children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { size: "small", className: "twa:min-w-0", items: options, value: value, onValueChange: (v) => onChange?.({ target: { value: v } }), container: container ?? undefined }) }));
+}
+function DatepickerMonthsDropdown(props) {
+    const container = React.useContext(DatepickerSelectPortalContext);
+    const { onChange, options = [], value } = props;
+    return ((0, jsx_runtime_1.jsx)("div", { className: "twa:relative twa:z-10 twa:inline-flex twa:min-w-0 twa:shrink-0", onKeyDown: onCaptionKeyDown, children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { size: "small", className: "twa:min-w-0", items: options.map((o) => ({ label: o.label, value: String(o.value) })), value: String(value), onValueChange: (v) => onChange?.({ target: { value: v } }), container: container ?? undefined }) }));
+}
+const captionComponents = {
+    YearsDropdown: DatepickerYearsDropdown,
+    MonthsDropdown: DatepickerMonthsDropdown,
 };
+// ── Main component ────────────────────────────────────────────────────
 const END_MONTH = (0, date_fns_1.endOfYear)((0, date_fns_1.addYears)(new Date(), 10));
 const START_MONTH = (0, date_fns_1.startOfYear)((0, date_fns_1.addYears)(new Date(), -50));
 exports.Datepicker = React.forwardRef((props, ref) => {
-    const { dateProps, required, disabled, style, className, placeholder, showWeekNumber, showOutsideDays, value: _, defaultValue: __, onChange: ___, datepickerButtons, showClearButton, autoFocus, ...boxProps } = props;
+    const { dateProps, disabled, style, className, placeholder, showWeekNumber, showOutsideDays, datepickerButtons, showClearButton, autoFocus, 
+    // openOnFocus,
+    onHide, value: _value, defaultValue: _defaultValue, onChange: _onChange,
+    // ...boxProps
+     } = props;
+    void _value;
+    void _defaultValue;
+    void _onChange;
     const datepickerContext = (0, DatepickerContext_1.useDatepickerContext)();
     let [value, setValue] = (0, useProperty_1.default)(props, 'value', undefined, {
         onChange: props.onChange,
     });
     (0, react_1.useEffect)(() => {
-        // when value is reset, also reset the month to the current month
         if (!value) {
             setMonth(new Date());
         }
-    }, [!!value]);
+    }, [value]);
     const [month, setMonth] = (0, react_1.useState)(value ?? new Date());
-    const updateValue = (value) => {
-        setValue(value);
-        setMonth(value ?? new Date());
+    const updateValue = (next) => {
+        setValue(next);
+        setMonth(next ?? new Date());
     };
     const inputValue = (0, FormatHelper_1.DateFormatter)(value, { Pattern: dateProps.format }) ?? '';
-    const [visible, doSetVisible] = (0, react_1.useState)(false);
-    const setVisible = (visible, keyboardEventKey) => {
-        doSetVisible(visible);
-        if (!visible) {
-            datepickerContext?.onHide?.(keyboardEventKey);
+    // ── DOM refs for focus ownership ────────────────────────────────
+    const triggerRef = React.useRef(null);
+    const popupRef = React.useRef(null);
+    const isInsideDatepicker = React.useCallback((node) => {
+        if (!node)
+            return false;
+        // Focus often lands on `body` briefly when a focused control unmounts (month nav).
+        // Treat as "still in session" so we don't close before focus settles.
+        if (node === document.body || node === document.documentElement) {
+            return true;
         }
-        else {
+        if (triggerRef.current?.contains(node)) {
+            return true;
+        }
+        const root = popupRef.current;
+        if (!root) {
+            return false;
+        }
+        if (root === node || root.contains(node)) {
+            return true;
+        }
+        // `popupRef` is on an inner div; Base UI may focus `PopoverPrimitive.Popup` / Positioner
+        // (ancestors of `root`). Those must still count as inside the datepicker.
+        if (node instanceof Element && root instanceof Element) {
+            let p = root.parentElement;
+            while (p) {
+                if (p === node) {
+                    return true;
+                }
+                p = p.parentElement;
+            }
+        }
+        return false;
+    }, []);
+    // ── Open / close ──────────────────────────────────────────────────
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const closedAtRef = React.useRef(0);
+    const tabFromOverlayRef = React.useRef(false);
+    const closedByTabOutRef = React.useRef(false);
+    const setPopoverOpen = React.useCallback((next, keyboardEventKey) => {
+        if (next) {
+            setOpen(true);
             datepickerContext?.onShow?.();
         }
-    };
-    const clearValue = () => {
-        updateValue(undefined);
-    };
-    const renderButton = (label, onClick) => (React.createElement(SimpleButton_1.default, { onClick: onClick, className: "twa:m-[2px]" }, label));
+        else {
+            closedAtRef.current = Date.now();
+            setOpen(false);
+            datepickerContext?.onHide?.(keyboardEventKey);
+            onHide?.();
+        }
+    }, [datepickerContext, onHide]);
+    // Only honour explicit, unambiguous close reasons.
+    // focus-out / trigger-press are ignored — the document-level
+    // focusin listener below handles blur-to-close reliably.
+    const handleOpenChange = React.useCallback((next, eventDetails) => {
+        if (next) {
+            setPopoverOpen(true);
+            return;
+        }
+        const reason = eventDetails?.reason;
+        if (reason === 'escape-key') {
+            setPopoverOpen(false, 'Escape');
+            return;
+        }
+        if (reason === 'outside-press' || reason === 'close-press') {
+            setPopoverOpen(false);
+            return;
+        }
+    }, [setPopoverOpen]);
+    // Close when focus moves to something truly outside the datepicker (e.g. Tab away).
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        const onFocusIn = (e) => {
+            const target = e.target;
+            // When Tab was pressed inside the overlay and focus landed outside the
+            // popup (even on the trigger), close so the user can Tab away freely.
+            if (tabFromOverlayRef.current) {
+                const popup = popupRef.current;
+                if (popup && target && !popup.contains(target) && popup !== target) {
+                    tabFromOverlayRef.current = false;
+                    closedByTabOutRef.current = true;
+                    setPopoverOpen(false);
+                }
+                return;
+            }
+            if (!isInsideDatepicker(target)) {
+                setPopoverOpen(false);
+            }
+        };
+        document.addEventListener('focusin', onFocusIn);
+        return () => document.removeEventListener('focusin', onFocusIn);
+    }, [open, isInsideDatepicker, setPopoverOpen]);
+    // Move focus into the overlay when it opens (portal + positioner need a frame to settle).
+    // Skip when autoFocus is set — the Calendar will focus a day cell itself.
+    (0, react_1.useLayoutEffect)(() => {
+        if (!open || disabled || autoFocus) {
+            return;
+        }
+        const id = requestAnimationFrame(() => {
+            popupRef.current?.focus({ preventScroll: true });
+        });
+        return () => cancelAnimationFrame(id);
+    }, [open, disabled, autoFocus]);
+    // ── Footer buttons ────────────────────────────────────────────────
+    const clearValue = () => updateValue(undefined);
+    const renderButton = (label, onClick) => ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onClick: onClick, className: "twa:m-[2px]", children: label }));
     const todayDate = new Date();
     const footerButtonsMap = {
         clear: renderButton('Clear', () => clearValue()),
-        close: renderButton('Close', () => setVisible(false)),
+        close: renderButton('Close', () => setPopoverOpen(false)),
         today: renderButton('Today', () => updateValue(todayDate)),
         tomorrow: renderButton('Tomorrow', () => updateValue((0, date_fns_1.addDays)(todayDate, 1))),
         yesterday: renderButton('Yesterday', () => updateValue((0, date_fns_1.addDays)(todayDate, -1))),
         nextWorkday: renderButton('Next Workday', () => updateValue((0, date_fns_1.addBusinessDays)(todayDate, 1))),
         prevWorkday: renderButton('Prev Workday', () => updateValue((0, date_fns_1.addBusinessDays)(todayDate, -1))),
-        '-': React.createElement("div", { style: { flex: '1 1 1%' } }),
-        '|': React.createElement("hr", { style: { width: '100%', height: 0, margin: 0, border: 'none' } }),
+        '-': (0, jsx_runtime_1.jsx)("div", { style: { flex: '1 1 1%' } }),
+        '|': (0, jsx_runtime_1.jsx)("hr", { style: { width: '100%', height: 0, margin: 0, border: 'none' } }),
     };
     const footerButtons = datepickerButtons.map((buttonKey, index) => React.cloneElement(footerButtonsMap[buttonKey], { key: index }));
-    const clearButton = showClearButton !== false ? (React.createElement(SimpleButton_1.default, { "data-name": "clear", variant: "text", tooltip: "Clear", iconSize: 20, className: "twa:p-0", icon: "close", onMouseDown: (e) => {
+    // ── Inline buttons (clear / calendar icon) ────────────────────────
+    const clearButton = showClearButton !== false ? ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "clear", variant: "text", tooltip: "Clear", iconSize: 20, className: "twa:p-0", icon: "close", onMouseDown: (e) => {
             e.preventDefault();
+            // e.stopPropagation();
+            clearValue();
+            console.log('onMouseDown', e);
+        }, onClick: (e) => {
+            console.log('onClick', e);
+            e.stopPropagation();
+            // also clear on click, as the user may have "clicked" using enter
             clearValue();
+            // and focus the input
+            triggerRef.current?.firstChild?.focus();
         }, accessLevel: GeneralConstants_1.ACCESS_LEVEL_FULL })) : null;
-    const calendarButton = (React.createElement(SimpleButton_1.default, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, className: "twa:p-0", onClick: () => setVisible(true) }));
-    const overlayDOMRef = (0, react_1.useRef)(null);
-    return (React.createElement(Flex_1.Flex, { className: "twa:flex-1" },
-        React.createElement(OverlayTrigger_1.default, { visible: visible, render: () => (React.createElement(DatepickerOverlay, { overlayDOMRef: overlayDOMRef, onMouseDown: props.onMouseDown, onHide: () => setVisible(false), onKeyDown: (e) => {
-                    if (e.key === 'Escape' || e.key === 'Enter') {
-                        setVisible(false, e.key);
-                    }
-                } },
-                React.createElement(react_day_picker_1.DayPicker, { fixedWeeks: true, autoFocus: autoFocus ?? true, showWeekNumber: showWeekNumber, showOutsideDays: showOutsideDays, mode: "single", captionLayout: "dropdown", month: isNaN(+month) ? new Date() : month, selected: value, onMonthChange: setMonth, onSelect: updateValue, startMonth: START_MONTH, endMonth: END_MONTH, components: DatePickerComponents, footer: React.createElement(Flex_1.Flex, { justifyContent: "space-between", className: "twa:mt-2", flexWrap: 'wrap' }, footerButtons) }))) },
-            React.createElement(FieldWrap_1.default, { ...boxProps, style: {
-                    borderRadius: style?.borderRadius,
-                    width: style?.width,
-                    maxWidth: style?.maxWidth,
-                    border: style?.border,
-                }, className: (0, clsx_1.default)('ab-Datepicker twa:min-h-input', className), onFocus: () => {
-                    if (!visible) {
-                        setVisible(true);
-                    }
-                }, onBlur: (e) => {
-                    const { relatedTarget } = e;
-                    const overlayDOMNode = overlayDOMRef.current;
-                    if ((overlayDOMNode && relatedTarget == overlayDOMNode) ||
-                        overlayDOMNode?.contains(relatedTarget)) {
-                        return;
-                    }
-                    setVisible(false);
-                } },
-                React.createElement(AdaptableDateInlineInput_1.AdaptableDateInlineInput, { ref: ref, value: inputValue, 
-                    // We do not want to show the format when the date-picker is visible
-                    placeholder: placeholder ?? '', onChange: (value) => {
-                        const date = new Date(value);
-                        if ((0, date_fns_1.isValid)(date)) {
-                            updateValue(date);
-                        }
-                    }, className: className?.includes('twa:w-full') ? 'twa:w-full' : '', style: style, disabled: disabled }),
-                !!inputValue ? clearButton : null,
-                calendarButton))));
+    const calendarButton = ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, className: "twa:p-0", type: "button" }));
+    // ── Select-portal container (so month/year lists stay inside the popover) ──
+    const [selectPortalRoot, setSelectPortalRoot] = React.useState(null);
+    // Stable callback ref — avoids cleanup/re-call cycle that briefly nullifies popupRef.
+    const popupRefCallback = React.useCallback((el) => {
+        popupRef.current = el;
+        setSelectPortalRoot(el);
+    }, []);
+    // ── Render ────────────────────────────────────────────────────────
+    return ((0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: handleOpenChange, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { nativeButton: false, render: 
+                // <Flex
+                //   {...boxProps}
+                //   ref={triggerRef as React.Ref<HTMLDivElement>}
+                //   flexDirection="row"
+                //   alignItems="center"
+                //   style={{
+                //     borderRadius: style?.borderRadius,
+                //     width: style?.width,
+                //     maxWidth: style?.maxWidth,
+                //     border: style?.border,
+                //   }}
+                //   className={cn(
+                //     'ab-Datepicker twa:focus-visible:outline-none twa:rounded-standard',
+                //     // targetOwn.focusWithinOutline,
+                //     // targetChildren.focusWithinOutline,
+                //     className
+                //   )}
+                //   // onMouseDown={() => {
+                //   //   closedByTabOutRef.current = false;
+                //   // }}
+                //   // onFocusCapture={() => {
+                //   //   if (closedByTabOutRef.current) {
+                //   //     return;
+                //   //   }
+                //   //   if (!open && Date.now() - closedAtRef.current > 200) {
+                //   //     setPopoverOpen(true);
+                //   //   }
+                //   // }}
+                //   // onBlurCapture={(e: React.FocusEvent) => {
+                //   //   if (closedByTabOutRef.current) {
+                //   //     const related = e.relatedTarget as Node | null;
+                //   //     if (!triggerRef.current?.contains(related)) {
+                //   //       closedByTabOutRef.current = false;
+                //   //     }
+                //   //   }
+                //   // }}
+                // />
+                (0, jsx_runtime_1.jsxs)(input_group_1.InputGroup, { ref: triggerRef, style: {
+                        borderRadius: style?.borderRadius,
+                        width: style?.width,
+                        maxWidth: style?.maxWidth,
+                        border: style?.border,
+                    }, tabIndex: -1, className: (0, utils_1.cn)('ab-Datepicker twa:flex twa:flex-row', 'twa:bg-(--ab-cmp-input__background)', twUtils_1.targetOwn.focusWithinOutline, open && 'twa:border-ring twa:ring-3 twa:ring-ring/50', className), children: [(0, jsx_runtime_1.jsx)(AdaptableDateInlineInput_1.AdaptableDateInlineInput, { ref: ref, "data-slot": "input-group-control", value: inputValue, placeholder: placeholder ?? '', onChange: (v) => {
+                                const date = new Date(v);
+                                if ((0, date_fns_1.isValid)(date)) {
+                                    updateValue(date);
+                                }
+                            }, className: "twa:h-auto twa:min-w-0 twa:outline-none twa:min-h-auto twa:py-0 twa:flex-1 twa:rounded-none twa:border-0 twa:bg-transparent twa:shadow-none twa:ring-0 twa:focus-visible:ring-0 twa:dark:bg-transparent", style: style, disabled: disabled }), (0, jsx_runtime_1.jsxs)(input_group_1.InputGroupAddon, { align: "inline-end", children: [inputValue ? clearButton : null, calendarButton] })] }) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "twa:w-auto twa:p-0", align: "start", sideOffset: 6, children: (0, jsx_runtime_1.jsx)("div", { ref: popupRefCallback, tabIndex: -1, role: "region", "aria-label": "Calendar", className: "twa:relative twa:isolate twa:overflow-visible twa:outline-none", onKeyDown: () => {
+                        // console.log('onKeyDown', e.key);
+                        // return;
+                        // if (e.key === 'Tab') {
+                        //   tabFromOverlayRef.current = true;
+                        //   requestAnimationFrame(() => {
+                        //     tabFromOverlayRef.current = false;
+                        //   });
+                        // }
+                        // if (
+                        //   (e.key === 'Enter' || e.key === ' ') &&
+                        //   e.target instanceof HTMLElement &&
+                        //   e.target.tagName === 'BUTTON' &&
+                        //   e.target.closest('nav')
+                        // ) {
+                        //   const nav = e.target.closest('nav')!;
+                        //   const buttons = nav.querySelectorAll('button');
+                        //   const btnIndex = Array.from(buttons).indexOf(e.target as HTMLButtonElement);
+                        //   if (btnIndex >= 0) {
+                        //     requestAnimationFrame(() => {
+                        //       requestAnimationFrame(() => {
+                        //         const popup = popupRef.current;
+                        //         if (!popup) return;
+                        //         const newNav = popup.querySelector('nav');
+                        //         const newBtn = newNav?.querySelectorAll('button')[btnIndex];
+                        //         (newBtn as HTMLElement | undefined)?.focus({ preventScroll: true });
+                        //       });
+                        //     });
+                        //   }
+                        // }
+                    }, children: (0, jsx_runtime_1.jsx)(DatepickerSelectPortalContext.Provider, { value: selectPortalRoot, children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { fixedWeeks: true, autoFocus: !!autoFocus, showWeekNumber: showWeekNumber, showOutsideDays: showOutsideDays, mode: "single", captionLayout: "dropdown", month: month && !isNaN(month.getTime()) ? month : new Date(), selected: value, onMonthChange: setMonth, onSelect: updateValue, startMonth: START_MONTH, endMonth: END_MONTH, locale: dateProps.locale, components: captionComponents, footer: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { justifyContent: "space-between", className: "twa:mt-2", flexWrap: 'wrap', children: footerButtons }) }) }) }) })] }));
 });

package/src/components/Dialog/index.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dialog = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const contains_1 = tslib_1.__importDefault(require("../utils/contains"));
@@ -98,27 +99,24 @@ exports.Dialog = React.forwardRef((props, dialogRef) => {
     if (!isOpen) {
         return null;
     }
-    const closeButton = showCloseButton ? (React.createElement(Flex_1.Box, { title: "Close dialog", onClick: () => setIsOpen(false), className: (0, clsx_1.default)(`${baseClassName}__close-button twa:p-1`, 'twa:text-accentlight', 'twa:text-shadow-[0_1px_0_#fff]', `twa:text-3 twa:cursor-pointer twa:leading-none twa:font-bold`, 'twa:absolute twa:top-[6px] twa:right-[6px]') },
-        React.createElement(icons_1.Icon, { size: 20, name: "close" }))) : null;
+    const closeButton = showCloseButton ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { title: "Close dialog", onClick: () => setIsOpen(false), className: (0, clsx_1.default)(`${baseClassName}__close-button twa:p-1`, 'twa:text-accentlight', 'twa:text-shadow-[0_1px_0_#fff]', `twa:text-3 twa:cursor-pointer twa:leading-none twa:font-bold`, 'twa:absolute twa:top-[6px] twa:right-[6px]'), children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { size: 20, name: "close" }) })) : null;
     const setPreventDismissFlag = (e) => {
         if (dismissOnClickOutside) {
             e.nativeEvent.preventDialogDismiss = true;
         }
     };
-    const box = (React.createElement(Flex_1.Box, { ...boxProps, onClick: (e) => {
+    const box = ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { ...boxProps, onClick: (e) => {
             setPreventDismissFlag(e);
             if (boxProps && boxProps.onClick) {
                 boxProps.onClick(e);
             }
-        }, onKeyDown: onKeyDown, className: (0, clsx_1.default)('twa:relative', 'twa:bg-defaultbackground', 'twa:text-text-on-defaultbackground', 'twa:fill-text-on-defaultbackground', 'twa:rounded-standard', 'twa:flex twa:flex-col', twUtils_1.targetOwn.focusOutline, twUtils_1.targetOwn.focusWithinOutline, baseClassName, modal ? `${baseClassName}--modal` : `${baseClassName}--not-modal`, className), ref: boxRef },
-        children,
-        closeButton));
-    const content = fixed ? (React.createElement("div", { onClick: setPreventDismissFlag, className: (0, clsx_1.default)(`${baseClassName}-fixed-wrapper`, 'twa:fixed twa:inset-0', 'twa:m-auto', 'twa:flex twa:items-center twa:justify-center') }, box)) : (box);
+        }, onKeyDown: onKeyDown, className: (0, clsx_1.default)('twa:relative', 'twa:bg-defaultbackground', 'twa:text-foreground', 'twa:fill-foreground', 'twa:rounded-standard', 'twa:flex twa:flex-col', twUtils_1.targetOwn.focusOutline, twUtils_1.targetOwn.focusWithinOutline, baseClassName, modal ? `${baseClassName}--modal` : `${baseClassName}--not-modal`, className), ref: boxRef, children: [children, closeButton] }));
+    const content = fixed ? ((0, jsx_runtime_1.jsx)("div", { onClick: setPreventDismissFlag, className: (0, clsx_1.default)(`${baseClassName}-fixed-wrapper`, 'twa:fixed twa:inset-0', 'twa:m-auto', 'twa:flex twa:items-center twa:justify-center'), children: box })) : (box);
     if (windowModal) {
-        return React.createElement(WindowModal_1.WindowModal, { ...windowModalProps }, content);
+        return (0, jsx_runtime_1.jsx)(WindowModal_1.WindowModal, { ...windowModalProps, children: content });
     }
     if (modal) {
-        return (React.createElement(Modal_1.Modal, { ...modalProps, isOpen: isOpen, onBringToFront: bringToFront }, box));
+        return ((0, jsx_runtime_1.jsx)(Modal_1.Modal, { ...modalProps, isOpen: isOpen, onBringToFront: bringToFront, children: box }));
     }
     return content;
 });

package/src/components/DragAndDropContext/ModuleManager.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModuleManager = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const dnd_1 = require("../dnd");
 const DragAndDropContext_1 = require("./DragAndDropContext");
@@ -60,13 +61,6 @@ const ModuleManager = (props) => {
             };
         }));
     };
-    return (React.createElement(dnd_1.DragDropProvider, null,
-        React.createElement(DragAndDropContext_1.DragAndDropContext.Provider, { value: contextValue },
-            React.createElement(Flex_1.Flex, { flexDirection: "column", className: (0, clsx_1.default)('ab-ModuleSelector twa:flex-1', className) },
-                React.createElement(UnusedPanel_1.UnusedPanel, { title: unusedPanelTitle, disabled: disabled, items: allowedItems, dragItemText: dragItemText }),
-                React.createElement(Card_1.Card, { className: "twa:flex-1 twa:m-2 ab-ModuleSelector-UsedPanel" },
-                    React.createElement(Card_1.Card.Title, { border: false }, tabsTitle),
-                    React.createElement(Card_1.Card.Body, { className: "twa:px-2" },
-                        React.createElement(TabList_1.TabList, { disabled: disabled, tabs: tabs, onTabsChange: onTabsChange, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName, onNewTab: contextValue.permittedActions.createTab ? handleTabAdd : undefined })))))));
+    return ((0, jsx_runtime_1.jsx)(dnd_1.DragDropProvider, { children: (0, jsx_runtime_1.jsx)(DragAndDropContext_1.DragAndDropContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: (0, clsx_1.default)('ab-ModuleSelector twa:flex-1', className), children: [(0, jsx_runtime_1.jsx)(UnusedPanel_1.UnusedPanel, { title: unusedPanelTitle, disabled: disabled, items: allowedItems, dragItemText: dragItemText }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { className: "twa:flex-1 twa:m-2 ab-ModuleSelector-UsedPanel", children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { border: false, children: tabsTitle }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:px-2", children: (0, jsx_runtime_1.jsx)(TabList_1.TabList, { disabled: disabled, tabs: tabs, onTabsChange: onTabsChange, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName, onNewTab: contextValue.permittedActions.createTab ? handleTabAdd : undefined }) })] })] }) }) }));
 };
 exports.ModuleManager = ModuleManager;