@tangible/ui 0.0.1 → 0.0.2

package/components/MultiSelect/MultiSelectContext.js

@@ -0,0 +1,56 @@
+import { createContext, useContext } from 'react';
+// =============================================================================
+// Split Contexts for Performance
+// =============================================================================
+// Actions context: stable config, IDs, refs, callbacks — rarely changes
+// State context: open, value, activeIndex, etc. — changes on interaction
+//
+// Components subscribe to what they need:
+// - Options: actions (register, toggle) + minimal state (isSelected check)
+// - Trigger: both (needs state for display, actions for handlers)
+// - Content: both (needs floating styles, refs)
+// =============================================================================
+export const MultiSelectActionsContext = createContext(null);
+export const MultiSelectStateContext = createContext(null);
+/**
+ * Access stable config, IDs, refs, and callbacks.
+ * Safe to use without causing rerenders on navigation changes.
+ */
+export function useMultiSelectActions() {
+    const context = useContext(MultiSelectActionsContext);
+    if (!context) {
+        throw new Error('MultiSelect components must be used within a MultiSelect');
+    }
+    return context;
+}
+/**
+ * Access reactive state: open, value, activeIndex, orderedOptions.
+ * Subscribing causes rerender when these values change.
+ */
+export function useMultiSelectState() {
+    const context = useContext(MultiSelectStateContext);
+    if (!context) {
+        throw new Error('MultiSelect components must be used within a MultiSelect');
+    }
+    return context;
+}
+/**
+ * Combined hook for components that need both.
+ * Convenience for Trigger/Content that need everything.
+ */
+export function useMultiSelectContext() {
+    const actions = useMultiSelectActions();
+    const state = useMultiSelectState();
+    return { ...actions, ...state };
+}
+// =============================================================================
+// Content Context (for Option registration)
+// =============================================================================
+export const MultiSelectContentContext = createContext(null);
+export function useMultiSelectContentContext() {
+    const context = useContext(MultiSelectContentContext);
+    if (!context) {
+        throw new Error('MultiSelect.Option must be used within MultiSelect.Content');
+    }
+    return context;
+}

package/components/MultiSelect/index.d.ts

@@ -0,0 +1,2 @@
+export { MultiSelect, MultiSelectTrigger, MultiSelectContent, MultiSelectOption, MultiSelectGroup, MultiSelectLabel, useMultiSelect, } from './MultiSelect';
+export type { MultiSelectProps, MultiSelectTriggerProps, MultiSelectContentProps, MultiSelectOptionProps, MultiSelectGroupProps, MultiSelectLabelProps, MultiSelectValue, OptionValue, DisplayMode, RegisteredOption as MultiSelectRegisteredOption, } from './types';

package/components/MultiSelect/index.js

@@ -0,0 +1 @@
+export { MultiSelect, MultiSelectTrigger, MultiSelectContent, MultiSelectOption, MultiSelectGroup, MultiSelectLabel, useMultiSelect, } from './MultiSelect.js';

package/components/MultiSelect/types.d.ts

