@studio-helga/once-ui-core 1.7.8

package/dist/components/Dialog.module.scss

@@ -0,0 +1,33 @@
+@use "../styles/breakpoints.scss" as breakpoints;
+
+.overlay {
+    opacity: 0;
+    visibility: hidden;
+
+    &.open {
+        opacity: 1;
+        visibility: visible;
+    }
+}
+
+.dialog {
+    max-width: 40rem;
+    max-height: 100%;
+    transform: scale(0.2);
+    opacity: 0;
+
+    &.open {
+        transform: scale(1);
+        opacity: 1;
+        visibility: visible;
+    }
+
+    @include breakpoints.m {
+        position: fixed;
+        bottom: var(--static-space-8);
+        left: var(--static-space-8);
+        right: var(--static-space-8);
+        top: var(--static-space-8);
+        max-width: calc(100% - var(--static-space-16)) !important;
+    }
+}

package/dist/components/Dropdown.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+import { Row } from ".";
+interface DropdownProps extends Omit<React.ComponentProps<typeof Row>, "onSelect"> {
+    selectedOption?: string;
+    children?: ReactNode;
+    onEscape?: () => void;
+    onSelect?: (event: string) => void;
+    disabled?: boolean;
+}
+declare const Dropdown: React.ForwardRefExoticComponent<Omit<DropdownProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Dropdown };
+export type { DropdownProps };
+//# sourceMappingURL=Dropdown.d.ts.map

package/dist/components/Dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../src/components/Dropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA8B,MAAM,OAAO,CAAC;AACrE,OAAO,EAAU,GAAG,EAAE,MAAM,GAAG,CAAC;AAEhC,UAAU,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,UAAU,CAAC;IAChF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,mGAoCb,CAAC;AAIF,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/Dropdown.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Column, Row } from ".";
+const Dropdown = forwardRef(({ selectedOption, className, children, onEscape, onSelect, disabled = false, ...flex }, ref) => {
+    const handleSelect = (event) => {
+        if (disabled)
+            return;
+        // Only handle clicks on elements that have a data-value attribute
+        const target = event.target;
+        const value = target.getAttribute("data-value") ||
+            target.closest("[data-value]")?.getAttribute("data-value");
+        if (onSelect && value) {
+            onSelect(value);
+        }
+    };
+    return (_jsx(Row, { ref: ref, role: "listbox", onClick: handleSelect, flex: 1, border: "neutral-medium", background: "surface", overflow: "hidden", className: disabled ? "cursor-not-allowed" : undefined, style: { opacity: disabled ? 0.6 : undefined }, "aria-disabled": disabled, ...flex, children: _jsx(Column, { flex: 1, overflowY: "auto", gap: "2", children: children }) }));
+});
+Dropdown.displayName = "Dropdown";
+export { Dropdown };
+//# sourceMappingURL=Dropdown.js.map

package/dist/components/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../src/components/Dropdown.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAa,UAAU,EAAkB,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,CAAC;AAUhC,MAAM,QAAQ,GAAG,UAAU,CACzB,CAAC,EAAE,cAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IAC9F,MAAM,YAAY,GAAG,CAAC,KAAqC,EAAE,EAAE;QAC7D,IAAI,QAAQ;YAAE,OAAO;QAErB,kEAAkE;QAClE,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC3C,MAAM,KAAK,GACT,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC;YACjC,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC;QAE7D,IAAI,QAAQ,IAAI,KAAK,EAAE,CAAC;YACtB,QAAQ,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,GAAG,IACF,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,CAAC,EACP,MAAM,EAAC,gBAAgB,EACvB,UAAU,EAAC,SAAS,EACpB,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS,EACtD,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,mBAC/B,QAAQ,KACnB,IAAI,YAER,KAAC,MAAM,IAAC,IAAI,EAAE,CAAC,EAAE,SAAS,EAAC,MAAM,EAAC,GAAG,EAAC,GAAG,YACtC,QAAQ,GACF,GACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAElC,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/DropdownWrapper.d.ts

