@skdx/react 0.26.0 → 0.28.0

package/dist/meter/MeterLabel.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { MeterLabelProps } from './types.js';
+/**
+ * Visible name for a meter. Rendered as `<span>` so the root can wire `aria-labelledby`.
+ *
+ * @example
+ * ```tsx
+ * <Meter value={82}>
+ *   <MeterLabel>Disk usage</MeterLabel>
+ *   <MeterIndicator />
+ * </Meter>
+ * ```
+ */
+export declare const MeterLabel: React.ForwardRefExoticComponent<Omit<MeterLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/meter/MeterValue.d.cts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { MeterValueProps } from './types.cjs';
+/**
+ * The visible readout — hidden from accessibility to avoid duplicate
+ * announcements of `aria-valuetext`. By default renders `getValueLabel(value,
+ * min, max)`. Always renders the label, even on ranges where the root omits
+ * `aria-valuetext`.
+ *
+ * @example
+ * ```tsx
+ * <Meter value={82} aria-label="Disk usage">
+ *   <MeterValue />
+ * </Meter>
+ * ```
+ */
+export declare const MeterValue: React.ForwardRefExoticComponent<Omit<MeterValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/meter/MeterValue.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { MeterValueProps } from './types.js';
+/**
+ * The visible readout — hidden from accessibility to avoid duplicate
+ * announcements of `aria-valuetext`. By default renders `getValueLabel(value,
+ * min, max)`. Always renders the label, even on ranges where the root omits
+ * `aria-valuetext`.
+ *
+ * @example
+ * ```tsx
+ * <Meter value={82} aria-label="Disk usage">
+ *   <MeterValue />
+ * </Meter>
+ * ```
+ */
+export declare const MeterValue: React.ForwardRefExoticComponent<Omit<MeterValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/meter/index.d.cts

@@ -1,3 +1,2 @@
-export * from './Meter.cjs';
-export { MeterIndicator } from './MeterIndicator.cjs';
-export type { MeterProps, MeterIndicatorProps, MeterRange } from './types.cjs';
+export { Meter } from './Meter.cjs';
+export type { MeterProps, MeterRange } from './types.cjs';

package/dist/meter/index.d.ts

@@ -1,3 +1,2 @@
-export * from './Meter.js';
-export { MeterIndicator } from './MeterIndicator.js';
-export type { MeterProps, MeterIndicatorProps, MeterRange } from './types.js';
+export { Meter } from './Meter.js';
+export type { MeterProps, MeterRange } from './types.js';

package/dist/meter/primitives.d.cts

@@ -0,0 +1,19 @@
+/**
+ * Advanced primitives for `Meter`: `Meter`, `MeterIndicator`, `MeterLabel`, and `MeterValue`.
+ *
+ * @example
+ * ```tsx
+ * import { Meter, MeterIndicator, MeterLabel, MeterValue } from '@skdx/react/primitives/meter';
+ *
+ * <Meter value={82} aria-label="Disk usage">
+ *   <MeterLabel>Disk usage</MeterLabel>
+ *   <MeterValue />
+ *   <MeterIndicator />
+ * </Meter>
+ * ```
+ */
+export { Meter } from './Meter.cjs';
+export { MeterLabel } from './MeterLabel.cjs';
+export { MeterValue } from './MeterValue.cjs';
+export { MeterIndicator } from './MeterIndicator.cjs';
+export type { MeterProps, MeterLabelProps, MeterValueProps, MeterIndicatorProps } from './types.cjs';

package/dist/meter/primitives.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Advanced primitives for `Meter`: `Meter`, `MeterIndicator`, `MeterLabel`, and `MeterValue`.
+ *
+ * @example
+ * ```tsx
+ * import { Meter, MeterIndicator, MeterLabel, MeterValue } from '@skdx/react/primitives/meter';
+ *
+ * <Meter value={82} aria-label="Disk usage">
+ *   <MeterLabel>Disk usage</MeterLabel>
+ *   <MeterValue />
+ *   <MeterIndicator />
+ * </Meter>
+ * ```
+ */
+export { Meter } from './Meter.js';
+export { MeterLabel } from './MeterLabel.js';
+export { MeterValue } from './MeterValue.js';
+export { MeterIndicator } from './MeterIndicator.js';
+export type { MeterProps, MeterLabelProps, MeterValueProps, MeterIndicatorProps } from './types.js';

package/dist/meter/types.d.cts

@@ -1,18 +1,23 @@
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
-/** @internal Shared range distributed from {@link Meter} to {@link MeterIndicator} via context. Not part of the public API. */
+/** @internal Shared range distributed from {@link Meter} to its parts via context. Not part of the public API. */
 export interface MeterContextValue {
     value: number;
     min: number;
     max: number;
     range: MeterRange | undefined;
+    /** The id the {@link MeterLabel} takes, and the root points `aria-labelledby` at while one is mounted. */
+    labelId: string;
+    /** Registers the presence of a {@link MeterLabel}, so the root only wires `aria-labelledby` when one exists. */
+    setHasLabel: (hasLabel: boolean) => void;
+    /** The formatted readout, shared with {@link MeterValue} so the visible string and `aria-valuetext` cannot drift. */
+    valueLabel: string;
 }
 /** Which band of the range the current value falls in, once `low`/`high`/`optimum` are supplied. */
 export type MeterRange = 'optimum' | 'suboptimal' | 'poor';
 /** Props for the {@link Meter} root. */
 export interface MeterProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Current value, clamped into `[min, max]`. Always rendered — a meter has no
-     * indeterminate state, because `role="meter"` requires `aria-valuenow`.
+     * Current value, clamped into `[min, max]`. Renders `aria-valuenow`.
      * @default 0
      */
     value?: number;
