@destyler/combobox 0.0.3 → 0.0.4

package/dist/component.mjs

@@ -1,31 +1,25 @@
-import { defineComponent, h, mergeProps, toRefs, ref, computed, watch, nextTick, onMounted, withDirectives, withKeys } from 'vue';
-import { DestylerPrimitive } from '@destyler/primitive';
-import { useForwardExpose, useDirection, useVModel, useFormControl, useId, useBodyScrollLock, useHideOthers, useForwardProps, useForwardPropsEmits, useMutationObserver } from '@destyler/composition';
-import { DestylerPopperAnchor, DestylerPopperRoot, DestylerPopperContent, DestylerPopperArrow } from '@destyler/popper';
-import { createContext, computedWithControl, handleAndDispatchCustomEvent } from '@destyler/shared';
+import { defineComponent, h, mergeProps, toRefs, ref, watch, computed, nextTick, onMounted, withDirectives, withKeys } from 'vue';
+import { primitiveProps, Primitive } from '@destyler/primitive';
+import { useForwardExpose, useDirection, useVModel, useFormControl, useBodyScrollLock, useHideOthers, useForwardProps, useForwardPropsEmits, useId, useMutationObserver } from '@destyler/composition';
+import { PopperAnchor, PopperRoot, popperContentProps, PopperContent, PopperArrow } from '@destyler/popper';
+import { popperArrowProps } from '@destyler/popper/component';
+import { createContext, handleAndDispatchCustomEvent } from '@destyler/shared';
 import isEqual from 'fast-deep-equal';
-import { createCollection, DestylerCollectionSlot, DestylerCollectionItem } from '@destyler/collection';
-import { DestylerVisuallyhiddenInput } from '@destyler/visually-hidden/dist/component';
-import { DestylerDismissableLayer } from '@destyler/dismissable-layer';
+import { VisuallyHiddenInput } from '@destyler/visually-hidden/component';
+import { createCollection } from '@destyler/collection/composition';
+import { CollectionSlot, CollectionItem } from '@destyler/collection';
+import { dismissableLayerProps, DismissableLayer } from '@destyler/dismissable-layer';
+import { dismissableLayerEmits } from '@destyler/dismissable-layer/component';
 import { BindOnceDirective } from '@destyler/directives';
-import { DestylerPresence } from '@destyler/presence';
-import { DestylerTeleport } from '@destyler/teleport';
+import { Presence } from '@destyler/presence';
+import { teleportPrimitiveProps, TeleportPrimitive } from '@destyler/teleport';
 
-const destylerComboboxAnchorProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
+const comboboxAnchorProps = {
+  ...primitiveProps
 };
