@sewadah/selaras 0.3.1 → 0.4.0

package/dist/runtime/internal/ComboboxSelectBase.vue

@@ -44,8 +44,8 @@ const props = defineProps({
   labelKey: { type: String, required: false },
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
-  modelValue: { type: [String, Number, Array], required: false },
-  defaultValue: { type: [String, Number, Array], required: false },
+  modelValue: { type: [String, Number, Object, Array], required: false },
+  defaultValue: { type: [String, Number, Object, Array], required: false },
   multiple: { type: Boolean, required: false },
   searchable: { type: Boolean, required: false },
   virtualize: { type: [Boolean, Object], required: false },
@@ -117,7 +117,16 @@ function updateSelection(event, value) {
     localValue.value = value;
   emit(event, value);
 }
+const localOpen = ref(props.defaultOpen ?? false);
+const isOpenControlled = () => Object.hasOwn(instance.vnode.props ?? {}, "open");
+const open = computed(() => isOpenControlled() ? props.open ?? false : localOpen.value);
+const isMobile = useIsMobile();
+const mobilePresentation = ref(false);
+const showMobileModal = computed(() => mobilePresentation.value);
+const showMobileAutocompleteModal = computed(() => mobilePresentation.value && !!props.creatable);
+const modalBody = ref();
 const editableInput = ref();
+const activeEditableInput = computed(() => showMobileAutocompleteModal.value ? modalBody.value?.searchElement : editableInput.value);
 const comboboxRootKey = ref(0);
 function setEditableInput(element) {
   const candidate = typeof HTMLInputElement !== "undefined" && element instanceof HTMLInputElement ? element : element?.$el;
@@ -241,13 +250,13 @@ function revertUnmatchedText() {
   return true;
 }
 function onSearchKeydown(event) {
-  if (event.target !== editableInput.value)
+  if (event.target !== activeEditableInput.value)
     return;
   if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key) && !event.isComposing && !isSearchComposing.value) {
     keyboardNavigatedOptions.value = true;
     return;
   }
-  if (event.key === "Backspace" && props.creatable && props.multiple && props.displayMode === "comma" && !event.isComposing && !isSearchComposing.value && event.keyCode !== 229 && !searchText.value && !editableInput.value.value && selectedValues.value.length) {
+  if (event.key === "Backspace" && props.creatable && props.multiple && props.displayMode === "comma" && !event.isComposing && !isSearchComposing.value && event.keyCode !== 229 && !searchText.value && !activeEditableInput.value?.value && selectedValues.value.length) {
     removeValue(selectedValues.value.at(-1));
     event.preventDefault();
     return;
@@ -266,18 +275,20 @@ function onSearchKeydown(event) {
   if (props.forceSelection)
     return;
   if (props.creatable && !searchText.value.trim()) {
-    const activeId2 = editableInput.value?.getAttribute("aria-activedescendant");
+    const activeId2 = activeEditableInput.value?.getAttribute("aria-activedescendant");
     const activeOption2 = activeId2 ? document.getElementById(activeId2) : null;
     if (keyboardNavigatedOptions.value && activeOption2?.getAttribute("aria-selected") === "false")
       return;
     event.stopPropagation();
     return;
   }
-  const activeId = editableInput.value?.getAttribute("aria-activedescendant");
+  const activeId = activeEditableInput.value?.getAttribute("aria-activedescendant");
   const activeOption = activeId ? document.getElementById(activeId) : null;
   if ((!hasMatchingOption(searchText.value) || !activeOption || activeOption.hasAttribute("data-selaras-create-option")) && commitCreatableText(searchText.value)) {
     if (props.multiple)
       searchText.value = "";
+    else if (showMobileAutocompleteModal.value)
+      updateOpen(false);
     event.preventDefault();
     event.stopPropagation();
   }
@@ -297,7 +308,9 @@ onUnmounted(() => {
   if (typeof window !== "undefined")
     endSuggestionPointer();
 });
-function onSearchBlur() {
+function onSearchBlur(event) {
+  if (props.creatable && event?.target !== editableInput.value)
+    return;
   if (pointerInSuggestionContent.value)
     return;
   if (revertUnmatchedText())
@@ -329,7 +342,7 @@ watch(
   ([multiple, currentValue], [previousMultiple, previousValue]) => {
     if (multiple === previousMultiple)
       return;
-    const wasEditableFocused = props.creatable && typeof document !== "undefined" && document.activeElement === editableInput.value;
+    const wasEditableFocused = props.creatable && typeof document !== "undefined" && document.activeElement === activeEditableInput.value;
     const abortingComposition = !!props.creatable && isSearchComposing.value;
     const previouslyIdle = props.creatable && props.searchTerm === void 0 && searchText.value === (previousMultiple || !props.resetSearchTermOnSelect ? "" : singleSelectionLabel(previousValue));
     const savedSearchText = searchText.value;
@@ -354,7 +367,7 @@ watch(
       if (props.searchTerm === void 0)
         internalSearchText.value = nextSearchText;
     }
-    const priorInput = editableInput.value;
+    const priorInput = activeEditableInput.value;
     nextTick(() => {
       if (props.creatable || props.searchable) {
         if (props.searchTerm === void 0)
@@ -369,7 +382,7 @@ watch(
         return;
       if (document.activeElement !== document.body && document.activeElement !== priorInput)
         return;
-      editableInput.value?.focus();
+      activeEditableInput.value?.focus();
     });
   },
   { flush: "pre" }
@@ -441,20 +454,10 @@ const groupProps = computed(() => resolveSlot(ui.value.group, props.ui?.group));
 const itemProps = computed(() => resolveSlot(ui.value.item, props.ui?.item));
 const itemIndicatorProps = computed(() => resolveSlot(ui.value.itemIndicator, props.ui?.itemIndicator));
 const emptyProps = computed(() => resolveSlot(ui.value.empty, props.ui?.empty));
-const mobileContentProps = computed(() => resolveSlot(ui.value.mobileContent, props.ui?.mobileContent));
-const mobilePanelProps = computed(() => mergeProps(
-  {
-    style: {
-      width: "min(calc(100vw - 2rem), 36rem)",
-      minWidth: "0",
-      maxHeight: "min(50vh, 28rem)"
-    }
-  },
-  resolveSlot(ui.value.mobilePanel, props.ui?.mobilePanel)
+const mobileContentProps = computed(() => mergeProps(
+  resolveSlot(ui.value.mobileContent, props.ui?.mobileContent),
+  props.creatable ? resolveSlot(ui.value.mobilePanel, props.ui?.mobilePanel) : {}
 ));
-const localOpen = ref(props.defaultOpen ?? false);
-const isOpenControlled = () => Object.hasOwn(instance.vnode.props ?? {}, "open");
-const open = computed(() => isOpenControlled() ? props.open ?? false : localOpen.value);
 watch(flatOptions, (options, previousOptions) => {
   const value = selection.value;
   if (!props.creatable || props.multiple || open.value || props.searchTerm !== void 0 || !props.resetSearchTermOnSelect || value === void 0 || Array.isArray(value))
@@ -479,52 +482,79 @@ function resetSelection(event) {
     updateOpen(false);
   });
 }
-const isMobile = useIsMobile();
-const mobilePresentation = ref(false);
 watch(open, (open2) => {
-  if (!open2 && mobilePresentation.value && !props.creatable && props.resetSearchTermOnBlur)
-    searchText.value = "";
+  if (!open2 && mobilePresentation.value && props.resetSearchTermOnBlur)
+    searchText.value = props.creatable && !props.multiple ? singleSelectionLabel(selection.value) : "";
   mobilePresentation.value = open2 && !!props.adaptive && isMobile.value;
 });
 onMounted(() => {
   if (!open.value)
     return;
   mobilePresentation.value = !!props.adaptive && isMobile.value;
-  if (mobilePresentation.value && props.creatable && !props.disabled) {
-    nextTick(() => {
-      editableInput.value?.focus();
-    });
-  }
 });
-const showMobileSelectModal = computed(() => mobilePresentation.value && !props.creatable);
-const showMobileAutocompletePanel = computed(() => mobilePresentation.value && !!props.creatable);
+const useMobileAutocompleteTrigger = computed(() => props.creatable && (open.value ? showMobileAutocompleteModal.value : props.adaptive && isMobile.value));
 const modalId = `selaras-select-modal-${useId()}`;
 const selectTrigger = ref();
-const modalBody = ref();
-const modalTriggerAttrs = computed(() => !props.creatable && (open.value ? showMobileSelectModal.value : props.adaptive && isMobile.value) ? { "aria-haspopup": "dialog", "aria-controls": modalId } : {});
+const modalTriggerAttrs = computed(() => !props.creatable && (open.value ? showMobileModal.value : props.adaptive && isMobile.value) ? { "aria-haspopup": "dialog", "aria-controls": modalId } : {});
 function onModalSelection(value) {
   setValue(value == null ? props.multiple ? [] : void 0 : value);
+  if (props.creatable) {
+    nextTick(() => {
+      if (props.resetSearchTermOnSelect)
+        searchText.value = props.multiple ? "" : singleSelectionLabel(selection.value);
+    });
+  }
   if (!props.multiple)
     updateOpen(false);
 }
+watch(selection, () => {
+  if (useMobileAutocompleteTrigger.value && !open.value && props.resetSearchTermOnSelect && props.searchTerm === void 0)
+    internalSearchText.value = props.multiple ? "" : singleSelectionLabel(selection.value);
+});
+function openMobileAutocomplete(event) {
+  if (props.disabled || event && !["ArrowDown", "ArrowUp", "Enter", " "].includes(event.key))
+    return;
+  event?.preventDefault();
+  updateOpen(true);
+}
+function finishMobileAutocomplete() {
+  if (isSearchComposing.value)
+    return;
+  if (!revertUnmatchedText() && !props.forceSelection)
+    commitCreatableText(searchText.value);
+  updateOpen(false);
+}
+function serializeFormValue(value) {
+  if (typeof value !== "object")
+    return String(value);
+  try {
+    return JSON.stringify(value) ?? "";
+  } catch {
+    return String(value);
+  }
+}
 const adaptiveUi = computed(() => ({
   content: {
-    class: "rounded-[var(--selaras-resolved-radius-md)]",
-    ...!props.creatable ? {
-      "id": modalId,
-      "aria-modal": true,
-      "onOpenAutoFocus": (event) => {
-        if (props.searchable && modalBody.value?.focusSearch())
-          event.preventDefault();
-      },
-      "onCloseAutoFocus": (event) => {
+    "class": "rounded-[var(--selaras-resolved-radius-md)]",
+    "id": modalId,
+    "aria-modal": true,
+    "onOpenAutoFocus": (event) => {
+      if (props.searchable && modalBody.value?.focusSearch())
         event.preventDefault();
-        if (!props.disabled && selectTrigger.value?.$el?.isConnected)
-          selectTrigger.value.$el.focus();
-      }
-    } : {}
+    },
+    "onCloseAutoFocus": (event) => {
+      event.preventDefault();
+      if (props.disabled)
+        return;
+      nextTick(() => {
+        const target = props.creatable ? editableInput.value : selectTrigger.value?.$el;
+        if (target?.isConnected)
+          target.focus();
+      });
+    }
   }
 }));
+const modalSearchInputProps = computed(() => mergeProps(searchInputProps.value, props.creatable ? { "id": `${selectId.value ?? modalId}-input`, "aria-label": nativeSearchInputAttrs.value["aria-label"] ?? props.placeholder ?? messages.value.search } : {}));
 const bodyProps = computed(() => ({
   searchable: props.searchable,
   creatable: props.creatable,
@@ -554,7 +584,7 @@ const bodyProps = computed(() => ({
 <template>
   <ComboboxRoot
     :key="comboboxRootKey"
-    :open="open"
+    :open="useMobileAutocompleteTrigger ? false : open"
     :model-value="rekaSelection"
     :multiple="multiple"
     :disabled="disabled"
@@ -574,7 +604,7 @@ const bodyProps = computed(() => ({
         typing is always available without opening anything first.
       -->
       <div
-        v-if="creatable"
+        v-if="creatable && !useMobileAutocompleteTrigger"
         data-ui-group-item
         :data-selaras-field-filled="selectedValues.length ? '' : void 0"
         :data-selaras-field-active="open ? '' : void 0"
@@ -608,7 +638,7 @@ const bodyProps = computed(() => ({
           -->
           <TagsInputItem
             v-for="option in visibleOptions"
-            :key="option.value"
+            :key="option.key"
             :value="option.value"
             as-child
           >
@@ -620,7 +650,7 @@ const bodyProps = computed(() => ({
               :ui="{ root: 'data-[state=active]:ring-2 data-[state=active]:ring-[var(--_selaras-color-fill)]' }"
             >
               <TagsInputItemText as="span">
-                <slot v-if="option.raw" name="item" :item="option.raw">
+                <slot v-if="option.raw !== void 0" name="item" :item="option.raw">
                   {{ option.label }}
                 </slot>
                 <template v-else>
@@ -710,6 +740,50 @@ const bodyProps = computed(() => ({
         </ComboboxTrigger>
       </div>
 
+      <div
+        v-else-if="creatable"
+        data-ui-group-item
+        :data-selaras-field-filled="selectedValues.length ? '' : void 0"
+        :data-selaras-field-active="open ? '' : void 0"
+        v-bind="triggerProps"
+        @click="openMobileAutocomplete()"
+      >
+        <span v-if="multiple && selectedOptions.length" v-bind="commaValueProps">{{ commaText }}</span>
+        <input
+          :id="selectId"
+          :ref="setEditableInput"
+          :value="multiple ? '' : searchText"
+          :placeholder="multiple && selectedOptions.length ? void 0 : placeholder"
+          :disabled="disabled"
+          :aria-invalid="selectInvalid || void 0"
+          :aria-describedby="searchDescribedBy"
+          :aria-busy="loading || void 0"
+          v-bind="searchInputProps"
+          readonly
+          aria-haspopup="dialog"
+          :aria-expanded="open"
+          :aria-controls="modalId"
+          @keydown="openMobileAutocomplete"
+        >
+        <Button v-if="clearable && !disabled && selectedOptions.length" :size="clearSize" variant="text" color="neutral" tabindex="-1" :aria-label="messages.clear" v-bind="clearProps" @click.stop="clear">
+          <template #icon>
+            <slot name="clear-icon">
+              <Icon :name="icons.close" class="size-4" />
+            </slot>
+          </template>
+        </Button>
+        <slot v-if="loading" name="loading-icon">
+          <Icon :name="icons.loading" class="size-4 animate-spin" v-bind="iconProps" />
+        </slot>
+        <span v-if="loading" class="sr-only">{{ messages.loading }}</span>
+        <button v-if="dropdown" type="button" tabindex="-1" :disabled="disabled" :aria-label="messages.search" v-bind="dropdownProps" @click.stop="onDropdownClick();
+  openMobileAutocomplete()">
+          <slot name="dropdown-icon">
+            <Icon :name="icons.chevronDown" class="size-4" />
+          </slot>
+        </button>
+      </div>
+
       <ComboboxTrigger
         v-else
         :id="selectId"
@@ -736,7 +810,7 @@ const bodyProps = computed(() => ({
           <div v-if="displayMode === 'chip'" class="flex flex-1 flex-wrap items-center gap-1.5">
             <Chip
               v-for="option in visibleOptions"
-              :key="option.value"
+              :key="option.key"
               size="sm"
               color="primary"
               variant="soft"
@@ -745,7 +819,7 @@ const bodyProps = computed(() => ({
               :aria-current="option.value === selectedChipValue || void 0"
               :ui="{ root: 'data-[state=active]:ring-2 data-[state=active]:ring-[var(--_selaras-color-fill)]' }"
             >
-              <slot v-if="option.raw" name="item" :item="option.raw">
+              <slot v-if="option.raw !== void 0" name="item" :item="option.raw">
                 {{ option.label }}
               </slot>
               <template v-else>
@@ -822,12 +896,12 @@ const bodyProps = computed(() => ({
       </ComboboxTrigger>
     </ComboboxAnchor>
 
-    <ComboboxPortal v-if="!showMobileSelectModal" v-bind="portalProps">
+    <ComboboxPortal v-if="!showMobileModal" v-bind="portalProps">
       <ComboboxContent
         position="popper" :side-offset="4"
         :hide-when-empty="creatable && !multiple && !forceSelection"
         :data-selaras-theme="themeBindings['data-selaras-theme']" :data-selaras-mode="themeBindings['data-selaras-mode']" :style="themeBindings.style" :data-selaras-color="colorRoleMarker"
-        v-bind="showMobileAutocompletePanel ? mergeProps(contentProps, mobilePanelProps) : contentProps"
+        v-bind="contentProps"
         @pointerdown.capture="startSuggestionPointer"
       >
         <ComboboxSelectBody v-bind="bodyProps" @update:search-text="searchText = $event">
@@ -857,10 +931,8 @@ const bodyProps = computed(() => ({
       </ComboboxContent>
     </ComboboxPortal>
     <!--
-      Modal owns Select's focus/dismissal; Listbox only supplies selection.
-      The content slot retains Modal's registered title/description.
-      Autocomplete stays in the nonmodal ComboboxContent branch above: its
-      editable input is the one focus and dismissal owner for that surface.
+      Modal owns focus and dismissal; Listbox supplies selection and the
+      Autocomplete editor inside the same accessible dialog surface.
     -->
     <Modal
       v-else :open="open" :title="placeholder || messages.search" :description="messages.searchDescription"
@@ -869,15 +941,26 @@ const bodyProps = computed(() => ({
     >
       <template #content>
         <ListboxRoot
-          v-if="!creatable"
           :model-value="rekaSelection" :multiple="multiple" :disabled="disabled"
           :data-selaras-theme="themeBindings['data-selaras-theme']" :data-selaras-mode="themeBindings['data-selaras-mode']" :style="themeBindings.style" :data-selaras-color="colorRoleMarker" v-bind="mobileContentProps"
+          @pointerdown.capture="startSuggestionPointer"
+          @keydown.capture="onSearchKeydown"
           @update:model-value="onModalSelection"
         >
-          <ComboboxSelectBody ref="modalBody" v-bind="bodyProps" listbox @update:search-text="searchText = $event">
-            <template v-for="slotName in ['header', 'filter-icon', 'empty', 'empty-filter', 'footer'].filter((slotName) => $slots[slotName])" #[slotName]>
+          <ComboboxSelectBody ref="modalBody" v-bind="bodyProps" :search-input-props="modalSearchInputProps" listbox @update:search-text="searchText = $event">
+            <template v-for="slotName in ['filter-icon', 'empty', 'empty-filter', 'footer'].filter((slotName) => $slots[slotName])" #[slotName]>
               <slot :name="slotName" />
             </template>
+            <template #header>
+              <slot name="header" />
+              <div v-if="creatable && multiple && selectedOptions.length" class="flex flex-wrap gap-1.5 px-3 pt-3">
+                <template v-if="displayMode === 'chip'">
+                  <Chip v-for="option in visibleOptions" :key="option.key" :label="option.label" size="sm" removable @remove="removeValue(option.value)" />
+                  <span v-if="overflowOptions.length" v-bind="chipOverflowProps">{{ messages.moreItems(overflowOptions.length) }}</span>
+                </template>
+                <span v-else v-bind="valueProps">{{ commaText }}</span>
+              </div>
+            </template>
             <template v-if="$slots.item" #item="scope">
               <slot name="item" v-bind="scope" />
             </template>
@@ -886,10 +969,13 @@ const bodyProps = computed(() => ({
             </template>
           </ComboboxSelectBody>
         </ListboxRoot>
-        <div v-if="!creatable" class="flex justify-end p-2">
-          <DialogClose as-child>
+        <div v-if="creatable || multiple" class="flex justify-end p-2">
+          <Button v-if="creatable" variant="ghost" color="neutral" @click="finishMobileAutocomplete">
+            {{ messages.done }}
+          </Button>
+          <DialogClose v-else as-child>
             <Button variant="ghost" color="neutral">
-              {{ multiple ? messages.done : messages.cancel }}
+              {{ messages.done }}
             </Button>
           </DialogClose>
         </div>
@@ -913,7 +999,7 @@ const bodyProps = computed(() => ({
       type="hidden"
       :name="name ?? field?.name"
       :form="form"
-      :value="String(value)"
+      :value="serializeFormValue(value)"
       :disabled="disabled"
       :required="required && !disabled && index === 0"
     >

package/dist/runtime/internal/ComboboxSelectBase.vue.d.ts

@@ -3,6 +3,7 @@ import type { SelectThemeSlots } from '../theme/select.js';
 import type { RoundedArrowConfig } from '../utils/arrow.js';
 import type { ColorRole } from '../utils/color-registry.js';
 import type { OverlayPortal, OverlayPositioning } from '../utils/overlay.js';
+import type { SelectModelValue } from '../utils/select-contracts.js';
 import type { UiProp } from '../utils/ui.js';
 import type { SelectItems, SelectOption } from './combobox-select.js';
 import { selectTheme } from '../theme/select.js';
@@ -18,9 +19,9 @@ export interface ComboboxSelectBaseProps {
     open?: boolean;
     /** Initial uncontrolled open state. */
     defaultOpen?: boolean;
-    modelValue?: string | number | (string | number)[];
+    modelValue?: SelectModelValue | SelectModelValue[];
     /** Initial uncontrolled selection and native form reset target. */
-    defaultValue?: string | number | (string | number)[];
+    defaultValue?: SelectModelValue | SelectModelValue[];
     multiple?: boolean;
     searchable?: boolean;
     virtualize?: boolean | {
@@ -54,26 +55,26 @@ export interface ComboboxSelectBaseProps {
 }
 export interface ComboboxSelectBaseEmits {
     'update:open': [value: boolean];
-    'update:modelValue': [value: string | number | (string | number)[] | undefined];
+    'update:modelValue': [value: SelectModelValue | SelectModelValue[] | undefined];
     'update:searchTerm': [value: string];
 }
 declare var __VLS_43: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_98: {}, __VLS_105: {}, __VLS_120: {}, __VLS_144: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_164: {
+    item: SelectModelValue | SelectOption<SelectModelValue>;
+}, __VLS_98: {}, __VLS_105: {}, __VLS_120: {}, __VLS_136: {}, __VLS_143: {}, __VLS_150: {}, __VLS_174: {
+    item: SelectModelValue | SelectOption<SelectModelValue>;
+}, __VLS_194: {
     selected: import("./combobox-select.js").ResolvedOption | undefined;
-}, __VLS_175: {}, __VLS_182: {}, __VLS_189: {}, __VLS_219: {}, __VLS_222: {}, __VLS_225: {}, __VLS_228: {}, __VLS_231: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_234: {
-    group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_237: {}, __VLS_273: string, __VLS_274: {}, __VLS_277: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_280: {
-    group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
+}, __VLS_205: {}, __VLS_212: {}, __VLS_219: {}, __VLS_249: {}, __VLS_252: {}, __VLS_255: {}, __VLS_258: {}, __VLS_261: {
+    item: SelectModelValue | SelectOption<SelectModelValue>;
+}, __VLS_264: {
+    group: import("./combobox-select.js").SelectOptionGroup<SelectModelValue>;
+}, __VLS_267: {}, __VLS_305: string, __VLS_306: {}, __VLS_309: {}, __VLS_319: {
+    item: SelectModelValue | SelectOption<SelectModelValue>;
+}, __VLS_322: {
+    group: import("./combobox-select.js").SelectOptionGroup<SelectModelValue>;
 };
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_273>]?: (props: typeof __VLS_274) => any;
+    [K in NonNullable<typeof __VLS_305>]?: (props: typeof __VLS_306) => any;
 } & {
     item?: (props: typeof __VLS_43) => any;
 } & {
@@ -83,40 +84,48 @@ type __VLS_Slots = {} & {
 } & {
     'dropdown-icon'?: (props: typeof __VLS_120) => any;
 } & {
-    item?: (props: typeof __VLS_144) => any;
+    'clear-icon'?: (props: typeof __VLS_136) => any;
 } & {
-    value?: (props: typeof __VLS_164) => any;
+    'loading-icon'?: (props: typeof __VLS_143) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_175) => any;
+    'dropdown-icon'?: (props: typeof __VLS_150) => any;
 } & {
-    'loading-icon'?: (props: typeof __VLS_182) => any;
+    item?: (props: typeof __VLS_174) => any;
 } & {
-    'dropdown-icon'?: (props: typeof __VLS_189) => any;
+    value?: (props: typeof __VLS_194) => any;
 } & {
-    header?: (props: typeof __VLS_219) => any;
+    'clear-icon'?: (props: typeof __VLS_205) => any;
 } & {
-    'filter-icon'?: (props: typeof __VLS_222) => any;
+    'loading-icon'?: (props: typeof __VLS_212) => any;
 } & {
-    empty?: (props: typeof __VLS_225) => any;
+    'dropdown-icon'?: (props: typeof __VLS_219) => any;
 } & {
-    'empty-filter'?: (props: typeof __VLS_228) => any;
+    header?: (props: typeof __VLS_249) => any;
 } & {
-    item?: (props: typeof __VLS_231) => any;
+    'filter-icon'?: (props: typeof __VLS_252) => any;
 } & {
-    group?: (props: typeof __VLS_234) => any;
+    empty?: (props: typeof __VLS_255) => any;
 } & {
-    footer?: (props: typeof __VLS_237) => any;
+    'empty-filter'?: (props: typeof __VLS_258) => any;
 } & {
-    item?: (props: typeof __VLS_277) => any;
+    item?: (props: typeof __VLS_261) => any;
 } & {
-    group?: (props: typeof __VLS_280) => any;
+    group?: (props: typeof __VLS_264) => any;
+} & {
+    footer?: (props: typeof __VLS_267) => any;
+} & {
+    header?: (props: typeof __VLS_309) => any;
+} & {
+    item?: (props: typeof __VLS_319) => any;
+} & {
+    group?: (props: typeof __VLS_322) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | number | (string | number)[] | undefined) => any;
+    "update:modelValue": (value: SelectModelValue | SelectModelValue[] | undefined) => any;
     "update:open": (value: boolean) => any;
     "update:searchTerm": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<ComboboxSelectBaseProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | number | (string | number)[] | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: SelectModelValue | SelectModelValue[] | undefined) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/internal/ComboboxSelectBody.d.vue.ts

@@ -1,3 +1,4 @@
+import type { SelectModelValue } from '../utils/select-contracts.js';
 import type { ResolvedItemOption, SelectItems, SelectOption } from './combobox-select.js';
 export interface ComboboxSelectBodyProps {
     listbox?: boolean;
@@ -5,7 +6,7 @@ export interface ComboboxSelectBodyProps {
     creatable?: boolean;
     multiple?: boolean;
     forceSelection?: boolean;
-    selectedValues?: (string | number)[];
+    selectedValues?: SelectModelValue[];
     searchText: string;
     displayValue: (value: unknown) => string;
     items: SelectItems;
@@ -15,9 +16,9 @@ export interface ComboboxSelectBodyProps {
         overscan: number;
     } | null;
     virtualizedOptions: ResolvedItemOption[];
-    toOption: (entry: SelectOption) => ResolvedItemOption;
+    toOption: (entry: SelectOption | SelectModelValue) => ResolvedItemOption;
     groupOptions: (group: {
-        items: readonly SelectOption[];
+        items: readonly (SelectOption | SelectModelValue)[];
     }) => ResolvedItemOption[];
     onSearchKeydown: (event: KeyboardEvent) => void;
     onSearchBlur: () => void;
@@ -34,13 +35,13 @@ export interface ComboboxSelectBodyEmits {
 }
 declare function focusSearch(): boolean;
 declare var __VLS_1: {}, __VLS_3: {}, __VLS_21: {}, __VLS_29: {}, __VLS_31: {}, __VLS_39: {}, __VLS_61: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+    item: SelectModelValue | SelectOption<SelectModelValue>;
 }, __VLS_92: {
-    group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
+    group: import("./combobox-select.js").SelectOptionGroup<SelectModelValue>;
 }, __VLS_102: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+    item: SelectModelValue | SelectOption<SelectModelValue>;
 }, __VLS_123: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+    item: SelectModelValue | SelectOption<SelectModelValue>;
 }, __VLS_136: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_1) => any;
@@ -67,6 +68,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBodyProps, {
     focusSearch: typeof focusSearch;
+    searchElement: import("vue").ComputedRef<HTMLInputElement | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:searchText": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<ComboboxSelectBodyProps> & Readonly<{

package/dist/runtime/internal/ComboboxSelectBody.vue

@@ -71,7 +71,7 @@ const createText = computed(() => {
 });
 const virtualOptions = computed(() => {
   const options = props.listbox ? visibleOptions.value : props.virtualizedOptions;
-  return createText.value ? [{ value: createText.value, label: messages.value.createOption(createText.value), disabled: false, raw: void 0 }, ...options] : options;
+  return createText.value ? [{ value: createText.value, key: `create:${createText.value}`, label: messages.value.createOption(createText.value), disabled: false, raw: void 0 }, ...options] : options;
 });
 function onItemSelect(event, value) {
   if (!props.creatable || !props.multiple || !props.selectedValues?.includes(value))
@@ -90,13 +90,13 @@ function focusSearch() {
   element.focus();
   return true;
 }
-defineExpose({ focusSearch });
+defineExpose({ focusSearch, searchElement: computed(() => searchInput.value?.$el) });
 </script>
 
 <template>
   <slot name="header" />
 
-  <div v-if="searchable && !creatable" v-bind="searchWrapperProps">
+  <div v-if="searchable && (!creatable || listbox)" v-bind="searchWrapperProps">
     <slot name="filter-icon">
       <Icon :name="icons.search" class="size-4 text-[var(--selaras-resolved-text-muted)]" />
     </slot>
@@ -148,12 +148,12 @@ defineExpose({ focusSearch });
           :key="String(virtualItem.key)"
           :value="option.value"
           :disabled="option.disabled"
-          :data-selaras-create-option="!option.raw || void 0"
+          :data-selaras-create-option="option.raw === void 0 || void 0"
           :style="{ position: 'absolute', top: 0, left: 0, right: 0, transform: `translateY(${virtualItem.start}px)`, height: `${virtualItem.size}px` }"
           v-bind="itemProps"
           @select="onItemSelect($event, option.value)"
         >
-          <template v-if="!option.raw">
+          <template v-if="option.raw === void 0">
             {{ option.label }}
           </template>
           <template v-else>
@@ -182,7 +182,7 @@ defineExpose({ focusSearch });
           <component
             :is="primitives.item"
             v-for="option in groupOptions(entry).filter(matches)"
-            :key="option.value"
+            :key="option.key"
             :value="option.value"
             :disabled="option.disabled"
             v-bind="itemProps"