@@ -27,8 +32,7 @@ export interface MeterProps extends PrimitivePropsWithRef<'div'> {
      */
     max?: number;
     /**
-     * Upper edge of the low band. With `high` and `optimum` this defines the
-     * optimum/suboptimal/poor regions exposed as `data-range`.
+     * Upper edge of the low band. With `high` and `optimum` defines the bands exposed as `data-range`.
      * @default undefined — no band is derived unless one threshold is supplied.
      */
     low?: number;
@@ -38,19 +42,42 @@ export interface MeterProps extends PrimitivePropsWithRef<'div'> {
      */
     high?: number;
     /**
-     * The ideal value. Below `low` means low values are optimum (disk usage),
-     * above `high` means high values are optimum (battery), between them means
-     * the middle band is optimum (blood pressure).
+     * The ideal value. Below `low` means low values are optimum, above `high` means high values are optimum.
      * @default undefined — the midpoint of the range when `low` or `high` is supplied.
      */
     optimum?: number;
     /**
-     * Formats the `aria-valuetext`. Takes `min` as well as `max` because a
-     * meter's range need not start at zero.
+     * Formats the `aria-valuetext` and the {@link MeterValue} readout. Takes `min` and `max`.
      * @default undefined — falls back to a rounded percentage of the position within [min, max].
      */
     getValueLabel?: (value: number, min: number, max: number) => string;
+    /**
+     * `Intl.NumberFormat` options the value is formatted with for `aria-valuetext` and the {@link MeterValue} readout. Formats the raw value as `NumberField` does, so with `{ style: 'percent' }` the value is the fraction.
+     * @default undefined — falls back to a rounded percentage of the position within [min, max].
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /**
+     * BCP-47 locale the formatting uses, so server and browser renders agree on separators.
+     * @default undefined — the runtime locale.
+     */
+    locale?: string;
+    /**
+     * Visible caption, rendered into a derived `MeterLabel` and wired to `aria-labelledby`. Ignored when `children` is given.
+     * @default undefined — no label element is rendered.
+     */
+    label?: string;
+    /**
+     * Renders a derived `MeterValue` readout alongside the fill. Ignored when `children` is given.
+     * @default false
+     */
+    showValue?: boolean;
 }
 /** Props for {@link MeterIndicator}, the fill element inside `Meter`. */
 export interface MeterIndicatorProps extends PrimitivePropsWithRef<'div'> {
 }
+/** Props for {@link MeterLabel}, the meter's visible name. */
+export interface MeterLabelProps extends PrimitivePropsWithRef<'span'> {
+}
+/** Props for {@link MeterValue}, the visible readout inside `Meter`. */
+export interface MeterValueProps extends PrimitivePropsWithRef<'span'> {
+}

package/dist/meter/types.d.ts

@@ -1,18 +1,23 @@
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/** @internal Shared range distributed from {@link Meter} to {@link MeterIndicator} via context. Not part of the public API. */
+/** @internal Shared range distributed from {@link Meter} to its parts via context. Not part of the public API. */
 export interface MeterContextValue {
     value: number;
     min: number;
     max: number;
     range: MeterRange | undefined;
+    /** The id the {@link MeterLabel} takes, and the root points `aria-labelledby` at while one is mounted. */
+    labelId: string;
+    /** Registers the presence of a {@link MeterLabel}, so the root only wires `aria-labelledby` when one exists. */
+    setHasLabel: (hasLabel: boolean) => void;
+    /** The formatted readout, shared with {@link MeterValue} so the visible string and `aria-valuetext` cannot drift. */
+    valueLabel: string;
 }
 /** Which band of the range the current value falls in, once `low`/`high`/`optimum` are supplied. */
 export type MeterRange = 'optimum' | 'suboptimal' | 'poor';
 /** Props for the {@link Meter} root. */
 export interface MeterProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Current value, clamped into `[min, max]`. Always rendered — a meter has no
-     * indeterminate state, because `role="meter"` requires `aria-valuenow`.
+     * Current value, clamped into `[min, max]`. Renders `aria-valuenow`.
      * @default 0
      */
     value?: number;
@@ -27,8 +32,7 @@ export interface MeterProps extends PrimitivePropsWithRef<'div'> {
      */
     max?: number;
     /**
-     * Upper edge of the low band. With `high` and `optimum` this defines the
-     * optimum/suboptimal/poor regions exposed as `data-range`.
+     * Upper edge of the low band. With `high` and `optimum` defines the bands exposed as `data-range`.
      * @default undefined — no band is derived unless one threshold is supplied.
      */
     low?: number;
@@ -38,19 +42,42 @@ export interface MeterProps extends PrimitivePropsWithRef<'div'> {
      */
     high?: number;
     /**
-     * The ideal value. Below `low` means low values are optimum (disk usage),
-     * above `high` means high values are optimum (battery), between them means
-     * the middle band is optimum (blood pressure).
+     * The ideal value. Below `low` means low values are optimum, above `high` means high values are optimum.
      * @default undefined — the midpoint of the range when `low` or `high` is supplied.
      */
     optimum?: number;
     /**
-     * Formats the `aria-valuetext`. Takes `min` as well as `max` because a
-     * meter's range need not start at zero.
+     * Formats the `aria-valuetext` and the {@link MeterValue} readout. Takes `min` and `max`.
      * @default undefined — falls back to a rounded percentage of the position within [min, max].
      */
     getValueLabel?: (value: number, min: number, max: number) => string;
+    /**
+     * `Intl.NumberFormat` options the value is formatted with for `aria-valuetext` and the {@link MeterValue} readout. Formats the raw value as `NumberField` does, so with `{ style: 'percent' }` the value is the fraction.
+     * @default undefined — falls back to a rounded percentage of the position within [min, max].
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /**
+     * BCP-47 locale the formatting uses, so server and browser renders agree on separators.
+     * @default undefined — the runtime locale.
+     */
+    locale?: string;
+    /**
+     * Visible caption, rendered into a derived `MeterLabel` and wired to `aria-labelledby`. Ignored when `children` is given.
+     * @default undefined — no label element is rendered.
+     */
+    label?: string;
+    /**
+     * Renders a derived `MeterValue` readout alongside the fill. Ignored when `children` is given.
+     * @default false
+     */
+    showValue?: boolean;
 }
 /** Props for {@link MeterIndicator}, the fill element inside `Meter`. */
 export interface MeterIndicatorProps extends PrimitivePropsWithRef<'div'> {
 }
+/** Props for {@link MeterLabel}, the meter's visible name. */
+export interface MeterLabelProps extends PrimitivePropsWithRef<'span'> {
+}
+/** Props for {@link MeterValue}, the visible readout inside `Meter`. */
+export interface MeterValueProps extends PrimitivePropsWithRef<'span'> {
+}

package/dist/multi-select/MultiSelect.cjs

@@ -1 +1 @@
-"use strict";var ze=Object.create;var T=Object.defineProperty;var Je=Object.getOwnPropertyDescriptor;var Qe=Object.getOwnPropertyNames;var Xe=Object.getPrototypeOf,Ye=Object.prototype.hasOwnProperty;var Ze=(t,o)=>{for(var e in o)T(t,e,{get:o[e],enumerable:!0})},X=(t,o,e,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of Qe(o))!Ye.call(t,l)&&l!==e&&T(t,l,{get:()=>o[l],enumerable:!(i=Je(o,l))||i.enumerable});return t};var M=(t,o,e)=>(e=t!=null?ze(Xe(t)):{},X(o||!t||!t.__esModule?T(e,"default",{value:t,enumerable:!0}):e,t)),_e=t=>X(T({},"__esModule",{value:!0}),t);var je={};Ze(je,{MultiSelect:()=>le,MultiSelectContent:()=>K,MultiSelectInput:()=>A,MultiSelectItem:()=>U,MultiSelectList:()=>G,MultiSelectPortal:()=>W,MultiSelectProvider:()=>oe,MultiSelectTag:()=>F,MultiSelectTagList:()=>V,MultiSelectTagRemove:()=>B,defaultGetSelectionLabel:()=>te,useMultiSelectContext:()=>s});module.exports=_e(je);var u=M(require("react"),1),Y=require("../utils/createContext.cjs"),Z=require("../utils/liveAnnouncer.cjs"),_=require("../utils/popper.cjs"),L=require("../utils/useControllableState.cjs"),j=require("../utils/useOpenChangeComplete.cjs"),ee=require("../utils/useOptionCollection.cjs"),w=require("react/jsx-runtime");function te(t){return t===0?"none selected":`${t} selected`}var[oe,s]=(0,Y.createSafeContext)("MultiSelect");function le({children:t,value:o,defaultValue:e=[],onValueChange:i,inputValue:l,defaultInputValue:n="",onInputValueChange:f,open:S,defaultOpen:g=!1,onOpenChange:v,onOpenChangeComplete:r,max:m,closeOnSelect:a=!1,filter:b,disabled:$=!1,readOnly:q=!1,invalid:Ve=!1,getSelectionLabel:z=te}){let Fe=u.useRef(null),k=u.useRef(null),Be=u.useId(),[x=[],R]=(0,L.useControllableState)({prop:o,defaultProp:e,onChange:i}),[D="",O]=(0,L.useControllableState)({prop:l,defaultProp:n,onChange:f}),[E=!1,h]=(0,L.useControllableState)({prop:S,defaultProp:g,onChange:v});(0,j.useOpenChangeComplete)(E,k,r);let d=(0,ee.useOptionCollection)({open:E,setOpen:h,contentRef:k}),P=$||q,We=m!==void 0&&x.length>=m,J=x.length,Q=u.useRef(!0);u.useEffect(()=>{if(Q.current){Q.current=!1;return}(0,Z.announce)(z(J))},[J,z]);let Ke=u.useCallback(c=>x.includes(c),[x]),Ge=u.useCallback(c=>{P||R((p=[])=>p.includes(c)?p.filter(H=>H!==c):p)},[P,R]),Ue=u.useCallback(()=>{P||R((c=[])=>c.length===0?c:c.slice(0,-1))},[P,R]),$e=u.useCallback(c=>{P||(R((p=[])=>p.includes(c)?p.filter(H=>H!==c):m!==void 0&&p.length>=m?p:[...p,c]),O(""),a&&h(!1))},[P,m,a,R,O,h]),qe=u.useCallback(c=>b===void 0||b(c,D),[b,D]);return(0,w.jsx)(_.PopperRoot,{children:(0,w.jsx)(oe,{inputRef:Fe,contentRef:k,listId:Be,value:x,isSelected:Ke,toggle:$e,deselect:Ge,removeLast:Ue,atMax:We,inputValue:D,onInputValueChange:O,open:E,onOpenChange:h,activeId:d.activeId,setActiveId:d.setActiveId,moveActive:d.moveActive,openWithHighlight:d.openWithHighlight,itemCount:d.itemCount,registerItem:d.registerItem,unregisterItem:d.unregisterItem,getItem:d.getItem,matchesFilter:qe,disabled:$,readOnly:q,invalid:Ve,children:t})})}le.displayName="MultiSelect";var ie=M(require("react"),1),ne=require("../utils/composeRefs.cjs"),re=require("../utils/part.cjs"),ae=require("../utils/popper.cjs"),C=require("../utils/primitive.cjs");var N=require("react/jsx-runtime"),A=ie.forwardRef((t,o)=>{let e=s("MultiSelectInput"),i=(0,ne.useComposedRefs)(o,e.inputRef);return(0,N.jsx)(ae.PopperAnchor,{asChild:!0,children:(0,N.jsx)(C.Primitive.input,{type:"text",role:"combobox","aria-expanded":e.open,"aria-controls":e.listId,"aria-autocomplete":"list","aria-activedescendant":e.activeId??void 0,autoComplete:"off",disabled:e.disabled,readOnly:e.readOnly,"aria-invalid":e.invalid?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"data-invalid":e.invalid?"":void 0,"data-readonly":e.readOnly?"":void 0,"data-disabled":e.disabled?"":void 0,"data-state":e.open?"open":"closed",...t,...(0,re.skdxPart)("multi-select","input",t.className),ref:i,value:e.inputValue,onChange:(0,C.composeEventHandlers)(t.onChange,l=>{e.onInputValueChange(l.target.value),e.open||e.onOpenChange(!0)}),onBlur:(0,C.composeEventHandlers)(t.onBlur,()=>{e.open&&e.onOpenChange(!1)}),onKeyDown:(0,C.composeEventHandlers)(t.onKeyDown,l=>{if(l.key==="ArrowDown")l.preventDefault(),e.open?e.moveActive(1):e.openWithHighlight("first");else if(l.key==="ArrowUp")l.preventDefault(),e.open?e.moveActive(-1):e.openWithHighlight("last");else if(l.key==="Enter"){let n=e.activeId?e.getItem(e.activeId):void 0;if(!n)return;l.preventDefault(),e.toggle(n.value)}else l.key==="Escape"?e.open&&!e.contentRef.current&&(l.preventDefault(),e.onOpenChange(!1)):l.key==="Backspace"&&e.inputValue===""&&e.removeLast()})})})});A.displayName="MultiSelectInput";var se=M(require("react"),1),ce=require("../tag-group/TagGroup.cjs"),ue=require("../utils/part.cjs");var me=require("react/jsx-runtime"),V=se.forwardRef((t,o)=>{let e=s("MultiSelectTagList");return(0,me.jsx)(ce.TagGroup,{disabled:e.disabled||e.readOnly,...t,...(0,ue.skdxPart)("multi-select","tag-list",t.className),ref:o})});V.displayName="MultiSelectTagList";var pe=M(require("react"),1),fe=require("../tag/Tag.cjs"),de=require("../utils/part.cjs");var Me=require("react/jsx-runtime"),F=pe.forwardRef(({value:t,...o},e)=>{let i=s("MultiSelectTag"),l=i.value.indexOf(t);return(0,Me.jsx)(fe.Tag,{index:l,value:t,"data-value":t,onDelete:()=>i.deselect(t),...o,...(0,de.skdxPart)("multi-select","tag",o.className),ref:e})});F.displayName="MultiSelectTag";var ge=M(require("react"),1),Se=require("../tag/Tag.cjs"),Re=require("../utils/part.cjs"),Pe=require("react/jsx-runtime"),B=ge.forwardRef((t,o)=>(0,Pe.jsx)(Se.TagDelete,{...t,...(0,Re.skdxPart)("multi-select","tag-remove",t.className),ref:o}));B.displayName="MultiSelectTagRemove";var Ce=require("../utils/portal.cjs");var ye=require("react/jsx-runtime"),W=({forceMount:t,children:o,...e})=>{let i=s("MultiSelectPortal");return t||i.open?(0,ye.jsx)(Ce.Portal,{...e,children:o}):null};W.displayName="MultiSelectPortal";var ve=M(require("react"),1),xe=require("../utils/composeRefs.cjs"),Ie=require("../utils/part.cjs"),he=require("../utils/popper.cjs"),Te=require("../utils/primitive.cjs"),Le=require("../utils/useDismiss.cjs");var be=require("react/jsx-runtime"),K=ve.forwardRef(({forceMount:t,side:o="bottom",align:e="start",sideOffset:i=4,onEscapeKeyDown:l,onPointerDownOutside:n,onFocusOutside:f,onInteractOutside:S,...g},v)=>{let r=s("MultiSelectContent"),m=(0,xe.useComposedRefs)(v,r.contentRef);return(0,Le.useDismiss)({enabled:r.open,onEscapeKeyDown:a=>{l?.(a),a.defaultPrevented||r.onOpenChange(!1)},onInteractOutside:S,onPointerDownOutside:a=>{n?.(a),a.defaultPrevented||r.onOpenChange(!1)},onFocusOutside:a=>{f?.(a),a.defaultPrevented||r.onOpenChange(!1)}},[r.contentRef,r.inputRef]),!t&&!r.open?null:(0,be.jsx)(he.PopperContent,{component:"multi-select","data-state":r.open?"open":"closed",side:o,align:e,sideOffset:i,...g,...(0,Ie.skdxPart)("multi-select","content",g.className),ref:m,onMouseDown:(0,Te.composeEventHandlers)(g.onMouseDown,a=>a.preventDefault())})});K.displayName="MultiSelectContent";var ke=M(require("react"),1),De=require("../utils/part.cjs"),Oe=require("../utils/primitive.cjs");var Ee=require("react/jsx-runtime"),G=ke.forwardRef((t,o)=>{let e=s("MultiSelectList");return(0,Ee.jsx)(Oe.Primitive.div,{role:"listbox",id:e.listId,"aria-multiselectable":!0,...t,...(0,De.skdxPart)("multi-select","list",t.className),ref:o})});G.displayName="MultiSelectList";var y=M(require("react"),1),He=require("../utils/composeRefs.cjs"),we=require("../utils/part.cjs"),I=require("../utils/primitive.cjs"),Ne=require("../utils/useOptionCollection.cjs");var Ae=require("react/jsx-runtime"),U=y.forwardRef(({value:t,disabled:o,textValue:e,...i},l)=>{let n=s("MultiSelectItem"),f=y.useId(),S=y.useRef(null),g=(0,He.useComposedRefs)(l,S),{visible:v}=(0,Ne.useOptionEntry)({id:f,value:t,textValue:e,itemRef:S,matchesFilter:n.matchesFilter,registerItem:n.registerItem,unregisterItem:n.unregisterItem});if(!v)return null;let r=n.isSelected(t),m=o||n.disabled||n.readOnly||n.atMax&&!r,a=n.activeId===f;return(0,Ae.jsx)(I.Primitive.div,{role:"option",id:f,"data-value":t,"aria-selected":r,"aria-disabled":m?!0:void 0,"data-state":r?"selected":"unselected","data-highlighted":a?"":void 0,"data-disabled":m?"":void 0,...i,...(0,we.skdxPart)("multi-select","item",i.className),ref:g,onClick:(0,I.composeEventHandlers)(i.onClick,()=>{m||(n.toggle(t),n.inputRef.current?.focus())}),onPointerEnter:(0,I.composeEventHandlers)(i.onPointerEnter,()=>{m||n.setActiveId(f)})})});U.displayName="MultiSelectItem";0&&(module.exports={MultiSelect,MultiSelectContent,MultiSelectInput,MultiSelectItem,MultiSelectList,MultiSelectPortal,MultiSelectProvider,MultiSelectTag,MultiSelectTagList,MultiSelectTagRemove,defaultGetSelectionLabel,useMultiSelectContext});
+"use strict";var tl=Object.create;var F=Object.defineProperty;var ll=Object.getOwnPropertyDescriptor;var ol=Object.getOwnPropertyNames;var rl=Object.getPrototypeOf,il=Object.prototype.hasOwnProperty;var nl=(t,r)=>{for(var e in r)F(t,e,{get:r[e],enumerable:!0})},ve=(t,r,e,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let p of ol(r))!il.call(t,p)&&p!==e&&F(t,p,{get:()=>r[p],enumerable:!(c=ll(r,p))||c.enumerable});return t};var C=(t,r,e)=>(e=t!=null?tl(rl(t)):{},ve(r||!t||!t.__esModule?F(e,"default",{value:t,enumerable:!0}):e,t)),al=t=>ve(F({},"__esModule",{value:!0}),t);var sl={};nl(sl,{MultiSelect:()=>Tt,MultiSelectClear:()=>W,MultiSelectContent:()=>q,MultiSelectEmpty:()=>$,MultiSelectGroup:()=>_,MultiSelectGroupLabel:()=>z,MultiSelectGroupProvider:()=>Be,MultiSelectInput:()=>J,MultiSelectItem:()=>Q,MultiSelectList:()=>X,MultiSelectPortal:()=>Y,MultiSelectProvider:()=>kt,MultiSelectTag:()=>Z,MultiSelectTagList:()=>j,MultiSelectTagRemove:()=>ee,defaultGetSelectionLabel:()=>It,useMultiSelectContext:()=>u,useMultiSelectGroupContext:()=>pe});module.exports=al(sl);var n=C(require("react"),1),bt=require("../utils/createContext.cjs"),le=require("../utils/formControl.cjs"),ht=require("../utils/hiddenInput.cjs"),vt=require("../utils/liveAnnouncer.cjs"),Pt=require("../utils/popper.cjs"),oe=require("../utils/scoredFilter.cjs"),te=require("../utils/useControllableState.cjs"),xt=require("../utils/useOpenChangeComplete.cjs"),re=require("../utils/useOptionCollection.cjs");var yt=C(require("react"),1);var Pe=C(require("react"),1),xe=require("../utils/part.cjs"),B=require("../utils/primitive.cjs");var Ie=require("react/jsx-runtime"),W=Pe.forwardRef((t,r)=>{let e=u("MultiSelectClear"),c=e.value.length===0&&e.inputValue==="";return(0,Ie.jsx)(B.Primitive.button,{type:"button",disabled:e.disabled||e.readOnly||c,"data-disabled":e.disabled?"":void 0,"data-readonly":e.readOnly?"":void 0,...t,...(0,xe.skdxPart)("multi-select","clear",t.className),ref:r,onClick:(0,B.composeEventHandlers)(t.onClick,()=>{e.clear(),e.inputRef.current?.focus()})})});W.displayName="MultiSelectClear";var ke=C(require("react"),1),Te=require("../utils/composeRefs.cjs"),Oe=require("../utils/part.cjs"),Ee=require("../utils/popper.cjs"),Le=require("../utils/primitive.cjs"),He=require("../utils/useDismiss.cjs");var De=require("react/jsx-runtime"),q=ke.forwardRef(({forceMount:t,side:r="bottom",align:e="start",sideOffset:c=4,onEscapeKeyDown:p,onPointerDownOutside:l,onFocusOutside:f,onInteractOutside:g,...M},T)=>{let m=u("MultiSelectContent"),h=(0,Te.useComposedRefs)(T,m.contentRef);return(0,He.useDismiss)({enabled:m.open,onEscapeKeyDown:o=>{p?.(o),o.defaultPrevented||m.onOpenChange(!1)},onInteractOutside:g,onPointerDownOutside:o=>{l?.(o),o.defaultPrevented||m.onOpenChange(!1)},onFocusOutside:o=>{f?.(o),o.defaultPrevented||m.onOpenChange(!1)}},[m.contentRef,m.inputRef]),!t&&!m.open?null:(0,De.jsx)(Ee.PopperContent,{component:"multi-select","data-state":m.open?"open":"closed","aria-busy":m.loading?!0:void 0,"data-loading":m.loading?"":void 0,side:r,align:e,sideOffset:c,...M,...(0,Oe.skdxPart)("multi-select","content",M.className),ref:h,onMouseDown:(0,Le.composeEventHandlers)(M.onMouseDown,o=>o.preventDefault())})});q.displayName="MultiSelectContent";var Ge=C(require("react"),1),we=require("../utils/part.cjs"),Ne=require("../utils/primitive.cjs");var Ae=require("react/jsx-runtime"),$=Ge.forwardRef((t,r)=>u("MultiSelectEmpty").itemCount===0?(0,Ae.jsx)(Ne.Primitive.div,{role:"presentation","aria-live":"polite",...t,...(0,we.skdxPart)("multi-select","empty",t.className),ref:r}):null);$.displayName="MultiSelectEmpty";var U=C(require("react"),1),Ve=require("../utils/createContext.cjs"),Ke=require("../utils/part.cjs"),Fe=require("../utils/primitive.cjs"),me=require("react/jsx-runtime"),[Be,pe]=(0,Ve.createSafeContext)("MultiSelectGroup"),_=U.forwardRef((t,r)=>{let e=U.useId();return(0,me.jsx)(Be,{labelId:e,children:(0,me.jsx)(Fe.Primitive.div,{role:"group","aria-labelledby":e,...t,...(0,Ke.skdxPart)("multi-select","group",t.className),ref:r})})});_.displayName="MultiSelectGroup";var We=C(require("react"),1),qe=require("../utils/part.cjs"),$e=require("../utils/primitive.cjs");var Ue=require("react/jsx-runtime"),z=We.forwardRef((t,r)=>{let e=pe("MultiSelectGroupLabel");return(0,Ue.jsx)($e.Primitive.div,{id:e.labelId,...t,...(0,qe.skdxPart)("multi-select","group-label",t.className),ref:r})});z.displayName="MultiSelectGroupLabel";var _e=C(require("react"),1),ze=require("../utils/composeRefs.cjs"),Je=require("../utils/part.cjs"),Qe=require("../utils/popper.cjs"),L=require("../utils/primitive.cjs");var fe=require("react/jsx-runtime"),J=_e.forwardRef((t,r)=>{let e=u("MultiSelectInput"),c=(0,ze.useComposedRefs)(r,e.inputRef),p=l=>{let f=e.activeId,g=e.moveActive(l);if(g===null||g===f)return;let M=e.getItem(g);M&&e.toggle(M.value,"keyboard")};return(0,fe.jsx)(Qe.PopperAnchor,{asChild:!0,children:(0,fe.jsx)(L.Primitive.input,{type:"text",role:"combobox","aria-expanded":e.open,"aria-controls":e.listId,"aria-autocomplete":"list","aria-activedescendant":e.activeId??void 0,autoComplete:"off",disabled:e.disabled,readOnly:e.readOnly,"aria-invalid":e.invalid?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"aria-busy":e.loading?!0:void 0,"data-invalid":e.invalid?"":void 0,"data-readonly":e.readOnly?"":void 0,"data-disabled":e.disabled?"":void 0,"data-loading":e.loading?"":void 0,"data-state":e.open?"open":"closed",...t,...(0,Je.skdxPart)("multi-select","input",t.className),ref:c,value:e.inputValue,onChange:(0,L.composeEventHandlers)(t.onChange,l=>{e.onInputValueChange(l.target.value),e.open||e.onOpenChange(!0)}),onBlur:(0,L.composeEventHandlers)(t.onBlur,()=>{e.open&&e.onOpenChange(!1)}),onKeyDown:(0,L.composeEventHandlers)(t.onKeyDown,l=>{if(l.key==="ArrowDown")l.preventDefault(),e.open?l.shiftKey?p(1):e.moveActive(1):e.openWithHighlight("first");else if(l.key==="ArrowUp")l.preventDefault(),e.open?l.shiftKey?p(-1):e.moveActive(-1):e.openWithHighlight("last");else if((l.key==="Home"||l.key==="End")&&l.ctrlKey&&l.shiftKey){if(!e.open)return;l.preventDefault(),e.selectToEdge(l.key==="Home"?"first":"last")}else if(l.key==="Home"||l.key==="End"){if(!e.open)return;l.preventDefault(),e.moveActiveToEdge(l.key==="Home"?"first":"last")}else if((l.ctrlKey||l.metaKey)&&l.key.toLowerCase()==="a"){if(!e.open||!e.allowSelectAll)return;l.preventDefault(),e.selectAllOrClear()}else if(l.key===" "&&l.shiftKey){if(!e.open||e.activeId===null)return;l.preventDefault(),e.selectRange()}else if(l.key==="Enter"){let f=e.activeId?e.getItem(e.activeId):void 0;if(!f)return;l.preventDefault(),e.toggle(f.value,"keyboard")}else l.key==="Escape"?e.open&&!e.contentRef.current&&(l.preventDefault(),e.onOpenChange(!1)):l.key==="Backspace"&&e.inputValue===""&&e.removeLast()})})})});J.displayName="MultiSelectInput";var H=C(require("react"),1),Xe=require("../utils/composeRefs.cjs"),Ye=require("../utils/part.cjs"),A=require("../utils/primitive.cjs"),Ze=require("../utils/useOptionCollection.cjs");var je=require("react/jsx-runtime"),Q=H.forwardRef(({value:t,disabled:r,textValue:e,...c},p)=>{let l=u("MultiSelectItem"),f=H.useId(),g=H.useRef(null),M=(0,Xe.useComposedRefs)(p,g),{visible:T}=(0,Ze.useOptionEntry)({id:f,value:t,textValue:e,itemRef:g,matchesFilter:l.matchesFilter,registerItem:l.registerItem,unregisterItem:l.unregisterItem});if(!T)return null;let m=l.isSelected(t),h=r||l.disabled||l.readOnly||l.atMax&&!m,o=l.activeId===f,R=l.itemOrder?.get(f);return(0,je.jsx)(A.Primitive.div,{role:"option",id:f,"data-value":t,"aria-selected":m,"aria-disabled":h?!0:void 0,"data-state":m?"checked":"unchecked","data-highlighted":o?"":void 0,"data-disabled":h?"":void 0,...c,...(0,Ye.skdxPart)("multi-select","item",c.className),ref:M,onClick:(0,A.composeEventHandlers)(c.onClick,()=>{h||(l.toggle(t,"pointer"),l.inputRef.current?.focus())}),onPointerEnter:(0,A.composeEventHandlers)(c.onPointerEnter,()=>{h||l.setActiveId(f)}),style:R!==void 0?{order:R,...c.style}:c.style})});Q.displayName="MultiSelectItem";var et=C(require("react"),1),tt=require("../utils/part.cjs"),lt=require("../utils/primitive.cjs");var ot=require("react/jsx-runtime"),X=et.forwardRef((t,r)=>{let e=u("MultiSelectList");return(0,ot.jsx)(lt.Primitive.div,{role:"listbox",id:e.listId,"aria-multiselectable":!0,...t,...(0,tt.skdxPart)("multi-select","list",t.className),ref:r})});X.displayName="MultiSelectList";var rt=require("../utils/portal.cjs");var it=require("react/jsx-runtime"),Y=({forceMount:t,children:r,...e})=>{let c=u("MultiSelectPortal");return t||c.open?(0,it.jsx)(rt.Portal,{...e,children:r}):null};Y.displayName="MultiSelectPortal";var nt=C(require("react"),1),at=require("../tag/Tag.cjs"),st=require("../utils/part.cjs");var ct=require("react/jsx-runtime"),Z=nt.forwardRef(({value:t,...r},e)=>{let c=u("MultiSelectTag"),p=c.value.indexOf(t);return(0,ct.jsx)(at.Tag,{index:p,label:t,"data-value":t,onDelete:()=>c.deselect(t),...r,...(0,st.skdxPart)("multi-select","tag",r.className),ref:e})});Z.displayName="MultiSelectTag";var ut=C(require("react"),1),mt=require("../tag-group/TagGroup.cjs"),pt=require("../utils/part.cjs");var ft=require("react/jsx-runtime"),j=ut.forwardRef((t,r)=>{let e=u("MultiSelectTagList");return(0,ft.jsx)(mt.TagGroup,{disabled:e.disabled||e.readOnly,...t,...(0,pt.skdxPart)("multi-select","tag-list",t.className),ref:r})});j.displayName="MultiSelectTagList";var dt=C(require("react"),1),Mt=require("../tag/Tag.cjs"),St=require("../utils/part.cjs"),gt=require("react/jsx-runtime"),ee=dt.forwardRef((t,r)=>(0,gt.jsx)(Mt.TagDelete,{...t,...(0,St.skdxPart)("multi-select","tag-remove",t.className),ref:r}));ee.displayName="MultiSelectTagRemove";var d=require("react/jsx-runtime"),Rt=t=>"options"in t,Ct=({options:t,renderOption:r,renderTag:e,placeholder:c,clearable:p,ariaLabel:l,passThrough:f})=>{let g=u("MultiSelect"),M=l??c,T=yt.useMemo(()=>{let o=new Map;for(let R of t)for(let I of Rt(R)?R.options:[R])o.set(I.value,I);return o},[t]),m=o=>e?e(o):o.label??o.value,h=o=>(0,d.jsx)(Q,{value:o.value,disabled:o.disabled,textValue:o.label,children:r?r(o,{selected:g.isSelected(o.value)}):o.label??o.value},o.value);return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(j,{"aria-label":M?`${M} \u2014 selected`:void 0,children:g.value.map(o=>(0,d.jsxs)(Z,{value:o,children:[m(T.get(o)??{value:o}),(0,d.jsx)(ee,{children:"\xD7"})]},o))}),(0,d.jsx)(J,{...f,"aria-label":M,placeholder:c}),p?(0,d.jsx)(W,{"aria-label":"Clear selection",children:"\xD7"}):null,(0,d.jsx)(Y,{children:(0,d.jsxs)(q,{children:[(0,d.jsx)(X,{"aria-label":M,children:t.map(o=>Rt(o)?(0,d.jsxs)(_,{children:[(0,d.jsx)(z,{children:o.label}),o.options.map(h)]},o.label):h(o))}),(0,d.jsx)($,{children:"No options"})]})})]})};var D=require("react/jsx-runtime");function It(t){return t===0?"none selected":`${t} selected`}var[kt,u]=(0,bt.createSafeContext)("MultiSelect"),Tt=n.forwardRef(function({children:r,value:e,defaultValue:c=[],onValueChange:p,inputValue:l,defaultInputValue:f="",onInputValueChange:g,open:M,defaultOpen:T=!1,onOpenChange:m,onOpenChangeComplete:h,max:o,closeOnSelect:R=!1,filter:I,disabled:ie=!1,readOnly:de=!1,invalid:Ot=!1,name:Et,required:Lt=!1,form:Ht,getSelectionLabel:Me=It,allowSelectAll:Dt=!0,loading:ne=!1,options:Gt,renderOption:wt,renderTag:Nt,placeholder:At,clearable:Vt=!1,"aria-label":Kt,...Ft},Bt){let Se=n.useRef(null),ge=n.useRef(null),V=n.useRef(null),Wt=n.useId(),Re=n.useRef("programmatic"),ae=n.useRef(null),[P=[],ye]=(0,te.useControllableState)({prop:e,defaultProp:c,onChange:i=>{let a=ae.current??[];p?.({value:i,previousValue:ae.current,reason:Re.current,added:i.filter(s=>!a.includes(s)),removed:a.filter(s=>!i.includes(s))})}}),se=n.useRef(P);se.current=P;let y=n.useCallback((i,a)=>{Re.current=a,ae.current=se.current.length===0?null:se.current,ye(i)},[ye]),[G="",x]=(0,te.useControllableState)({prop:l,defaultProp:f,onChange:g}),[ce=!1,k]=(0,te.useControllableState)({prop:M,defaultProp:T,onChange:m});(0,xt.useOpenChangeComplete)(ce,V,h);let qt=n.useCallback(i=>{if(typeof I!="function")return null;let a=I(i.text,G);return typeof a=="number"?a:null},[I,G]),v=(0,re.useOptionCollection)({open:ce,setOpen:k,contentRef:V,scoreItem:qt}),{itemOrder:ue}=v,S=ie||de,$t=o!==void 0&&P.length>=o,Ce=P.length,be=n.useRef(!0);n.useEffect(()=>{if(be.current){be.current=!1;return}ne||(0,vt.announce)(Me(Ce))},[Ce,Me,ne]);let Ut=n.useCallback(i=>P.includes(i),[P]),_t=n.useCallback(i=>{S||y((a=[])=>a.includes(i)?a.filter(s=>s!==i):a,"pointer")},[S,y]),zt=n.useCallback(()=>{S||y((i=[])=>i.length===0?i:i.slice(0,-1),"keyboard")},[S,y]),he=n.useRef(null),Jt=n.useCallback((i,a)=>{S||(he.current=i,y((s=[])=>s.includes(i)?s.filter(b=>b!==i):o!==void 0&&s.length>=o?s:[...s,i],a),x(""),R&&k(!1))},[S,o,R,y,x,k]),O=n.useCallback(i=>{y((a=[])=>{let s=[...a];for(let b of i)if(!s.includes(b)){if(o!==void 0&&s.length>=o)break;s.push(b)}return s.length===a.length?a:s},"keyboard"),x(""),R&&k(!1)},[o,R,y,x,k]),{activeId:K}=v,E=n.useCallback(()=>{let i=V.current;if(!i)return[];let a=Array.from(i.querySelectorAll(re.OPTION_SELECTOR));return(0,oe.sortByOrder)(a,ue)},[ue]),Qt=n.useCallback(()=>{if(S)return;let i=E(),a=i.findIndex(N=>N.id===K);if(a===-1)return;let s=i.findIndex(N=>N.dataset.value===he.current),b=s===-1?a:s,[w,el]=b<=a?[b,a]:[a,b];O(i.slice(w,el+1).map(N=>N.dataset.value??""))},[S,K,E,O]),Xt=n.useCallback(i=>{if(S)return;let a=E(),s=a.findIndex(w=>w.id===K);if(s===-1)return;let b=i==="first"?a.slice(0,s+1):a.slice(s);O(b.map(w=>w.dataset.value??""))},[S,K,E,O]),Yt=n.useCallback(()=>{if(S)return;let i=E().map(s=>s.dataset.value??"");i.length>0&&i.every(s=>P.includes(s))?(y((s=[])=>s.filter(b=>!i.includes(b)),"keyboard"),x(""),R&&k(!1)):O(i)},[S,P,E,O,y,x,R,k]),Zt=n.useCallback(()=>{S||(y([],"pointer"),x(""))},[S,y,x]),jt=n.useCallback(i=>I===void 0||(0,oe.filterKeeps)(I(i,G)),[I,G]);return n.useImperativeHandle(Bt,()=>(0,le.formValidityHandle)(ge),[]),(0,le.useFormReset)(Se,()=>{y(c,"programmatic"),x(f)}),(0,D.jsx)(Pt.PopperRoot,{children:(0,D.jsxs)(kt,{inputRef:Se,contentRef:V,listId:Wt,value:P,isSelected:Ut,toggle:Jt,selectRange:Qt,selectToEdge:Xt,selectAllOrClear:Yt,allowSelectAll:Dt,clear:Zt,deselect:_t,removeLast:zt,atMax:$t,inputValue:G,onInputValueChange:x,open:ce,onOpenChange:k,activeId:v.activeId,itemOrder:ue,setActiveId:v.setActiveId,moveActive:v.moveActive,moveActiveToEdge:v.moveActiveToEdge,openWithHighlight:v.openWithHighlight,itemCount:v.itemCount,registerItem:v.registerItem,unregisterItem:v.unregisterItem,getItem:v.getItem,matchesFilter:jt,disabled:ie,readOnly:de,invalid:Ot,loading:ne,children:[r??(0,D.jsx)(Ct,{options:Gt??[],renderOption:wt,renderTag:Nt,placeholder:At,clearable:Vt,ariaLabel:Kt,passThrough:Ft}),(0,D.jsx)(ht.MirroredValues,{name:Et,values:P,required:Lt,disabled:ie,form:Ht,controlRef:ge})]})})});Tt.displayName="MultiSelect";0&&(module.exports={MultiSelect,MultiSelectClear,MultiSelectContent,MultiSelectEmpty,MultiSelectGroup,MultiSelectGroupLabel,MultiSelectGroupProvider,MultiSelectInput,MultiSelectItem,MultiSelectList,MultiSelectPortal,MultiSelectProvider,MultiSelectTag,MultiSelectTagList,MultiSelectTagRemove,defaultGetSelectionLabel,useMultiSelectContext,useMultiSelectGroupContext});