-const DestylerComboboxAnchor = defineComponent({
+const ComboboxAnchor = defineComponent({
   name: "DestylerComboboxAnchor",
-  props: destylerComboboxAnchorProps,
+  props: comboboxAnchorProps,
   setup() {
     const { forwardRef } = useForwardExpose();
     return {
@@ -33,10 +27,10 @@ const DestylerComboboxAnchor = defineComponent({
     };
   },
   render() {
-    return h(DestylerPopperAnchor, {
+    return h(PopperAnchor, {
       asChild: true
     }, () => {
-      return h(DestylerPrimitive, mergeProps(this.$attrs, {
+      return h(Primitive, mergeProps(this.$attrs, {
         ref: (el) => this.forwardRef(el),
         as: this.$props.as,
         asChild: this.$props.asChild
@@ -47,68 +41,124 @@ const DestylerComboboxAnchor = defineComponent({
   }
 });
 
-const destylerComboboxRootProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
+const comboboxRootProps = {
+  ...primitiveProps,
+  /**
+   * The controlled value of the Combobox. Can be binded-with with `v-model`.
+   *
+   * @default undefined
+   */
   modelValue: {
-    type: [String, Number, Boolean, Object],
-    required: false
+    type: [String, Number, Boolean, Object, Array],
+    required: false,
+    default: void 0
   },
+  /**
+   * The value of the combobox when initially rendered.
+   * Use when you do not need to control the state of the Combobox
+   *
+   * @default undefined
+   */
   defaultValue: {
-    type: [String, Number, Boolean, Object],
-    required: false
+    type: [String, Number, Boolean, Object, Array],
+    required: false,
+    default: void 0
   },
+  /**
+   * The controlled open state of the Combobox. Can be binded-with with `v-model:open`.
+   *
+   * @default undefined
+   */
   open: {
     type: Boolean,
     required: false,
     default: void 0
   },
+  /**
+   * The open state of the combobox when it is initially rendered.
+   * Use when you do not need to control its open state.
+   */
   defaultOpen: {
     type: Boolean,
     required: false
   },
+  /**
+   * The controlled search term of the Combobox.
+   * Can be binded-with with `v-model:searchTerm`.
+   */
   searchTerm: {
     type: String,
     required: false
   },
+  /**
+   * Whether multiple options can be selected or not.
+   *
+   * @default false
+   */
   multiple: {
     type: Boolean,
-    required: false
+    required: false,
+    default: false
   },
+  /**
+   * When `true`, prevents the user from interacting with Combobox.
+   *
+   * @default false
+   */
   disabled: {
     type: Boolean,
-    required: false
+    required: false,
+    default: false
   },
+  /**
+   * The name of the Combobox. Submitted with its owning form as part of a name/value pair.
+   */
   name: {
     type: String,
     required: false
   },
+  /**
+   * The reading direction of the combobox when applicable.
+   */
   dir: {
     type: String,
     required: false
   },
+  /**
+   * The custom filter function for filtering `ComboboxItem`.
+   */
   filterFunction: {
     type: Function,
     required: false
   },
+  /**
+   * The display value of input for selected item. Does not work with `multiple`.
+   */
   displayValue: {
     type: Function,
     required: false
   }
 };
+const comboboxRootEmits = {
+  /**
+   * Event handler called when the value changes.
+   */
+  "update:modelValue": (_value) => true,
+  /**
+   * Event handler called when the open state of the combobox changes.
+   */
+  "update:open": (_value) => true,
+  /**
+   * Event handler called when the searchTerm of the combobox changes.
+   */
+  "update:searchTerm": (_value) => true
+};
 const [injectComboboxRootContext, provideComboboxRootContext] = createContext("DestylerComboboxRoot");
-const DestylerComboboxRoot = defineComponent({
+const ComboboxRoot = defineComponent({
   name: "DestylerComboboxRoot",
-  props: destylerComboboxRootProps,
-  emits: ["update:modelValue", "update:open", "update:searchTerm"],
+  props: comboboxRootProps,
+  emits: comboboxRootEmits,
+  slots: Object,
   setup(props, { emit }) {
     const { multiple, disabled, dir: propDir } = toRefs(props);
     const dir = useDirection(propDir);
@@ -126,11 +176,11 @@ const DestylerComboboxRoot = defineComponent({
       passive: props.open === void 0
     });
     const selectedValue = ref();
-    const isUserInputted = ref(false);
     const inputElement = ref();
     const contentElement = ref();
     const { forwardRef, currentElement: parentElement } = useForwardExpose();
     const { getItems, reactiveItems, itemMapSize } = createCollection("data-destyler-combobox-item");
+    const isUserInputted = ref(false);
     async function onOpenChange(val) {
       open.value = val;
       await nextTick();
@@ -157,20 +207,22 @@ const DestylerComboboxRoot = defineComponent({
         onOpenChange(false);
       }
     }
-    const options = computedWithControl(() => itemMapSize.value, () => {
-      return getItems().map((i) => i.value);
-    });
+    const options = ref([]);
+    watch(() => itemMapSize.value, () => {
+      options.value = getItems().map((i) => i.value);
+    }, { immediate: true });
     const filteredOptions = computed(() => {
       if (isUserInputted.value) {
         if (props.filterFunction)
           return props.filterFunction(options.value, searchTerm.value);
-        else if (typeof options.value[0] === "string")
-          return options.value.filter((i) => i.toLowerCase().includes(searchTerm.value?.toLowerCase()));
+        const optionsWithTypeString = options.value.filter((i) => typeof i === "string");
+        if (optionsWithTypeString.length)
+          return optionsWithTypeString.filter((i) => i.toLowerCase().includes(searchTerm.value?.toLowerCase()));
       }
       return options.value;
     });
     function resetSearchTerm() {
-      if (!multiple.value && modelValue.value) {
+      if (!multiple.value && modelValue.value && !Array.isArray(modelValue.value)) {
         if (props.displayValue)
           searchTerm.value = props.displayValue(modelValue.value);
         else if (typeof modelValue.value !== "object")
@@ -185,7 +237,9 @@ const DestylerComboboxRoot = defineComponent({
     const selectedElement = computed(() => {
       return reactiveItems.value.find((i) => i.value === selectedValue.value)?.ref;
     });
-    watch(modelValue, async () => {
+    const stringifiedModelValue = computed(() => JSON.stringify(modelValue.value));
+    watch(stringifiedModelValue, async () => {
+      await nextTick();
       await nextTick();
       resetSearchTerm();
     }, { immediate: true });
@@ -210,7 +264,7 @@ const DestylerComboboxRoot = defineComponent({
       open,
       onOpenChange,
       filteredOptions,
-      contentId: useId(),
+      contentId: "",
       inputElement,
       onInputElementChange: (val) => inputElement.value = val,
       onInputNavigation: async (val) => {
@@ -244,9 +298,9 @@ const DestylerComboboxRoot = defineComponent({
     };
   },
   render() {
-    return h(DestylerPopperRoot, {}, {
+    return h(PopperRoot, null, {
       default: () => {
-        return h(DestylerPrimitive, mergeProps(this.$attrs, {
+        return h(Primitive, mergeProps(this.$attrs, {
           ref: (el) => this.forwardRef(el),
           style: {
             pointerEvents: this.open ? "auto" : void 0
@@ -258,7 +312,7 @@ const DestylerComboboxRoot = defineComponent({
           default: () => {
             return [
               this.$slots.default?.({ open: this.open, modelValue: this.modelValue }),
-              this.isFormControl && this.$props.name ? h(DestylerVisuallyhiddenInput, {
+              this.isFormControl && this.$props.name ? h(VisuallyHiddenInput, {
                 name: this.$props.name,
                 value: this.modelValue
               }) : null
@@ -270,111 +324,47 @@ const DestylerComboboxRoot = defineComponent({
   }
 });
 
-const destylerComboboxContentImplProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  side: {
-    type: String,
-    required: false,
-    default: "bottom"
-  },
-  sideOffset: {
-    type: Number,
-    required: false,
-    default: 0
-  },
-  align: {
-    type: String,
-    required: false,
-    default: "center"
-  },
-  alignOffset: {
-    type: Number,
-    required: false,
-    default: 0
-  },
-  avoidCollisions: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  collisionBoundary: {
-    type: [Object, Array, null],
-    required: false,
-    default: () => []
-  },
-  collisionPadding: {
-    type: [Number, Object],
-    required: false,
-    default: 0
-  },
-  arrowPadding: {
-    type: Number,
-    required: false,
-    default: 0
-  },
-  sticky: {
-    type: String,
-    required: false,
-    default: "partial"
-  },
-  hideWhenDetached: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  updatePositionStrategy: {
-    type: String,
-    required: false,
-    default: "optimized"
-  },
-  onPlaced: {
-    type: Function,
-    required: false
-  },
-  prioritizePosition: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  disableOutsidePointerEvents: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  isDismissable: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
+const comboboxContentImplProps = {
+  ...dismissableLayerProps,
+  ...popperContentProps,
+  /**
+   * The positioning mode to use, <br>
+   * `inline` is the default and you can control the position using CSS. <br>
+   * `popper` positions content in the same way as our other primitives, for example `Popover` or `DropdownMenu`.
+   *
+   * @default inline
+   */
   position: {
     type: String,
     required: false,
     default: "inline"
   },
+  /**
+   * The document.body will be lock, and scrolling will be disabled.
+   */
   bodyLock: {
     type: Boolean,
     required: false
   },
+  /**
+   * Allow component to be dismissableLayer.
+   *
+   * @default true
+   */
   dismissable: {
     type: Boolean,
     required: false,
     default: true
   }
 };
+const comboboxContentImplEmits = {
+  ...dismissableLayerEmits
+};
 const [injectComboboxContentContext, provideComboboxContentContext] = createContext("DestylerComboboxContent");
-const DestylerComboboxContentImpl = defineComponent({
+const ComboboxContentImpl = defineComponent({
   name: "DestylerComboboxContentImpl",
-  props: destylerComboboxContentImplProps,
-  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  props: comboboxContentImplProps,
+  emits: comboboxContentImplEmits,
   setup(props) {
     const { position } = toRefs(props);
     const rootContext = injectComboboxRootContext();
@@ -396,26 +386,27 @@ const DestylerComboboxContentImpl = defineComponent({
     });
     const popperStyle = {
       "boxSizing": "border-box",
-      "--destyler_combobox_content_transform_origin": "var(--destyler_popper_transform_origin)",
-      "--destyler_combobox_content_available_width": "var(--destyler_popper_available_width)",
-      "--destyler_combobox_content_available_height": "var(--destyler_popper_available_height)",
-      "--destyler_combobox_trigger_width": "var(--destyler_popper_anchor_width)",
-      "--destyler_combobox_trigger_height": "var(--destyler_popper_anchor_height)"
+      "--destyler-combobox-content-transform-origin": "var(--destyler-popper-transform-origin)",
+      "--destyler-combobox-content-available-width": "var(--destyler-popper-available-width)",
+      "--destyler-combobox-content-available-height": "var(--destyler-popper-available-height)",
+      "--destyler-combobox-trigger-width": "var(--destyler-popper-anchor-width)",
+      "--destyler-combobox-trigger-height": "var(--destyler-popper-anchor-height)"
     };
     provideComboboxContentContext({ position });
     return {
       rootContext,
       popperStyle,
       forwardedProps,
+      pickedProps,
       forwardRef,
       handleLeave
     };
   },
   render() {
-    return h(DestylerCollectionSlot, null, {
+    return h(CollectionSlot, null, {
       default: () => {
         return [
-          this.$props.dismissable ? h(DestylerDismissableLayer, mergeProps(this.$attrs, this.forwardedProps, {
+          this.$props.dismissable ? h(DismissableLayer, {
             asChild: true,
             disableOutsidePointerEvents: this.$props.disableOutsidePointerEvents,
             onDismiss: () => {
@@ -437,9 +428,9 @@ const DestylerComboboxContentImpl = defineComponent({
                 event.preventDefault();
               this.$emit("pointerDownOutside", event);
             }
-          }), {
+          }, {
             default: () => {
-              return withDirectives(h(this.$props.position === "popper" ? DestylerPopperContent : DestylerPrimitive, {
+              return withDirectives(h(this.$props.position === "popper" ? PopperContent : Primitive, mergeProps(this.$attrs, this.forwardedProps, {
                 "ref": (el) => this.forwardRef(el),
                 "role": "listbox",
                 "data-state": this.rootContext.open.value ? "open" : "closed",
@@ -452,13 +443,13 @@ const DestylerComboboxContentImpl = defineComponent({
                 "onPointerleave": () => {
                   this.handleLeave();
                 }
-              }, {
+              }), {
                 default: () => this.$slots.default?.()
               }), [
                 [BindOnceDirective, { id: this.rootContext.contentId }]
               ]);
             }
-          }) : withDirectives(h(this.$props.position === "popper" ? DestylerPopperContent : DestylerPrimitive, {
+          }) : withDirectives(h(this.$props.position === "popper" ? PopperContent : Primitive, mergeProps(this.$attrs, this.pickedProps, {
             "ref": (el) => this.forwardRef(el),
             "role": "listbox",
             "data-state": this.rootContext.open.value ? "open" : "closed",
@@ -471,7 +462,7 @@ const DestylerComboboxContentImpl = defineComponent({
             "onPointerleave": () => {
               this.handleLeave();
             }
-          }, {
+          }), {
             default: () => this.$slots.default?.()
           }), [
             [BindOnceDirective, { id: this.rootContext.contentId }]
@@ -482,31 +473,12 @@ const DestylerComboboxContentImpl = defineComponent({
   }
 });
 
-const destylerComboboxArrowProps = {
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  width: {
-    type: Number,
-    required: false,
-    default: 10
-  },
-  height: {
-    type: Number,
-    required: false,
-    default: 5
-  },
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "svg"
-  }
+const comboboxArrowProps = {
+  ...popperArrowProps
 };
-const DestylerComboboxArrow = defineComponent({
+const ComboboxArrow = defineComponent({
   name: "DestylerComboboxArrow",
-  props: destylerComboboxArrowProps,
+  props: comboboxArrowProps,
   setup() {
     useForwardExpose();
     const rootContext = injectComboboxRootContext();
@@ -518,25 +490,25 @@ const DestylerComboboxArrow = defineComponent({
   },
   render() {
     if (this.rootContext.open.value && this.contentContext.position.value === "popper")
-      return h(DestylerPopperArrow, this.$props, () => this.$slots.default?.());
+      return h(PopperArrow, this.$props, () => this.$slots.default?.());
+    else
+      return null;
   }
 });
 
-const destylerComboboxCancelProps = {
+const comboboxCancelProps = {
+  ...primitiveProps,
+  /**
+   * @default button
+   */
   as: {
-    type: [String, Object],
-    required: false,
+    ...primitiveProps.as,
     default: "button"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
   }
 };
-const DestylerComboboxCancel = defineComponent({
+const ComboboxCancel = defineComponent({
   name: "DestylerComboboxCancel",
-  props: destylerComboboxCancelProps,
+  props: comboboxCancelProps,
   setup() {
     useForwardExpose();
     const rootContext = injectComboboxRootContext();
@@ -550,7 +522,7 @@ const DestylerComboboxCancel = defineComponent({
     };
   },
   render() {
-    return h(DestylerPrimitive, mergeProps(this.$props, {
+    return h(Primitive, mergeProps(this.$props, {
       type: this.$props.as === "button" ? "button" : void 0,
       tabindex: "-1",
       onClick: () => {
@@ -560,21 +532,29 @@ const DestylerComboboxCancel = defineComponent({
   }
 });
 
-const destylerComboboxContentProps = {
-  ...destylerComboboxContentImplProps,
+const comboboxContentProps = {
+  ...comboboxContentImplProps,
+  /**
+   * Used to force mounting when more control is needed.
+   * Useful when controlling animation with Vue animation libraries.
+   */
   forceMount: {
     type: Boolean,
     required: false
   }
 };
-const DestylerComboboxContent = defineComponent({
+const comboboxContentEmits = {
+  ...comboboxContentImplEmits
+};
+const ComboboxContent = defineComponent({
   name: "DestylerComboboxContent",
-  props: destylerComboboxContentProps,
-  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  props: comboboxContentProps,
+  emits: comboboxContentEmits,
   setup(props, { emit }) {
     const forwarded = useForwardPropsEmits(props, emit);
     const { forwardRef } = useForwardExpose();
     const rootContext = injectComboboxRootContext();
+    rootContext.contentId || (rootContext.contentId = useId(void 0, "destyler-combobox-content"));
     return {
       forwardRef,
       forwarded,
@@ -582,29 +562,20 @@ const DestylerComboboxContent = defineComponent({
     };
   },
   render() {
-    return h(DestylerPresence, {
+    return h(Presence, {
       present: this.$props.forceMount || this.rootContext.open.value
-    }, () => h(DestylerComboboxContentImpl, mergeProps(this.$attrs, this.forwarded, {
+    }, () => h(ComboboxContentImpl, mergeProps(this.$attrs, this.forwarded, {
       ref: (el) => this.forwardRef(el)
     }), () => this.$slots.default?.()));
   }
 });
 
-const destylerComboboxEmptyProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "button"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
+const comboboxEmptyProps = {
+  ...primitiveProps
 };
-const DestylerComboboxEmpty = defineComponent({
+const ComboboxEmpty = defineComponent({
   name: "DestylerComboboxEmpty",
-  props: destylerComboboxEmptyProps,
+  props: comboboxEmptyProps,
   setup() {
     useForwardExpose();
     const rootContext = injectComboboxRootContext();
@@ -616,32 +587,23 @@ const DestylerComboboxEmpty = defineComponent({
   },
   render() {
     if (this.isEmpty) {
-      return h(DestylerPrimitive, this.$props, {
+      return h(Primitive, this.$props, {
         default: () => this.$slots.default ? this.$slots.default?.() : "No options"
       });
     }
   }
 });
 
-const destylerComboboxGroupProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
+const comboboxGroupProps = {
+  ...primitiveProps
 };
 const [injectComboboxGroupContext, provideComboboxGroupContext] = createContext("DestylerComboboxGroup");
-const DestylerComboboxGroup = defineComponent({
+const ComboboxGroup = defineComponent({
   name: "DestylerComboboxGroup",
-  props: destylerComboboxGroupProps,
+  props: comboboxGroupProps,
   setup() {
     const { currentRef, currentElement } = useForwardExpose();
-    const id = useId();
+    const id = useId(void 0, "destyler-combobox-group");
     const rootContext = injectComboboxRootContext();
     const hasOptions = ref(false);
     function checkCollectionItem() {
@@ -652,12 +614,16 @@ const DestylerComboboxGroup = defineComponent({
     }
     useMutationObserver(currentElement, () => {
       checkCollectionItem();
-    }, { childList: true });
+    }, {
+      childList: true
+    });
     watch(() => rootContext.searchTerm.value, () => {
       nextTick(() => {
         checkCollectionItem();
       });
-    }, { immediate: true });
+    }, {
+      immediate: true
+    });
     provideComboboxGroupContext({
       id
     });
@@ -668,7 +634,7 @@ const DestylerComboboxGroup = defineComponent({
     };
   },
   render() {
-    return h(DestylerPrimitive, mergeProps(this.$props, {
+    return h(Primitive, mergeProps(this.$props, {
       "ref": "currentRef",
       "role": "group",
       "aria-labelledby": this.id,
@@ -679,34 +645,45 @@ const DestylerComboboxGroup = defineComponent({
   }
 });
 
-const destylerComboboxInputProps = {
+const comboboxInputProps = {
+  ...primitiveProps,
+  /**
+   * @default input
+   */
   as: {
-    type: [String, Object],
-    required: false,
+    ...primitiveProps.as,
     default: "input"
   },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
+  /**
+   * Native input type
+   *
+   * @default text
+   */
   type: {
     type: String,
     required: false,
     default: "text"
   },
+  /**
+   * When `true`, prevents the user from interacting with item
+   */
   disabled: {
     type: Boolean,
     required: false
   },
+  /**
+   * Focus on element when mounted.
+   *
+   * @default false
+   */
   autoFocus: {
     type: Boolean,
     required: false
   }
 };
-const DestylerComboboxInput = defineComponent({
+const ComboboxInput = defineComponent({
   name: "DestylerComboboxInput",
-  props: destylerComboboxInputProps,
+  props: comboboxInputProps,
   setup(props) {
     const rootContext = injectComboboxRootContext();
     const { forwardRef, currentElement } = useForwardExpose();
@@ -748,7 +725,7 @@ const DestylerComboboxInput = defineComponent({
     };
   },
   render() {
-    return h(DestylerPrimitive, {
+    return h(Primitive, {
       "ref": (el) => this.forwardRef(el),
       "as": this.$props.as,
       "asChild": this.$props.asChild,
@@ -788,41 +765,45 @@ const DestylerComboboxInput = defineComponent({
 });
 
 const COMBOBOX_SELECT = "combobox.select";
-const destylerComboboxItemProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
+const comboboxItemProps = {
+  ...primitiveProps,
+  /**
+   * The value given as data when submitted with a `name`.
+   */
   value: {
     type: [String, Number, Boolean, Object],
     required: true
   },
+  /**
+   * When true, prevents the user from interacting with the `item`.
+   */
   disabled: {
     type: Boolean,
     required: false
   }
 };
+const comboboxItemEmits = {
+  /**
+   * Event handler called when the selecting item. <br>
+   * It can be prevented by calling `event.preventDefault`.
+   */
+  select: (_ev) => true
+};
 const [injectComboboxItemContext, provideComboboxItemContext] = createContext("DestylerComboboxItem");
-const DestylerComboboxItem = defineComponent({
+const ComboboxItem = defineComponent({
   name: "DestylerComboboxItem",
-  props: destylerComboboxItemProps,
-  emits: ["select"],
+  props: comboboxItemProps,
+  emits: comboboxItemEmits,
   setup(props, { emit }) {
     const { disabled } = toRefs(props);
     const rootContext = injectComboboxRootContext();
     injectComboboxGroupContext({ id: "", options: ref([]) });
     const { forwardRef } = useForwardExpose();
     const isSelected = computed(
-      () => rootContext.multiple.value && Array.isArray(rootContext.modelValue.value) ? rootContext.modelValue.value?.includes(props.value) : isEqual(rootContext.modelValue?.value, props.value)
+      () => rootContext.multiple.value && Array.isArray(rootContext.modelValue.value) ? rootContext.modelValue.value?.some((val) => isEqual(val, props.value)) : isEqual(rootContext.modelValue?.value, props.value)
     );
     const isFocused = computed(() => isEqual(rootContext.selectedValue.value, props.value));
-    const textId = useId();
+    const textId = useId(void 0, "destyler-combobox-item");
     const isInOption = computed(() => rootContext.isUserInputted.value ? rootContext.searchTerm.value === "" || !!rootContext.filteredOptions.value.find((i) => isEqual(i, props.value)) : true);
     async function handleSelect(ev) {
       emit("select", ev);
@@ -862,9 +843,9 @@ const DestylerComboboxItem = defineComponent({
     };
   },
   render() {
-    return h(DestylerCollectionItem, null, {
+    return h(CollectionItem, null, {
       default: () => {
-        return h(DestylerPrimitive, {
+        return h(Primitive, {
           "ref": (el) => this.forwardRef(el),
           "role": "option",
           "tabindex": "-1",
@@ -892,21 +873,19 @@ const DestylerComboboxItem = defineComponent({
   }
 });
 
-const destylerComboboxItemIndicatorProps = {
+const comboboxItemIndicatorProps = {
+  ...primitiveProps,
+  /**
+   * @default span
+   */
   as: {
-    type: [String, Object],
-    required: false,
+    ...primitiveProps.as,
     default: "span"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
   }
 };
-const DestylerComboboxItemIndicator = defineComponent({
+const ComboboxItemIndicator = defineComponent({
   name: "DestylerComboboxItemIndicator",
-  props: destylerComboboxItemIndicatorProps,
+  props: comboboxItemIndicatorProps,
   setup() {
     useForwardExpose();
     const itemContext = injectComboboxItemContext();
@@ -916,7 +895,7 @@ const DestylerComboboxItemIndicator = defineComponent({
   },
   render() {
     if (this.itemContext.isSelected.value) {
-      return h(DestylerPrimitive, mergeProps(this.$props, {
+      return h(Primitive, mergeProps(this.$props, {
         "aria-hidden": ""
       }), {
         default: () => this.$slots.default?.()
@@ -925,25 +904,19 @@ const DestylerComboboxItemIndicator = defineComponent({
   }
 });
 
-const destylerComboboxLabelProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
+const comboboxLabelProps = {
+  ...primitiveProps,
+  /**
+   * The id of the element the label is associated with.
+   */
   for: {
     type: String,
     required: false
   }
 };
-const DestylerComboboxLabel = defineComponent({
+const ComboboxLabel = defineComponent({
   name: "DestylerComboboxLabel",
-  props: destylerComboboxLabelProps,
+  props: comboboxLabelProps,
   setup() {
     useForwardExpose();
     const groupContext = injectComboboxGroupContext({ id: "" });
@@ -952,7 +925,7 @@ const DestylerComboboxLabel = defineComponent({
     };
   },
   render() {
-    return withDirectives(h(DestylerPrimitive, this.$props, {
+    return withDirectives(h(Primitive, this.$props, {
       default: () => this.$slots.default?.()
     }), [
       [BindOnceDirective, { id: this.groupContext.id }]
@@ -960,77 +933,55 @@ const DestylerComboboxLabel = defineComponent({
   }
 });
 
-const destylerComboboxPortalProps = {
-  to: {
-    type: [String, Object],
-    required: false,
-    default: "body"
-  },
-  disabled: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  forceMount: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
+const comboboxPortalProps = {
+  ...teleportPrimitiveProps
 };
-const DestylerComboboxPortal = defineComponent({
+const ComboboxPortal = defineComponent({
   name: "DestylerComboboxPortal",
-  props: destylerComboboxPortalProps,
+  props: comboboxPortalProps,
   render() {
-    return h(DestylerTeleport, this.$props, {
+    return h(TeleportPrimitive, this.$props, {
       default: () => this.$slots.default?.()
     });
   }
 });
 
-const destylerComboboxSeparatorProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
+const comboboxSeparatorProps = {
+  ...primitiveProps
 };
-const DestylerComboboxSeparator = defineComponent({
+const ComboboxSeparator = defineComponent({
   name: "DestylerComboboxSeparator",
-  props: destylerComboboxSeparatorProps,
+  props: comboboxSeparatorProps,
   setup() {
     useForwardExpose();
   },
   render() {
-    return h(DestylerPrimitive, mergeProps(this.$props, {
+    return h(Primitive, mergeProps(this.$props, {
       "aria-hidden": ""
-    }));
+    }), () => this.$slots.default?.());
   }
 });
 
-const destylerComboboxTriggerProps = {
+const comboboxTriggerProps = {
+  ...primitiveProps,
+  /**
+   * @default button
+   */
   as: {
-    type: [String, Object],
-    required: false,
+    ...primitiveProps.as,
     default: "button"
   },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
+  /**
+   * When `true`, prevents the user from interacting with item.
+   */
   disabled: {
     type: Boolean,
     required: false
   }
 };
-const DestylerComboboxTrigger = defineComponent({
+const ComboboxTrigger = defineComponent({
   name: "DestylerComboboxTrigger",
-  props: destylerComboboxTriggerProps,
+  props: comboboxTriggerProps,
   setup(props) {
     useForwardExpose();
     const rootContext = injectComboboxRootContext();
@@ -1041,7 +992,7 @@ const DestylerComboboxTrigger = defineComponent({
     };
   },
   render() {
-    return h(DestylerPrimitive, mergeProps(this.$props, {
+    return h(Primitive, mergeProps(this.$props, {
       "type": this.$props.as === "button" ? "button" : void 0,
       "tabindex": "-1",
       "aria-label": "Show popup",
@@ -1061,21 +1012,19 @@ const DestylerComboboxTrigger = defineComponent({
   }
 });
 
-const destylerComboboxViewportProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
+const comboboxViewportProps = {
+  ...primitiveProps,
+  /**
+   * Will add `nonce` attribute to the style tag which can be used by Content Security Policy.
+   */
+  nonce: {
+    type: String,
+    required: false
   }
 };
-const DestylerComboboxViewport = defineComponent({
+const ComboboxViewport = defineComponent({
   name: "DestylerComboboxViewport",
-  props: destylerComboboxViewportProps,
+  props: comboboxViewportProps,
   inheritAttrs: false,
   setup() {
     const { forwardRef } = useForwardExpose();
@@ -1085,7 +1034,7 @@ const DestylerComboboxViewport = defineComponent({
   },
   render() {
     return [
-      h(DestylerPrimitive, mergeProps(this.$attrs, {
+      h(Primitive, mergeProps(this.$attrs, this.$props, {
         "ref": (el) => this.forwardRef(el),
         "data-destyler-combobox-viewport": "",
         "role": "presentation",
@@ -1095,8 +1044,9 @@ const DestylerComboboxViewport = defineComponent({
           overflow: "auto"
         }
       }), () => this.$slots.default?.()),
-      h(DestylerPrimitive, {
-        as: "style"
+      h(Primitive, {
+        as: "style",
+        nonce: this.$props.nonce
       }, () => `
       /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
       [data-destyler-combobox-viewport] {
@@ -1112,4 +1062,4 @@ const DestylerComboboxViewport = defineComponent({
   }
 });
 
-export { DestylerComboboxAnchor, DestylerComboboxArrow, DestylerComboboxCancel, DestylerComboboxContent, DestylerComboboxContentImpl, DestylerComboboxEmpty, DestylerComboboxGroup, DestylerComboboxInput, DestylerComboboxItem, DestylerComboboxItemIndicator, DestylerComboboxLabel, DestylerComboboxPortal, DestylerComboboxRoot, DestylerComboboxSeparator, DestylerComboboxTrigger, DestylerComboboxViewport };
+export { ComboboxAnchor, ComboboxArrow, ComboboxCancel, ComboboxContent, ComboboxContentImpl, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxPortal, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport, comboboxAnchorProps, comboboxArrowProps, comboboxCancelProps, comboboxContentEmits, comboboxContentImplEmits, comboboxContentImplProps, comboboxContentProps, comboboxEmptyProps, comboboxGroupProps, comboboxInputProps, comboboxItemEmits, comboboxItemIndicatorProps, comboboxItemProps, comboboxLabelProps, comboboxPortalProps, comboboxRootEmits, comboboxRootProps, comboboxSeparatorProps, comboboxTriggerProps, comboboxViewportProps };