@a3s-lab/office 0.1.0

package/dist/0~9512.js

@@ -0,0 +1,743 @@
+import { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+const focusableSelector = 'button:not(:disabled), input:not(:disabled):not([type="hidden"]), textarea:not(:disabled), select:not(:disabled), a[href], [contenteditable="true"], [tabindex]:not([tabindex="-1"])';
+const activeFocusScopes = [];
+const inertCounts = new WeakMap();
+const inertStates = new WeakMap();
+function useDialogFocusScope({ active = true, onEscape, escapeDisabled = false, passThroughCommandKeys, initialFocus, getActiveScope, getIsolationExceptions, restoreFocus = true, restoreFocusTarget } = {}) {
+    const scopeRef = useRef(null);
+    const activeScopeRef = useRef(null);
+    const optionsRef = useRef({});
+    optionsRef.current = {
+        active,
+        onEscape,
+        escapeDisabled,
+        passThroughCommandKeys,
+        initialFocus,
+        getActiveScope,
+        getIsolationExceptions,
+        restoreFocus,
+        restoreFocusTarget
+    };
+    const focusInitial = useCallback((scope = optionsRef.current.getActiveScope?.() ?? scopeRef.current)=>{
+        if (!scope) return;
+        const configured = optionsRef.current.initialFocus?.();
+        const target = configured && isAvailable(configured) ? configured : defaultInitialFocus(scope);
+        target?.focus();
+    }, []);
+    useEffect(()=>{
+        if (!active) return;
+        const scope = optionsRef.current.getActiveScope?.() ?? scopeRef.current;
+        if (!scope) return;
+        const restoreTarget = optionsRef.current.restoreFocusTarget?.() ?? dialog_focus_scope_activeElement();
+        const activeScope = {
+            focusInitial
+        };
+        activeScopeRef.current = activeScope;
+        activeFocusScopes.push(activeScope);
+        const releaseIsolation = isolateOutsideScope(scope, optionsRef.current.getIsolationExceptions?.() ?? []);
+        focusInitial();
+        const handleDocumentKeyDown = (event)=>{
+            if (!isTopScope(activeScope)) return;
+            const currentScope = optionsRef.current.getActiveScope?.() ?? scopeRef.current;
+            if (!currentScope) return;
+            handleScopedKeyDown(event, currentScope, optionsRef.current);
+        };
+        const handleDocumentFocus = (event)=>{
+            if (!isTopScope(activeScope)) return;
+            const currentScope = optionsRef.current.getActiveScope?.() ?? scopeRef.current;
+            if (currentScope && event.target instanceof Node && !currentScope.contains(event.target)) focusInitial(currentScope);
+        };
+        const recoverFocusAfterContentChange = new MutationObserver(()=>{
+            if (!isTopScope(activeScope)) return;
+            const currentScope = optionsRef.current.getActiveScope?.() ?? scopeRef.current;
+            const currentActiveElement = dialog_focus_scope_activeElement();
+            if (currentScope?.isConnected && (!currentActiveElement || !currentScope.contains(currentActiveElement))) focusInitial(currentScope);
+        });
+        recoverFocusAfterContentChange.observe(scope, {
+            childList: true,
+            subtree: true
+        });
+        document.addEventListener('keydown', handleDocumentKeyDown, true);
+        document.addEventListener('focusin', handleDocumentFocus, true);
+        return ()=>{
+            recoverFocusAfterContentChange.disconnect();
+            document.removeEventListener('keydown', handleDocumentKeyDown, true);
+            document.removeEventListener('focusin', handleDocumentFocus, true);
+            const wasTopScope = isTopScope(activeScope);
+            const index = activeFocusScopes.indexOf(activeScope);
+            if (index >= 0) activeFocusScopes.splice(index, 1);
+            if (activeScopeRef.current === activeScope) activeScopeRef.current = null;
+            releaseIsolation();
+            if (!wasTopScope) return;
+            const currentRestoreTarget = optionsRef.current.restoreFocusTarget?.() ?? restoreTarget;
+            if (false !== optionsRef.current.restoreFocus && currentRestoreTarget?.isConnected && isAvailable(currentRestoreTarget)) return void currentRestoreTarget.focus({
+                preventScroll: true
+            });
+            activeFocusScopes.at(-1)?.focusInitial();
+        };
+    }, [
+        active,
+        focusInitial
+    ]);
+    const handleKeyDown = useCallback((event)=>{
+        const activeScope = activeScopeRef.current;
+        if (!activeScope || !isTopScope(activeScope) || event.defaultPrevented) return;
+        const scope = optionsRef.current.getActiveScope?.() ?? scopeRef.current;
+        if (scope) handleScopedKeyDown(event, scope, optionsRef.current);
+    }, []);
+    return {
+        scopeRef,
+        handleKeyDown,
+        focusInitial
+    };
+}
+function handleScopedKeyDown(event, scope, options) {
+    if ('Escape' === event.key && options.onEscape && !options.escapeDisabled) {
+        event.preventDefault();
+        event.stopPropagation();
+        options.onEscape();
+        return;
+    }
+    if ('Tab' !== event.key) {
+        const commandKey = event.metaKey || event.ctrlKey;
+        const normalizedKey = event.key.toLocaleLowerCase();
+        const passThroughCommand = Boolean(commandKey && options.passThroughCommandKeys?.includes(normalizedKey));
+        if (commandKey && !passThroughCommand && [
+            'f',
+            'h',
+            'k',
+            'n',
+            'p',
+            's'
+        ].includes(normalizedKey)) event.preventDefault();
+        if ((commandKey || event.altKey) && !passThroughCommand) event.stopPropagation();
+        return;
+    }
+    const focusable = focusableElements(scope);
+    if (!focusable.length) {
+        event.preventDefault();
+        event.stopPropagation();
+        scope.focus();
+        return;
+    }
+    const activeIndex = focusable.indexOf(document.activeElement);
+    const nextIndex = event.shiftKey ? activeIndex <= 0 ? focusable.length - 1 : activeIndex - 1 : activeIndex < 0 || activeIndex >= focusable.length - 1 ? 0 : activeIndex + 1;
+    event.preventDefault();
+    event.stopPropagation();
+    focusable[nextIndex]?.focus();
+}
+function isTopScope(scope) {
+    return activeFocusScopes.at(-1) === scope;
+}
+function dialog_focus_scope_activeElement() {
+    return "u" > typeof document && document.activeElement instanceof HTMLElement ? document.activeElement : null;
+}
+function isolateOutsideScope(scope, exceptions) {
+    const allowed = exceptions.filter((element)=>Boolean(element?.isConnected));
+    const isolated = new Set();
+    let branch = scope;
+    while(branch){
+        const parent = branch.parentElement;
+        if (!parent) break;
+        for (const child of parent.children)if (child instanceof HTMLElement && child !== branch) {
+            if (!allowed.some((element)=>child === element || child.contains(element))) isolated.add(child);
+        }
+        if (parent === document.body) break;
+        branch = parent;
+    }
+    for (const element of isolated)acquireInert(element);
+    return ()=>{
+        for (const element of isolated)releaseInert(element);
+    };
+}
+function acquireInert(element) {
+    const count = inertCounts.get(element) ?? 0;
+    if (0 === count) {
+        inertStates.set(element, {
+            attribute: element.hasAttribute('inert'),
+            property: element.inert
+        });
+        element.inert = true;
+        element.setAttribute('inert', '');
+    }
+    inertCounts.set(element, count + 1);
+}
+function releaseInert(element) {
+    const count = inertCounts.get(element) ?? 0;
+    if (count > 1) return void inertCounts.set(element, count - 1);
+    inertCounts.delete(element);
+    const state = inertStates.get(element);
+    inertStates.delete(element);
+    element.inert = state?.property ?? false;
+    if (state?.attribute) element.setAttribute('inert', '');
+    else element.removeAttribute('inert');
+}
+function defaultInitialFocus(scope) {
+    const configured = scope.querySelector('[data-autofocus]');
+    if (configured && isAvailable(configured)) return configured;
+    const field = scope.querySelector('input:not(:disabled):not([type="hidden"]), textarea:not(:disabled), select:not(:disabled)');
+    if (field && isAvailable(field)) return field;
+    const safeFooterAction = scope.querySelector(':scope > footer button:not(:disabled)');
+    if (safeFooterAction && isAvailable(safeFooterAction)) return safeFooterAction;
+    return focusableElements(scope)[0] ?? null;
+}
+function focusableElements(scope) {
+    return [
+        ...scope.querySelectorAll(focusableSelector)
+    ].filter(isAvailable);
+}
+function isAvailable(element) {
+    const style = "u" < typeof window ? null : window.getComputedStyle(element);
+    return !element.matches(':disabled') && style?.display !== 'none' && style?.visibility !== 'hidden' && !element.closest('[hidden], [inert], [aria-hidden="true"]');
+}
+function officeOverlayPortalRoot(ownerDocument, ...anchors) {
+    for (const anchor of anchors){
+        const officeRoot = anchor?.closest('[data-a3s-office]');
+        if (officeRoot) return officeRoot;
+    }
+    const activeElement = ownerDocument.activeElement;
+    if (activeElement instanceof Element) {
+        const officeRoot = activeElement.closest('[data-a3s-office]');
+        if (officeRoot) return officeRoot;
+    }
+    return ownerDocument.body;
+}
+function matchesOfficeEditorKeyboardShortcut(event, shortcut) {
+    return matchesKeyboardShortcut(event, shortcutParts(shortcut, '-'));
+}
+function matchesAriaKeyShortcuts(event, shortcuts) {
+    if (!shortcuts) return false;
+    return shortcuts.split(/\s+/).filter(Boolean).some((shortcut)=>matchesKeyboardShortcut(event, shortcutParts(shortcut, '+')));
+}
+function shortcutParts(shortcut, separator) {
+    const normalized = shortcut.trim();
+    if ('+' === separator && normalized.endsWith('++')) return [
+        ...normalized.slice(0, -1).split(separator).map((part)=>part.trim().toLocaleLowerCase()).filter(Boolean),
+        'plus'
+    ];
+    return normalized.split(separator).map((part)=>part.trim().toLocaleLowerCase()).filter(Boolean);
+}
+function matchesKeyboardShortcut(event, parts) {
+    const key = parts.at(-1);
+    if (!key) return false;
+    const modifiers = new Set(parts.slice(0, -1));
+    const mod = modifiers.has('mod');
+    const control = modifiers.has('control') || modifiers.has('ctrl');
+    const meta = modifiers.has('meta') || modifiers.has('cmd');
+    const shift = modifiers.has('shift');
+    const alt = modifiers.has('alt') || modifiers.has('option');
+    if (mod && !(event.metaKey || event.ctrlKey)) return false;
+    if (!mod && event.ctrlKey !== control) return false;
+    if (!mod && event.metaKey !== meta) return false;
+    if (event.shiftKey !== shift) return false;
+    if (event.altKey !== alt) return false;
+    const eventKey = event.key.toLocaleLowerCase();
+    return eventKey === key || shortcutKeyAlias(eventKey) === key || shortcutCodeKey(event.code) === key;
+}
+function shortcutKeyAlias(key) {
+    if (' ' === key) return 'space';
+    if ('+' === key) return 'plus';
+    if ('-' === key) return 'minus';
+    if ('=' === key) return 'equal';
+    if ('esc' === key) return 'escape';
+    if ('del' === key) return 'delete';
+    return key;
+}
+function shortcutCodeKey(code) {
+    if (/^Key[A-Z]$/.test(code)) return code.slice(3).toLocaleLowerCase();
+    if (/^Digit[0-9]$/.test(code)) return code.slice(5);
+    if ('Space' === code) return 'space';
+    if ('Equal' === code) return 'equal';
+    if ('Minus' === code) return 'minus';
+    if ('Comma' === code) return ',';
+    if ('Period' === code) return '.';
+    return null;
+}
+const button_Button = /*#__PURE__*/ forwardRef(function({ tone = 'secondary', size = 'standard', loading = false, children, className = '', disabled, ...props }, ref) {
+    return /*#__PURE__*/ jsxs("button", {
+        ref: ref,
+        type: "button",
+        className: `ds-button ${tone} ${size} ${className}`,
+        disabled: disabled || loading,
+        "aria-busy": loading || void 0,
+        ...props,
+        children: [
+            loading && /*#__PURE__*/ jsx("span", {
+                className: "ds-button-spinner",
+                "aria-hidden": "true"
+            }),
+            children
+        ]
+    });
+});
+const icon_button_IconButton = /*#__PURE__*/ forwardRef(function({ label, tooltip = label, selected, children, className = '', ...props }, ref) {
+    return /*#__PURE__*/ jsx("button", {
+        ref: ref,
+        type: "button",
+        className: `ds-icon-button ${selected ? 'selected' : ''} ${className}`,
+        "aria-label": label,
+        "aria-pressed": selected,
+        title: tooltip,
+        ...props,
+        children: children
+    });
+});
+const office_text_field_OfficeTextField = /*#__PURE__*/ forwardRef(function({ className = '', type = 'text', ...props }, ref) {
+    return /*#__PURE__*/ jsx("input", {
+        ref: ref,
+        type: type,
+        className: `work-office-text-field ${className}`.trim(),
+        ...props
+    });
+});
+const office_text_field_OfficeTextArea = /*#__PURE__*/ forwardRef(function({ className = '', ...props }, ref) {
+    return /*#__PURE__*/ jsx("textarea", {
+        ref: ref,
+        className: `work-office-text-area ${className}`.trim(),
+        ...props
+    });
+});
+function CommittedOfficeTextField({ value, formatValue, parseValue, onValueCommit, ...fieldProps }) {
+    const { dirty, draft, invalid, commit, reset, setDraft } = useCommittedOfficeTextDraft({
+        value,
+        formatValue,
+        parseValue,
+        onValueCommit
+    });
+    return /*#__PURE__*/ jsx(office_text_field_OfficeTextField, {
+        ...fieldProps,
+        "aria-invalid": invalid || void 0,
+        "data-office-escape-consumer": dirty || void 0,
+        value: draft,
+        onChange: (event)=>setDraft(event.currentTarget.value),
+        onBlur: commit,
+        onKeyDown: (event)=>{
+            if ('Escape' === event.key && dirty) {
+                event.preventDefault();
+                event.stopPropagation();
+                reset();
+            } else if ('Enter' === event.key && !event.nativeEvent.isComposing) {
+                event.preventDefault();
+                event.stopPropagation();
+                commit();
+            }
+        }
+    });
+}
+function CommittedOfficeTextArea({ value, formatValue, parseValue, onValueCommit, ...textAreaProps }) {
+    const { dirty, draft, invalid, commit, reset, setDraft } = useCommittedOfficeTextDraft({
+        value,
+        formatValue,
+        parseValue,
+        onValueCommit
+    });
+    return /*#__PURE__*/ jsx(office_text_field_OfficeTextArea, {
+        ...textAreaProps,
+        "aria-invalid": invalid || void 0,
+        "data-office-escape-consumer": dirty || void 0,
+        value: draft,
+        onChange: (event)=>setDraft(event.currentTarget.value),
+        onBlur: commit,
+        onKeyDown: (event)=>{
+            if ('Escape' === event.key && dirty) {
+                event.preventDefault();
+                event.stopPropagation();
+                reset();
+            } else if ('Enter' === event.key && (event.metaKey || event.ctrlKey) && !event.nativeEvent.isComposing) {
+                event.preventDefault();
+                event.stopPropagation();
+                commit();
+            }
+        }
+    });
+}
+function useCommittedOfficeTextDraft({ value, formatValue, parseValue, onValueCommit }) {
+    const controlledDraft = formatValue(value);
+    const [draft, setDraft] = useState(controlledDraft);
+    useEffect(()=>setDraft(controlledDraft), [
+        controlledDraft
+    ]);
+    const parsed = safelyParseOfficeTextDraft(parseValue, draft);
+    const commit = ()=>{
+        if (null === parsed) return void setDraft(controlledDraft);
+        const normalizedDraft = formatValue(parsed);
+        setDraft(normalizedDraft);
+        if (normalizedDraft !== controlledDraft) onValueCommit(parsed);
+    };
+    return {
+        dirty: draft !== controlledDraft,
+        draft,
+        invalid: null === parsed,
+        commit,
+        reset: ()=>setDraft(controlledDraft),
+        setDraft
+    };
+}
+function safelyParseOfficeTextDraft(parseValue, draft) {
+    try {
+        return parseValue(draft);
+    } catch  {
+        return null;
+    }
+}
+const office_text_field_OfficeFileInput = /*#__PURE__*/ forwardRef(function({ className = '', onFileSelect, ...props }, ref) {
+    return /*#__PURE__*/ jsx("input", {
+        ref: ref,
+        type: "file",
+        className: `work-file-input ${className}`.trim(),
+        onChange: (event)=>{
+            const input = event.currentTarget;
+            const file = input.files?.[0];
+            try {
+                if (file) onFileSelect(file);
+            } finally{
+                input.value = '';
+            }
+        },
+        ...props
+    });
+});
+const FLOATING_GAP = 8;
+const FLOATING_VIEWPORT_PADDING = 16;
+const PORTAL_INHERITED_CUSTOM_PROPERTIES = [
+    '--work-office-control-accent'
+];
+const openPopoverStack = [];
+function pushOpenPopover(token) {
+    const existing = openPopoverStack.indexOf(token);
+    if (existing >= 0) openPopoverStack.splice(existing, 1);
+    openPopoverStack.push(token);
+}
+function removeOpenPopover(token) {
+    const index = openPopoverStack.lastIndexOf(token);
+    if (index >= 0) openPopoverStack.splice(index, 1);
+}
+function Popover({ label, panelLabel, trigger, children, disabled = false, className = '', panelClassName = '', panelRole = 'region', placement = 'bottom-start', portal = false, open: controlledOpen, defaultOpen = false, panelRef, focusFirstOnOpen = false, onPanelKeyDown, onOpenChange }) {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const open = controlledOpen ?? internalOpen;
+    const openRef = useRef(open);
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const panelElementRef = useRef(null);
+    const tokenRef = useRef(Symbol('popover'));
+    const panelId = useId();
+    const [floatingPosition, setFloatingPosition] = useState(null);
+    useEffect(()=>{
+        openRef.current = open;
+    }, [
+        open
+    ]);
+    const updateOpen = useCallback((next)=>{
+        if (openRef.current === next) return;
+        openRef.current = next;
+        if (void 0 === controlledOpen) setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [
+        controlledOpen,
+        onOpenChange
+    ]);
+    const close = useCallback(()=>{
+        updateOpen(false);
+        triggerRef.current?.focus({
+            preventScroll: true
+        });
+    }, [
+        updateOpen
+    ]);
+    const setPanelElement = useCallback((element)=>{
+        panelElementRef.current = element;
+        if (element && portal && rootRef.current && "u" > typeof window) {
+            const rootStyle = window.getComputedStyle(rootRef.current);
+            for (const property of PORTAL_INHERITED_CUSTOM_PROPERTIES){
+                const value = rootStyle.getPropertyValue(property).trim();
+                if (value) element.style.setProperty(property, value);
+            }
+        }
+        if ('function' == typeof panelRef) panelRef(element);
+        else if (panelRef) panelRef.current = element;
+    }, [
+        panelRef,
+        portal
+    ]);
+    const updateFloatingPosition = useCallback(()=>{
+        const trigger = triggerRef.current;
+        const panel = panelElementRef.current;
+        if (!trigger || !panel || "u" < typeof window) return;
+        const triggerBounds = trigger.getBoundingClientRect();
+        const panelBounds = panel.getBoundingClientRect();
+        const panelWidth = Math.min(panelBounds.width, Math.max(0, window.innerWidth - 2 * FLOATING_VIEWPORT_PADDING));
+        const panelHeight = Math.min(panelBounds.height, Math.max(0, window.innerHeight - 2 * FLOATING_VIEWPORT_PADDING));
+        const spaceBelow = window.innerHeight - FLOATING_VIEWPORT_PADDING - triggerBounds.bottom - FLOATING_GAP;
+        const spaceAbove = triggerBounds.top - FLOATING_GAP - FLOATING_VIEWPORT_PADDING;
+        const preferBottom = placement.startsWith('bottom');
+        const placeBelow = preferBottom ? panelHeight <= spaceBelow || spaceBelow >= spaceAbove : !(panelHeight <= spaceAbove || spaceAbove >= spaceBelow);
+        const desiredTop = placeBelow ? triggerBounds.bottom + FLOATING_GAP : triggerBounds.top - FLOATING_GAP - panelHeight;
+        const desiredLeft = placement.endsWith('end') ? triggerBounds.right - panelWidth : triggerBounds.left;
+        const next = {
+            top: clamp(desiredTop, FLOATING_VIEWPORT_PADDING, Math.max(FLOATING_VIEWPORT_PADDING, window.innerHeight - FLOATING_VIEWPORT_PADDING - panelHeight)),
+            left: clamp(desiredLeft, FLOATING_VIEWPORT_PADDING, Math.max(FLOATING_VIEWPORT_PADDING, window.innerWidth - FLOATING_VIEWPORT_PADDING - panelWidth)),
+            anchorWidth: triggerBounds.width
+        };
+        setFloatingPosition((current)=>sameFloatingPosition(current, next) ? current : next);
+    }, [
+        placement
+    ]);
+    useEffect(()=>{
+        if (!disabled || !openRef.current) return;
+        updateOpen(false);
+    }, [
+        disabled,
+        updateOpen
+    ]);
+    useEffect(()=>{
+        if (!open) return;
+        const token = tokenRef.current;
+        pushOpenPopover(token);
+        const closeFromOutside = (event)=>{
+            if (event.target instanceof Node && (rootRef.current?.contains(event.target) || panelElementRef.current?.contains(event.target))) return;
+            updateOpen(false);
+        };
+        const closeFromKeyboard = (event)=>{
+            if ('Escape' !== event.key || openPopoverStack.at(-1) !== token) return;
+            event.preventDefault();
+            event.stopPropagation();
+            close();
+        };
+        document.addEventListener('pointerdown', closeFromOutside);
+        document.addEventListener('keydown', closeFromKeyboard);
+        return ()=>{
+            removeOpenPopover(token);
+            document.removeEventListener('pointerdown', closeFromOutside);
+            document.removeEventListener('keydown', closeFromKeyboard);
+        };
+    }, [
+        close,
+        open,
+        updateOpen
+    ]);
+    useEffect(()=>{
+        if (!open) return;
+        const root = rootRef.current;
+        const panel = panelElementRef.current;
+        const closeFromFocusOut = (event)=>{
+            const nextTarget = event.relatedTarget;
+            if (nextTarget instanceof Node && (rootRef.current?.contains(nextTarget) || panelElementRef.current?.contains(nextTarget))) return;
+            updateOpen(false);
+        };
+        root?.addEventListener('focusout', closeFromFocusOut);
+        if (portal) panel?.addEventListener('focusout', closeFromFocusOut);
+        return ()=>{
+            root?.removeEventListener('focusout', closeFromFocusOut);
+            if (portal) panel?.removeEventListener('focusout', closeFromFocusOut);
+        };
+    }, [
+        open,
+        portal,
+        updateOpen
+    ]);
+    useLayoutEffect(()=>{
+        if (!open || !portal) return void setFloatingPosition(null);
+        updateFloatingPosition();
+        const frame = requestAnimationFrame(updateFloatingPosition);
+        return ()=>cancelAnimationFrame(frame);
+    }, [
+        floatingPosition?.anchorWidth,
+        open,
+        portal,
+        updateFloatingPosition
+    ]);
+    useEffect(()=>{
+        if (!open || !portal) return;
+        window.addEventListener('resize', updateFloatingPosition);
+        window.addEventListener('scroll', updateFloatingPosition, true);
+        const observer = "u" < typeof ResizeObserver ? null : new ResizeObserver(()=>updateFloatingPosition());
+        if (triggerRef.current) observer?.observe(triggerRef.current);
+        if (panelElementRef.current) observer?.observe(panelElementRef.current);
+        return ()=>{
+            window.removeEventListener('resize', updateFloatingPosition);
+            window.removeEventListener('scroll', updateFloatingPosition, true);
+            observer?.disconnect();
+        };
+    }, [
+        open,
+        portal,
+        updateFloatingPosition
+    ]);
+    useEffect(()=>{
+        if (!open || !focusFirstOnOpen) return;
+        const frame = requestAnimationFrame(()=>{
+            firstFocusableElement(panelElementRef.current)?.focus({
+                preventScroll: true
+            });
+        });
+        return ()=>cancelAnimationFrame(frame);
+    }, [
+        focusFirstOnOpen,
+        open
+    ]);
+    const triggerProps = {
+        ref: (element)=>{
+            triggerRef.current = element;
+        },
+        type: 'button',
+        disabled,
+        'aria-label': label,
+        'aria-expanded': open,
+        'aria-controls': open ? panelId : void 0,
+        'aria-haspopup': 'region' === panelRole ? void 0 : panelRole,
+        onClick: ()=>updateOpen(!openRef.current)
+    };
+    const handlePanelKeyDown = (event)=>{
+        onPanelKeyDown?.(event);
+        if (event.defaultPrevented || 'Tab' !== event.key) return;
+        const trigger = triggerRef.current;
+        if (!trigger) return;
+        if ('menu' !== panelRole) {
+            if (!portal) return;
+            const tabStops = panelTabStops(panelElementRef.current);
+            const boundary = event.shiftKey ? tabStops.at(0) : tabStops.at(-1);
+            if (!boundary || document.activeElement !== boundary) return;
+        }
+        event.preventDefault();
+        const next = adjacentDocumentTabStop(trigger, event.shiftKey ? -1 : 1, panelElementRef.current);
+        updateOpen(false);
+        requestAnimationFrame(()=>(next ?? trigger).focus({
+                preventScroll: true
+            }));
+    };
+    const panel = open ? /*#__PURE__*/ jsx("section", {
+        ref: setPanelElement,
+        id: panelId,
+        className: `ds-popover-panel${panelClassName ? ` ${panelClassName}` : ''}`,
+        role: panelRole,
+        "aria-label": panelLabel,
+        "data-office-shortcuts": "ignore",
+        "data-floating": portal ? 'true' : void 0,
+        onKeyDown: handlePanelKeyDown,
+        style: portal ? {
+            position: 'absolute',
+            top: 0,
+            left: 0
+        } : void 0,
+        children: 'function' == typeof children ? children(close) : children
+    }) : null;
+    const floatingStyle = {
+        top: floatingPosition?.top ?? 0,
+        left: floatingPosition?.left ?? 0,
+        width: floatingPosition?.anchorWidth ?? 0,
+        visibility: floatingPosition ? 'visible' : 'hidden'
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        ref: rootRef,
+        className: `ds-popover${open ? ' open' : ''}${className ? ` ${className}` : ''}`,
+        "data-office-shortcuts": open ? 'ignore' : void 0,
+        "data-placement": placement,
+        children: [
+            trigger(triggerProps, {
+                open
+            }),
+            panel && portal && "u" > typeof document ? /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx("div", {
+                className: "ds-popover-portal-anchor",
+                "data-placement": placement,
+                style: floatingStyle,
+                children: panel
+            }), officeOverlayPortalRoot(document, rootRef.current, triggerRef.current)) : panel
+        ]
+    });
+}
+function clamp(value, minimum, maximum) {
+    return Math.min(Math.max(value, minimum), maximum);
+}
+function sameFloatingPosition(current, next) {
+    return null !== current && Math.abs(current.top - next.top) < 0.5 && Math.abs(current.left - next.left) < 0.5 && Math.abs(current.anchorWidth - next.anchorWidth) < 0.5;
+}
+function firstFocusableElement(panel) {
+    if (!panel) return null;
+    return radioGroupTabStops([
+        ...panel.querySelectorAll('button:not(:disabled), input:not(:disabled):not([type="hidden"]), textarea:not(:disabled), select:not(:disabled), [tabindex]:not([tabindex="-1"])')
+    ].filter(elementAvailableForFocus)).at(0) ?? null;
+}
+function panelTabStops(panel) {
+    if (!panel) return [];
+    return radioGroupTabStops([
+        ...panel.querySelectorAll('a[href]:not([tabindex="-1"]), button:not(:disabled):not([tabindex="-1"]), input:not(:disabled):not([type="hidden"]):not([tabindex="-1"]), select:not(:disabled):not([tabindex="-1"]), textarea:not(:disabled):not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])')
+    ].filter(elementAvailableForFocus));
+}
+function radioGroupTabStops(candidates) {
+    return candidates.filter((element)=>{
+        if (!(element instanceof HTMLInputElement) || 'radio' !== element.type || !element.name) return true;
+        const group = candidates.filter((candidate)=>candidate instanceof HTMLInputElement && 'radio' === candidate.type && candidate.name === element.name && candidate.form === element.form);
+        return element === (group.find((candidate)=>candidate.checked) ?? group[0]);
+    });
+}
+function elementAvailableForFocus(element) {
+    if (element.closest('[hidden], [inert], [aria-hidden="true"]') || 'true' === element.getAttribute('aria-disabled')) return false;
+    let current = element;
+    while(current){
+        const style = getComputedStyle(current);
+        if ('none' === style.display || 'hidden' === style.visibility) return false;
+        current = current.parentElement;
+    }
+    return true;
+}
+function adjacentDocumentTabStop(current, direction, excludedRoot) {
+    const tabStops = [
+        ...document.querySelectorAll('a[href]:not([tabindex="-1"]), button:not(:disabled):not([tabindex="-1"]), input:not(:disabled):not([type="hidden"]):not([tabindex="-1"]), select:not(:disabled):not([tabindex="-1"]), textarea:not(:disabled):not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])')
+    ].filter((element)=>!excludedRoot?.contains(element) && elementAvailableForFocus(element));
+    const index = tabStops.indexOf(current);
+    return index < 0 ? null : tabStops[index + direction] ?? null;
+}
+const OFFICE_MENU_NAVIGATION_KEYS = [
+    'ArrowDown',
+    'ArrowUp',
+    'Home',
+    'End'
+];
+function moveOfficeMenuFocus(event) {
+    if (!OFFICE_MENU_NAVIGATION_KEYS.includes(event.key)) return false;
+    const buttons = [
+        ...event.currentTarget.querySelectorAll('button[role="menuitem"]:not(:disabled), button[role="menuitemradio"]:not(:disabled), button[role="menuitemcheckbox"]:not(:disabled)')
+    ];
+    if (!buttons.length) return false;
+    event.preventDefault();
+    const current = buttons.indexOf(document.activeElement);
+    const next = 'Home' === event.key ? 0 : 'End' === event.key ? buttons.length - 1 : 'ArrowDown' === event.key ? (current + 1 + buttons.length) % buttons.length : (current - 1 + buttons.length) % buttons.length;
+    buttons[next]?.focus();
+    return true;
+}
+function stepOfficeZoom(zoom, direction, { minimum = 50, maximum = 200, step = 10 } = {}) {
+    const delta = 'in' === direction ? step : -step;
+    return Math.min(maximum, Math.max(minimum, Math.round(zoom + delta)));
+}
+function useOfficeEditorWheelZoom({ enabled = true, scopeRef, onZoomIn, onZoomOut }) {
+    const zoomInRef = useRef(onZoomIn);
+    const zoomOutRef = useRef(onZoomOut);
+    zoomInRef.current = onZoomIn;
+    zoomOutRef.current = onZoomOut;
+    useEffect(()=>{
+        const scope = scopeRef.current;
+        if (!enabled || !scope) return;
+        const handleWheel = (event)=>{
+            if (!event.ctrlKey && !event.metaKey || 0 === event.deltaY) return;
+            event.preventDefault();
+            event.stopPropagation();
+            if (event.deltaY < 0) zoomInRef.current();
+            else zoomOutRef.current();
+        };
+        scope.addEventListener('wheel', handleWheel, {
+            capture: true,
+            passive: false
+        });
+        return ()=>{
+            scope.removeEventListener('wheel', handleWheel, {
+                capture: true
+            });
+        };
+    }, [
+        enabled,
+        scopeRef
+    ]);
+}
+export { CommittedOfficeTextArea, CommittedOfficeTextField, Popover, button_Button, icon_button_IconButton, matchesAriaKeyShortcuts, matchesOfficeEditorKeyboardShortcut, moveOfficeMenuFocus, officeOverlayPortalRoot, office_text_field_OfficeFileInput, office_text_field_OfficeTextArea, office_text_field_OfficeTextField, stepOfficeZoom, useDialogFocusScope, useOfficeEditorWheelZoom };