@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.0

package/src/components/Dashboard/DashboardToolbar.js

@@ -1,13 +1,8 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import SimpleButton from '../SimpleButton';
 import join from '../utils/join';
 import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
 import { Flex } from '../Flex';
 export function DashboardToolbar(props) {
-    return (React.createElement("div", { className: join('ab-Dashboard__toolbar', props.className) },
-        React.createElement("div", { className: "ab-Dashboard__toolbar-content" }, props.children),
-        React.createElement(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, { "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, { "aria-label": `Close ${props.title}`, style: { alignSelf: 'flex-end' }, disabled: props.accessLevel == 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 (_jsxs("div", { className: join('ab-Dashboard__toolbar', props.className), children: [_jsx("div", { className: "ab-Dashboard__toolbar-content", children: props.children }), _jsxs(Flex, { className: "ab-Dashboard__toolbar-title twa:items-center twa:justify-center twa:px-2 twa:pb-1 twa:opacity-70", flexDirection: "row", children: [_jsx("span", { className: "twa:text-2", children: props.title }), props.showConfigure && (_jsx(SimpleButton, { "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 && (_jsx(SimpleButton, { "aria-label": `Close ${props.title}`, style: { alignSelf: 'flex-end' }, disabled: props.accessLevel == 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

@@ -1,151 +1,288 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import OverlayTrigger from '../OverlayTrigger';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
 import useProperty from '../utils/useProperty';
-import FieldWrap from '../FieldWrap';
 import SimpleButton from '../SimpleButton';
 import { ACCESS_LEVEL_FULL } from '../../Utilities/Constants/GeneralConstants';
 import { DateFormatter } from '../../Utilities/Helpers/FormatHelper';
 import { useDatepickerContext } from './DatepickerContext';
-import { DayPicker } from 'react-day-picker';
 import { AdaptableDateInlineInput } from '../../View/Components/AdaptableInput/AdaptableDateInlineInput';
 import { isValid, addYears, endOfYear, startOfYear, addDays, addBusinessDays, } from 'date-fns';
-import { Select } from '../Select';
 import { Flex } from '../Flex';
-import clsx from 'clsx';
-const onDatePickerDropdownKeyDown = (e) => {
+import { cn } from '~/lib/utils';
+import { Popover, PopoverContent, PopoverTrigger } from '~/components/ui/popover';
+import { Calendar } from '~/components/ui/calendar';
+import { InputGroup, InputGroupAddon } from '~/components/ui/input-group';
+import { SingleSelect } from '../NewSelect';
+import { targetOwn } from '../twUtils';
+// ── Caption dropdown components (month/year) ──────────────────────────
+const onCaptionKeyDown = (e) => {
     if (e.key === 'Escape' || e.key === 'Enter') {
         e.stopPropagation();
     }
 };
-const DatePickerComponents = {
-    YearsDropdown: (props) => {
-        const onChange = useCallback((value) => {
-            props.onChange?.({
-                target: {
-                    value,
-                },
-            });
-        }, [props.onChange]);
-        return (React.createElement(Select, { onKeyDown: onDatePickerDropdownKeyDown, value: props.value, onChange: onChange, options: props.options }));
-    },
-    MonthsDropdown: (props) => {
-        const onChange = useCallback((value) => {
-            props.onChange?.({
-                target: {
-                    value,
-                },
-            });
-        }, [props.onChange]);
-        return (React.createElement(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 (_jsx("div", { className: "twa:relative twa:z-10 twa:inline-flex twa:min-w-0 twa:shrink-0", onKeyDown: onCaptionKeyDown, children: _jsx(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 (_jsx("div", { className: "twa:relative twa:z-10 twa:inline-flex twa:min-w-0 twa:shrink-0", onKeyDown: onCaptionKeyDown, children: _jsx(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 = endOfYear(addYears(new Date(), 10));
 const START_MONTH = startOfYear(addYears(new Date(), -50));
 export const 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 = useDatepickerContext();
     let [value, setValue] = useProperty(props, 'value', undefined, {
         onChange: props.onChange,
     });
     useEffect(() => {
-        // when value is reset, also reset the month to the current month
         if (!value) {
             setMonth(new Date());
         }
-    }, [!!value]);
+    }, [value]);
     const [month, setMonth] = useState(value ?? new Date());
-    const updateValue = (value) => {
-        setValue(value);
-        setMonth(value ?? new Date());
+    const updateValue = (next) => {
+        setValue(next);
+        setMonth(next ?? new Date());
     };
     const inputValue = DateFormatter(value, { Pattern: dateProps.format }) ?? '';
-    const [visible, doSetVisible] = 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] = 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, { 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).
+    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.
+    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) => (_jsx(SimpleButton, { 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(addDays(todayDate, 1))),
         yesterday: renderButton('Yesterday', () => updateValue(addDays(todayDate, -1))),
         nextWorkday: renderButton('Next Workday', () => updateValue(addBusinessDays(todayDate, 1))),
         prevWorkday: renderButton('Prev Workday', () => updateValue(addBusinessDays(todayDate, -1))),
-        '-': React.createElement("div", { style: { flex: '1 1 1%' } }),
-        '|': React.createElement("hr", { style: { width: '100%', height: 0, margin: 0, border: 'none' } }),
+        '-': _jsx("div", { style: { flex: '1 1 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, { "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 ? (_jsx(SimpleButton, { "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: ACCESS_LEVEL_FULL })) : null;
-    const calendarButton = (React.createElement(SimpleButton, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, className: "twa:p-0", onClick: () => setVisible(true) }));
-    const overlayDOMRef = useRef(null);
-    return (React.createElement(Flex, { className: "twa:flex-1" },
-        React.createElement(OverlayTrigger, { 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(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, { justifyContent: "space-between", className: "twa:mt-2", flexWrap: 'wrap' }, footerButtons) }))) },
-            React.createElement(FieldWrap, { ...boxProps, style: {
-                    borderRadius: style?.borderRadius,
-                    width: style?.width,
-                    maxWidth: style?.maxWidth,
-                    border: style?.border,
-                }, className: clsx('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, { 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 (isValid(date)) {
-                            updateValue(date);
-                        }
-                    }, className: className?.includes('twa:w-full') ? 'twa:w-full' : '', style: style, disabled: disabled }),
-                !!inputValue ? clearButton : null,
-                calendarButton))));
+    const calendarButton = (_jsx(SimpleButton, { 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 (_jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [_jsx(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;
+                //   //     }
+                //   //   }
+                //   // }}
+                // />
+                _jsxs(InputGroup, { ref: triggerRef, style: {
+                        borderRadius: style?.borderRadius,
+                        width: style?.width,
+                        maxWidth: style?.maxWidth,
+                        border: style?.border,
+                    }, tabIndex: -1, className: cn('ab-Datepicker twa:flex twa:flex-row', 'twa:bg-(--ab-cmp-input__background)', targetOwn.focusWithinOutline, open && 'twa:border-ring twa:ring-3 twa:ring-ring/50', className), children: [_jsx(AdaptableDateInlineInput, { ref: ref, "data-slot": "input-group-control", value: inputValue, placeholder: placeholder ?? '', onChange: (v) => {
+                                const date = new Date(v);
+                                if (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 }), _jsxs(InputGroupAddon, { align: "inline-end", children: [inputValue ? clearButton : null, calendarButton] })] }) }), _jsx(PopoverContent, { className: "twa:w-auto twa:p-0", align: "start", sideOffset: 6, children: _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: _jsx(DatepickerSelectPortalContext.Provider, { value: selectPortalRoot, children: _jsx(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: _jsx(Flex, { justifyContent: "space-between", className: "twa:mt-2", flexWrap: 'wrap', children: footerButtons }) }) }) }) })] }));
 });

package/src/components/Dialog/index.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useRef, useEffect } from 'react';
 import contains from '../utils/contains';
@@ -94,27 +95,24 @@ export const Dialog = React.forwardRef((props, dialogRef) => {
     if (!isOpen) {
         return null;
     }
-    const closeButton = showCloseButton ? (React.createElement(Box, { title: "Close dialog", onClick: () => setIsOpen(false), className: clsx(`${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(Icon, { size: 20, name: "close" }))) : null;
+    const closeButton = showCloseButton ? (_jsx(Box, { title: "Close dialog", onClick: () => setIsOpen(false), className: clsx(`${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: _jsx(Icon, { size: 20, name: "close" }) })) : null;
     const setPreventDismissFlag = (e) => {
         if (dismissOnClickOutside) {
             e.nativeEvent.preventDialogDismiss = true;
         }
     };
-    const box = (React.createElement(Box, { ...boxProps, onClick: (e) => {
+    const box = (_jsxs(Box, { ...boxProps, onClick: (e) => {
             setPreventDismissFlag(e);
             if (boxProps && boxProps.onClick) {
                 boxProps.onClick(e);
             }
-        }, onKeyDown: onKeyDown, className: clsx('twa:relative', 'twa:bg-defaultbackground', 'twa:text-text-on-defaultbackground', 'twa:fill-text-on-defaultbackground', 'twa:rounded-standard', 'twa:flex twa:flex-col', targetOwn.focusOutline, targetOwn.focusWithinOutline, baseClassName, modal ? `${baseClassName}--modal` : `${baseClassName}--not-modal`, className), ref: boxRef },
-        children,
-        closeButton));
-    const content = fixed ? (React.createElement("div", { onClick: setPreventDismissFlag, className: clsx(`${baseClassName}-fixed-wrapper`, 'twa:fixed twa:inset-0', 'twa:m-auto', 'twa:flex twa:items-center twa:justify-center') }, box)) : (box);
+        }, onKeyDown: onKeyDown, className: clsx('twa:relative', 'twa:bg-defaultbackground', 'twa:text-foreground', 'twa:fill-foreground', 'twa:rounded-standard', 'twa:flex twa:flex-col', targetOwn.focusOutline, targetOwn.focusWithinOutline, baseClassName, modal ? `${baseClassName}--modal` : `${baseClassName}--not-modal`, className), ref: boxRef, children: [children, closeButton] }));
+    const content = fixed ? (_jsx("div", { onClick: setPreventDismissFlag, className: clsx(`${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, { ...windowModalProps }, content);
+        return _jsx(WindowModal, { ...windowModalProps, children: content });
     }
     if (modal) {
-        return (React.createElement(Modal, { ...modalProps, isOpen: isOpen, onBringToFront: bringToFront }, box));
+        return (_jsx(Modal, { ...modalProps, isOpen: isOpen, onBringToFront: bringToFront, children: box }));
     }
     return content;
 });

package/src/components/DragAndDropContext/ModuleManager.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { DragDropProvider } from '../dnd';
 import { DragAndDropContext } from './DragAndDropContext';
@@ -56,12 +57,5 @@ export const ModuleManager = (props) => {
             };
         }));
     };
-    return (React.createElement(DragDropProvider, null,
-        React.createElement(DragAndDropContext.Provider, { value: contextValue },
-            React.createElement(Flex, { flexDirection: "column", className: clsx('ab-ModuleSelector twa:flex-1', className) },
-                React.createElement(UnusedPanel, { title: unusedPanelTitle, disabled: disabled, items: allowedItems, dragItemText: dragItemText }),
-                React.createElement(Card, { className: "twa:flex-1 twa:m-2 ab-ModuleSelector-UsedPanel" },
-                    React.createElement(Card.Title, { border: false }, tabsTitle),
-                    React.createElement(Card.Body, { className: "twa:px-2" },
-                        React.createElement(TabList, { disabled: disabled, tabs: tabs, onTabsChange: onTabsChange, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName, onNewTab: contextValue.permittedActions.createTab ? handleTabAdd : undefined })))))));
+    return (_jsx(DragDropProvider, { children: _jsx(DragAndDropContext.Provider, { value: contextValue, children: _jsxs(Flex, { flexDirection: "column", className: clsx('ab-ModuleSelector twa:flex-1', className), children: [_jsx(UnusedPanel, { title: unusedPanelTitle, disabled: disabled, items: allowedItems, dragItemText: dragItemText }), _jsxs(Card, { className: "twa:flex-1 twa:m-2 ab-ModuleSelector-UsedPanel", children: [_jsx(Card.Title, { border: false, children: tabsTitle }), _jsx(Card.Body, { className: "twa:px-2", children: _jsx(TabList, { disabled: disabled, tabs: tabs, onTabsChange: onTabsChange, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName, onNewTab: contextValue.permittedActions.createTab ? handleTabAdd : undefined }) })] })] }) }) }));
 };

package/src/components/DragAndDropContext/TabList.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { defaultDragProxyMove, DragList } from '../dnd';
 import { Icon } from '../icons';
@@ -17,40 +18,29 @@ export function TabList({ tabs, onTabsChange, onRemoveTab, onRemoveToolbar, onCh
         tabIdsRef.current.set(tab, newId);
         return newId;
     }, []);
-    return (React.createElement(DragList, { dragListId: "TABS", orientation: "horizontal", dragStrategy: "proxy", preserveDragSpace: true, onDragProxyMove: defaultDragProxyMove, onDrop: (sortedIndexes) => {
+    return (_jsx(DragList, { dragListId: "TABS", orientation: "horizontal", dragStrategy: "proxy", preserveDragSpace: true, onDragProxyMove: defaultDragProxyMove, onDrop: (sortedIndexes) => {
             const newTabs = sortedIndexes.map((i) => tabs[i]);
             onTabsChange(newTabs);
-        } }, (listDomProps) => (React.createElement("div", { ...listDomProps, className: clsx('ab-ModuleSelector__TabList twa:flex twa:flex-1 twa:overflow-auto', listDomProps.className), "data-name": "dashboard-tabs" },
-        tabs.map((tab, tabIndex) => {
-            const tabId = getTabStableId(tab);
-            return (React.createElement(TabItem, { disabled: disabled, key: tabIndex, tabId: tabId, tabIndex: tabIndex, tabs: tabs, onTabsChange: onTabsChange, tab: tab, onRemove: () => onRemoveTab(tabIndex), onRemoveToolbar: (toolbarIndex) => onRemoveToolbar(tabIndex, toolbarIndex), onChangeTabName: (tabName) => onChangeTabName(tabIndex, tabName) }));
-        }),
-        !disabled && onNewTab ? (React.createElement(Flex, { alignItems: "center", justifyContent: "center", className: "ab-ModuleSelector__TabItem twa:min-w-32 twa:border-dashed twa:cursor-pointer twa:bg-primarylight twa:text-primary-foreground twa:hover:bg-primary", onClick: onNewTab },
-            React.createElement("div", { className: "twa:text-8 twa:flex twa:flex-col twa:gap-4 twa:items-center twa:italic" },
-                React.createElement(Icon, { name: "plus", size: 32 }),
-                "Click to add tab"))) : null))));
+        }, children: (listDomProps) => (_jsxs("div", { ...listDomProps, className: clsx('ab-ModuleSelector__TabList twa:flex twa:flex-1 twa:overflow-auto', listDomProps.className), "data-name": "dashboard-tabs", children: [tabs.map((tab, tabIndex) => {
+                    const tabId = getTabStableId(tab);
+                    return (_jsx(TabItem, { disabled: disabled, tabId: tabId, tabIndex: tabIndex, tabs: tabs, onTabsChange: onTabsChange, tab: tab, onRemove: () => onRemoveTab(tabIndex), onRemoveToolbar: (toolbarIndex) => onRemoveToolbar(tabIndex, toolbarIndex), onChangeTabName: (tabName) => onChangeTabName(tabIndex, tabName) }, tabIndex));
+                }), !disabled && onNewTab ? (_jsx(Flex, { alignItems: "center", justifyContent: "center", className: "ab-ModuleSelector__TabItem twa:min-w-32 twa:border-dashed twa:cursor-pointer twa:bg-primarylight twa:text-primary-foreground twa:hover:bg-primary", onClick: onNewTab, children: _jsxs("div", { className: "twa:text-8 twa:flex twa:flex-col twa:gap-4 twa:items-center twa:italic", children: [_jsx(Icon, { name: "plus", size: 32 }), "Click to add tab"] }) })) : null] })) }));
 }
 export function TabItem({ tab, tabId, tabIndex, tabs, onTabsChange, onRemove, onRemoveToolbar, onChangeTabName, disabled, }) {
     const context = React.useContext(DragAndDropContext);
     const isDragDisabled = disabled || !context.permittedActions.dragAndDropTab;
-    return (React.createElement(DragList.DraggableItem, { dragListId: "TABS", id: tabId }, (itemDomProps) => {
-        const { onPointerDown, ...restDomProps } = itemDomProps;
-        let showHeader = true;
-        if (tab.Name === '' &&
-            !context.permittedActions.editTabName &&
-            !context.permittedActions.deleteTab) {
-            showHeader = false;
-        }
-        return (React.createElement("div", { ...restDomProps, className: clsx('twa:bg-defaultbackground', 'twa:select-none', 'ab-ModuleSelector__TabItem twa:min-w-32', restDomProps.className), "data-name": "dashboard-tab" },
-            showHeader ? (React.createElement("div", { className: "ab-ModuleSelector__TabItem__header" },
-                React.createElement("div", { ...(!isDragDisabled ? { onPointerDown } : {}), style: context.permittedActions.dragAndDropTab ? {} : { display: 'none' } },
-                    React.createElement(Icon, { name: "drag" })),
-                context.permittedActions.editTabName ? (React.createElement("input", { className: "ab-ModuleSelector__TabItem__header-input", type: "text", disabled: disabled, value: tab.Name, onChange: (event) => {
-                        onChangeTabName(event.target.value);
-                    } })) : (tab.Name),
-                context.permittedActions.deleteTab && (React.createElement(SimpleButton, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove })))) : null,
-            React.createElement(ToolbarList, { disabled: disabled, toolbars: tab.Items, tabIndex: tabIndex, tabs: tabs, onTabsChange: onTabsChange, onRemove: onRemoveToolbar })));
-    }));
+    return (_jsx(DragList.DraggableItem, { dragListId: "TABS", id: tabId, children: (itemDomProps) => {
+            const { onPointerDown, ...restDomProps } = itemDomProps;
+            let showHeader = true;
+            if (tab.Name === '' &&
+                !context.permittedActions.editTabName &&
+                !context.permittedActions.deleteTab) {
+                showHeader = false;
+            }
+            return (_jsxs("div", { ...restDomProps, className: clsx('twa:bg-defaultbackground', 'twa:select-none', 'ab-ModuleSelector__TabItem twa:min-w-32', restDomProps.className), "data-name": "dashboard-tab", children: [showHeader ? (_jsxs("div", { className: "ab-ModuleSelector__TabItem__header", children: [_jsx("div", { ...(!isDragDisabled ? { onPointerDown } : {}), style: context.permittedActions.dragAndDropTab ? {} : { display: 'none' }, children: _jsx(Icon, { name: "drag" }) }), context.permittedActions.editTabName ? (_jsx("input", { className: "ab-ModuleSelector__TabItem__header-input", type: "text", disabled: disabled, value: tab.Name, onChange: (event) => {
+                                    onChangeTabName(event.target.value);
+                                } })) : (tab.Name), context.permittedActions.deleteTab && (_jsx(SimpleButton, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove }))] })) : null, _jsx(ToolbarList, { disabled: disabled, toolbars: tab.Items, tabIndex: tabIndex, tabs: tabs, onTabsChange: onTabsChange, onRemove: onRemoveToolbar })] }));
+        } }));
 }
 export function ToolbarList({ toolbars, tabIndex, tabs, onTabsChange, onRemove, disabled, }) {
     const acceptDropsFrom = React.useMemo(() => {
@@ -61,7 +51,7 @@ export function ToolbarList({ toolbars, tabIndex, tabs, onTabsChange, onRemove,
         });
         return sources;
     }, [tabIndex, tabs]);
-    return (React.createElement(DragList, { dragListId: String(tabIndex), orientation: "vertical", acceptDropsFrom: [...acceptDropsFrom, String(tabIndex)], onDragProxyMove: defaultDragProxyMove, 
+    return (_jsx(DragList, { dragListId: String(tabIndex), orientation: "vertical", acceptDropsFrom: [...acceptDropsFrom, String(tabIndex)], onDragProxyMove: defaultDragProxyMove, 
         // this is called when reordering inside the same list
         onDrop: (sortedIndexes) => {
             const newItems = sortedIndexes.map((i) => toolbars[i]);
@@ -87,21 +77,17 @@ export function ToolbarList({ toolbars, tabIndex, tabs, onTabsChange, onRemove,
                 return { ...tab, Items: items };
             });
             onTabsChange(newTabs);
-        } }, (listDomProps, context) => (React.createElement(Box, { ...listDomProps, className: clsx('ab-ModuleSelector__ToolbarList', listDomProps.className, {
-            'twa:bg-(--ab-dashboard-tab-drop-target__background) ab-ModuleSelector__ToolbarList--accent-drop': context.dropTargetListId === String(tabIndex) && context.status === 'accepted',
-            'twa:bg-error/30 ab-ModuleSelector__ToolbarList--reject-drop': context.dropTargetListId === String(tabIndex) && context.status === 'rejected',
-        }), "data-name": "dashboard-toolbar-drop-target" },
-        toolbars?.map((toolbar, toolbarIndex) => (React.createElement(ToolbarItem, { disabled: disabled, key: toolbar, toolbar: toolbar, onRemove: () => onRemove(toolbarIndex) }))),
-        toolbars.length === 0 ? (React.createElement("div", { className: "ab-ModuleSelector__ToolbarList__placeholder twa:flex twa:items-center twa:justify-center twa:h-full twa:italic twa:text-center" }, "Drag and drop toolbar here")) : null))));
+        }, children: (listDomProps, context) => (_jsxs(Box, { ...listDomProps, className: clsx('ab-ModuleSelector__ToolbarList', listDomProps.className, {
+                'twa:bg-(--ab-dashboard-tab-drop-target__background) ab-ModuleSelector__ToolbarList--accent-drop': context.dropTargetListId === String(tabIndex) && context.status === 'accepted',
+                'twa:bg-error/30 ab-ModuleSelector__ToolbarList--reject-drop': context.dropTargetListId === String(tabIndex) && context.status === 'rejected',
+            }), "data-name": "dashboard-toolbar-drop-target", children: [toolbars?.map((toolbar, toolbarIndex) => (_jsx(ToolbarItem, { disabled: disabled, toolbar: toolbar, onRemove: () => onRemove(toolbarIndex) }, toolbar))), toolbars.length === 0 ? (_jsx("div", { className: "ab-ModuleSelector__ToolbarList__placeholder twa:flex twa:items-center twa:justify-center twa:h-full twa:italic twa:text-center", children: "Drag and drop toolbar here" })) : null] })) }));
 }
 export function ToolbarItem({ toolbar, onRemove, disabled, }) {
     const { availableItems } = React.useContext(DragAndDropContext);
     const currentItem = availableItems.find((t) => t.Id === toolbar);
     const title = currentItem ? currentItem.Title : toolbar;
-    return (React.createElement(DragList.DraggableItem, { id: toolbar }, (itemDomProps) => {
-        const { onPointerDown, ...restDomProps } = itemDomProps;
-        return (React.createElement(Flex, { ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: clsx('ab-ModuleSelector__ToolbarItem twa:mb-1 twa:pl-1 twa:text-3', 'twa:bg-primarylight', restDomProps.className), alignItems: "center" },
-            React.createElement("div", { className: "twa:flex-1" }, title),
-            React.createElement(SimpleButton, { disabled: disabled, icon: "close", variant: "text", className: "twa:p-1", onClick: onRemove })));
-    }));
+    return (_jsx(DragList.DraggableItem, { id: toolbar, children: (itemDomProps) => {
+            const { onPointerDown, ...restDomProps } = itemDomProps;
+            return (_jsxs(Flex, { ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: clsx('ab-ModuleSelector__ToolbarItem twa:mb-1 twa:pl-1 twa:text-3', 'twa:bg-primarylight', restDomProps.className), alignItems: "center", children: [_jsx("div", { className: "twa:flex-1", children: title }), _jsx(SimpleButton, { disabled: disabled, icon: "close", variant: "text", className: "twa:p-1", onClick: onRemove })] }));
+        } }));
 }