package/dist/multi-select/MultiSelect.d.cts

@@ -1,12 +1,9 @@
 import * as React from 'react';
 import type { MultiSelectContextValue, MultiSelectProps } from './types.cjs';
 /**
- * Select many values from a list and render the chosen set as removable tags.
- * The tag half is not reimplemented here: `MultiSelectTagList`/`MultiSelectTag`/
- * `MultiSelectTagRemove` are thin bindings over the existing `TagGroup`/`Tag`/
- * `TagDelete`, which already own the single-tab-stop roving focus and the
- * "move focus to the neighbour *before* the removal lands" rule that makes
- * clearing several tags in a row possible from the keyboard.
+ * Select many values from a list, rendered as removable tags.
+ * Tag parts reuse `TagGroup`/`Tag`/`TagDelete`, which own roving focus
+ * and move focus to the preceding tag on deletion (allowing rapid keyboard clearing).
  */
 /** Default `getSelectionLabel`: `"2 selected"`, or `"none selected"` at zero. */
 export declare function defaultGetSelectionLabel(count: number): string;
@@ -17,26 +14,36 @@ export declare const MultiSelectProvider: {
     displayName: string;
 }, useMultiSelectContext: (consumerName: string) => MultiSelectContextValue;
 /**
- * Root of a multi-select: a text field with a listbox of options, where every
- * chosen value shows up as a removable tag. Owns the `string[]` selection, the
- * draft text and the popup's open state, and hands them to every other
- * `MultiSelect*` part via context. Renders no DOM of its own — the "field" box
- * that visually contains the tags and the input is yours to lay out.
+ * Select multiple values from a list, rendering them as removable tags. Popup
+ * stays open across selections (use `closeOnSelect` to change). Keyboard: Shift+Arrow
+ * extends selection, Shift+Space selects range, Control+Shift+Home/End sweeps to edge,
+ * Control+A toggles all (when open). Backspace on empty input removes last tag.
  *
- * The popup **stays open across selections** (`closeOnSelect` defaults to
- * `false`): picking five things should cost five clicks, not five clicks and
- * five reopenings. Backspace on an empty input removes the last tag, which is
- * the gesture every tag field has trained users to expect.
+ * With a `name`, mirrors native hidden controls per selected value for form submission;
+ * ref carries `checkValidity()` / `reportValidity()` — type with {@link MultiSelectHandle}.
+ *
+ * Render with `options` prop and default anatomy, or manually compose with children —
+ * see {@link MultiSelectAnatomy}.
  *
  * @example
  * ```tsx
+ * <MultiSelect options={[{ value: 'react', label: 'React' }]} aria-label="Skills" />
+ * ```
+ *
+ * @example Full manual composition:
+ * ```tsx
  * function SkillsField() {
  *   const [value, setValue] = React.useState<string[]>([]);
  *   const [inputValue, setInputValue] = React.useState('');
  *   const matches = SKILLS.filter((s) => s.toLowerCase().includes(inputValue.toLowerCase()));
  *
  *   return (
- *     <MultiSelect value={value} onValueChange={setValue} inputValue={inputValue} onInputValueChange={setInputValue}>
+ *     <MultiSelect
+ *       value={value}
+ *       onValueChange={(detail) => setValue(detail.value)}
+ *       inputValue={inputValue}
+ *       onInputValueChange={setInputValue}
+ *     >
  *       <div className="field">
  *         <MultiSelectTagList aria-label="Selected skills">
  *           {value.map((skill) => (
@@ -62,7 +69,4 @@ export declare const MultiSelectProvider: {
  * }
  * ```
  */