@@ -0,0 +1,218 @@
+import type { FloatingContext, ReferenceType } from '@floating-ui/react';
+import type { RefObject, CSSProperties, MutableRefObject } from 'react';
+import type { SizeStandard } from '../../types/sizes';
+import { toKey, type OptionValue } from '../../utils/value-key';
+export { toKey, type OptionValue };
+/**
+ * Value type for MultiSelect - arrays of strings or numbers.
+ */
+export type MultiSelectValue = Array<string | number>;
+/**
+ * Display mode for the trigger.
+ */
+export type DisplayMode = 'count' | 'chips';
+export type MultiSelectProps = {
+    /**
+     * Control size.
+     * @default 'md'
+     */
+    size?: SizeStandard;
+    /**
+     * Controlled selected values.
+     */
+    value?: MultiSelectValue;
+    /**
+     * Default values for uncontrolled usage.
+     */
+    defaultValue?: MultiSelectValue;
+    /**
+     * Callback when selection changes.
+     */
+    onValueChange?: (value: MultiSelectValue) => void;
+    /**
+     * Controlled open state.
+     */
+    open?: boolean;
+    /**
+     * Default open state for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Callback when open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the entire select is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Placeholder text when no values are selected.
+     */
+    placeholder?: string;
+    /**
+     * Display mode for the trigger.
+     * - 'count': Shows "N selected"
+     * - 'chips': Shows visual chips for selected items
+     * @default 'count'
+     */
+    display?: DisplayMode;
+    /**
+     * Maximum number of chips to show before "+N more" badge.
+     * Only applies when display='chips'.
+     * @default 3
+     */
+    maxChips?: number;
+    /**
+     * Maximum number of selections allowed.
+     * When reached, unselected options become disabled.
+     */
+    max?: number;
+    /**
+     * Callback when max selections is reached.
+     */
+    onMaxReached?: () => void;
+    /**
+     * Accessible name for the select.
+     */
+    'aria-label'?: string;
+    /**
+     * ID of element that labels this select.
+     */
+    'aria-labelledby'?: string;
+    /**
+     * ID of element(s) that describe this select.
+     */
+    'aria-describedby'?: string;
+    /**
+     * Optional trigger ID override.
+     * Useful for Field integration via htmlFor.
+     */
+    id?: string;
+    children: React.ReactNode;
+};
+export type MultiSelectTriggerProps = {
+    /**
+     * When true, merges props onto the child element instead of wrapping.
+     * Child must be a single React element that accepts ref and event handlers.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    children?: React.ReactNode;
+};
+export type MultiSelectContentProps = {
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    children: React.ReactNode;
+};
+export type MultiSelectOptionProps = {
+    /**
+     * The value for this option. Required and must be unique.
+     * Can be string or number.
+     */
+    value: OptionValue;
+    /**
+     * Whether this option is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Text value for typeahead and chip labels.
+     * Required when children is not a string.
+     * If children is a string, defaults to that.
+     */
+    textValue?: string;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    children: React.ReactNode;
+};
+export type MultiSelectGroupProps = {
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    children: React.ReactNode;
+};
+export type MultiSelectLabelProps = {
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    children: React.ReactNode;
+};
+/**
+ * Registration record for an option.
+ */
+export type RegisteredOption = {
+    value: OptionValue;
+    ref: RefObject<HTMLElement | null>;
+    disabled: boolean;
+    textValue: string;
+};
+/**
+ * Stable context: config, IDs, refs, and stable callbacks.
+ * Rarely changes — safe to subscribe without rerender concerns.
+ */
+export type MultiSelectActionsContextValue = {
+    disabled: boolean;
+    placeholder: string;
+    display: DisplayMode;
+    maxChips: number;
+    max: number | undefined;
+    size: SizeStandard;
+    triggerId: string;
+    listboxId: string;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    setOpen: (open: boolean) => void;
+    toggleOption: (optionValue: OptionValue, textValue: string) => void;
+    clearAll: () => void;
+    registerOption: (option: RegisteredOption) => void;
+    unregisterOption: (value: OptionValue) => void;
+    refs: {
+        reference: React.RefObject<ReferenceType | null>;
+        floating: React.RefObject<HTMLElement | null>;
+        setReference: (node: ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    };
+    listRef: MutableRefObject<(HTMLElement | null)[]>;
+    getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getItemProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+};
+/**
+ * State context: values that change during interaction.
+ * Subscribe only when you need reactive updates.
+ */
+export type MultiSelectStateContextValue = {
+    open: boolean;
+    value: MultiSelectValue;
+    maxReached: boolean;
+    isSelected: (optionValue: OptionValue) => boolean;
+    getSelectedOptions: () => RegisteredOption[];
+    activeIndex: number | null;
+    highlightedValue: OptionValue | null;
+    orderedOptions: RegisteredOption[];
+    floatingStyles: CSSProperties;
+    floatingContext: FloatingContext;
+};
+/**
+ * Combined context value (for backwards compat and convenience hooks).
+ * @deprecated Prefer using useMultiSelectActions + useMultiSelectState separately.
+ */
+export type MultiSelectContextValue = MultiSelectActionsContextValue & MultiSelectStateContextValue;
+export type MultiSelectContentContextValue = {
+    listRef: MutableRefObject<(HTMLElement | null)[]>;
+    activeIndex: number | null;
+    orderedOptions: RegisteredOption[];
+};

package/components/MultiSelect/types.js

@@ -0,0 +1,3 @@
+import { toKey } from '../../utils/value-key.js';
+// Re-export shared value-key types so existing consumers don't break
+export { toKey };

package/components/Notice/Notice.d.ts

@@ -38,7 +38,7 @@ export type NoticeProps<TAs extends RootAs = 'section'> = CommonProps & {
      * Accessible name when there is no visible title in Notice.Head.
      * Only use when Notice.Head has no title prop - if both exist, the visible title takes precedence.
      */
-    ariaLabel?: string;
+    'aria-label'?: string;
     /** Renders a dismiss button */
     dismissible?: boolean;
     onDismiss?: () => void;

package/components/Notice/Notice.js

@@ -9,7 +9,7 @@ function prefersReducedMotion() {
         return false;
     return window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
 }
-export const Notice = forwardRef(function Notice({ as = 'section', inline, elevated, interactive, disabled, stripe, className, style, onClick, theme = 'info', announce = 'off', ariaLabel, dismissible, onDismiss, dismissLabel = 'Dismiss', exitAnimation = 'none', focusable, children, ...rest }, ref) {
+export const Notice = forwardRef(function Notice({ as = 'section', inline, elevated, interactive, disabled, stripe, className, style, onClick, theme = 'info', announce = 'off', 'aria-label': ariaLabel, dismissible, onDismiss, dismissLabel = 'Dismiss', exitAnimation = 'none', focusable, children, ...rest }, ref) {
     const Tag = as;
     const innerRef = useRef(null);
     const [isExiting, setIsExiting] = useState(false);

package/components/Progress/Progress.js

@@ -6,7 +6,7 @@ import { cx } from '../../utils/cx.js';
 // COMPONENT
 // =============================================================================
 export function Progress(props) {
-    const { children, mode = 'line', size = 'md', max = 100, showLabels = true, labelledBy, ariaLabel, defaultLabel, className, } = props;
+    const { children, mode = 'line', size = 'md', max = 100, showLabels = true, 'aria-labelledby': labelledBy, 'aria-label': ariaLabel, defaultLabel, className, } = props;
     // Determine mode
     const isSegmented = 'segments' in props && Array.isArray(props.segments);
     // Standard mode props

package/components/Progress/types.d.ts

@@ -60,17 +60,17 @@ export type BaseProgressProps = {
     showLabels?: boolean;
     /**
      * ARIA: ID of an element that labels this progress bar.
-     * Takes precedence over `ariaLabel` and `defaultLabel`.
+     * Takes precedence over `aria-label` and `defaultLabel`.
      */
-    labelledBy?: string;
+    'aria-labelledby'?: string;
     /**
      * ARIA: Accessible name for the progress bar.
      * Use when no visible label exists. Takes precedence over `defaultLabel`.
      */
-    ariaLabel?: string;
+    'aria-label'?: string;
     /**
      * Fallback accessible name, rendered as visually-hidden text.
-     * Only used if neither `labelledBy` nor `ariaLabel` is provided.
+     * Only used if neither `aria-labelledby` nor `aria-label` is provided.
      */
     defaultLabel?: string;
     /**
@@ -97,7 +97,7 @@ export type BaseProgressProps = {
  *     { value: 24, label: 'Progress' },
  *     { value: 38, label: 'Expected' },
  *   ]}
- *   ariaLabel="Student progress"
+ *   aria-label="Student progress"
  * />
  * ```
  */
@@ -129,7 +129,7 @@ export type SegmentedProgressProps = BaseProgressProps & {
  * @example
  * ```tsx
  * // Basic bar with no label
- * <Progress value={42} ariaLabel="Upload progress" />
+ * <Progress value={42} aria-label="Upload progress" />
  *
  * // With labels above the bar (split left/right)
  * <Progress
@@ -140,7 +140,7 @@ export type SegmentedProgressProps = BaseProgressProps & {
  * />
  *
  * // Indeterminate (loading)
- * <Progress indeterminate ariaLabel="Loading" />
+ * <Progress indeterminate aria-label="Loading" />
  * ```
  */
 export type StandardProgressProps = BaseProgressProps & {

package/components/Radio/Radio.d.ts

@@ -0,0 +1,2 @@
+import type { RadioProps } from './types';
+export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLButtonElement>>;

package/components/Radio/Radio.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useRef } from 'react';
+import { cx } from '../../utils/cx.js';
+import { composeRefs } from '../../utils/compose-refs.js';
+import { toKey } from '../../utils/value-key.js';
+import { isDev } from '../../utils/is-dev.js';
+import { useRadioGroupContext } from './RadioGroupContext.js';
+// =============================================================================
+// Radio Component
+// =============================================================================
+//
+// <button role="radio"> inside a RadioGroup. Not a native <input>.
+// Uses roving tabindex — only the selected (or first enabled) item gets tabIndex={0}.
+// Arrow keys in the group move focus AND select.
+//
+// =============================================================================
+export const Radio = forwardRef(function Radio({ value, label, disabled = false, className }, externalRef) {
+    const { selectedValue, focusableValue, rootDisabled, registerItem, unregisterItem, onSelect, } = useRadioGroupContext();
+    const isSelected = selectedValue !== undefined && toKey(selectedValue) === toKey(value);
+    const isDisabled = rootDisabled || disabled;
+    const isFocusable = focusableValue !== undefined && toKey(focusableValue) === toKey(value);
+    // Dev-only: warn if Radio has no accessible name (fire once)
+    const hasWarnedRef = useRef(false);
+    useEffect(() => {
+        if (hasWarnedRef.current)
+            return;
+        if (isDev() && !label) {
+            console.warn('Radio: Missing accessible name. Provide a label prop.');
+            hasWarnedRef.current = true;
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Callback ref for registration
+    const callbackRef = useCallback((node) => {
+        if (node) {
+            registerItem({ value, element: node, disabled });
+        }
+        else {
+            unregisterItem(value);
+        }
+    }, [value, disabled, registerItem, unregisterItem]);
+    // Click handler
+    const handleClick = () => {
+        if (isDisabled)
+            return;
+        onSelect(value);
+    };
+    return (_jsxs("button", { ref: composeRefs(callbackRef, externalRef), type: "button", role: "radio", className: cx('tui-radio', className), "aria-checked": isSelected, disabled: isDisabled, tabIndex: isFocusable ? 0 : -1, onClick: handleClick, children: [_jsx("span", { className: "tui-radio__indicator", "aria-hidden": "true" }), label && _jsx("span", { className: "tui-radio__label", children: label })] }));
+});
+Radio.displayName = 'Radio';

package/components/Radio/RadioGroup.d.ts

@@ -0,0 +1,2 @@
+import type { RadioGroupProps } from './types';
+export declare function RadioGroup({ value: controlledValue, defaultValue, onValueChange, disabled, orientation, loop, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, children, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;

package/components/Radio/RadioGroup.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo } from 'react';
+import { cx } from '../../utils/cx.js';
+import { useControllableState } from '../../utils/use-controllable-state.js';
+import { useRovingGroup } from '../../utils/use-roving-group.js';
+import { RadioGroupContext } from './RadioGroupContext.js';
+import { isDev } from '../../utils/is-dev.js';
+// =============================================================================
+// RadioGroup Component
+// =============================================================================
+//
+// <div role="radiogroup"> with roving tabindex and arrow key navigation.
+// Radio items are <button role="radio"> — not native inputs.
+// Arrow keys move focus AND select (WAI-ARIA APG pattern).
+//
+// CSS token API:
+//   --tui-radio-accent    Accent color for selected state
+//
+// =============================================================================
+export function RadioGroup({ value: controlledValue, defaultValue, onValueChange, disabled = false, orientation = 'vertical', loop = true, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, children, }) {
+    const [selectedValue, setSelectedValue] = useControllableState({
+        value: controlledValue,
+        defaultValue,
+        onChange: onValueChange,
+    });
+    // Selection handler
+    const onSelect = useCallback((newValue) => {
+        setSelectedValue(newValue);
+    }, [setSelectedValue]);
+    const { registerItem, unregisterItem, focusableValue, handleKeyDown, } = useRovingGroup({
+        selectedValue,
+        onSelect,
+        disabled,
+        loop,
+        orientation,
+        orientationKeyboard: false,
+    });
+    // Dev-only: Warn if missing accessible name
+    useEffect(() => {
+        if (isDev() && !ariaLabel && !ariaLabelledBy) {
+            console.warn('RadioGroup: Missing accessible name. Provide aria-label or aria-labelledby.');
+        }
+    }, [ariaLabel, ariaLabelledBy]);
+    const contextValue = useMemo(() => ({
+        selectedValue,
+        focusableValue,
+        rootDisabled: disabled,
+        orientation,
+        registerItem,
+        unregisterItem,
+        onSelect,
+    }), [selectedValue, focusableValue, disabled, orientation, registerItem, unregisterItem, onSelect]);
+    return (_jsx(RadioGroupContext.Provider, { value: contextValue, children: _jsx("div", { role: "radiogroup", className: cx('tui-radio-group', orientation === 'horizontal' && 'is-horizontal', className), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-disabled": disabled || undefined, "aria-orientation": orientation === 'horizontal' ? 'horizontal' : undefined, onKeyDown: handleKeyDown, children: children }) }));
+}

package/components/Radio/RadioGroupContext.d.ts

@@ -0,0 +1,3 @@
+import type { RadioGroupContextValue } from './types';
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue | null>;
+export declare function useRadioGroupContext(): RadioGroupContextValue;

package/components/Radio/RadioGroupContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export const RadioGroupContext = createContext(null);
+export function useRadioGroupContext() {
+    const context = useContext(RadioGroupContext);
+    if (!context) {
+        throw new Error('Radio must be used within a RadioGroup');
+    }
+    return context;
+}

package/components/Radio/index.d.ts

@@ -0,0 +1,8 @@
+import { RadioGroup as RadioGroupRoot } from './RadioGroup';
+import { Radio as RadioItem } from './Radio';
+type RadioGroupCompound = typeof RadioGroupRoot & {
+    Item: typeof RadioItem;
+};
+export declare const RadioGroup: RadioGroupCompound;
+export { Radio } from './Radio';
+export type { RadioGroupProps, RadioProps, } from './types';

package/components/Radio/index.js

@@ -0,0 +1,6 @@
+import { RadioGroup as RadioGroupRoot } from './RadioGroup.js';
+import { Radio as RadioItem } from './Radio.js';
+export const RadioGroup = RadioGroupRoot;
+RadioGroup.Item = RadioItem;
+// Named exports
+export { Radio } from './Radio.js';

package/components/Radio/types.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+import type { OptionValue } from '../../utils/value-key';
+import type { RovingItemRecord } from '../../utils/use-roving-group';
+export type RadioGroupProps = {
+    value?: OptionValue;
+    defaultValue?: OptionValue;
+    onValueChange?: (value: OptionValue) => void;
+    disabled?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    loop?: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    className?: string;
+    children: ReactNode;
+};
+export type RadioProps = {
+    value: OptionValue;
+    label?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+};
+export type RadioItemRecord = RovingItemRecord;
+export type RadioGroupContextValue = {
+    selectedValue: OptionValue | undefined;
+    /** The value of the item that should receive tabIndex={0} */
+    focusableValue: OptionValue | undefined;
+    rootDisabled: boolean;
+    orientation: 'horizontal' | 'vertical';
+    registerItem: (record: Omit<RadioItemRecord, 'mountIndex'>) => void;
+    unregisterItem: (value: OptionValue) => void;
+    onSelect: (value: OptionValue) => void;
+};

package/components/Radio/types.js

@@ -0,0 +1 @@
+export {};

package/components/Rating/Rating.d.ts

@@ -2,7 +2,7 @@ import type { SizeStandard, Theme as ThemeFull } from '../../types';
 type Size = SizeStandard;
 type Theme = ThemeFull;
 export type RatingProps = {
-    /** Controlled value (1..max). Use with onChange */
+    /** Controlled value (1..max). Use with onValueChange */
     value?: number;
     /** Uncontrolled initial value */
     defaultValue?: number;
@@ -18,15 +18,15 @@ export type RatingProps = {
     size?: Size;
     /** Theme feeds foreground color tokens */
     theme?: Theme;
-    /** Called on change (controlled or uncontrolled) */
-    onChange?: (value: number) => void;
+    /** Called when the value changes */
+    onValueChange?: (value: number) => void;
     /** Allow clicking the current selection to clear back to 0 */
     allowClear?: boolean;
     className?: string;
     /** Gap override (e.g. '0.25rem') – otherwise uses density utilities */
     gap?: string;
     /** Accessible label for the rating group. Defaults to "Rating: X of Y" */
-    ariaLabel?: string;
+    'aria-label'?: string;
 };
-export declare function Rating({ value, defaultValue, max, disabled, readOnly, name, size, theme, onChange, allowClear, className, gap, ariaLabel, }: RatingProps): import("react/jsx-runtime").JSX.Element;
+export declare function Rating({ value, defaultValue, max, disabled, readOnly, name, size, theme, onValueChange, allowClear, className, gap, 'aria-label': ariaLabel, }: RatingProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/Rating/Rating.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { cx } from '../../utils/cx.js';
 import { Icon } from '../Icon/index.js';
-export function Rating({ value, defaultValue = 0, max = 5, disabled, readOnly, name, size = 'lg', theme = 'secondary', onChange, allowClear, className, gap, ariaLabel, }) {
+export function Rating({ value, defaultValue = 0, max = 5, disabled, readOnly, name, size = 'lg', theme = 'secondary', onValueChange, allowClear, className, gap, 'aria-label': ariaLabel, }) {
     const isControlled = value != null;
     const [internal, setInternal] = React.useState(defaultValue);
     const current = isControlled ? value : internal;
@@ -13,7 +13,7 @@ export function Rating({ value, defaultValue = 0, max = 5, disabled, readOnly, n
             return;
         if (!isControlled)
             setInternal(v);
-        onChange?.(v);
+        onValueChange?.(v);
     };
     const handleSelect = (n) => {
         if (allowClear && current === n)