@arun-dev/headless 4.8.0 → 4.9.0

package/dist/combobox/index.cjs

@@ -33,12 +33,14 @@ __export(index_parts_exports, {
   Clear: () => ComboboxClear,
   Empty: () => ComboboxEmpty,
   Input: () => ComboboxInput,
+  InputGroup: () => ComboboxInputGroup,
   Item: () => ComboboxItem,
   List: () => ComboboxList,
   Popup: () => ComboboxPopup,
   Root: () => ComboboxRoot,
   Status: () => ComboboxStatus,
-  Trigger: () => ComboboxTrigger
+  Trigger: () => ComboboxTrigger,
+  Value: () => ComboboxValue
 });
 
 // src/combobox/ComboboxRoot.tsx
@@ -342,6 +344,11 @@ function ComboboxRoot({
     },
     [insideRefs]
   );
+  const [hasGroup, setHasGroup] = (0, import_react3.useState)(false);
+  const registerGroup = (0, import_react3.useCallback)(() => {
+    setHasGroup(true);
+    return () => setHasGroup(false);
+  }, []);
   const inputRef = (0, import_react3.useRef)(null);
   const popupRef = (0, import_react3.useRef)(null);
   const { current: initial } = (0, import_react3.useRef)({ value, inputValue });
@@ -392,6 +399,8 @@ function ComboboxRoot({
       chips,
       registerInside,
       isInside,
+      hasGroup,
+      registerGroup,
       onLoadMore,
       inputId: `${id}-input`,
       listId: `${id}-list`,
@@ -426,6 +435,8 @@ function ComboboxRoot({
       chips,
       registerInside,
       isInside,
+      hasGroup,
+      registerGroup,
       onLoadMore,
       id
     ]
@@ -586,6 +597,7 @@ function ComboboxInput({ className, render, ...rest }) {
     listId,
     optionId,
     anchorName,
+    hasGroup,
     inputRef,
     popupRef
   } = useComboboxRootContext("Input");
@@ -633,7 +645,8 @@ function ComboboxInput({ className, render, ...rest }) {
       disabled: disabled || void 0,
       value: inputValue,
       ...comboboxDataAttributes({ open, multiple, disabled }),
-      style: { anchorName },
+      // The anchor, unless an InputGroup around it is.
+      style: hasGroup ? void 0 : { anchorName },
       className,
       ref: inputRef,
       onChange(event) {
@@ -700,12 +713,43 @@ function ComboboxInput({ className, render, ...rest }) {
   });
 }
 
-// src/combobox/ComboboxTrigger.tsx
+// src/combobox/ComboboxInputGroup.tsx
 var import_react6 = require("react");
-function ComboboxTrigger({ className, children, render, ...rest }) {
-  const { open, multiple, disabled, setOpen, close, listId, inputRef, registerInside } = useComboboxRootContext("Trigger");
+function ComboboxInputGroup({
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const { open, multiple, disabled, anchorName, registerGroup, registerInside, inputRef } = useComboboxRootContext("InputGroup");
   const elementRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useLayoutEffect)(() => registerGroup(), [registerGroup]);
   (0, import_react6.useLayoutEffect)(() => registerInside(elementRef), [registerInside]);
+  return useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      ...comboboxDataAttributes({ open, multiple, disabled }),
+      style: { anchorName },
+      className,
+      children,
+      ref: elementRef,
+      onMouseDown(event) {
+        if (event.target !== event.currentTarget || disabled) return;
+        event.preventDefault();
+        inputRef.current?.focus();
+      }
+    },
+    consumerProps: rest
+  });
+}
+
+// src/combobox/ComboboxTrigger.tsx
+var import_react7 = require("react");
+function ComboboxTrigger({ className, children, render, ...rest }) {
+  const { open, multiple, disabled, setOpen, close, listId, inputRef, registerInside } = useComboboxRootContext("Trigger");
+  const elementRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useLayoutEffect)(() => registerInside(elementRef), [registerInside]);
   return useRender({
     render,
     defaultTagName: "button",
@@ -733,11 +777,11 @@ function ComboboxTrigger({ className, children, render, ...rest }) {
 }
 
 // src/combobox/ComboboxClear.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 function ComboboxClear({ className, children, render, ...rest }) {
   const { disabled, selectedItems, clear, inputRef, registerInside } = useComboboxRootContext("Clear");
-  const elementRef = (0, import_react7.useRef)(null);
-  (0, import_react7.useLayoutEffect)(() => registerInside(elementRef), [registerInside]);
+  const elementRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useLayoutEffect)(() => registerInside(elementRef), [registerInside]);
   return useRender({
     render,
     defaultTagName: "button",
@@ -763,7 +807,7 @@ function ComboboxClear({ className, children, render, ...rest }) {
 }
 
 // src/combobox/ComboboxPopup.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 function ComboboxPopup({
   side = "bottom",
   align = "start",
@@ -773,7 +817,7 @@ function ComboboxPopup({
   ...rest
 }) {
   const { open, multiple, disabled, setOpen, close, isInside, anchorName, inputRef, popupRef } = useComboboxRootContext("Popup");
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!open) return;
     function onPointerDown(event) {
       if (event.target instanceof Node && isInside(event.target)) return;
@@ -782,8 +826,8 @@ function ComboboxPopup({
     document.addEventListener("pointerdown", onPointerDown, true);
     return () => document.removeEventListener("pointerdown", onPointerDown, true);
   }, [open, isInside, close]);
-  const [, resync] = (0, import_react8.useReducer)((n) => n + 1, 0);
-  (0, import_react8.useEffect)(() => {
+  const [, resync] = (0, import_react9.useReducer)((n) => n + 1, 0);
+  (0, import_react9.useEffect)(() => {
     const popup = popupRef.current;
     if (!popup || typeof popup.showPopover !== "function") return;
     const shown = popup.matches(":popover-open");
@@ -820,7 +864,7 @@ function ComboboxPopup({
 }
 
 // src/combobox/ComboboxList.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function ComboboxList({
   className,
@@ -849,10 +893,10 @@ function ComboboxList({
 }
 function LoadMoreSentinel() {
   const { open, loading, filteredItems, onLoadMore } = useComboboxRootContext("List");
-  const ref = (0, import_react9.useRef)(null);
-  const onLoadMoreRef = (0, import_react9.useRef)(onLoadMore);
+  const ref = (0, import_react10.useRef)(null);
+  const onLoadMoreRef = (0, import_react10.useRef)(onLoadMore);
   onLoadMoreRef.current = onLoadMore;
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const element = ref.current;
     if (!element || !open || loading || typeof IntersectionObserver === "undefined") return;
     const observer = new IntersectionObserver((entries) => {
@@ -865,7 +909,7 @@ function LoadMoreSentinel() {
 }
 
 // src/combobox/ComboboxItem.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 function ComboboxItem({
   value,
   disabled = false,
@@ -887,20 +931,20 @@ function ComboboxItem({
   const key = itemToKey(value);
   const index = indexByKey.get(key) ?? -1;
   const selected = selectedKeys.has(key);
-  const highlighted = (0, import_react10.useSyncExternalStore)(
+  const highlighted = (0, import_react11.useSyncExternalStore)(
     highlight.subscribe,
     () => index >= 0 && highlight.get().index === index,
     () => false
   );
-  const elementRef = (0, import_react10.useRef)(null);
-  (0, import_react10.useLayoutEffect)(() => {
+  const elementRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useLayoutEffect)(() => {
     if (!disabled) return;
     disabledKeys.add(key);
     return () => {
       disabledKeys.delete(key);
     };
   }, [disabled, disabledKeys, key]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (highlighted && highlight.get().reason === "keyboard") {
       elementRef.current?.scrollIntoView?.({ block: "nearest" });
     }
@@ -955,11 +999,11 @@ function ComboboxStatus({ className, children, render, ...rest }) {
 }
 
 // src/combobox/ComboboxChip.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var ComboboxChipContext = (0, import_react11.createContext)(null);
+var ComboboxChipContext = (0, import_react12.createContext)(null);
 function useComboboxChipContext() {
-  const context = (0, import_react11.useContext)(ComboboxChipContext);
+  const context = (0, import_react12.useContext)(ComboboxChipContext);
   if (context === null) {
     throw new Error("<Combobox.ChipRemove> must be rendered inside <Combobox.Chip>.");
   }
@@ -974,9 +1018,9 @@ function ComboboxChip({
 }) {
   const { disabled, itemToKey, remove, registerChip, chips, inputRef } = useComboboxRootContext("Chip");
   const key = itemToKey(value);
-  const elementRef = (0, import_react11.useRef)(null);
-  (0, import_react11.useLayoutEffect)(() => registerChip({ key, ref: elementRef }), [registerChip, key]);
-  const chipContext = (0, import_react11.useMemo)(() => ({ value }), [value]);
+  const elementRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useLayoutEffect)(() => registerChip({ key, ref: elementRef }), [registerChip, key]);
+  const chipContext = (0, import_react12.useMemo)(() => ({ value }), [value]);
   function focusAt(index) {
     const chip = chips[index];
     if (chip) chip.ref.current?.focus();
@@ -1050,6 +1094,14 @@ function ComboboxChipRemove({
     consumerProps: rest
   });
 }
+
+// src/combobox/ComboboxValue.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ComboboxValue({ children }) {
+  const { multiple, selectedItems, itemToString } = useComboboxRootContext("Value");
+  const value = multiple ? selectedItems : selectedItems[0] ?? null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: children(value, { itemToString }) });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Combobox,

package/dist/combobox/index.d.cts

@@ -21,7 +21,7 @@ type ComboboxState = {
 };
 
 /** The selection: one item or `null`, or an array with `multiple`. */
-type ComboboxValue<T, Multiple extends boolean> = Multiple extends true ? T[] : T | null;
+type ComboboxValue$1<T, Multiple extends boolean> = Multiple extends true ? T[] : T | null;
 /** Takes the whole list, so a filter can rank as well as narrow — a fuzzy search, say. */
 type ComboboxFilter<T> = (items: readonly T[], query: string, itemToString: (item: T) => string) => T[];
 type ComboboxRootProps<T, Multiple extends boolean = false> = {
@@ -51,10 +51,10 @@ type ComboboxRootProps<T, Multiple extends boolean = false> = {
      * Never `undefined` once mounted: the mode is latched at mount. Use `null` — or `[]` with
      * `multiple` — for nothing selected.
      */
-    value?: ComboboxValue<T, Multiple>;
+    value?: ComboboxValue$1<T, Multiple>;
     /** Initial selection when uncontrolled. Read once, at mount. */
-    defaultValue?: ComboboxValue<T, Multiple>;
-    onValueChange?: (value: ComboboxValue<T, Multiple>, details: ComboboxChangeDetails) => void;
+    defaultValue?: ComboboxValue$1<T, Multiple>;
+    onValueChange?: (value: ComboboxValue$1<T, Multiple>, details: ComboboxChangeDetails) => void;
     /** Controlled text of the input. Provide `onInputValueChange` alongside it. */
     inputValue?: string;
     /** Initial text when uncontrolled. Defaults to the selected item's label, without `multiple`. */
@@ -107,7 +107,7 @@ type ComboboxInputOwnProps = {
 type ComboboxInputProps = ComboboxInputOwnProps & Omit<ComponentPropsWithRef<'input'>, keyof ComboboxInputOwnProps | 'value' | 'defaultValue'>;
 /**
  * The text input: `role="combobox"`, and the element focus stays on. Its text is the Root's
- * `inputValue`. It is what the popup is anchored to.
+ * `inputValue`. It is what the popup is anchored to, unless an InputGroup wraps it.
  *
  * Typing opens the list and filters it. Up and Down open it, or move the highlight, wrapping;
  * Home and End jump to the ends while it is open; Alt+Down opens it without highlighting.
@@ -119,6 +119,22 @@ type ComboboxInputProps = ComboboxInputOwnProps & Omit<ComponentPropsWithRef<'in
  */
 declare function ComboboxInput({ className, render, ...rest }: ComboboxInputProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
 
+type ComboboxInputGroupOwnProps = {
+    /** 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 ComboboxInputGroupProps = ComboboxInputGroupOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof ComboboxInputGroupOwnProps>;
+/**
+ * The field around the Input — chips, Clear and Trigger with it — when they are drawn as one
+ * box. It takes over as the popup's anchor, so the list lines up with the whole field rather
+ * than the text alone, and a press on it is not a press outside.
+ *
+ * A press on the box itself, between its children, focuses the input.
+ */
+declare function ComboboxInputGroup({ className, children, render, ...rest }: ComboboxInputGroupProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
 type ComboboxTriggerOwnProps = {
     /** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
     render?: ReactElement;
@@ -273,8 +289,26 @@ type ComboboxChipRemoveProps = ComboboxChipRemoveOwnProps & Omit<ComponentPropsW
  */
 declare function ComboboxChipRemove({ className, children, render, ...rest }: ComboboxChipRemoveProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
 
+type ComboboxValueProps<T = unknown> = {
+    /**
+     * Renders the selection: `T | null`, or `T[]` with `multiple`. The Root's `itemToString` is
+     * passed along for labels — a chip's text, say.
+     */
+    children: (value: T, details: {
+        itemToString: (item: unknown) => string;
+    }) => ReactNode;
+};
+/**
+ * The current selection, for whatever shows it outside the input — chips, most often. Renders
+ * no element of its own.
+ *
+ * It exists so that a separate styling package can show the selection without owning a copy
+ * of it (decision 9): the value stays the Root's.
+ */
+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, ComboboxInput as Input, ComboboxItem as Item, ComboboxList as List, ComboboxPopup as Popup, ComboboxRoot as Root, ComboboxStatus as Status, ComboboxTrigger as Trigger };
+  export { ComboboxChip as Chip, ComboboxChipRemove as ChipRemove, ComboboxClear as Clear, ComboboxEmpty as Empty, 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 };
 }
 
 /**
@@ -285,4 +319,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 ComboboxHighlightDetails, type ComboboxHighlightReason, type ComboboxInputProps, type ComboboxItemProps, type ComboboxListProps, type ComboboxPopupProps, type ComboboxRootProps, type ComboboxSide, type ComboboxState, type ComboboxStatusProps, type ComboboxTriggerProps, type ComboboxValue, defaultFilter };
+export { index_parts as Combobox, type ComboboxAlign, type ComboboxChangeDetails, type ComboboxChangeReason, type ComboboxChipProps, type ComboboxChipRemoveProps, type ComboboxClearProps, type ComboboxEmptyProps, type ComboboxFilter, 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 };

package/dist/combobox/index.d.ts

@@ -21,7 +21,7 @@ type ComboboxState = {
 };
 
 /** The selection: one item or `null`, or an array with `multiple`. */
-type ComboboxValue<T, Multiple extends boolean> = Multiple extends true ? T[] : T | null;
+type ComboboxValue$1<T, Multiple extends boolean> = Multiple extends true ? T[] : T | null;
 /** Takes the whole list, so a filter can rank as well as narrow — a fuzzy search, say. */
 type ComboboxFilter<T> = (items: readonly T[], query: string, itemToString: (item: T) => string) => T[];
 type ComboboxRootProps<T, Multiple extends boolean = false> = {
@@ -51,10 +51,10 @@ type ComboboxRootProps<T, Multiple extends boolean = false> = {
      * Never `undefined` once mounted: the mode is latched at mount. Use `null` — or `[]` with
      * `multiple` — for nothing selected.
      */
-    value?: ComboboxValue<T, Multiple>;
+    value?: ComboboxValue$1<T, Multiple>;
     /** Initial selection when uncontrolled. Read once, at mount. */
-    defaultValue?: ComboboxValue<T, Multiple>;
-    onValueChange?: (value: ComboboxValue<T, Multiple>, details: ComboboxChangeDetails) => void;
+    defaultValue?: ComboboxValue$1<T, Multiple>;
+    onValueChange?: (value: ComboboxValue$1<T, Multiple>, details: ComboboxChangeDetails) => void;
     /** Controlled text of the input. Provide `onInputValueChange` alongside it. */
     inputValue?: string;
     /** Initial text when uncontrolled. Defaults to the selected item's label, without `multiple`. */
@@ -107,7 +107,7 @@ type ComboboxInputOwnProps = {
 type ComboboxInputProps = ComboboxInputOwnProps & Omit<ComponentPropsWithRef<'input'>, keyof ComboboxInputOwnProps | 'value' | 'defaultValue'>;
 /**
  * The text input: `role="combobox"`, and the element focus stays on. Its text is the Root's
- * `inputValue`. It is what the popup is anchored to.
+ * `inputValue`. It is what the popup is anchored to, unless an InputGroup wraps it.
  *
  * Typing opens the list and filters it. Up and Down open it, or move the highlight, wrapping;
  * Home and End jump to the ends while it is open; Alt+Down opens it without highlighting.
@@ -119,6 +119,22 @@ type ComboboxInputProps = ComboboxInputOwnProps & Omit<ComponentPropsWithRef<'in
  */
 declare function ComboboxInput({ className, render, ...rest }: ComboboxInputProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
 
+type ComboboxInputGroupOwnProps = {
+    /** 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 ComboboxInputGroupProps = ComboboxInputGroupOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof ComboboxInputGroupOwnProps>;
+/**
+ * The field around the Input — chips, Clear and Trigger with it — when they are drawn as one
+ * box. It takes over as the popup's anchor, so the list lines up with the whole field rather
+ * than the text alone, and a press on it is not a press outside.
+ *
+ * A press on the box itself, between its children, focuses the input.
+ */
+declare function ComboboxInputGroup({ className, children, render, ...rest }: ComboboxInputGroupProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
 type ComboboxTriggerOwnProps = {
     /** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
     render?: ReactElement;
@@ -273,8 +289,26 @@ type ComboboxChipRemoveProps = ComboboxChipRemoveOwnProps & Omit<ComponentPropsW
  */
 declare function ComboboxChipRemove({ className, children, render, ...rest }: ComboboxChipRemoveProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
 
+type ComboboxValueProps<T = unknown> = {
+    /**
+     * Renders the selection: `T | null`, or `T[]` with `multiple`. The Root's `itemToString` is
+     * passed along for labels — a chip's text, say.
+     */
+    children: (value: T, details: {
+        itemToString: (item: unknown) => string;
+    }) => ReactNode;
+};
+/**
+ * The current selection, for whatever shows it outside the input — chips, most often. Renders
+ * no element of its own.
+ *
+ * It exists so that a separate styling package can show the selection without owning a copy
+ * of it (decision 9): the value stays the Root's.
+ */
+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, ComboboxInput as Input, ComboboxItem as Item, ComboboxList as List, ComboboxPopup as Popup, ComboboxRoot as Root, ComboboxStatus as Status, ComboboxTrigger as Trigger };
+  export { ComboboxChip as Chip, ComboboxChipRemove as ChipRemove, ComboboxClear as Clear, ComboboxEmpty as Empty, 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 };
 }
 
 /**
@@ -285,4 +319,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 ComboboxHighlightDetails, type ComboboxHighlightReason, type ComboboxInputProps, type ComboboxItemProps, type ComboboxListProps, type ComboboxPopupProps, type ComboboxRootProps, type ComboboxSide, type ComboboxState, type ComboboxStatusProps, type ComboboxTriggerProps, type ComboboxValue, defaultFilter };
+export { index_parts as Combobox, type ComboboxAlign, type ComboboxChangeDetails, type ComboboxChangeReason, type ComboboxChipProps, type ComboboxChipRemoveProps, type ComboboxClearProps, type ComboboxEmptyProps, type ComboboxFilter, 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 };

package/dist/combobox/index.js

@@ -23,12 +23,14 @@ __export(index_parts_exports, {
   Clear: () => ComboboxClear,
   Empty: () => ComboboxEmpty,
   Input: () => ComboboxInput,
+  InputGroup: () => ComboboxInputGroup,
   Item: () => ComboboxItem,
   List: () => ComboboxList,
   Popup: () => ComboboxPopup,
   Root: () => ComboboxRoot,
   Status: () => ComboboxStatus,
-  Trigger: () => ComboboxTrigger
+  Trigger: () => ComboboxTrigger,
+  Value: () => ComboboxValue
 });
 
 // src/combobox/ComboboxRoot.tsx
@@ -248,6 +250,11 @@ function ComboboxRoot({
     },
     [insideRefs]
   );
+  const [hasGroup, setHasGroup] = useState(false);
+  const registerGroup = useCallback(() => {
+    setHasGroup(true);
+    return () => setHasGroup(false);
+  }, []);
   const inputRef = useRef(null);
   const popupRef = useRef(null);
   const { current: initial } = useRef({ value, inputValue });
@@ -298,6 +305,8 @@ function ComboboxRoot({
       chips,
       registerInside,
       isInside,
+      hasGroup,
+      registerGroup,
       onLoadMore,
       inputId: `${id}-input`,
       listId: `${id}-list`,
@@ -332,6 +341,8 @@ function ComboboxRoot({
       chips,
       registerInside,
       isInside,
+      hasGroup,
+      registerGroup,
       onLoadMore,
       id
     ]
@@ -403,6 +414,7 @@ function ComboboxInput({ className, render, ...rest }) {
     listId,
     optionId,
     anchorName,
+    hasGroup,
     inputRef,
     popupRef
   } = useComboboxRootContext("Input");
@@ -450,7 +462,8 @@ function ComboboxInput({ className, render, ...rest }) {
       disabled: disabled || void 0,
       value: inputValue,
       ...comboboxDataAttributes({ open, multiple, disabled }),
-      style: { anchorName },
+      // The anchor, unless an InputGroup around it is.
+      style: hasGroup ? void 0 : { anchorName },
       className,
       ref: inputRef,
       onChange(event) {
@@ -517,12 +530,43 @@ function ComboboxInput({ className, render, ...rest }) {
   });
 }
 
-// src/combobox/ComboboxTrigger.tsx
+// src/combobox/ComboboxInputGroup.tsx
 import { useLayoutEffect, useRef as useRef2 } from "react";
-function ComboboxTrigger({ className, children, render, ...rest }) {
-  const { open, multiple, disabled, setOpen, close, listId, inputRef, registerInside } = useComboboxRootContext("Trigger");
+function ComboboxInputGroup({
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const { open, multiple, disabled, anchorName, registerGroup, registerInside, inputRef } = useComboboxRootContext("InputGroup");
   const elementRef = useRef2(null);
+  useLayoutEffect(() => registerGroup(), [registerGroup]);
   useLayoutEffect(() => registerInside(elementRef), [registerInside]);
+  return useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      ...comboboxDataAttributes({ open, multiple, disabled }),
+      style: { anchorName },
+      className,
+      children,
+      ref: elementRef,
+      onMouseDown(event) {
+        if (event.target !== event.currentTarget || disabled) return;
+        event.preventDefault();
+        inputRef.current?.focus();
+      }
+    },
+    consumerProps: rest
+  });
+}
+
+// src/combobox/ComboboxTrigger.tsx
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef3 } from "react";
+function ComboboxTrigger({ className, children, render, ...rest }) {
+  const { open, multiple, disabled, setOpen, close, listId, inputRef, registerInside } = useComboboxRootContext("Trigger");
+  const elementRef = useRef3(null);
+  useLayoutEffect2(() => registerInside(elementRef), [registerInside]);
   return useRender({
     render,
     defaultTagName: "button",
@@ -550,11 +594,11 @@ function ComboboxTrigger({ className, children, render, ...rest }) {
 }
 
 // src/combobox/ComboboxClear.tsx
-import { useLayoutEffect as useLayoutEffect2, useRef as useRef3 } from "react";
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef4 } from "react";
 function ComboboxClear({ className, children, render, ...rest }) {
   const { disabled, selectedItems, clear, inputRef, registerInside } = useComboboxRootContext("Clear");
-  const elementRef = useRef3(null);
-  useLayoutEffect2(() => registerInside(elementRef), [registerInside]);
+  const elementRef = useRef4(null);
+  useLayoutEffect3(() => registerInside(elementRef), [registerInside]);
   return useRender({
     render,
     defaultTagName: "button",
@@ -637,7 +681,7 @@ function ComboboxPopup({
 }
 
 // src/combobox/ComboboxList.tsx
-import { useEffect as useEffect3, useRef as useRef4 } from "react";
+import { useEffect as useEffect3, useRef as useRef5 } from "react";
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function ComboboxList({
   className,
@@ -666,8 +710,8 @@ function ComboboxList({
 }
 function LoadMoreSentinel() {
   const { open, loading, filteredItems, onLoadMore } = useComboboxRootContext("List");
-  const ref = useRef4(null);
-  const onLoadMoreRef = useRef4(onLoadMore);
+  const ref = useRef5(null);
+  const onLoadMoreRef = useRef5(onLoadMore);
   onLoadMoreRef.current = onLoadMore;
   useEffect3(() => {
     const element = ref.current;
@@ -682,7 +726,7 @@ function LoadMoreSentinel() {
 }
 
 // src/combobox/ComboboxItem.tsx
-import { useEffect as useEffect4, useLayoutEffect as useLayoutEffect3, useRef as useRef5, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useEffect as useEffect4, useLayoutEffect as useLayoutEffect4, useRef as useRef6, useSyncExternalStore as useSyncExternalStore2 } from "react";
 function ComboboxItem({
   value,
   disabled = false,
@@ -709,8 +753,8 @@ function ComboboxItem({
     () => index >= 0 && highlight.get().index === index,
     () => false
   );
-  const elementRef = useRef5(null);
-  useLayoutEffect3(() => {
+  const elementRef = useRef6(null);
+  useLayoutEffect4(() => {
     if (!disabled) return;
     disabledKeys.add(key);
     return () => {
@@ -772,7 +816,7 @@ function ComboboxStatus({ className, children, render, ...rest }) {
 }
 
 // src/combobox/ComboboxChip.tsx
-import { createContext as createContext2, useContext as useContext2, useLayoutEffect as useLayoutEffect4, useMemo as useMemo2, useRef as useRef6 } from "react";
+import { createContext as createContext2, useContext as useContext2, useLayoutEffect as useLayoutEffect5, useMemo as useMemo2, useRef as useRef7 } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var ComboboxChipContext = createContext2(null);
 function useComboboxChipContext() {
@@ -791,8 +835,8 @@ function ComboboxChip({
 }) {
   const { disabled, itemToKey, remove, registerChip, chips, inputRef } = useComboboxRootContext("Chip");
   const key = itemToKey(value);
-  const elementRef = useRef6(null);
-  useLayoutEffect4(() => registerChip({ key, ref: elementRef }), [registerChip, key]);
+  const elementRef = useRef7(null);
+  useLayoutEffect5(() => registerChip({ key, ref: elementRef }), [registerChip, key]);
   const chipContext = useMemo2(() => ({ value }), [value]);
   function focusAt(index) {
     const chip = chips[index];
@@ -867,6 +911,14 @@ function ComboboxChipRemove({
     consumerProps: rest
   });
 }
+
+// src/combobox/ComboboxValue.tsx
+import { Fragment as Fragment2, jsx as jsx4 } from "react/jsx-runtime";
+function ComboboxValue({ children }) {
+  const { multiple, selectedItems, itemToString } = useComboboxRootContext("Value");
+  const value = multiple ? selectedItems : selectedItems[0] ?? null;
+  return /* @__PURE__ */ jsx4(Fragment2, { children: children(value, { itemToString }) });
+}
 export {
   index_parts_exports as Combobox,
   defaultFilter

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arun-dev/headless",
-  "version": "4.8.0",
+  "version": "4.9.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",