-export declare function MultiSelect({ children, value: valueProp, defaultValue, onValueChange, inputValue: inputValueProp, defaultInputValue, onInputValueChange, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, max, closeOnSelect, filter, disabled, readOnly, invalid, getSelectionLabel, }: MultiSelectProps): React.JSX.Element;
-export declare namespace MultiSelect {
-    var displayName: string;
-}
+export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<import("../index.cjs").FormValidityHandle>>;

package/dist/multi-select/MultiSelect.d.ts

@@ -1,12 +1,9 @@
 import * as React from 'react';
 import type { MultiSelectContextValue, MultiSelectProps } from './types.js';
 /**
- * Select many values from a list and render the chosen set as removable tags.
- * The tag half is not reimplemented here: `MultiSelectTagList`/`MultiSelectTag`/
- * `MultiSelectTagRemove` are thin bindings over the existing `TagGroup`/`Tag`/
- * `TagDelete`, which already own the single-tab-stop roving focus and the
- * "move focus to the neighbour *before* the removal lands" rule that makes
- * clearing several tags in a row possible from the keyboard.
+ * Select many values from a list, rendered as removable tags.
+ * Tag parts reuse `TagGroup`/`Tag`/`TagDelete`, which own roving focus
+ * and move focus to the preceding tag on deletion (allowing rapid keyboard clearing).
  */
 /** Default `getSelectionLabel`: `"2 selected"`, or `"none selected"` at zero. */
 export declare function defaultGetSelectionLabel(count: number): string;