@@ -0,0 +1,29 @@
+import React, { ReactNode } from "react";
+import { Placement } from "@floating-ui/react-dom";
+import { NavigationLayout } from "../hooks/useArrowNavigation";
+export interface DropdownWrapperProps {
+    fillWidth?: boolean;
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    placement?: Placement;
+    trigger: ReactNode;
+    dropdown: ReactNode;
+    selectedOption?: string;
+    style?: React.CSSProperties;
+    className?: string;
+    onSelect?: (value: string) => void;
+    closeAfterClick?: boolean;
+    handleArrowNavigation?: boolean;
+    isOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    isNested?: boolean;
+    navigationLayout?: NavigationLayout;
+    columns?: number | string;
+    optionsCount?: number;
+    dropdownId?: string;
+    disableTriggerClick?: boolean;
+}
+declare const DropdownWrapper: React.ForwardRefExoticComponent<DropdownWrapperProps & React.RefAttributes<HTMLDivElement>>;
+export { DropdownWrapper };
+//# sourceMappingURL=DropdownWrapper.d.ts.map

package/dist/components/DropdownWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownWrapper.d.ts","sourceRoot":"","sources":["../../src/components/DropdownWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAKZ,SAAS,EAMV,MAAM,OAAO,CAAC;AAEf,OAAO,EAOL,SAAS,EACV,MAAM,wBAAwB,CAAC;AAGhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAE/D,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAKD,QAAA,MAAM,eAAe,6FAiuBpB,CAAC;AAGF,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/DropdownWrapper.js

