@arun-dev/headless 4.10.0 → 4.11.0

package/dist/combobox/index.cjs

@@ -40,6 +40,7 @@ __export(index_parts_exports, {
   List: () => ComboboxList,
   Popup: () => ComboboxPopup,
   Root: () => ComboboxRoot,
+  Separator: () => ComboboxSeparator,
   Status: () => ComboboxStatus,
   Trigger: () => ComboboxTrigger,
   Value: () => ComboboxValue
@@ -341,7 +342,7 @@ function ComboboxRoot({
   (0, import_react3.useEffect)(() => {
     if (lastSelectedKeyRef.current === selectedKey) return;
     lastSelectedKeyRef.current = selectedKey;
-    setInputValueState(selectedLabel);
+    setInputValue(selectedLabel, "value-change");
   }, [selectedKey]);
   const [chips, setChips] = (0, import_react3.useState)([]);
   const registerChip = (0, import_react3.useCallback)((entry) => {
@@ -831,7 +832,8 @@ function ComboboxClear({ className, children, render, ...rest }) {
       type: "button",
       tabIndex: -1,
       disabled: disabled || void 0,
-      ...comboboxClearDataAttributes(selectedItems.length > 0),
+      // Nothing to clear while disabled: a disabled field hides it, as it has no effect.
+      ...comboboxClearDataAttributes(!disabled && selectedItems.length > 0),
       className,
       children,
       ref: elementRef,
@@ -1085,6 +1087,17 @@ function ComboboxGroupLabel({
   });
 }
 
+// src/combobox/ComboboxSeparator.tsx
+function ComboboxSeparator({ className, render, ...rest }) {
+  useComboboxRootContext("Separator");
+  return useRender({
+    render,
+    defaultTagName: "div",
+    props: { "aria-hidden": true, className },
+    consumerProps: rest
+  });
+}
+
 // src/combobox/ComboboxEmpty.tsx
 function ComboboxEmpty({ className, children, render, ...rest }) {
   const { filteredItems, loading } = useComboboxRootContext("Empty");

package/dist/combobox/index.d.cts

@@ -3,7 +3,9 @@ import { ReactNode, ReactElement, Ref, ComponentPropsWithRef } from 'react';
 import { A as AnchorSide, a as AnchorAlign } from '../anchoring-Btxi0QwC.cjs';
 
 /** Why a value, the input's text or the open state changed — the second callback argument. */
-type ComboboxChangeReason = 'input' | 'input-press' | 'trigger-press' | 'item-press' | 'keyboard' | 'clear' | 'chip-remove' | 'escape' | 'outside-press' | 'blur' | 'form-reset';
+type ComboboxChangeReason = 'input' | 'input-press' | 'trigger-press' | 'item-press' | 'keyboard' | 'clear' | 'chip-remove' | 'escape' | 'outside-press' | 'blur' | 'form-reset'
+/** The input's text followed a change of `value` — the parent's, not the user's. */
+ | 'value-change';
 type ComboboxChangeDetails = {
     reason: ComboboxChangeReason;
 };
@@ -182,7 +184,8 @@ type ComboboxClearProps = ComboboxClearOwnProps & Omit<ComponentPropsWithRef<'bu
  * Empties the input and the selection — every selected item, with `multiple`. Give it an
  * `aria-label`.
  *
- * `data-visible` is present while there is a selection to clear; style it hidden otherwise.
+ * `data-visible` is present while there is a selection to clear and the Root is not disabled;
+ * style it hidden otherwise.
  * Out of the tab order, and a press keeps focus in the input.
  */
 declare function ComboboxClear({ className, children, render, ...rest }: ComboboxClearProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
@@ -285,6 +288,23 @@ type ComboboxGroupLabelProps = ComboboxGroupLabelOwnProps & Omit<ComponentPropsW
  */
 declare function ComboboxGroupLabel({ className, children, render, ...rest }: ComboboxGroupLabelProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
 
+type ComboboxSeparatorOwnProps = {
+    /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type ComboboxSeparatorProps = ComboboxSeparatorOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof ComboboxSeparatorOwnProps>;
+/**
+ * A line between items or groups in the List, as an `<hr>` in a `<select>`. The arrow keys pass
+ * it.
+ *
+ * Visual only: `aria-hidden`, with no `role="separator"`. A listbox may own only options and
+ * groups, so a separator role inside one fails `aria-required-children`; a Group, named by its
+ * label, is what tells a screen reader where one set ends.
+ */
+declare function ComboboxSeparator({ className, render, ...rest }: ComboboxSeparatorProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
 type ComboboxEmptyOwnProps = {
     /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
     render?: ReactElement;
@@ -362,7 +382,7 @@ type ComboboxValueProps<T = unknown> = {
 declare function ComboboxValue<T = unknown>({ children }: ComboboxValueProps<T>): react.JSX.Element;
 
 declare namespace index_parts {
-  export { ComboboxChip as Chip, ComboboxChipRemove as ChipRemove, ComboboxClear as Clear, ComboboxEmpty as Empty, ComboboxGroup as Group, ComboboxGroupLabel as GroupLabel, ComboboxInput as Input, ComboboxInputGroup as InputGroup, ComboboxItem as Item, ComboboxList as List, ComboboxPopup as Popup, ComboboxRoot as Root, ComboboxStatus as Status, ComboboxTrigger as Trigger, ComboboxValue as Value };
+  export { ComboboxChip as Chip, ComboboxChipRemove as ChipRemove, ComboboxClear as Clear, ComboboxEmpty as Empty, ComboboxGroup as Group, ComboboxGroupLabel as GroupLabel, ComboboxInput as Input, ComboboxInputGroup as InputGroup, ComboboxItem as Item, ComboboxList as List, ComboboxPopup as Popup, ComboboxRoot as Root, ComboboxSeparator as Separator, ComboboxStatus as Status, ComboboxTrigger as Trigger, ComboboxValue as Value };
 }
 
 /**
@@ -373,4 +393,4 @@ declare namespace index_parts {
  */
 declare function defaultFilter<T>(items: readonly T[], query: string, itemToString: (item: T) => string): T[];
 
-export { index_parts as Combobox, type ComboboxAlign, type ComboboxChangeDetails, type ComboboxChangeReason, type ComboboxChipProps, type ComboboxChipRemoveProps, type ComboboxClearProps, type ComboboxEmptyProps, type ComboboxFilter, type ComboboxGroup$1 as ComboboxGroup, type ComboboxGroupLabelProps, type ComboboxGroupProps, type ComboboxHighlightDetails, type ComboboxHighlightReason, type ComboboxInputGroupProps, type ComboboxInputProps, type ComboboxItemProps, type ComboboxListProps, type ComboboxPopupProps, type ComboboxRootProps, type ComboboxSide, type ComboboxState, type ComboboxStatusProps, type ComboboxTriggerProps, type ComboboxValue$1 as ComboboxValue, type ComboboxValueProps, defaultFilter };
+export { index_parts as Combobox, type ComboboxAlign, type ComboboxChangeDetails, type ComboboxChangeReason, type ComboboxChipProps, type ComboboxChipRemoveProps, type ComboboxClearProps, type ComboboxEmptyProps, type ComboboxFilter, type ComboboxGroup$1 as ComboboxGroup, type ComboboxGroupLabelProps, type ComboboxGroupProps, type ComboboxHighlightDetails, type ComboboxHighlightReason, type ComboboxInputGroupProps, type ComboboxInputProps, type ComboboxItemProps, type ComboboxListProps, type ComboboxPopupProps, type ComboboxRootProps, type ComboboxSeparatorProps, type ComboboxSide, type ComboboxState, type ComboboxStatusProps, type ComboboxTriggerProps, type ComboboxValue$1 as ComboboxValue, type ComboboxValueProps, defaultFilter };

package/dist/combobox/index.d.ts

@@ -3,7 +3,9 @@ import { ReactNode, ReactElement, Ref, ComponentPropsWithRef } from 'react';
 import { A as AnchorSide, a as AnchorAlign } from '../anchoring-Btxi0QwC.js';
 
 /** Why a value, the input's text or the open state changed — the second callback argument. */
-type ComboboxChangeReason = 'input' | 'input-press' | 'trigger-press' | 'item-press' | 'keyboard' | 'clear' | 'chip-remove' | 'escape' | 'outside-press' | 'blur' | 'form-reset';
+type ComboboxChangeReason = 'input' | 'input-press' | 'trigger-press' | 'item-press' | 'keyboard' | 'clear' | 'chip-remove' | 'escape' | 'outside-press' | 'blur' | 'form-reset'
+/** The input's text followed a change of `value` — the parent's, not the user's. */
+ | 'value-change';
 type ComboboxChangeDetails = {
     reason: ComboboxChangeReason;
 };
@@ -182,7 +184,8 @@ type ComboboxClearProps = ComboboxClearOwnProps & Omit<ComponentPropsWithRef<'bu
  * Empties the input and the selection — every selected item, with `multiple`. Give it an
  * `aria-label`.
  *
- * `data-visible` is present while there is a selection to clear; style it hidden otherwise.
+ * `data-visible` is present while there is a selection to clear and the Root is not disabled;
+ * style it hidden otherwise.
  * Out of the tab order, and a press keeps focus in the input.
  */
 declare function ComboboxClear({ className, children, render, ...rest }: ComboboxClearProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
@@ -285,6 +288,23 @@ type ComboboxGroupLabelProps = ComboboxGroupLabelOwnProps & Omit<ComponentPropsW
  */
 declare function ComboboxGroupLabel({ className, children, render, ...rest }: ComboboxGroupLabelProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
 
+type ComboboxSeparatorOwnProps = {
+    /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type ComboboxSeparatorProps = ComboboxSeparatorOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof ComboboxSeparatorOwnProps>;
+/**
+ * A line between items or groups in the List, as an `<hr>` in a `<select>`. The arrow keys pass
+ * it.
+ *
+ * Visual only: `aria-hidden`, with no `role="separator"`. A listbox may own only options and
+ * groups, so a separator role inside one fails `aria-required-children`; a Group, named by its
+ * label, is what tells a screen reader where one set ends.
+ */
+declare function ComboboxSeparator({ className, render, ...rest }: ComboboxSeparatorProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
 type ComboboxEmptyOwnProps = {
     /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
     render?: ReactElement;
@@ -362,7 +382,7 @@ type ComboboxValueProps<T = unknown> = {
 declare function ComboboxValue<T = unknown>({ children }: ComboboxValueProps<T>): react.JSX.Element;
 
 declare namespace index_parts {
-  export { ComboboxChip as Chip, ComboboxChipRemove as ChipRemove, ComboboxClear as Clear, ComboboxEmpty as Empty, ComboboxGroup as Group, ComboboxGroupLabel as GroupLabel, ComboboxInput as Input, ComboboxInputGroup as InputGroup, ComboboxItem as Item, ComboboxList as List, ComboboxPopup as Popup, ComboboxRoot as Root, ComboboxStatus as Status, ComboboxTrigger as Trigger, ComboboxValue as Value };
+  export { ComboboxChip as Chip, ComboboxChipRemove as ChipRemove, ComboboxClear as Clear, ComboboxEmpty as Empty, ComboboxGroup as Group, ComboboxGroupLabel as GroupLabel, ComboboxInput as Input, ComboboxInputGroup as InputGroup, ComboboxItem as Item, ComboboxList as List, ComboboxPopup as Popup, ComboboxRoot as Root, ComboboxSeparator as Separator, ComboboxStatus as Status, ComboboxTrigger as Trigger, ComboboxValue as Value };
 }
 
 /**
@@ -373,4 +393,4 @@ declare namespace index_parts {
  */
 declare function defaultFilter<T>(items: readonly T[], query: string, itemToString: (item: T) => string): T[];
 
-export { index_parts as Combobox, type ComboboxAlign, type ComboboxChangeDetails, type ComboboxChangeReason, type ComboboxChipProps, type ComboboxChipRemoveProps, type ComboboxClearProps, type ComboboxEmptyProps, type ComboboxFilter, type ComboboxGroup$1 as ComboboxGroup, type ComboboxGroupLabelProps, type ComboboxGroupProps, type ComboboxHighlightDetails, type ComboboxHighlightReason, type ComboboxInputGroupProps, type ComboboxInputProps, type ComboboxItemProps, type ComboboxListProps, type ComboboxPopupProps, type ComboboxRootProps, type ComboboxSide, type ComboboxState, type ComboboxStatusProps, type ComboboxTriggerProps, type ComboboxValue$1 as ComboboxValue, type ComboboxValueProps, defaultFilter };
+export { index_parts as Combobox, type ComboboxAlign, type ComboboxChangeDetails, type ComboboxChangeReason, type ComboboxChipProps, type ComboboxChipRemoveProps, type ComboboxClearProps, type ComboboxEmptyProps, type ComboboxFilter, type ComboboxGroup$1 as ComboboxGroup, type ComboboxGroupLabelProps, type ComboboxGroupProps, type ComboboxHighlightDetails, type ComboboxHighlightReason, type ComboboxInputGroupProps, type ComboboxInputProps, type ComboboxItemProps, type ComboboxListProps, type ComboboxPopupProps, type ComboboxRootProps, type ComboboxSeparatorProps, type ComboboxSide, type ComboboxState, type ComboboxStatusProps, type ComboboxTriggerProps, type ComboboxValue$1 as ComboboxValue, type ComboboxValueProps, defaultFilter };

package/dist/combobox/index.js

@@ -30,6 +30,7 @@ __export(index_parts_exports, {
   List: () => ComboboxList,
   Popup: () => ComboboxPopup,
   Root: () => ComboboxRoot,
+  Separator: () => ComboboxSeparator,
   Status: () => ComboboxStatus,
   Trigger: () => ComboboxTrigger,
   Value: () => ComboboxValue
@@ -247,7 +248,7 @@ function ComboboxRoot({
   useEffect(() => {
     if (lastSelectedKeyRef.current === selectedKey) return;
     lastSelectedKeyRef.current = selectedKey;
-    setInputValueState(selectedLabel);
+    setInputValue(selectedLabel, "value-change");
   }, [selectedKey]);
   const [chips, setChips] = useState([]);
   const registerChip = useCallback((entry) => {
@@ -648,7 +649,8 @@ function ComboboxClear({ className, children, render, ...rest }) {
       type: "button",
       tabIndex: -1,
       disabled: disabled || void 0,
-      ...comboboxClearDataAttributes(selectedItems.length > 0),
+      // Nothing to clear while disabled: a disabled field hides it, as it has no effect.
+      ...comboboxClearDataAttributes(!disabled && selectedItems.length > 0),
       className,
       children,
       ref: elementRef,
@@ -902,6 +904,17 @@ function ComboboxGroupLabel({
   });
 }
 
+// src/combobox/ComboboxSeparator.tsx
+function ComboboxSeparator({ className, render, ...rest }) {
+  useComboboxRootContext("Separator");
+  return useRender({
+    render,
+    defaultTagName: "div",
+    props: { "aria-hidden": true, className },
+    consumerProps: rest
+  });
+}
+
 // src/combobox/ComboboxEmpty.tsx
 function ComboboxEmpty({ className, children, render, ...rest }) {
   const { filteredItems, loading } = useComboboxRootContext("Empty");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arun-dev/headless",
-  "version": "4.10.0",
+  "version": "4.11.0",
   "description": "Unstyled React behaviour primitives — render engine, controlled/uncontrolled state, and data-* state projection. Ships no CSS and no class names.",
   "license": "MIT",
   "type": "module",