@@ -17,26 +14,36 @@ export declare const MultiSelectProvider: {
     displayName: string;
 }, useMultiSelectContext: (consumerName: string) => MultiSelectContextValue;
 /**
- * Root of a multi-select: a text field with a listbox of options, where every
- * chosen value shows up as a removable tag. Owns the `string[]` selection, the
- * draft text and the popup's open state, and hands them to every other
- * `MultiSelect*` part via context. Renders no DOM of its own — the "field" box
- * that visually contains the tags and the input is yours to lay out.
+ * Select multiple values from a list, rendering them as removable tags. Popup
+ * stays open across selections (use `closeOnSelect` to change). Keyboard: Shift+Arrow
+ * extends selection, Shift+Space selects range, Control+Shift+Home/End sweeps to edge,
+ * Control+A toggles all (when open). Backspace on empty input removes last tag.
  *
- * The popup **stays open across selections** (`closeOnSelect` defaults to
- * `false`): picking five things should cost five clicks, not five clicks and
- * five reopenings. Backspace on an empty input removes the last tag, which is
- * the gesture every tag field has trained users to expect.
+ * With a `name`, mirrors native hidden controls per selected value for form submission;
+ * ref carries `checkValidity()` / `reportValidity()` — type with {@link MultiSelectHandle}.
+ *
+ * Render with `options` prop and default anatomy, or manually compose with children —
+ * see {@link MultiSelectAnatomy}.
  *
  * @example
  * ```tsx
+ * <MultiSelect options={[{ value: 'react', label: 'React' }]} aria-label="Skills" />
+ * ```
+ *
+ * @example Full manual composition:
+ * ```tsx
  * function SkillsField() {
  *   const [value, setValue] = React.useState<string[]>([]);
  *   const [inputValue, setInputValue] = React.useState('');
  *   const matches = SKILLS.filter((s) => s.toLowerCase().includes(inputValue.toLowerCase()));
  *
  *   return (
- *     <MultiSelect value={value} onValueChange={setValue} inputValue={inputValue} onInputValueChange={setInputValue}>
+ *     <MultiSelect
+ *       value={value}
+ *       onValueChange={(detail) => setValue(detail.value)}
+ *       inputValue={inputValue}
+ *       onInputValueChange={setInputValue}
+ *     >
  *       <div className="field">
  *         <MultiSelectTagList aria-label="Selected skills">
  *           {value.map((skill) => (
@@ -62,7 +69,4 @@ export declare const MultiSelectProvider: {
  * }
  * ```
  */
-export declare function MultiSelect({ children, value: valueProp, defaultValue, onValueChange, inputValue: inputValueProp, defaultInputValue, onInputValueChange, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, max, closeOnSelect, filter, disabled, readOnly, invalid, getSelectionLabel, }: MultiSelectProps): React.JSX.Element;
-export declare namespace MultiSelect {
-    var displayName: string;
-}
+export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<import("../index.js").FormValidityHandle>>;

package/dist/multi-select/MultiSelect.js

