@tangible/ui 0.0.1 → 0.0.2

package/components/SegmentedControl/SegmentedControl.js

@@ -1,42 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { cx } from '../../utils/cx.js';
+import { isDev } from '../../utils/is-dev.js';
+import { toKey } from '../../utils/value-key.js';
+import { useRovingGroup } from '../../utils/use-roving-group.js';
 import { SegmentedControlContext, useSegmentedControlContext } from './SegmentedControlContext.js';
 // =============================================================================
 // SegmentedControl Root
 // =============================================================================
 function SegmentedControlRoot({ value: controlledValue, defaultValue, onValueChange, variant = 'pill', size = 'md', orientation = 'horizontal', loop = true, disabled = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, children, }) {
     const [internalValue, setInternalValue] = useState(defaultValue);
-    const [, setRegistryVersion] = useState(0);
-    const itemsRef = useRef(new Map());
-    const mountCounterRef = useRef(0);
     const isControlled = controlledValue !== undefined;
     const selectedValue = isControlled ? controlledValue : internalValue;
-    // Item registration
-    const registerItem = useCallback((record) => {
-        const existing = itemsRef.current.get(record.value);
-        itemsRef.current.set(record.value, {
-            ...record,
-            mountIndex: existing?.mountIndex ?? mountCounterRef.current++,
-        });
-        setRegistryVersion((v) => v + 1);
-    }, []);
-    const unregisterItem = useCallback((value) => {
-        itemsRef.current.delete(value);
-        setRegistryVersion((v) => v + 1);
-    }, []);
-    // Get items sorted by DOM order
-    const getOrderedItems = useCallback(() => {
-        const items = Array.from(itemsRef.current.values());
-        return items.sort((a, b) => {
-            const position = a.element.compareDocumentPosition(b.element);
-            if (position & Node.DOCUMENT_POSITION_FOLLOWING)
-                return -1;
-            if (position & Node.DOCUMENT_POSITION_PRECEDING)
-                return 1;
-            return a.mountIndex - b.mountIndex;
-        });
-    }, []);
     // Selection handler
     const onSelect = useCallback((newValue) => {
         if (isControlled) {
@@ -47,82 +22,42 @@ function SegmentedControlRoot({ value: controlledValue, defaultValue, onValueCha
             onValueChange?.(newValue);
         }
     }, [isControlled, onValueChange]);
+    const { registerItem, unregisterItem, focusableValue, handleKeyDown, } = useRovingGroup({
+        selectedValue,
+        onSelect,
+        disabled,
+        loop,
+        orientation,
+        orientationKeyboard: true,
+    });
     // Dev-only: Warn if missing accessible name
     useEffect(() => {
         // Safe check for dev mode - import.meta.env may not exist in all bundler contexts
-        const isDev = typeof import.meta !== 'undefined' && import.meta.env?.DEV;
-        if (isDev && !ariaLabel && !ariaLabelledBy) {
+        if (isDev() && !ariaLabel && !ariaLabelledBy) {
             console.warn('SegmentedControl: Missing accessible name. Provide aria-label or aria-labelledby.');
         }
     }, [ariaLabel, ariaLabelledBy]);
-    // Keyboard navigation
-    const handleKeyDown = (event) => {
-        const items = getOrderedItems().filter((item) => !item.disabled && !disabled);
-        if (items.length === 0)
-            return;
-        let currentIndex = items.findIndex((item) => item.value === selectedValue);
-        if (currentIndex === -1)
-            currentIndex = 0;
-        const prevKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
-        const nextKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
-        let targetIndex = null;
-        switch (event.key) {
-            case nextKey:
-                event.preventDefault();
-                if (loop) {
-                    targetIndex = (currentIndex + 1) % items.length;
-                }
-                else {
-                    targetIndex = Math.min(currentIndex + 1, items.length - 1);
-                }
-                break;
-            case prevKey:
-                event.preventDefault();
-                if (loop) {
-                    targetIndex = (currentIndex - 1 + items.length) % items.length;
-                }
-                else {
-                    targetIndex = Math.max(currentIndex - 1, 0);
-                }
-                break;
-            case 'Home':
-                event.preventDefault();
-                targetIndex = 0;
-                break;
-            case 'End':
-                event.preventDefault();
-                targetIndex = items.length - 1;
-                break;
-        }
-        if (targetIndex !== null && targetIndex !== currentIndex) {
-            const targetItem = items[targetIndex];
-            targetItem.element.focus();
-            // Radiogroup: arrow keys move focus AND select
-            onSelect(targetItem.value);
-        }
-    };
     const contextValue = useMemo(() => ({
         variant,
         size,
         orientation,
         loop,
         selectedValue,
+        focusableValue,
         rootDisabled: disabled,
         registerItem,
         unregisterItem,
-        getOrderedItems,
         onSelect,
-        itemsRef,
     }), [
         variant,
         size,
         orientation,
         loop,
         selectedValue,
+        focusableValue,
         disabled,
         registerItem,
         unregisterItem,
-        getOrderedItems,
         onSelect,
     ]);
     return (_jsx(SegmentedControlContext.Provider, { value: contextValue, children: _jsx("div", { role: "radiogroup", className: cx('tui-segmented', `is-variant-${variant}`, `is-size-${size}`, orientation === 'vertical' && 'is-vertical', className), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-disabled": disabled || undefined, "aria-orientation": orientation, onKeyDown: handleKeyDown, children: children }) }));
@@ -131,31 +66,12 @@ function SegmentedControlRoot({ value: controlledValue, defaultValue, onValueCha
 // SegmentedControl.Item
 // =============================================================================
 function Item({ value, disabled = false, icon, 'aria-label': ariaLabel, className, children, }) {
-    const { selectedValue, rootDisabled, registerItem, unregisterItem, onSelect, getOrderedItems, } = useSegmentedControlContext();
-    const isSelected = selectedValue === value;
+    const { selectedValue, focusableValue, rootDisabled, registerItem, unregisterItem, onSelect, } = useSegmentedControlContext();
+    const isSelected = selectedValue !== undefined && toKey(selectedValue) === toKey(value);
     const isDisabled = rootDisabled || disabled;
-    // Determine which item gets tabIndex={0}
-    const getIsFocusable = () => {
-        if (isDisabled)
-            return false;
-        if (isSelected)
-            return true;
-        // If no selection, first enabled item is focusable
-        const items = getOrderedItems();
-        const enabledItems = items.filter((item) => !item.disabled && !rootDisabled);
-        if (enabledItems.length === 0)
-            return false;
-        if (selectedValue === undefined) {
-            return enabledItems[0].value === value;
-        }
-        // If selected item is disabled, first enabled gets focus
-        const selectedItem = items.find((item) => item.value === selectedValue);
-        if (selectedItem?.disabled || rootDisabled) {
-            return enabledItems[0].value === value;
-        }
-        return false;
-    };
-    const isFocusable = getIsFocusable();
+    const isFocusable = !isDisabled &&
+        focusableValue !== undefined &&
+        toKey(focusableValue) === toKey(value);
     // Callback ref for registration
     const callbackRef = useCallback((node) => {
         if (node) {

package/components/SegmentedControl/types.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { RovingItemRecord } from '../../utils/use-roving-group';
 export type SegmentedControlValue = string | number;
 export type SegmentedControlVariant = 'pill' | 'outline' | 'underline';
 export type SegmentedControlSize = 'sm' | 'md';
@@ -42,22 +43,17 @@ export type SegmentedControlItemProps = {
     /** Label content */
     children?: ReactNode;
 };
-export type ItemRecord = {
-    value: SegmentedControlValue;
-    element: HTMLButtonElement;
-    disabled: boolean;
-    mountIndex: number;
-};
+export type ItemRecord = RovingItemRecord;
 export type SegmentedControlContextValue = {
     variant: SegmentedControlVariant;
     size: SegmentedControlSize;
     orientation: SegmentedControlOrientation;
     loop: boolean;
     selectedValue: SegmentedControlValue | undefined;
+    /** The value of the item that should receive tabIndex={0} */
+    focusableValue: SegmentedControlValue | undefined;
     rootDisabled: boolean;
     registerItem: (record: Omit<ItemRecord, 'mountIndex'>) => void;
     unregisterItem: (value: SegmentedControlValue) => void;
-    getOrderedItems: () => ItemRecord[];
     onSelect: (value: SegmentedControlValue) => void;
-    itemsRef: React.RefObject<Map<SegmentedControlValue, ItemRecord>>;
 };

package/components/Select/Select.d.ts

@@ -0,0 +1,39 @@
+import { type SelectProps, type SelectTriggerProps, type SelectContentProps, type SelectOptionProps, type SelectGroupProps, type SelectLabelProps } from './types';
+declare function SelectRoot({ id: triggerIdProp, value: controlledValue, defaultValue, onValueChange, open: controlledOpen, defaultOpen, onOpenChange, disabled, placeholder, size, side, align, sideOffset, clearable, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, children, }: SelectProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SelectRoot {
+    var displayName: string;
+}
+declare function SelectTriggerComponent({ asChild, className, children, }: SelectTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SelectTriggerComponent {
+    var displayName: string;
+}
+declare function SelectContentComponent({ className, children, }: SelectContentProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SelectContentComponent {
+    var displayName: string;
+}
+declare function SelectOptionComponent({ value: optionValue, disabled, textValue: explicitTextValue, className, children, }: SelectOptionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SelectOptionComponent {
+    var displayName: string;
+}
+declare function SelectGroupComponent({ className, children }: SelectGroupProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SelectGroupComponent {
+    var displayName: string;
+}
+declare function SelectLabelComponent({ className, children }: SelectLabelProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SelectLabelComponent {
+    var displayName: string;
+}
+type SelectCompound = typeof SelectRoot & {
+    Trigger: typeof SelectTriggerComponent;
+    Content: typeof SelectContentComponent;
+    Option: typeof SelectOptionComponent;
+    Group: typeof SelectGroupComponent;
+    Label: typeof SelectLabelComponent;
+};
+export declare const Select: SelectCompound;
+export declare const SelectTrigger: typeof SelectTriggerComponent;
+export declare const SelectContent: typeof SelectContentComponent;
+export declare const SelectOption: typeof SelectOptionComponent;
+export declare const SelectGroup: typeof SelectGroupComponent;
+export declare const SelectLabel: typeof SelectLabelComponent;
+export { useSelectContext as useSelect } from './SelectContext';