@remix-run/ui 0.0.0 → 0.1.0

package/dist/components/select/select.js

@@ -0,0 +1,397 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@remix-run/ui/jsx-runtime";
+// @jsxRuntime classic
+// @jsx createElement
+import { attrs, createElement, createMixin, css, on, ref, } from '@remix-run/ui';
+import * as button from "../button/button.js";
+import { Glyph } from "../glyph/glyph.js";
+import * as listbox from "../listbox/listbox.js";
+import * as popover from "../popover/popover.js";
+import { theme } from "../../theme/theme.js";
+import { hiddenTypeahead } from "../../interactions/typeahead/typeahead-mixin.js";
+import { onKeyDown } from "../../interactions/keydown/keydown.js";
+import { waitForCssTransition } from "../../utils/wait-for-css-transition.js";
+import { wait } from "../../utils/wait.js";
+const SELECT_CHANGE_EVENT = 'rmx:select-change';
+const LABEL_SWAP_DELAY_MS = 75;
+export class SelectChangeEvent extends Event {
+    label;
+    optionId;
+    value;
+    constructor({ label, optionId, value, }) {
+        super(SELECT_CHANGE_EVENT, { bubbles: true });
+        this.label = label;
+        this.optionId = optionId;
+        this.value = value;
+    }
+}
+var State;
+(function (State) {
+    State["Initializing"] = "initializing";
+    State["Closed"] = "closed";
+    State["Open"] = "open";
+    State["Selecting"] = "selecting";
+})(State || (State = {}));
+function SelectProvider(handle) {
+    let triggerRef;
+    let listboxRef;
+    let surfaceRef;
+    let popoverContextRef;
+    let state = State.Initializing;
+    let value = null;
+    let activeValue = null;
+    let activeId = undefined;
+    let selectedId = undefined;
+    let selectedLabel = '';
+    let displayedLabel = '';
+    let pendingChange = null;
+    let listId = `${handle.id}-list`;
+    function open() {
+        if (state !== State.Closed || handle.props.disabled)
+            return;
+        state = State.Open;
+        activeValue = value;
+        handle.update();
+    }
+    function syncPopoverMinWidth() {
+        if (state !== State.Open || !surfaceRef || !triggerRef) {
+            return;
+        }
+        surfaceRef.style.minWidth = `${triggerRef.offsetWidth}px`;
+    }
+    function getPopoverAnchorOptions() {
+        return {
+            placement: 'left',
+            inset: true,
+            relativeTo: selectedId ? `#${selectedId}` : '[role="option"]',
+        };
+    }
+    function syncPopoverContext() {
+        if (!popoverContextRef) {
+            return;
+        }
+        popoverContextRef.hideFocusTarget = triggerRef ?? null;
+        popoverContextRef.anchor = triggerRef
+            ? {
+                node: triggerRef,
+                options: getPopoverAnchorOptions(),
+            }
+            : null;
+    }
+    function close() {
+        if (state !== State.Open)
+            return;
+        state = State.Closed;
+        handle.update();
+    }
+    function setSelectedOption(nextValue, option, syncDisplayedLabel = false) {
+        value = nextValue;
+        activeValue = nextValue;
+        activeId = option?.id;
+        selectedId = option?.id;
+        selectedLabel = option ? option.label : handle.props.defaultLabel;
+        syncPopoverContext();
+        if (syncDisplayedLabel) {
+            displayedLabel = selectedLabel;
+        }
+    }
+    function getPendingChange(nextValue, option) {
+        if (!option || value === nextValue) {
+            return null;
+        }
+        return {
+            label: option.label,
+            optionId: option.id,
+            value: option.value,
+        };
+    }
+    function dispatchChange(change) {
+        if (!change) {
+            return;
+        }
+        let target = triggerRef ?? surfaceRef;
+        target?.dispatchEvent(new SelectChangeEvent(change));
+    }
+    function selectOption(nextValue, option) {
+        if (state !== State.Open)
+            return;
+        pendingChange = getPendingChange(nextValue, option);
+        setSelectedOption(nextValue, option);
+        handle.update();
+    }
+    async function settleSelectedOption() {
+        if (state !== State.Open)
+            return;
+        let change = pendingChange;
+        pendingChange = null;
+        state = State.Selecting;
+        if (!surfaceRef) {
+            displayedLabel = selectedLabel;
+            state = State.Closed;
+            let signal = await handle.update();
+            if (signal.aborted)
+                return;
+            dispatchChange(change);
+            return;
+        }
+        await Promise.all([handle.update(), waitForCssTransition(surfaceRef, handle.signal)]);
+        await wait(LABEL_SWAP_DELAY_MS); // UX delay label swap for clear value change
+        if (handle.signal.aborted)
+            return;
+        displayedLabel = selectedLabel;
+        state = State.Closed;
+        let signal = await handle.update();
+        if (signal.aborted)
+            return;
+        dispatchChange(change);
+    }
+    function selectTypeaheadMatch(text) {
+        if (state !== State.Closed || handle.props.disabled)
+            return;
+        let option = listboxRef?.matchSearchText(text, value);
+        if (!option)
+            return;
+        let change = getPendingChange(option.value, option);
+        pendingChange = null;
+        setSelectedOption(option.value, option, true);
+        void handle.update().then((signal) => {
+            if (signal.aborted)
+                return;
+            dispatchChange(change);
+        });
+    }
+    function highlightOption(nextActiveValue, option) {
+        if (state !== State.Open)
+            return;
+        activeValue = nextActiveValue;
+        activeId = option?.id;
+        handle.update();
+    }
+    handle.context.set({
+        get activeId() {
+            return activeId;
+        },
+        get disabled() {
+            return !!handle.props.disabled;
+        },
+        get displayedLabel() {
+            return displayedLabel;
+        },
+        get isExpanded() {
+            return state === State.Open || state === State.Selecting;
+        },
+        get isOpen() {
+            return state === State.Open;
+        },
+        get listId() {
+            return listId;
+        },
+        get name() {
+            return handle.props.name;
+        },
+        get selectedId() {
+            return selectedId;
+        },
+        get value() {
+            return value;
+        },
+        close,
+        open,
+        registerSurface(node) {
+            surfaceRef = node;
+        },
+        registerTrigger(node) {
+            triggerRef = node;
+            syncPopoverContext();
+        },
+        registerPopoverContext(context) {
+            popoverContextRef = context;
+            syncPopoverContext();
+        },
+        selectTypeaheadMatch,
+        syncPopoverMinWidth,
+        unregisterSurface(node) {
+            if (surfaceRef === node) {
+                surfaceRef = undefined;
+            }
+        },
+        unregisterPopoverContext(context) {
+            if (popoverContextRef !== context) {
+                return;
+            }
+            popoverContextRef.anchor = null;
+            popoverContextRef.hideFocusTarget = null;
+            popoverContextRef = undefined;
+        },
+        unregisterTrigger(node) {
+            if (triggerRef === node) {
+                triggerRef = undefined;
+                syncPopoverContext();
+            }
+        },
+    });
+    return () => {
+        if (state === State.Initializing) {
+            selectedLabel = displayedLabel = handle.props.defaultLabel;
+            value = handle.props.defaultValue ?? null;
+            activeValue = value;
+            state = State.Closed;
+            handle.queueTask(() => {
+                if (selectedId || !surfaceRef) {
+                    return;
+                }
+                let selected = surfaceRef.querySelector(`[aria-selected="true"]`);
+                if (selected && !selectedId) {
+                    selectedId = selected.id;
+                    syncPopoverContext();
+                    handle.update();
+                }
+            });
+        }
+        return (_jsx(listbox.Context, { flashSelection: true, ref: (nextListboxRef) => {
+                listboxRef = nextListboxRef;
+            }, value: value, activeValue: activeValue, onSelectSettled: settleSelectedOption, onSelect: selectOption, onHighlight: highlightOption, selectionFlashAttribute: "data-select-flash", children: handle.props.children }));
+    };
+}
+function getSelectContext(handle) {
+    return handle.context.get(SelectProvider);
+}
+const triggerMixin = createMixin((handle) => {
+    let context = getSelectContext(handle);
+    return (props) => [
+        attrs({
+            'aria-haspopup': 'listbox',
+            'aria-expanded': context.isExpanded ? 'true' : 'false',
+            'aria-controls': context.listId,
+            'aria-describedby': context.selectedId,
+            disabled: context.disabled ? true : props.disabled,
+        }),
+        ref((node, signal) => {
+            context.registerTrigger(node);
+            signal.addEventListener('abort', () => {
+                context.unregisterTrigger(node);
+            });
+        }),
+        hiddenTypeahead((text) => {
+            context.selectTypeaheadMatch(text);
+        }),
+        on('click', () => {
+            context.open();
+        }),
+        onKeyDown('ArrowDown', () => {
+            context.open();
+        }),
+        onKeyDown('ArrowUp', () => {
+            context.open();
+        }),
+    ];
+});
+const popoverMixin = createMixin((handle) => {
+    let context = getSelectContext(handle);
+    let popoverState = handle.context.get(popover.Context);
+    return () => [
+        ref((node, signal) => {
+            context.registerSurface(node);
+            context.registerPopoverContext(popoverState);
+            signal.addEventListener('abort', () => {
+                context.unregisterSurface(node);
+                context.unregisterPopoverContext(popoverState);
+            });
+        }),
+        popover.surface({
+            open: context.isOpen,
+            onHide: context.close,
+        }),
+        on('beforetoggle', (event) => {
+            if (event.newState === 'open') {
+                context.syncPopoverMinWidth();
+            }
+        }),
+    ];
+});
+const listMixin = createMixin((handle) => {
+    let context = getSelectContext(handle);
+    return () => [
+        attrs({
+            id: context.listId,
+            'aria-activedescendant': context.activeId,
+        }),
+        popover.focusOnShow(),
+        listbox.list(),
+    ];
+});
+const hiddenInputMixin = createMixin((handle) => {
+    let context = getSelectContext(handle);
+    return () => attrs({
+        disabled: context.disabled ? true : undefined,
+        name: context.name,
+        type: 'hidden',
+        value: context.value ?? '',
+    });
+});
+const selectTriggerCss = css({
+    minHeight: theme.control.height.sm,
+    width: '100%',
+    paddingInline: theme.space.md,
+    paddingInlineEnd: theme.space.sm,
+    display: 'grid',
+    gridTemplateColumns: 'minmax(0, 1fr) auto',
+    alignItems: 'center',
+    gap: theme.space.sm,
+    borderRadius: theme.radius.md,
+    backgroundImage: 'none',
+    border: '0.5px solid transparent',
+    boxShadow: 'none',
+    fontSize: theme.fontSize.xs,
+    textAlign: 'left',
+    backgroundColor: theme.surface.lvl3,
+    color: theme.colors.text.secondary,
+    '&:hover, &:focus-visible, &[aria-expanded="true"], &[aria-expanded="true"]:hover, &[aria-expanded="true"]:focus-visible': {
+        backgroundColor: theme.surface.lvl4,
+        color: theme.colors.text.primary,
+    },
+    '&:active': {
+        backgroundColor: theme.surface.lvl3,
+    },
+    '&:focus-visible': {
+        outline: `2px solid ${theme.colors.focus.ring}`,
+        outlineOffset: '2px',
+    },
+    '&:disabled': {
+        opacity: 0.6,
+    },
+});
+export const triggerStyle = selectTriggerCss;
+export const Context = SelectProvider;
+export const hiddenInput = hiddenInputMixin;
+export const list = listMixin;
+export const option = listbox.option;
+export { popoverMixin as popover };
+export const trigger = triggerMixin;
+const select = {
+    Context,
+    hiddenInput,
+    list,
+    option,
+    popover: popoverMixin,
+    trigger,
+};
+export function onSelectChange(handler, captureBoolean) {
+    return on(SELECT_CHANGE_EVENT, handler, captureBoolean);
+}
+function SelectLabel(handle) {
+    let context = getSelectContext(handle);
+    return () => _jsx("span", { mix: button.labelStyle, children: context.displayedLabel });
+}
+export function Select(handle) {
+    return () => {
+        let { children, defaultLabel, defaultValue, disabled, name, mix, ...buttonProps } = handle.props;
+        return (_jsxs(select.Context, { defaultLabel: defaultLabel, defaultValue: defaultValue, disabled: disabled, name: name, children: [_jsxs("button", { ...buttonProps, mix: [button.baseStyle, triggerStyle, select.trigger(), mix], children: [_jsx(SelectLabel, {}), _jsx(Glyph, { mix: button.iconStyle, name: "chevronVertical" })] }), _jsx(popover.Context, { children: _jsx("div", { mix: [popover.surfaceStyle, select.popover()], children: _jsx("div", { mix: [popover.contentStyle, listbox.listStyle, select.list()], children: children }) }) }), name && _jsx("input", { mix: select.hiddenInput() })] }));
+    };
+}
+export function Option(handle) {
+    return () => {
+        let { label, value, disabled, textValue, children, mix, ...divProps } = handle.props;
+        return (_jsxs("div", { ...divProps, mix: [listbox.optionStyle, select.option({ value, label, disabled, textValue }), mix], children: [_jsx(Glyph, { mix: listbox.glyphStyle, name: "check" }), _jsx("span", { mix: listbox.labelStyle, children: children ?? handle.props.label })] }));
+    };
+}
+//# sourceMappingURL=select.js.map