@@ -1 +1 @@
-import*as c from"react";import{createSafeContext as se}from"../utils/createContext.js";import{announce as ce}from"../utils/liveAnnouncer.js";import{PopperRoot as ue}from"../utils/popper.js";import{useControllableState as k}from"../utils/useControllableState.js";import{useOpenChangeComplete as me}from"../utils/useOpenChangeComplete.js";import{useOptionCollection as pe}from"../utils/useOptionCollection.js";import{jsx as A}from"react/jsx-runtime";function fe(t){return t===0?"none selected":`${t} selected`}var[de,u]=se("MultiSelect");function Me({children:t,value:l,defaultValue:e=[],onValueChange:n,inputValue:o,defaultInputValue:i="",onInputValueChange:f,open:g,defaultOpen:M=!1,onOpenChange:C,onOpenChangeComplete:r,max:m,closeOnSelect:a=!1,filter:x,disabled:O=!1,readOnly:E=!1,invalid:j=!1,getSelectionLabel:H=fe}){let ee=c.useRef(null),I=c.useRef(null),te=c.useId(),[y=[],S]=k({prop:l,defaultProp:e,onChange:n}),[h="",T]=k({prop:o,defaultProp:i,onChange:f}),[L=!1,v]=k({prop:g,defaultProp:M,onChange:C});me(L,I,r);let d=pe({open:L,setOpen:v,contentRef:I}),R=O||E,oe=m!==void 0&&y.length>=m,w=y.length,N=c.useRef(!0);c.useEffect(()=>{if(N.current){N.current=!1;return}ce(H(w))},[w,H]);let le=c.useCallback(s=>y.includes(s),[y]),ie=c.useCallback(s=>{R||S((p=[])=>p.includes(s)?p.filter(b=>b!==s):p)},[R,S]),ne=c.useCallback(()=>{R||S((s=[])=>s.length===0?s:s.slice(0,-1))},[R,S]),re=c.useCallback(s=>{R||(S((p=[])=>p.includes(s)?p.filter(b=>b!==s):m!==void 0&&p.length>=m?p:[...p,s]),T(""),a&&v(!1))},[R,m,a,S,T,v]),ae=c.useCallback(s=>x===void 0||x(s,h),[x,h]);return A(ue,{children:A(de,{inputRef:ee,contentRef:I,listId:te,value:y,isSelected:le,toggle:re,deselect:ie,removeLast:ne,atMax:oe,inputValue:h,onInputValueChange:T,open:L,onOpenChange:v,activeId:d.activeId,setActiveId:d.setActiveId,moveActive:d.moveActive,openWithHighlight:d.openWithHighlight,itemCount:d.itemCount,registerItem:d.registerItem,unregisterItem:d.unregisterItem,getItem:d.getItem,matchesFilter:ae,disabled:O,readOnly:E,invalid:j,children:t})})}Me.displayName="MultiSelect";import*as F from"react";import{useComposedRefs as ge}from"../utils/composeRefs.js";import{skdxPart as Se}from"../utils/part.js";import{PopperAnchor as Re}from"../utils/popper.js";import{composeEventHandlers as D,Primitive as Pe}from"../utils/primitive.js";import{jsx as V}from"react/jsx-runtime";var B=F.forwardRef((t,l)=>{let e=u("MultiSelectInput"),n=ge(l,e.inputRef);return V(Re,{asChild:!0,children:V(Pe.input,{type:"text",role:"combobox","aria-expanded":e.open,"aria-controls":e.listId,"aria-autocomplete":"list","aria-activedescendant":e.activeId??void 0,autoComplete:"off",disabled:e.disabled,readOnly:e.readOnly,"aria-invalid":e.invalid?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"data-invalid":e.invalid?"":void 0,"data-readonly":e.readOnly?"":void 0,"data-disabled":e.disabled?"":void 0,"data-state":e.open?"open":"closed",...t,...Se("multi-select","input",t.className),ref:n,value:e.inputValue,onChange:D(t.onChange,o=>{e.onInputValueChange(o.target.value),e.open||e.onOpenChange(!0)}),onBlur:D(t.onBlur,()=>{e.open&&e.onOpenChange(!1)}),onKeyDown:D(t.onKeyDown,o=>{if(o.key==="ArrowDown")o.preventDefault(),e.open?e.moveActive(1):e.openWithHighlight("first");else if(o.key==="ArrowUp")o.preventDefault(),e.open?e.moveActive(-1):e.openWithHighlight("last");else if(o.key==="Enter"){let i=e.activeId?e.getItem(e.activeId):void 0;if(!i)return;o.preventDefault(),e.toggle(i.value)}else o.key==="Escape"?e.open&&!e.contentRef.current&&(o.preventDefault(),e.onOpenChange(!1)):o.key==="Backspace"&&e.inputValue===""&&e.removeLast()})})})});B.displayName="MultiSelectInput";import*as W from"react";import{TagGroup as Ce}from"../tag-group/TagGroup.js";import{skdxPart as ye}from"../utils/part.js";import{jsx as ve}from"react/jsx-runtime";var K=W.forwardRef((t,l)=>{let e=u("MultiSelectTagList");return ve(Ce,{disabled:e.disabled||e.readOnly,...t,...ye("multi-select","tag-list",t.className),ref:l})});K.displayName="MultiSelectTagList";import*as G from"react";import{Tag as xe}from"../tag/Tag.js";import{skdxPart as Ie}from"../utils/part.js";import{jsx as he}from"react/jsx-runtime";var U=G.forwardRef(({value:t,...l},e)=>{let n=u("MultiSelectTag"),o=n.value.indexOf(t);return he(xe,{index:o,value:t,"data-value":t,onDelete:()=>n.deselect(t),...l,...Ie("multi-select","tag",l.className),ref:e})});U.displayName="MultiSelectTag";import*as $ from"react";import{TagDelete as Te}from"../tag/Tag.js";import{skdxPart as Le}from"../utils/part.js";import{jsx as be}from"react/jsx-runtime";var q=$.forwardRef((t,l)=>be(Te,{...t,...Le("multi-select","tag-remove",t.className),ref:l}));q.displayName="MultiSelectTagRemove";import{Portal as ke}from"../utils/portal.js";import{jsx as De}from"react/jsx-runtime";var z=({forceMount:t,children:l,...e})=>{let n=u("MultiSelectPortal");return t||n.open?De(ke,{...e,children:l}):null};z.displayName="MultiSelectPortal";import*as J from"react";import{useComposedRefs as Oe}from"../utils/composeRefs.js";import{skdxPart as Ee}from"../utils/part.js";import{PopperContent as He}from"../utils/popper.js";import{composeEventHandlers as we}from"../utils/primitive.js";import{useDismiss as Ne}from"../utils/useDismiss.js";import{jsx as Ae}from"react/jsx-runtime";var Q=J.forwardRef(({forceMount:t,side:l="bottom",align:e="start",sideOffset:n=4,onEscapeKeyDown:o,onPointerDownOutside:i,onFocusOutside:f,onInteractOutside:g,...M},C)=>{let r=u("MultiSelectContent"),m=Oe(C,r.contentRef);return Ne({enabled:r.open,onEscapeKeyDown:a=>{o?.(a),a.defaultPrevented||r.onOpenChange(!1)},onInteractOutside:g,onPointerDownOutside:a=>{i?.(a),a.defaultPrevented||r.onOpenChange(!1)},onFocusOutside:a=>{f?.(a),a.defaultPrevented||r.onOpenChange(!1)}},[r.contentRef,r.inputRef]),!t&&!r.open?null:Ae(He,{component:"multi-select","data-state":r.open?"open":"closed",side:l,align:e,sideOffset:n,...M,...Ee("multi-select","content",M.className),ref:m,onMouseDown:we(M.onMouseDown,a=>a.preventDefault())})});Q.displayName="MultiSelectContent";import*as X from"react";import{skdxPart as Ve}from"../utils/part.js";import{Primitive as Fe}from"../utils/primitive.js";import{jsx as Be}from"react/jsx-runtime";var Y=X.forwardRef((t,l)=>{let e=u("MultiSelectList");return Be(Fe.div,{role:"listbox",id:e.listId,"aria-multiselectable":!0,...t,...Ve("multi-select","list",t.className),ref:l})});Y.displayName="MultiSelectList";import*as P from"react";import{useComposedRefs as We}from"../utils/composeRefs.js";import{skdxPart as Ke}from"../utils/part.js";import{composeEventHandlers as Z,Primitive as Ge}from"../utils/primitive.js";import{useOptionEntry as Ue}from"../utils/useOptionCollection.js";import{jsx as $e}from"react/jsx-runtime";var _=P.forwardRef(({value:t,disabled:l,textValue:e,...n},o)=>{let i=u("MultiSelectItem"),f=P.useId(),g=P.useRef(null),M=We(o,g),{visible:C}=Ue({id:f,value:t,textValue:e,itemRef:g,matchesFilter:i.matchesFilter,registerItem:i.registerItem,unregisterItem:i.unregisterItem});if(!C)return null;let r=i.isSelected(t),m=l||i.disabled||i.readOnly||i.atMax&&!r,a=i.activeId===f;return $e(Ge.div,{role:"option",id:f,"data-value":t,"aria-selected":r,"aria-disabled":m?!0:void 0,"data-state":r?"selected":"unselected","data-highlighted":a?"":void 0,"data-disabled":m?"":void 0,...n,...Ke("multi-select","item",n.className),ref:M,onClick:Z(n.onClick,()=>{m||(i.toggle(t),i.inputRef.current?.focus())}),onPointerEnter:Z(n.onPointerEnter,()=>{m||i.setActiveId(f)})})});_.displayName="MultiSelectItem";export{Me as MultiSelect,Q as MultiSelectContent,B as MultiSelectInput,_ as MultiSelectItem,Y as MultiSelectList,z as MultiSelectPortal,de as MultiSelectProvider,U as MultiSelectTag,K as MultiSelectTagList,q as MultiSelectTagRemove,fe as defaultGetSelectionLabel,u as useMultiSelectContext};
+import*as i from"react";import{createSafeContext as _t}from"../utils/createContext.js";import{formValidityHandle as zt,useFormReset as Jt}from"../utils/formControl.js";import{MirroredValues as Qt}from"../utils/hiddenInput.js";import{announce as Xt}from"../utils/liveAnnouncer.js";import{PopperRoot as Yt}from"../utils/popper.js";import{filterKeeps as Zt,sortByOrder as jt}from"../utils/scoredFilter.js";import{useControllableState as oe}from"../utils/useControllableState.js";import{useOpenChangeComplete as el}from"../utils/useOpenChangeComplete.js";import{OPTION_SELECTOR as tl,useOptionCollection as ll}from"../utils/useOptionCollection.js";import*as Te from"react";import*as de from"react";import{skdxPart as lt}from"../utils/part.js";import{composeEventHandlers as ot,Primitive as rt}from"../utils/primitive.js";import{jsx as it}from"react/jsx-runtime";var $=de.forwardRef((t,s)=>{let e=u("MultiSelectClear"),c=e.value.length===0&&e.inputValue==="";return it(rt.button,{type:"button",disabled:e.disabled||e.readOnly||c,"data-disabled":e.disabled?"":void 0,"data-readonly":e.readOnly?"":void 0,...t,...lt("multi-select","clear",t.className),ref:s,onClick:ot(t.onClick,()=>{e.clear(),e.inputRef.current?.focus()})})});$.displayName="MultiSelectClear";import*as Me from"react";import{useComposedRefs as nt}from"../utils/composeRefs.js";import{skdxPart as at}from"../utils/part.js";import{PopperContent as st}from"../utils/popper.js";import{composeEventHandlers as ct}from"../utils/primitive.js";import{useDismiss as ut}from"../utils/useDismiss.js";import{jsx as mt}from"react/jsx-runtime";var U=Me.forwardRef(({forceMount:t,side:s="bottom",align:e="start",sideOffset:c=4,onEscapeKeyDown:R,onPointerDownOutside:l,onFocusOutside:p,onInteractOutside:M,...f},k)=>{let m=u("MultiSelectContent"),C=nt(k,m.contentRef);return ut({enabled:m.open,onEscapeKeyDown:o=>{R?.(o),o.defaultPrevented||m.onOpenChange(!1)},onInteractOutside:M,onPointerDownOutside:o=>{l?.(o),o.defaultPrevented||m.onOpenChange(!1)},onFocusOutside:o=>{p?.(o),o.defaultPrevented||m.onOpenChange(!1)}},[m.contentRef,m.inputRef]),!t&&!m.open?null:mt(st,{component:"multi-select","data-state":m.open?"open":"closed","aria-busy":m.loading?!0:void 0,"data-loading":m.loading?"":void 0,side:s,align:e,sideOffset:c,...f,...at("multi-select","content",f.className),ref:C,onMouseDown:ct(f.onMouseDown,o=>o.preventDefault())})});U.displayName="MultiSelectContent";import*as Se from"react";import{skdxPart as pt}from"../utils/part.js";import{Primitive as ft}from"../utils/primitive.js";import{jsx as dt}from"react/jsx-runtime";var _=Se.forwardRef((t,s)=>u("MultiSelectEmpty").itemCount===0?dt(ft.div,{role:"presentation","aria-live":"polite",...t,...pt("multi-select","empty",t.className),ref:s}):null);_.displayName="MultiSelectEmpty";import*as N from"react";import{createSafeContext as Mt}from"../utils/createContext.js";import{skdxPart as St}from"../utils/part.js";import{Primitive as gt}from"../utils/primitive.js";import{jsx as ge}from"react/jsx-runtime";var[Rt,Re]=Mt("MultiSelectGroup"),z=N.forwardRef((t,s)=>{let e=N.useId();return ge(Rt,{labelId:e,children:ge(gt.div,{role:"group","aria-labelledby":e,...t,...St("multi-select","group",t.className),ref:s})})});z.displayName="MultiSelectGroup";import*as ye from"react";import{skdxPart as yt}from"../utils/part.js";import{Primitive as Ct}from"../utils/primitive.js";import{jsx as bt}from"react/jsx-runtime";var J=ye.forwardRef((t,s)=>{let e=Re("MultiSelectGroupLabel");return bt(Ct.div,{id:e.labelId,...t,...yt("multi-select","group-label",t.className),ref:s})});J.displayName="MultiSelectGroupLabel";import*as be from"react";import{useComposedRefs as ht}from"../utils/composeRefs.js";import{skdxPart as vt}from"../utils/part.js";import{PopperAnchor as Pt}from"../utils/popper.js";import{composeEventHandlers as Q,Primitive as xt}from"../utils/primitive.js";import{jsx as Ce}from"react/jsx-runtime";var X=be.forwardRef((t,s)=>{let e=u("MultiSelectInput"),c=ht(s,e.inputRef),R=l=>{let p=e.activeId,M=e.moveActive(l);if(M===null||M===p)return;let f=e.getItem(M);f&&e.toggle(f.value,"keyboard")};return Ce(Pt,{asChild:!0,children:Ce(xt.input,{type:"text",role:"combobox","aria-expanded":e.open,"aria-controls":e.listId,"aria-autocomplete":"list","aria-activedescendant":e.activeId??void 0,autoComplete:"off",disabled:e.disabled,readOnly:e.readOnly,"aria-invalid":e.invalid?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"aria-busy":e.loading?!0:void 0,"data-invalid":e.invalid?"":void 0,"data-readonly":e.readOnly?"":void 0,"data-disabled":e.disabled?"":void 0,"data-loading":e.loading?"":void 0,"data-state":e.open?"open":"closed",...t,...vt("multi-select","input",t.className),ref:c,value:e.inputValue,onChange:Q(t.onChange,l=>{e.onInputValueChange(l.target.value),e.open||e.onOpenChange(!0)}),onBlur:Q(t.onBlur,()=>{e.open&&e.onOpenChange(!1)}),onKeyDown:Q(t.onKeyDown,l=>{if(l.key==="ArrowDown")l.preventDefault(),e.open?l.shiftKey?R(1):e.moveActive(1):e.openWithHighlight("first");else if(l.key==="ArrowUp")l.preventDefault(),e.open?l.shiftKey?R(-1):e.moveActive(-1):e.openWithHighlight("last");else if((l.key==="Home"||l.key==="End")&&l.ctrlKey&&l.shiftKey){if(!e.open)return;l.preventDefault(),e.selectToEdge(l.key==="Home"?"first":"last")}else if(l.key==="Home"||l.key==="End"){if(!e.open)return;l.preventDefault(),e.moveActiveToEdge(l.key==="Home"?"first":"last")}else if((l.ctrlKey||l.metaKey)&&l.key.toLowerCase()==="a"){if(!e.open||!e.allowSelectAll)return;l.preventDefault(),e.selectAllOrClear()}else if(l.key===" "&&l.shiftKey){if(!e.open||e.activeId===null)return;l.preventDefault(),e.selectRange()}else if(l.key==="Enter"){let p=e.activeId?e.getItem(e.activeId):void 0;if(!p)return;l.preventDefault(),e.toggle(p.value,"keyboard")}else l.key==="Escape"?e.open&&!e.contentRef.current&&(l.preventDefault(),e.onOpenChange(!1)):l.key==="Backspace"&&e.inputValue===""&&e.removeLast()})})})});X.displayName="MultiSelectInput";import*as E from"react";import{useComposedRefs as It}from"../utils/composeRefs.js";import{skdxPart as kt}from"../utils/part.js";import{composeEventHandlers as he,Primitive as Tt}from"../utils/primitive.js";import{useOptionEntry as Ot}from"../utils/useOptionCollection.js";import{jsx as Et}from"react/jsx-runtime";var Y=E.forwardRef(({value:t,disabled:s,textValue:e,...c},R)=>{let l=u("MultiSelectItem"),p=E.useId(),M=E.useRef(null),f=It(R,M),{visible:k}=Ot({id:p,value:t,textValue:e,itemRef:M,matchesFilter:l.matchesFilter,registerItem:l.registerItem,unregisterItem:l.unregisterItem});if(!k)return null;let m=l.isSelected(t),C=s||l.disabled||l.readOnly||l.atMax&&!m,o=l.activeId===p,S=l.itemOrder?.get(p);return Et(Tt.div,{role:"option",id:p,"data-value":t,"aria-selected":m,"aria-disabled":C?!0:void 0,"data-state":m?"checked":"unchecked","data-highlighted":o?"":void 0,"data-disabled":C?"":void 0,...c,...kt("multi-select","item",c.className),ref:f,onClick:he(c.onClick,()=>{C||(l.toggle(t,"pointer"),l.inputRef.current?.focus())}),onPointerEnter:he(c.onPointerEnter,()=>{C||l.setActiveId(p)}),style:S!==void 0?{order:S,...c.style}:c.style})});Y.displayName="MultiSelectItem";import*as ve from"react";import{skdxPart as Lt}from"../utils/part.js";import{Primitive as Ht}from"../utils/primitive.js";import{jsx as Dt}from"react/jsx-runtime";var Z=ve.forwardRef((t,s)=>{let e=u("MultiSelectList");return Dt(Ht.div,{role:"listbox",id:e.listId,"aria-multiselectable":!0,...t,...Lt("multi-select","list",t.className),ref:s})});Z.displayName="MultiSelectList";import{Portal as Gt}from"../utils/portal.js";import{jsx as wt}from"react/jsx-runtime";var j=({forceMount:t,children:s,...e})=>{let c=u("MultiSelectPortal");return t||c.open?wt(Gt,{...e,children:s}):null};j.displayName="MultiSelectPortal";import*as Pe from"react";import{Tag as Nt}from"../tag/Tag.js";import{skdxPart as At}from"../utils/part.js";import{jsx as Vt}from"react/jsx-runtime";var ee=Pe.forwardRef(({value:t,...s},e)=>{let c=u("MultiSelectTag"),R=c.value.indexOf(t);return Vt(Nt,{index:R,label:t,"data-value":t,onDelete:()=>c.deselect(t),...s,...At("multi-select","tag",s.className),ref:e})});ee.displayName="MultiSelectTag";import*as xe from"react";import{TagGroup as Kt}from"../tag-group/TagGroup.js";import{skdxPart as Ft}from"../utils/part.js";import{jsx as Bt}from"react/jsx-runtime";var te=xe.forwardRef((t,s)=>{let e=u("MultiSelectTagList");return Bt(Kt,{disabled:e.disabled||e.readOnly,...t,...Ft("multi-select","tag-list",t.className),ref:s})});te.displayName="MultiSelectTagList";import*as Ie from"react";import{TagDelete as Wt}from"../tag/Tag.js";import{skdxPart as qt}from"../utils/part.js";import{jsx as $t}from"react/jsx-runtime";var le=Ie.forwardRef((t,s)=>$t(Wt,{...t,...qt("multi-select","tag-remove",t.className),ref:s}));le.displayName="MultiSelectTagRemove";import{Fragment as Ut,jsx as x,jsxs as A}from"react/jsx-runtime";var ke=t=>"options"in t,Oe=({options:t,renderOption:s,renderTag:e,placeholder:c,clearable:R,ariaLabel:l,passThrough:p})=>{let M=u("MultiSelect"),f=l??c,k=Te.useMemo(()=>{let o=new Map;for(let S of t)for(let P of ke(S)?S.options:[S])o.set(P.value,P);return o},[t]),m=o=>e?e(o):o.label??o.value,C=o=>x(Y,{value:o.value,disabled:o.disabled,textValue:o.label,children:s?s(o,{selected:M.isSelected(o.value)}):o.label??o.value},o.value);return A(Ut,{children:[x(te,{"aria-label":f?`${f} \u2014 selected`:void 0,children:M.value.map(o=>A(ee,{value:o,children:[m(k.get(o)??{value:o}),x(le,{children:"\xD7"})]},o))}),x(X,{...p,"aria-label":f,placeholder:c}),R?x($,{"aria-label":"Clear selection",children:"\xD7"}):null,x(j,{children:A(U,{children:[x(Z,{"aria-label":f,children:t.map(o=>ke(o)?A(z,{children:[x(J,{children:o.label}),o.options.map(C)]},o.label):C(o))}),x(_,{children:"No options"})]})})]})};import{jsx as re,jsxs as nl}from"react/jsx-runtime";function ol(t){return t===0?"none selected":`${t} selected`}var[rl,u]=_t("MultiSelect"),il=i.forwardRef(function({children:s,value:e,defaultValue:c=[],onValueChange:R,inputValue:l,defaultInputValue:p="",onInputValueChange:M,open:f,defaultOpen:k=!1,onOpenChange:m,onOpenChangeComplete:C,max:o,closeOnSelect:S=!1,filter:P,disabled:V=!1,readOnly:ie=!1,invalid:Ee=!1,name:Le,required:He=!1,form:De,getSelectionLabel:ne=ol,allowSelectAll:Ge=!0,loading:K=!1,options:we,renderOption:Ne,renderTag:Ae,placeholder:Ve,clearable:Ke=!1,"aria-label":Fe,...Be},We){let ae=i.useRef(null),se=i.useRef(null),G=i.useRef(null),qe=i.useId(),ce=i.useRef("programmatic"),F=i.useRef(null),[h=[],ue]=oe({prop:e,defaultProp:c,onChange:r=>{let n=F.current??[];R?.({value:r,previousValue:F.current,reason:ce.current,added:r.filter(a=>!n.includes(a)),removed:n.filter(a=>!r.includes(a))})}}),B=i.useRef(h);B.current=h;let g=i.useCallback((r,n)=>{ce.current=n,F.current=B.current.length===0?null:B.current,ue(r)},[ue]),[L="",v]=oe({prop:l,defaultProp:p,onChange:M}),[W=!1,I]=oe({prop:f,defaultProp:k,onChange:m});el(W,G,C);let $e=i.useCallback(r=>{if(typeof P!="function")return null;let n=P(r.text,L);return typeof n=="number"?n:null},[P,L]),b=ll({open:W,setOpen:I,contentRef:G,scoreItem:$e}),{itemOrder:q}=b,d=V||ie,Ue=o!==void 0&&h.length>=o,me=h.length,pe=i.useRef(!0);i.useEffect(()=>{if(pe.current){pe.current=!1;return}K||Xt(ne(me))},[me,ne,K]);let _e=i.useCallback(r=>h.includes(r),[h]),ze=i.useCallback(r=>{d||g((n=[])=>n.includes(r)?n.filter(a=>a!==r):n,"pointer")},[d,g]),Je=i.useCallback(()=>{d||g((r=[])=>r.length===0?r:r.slice(0,-1),"keyboard")},[d,g]),fe=i.useRef(null),Qe=i.useCallback((r,n)=>{d||(fe.current=r,g((a=[])=>a.includes(r)?a.filter(y=>y!==r):o!==void 0&&a.length>=o?a:[...a,r],n),v(""),S&&I(!1))},[d,o,S,g,v,I]),T=i.useCallback(r=>{g((n=[])=>{let a=[...n];for(let y of r)if(!a.includes(y)){if(o!==void 0&&a.length>=o)break;a.push(y)}return a.length===n.length?n:a},"keyboard"),v(""),S&&I(!1)},[o,S,g,v,I]),{activeId:w}=b,O=i.useCallback(()=>{let r=G.current;if(!r)return[];let n=Array.from(r.querySelectorAll(tl));return jt(n,q)},[q]),Xe=i.useCallback(()=>{if(d)return;let r=O(),n=r.findIndex(D=>D.id===w);if(n===-1)return;let a=r.findIndex(D=>D.dataset.value===fe.current),y=a===-1?n:a,[H,tt]=y<=n?[y,n]:[n,y];T(r.slice(H,tt+1).map(D=>D.dataset.value??""))},[d,w,O,T]),Ye=i.useCallback(r=>{if(d)return;let n=O(),a=n.findIndex(H=>H.id===w);if(a===-1)return;let y=r==="first"?n.slice(0,a+1):n.slice(a);T(y.map(H=>H.dataset.value??""))},[d,w,O,T]),Ze=i.useCallback(()=>{if(d)return;let r=O().map(a=>a.dataset.value??"");r.length>0&&r.every(a=>h.includes(a))?(g((a=[])=>a.filter(y=>!r.includes(y)),"keyboard"),v(""),S&&I(!1)):T(r)},[d,h,O,T,g,v,S,I]),je=i.useCallback(()=>{d||(g([],"pointer"),v(""))},[d,g,v]),et=i.useCallback(r=>P===void 0||Zt(P(r,L)),[P,L]);return i.useImperativeHandle(We,()=>zt(se),[]),Jt(ae,()=>{g(c,"programmatic"),v(p)}),re(Yt,{children:nl(rl,{inputRef:ae,contentRef:G,listId:qe,value:h,isSelected:_e,toggle:Qe,selectRange:Xe,selectToEdge:Ye,selectAllOrClear:Ze,allowSelectAll:Ge,clear:je,deselect:ze,removeLast:Je,atMax:Ue,inputValue:L,onInputValueChange:v,open:W,onOpenChange:I,activeId:b.activeId,itemOrder:q,setActiveId:b.setActiveId,moveActive:b.moveActive,moveActiveToEdge:b.moveActiveToEdge,openWithHighlight:b.openWithHighlight,itemCount:b.itemCount,registerItem:b.registerItem,unregisterItem:b.unregisterItem,getItem:b.getItem,matchesFilter:et,disabled:V,readOnly:ie,invalid:Ee,loading:K,children:[s??re(Oe,{options:we??[],renderOption:Ne,renderTag:Ae,placeholder:Ve,clearable:Ke,ariaLabel:Fe,passThrough:Be}),re(Qt,{name:Le,values:h,required:He,disabled:V,form:De,controlRef:se})]})})});il.displayName="MultiSelect";export{il as MultiSelect,$ as MultiSelectClear,U as MultiSelectContent,_ as MultiSelectEmpty,z as MultiSelectGroup,J as MultiSelectGroupLabel,Rt as MultiSelectGroupProvider,X as MultiSelectInput,Y as MultiSelectItem,Z as MultiSelectList,j as MultiSelectPortal,rl as MultiSelectProvider,ee as MultiSelectTag,te as MultiSelectTagList,le as MultiSelectTagRemove,ol as defaultGetSelectionLabel,u as useMultiSelectContext,Re as useMultiSelectGroupContext};

