@zag-js/combobox 0.55.0 → 0.56.1

package/dist/index.mjs

@@ -55,20 +55,17 @@ var dom = createScope({
   getClearTriggerEl: (ctx) => dom.getById(ctx, dom.getClearTriggerId(ctx)),
   getHighlightedItemEl: (ctx) => {
     const value = ctx.highlightedValue;
-    if (value == null)
-      return;
+    if (value == null) return;
     return 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 });
   }
 });
@@ -140,8 +137,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() {
@@ -164,8 +160,7 @@ function connect(state, send, normalize) {
         "data-invalid": dataAttr(invalid),
         "data-focus": dataAttr(focused),
         onClick(event) {
-          if (composite)
-            return;
+          if (composite) return;
           event.preventDefault();
           dom.getTriggerEl(state.context)?.focus({ preventScroll: true });
         }
@@ -216,61 +211,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 || isComposingEvent(event))
-            return;
+          if (event.defaultPrevented) return;
+          if (!interactive) return;
+          if (event.ctrlKey || event.shiftKey || 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();
@@ -312,34 +295,26 @@ function connect(state, send, normalize) {
         "data-readonly": dataAttr(readOnly),
         "data-disabled": 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 (!isLeftClick(event))
-            return;
+          if (event.defaultPrevented) return;
+          if (!interactive) return;
+          if (!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" });
@@ -396,10 +371,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" });
         }
       });
@@ -421,31 +394,22 @@ function connect(state, send, normalize) {
         "data-disabled": 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 (isDownloadingEvent(event))
-            return;
-          if (isOpeningInNewTab(event))
-            return;
-          if (isContextMenuEvent(event))
-            return;
-          if (itemState.disabled)
-            return;
+          if (isDownloadingEvent(event)) return;
+          if (isOpeningInNewTab(event)) return;
+          if (isContextMenuEvent(event)) return;
+          if (itemState.disabled) return;
           send({ type: "ITEM.CLICK", src: "pointerup", value });
         },
         onTouchEnd(event) {
@@ -521,6 +485,8 @@ function machine(userContext) {
         openOnKeyPress: true,
         openOnChange: true,
         composite: true,
+        readOnly: false,
+        disabled: false,
         ...ctx,
         highlightedItem: null,
         selectedItems: [],
@@ -1056,8 +1022,7 @@ function machine(userContext) {
         closeOnSelect: (ctx2) => !!ctx2.closeOnSelect,
         isOpenControlled: (ctx2) => !!ctx2["open.controlled"],
         openOnChange: (ctx2, evt) => {
-          if (isBoolean(ctx2.openOnChange))
-            return ctx2.openOnChange;
+          if (isBoolean(ctx2.openOnChange)) return ctx2.openOnChange;
           return !!ctx2.openOnChange?.({ inputValue: evt.value });
         },
         restoreFocus: (_ctx, evt) => evt.restoreFocus == null ? true : !!evt.restoreFocus,
@@ -1065,8 +1030,7 @@ function machine(userContext) {
       },
       activities: {
         trackDismissableLayer(ctx2, _evt, { send }) {
-          if (ctx2.disableLayer)
-            return;
+          if (ctx2.disableLayer) return;
           const contentEl = () => dom.getContentEl(ctx2);
           return trackDismissableElement(contentEl, {
             defer: true,
@@ -1101,8 +1065,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 observeChildren(contentEl, {
@@ -1116,8 +1079,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) {
@@ -1157,8 +1119,7 @@ function machine(userContext) {
           });
         },
         setHighlightedItem(ctx2, evt) {
-          if (evt.value == null)
-            return;
+          if (evt.value == null) return;
           set.highlightedValue(ctx2, evt.value);
         },
         clearHighlightedItem(ctx2) {
@@ -1168,13 +1129,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);
         },
@@ -1195,15 +1154,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);
           });
         },
@@ -1239,8 +1195,7 @@ function machine(userContext) {
           }
         },
         setSelectedItems(ctx2, evt) {
-          if (!isArray(evt.value))
-            return;
+          if (!isArray(evt.value)) return;
           set.value(ctx2, evt.value);
         },
         clearSelectedItems(ctx2) {
@@ -1251,8 +1206,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;
           }
         },
@@ -1269,8 +1223,7 @@ function machine(userContext) {
           });
         },
         highlightFirstItemIfNeeded(ctx2) {
-          if (!ctx2.autoHighlight)
-            return;
+          if (!ctx2.autoHighlight) return;
           raf(() => {
             const value = ctx2.collection.first();
             set.highlightedValue(ctx2, value);
@@ -1286,8 +1239,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();
           }
@@ -1297,8 +1249,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();
           }
@@ -1334,8 +1285,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);
           raf(() => {
             inputEl.value = valueText || ctx2.inputValue;
@@ -1362,8 +1312,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);
@@ -1409,10 +1358,8 @@ var invoke = {
 };
 var set = {
   value: (ctx, value, force = false) => {
-    if (isEqual(ctx.value, value))
-      return;
-    if (value == null && !force)
-      return;
+    if (isEqual(ctx.value, value)) return;
+    if (value == null && !force) return;
     if (value == null && force) {
       ctx.value = [];
       invoke.valueChange(ctx);
@@ -1426,16 +1373,13 @@ var set = {
     invoke.valueChange(ctx);
   },
   highlightedValue: (ctx, value, force = false) => {
-    if (isEqual(ctx.highlightedValue, value))
-      return;
-    if (!value && !force)
-      return;
+    if (isEqual(ctx.highlightedValue, value)) return;
+    if (!value && !force) return;
     ctx.highlightedValue = value || null;
     invoke.highlightChange(ctx);
   },
   inputValue: (ctx, value) => {
-    if (isEqual(ctx.inputValue, value))
-      return;
+    if (isEqual(ctx.inputValue, value)) return;
     ctx.inputValue = value;
     invoke.inputChange(ctx);
   }