package/dist/components/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"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"}

package/dist/components/separator/separator.d.ts

@@ -0,0 +1,2 @@
+import { type CSSMixinDescriptor } from '@remix-run/ui';
+export declare const separatorStyle: CSSMixinDescriptor;

package/dist/components/separator/separator.js

@@ -0,0 +1,15 @@
+import { css } from '@remix-run/ui';
+import { theme } from "../../theme/theme.js";
+const itemInset = `var(--rmx-ui-item-inset, ${theme.space.sm})`;
+const itemIndicatorHalfInset = 'calc((var(--rmx-ui-item-indicator-width, 0px) + var(--rmx-ui-item-indicator-gap, 0px)) / 2)';
+const separatorCss = css({
+    flexShrink: 0,
+    margin: 0,
+    marginBlock: theme.space.xs,
+    marginInlineStart: `calc(${itemInset} + ${itemIndicatorHalfInset})`,
+    marginInlineEnd: itemInset,
+    border: 0,
+    borderTop: `1px solid ${theme.colors.border.subtle}`,
+});
+export const separatorStyle = separatorCss;
+//# sourceMappingURL=separator.js.map

package/dist/components/separator/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","sourceRoot":"","sources":["../../../src/components/separator/separator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAA2B,MAAM,eAAe,CAAA;AAE5D,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAA;AAE5C,MAAM,SAAS,GAAG,4BAA4B,KAAK,CAAC,KAAK,CAAC,EAAE,GAAG,CAAA;AAC/D,MAAM,sBAAsB,GAC1B,6FAA6F,CAAA;AAE/F,MAAM,YAAY,GAAuB,GAAG,CAAC;IAC3C,UAAU,EAAE,CAAC;IACb,MAAM,EAAE,CAAC;IACT,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;IAC3B,iBAAiB,EAAE,QAAQ,SAAS,MAAM,sBAAsB,GAAG;IACnE,eAAe,EAAE,SAAS;IAC1B,MAAM,EAAE,CAAC;IACT,SAAS,EAAE,aAAa,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE;CACrD,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,YAAY,CAAA"}

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,78 @@
+import { type CSSMixinDescriptor, type ElementProps, type Handle, type Props, type RemixNode } from '@remix-run/ui';
+declare const TABS_CHANGE_EVENT: "rmx:tabs-change";
+type TabsChangeHandler = (event: TabsChangeEvent, signal: AbortSignal) => void | Promise<void>;
+export declare const listStyle: CSSMixinDescriptor;
+export declare const triggerStyle: CSSMixinDescriptor;
+declare global {
+    interface HTMLElementEventMap {
+        [TABS_CHANGE_EVENT]: TabsChangeEvent;
+    }
+}
+export declare class TabsChangeEvent extends Event {
+    readonly previousValue: string | null;
+    readonly value: string;
+    constructor(value: string, previousValue: string | null);
+}
+export type TabsOrientation = 'horizontal' | 'vertical';
+type TabsDirection = 'first' | 'last' | 'next' | 'previous';
+type RegisteredTab = {
+    disabled: boolean;
+    getNode(): HTMLElement | null;
+    value: string;
+};
+export interface TabsRef {
+    readonly selectedValue: string | null;
+    focus: (value?: string) => void;
+    focusFirst: () => void;
+    focusLast: () => void;
+    select: (value: string) => void;
+}
+interface TabsContextValue {
+    readonly focusableValue: string | null;
+    readonly orientation: TabsOrientation;
+    readonly value: string | null;
+    getPanelId: (value: string) => string;
+    getTriggerId: (value: string) => string;
+    move: (fromValue: string, direction: TabsDirection) => void;
+    registerTab: (tab: RegisteredTab) => void;
+    select: (value: string) => void;
+}
+export interface TabsContextProps {
+    children?: RemixNode;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    orientation?: TabsOrientation;
+    ref?: (ref: TabsRef) => void;
+    value?: string;
+}
+export interface TabsProps extends TabsContextProps {
+}
+export interface TabsTriggerOptions {
+    disabled?: boolean;
+    value: string;
+}
+export interface TabsPanelOptions {
+    value: string;
+}
+export type TabsListProps = Props<'div'>;
+export type TabProps = Omit<Props<'button'>, 'type'> & {
+    children?: RemixNode;
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    value: string;
+};
+export type TabsPanelProps = Props<'div'> & {
+    children?: RemixNode;
+    value: string;
+};
+declare function TabsProvider(handle: Handle<TabsContextProps, TabsContextValue>): () => RemixNode;
+export declare const Context: typeof TabsProvider;
+export declare const list: <boundNode extends HTMLElement = HTMLElement>() => import("@remix-run/ui").MixinDescriptor<boundNode, [], ElementProps>;
+export declare const panel: <boundNode extends HTMLElement = HTMLElement>(options: TabsPanelOptions) => import("@remix-run/ui").MixinDescriptor<boundNode, [options: TabsPanelOptions], ElementProps>;
+export declare const trigger: <boundNode extends HTMLElement = HTMLElement>(options: TabsTriggerOptions) => import("@remix-run/ui").MixinDescriptor<boundNode, [options: TabsTriggerOptions], ElementProps>;
+export declare function onTabsChange(handler: TabsChangeHandler, captureBoolean?: boolean): import("@remix-run/ui").MixinDescriptor<HTMLElement, ["rmx:tabs-change", (event: import("@remix-run/ui").Dispatched<TabsChangeEvent, HTMLElement>, signal: AbortSignal) => void | Promise<void>, (boolean | undefined)?], ElementProps>;
+export declare function Tabs(handle: Handle<TabsProps>): () => import("@remix-run/ui").RemixElement;
+export declare function TabsList(handle: Handle<TabsListProps>): () => import("@remix-run/ui").RemixElement;
+export declare function Tab(handle: Handle<TabProps>): () => import("@remix-run/ui").RemixElement;
+export declare function TabsPanel(handle: Handle<TabsPanelProps>): () => import("@remix-run/ui").RemixElement;
+export {};