@@ -0,0 +1,505 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle, useCallback, } from "react";
+import { createPortal } from "react-dom";
+import { useFloating, shift, offset, flip, size, autoUpdate, } from "@floating-ui/react-dom";
+import { Flex, Dropdown, Column, Row, FocusTrap, ArrowNavigation, ScrollLock } from ".";
+import styles from "./DropdownWrapper.module.scss";
+// Global state to track the last opened dropdown
+let dropdownCounter = 0;
+const DropdownWrapper = forwardRef(({ trigger, dropdown, selectedOption, minHeight, onSelect, closeAfterClick = true, isOpen: controlledIsOpen, handleArrowNavigation = true, onOpenChange, minWidth, maxWidth, fillWidth = false, placement = "bottom-start", className, style, isNested = false, navigationLayout: propNavigationLayout, columns = 8, optionsCount: propOptionsCount, dropdownId: propDropdownId, disableTriggerClick = false, }, ref) => {
+    const [internalIsOpen, setInternalIsOpen] = useState(false);
+    const [mounted, setMounted] = useState(false);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    // Use provided dropdownId or generate a unique ID for this dropdown
+    const dropdownId = useRef(propDropdownId || `dropdown-${dropdownCounter++}`);
+    const wrapperRef = useRef(null);
+    const triggerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const isControlled = controlledIsOpen !== undefined;
+    const isOpen = isControlled ? controlledIsOpen : internalIsOpen;
+    const handleOpenChange = useCallback((newIsOpen) => {
+        if (newIsOpen) {
+            // Close any other open dropdown before opening this one
+            if (window.lastOpenedDropdown && window.lastOpenedDropdown !== dropdownId.current) {
+                // Dispatch event to close other dropdowns
+                const closeEvent = new CustomEvent('close-other-dropdowns', {
+                    detail: { exceptId: dropdownId.current }
+                });
+                document.dispatchEvent(closeEvent);
+                // Small delay to let the other dropdown close and restore scroll first
+                setTimeout(() => {
+                    if (!isControlled) {
+                        setInternalIsOpen(true);
+                    }
+                    window.lastOpenedDropdown = dropdownId.current;
+                    onOpenChange?.(true);
+                }, 50);
+                return;
+            }
+            // Set this as the last opened dropdown using global variable
+            window.lastOpenedDropdown = dropdownId.current;
+        }
+        else {
+            // Clear the last opened dropdown if this one is closing
+            if (window.lastOpenedDropdown === dropdownId.current) {
+                window.lastOpenedDropdown = null;
+            }
+        }
+        if (!isControlled) {
+            setInternalIsOpen(newIsOpen);
+        }
+        onOpenChange?.(newIsOpen);
+    }, [onOpenChange, isControlled, isNested]);
+    // State to track if we're in a browser environment for portal rendering
+    const [isBrowser, setIsBrowser] = useState(false);
+    useEffect(() => {
+        setIsBrowser(true);
+    }, []);
+    // Store the reference element's width for fillWidth calculation
+    const [referenceWidth, setReferenceWidth] = useState(null);
+    // We'll measure the width directly in the floating UI middleware
+    const { x, y, strategy, refs, update } = useFloating({
+        placement: placement,
+        open: isOpen,
+        middleware: [
+            offset(4),
+            minHeight ? undefined : flip(),
+            shift(),
+            size({
+                apply({ availableWidth, availableHeight, elements }) {
+                    // Get the width directly from the trigger element when needed
+                    let width = "auto";
+                    if (fillWidth && triggerRef.current) {
+                        const triggerWidth = triggerRef.current.getBoundingClientRect().width;
+                        width = `${Math.max(triggerWidth, 200)}px`;
+                    }
+                    Object.assign(elements.floating.style, {
+                        width: width,
+                        minWidth: minWidth ? `${minWidth}rem` : fillWidth ? width : undefined,
+                        maxWidth: maxWidth ? `${maxWidth}rem` : `${availableWidth}px`,
+                        minHeight: `${Math.min(minHeight || 0)}px`,
+                        maxHeight: `${availableHeight}px`,
+                    });
+                },
+            }),
+        ],
+        whileElementsMounted: autoUpdate,
+    });
+    useImperativeHandle(ref, () => wrapperRef.current);
+    useEffect(() => {
+        if (wrapperRef.current) {
+            refs.setReference(wrapperRef.current);
+            // Store the reference element's width for fillWidth calculation
+            if (fillWidth) {
+                setReferenceWidth(wrapperRef.current.getBoundingClientRect().width);
+            }
+        }
+    }, [refs, mounted, fillWidth]);
+    useEffect(() => {
+        if (!mounted) {
+            setMounted(true);
+        }
+    }, [mounted]);
+    // Store the previously focused element to restore focus when dropdown closes
+    const previouslyFocusedElement = useRef(null);
+    // Force update when dropdown opens
+    useEffect(() => {
+        if (isOpen && mounted) {
+            // Small delay to ensure DOM is ready
+            const timeoutId = setTimeout(() => {
+                update();
+            }, 0);
+            return () => clearTimeout(timeoutId);
+        }
+    }, [isOpen, mounted, update]);
+    useEffect(() => {
+        if (isOpen && mounted) {
+            // Store the currently focused element before focusing the dropdown
+            previouslyFocusedElement.current = document.activeElement;
+            requestAnimationFrame(() => {
+                if (dropdownRef.current) {
+                    refs.setFloating(dropdownRef.current);
+                    update();
+                    // Reset focus index when opening
+                    setFocusedIndex(-1);
+                    const focusableElements = dropdownRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+                    if (focusableElements.length > 0) {
+                        focusableElements[0].focus({ preventScroll: true });
+                    }
+                    const optionElements = dropdownRef.current
+                        ? Array.from(dropdownRef.current.querySelectorAll('.option, [role="option"], [data-value]'))
+                        : [];
+                    if (optionElements.length > 0) {
+                        setFocusedIndex(0);
+                        optionElements.forEach((el, i) => {
+                            if (i === 0) {
+                                el.classList.add("highlighted");
+                            }
+                            else {
+                                el.classList.remove("highlighted");
+                            }
+                        });
+                    }
+                }
+            });
+        }
+        else if (!isOpen && previouslyFocusedElement.current) {
+            // Only try to focus if the element is still in the document
+            if (document.contains(previouslyFocusedElement.current)) {
+                previouslyFocusedElement.current.focus({ preventScroll: true });
+            }
+        }
+    }, [isOpen, mounted, refs, update]);
+    const handleClickOutside = useCallback((event) => {
+        const target = event.target;
+        // Check if the click is inside the dropdown or the wrapper
+        const isClickInDropdown = dropdownRef.current && dropdownRef.current.contains(target);
+        const isClickInWrapper = wrapperRef.current && wrapperRef.current.contains(target);
+        // Check if the click is on a dropdown trigger (for nested dropdowns)
+        const isClickOnDropdownTrigger = target.closest(".dropdown-trigger") !== null;
+        // Check if the click is on the dropdown portal itself
+        const isClickOnDropdownPortal = target.closest(".dropdown-portal") !== null;
+        // Check if the click is on any dropdown-related element
+        const isClickOnDropdownElement = target.closest('[data-role="dropdown-wrapper"]') !== null ||
+            target.closest('[data-role="dropdown-portal"]') !== null ||
+            target.closest('[data-is-dropdown="true"]') !== null;
+        // Only close if the click is outside both the dropdown and the wrapper
+        // and not on a nested dropdown trigger or dropdown portal
+        if (!isClickInDropdown &&
+            !isClickInWrapper &&
+            !isClickOnDropdownTrigger &&
+            !isClickOnDropdownPortal &&
+            !isClickOnDropdownElement) {
+            handleOpenChange(false);
+            setFocusedIndex(-1);
+        }
+        else {
+            // If click is inside dropdown but not on an option, try to close nested dropdowns
+            if (isClickInDropdown || isClickOnDropdownPortal) {
+                // Try to close all other dropdown portals
+                const allPortals = document.querySelectorAll('[data-role="dropdown-portal"]');
+                allPortals.forEach((portal, index) => {
+                    if (portal !== dropdownRef.current) {
+                        // Try to find the dropdown wrapper that contains this portal
+                        const wrapper = portal.closest('[data-role="dropdown-wrapper"]');
+                        if (wrapper) {
+                            const trigger = wrapper.querySelector(".dropdown-trigger");
+                            if (trigger) {
+                                trigger.click();
+                            }
+                        }
+                    }
+                });
+            }
+        }
+    }, [handleOpenChange]);
+    const handleFocusOut = useCallback((event) => {
+        // Check if focus moved to the dropdown or stayed in the wrapper
+        const isFocusInDropdown = dropdownRef.current && dropdownRef.current.contains(event.relatedTarget);
+        const isFocusInWrapper = wrapperRef.current && wrapperRef.current.contains(event.relatedTarget);
+        // Only close if focus moved outside both the dropdown and the wrapper
+        if (!isFocusInDropdown && !isFocusInWrapper) {
+            handleOpenChange(false);
+            setFocusedIndex(-1);
+        }
+    }, [handleOpenChange]);
+    useEffect(() => {
+        const currentWrapperRef = wrapperRef.current;
+        document.addEventListener("click", handleClickOutside);
+        currentWrapperRef?.addEventListener("focusout", handleFocusOut);
+        // Listen for close-nested-dropdowns events if this is a nested dropdown
+        const handleCloseNestedDropdowns = () => {
+            if (isNested && isOpen) {
+                handleOpenChange(false);
+                setFocusedIndex(-1);
+            }
+        };
+        // Listen for close-other-dropdowns event to close this dropdown when another opens
+        const handleCloseOtherDropdowns = (e) => {
+            const customEvent = e;
+            const exceptId = customEvent.detail?.exceptId;
+            // Close this dropdown if it's not the one being excepted
+            if (isOpen && dropdownId.current !== exceptId) {
+                handleOpenChange(false);
+                setFocusedIndex(-1);
+            }
+        };
+        document.addEventListener("close-nested-dropdowns", handleCloseNestedDropdowns);
+        document.addEventListener("close-other-dropdowns", handleCloseOtherDropdowns);
+        return () => {
+            document.removeEventListener("click", handleClickOutside);
+            currentWrapperRef?.removeEventListener("focusout", handleFocusOut);
+            document.removeEventListener("close-nested-dropdowns", handleCloseNestedDropdowns);
+            document.removeEventListener("close-other-dropdowns", handleCloseOtherDropdowns);
+        };
+    }, [handleClickOutside, handleFocusOut, isNested, isOpen, handleOpenChange]);
+    // Get options from the dropdown
+    const getOptions = useCallback(() => {
+        if (!dropdownRef.current)
+            return [];
+        return Array.from(dropdownRef.current.querySelectorAll('.option, [role="option"], [data-value]'));
+    }, []);
+    // Track hover on options to sync with keyboard navigation
+    useEffect(() => {
+        if (!isOpen || !dropdownRef.current)
+            return;
+        const handleOptionHover = (e) => {
+            const target = e.target;
+            const option = target.closest('[role="option"], [data-value]');
+            if (option && dropdownRef.current?.contains(option)) {
+                const options = getOptions();
+                const index = options.indexOf(option);
+                if (index >= 0 && index !== focusedIndex) {
+                    setFocusedIndex(index);
+                }
+            }
+        };
+        const dropdown = dropdownRef.current;
+        dropdown.addEventListener('mouseover', handleOptionHover);
+        return () => {
+            dropdown.removeEventListener('mouseover', handleOptionHover);
+        };
+    }, [isOpen, focusedIndex, getOptions]);
+    // Determine the appropriate navigation layout
+    const determineNavigationLayout = useCallback(() => {
+        // Use the prop if provided, otherwise default to column
+        if (propNavigationLayout) {
+            return propNavigationLayout;
+        }
+        // Default to column layout for most dropdowns
+        return "column";
+    }, [propNavigationLayout]);
+    const [navigationLayout, setNavigationLayout] = useState(propNavigationLayout || "column");
+    const [optionsCount, setOptionsCount] = useState(propOptionsCount || 0);
+    // Update options count when dropdown opens or content changes
+    useEffect(() => {
+        if (isOpen) {
+            // If optionsCount is provided as a prop, use it
+            if (propOptionsCount !== undefined) {
+                setOptionsCount(propOptionsCount);
+            }
+            else {
+                const options = getOptions();
+                setOptionsCount(options.length);
+            }
+            // Try to determine the layout based on the dropdown content or props
+            setNavigationLayout(determineNavigationLayout());
+        }
+    }, [isOpen, getOptions, determineNavigationLayout, propOptionsCount]);
+    // Handle option selection
+    const handleOptionSelect = useCallback((index) => {
+        const options = getOptions();
+        if (index >= 0 && index < options.length) {
+            options[index].click();
+            if (closeAfterClick) {
+                handleOpenChange(false);
+                setFocusedIndex(-1);
+            }
+        }
+    }, [getOptions, closeAfterClick, handleOpenChange]);
+    // Handle focus change
+    const handleFocusChange = useCallback((index) => {
+        setFocusedIndex(index);
+        const options = getOptions();
+        if (index >= 0 && index < options.length && dropdownRef.current) {
+            // Scroll within the dropdown container only, not the page
+            const option = options[index];
+            const container = dropdownRef.current;
+            const optionRect = option.getBoundingClientRect();
+            const containerRect = container.getBoundingClientRect();
+            // Check if option is outside visible area of container
+            if (optionRect.bottom > containerRect.bottom) {
+                option.scrollIntoView({ block: "nearest", behavior: "auto" });
+            }
+            else if (optionRect.top < containerRect.top) {
+                option.scrollIntoView({ block: "nearest", behavior: "auto" });
+            }
+        }
+    }, [getOptions]);
+    // Handle keyboard navigation
+    const handleKeyDown = useCallback((e) => {
+        if (!isOpen) {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleOpenChange(true);
+            }
+            return;
+        }
+        if (e.key === "Escape") {
+            e.preventDefault();
+            handleOpenChange(false);
+            setFocusedIndex(-1);
+            return;
+        }
+        // Handle tab key for focus trapping
+        if (e.key === "Tab" && dropdownRef.current) {
+            // Find all focusable elements in the dropdown
+            const focusableElements = Array.from(dropdownRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'));
+            if (focusableElements.length === 0)
+                return;
+            // Get the first and last focusable elements
+            const firstElement = focusableElements[0];
+            const lastElement = focusableElements[focusableElements.length - 1];
+            // Handle tab and shift+tab to cycle through focusable elements
+            if (e.shiftKey) {
+                // Shift+Tab
+                if (document.activeElement === firstElement) {
+                    e.preventDefault();
+                    lastElement.focus();
+                }
+            }
+            else {
+                // Tab
+                if (document.activeElement === lastElement) {
+                    e.preventDefault();
+                    firstElement.focus();
+                }
+            }
+            return;
+        }
+        // If handleArrowNavigation is false, forward keyboard events to the dropdown content
+        if (!handleArrowNavigation && dropdownRef.current) {
+            // Let the dropdown content handle arrow keys, enter, space, etc.
+            return;
+        }
+        // Arrow key navigation will be handled by ArrowNavigation component
+        // Enter/Space key selection will be handled by ArrowNavigation component
+    }, [isOpen, handleOpenChange, handleArrowNavigation]);
+    return (_jsxs(_Fragment, { children: [_jsx(ScrollLock, { enabled: isOpen, allowScrollInElement: dropdownRef }), _jsxs(Column, { fillWidth: fillWidth, fitWidth: !fillWidth, transition: "macro-medium", style: {
+                    ...style,
+                }, className: className, ref: wrapperRef, onClick: disableTriggerClick
+                    ? undefined
+                    : (e) => {
+                        if (!isOpen) {
+                            handleOpenChange(true);
+                            return;
+                        }
+                    }, onKeyDown: handleKeyDown, tabIndex: -1, role: "button", "aria-haspopup": "listbox", "aria-expanded": isOpen, "data-role": "dropdown-wrapper", children: [_jsx(Row, { ref: triggerRef, fillWidth: fillWidth, fitWidth: !fillWidth, onClick: disableTriggerClick
+                            ? undefined
+                            : (e) => {
+                                // If already open, close on trigger click
+                                if (isOpen) {
+                                    handleOpenChange(false);
+                                    return;
+                                }
+                                handleOpenChange(true);
+                            }, onKeyDown: (e) => {
+                            handleKeyDown(e);
+                        }, role: "button", "data-is-dropdown": "true", "aria-haspopup": "true", "aria-expanded": isOpen, className: "dropdown-trigger", children: trigger }), isOpen &&
+                        dropdown &&
+                        isBrowser &&
+                        createPortal(_jsx(FocusTrap, { active: isOpen, onEscape: () => handleOpenChange(false), autoFocus: true, restoreFocus: true, children: handleArrowNavigation ? (_jsx(ArrowNavigation, { layout: navigationLayout, itemCount: optionsCount, columns: typeof columns === "string" ? parseInt(columns, 10) || 8 : columns, onSelect: handleOptionSelect, onFocusChange: handleFocusChange, wrap: true, autoFocus: true, initialFocusedIndex: focusedIndex, itemSelector: '.option, [role="option"], [data-value]', role: navigationLayout === "grid" ? "grid" : "listbox", "aria-label": "Dropdown options", disabled: window.lastOpenedDropdown !== dropdownId.current, children: _jsx(Flex, { zIndex: 9, className: `${styles.fadeIn} dropdown-portal`, minWidth: minWidth, ref: dropdownRef, style: {
+                                        position: strategy,
+                                        top: y ?? 0,
+                                        left: x ?? 0,
+                                    }, "data-role": "dropdown-portal", "data-is-dropdown": "true", "data-dropdown-id": dropdownId.current, "data-is-active": window.lastOpenedDropdown === dropdownId.current, onKeyDown: (e) => {
+                                        // If handleArrowNavigation is false, let all keyboard events pass through
+                                        if (!handleArrowNavigation) {
+                                            return;
+                                        }
+                                        // Let FocusTrap handle Tab key
+                                        // Let ArrowNavigation handle arrow keys
+                                        if (e.key !== "Tab" &&
+                                            e.key !== "ArrowUp" &&
+                                            e.key !== "ArrowDown" &&
+                                            e.key !== "ArrowLeft" &&
+                                            e.key !== "ArrowRight") {
+                                            handleKeyDown(e);
+                                        }
+                                    }, onMouseDown: (e) => {
+                                        // Allow interactive elements (inputs, buttons, etc.) to work normally
+                                        const target = e.target;
+                                        const isInteractive = target.closest('input, textarea, select, button, [role="button"], a');
+                                        if (!isInteractive) {
+                                            e.preventDefault();
+                                        }
+                                    }, onPointerDown: (e) => {
+                                        // Allow interactive elements (inputs, buttons, etc.) to work normally
+                                        const target = e.target;
+                                        const isInteractive = target.closest('input, textarea, select, button, [role="button"], a');
+                                        if (!isInteractive) {
+                                            e.preventDefault();
+                                        }
+                                    }, onTouchStart: (e) => {
+                                        // Allow interactive elements (inputs, buttons, etc.) to work normally
+                                        const target = e.target;
+                                        const isInteractive = target.closest('input, textarea, select, button, [role="button"], a');
+                                        if (!isInteractive) {
+                                            e.preventDefault();
+                                        }
+                                    }, children: _jsx(Dropdown, { minWidth: minWidth, radius: "l", padding: "0", selectedOption: selectedOption, onSelect: (value) => {
+                                            onSelect?.(value);
+                                            if (closeAfterClick) {
+                                                handleOpenChange(false);
+                                                setFocusedIndex(-1);
+                                            }
+                                        }, children: React.Children.map(dropdown, (child) => {
+                                            if (React.isValidElement(child)) {
+                                                // Only add onClick handler to elements that have data-value or are interactive
+                                                const childElement = child;
+                                                const hasDataValue = childElement.props["data-value"] ||
+                                                    childElement.props.value ||
+                                                    childElement.type === "button" ||
+                                                    childElement.props.role === "option";
+                                                if (hasDataValue) {
+                                                    // Cast the child element to any to avoid TypeScript errors with unknown props
+                                                    return React.cloneElement(childElement, {
+                                                        onClick: (val) => {
+                                                            onSelect?.(val);
+                                                            if (closeAfterClick) {
+                                                                handleOpenChange(false);
+                                                                setFocusedIndex(-1);
+                                                            }
+                                                        },
+                                                    });
+                                                }
+                                                // Return the child unchanged if it doesn't need an onClick handler
+                                                return child;
+                                            }
+                                            return child;
+                                        }) }) }) })) : (_jsx(Flex, { zIndex: 9, className: `${styles.fadeIn} dropdown-portal`, minWidth: minWidth, ref: dropdownRef, style: {
+                                    position: strategy,
+                                    top: y ?? 0,
+                                    left: x ?? 0,
+                                }, "data-role": "dropdown-portal", "data-is-dropdown": "true", "data-dropdown-id": dropdownId.current, "data-is-active": window.lastOpenedDropdown === dropdownId.current, onKeyDown: (e) => {
+                                    // If handleArrowNavigation is false, let all keyboard events pass through
+                                    if (!handleArrowNavigation) {
+                                        return;
+                                    }
+                                    // Let FocusTrap handle Tab key
+                                    if (e.key !== "Tab") {
+                                        handleKeyDown(e);
+                                    }
+                                }, onMouseDown: (e) => {
+                                    // Allow interactive elements (inputs, buttons, etc.) to work normally
+                                    const target = e.target;
+                                    const isInteractive = target.closest('input, textarea, select, button, [role="button"], a');
+                                    if (!isInteractive) {
+                                        e.preventDefault();
+                                    }
+                                }, onPointerDown: (e) => {
+                                    // Allow interactive elements (inputs, buttons, etc.) to work normally
+                                    const target = e.target;
+                                    const isInteractive = target.closest('input, textarea, select, button, [role="button"], a');
+                                    if (!isInteractive) {
+                                        e.preventDefault();
+                                    }
+                                }, onTouchStart: (e) => {
+                                    // Allow interactive elements (inputs, buttons, etc.) to work normally
+                                    const target = e.target;
+                                    const isInteractive = target.closest('input, textarea, select, button, [role="button"], a');
+                                    if (!isInteractive) {
+                                        e.preventDefault();
+                                    }
+                                }, children: _jsx(Dropdown, { minWidth: minWidth, radius: "l", padding: "0", selectedOption: selectedOption, onSelect: (value) => {
+                                        onSelect?.(value);
+                                        if (closeAfterClick) {
+                                            handleOpenChange(false);
+                                            setFocusedIndex(-1);
+                                        }
+                                    }, children: dropdown }) })) }), document.body)] })] }));
+});
+DropdownWrapper.displayName = "DropdownWrapper";
+export { DropdownWrapper };
+//# sourceMappingURL=DropdownWrapper.js.map