@0001-labs/design-system-1 0.0.0-stage → 0.3.0-alpha.13

package/dist/react/context-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../../DS1/react/context-menu.ts"],"names":[],"mappings":"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"}

package/dist/react/context-menu.js

@@ -0,0 +1,133 @@
+/** React state and native events for the shared Lit menu. No positioning or gesture code. */
+import { Children, cloneElement, createContext, createElement as h, forwardRef, useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState, } from "react";
+import { Menu } from "./menu";
+import { Button } from "./button";
+import { FilePicker } from "./file-picker";
+const useCommitEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const Context = createContext(null);
+const useMenu = () => {
+    const state = useContext(Context);
+    if (!state)
+        throw new Error("Menu controls must be inside ContextMenu or ContextMenuSub.");
+    return state;
+};
+function Scope({ children, open, defaultOpen = false, onOpenChange, nested = false }) {
+    const [internal, setInternal] = useState(defaultOpen);
+    const [trigger, setTrigger] = useState(null);
+    const menu = useRef(null), id = useId();
+    return h(Context.Provider, { value: {
+            open: open ?? internal, trigger, setTrigger, menu, id, nested,
+            change: next => { if (open === undefined)
+                setInternal(next); onOpenChange?.(next); },
+        } }, children);
+}
+export function ContextMenu(props) { return h(Scope, props); }
+export function ContextMenuSub(props) { return h(Scope, { ...props, nested: true }); }
+function setRef(ref, value) {
+    if (typeof ref === "function")
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
+export const ContextMenuTrigger = forwardRef(function ContextMenuTrigger({ asChild, disabled = false, children, ...props }, ref) {
+    const state = useMenu();
+    const child = asChild ? Children.only(children) : null;
+    const childRef = child?.props.ref;
+    const bind = useCallback((element) => {
+        setRef(ref, element);
+        setRef(childRef, element);
+        state.setTrigger(disabled ? null : element);
+    }, [ref, childRef, state.setTrigger, disabled]);
+    const attributes = { ...props, ref: bind, "data-state": state.open ? "open" : "closed", "data-slot": "context-menu-trigger" };
+    if (child) {
+        // The child keeps its product handlers. A supplied trigger handler runs
+        // afterwards, unless the child deliberately consumed the event.
+        const merged = { ...child.props, ...attributes };
+        for (const [key, value] of Object.entries(props)) {
+            const first = child.props[key];
+            if (/^on[A-Z]/.test(key) && typeof first === "function" && typeof value === "function") {
+                merged[key] = (event) => { first(event); if (!event.defaultPrevented)
+                    value(event); };
+            }
+        }
+        return cloneElement(child, merged);
+    }
+    return h("span", { ...attributes, tabIndex: disabled ? -1 : 0 }, children);
+});
+export const ContextMenuContent = forwardRef(function ContextMenuContent({ children, placement, ...props }, ref) {
+    const state = useMenu();
+    useCommitEffect(() => { state.menu.current?.renderNow(); });
+    // Render the closed host so the source can continue listening to its trigger.
+    // Open descendants unmount together, including nested menu state.
+    return h(Menu, { ...props, id: props.id ?? state.id, role: "menu", hidden: !state.open,
+        "data-slot": state.nested ? "context-menu-sub-content" : "context-menu-content",
+        open: state.open, trigger: state.trigger, anchor: state.trigger,
+        triggerMode: state.nested ? "submenu" : "context", placement: placement ?? (state.nested ? "right" : "bottom"),
+        ref: (element) => { state.menu.current = element; setRef(ref, element); },
+        onOpenChange: state.change, }, state.open ? children : null);
+});
+export const ContextMenuSubContent = ContextMenuContent;
+export const ContextMenuItem = forwardRef(function ContextMenuItem({ inset, variant, textValue, onClick, onSelect, children, style, ...props }, ref) {
+    const state = useMenu();
+    return h(Button, { ...props, ref, menuItem: true, danger: variant === "destructive" || props.danger,
+        role: props.role ?? "menuitem", "data-text-value": textValue,
+        style: { ...style, ...(inset ? { "--ds-button-padding": "0 calc(4px * var(--ds-sf)) 0 var(--ds-unit)" } : {}) },
+        onClick: event => {
+            if (props.disabled)
+                return;
+            onClick?.(event);
+            if (event.defaultPrevented)
+                return;
+            const select = new Event("ds-menu-select", { cancelable: true });
+            onSelect?.(select);
+            if (!select.defaultPrevented)
+                state.menu.current?.select();
+        }, }, children);
+});
+const indicatorStyle = { display: "inline-flex", flex: "0 0 var(--ds-unit)", alignItems: "center" };
+function mark(checked) {
+    return h("span", { "aria-hidden": true, style: indicatorStyle }, checked ? h("ds-icon", { type: checked === "indeterminate" ? "minus" : "check" }) : null);
+}
+export const ContextMenuCheckboxItem = forwardRef(function ContextMenuCheckboxItem({ checked = false, onCheckedChange, onSelect, children, ...props }, ref) {
+    return h(ContextMenuItem, { ...props, ref, role: "menuitemcheckbox", "aria-checked": checked === "indeterminate" ? "mixed" : checked,
+        onSelect: event => { onSelect?.(event); if (!event.defaultPrevented)
+            onCheckedChange?.(checked !== true); },
+    }, mark(checked), children);
+});
+const Radio = createContext({});
+export function ContextMenuRadioGroup({ value, onValueChange, children, ...props }) {
+    return h(Radio.Provider, { value: { value, change: onValueChange } }, h(ContextMenuGroup, props, children));
+}
+export const ContextMenuRadioItem = forwardRef(function ContextMenuRadioItem({ value, onSelect, children, ...props }, ref) {
+    const radio = useContext(Radio), checked = radio.value === value;
+    return h(ContextMenuItem, { ...props, ref, role: "menuitemradio", "aria-checked": checked,
+        onSelect: event => { onSelect?.(event); if (!event.defaultPrevented)
+            radio.change?.(value); },
+    }, mark(checked), children);
+});
+export const ContextMenuSubTrigger = forwardRef(function ContextMenuSubTrigger({ children, inset, variant, textValue, onSelect: _onSelect, ...props }, ref) {
+    const state = useMenu();
+    const bind = useCallback((element) => { state.setTrigger(element); setRef(ref, element); }, [ref, state.setTrigger]);
+    return h(Button, { ...props, ref: bind, role: "menuitem", menuItem: true, active: state.open,
+        danger: variant === "destructive", "data-text-value": textValue,
+        "data-state": state.open ? "open" : "closed",
+    }, inset ? mark(false) : null, children, h("ds-icon", { type: "right", "aria-hidden": true, style: { marginInlineStart: "auto", flex: "none" } }));
+});
+export function ContextMenuFilePicker({ onFiles, ...props }) {
+    return h(FilePicker, { ...props, role: "menuitem", onChange: event => {
+            const files = Array.from(event.currentTarget.files ?? []);
+            event.currentTarget.value = "";
+            if (!props.disabled && files.length)
+                onFiles(files);
+        } });
+}
+export function ContextMenuGroup(props) {
+    return h("div", { ...props, role: "group", style: { ...props.style, display: "contents" } });
+}
+export function ContextMenuLabel({ inset, children, ...props }) {
+    return h("ds-text", { ...props, literal: true, tone: "muted", "data-ds-menu-label": "" }, inset ? mark(false) : null, children);
+}
+export function ContextMenuSeparator(props) { return h("hr", { ...props, "data-ds-menu-separator": "" }); }
+export function ContextMenuShortcut(props) {
+    return h("span", { ...props, style: { marginInlineStart: "auto", color: "var(--ds-text-color-muted)", ...props.style } });
+}