package/dist/multi-select/MultiSelectAnatomy.d.cts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.cjs';
+import type { MultiSelectOption, MultiSelectOptionOrGroup } from './types.cjs';
+/**
+ * The anatomy a {@link MultiSelect} draws from `options`: the tag list (one
+ * removable `MultiSelectTag` per selected value), the input, a `MultiSelectClear`
+ * button when `clearable`, and the popup listbox with one `MultiSelectItem`
+ * per option — grouped where `options` nests a group.
+ *
+ * @internal
+ */
+export declare const MultiSelectAnatomy: ({ options, renderOption, renderTag, placeholder, clearable, ariaLabel, passThrough, }: {
+    options: MultiSelectOptionOrGroup[];
+    renderOption?: (option: MultiSelectOption, state: {
+        selected: boolean;
+    }) => React.ReactNode;
+    renderTag?: (option: MultiSelectOption) => React.ReactNode;
+    placeholder?: string;
+    clearable: boolean;
+    ariaLabel?: string;
+    passThrough?: PassThroughProps;
+}) => React.JSX.Element;

package/dist/multi-select/MultiSelectAnatomy.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.js';
+import type { MultiSelectOption, MultiSelectOptionOrGroup } from './types.js';
+/**
+ * The anatomy a {@link MultiSelect} draws from `options`: the tag list (one
+ * removable `MultiSelectTag` per selected value), the input, a `MultiSelectClear`
+ * button when `clearable`, and the popup listbox with one `MultiSelectItem`
+ * per option — grouped where `options` nests a group.
+ *
+ * @internal
+ */
+export declare const MultiSelectAnatomy: ({ options, renderOption, renderTag, placeholder, clearable, ariaLabel, passThrough, }: {
+    options: MultiSelectOptionOrGroup[];
+    renderOption?: (option: MultiSelectOption, state: {
+        selected: boolean;
+    }) => React.ReactNode;
+    renderTag?: (option: MultiSelectOption) => React.ReactNode;
+    placeholder?: string;
+    clearable: boolean;
+    ariaLabel?: string;
+    passThrough?: PassThroughProps;
+}) => React.JSX.Element;

package/dist/multi-select/MultiSelectClear.d.cts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import type { MultiSelectClearProps } from './types.cjs';
+/**
+ * Optional button that empties a {@link MultiSelect} in one press — the whole
+ * selection *and* the draft text — and hands focus back to
+ * {@link MultiSelectInput}. Without it the only way out of
+ * a large selection is removing every tag one at a time.
+ *
+ * Rendered beside the Input rather than inside a tag, and deliberately *not*
+ * inside {@link MultiSelectTagList}, whose roving tab stop belongs to the
+ * tags: this is its own tab stop, a plain `<button type="button">` so it never
+ * submits the surrounding form.
+ *
+ * Disabled while there is nothing to clear, and while the root is `disabled`
+ * or `readOnly` — neither may empty a selection. The empty case matters more
+ * than it looks: a "clear" that stays live over an empty field is a control
+ * that does nothing, which a screen-reader user cannot tell from one that is
+ * broken.
+ *
+ * Give it an `aria-label`: a "✕" glyph is not an accessible name.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelectClear aria-label="Clear selection">✕</MultiSelectClear>
+ * ```
+ */
+export declare const MultiSelectClear: React.ForwardRefExoticComponent<Omit<MultiSelectClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;