@zag-js/combobox 0.55.0 → 0.56.1

package/dist/index.d.mts

@@ -178,7 +178,10 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
      */
     collection: Collection<any>;
     /**
-     * Whether to allow multiple selection
+     * Whether to allow multiple selection.
+     *
+     * **Good to know:** When `multiple` is `true`, the `selectionBehavior` is automatically set to `clear`.
+     * It is recommended to render the selected items in a separate container.
      */
     multiple?: boolean;
     /**

package/dist/index.d.ts

@@ -178,7 +178,10 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
      */
     collection: Collection<any>;
     /**
-     * Whether to allow multiple selection
+     * Whether to allow multiple selection.
+     *
+     * **Good to know:** When `multiple` is `true`, the `selectionBehavior` is automatically set to `clear`.
+     * It is recommended to render the selected items in a separate container.
      */
     multiple?: boolean;
     /**

package/dist/index.js

@@ -84,20 +84,17 @@ var dom = (0, import_dom_query.createScope)({
   getClearTriggerEl: (ctx) => dom.getById(ctx, dom.getClearTriggerId(ctx)),
   getHighlightedItemEl: (ctx) => {
     const value = ctx.highlightedValue;
-    if (value == null)
-      return;
+    if (value == null) return;
     return (0, import_dom_query.query)(dom.getContentEl(ctx), `[role=option][data-value="${CSS.escape(value)}"`);
   },
   focusInputEl: (ctx) => {
     const inputEl = dom.getInputEl(ctx);
-    if (dom.getActiveElement(ctx) === inputEl)
-      return;
+    if (dom.getActiveElement(ctx) === inputEl) return;
     inputEl?.focus({ preventScroll: true });
   },
   focusTriggerEl: (ctx) => {
     const triggerEl = dom.getTriggerEl(ctx);
-    if (dom.getActiveElement(ctx) === triggerEl)
-      return;
+    if (dom.getActiveElement(ctx) === triggerEl) return;
     triggerEl?.focus({ preventScroll: true });
   }
 });
@@ -169,8 +166,7 @@ function connect(state, send, normalize) {
       dom.getInputEl(state.context)?.focus();
     },
     setOpen(nextOpen) {
-      if (nextOpen === open)
-        return;
+      if (nextOpen === open) return;
       send(nextOpen ? "OPEN" : "CLOSE");
     },
     getRootProps() {
@@ -193,8 +189,7 @@ function connect(state, send, normalize) {
         "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
         "data-focus": (0, import_dom_query2.dataAttr)(focused),
         onClick(event) {
-          if (composite)
-            return;
+          if (composite) return;
           event.preventDefault();
           dom.getTriggerEl(state.context)?.focus({ preventScroll: true });
         }
@@ -245,61 +240,49 @@ function connect(state, send, normalize) {
         "data-state": open ? "open" : "closed",
         "aria-activedescendant": highlightedValue ? dom.getItemId(state.context, highlightedValue) : void 0,
         onClick(event) {
-          if (event.defaultPrevented)
-            return;
-          if (!state.context.openOnClick)
-            return;
-          if (!interactive)
-            return;
+          if (event.defaultPrevented) return;
+          if (!state.context.openOnClick) return;
+          if (!interactive) return;
           send("INPUT.CLICK");
         },
         onFocus() {
-          if (disabled)
-            return;
+          if (disabled) return;
           send("INPUT.FOCUS");
         },
         onBlur() {
-          if (disabled)
-            return;
+          if (disabled) return;
           send("INPUT.BLUR");
         },
         onChange(event) {
           send({ type: "INPUT.CHANGE", value: event.currentTarget.value });
         },
         onKeyDown(event) {
-          if (event.defaultPrevented)
-            return;
-          if (!interactive)
-            return;
-          if (event.ctrlKey || event.shiftKey || (0, import_dom_query2.isComposingEvent)(event))
-            return;
+          if (event.defaultPrevented) return;
+          if (!interactive) return;
+          if (event.ctrlKey || event.shiftKey || (0, import_dom_query2.isComposingEvent)(event)) return;
           const openOnKeyPress = state.context.openOnKeyPress;
           const isModifierKey = event.ctrlKey || event.metaKey || event.shiftKey;
           const keypress = true;
           const keymap = {
             ArrowDown(event2) {
-              if (!openOnKeyPress && !open)
-                return;
+              if (!openOnKeyPress && !open) return;
               send({ type: event2.altKey ? "OPEN" : "INPUT.ARROW_DOWN", keypress });
               event2.preventDefault();
             },
             ArrowUp() {
-              if (!openOnKeyPress && !open)
-                return;
+              if (!openOnKeyPress && !open) return;
               send({ type: event.altKey ? "CLOSE" : "INPUT.ARROW_UP", keypress });
               event.preventDefault();
             },
             Home(event2) {
-              if (isModifierKey)
-                return;
+              if (isModifierKey) return;
               send({ type: "INPUT.HOME", keypress });
               if (open) {
                 event2.preventDefault();
               }
             },
             End(event2) {
-              if (isModifierKey)
-                return;
+              if (isModifierKey) return;
               send({ type: "INPUT.END", keypress });
               if (open) {
                 event2.preventDefault();
@@ -341,34 +324,26 @@ function connect(state, send, normalize) {
         "data-readonly": (0, import_dom_query2.dataAttr)(readOnly),
         "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
         onFocus() {
-          if (!props.focusable)
-            return;
+          if (!props.focusable) return;
           send({ type: "INPUT.FOCUS", src: "trigger" });
         },
         onClick(event) {
-          if (event.defaultPrevented)
-            return;
-          if (!interactive)
-            return;
-          if (!(0, import_dom_event.isLeftClick)(event))
-            return;
+          if (event.defaultPrevented) return;
+          if (!interactive) return;
+          if (!(0, import_dom_event.isLeftClick)(event)) return;
           send("TRIGGER.CLICK");
         },
         onPointerDown(event) {
-          if (!interactive)
-            return;
-          if (event.pointerType === "touch")
-            return;
+          if (!interactive) return;
+          if (event.pointerType === "touch") return;
           event.preventDefault();
           queueMicrotask(() => {
             dom.getInputEl(state.context)?.focus({ preventScroll: true });
           });
         },
         onKeyDown(event) {
-          if (event.defaultPrevented)
-            return;
-          if (composite)
-            return;
+          if (event.defaultPrevented) return;
+          if (composite) return;
           const keyMap = {
             ArrowDown() {
               send({ type: "INPUT.ARROW_DOWN", src: "trigger" });
@@ -425,10 +400,8 @@ function connect(state, send, normalize) {
           event.preventDefault();
         },
         onClick(event) {
-          if (event.defaultPrevented)
-            return;
-          if (!interactive)
-            return;
+          if (event.defaultPrevented) return;
+          if (!interactive) return;
           send({ type: "VALUE.CLEAR", src: "clear-trigger" });
         }
       });
@@ -450,31 +423,22 @@ function connect(state, send, normalize) {
         "data-disabled": (0, import_dom_query2.dataAttr)(itemState.disabled),
         "data-value": itemState.value,
         onPointerMove() {
-          if (itemState.disabled)
-            return;
-          if (itemState.highlighted)
-            return;
+          if (itemState.disabled) return;
+          if (itemState.highlighted) return;
           send({ type: "ITEM.POINTER_MOVE", value });
         },
         onPointerLeave() {
-          if (props.persistFocus)
-            return;
-          if (itemState.disabled)
-            return;
+          if (props.persistFocus) return;
+          if (itemState.disabled) return;
           const mouseMoved = state.previousEvent.type.includes("POINTER");
-          if (!mouseMoved)
-            return;
+          if (!mouseMoved) return;
           send({ type: "ITEM.POINTER_LEAVE", value });
         },
         onPointerUp(event) {
-          if ((0, import_dom_query2.isDownloadingEvent)(event))
-            return;
-          if ((0, import_dom_query2.isOpeningInNewTab)(event))
-            return;
-          if ((0, import_dom_event.isContextMenuEvent)(event))
-            return;
-          if (itemState.disabled)
-            return;
+          if ((0, import_dom_query2.isDownloadingEvent)(event)) return;
+          if ((0, import_dom_query2.isOpeningInNewTab)(event)) return;
+          if ((0, import_dom_event.isContextMenuEvent)(event)) return;
+          if (itemState.disabled) return;
           send({ type: "ITEM.CLICK", src: "pointerup", value });
         },
         onTouchEnd(event) {
@@ -550,6 +514,8 @@ function machine(userContext) {
         openOnKeyPress: true,
         openOnChange: true,
         composite: true,
+        readOnly: false,
+        disabled: false,
         ...ctx,
         highlightedItem: null,
         selectedItems: [],
@@ -1085,8 +1051,7 @@ function machine(userContext) {
         closeOnSelect: (ctx2) => !!ctx2.closeOnSelect,
         isOpenControlled: (ctx2) => !!ctx2["open.controlled"],
         openOnChange: (ctx2, evt) => {
-          if ((0, import_utils.isBoolean)(ctx2.openOnChange))
-            return ctx2.openOnChange;
+          if ((0, import_utils.isBoolean)(ctx2.openOnChange)) return ctx2.openOnChange;
           return !!ctx2.openOnChange?.({ inputValue: evt.value });
         },
         restoreFocus: (_ctx, evt) => evt.restoreFocus == null ? true : !!evt.restoreFocus,
@@ -1094,8 +1059,7 @@ function machine(userContext) {
       },
       activities: {
         trackDismissableLayer(ctx2, _evt, { send }) {
-          if (ctx2.disableLayer)
-            return;
+          if (ctx2.disableLayer) return;
           const contentEl = () => dom.getContentEl(ctx2);
           return (0, import_dismissable.trackDismissableElement)(contentEl, {
             defer: true,
@@ -1130,8 +1094,7 @@ function machine(userContext) {
         },
         // in event the options are fetched (async), we still want to auto-highlight the first option
         trackChildNodes(ctx2, _evt, { send }) {
-          if (!ctx2.autoHighlight)
-            return;
+          if (!ctx2.autoHighlight) return;
           const exec = () => send("CHILDREN_CHANGE");
           const contentEl = () => dom.getContentEl(ctx2);
           return (0, import_dom_query3.observeChildren)(contentEl, {
@@ -1145,8 +1108,7 @@ function machine(userContext) {
           const exec = (immediate) => {
             const state = getState();
             const pointer = state.event.type.includes("POINTER");
-            if (pointer || !ctx2.highlightedValue)
-              return;
+            if (pointer || !ctx2.highlightedValue) return;
             const itemEl = dom.getHighlightedItemEl(ctx2);
             const contentEl = dom.getContentEl(ctx2);
             if (ctx2.scrollToIndexFn) {
@@ -1186,8 +1148,7 @@ function machine(userContext) {
           });
         },
         setHighlightedItem(ctx2, evt) {
-          if (evt.value == null)
-            return;
+          if (evt.value == null) return;
           set.highlightedValue(ctx2, evt.value);
         },
         clearHighlightedItem(ctx2) {
@@ -1197,13 +1158,11 @@ function machine(userContext) {
           set.value(ctx2, ctx2.highlightedValue);
         },
         selectItem(ctx2, evt) {
-          if (evt.value == null)
-            return;
+          if (evt.value == null) return;
           set.value(ctx2, evt.value);
         },
         clearItem(ctx2, evt) {
-          if (evt.value == null)
-            return;
+          if (evt.value == null) return;
           const value = ctx2.value.filter((v) => v !== evt.value);
           set.value(ctx2, value);
         },
@@ -1224,15 +1183,12 @@ function machine(userContext) {
         },
         syncInputValue(ctx2) {
           const inputEl = dom.getInputEl(ctx2);
-          if (!inputEl)
-            return;
+          if (!inputEl) return;
           inputEl.value = ctx2.inputValue;
           queueMicrotask(() => {
             const { selectionStart, selectionEnd } = inputEl;
-            if (Math.abs((selectionEnd ?? 0) - (selectionStart ?? 0)) !== 0)
-              return;
-            if (selectionStart !== 0)
-              return;
+            if (Math.abs((selectionEnd ?? 0) - (selectionStart ?? 0)) !== 0) return;
+            if (selectionStart !== 0) return;
             inputEl.setSelectionRange(inputEl.value.length, inputEl.value.length);
           });
         },
@@ -1268,8 +1224,7 @@ function machine(userContext) {
           }
         },
         setSelectedItems(ctx2, evt) {
-          if (!(0, import_utils.isArray)(evt.value))
-            return;
+          if (!(0, import_utils.isArray)(evt.value)) return;
           set.value(ctx2, evt.value);
         },
         clearSelectedItems(ctx2) {
@@ -1280,8 +1235,7 @@ function machine(userContext) {
             ctx2.scrollToIndexFn({ index: 0, immediate: true });
           } else {
             const contentEl = dom.getContentEl(ctx2);
-            if (!contentEl)
-              return;
+            if (!contentEl) return;
             contentEl.scrollTop = 0;
           }
         },
@@ -1298,8 +1252,7 @@ function machine(userContext) {
           });
         },
         highlightFirstItemIfNeeded(ctx2) {
-          if (!ctx2.autoHighlight)
-            return;
+          if (!ctx2.autoHighlight) return;
           (0, import_dom_query3.raf)(() => {
             const value = ctx2.collection.first();
             set.highlightedValue(ctx2, value);
@@ -1315,8 +1268,7 @@ function machine(userContext) {
           let value = null;
           if (ctx2.highlightedValue) {
             value = ctx2.collection.next(ctx2.highlightedValue);
-            if (!value && ctx2.loopFocus)
-              value = ctx2.collection.first();
+            if (!value && ctx2.loopFocus) value = ctx2.collection.first();
           } else {
             value = ctx2.collection.first();
           }
@@ -1326,8 +1278,7 @@ function machine(userContext) {
           let value = null;
           if (ctx2.highlightedValue) {
             value = ctx2.collection.prev(ctx2.highlightedValue);
-            if (!value && ctx2.loopFocus)
-              value = ctx2.collection.last();
+            if (!value && ctx2.loopFocus) value = ctx2.collection.last();
           } else {
             value = ctx2.collection.last();
           }
@@ -1363,8 +1314,7 @@ function machine(userContext) {
         },
         autofillInputValue(ctx2, evt) {
           const inputEl = dom.getInputEl(ctx2);
-          if (!ctx2.autoComplete || !inputEl || !evt.keypress)
-            return;
+          if (!ctx2.autoComplete || !inputEl || !evt.keypress) return;
           const valueText = ctx2.collection.valueToString(ctx2.highlightedValue);
           (0, import_dom_query3.raf)(() => {
             inputEl.value = valueText || ctx2.inputValue;
@@ -1391,8 +1341,7 @@ var sync = {
     const prevSelectedItems = ctx.selectedItems;
     ctx.selectedItems = ctx.value.map((v) => {
       const foundItem = prevSelectedItems.find((item) => ctx.collection.itemToValue(item) === v);
-      if (foundItem)
-        return foundItem;
+      if (foundItem) return foundItem;
       return ctx.collection.item(v);
     });
     const valueAsString = ctx.collection.itemsToString(ctx.selectedItems);
@@ -1438,10 +1387,8 @@ var invoke = {
 };
 var set = {
   value: (ctx, value, force = false) => {
-    if ((0, import_utils.isEqual)(ctx.value, value))
-      return;
-    if (value == null && !force)
-      return;
+    if ((0, import_utils.isEqual)(ctx.value, value)) return;
+    if (value == null && !force) return;
     if (value == null && force) {
       ctx.value = [];
       invoke.valueChange(ctx);
@@ -1455,16 +1402,13 @@ var set = {
     invoke.valueChange(ctx);
   },
   highlightedValue: (ctx, value, force = false) => {
-    if ((0, import_utils.isEqual)(ctx.highlightedValue, value))
-      return;
-    if (!value && !force)
-      return;
+    if ((0, import_utils.isEqual)(ctx.highlightedValue, value)) return;
+    if (!value && !force) return;
     ctx.highlightedValue = value || null;
     invoke.highlightChange(ctx);
   },
   inputValue: (ctx, value) => {
-    if ((0, import_utils.isEqual)(ctx.inputValue, value))
-      return;
+    if ((0, import_utils.isEqual)(ctx.inputValue, value)) return;
     ctx.inputValue = value;
     invoke.inputChange(ctx);
   }