@destyler/combobox 0.0.2 → 0.0.4

package/dist/component.cjs

@@ -4,11 +4,14 @@ const vue = require('vue');
 const primitive = require('@destyler/primitive');
 const composition = require('@destyler/composition');
 const popper = require('@destyler/popper');
+const component$2 = require('@destyler/popper/component');
 const shared = require('@destyler/shared');
 const isEqual = require('fast-deep-equal');
+const component = require('@destyler/visually-hidden/component');
+const composition$1 = require('@destyler/collection/composition');
 const collection = require('@destyler/collection');
-const component = require('@destyler/visually-hidden/dist/component');
 const dismissableLayer = require('@destyler/dismissable-layer');
+const component$1 = require('@destyler/dismissable-layer/component');
 const directives = require('@destyler/directives');
 const presence = require('@destyler/presence');
 const teleport = require('@destyler/teleport');
@@ -17,21 +20,12 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 const isEqual__default = /*#__PURE__*/_interopDefaultCompat(isEqual);
 
-const destylerComboboxAnchorProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
+const comboboxAnchorProps = {
+  ...primitive.primitiveProps
 };
-const DestylerComboboxAnchor = vue.defineComponent({
+const ComboboxAnchor = vue.defineComponent({
   name: "DestylerComboboxAnchor",
-  props: destylerComboboxAnchorProps,
+  props: comboboxAnchorProps,
   setup() {
     const { forwardRef } = composition.useForwardExpose();
     return {
@@ -39,84 +33,138 @@ const DestylerComboboxAnchor = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(popper.DestylerPopperAnchor, {
+    return vue.h(popper.PopperAnchor, {
       asChild: true
-    }, {
-      default: () => {
-        return vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$attrs, {
-          ref: (el) => this.forwardRef(el),
-          as: this.$props.as,
-          asChild: this.$props.asChild
-        }), {
-          default: () => this.$slots.default?.()
-        });
-      }
+    }, () => {
+      return vue.h(primitive.Primitive, vue.mergeProps(this.$attrs, {
+        ref: (el) => this.forwardRef(el),
+        as: this.$props.as,
+        asChild: this.$props.asChild
+      }), {
+        default: () => this.$slots.default?.()
+      });
     });
   }
 });
 
-const destylerComboboxRootProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
+const comboboxRootProps = {
+  ...primitive.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] = shared.createContext("DestylerComboboxRoot");
-const DestylerComboboxRoot = vue.defineComponent({
+const ComboboxRoot = vue.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 } = vue.toRefs(props);
     const dir = composition.useDirection(propDir);
@@ -134,11 +182,11 @@ const DestylerComboboxRoot = vue.defineComponent({
       passive: props.open === void 0
     });
     const selectedValue = vue.ref();
-    const isUserInputted = vue.ref(false);
     const inputElement = vue.ref();
     const contentElement = vue.ref();
     const { forwardRef, currentElement: parentElement } = composition.useForwardExpose();
-    const { getItems, reactiveItems, itemMapSize } = collection.createCollection("data-destyler-combobox-item");
+    const { getItems, reactiveItems, itemMapSize } = composition$1.createCollection("data-destyler-combobox-item");
+    const isUserInputted = vue.ref(false);
     async function onOpenChange(val) {
       open.value = val;
       await vue.nextTick();
@@ -165,20 +213,22 @@ const DestylerComboboxRoot = vue.defineComponent({
         onOpenChange(false);
       }
     }
-    const options = shared.computedWithControl(() => itemMapSize.value, () => {
-      return getItems().map((i) => i.value);
-    });
+    const options = vue.ref([]);
+    vue.watch(() => itemMapSize.value, () => {
+      options.value = getItems().map((i) => i.value);
+    }, { immediate: true });
     const filteredOptions = vue.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")
@@ -193,7 +243,9 @@ const DestylerComboboxRoot = vue.defineComponent({
     const selectedElement = vue.computed(() => {
       return reactiveItems.value.find((i) => i.value === selectedValue.value)?.ref;
     });
-    vue.watch(modelValue, async () => {
+    const stringifiedModelValue = vue.computed(() => JSON.stringify(modelValue.value));
+    vue.watch(stringifiedModelValue, async () => {
+      await vue.nextTick();
       await vue.nextTick();
       resetSearchTerm();
     }, { immediate: true });
@@ -218,7 +270,7 @@ const DestylerComboboxRoot = vue.defineComponent({
       open,
       onOpenChange,
       filteredOptions,
-      contentId: composition.useId(),
+      contentId: "",
       inputElement,
       onInputElementChange: (val) => inputElement.value = val,
       onInputNavigation: async (val) => {
@@ -252,9 +304,9 @@ const DestylerComboboxRoot = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(popper.DestylerPopperRoot, {}, {
+    return vue.h(popper.PopperRoot, null, {
       default: () => {
-        return vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$attrs, {
+        return vue.h(primitive.Primitive, vue.mergeProps(this.$attrs, {
           ref: (el) => this.forwardRef(el),
           style: {
             pointerEvents: this.open ? "auto" : void 0
@@ -266,7 +318,7 @@ const DestylerComboboxRoot = vue.defineComponent({
           default: () => {
             return [
               this.$slots.default?.({ open: this.open, modelValue: this.modelValue }),
-              this.isFormControl && this.$props.name ? vue.h(component.DestylerVisuallyhiddenInput, {
+              this.isFormControl && this.$props.name ? vue.h(component.VisuallyHiddenInput, {
                 name: this.$props.name,
                 value: this.modelValue
               }) : null
@@ -278,111 +330,47 @@ const DestylerComboboxRoot = vue.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 = {
+  ...dismissableLayer.dismissableLayerProps,
+  ...popper.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 = {
+  ...component$1.dismissableLayerEmits
+};
 const [injectComboboxContentContext, provideComboboxContentContext] = shared.createContext("DestylerComboboxContent");
-const DestylerComboboxContentImpl = vue.defineComponent({
+const ComboboxContentImpl = vue.defineComponent({
   name: "DestylerComboboxContentImpl",
-  props: destylerComboboxContentImplProps,
-  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  props: comboboxContentImplProps,
+  emits: comboboxContentImplEmits,
   setup(props) {
     const { position } = vue.toRefs(props);
     const rootContext = injectComboboxRootContext();
@@ -404,26 +392,27 @@ const DestylerComboboxContentImpl = vue.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 vue.h(collection.DestylerCollectionSlot, null, {
+    return vue.h(collection.CollectionSlot, null, {
       default: () => {
         return [
-          this.$props.dismissable ? vue.h(dismissableLayer.DestylerDismissableLayer, vue.mergeProps(this.$attrs, this.forwardedProps, {
+          this.$props.dismissable ? vue.h(dismissableLayer.DismissableLayer, {
             asChild: true,
             disableOutsidePointerEvents: this.$props.disableOutsidePointerEvents,
             onDismiss: () => {
@@ -445,9 +434,9 @@ const DestylerComboboxContentImpl = vue.defineComponent({
                 event.preventDefault();
               this.$emit("pointerDownOutside", event);
             }
-          }), {
+          }, {
             default: () => {
-              return vue.withDirectives(vue.h(this.$props.position === "popper" ? popper.DestylerPopperContent : primitive.DestylerPrimitive, {
+              return vue.withDirectives(vue.h(this.$props.position === "popper" ? popper.PopperContent : primitive.Primitive, vue.mergeProps(this.$attrs, this.forwardedProps, {
                 "ref": (el) => this.forwardRef(el),
                 "role": "listbox",
                 "data-state": this.rootContext.open.value ? "open" : "closed",
@@ -460,13 +449,13 @@ const DestylerComboboxContentImpl = vue.defineComponent({
                 "onPointerleave": () => {
                   this.handleLeave();
                 }
-              }, {
+              }), {
                 default: () => this.$slots.default?.()
               }), [
                 [directives.BindOnceDirective, { id: this.rootContext.contentId }]
               ]);
             }
-          }) : vue.withDirectives(vue.h(this.$props.position === "popper" ? popper.DestylerPopperContent : primitive.DestylerPrimitive, {
+          }) : vue.withDirectives(vue.h(this.$props.position === "popper" ? popper.PopperContent : primitive.Primitive, vue.mergeProps(this.$attrs, this.pickedProps, {
             "ref": (el) => this.forwardRef(el),
             "role": "listbox",
             "data-state": this.rootContext.open.value ? "open" : "closed",
@@ -479,7 +468,7 @@ const DestylerComboboxContentImpl = vue.defineComponent({
             "onPointerleave": () => {
               this.handleLeave();
             }
-          }, {
+          }), {
             default: () => this.$slots.default?.()
           }), [
             [directives.BindOnceDirective, { id: this.rootContext.contentId }]
@@ -490,31 +479,12 @@ const DestylerComboboxContentImpl = vue.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 = {
+  ...component$2.popperArrowProps
 };
-const DestylerComboboxArrow = vue.defineComponent({
+const ComboboxArrow = vue.defineComponent({
   name: "DestylerComboboxArrow",
-  props: destylerComboboxArrowProps,
+  props: comboboxArrowProps,
   setup() {
     composition.useForwardExpose();
     const rootContext = injectComboboxRootContext();
@@ -525,29 +495,26 @@ const DestylerComboboxArrow = vue.defineComponent({
     };
   },
   render() {
-    if (this.rootContext.open.value && this.contentContext.position.value === "popper") {
-      return vue.h(popper.DestylerPopperArrow, this.$props, {
-        default: () => this.$slots.default?.()
-      });
-    }
+    if (this.rootContext.open.value && this.contentContext.position.value === "popper")
+      return vue.h(popper.PopperArrow, this.$props, () => this.$slots.default?.());
+    else
+      return null;
   }
 });
 
-const destylerComboboxCancelProps = {
+const comboboxCancelProps = {
+  ...primitive.primitiveProps,
+  /**
+   * @default button
+   */
   as: {
-    type: [String, Object],
-    required: false,
+    ...primitive.primitiveProps.as,
     default: "button"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
   }
 };
-const DestylerComboboxCancel = vue.defineComponent({
+const ComboboxCancel = vue.defineComponent({
   name: "DestylerComboboxCancel",
-  props: destylerComboboxCancelProps,
+  props: comboboxCancelProps,
   setup() {
     composition.useForwardExpose();
     const rootContext = injectComboboxRootContext();
@@ -561,33 +528,39 @@ const DestylerComboboxCancel = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$props, {
+    return vue.h(primitive.Primitive, vue.mergeProps(this.$props, {
       type: this.$props.as === "button" ? "button" : void 0,
       tabindex: "-1",
       onClick: () => {
         this.handleClick();
       }
-    }), {
-      default: () => this.$slots.default?.()
-    });
+    }), () => this.$slots.default?.());
   }
 });
 
-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 = vue.defineComponent({
+const comboboxContentEmits = {
+  ...comboboxContentImplEmits
+};
+const ComboboxContent = vue.defineComponent({
   name: "DestylerComboboxContent",
-  props: destylerComboboxContentProps,
-  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  props: comboboxContentProps,
+  emits: comboboxContentEmits,
   setup(props, { emit }) {
     const forwarded = composition.useForwardPropsEmits(props, emit);
     const { forwardRef } = composition.useForwardExpose();
     const rootContext = injectComboboxRootContext();
+    rootContext.contentId || (rootContext.contentId = composition.useId(void 0, "destyler-combobox-content"));
     return {
       forwardRef,
       forwarded,
@@ -595,35 +568,20 @@ const DestylerComboboxContent = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(presence.DestylerPresence, {
+    return vue.h(presence.Presence, {
       present: this.$props.forceMount || this.rootContext.open.value
-    }, {
-      default: () => {
-        return vue.h(DestylerComboboxContentImpl, vue.mergeProps(this.$attrs, this.forwarded, {
-          ref: (el) => this.forwardRef(el)
-        }), {
-          default: () => this.$slots.default?.()
-        });
-      }
-    });
+    }, () => vue.h(ComboboxContentImpl, vue.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 = {
+  ...primitive.primitiveProps
 };
-const DestylerComboboxEmpty = vue.defineComponent({
+const ComboboxEmpty = vue.defineComponent({
   name: "DestylerComboboxEmpty",
-  props: destylerComboboxEmptyProps,
+  props: comboboxEmptyProps,
   setup() {
     composition.useForwardExpose();
     const rootContext = injectComboboxRootContext();
@@ -635,32 +593,23 @@ const DestylerComboboxEmpty = vue.defineComponent({
   },
   render() {
     if (this.isEmpty) {
-      return vue.h(primitive.DestylerPrimitive, this.$props, {
+      return vue.h(primitive.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 = {
+  ...primitive.primitiveProps
 };
 const [injectComboboxGroupContext, provideComboboxGroupContext] = shared.createContext("DestylerComboboxGroup");
-const DestylerComboboxGroup = vue.defineComponent({
+const ComboboxGroup = vue.defineComponent({
   name: "DestylerComboboxGroup",
-  props: destylerComboboxGroupProps,
+  props: comboboxGroupProps,
   setup() {
     const { currentRef, currentElement } = composition.useForwardExpose();
-    const id = composition.useId();
+    const id = composition.useId(void 0, "destyler-combobox-group");
     const rootContext = injectComboboxRootContext();
     const hasOptions = vue.ref(false);
     function checkCollectionItem() {
@@ -671,12 +620,16 @@ const DestylerComboboxGroup = vue.defineComponent({
     }
     composition.useMutationObserver(currentElement, () => {
       checkCollectionItem();
-    }, { childList: true });
+    }, {
+      childList: true
+    });
     vue.watch(() => rootContext.searchTerm.value, () => {
       vue.nextTick(() => {
         checkCollectionItem();
       });
-    }, { immediate: true });
+    }, {
+      immediate: true
+    });
     provideComboboxGroupContext({
       id
     });
@@ -687,7 +640,7 @@ const DestylerComboboxGroup = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$props, {
+    return vue.h(primitive.Primitive, vue.mergeProps(this.$props, {
       "ref": "currentRef",
       "role": "group",
       "aria-labelledby": this.id,
@@ -698,34 +651,45 @@ const DestylerComboboxGroup = vue.defineComponent({
   }
 });
 
-const destylerComboboxInputProps = {
+const comboboxInputProps = {
+  ...primitive.primitiveProps,
+  /**
+   * @default input
+   */
   as: {
-    type: [String, Object],
-    required: false,
+    ...primitive.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 = vue.defineComponent({
+const ComboboxInput = vue.defineComponent({
   name: "DestylerComboboxInput",
-  props: destylerComboboxInputProps,
+  props: comboboxInputProps,
   setup(props) {
     const rootContext = injectComboboxRootContext();
     const { forwardRef, currentElement } = composition.useForwardExpose();
@@ -767,7 +731,7 @@ const DestylerComboboxInput = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(primitive.DestylerPrimitive, {
+    return vue.h(primitive.Primitive, {
       "ref": (el) => this.forwardRef(el),
       "as": this.$props.as,
       "asChild": this.$props.asChild,
@@ -807,41 +771,45 @@ const DestylerComboboxInput = vue.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 = {
+  ...primitive.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] = shared.createContext("DestylerComboboxItem");
-const DestylerComboboxItem = vue.defineComponent({
+const ComboboxItem = vue.defineComponent({
   name: "DestylerComboboxItem",
-  props: destylerComboboxItemProps,
-  emits: ["select"],
+  props: comboboxItemProps,
+  emits: comboboxItemEmits,
   setup(props, { emit }) {
     const { disabled } = vue.toRefs(props);
     const rootContext = injectComboboxRootContext();
     injectComboboxGroupContext({ id: "", options: vue.ref([]) });
     const { forwardRef } = composition.useForwardExpose();
     const isSelected = vue.computed(
-      () => rootContext.multiple.value && Array.isArray(rootContext.modelValue.value) ? rootContext.modelValue.value?.includes(props.value) : isEqual__default(rootContext.modelValue?.value, props.value)
+      () => rootContext.multiple.value && Array.isArray(rootContext.modelValue.value) ? rootContext.modelValue.value?.some((val) => isEqual__default(val, props.value)) : isEqual__default(rootContext.modelValue?.value, props.value)
     );
     const isFocused = vue.computed(() => isEqual__default(rootContext.selectedValue.value, props.value));
-    const textId = composition.useId();
+    const textId = composition.useId(void 0, "destyler-combobox-item");
     const isInOption = vue.computed(() => rootContext.isUserInputted.value ? rootContext.searchTerm.value === "" || !!rootContext.filteredOptions.value.find((i) => isEqual__default(i, props.value)) : true);
     async function handleSelect(ev) {
       emit("select", ev);
@@ -881,9 +849,9 @@ const DestylerComboboxItem = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(collection.DestylerCollectionItem, null, {
+    return vue.h(collection.CollectionItem, null, {
       default: () => {
-        return vue.h(primitive.DestylerPrimitive, {
+        return vue.h(primitive.Primitive, {
           "ref": (el) => this.forwardRef(el),
           "role": "option",
           "tabindex": "-1",
@@ -911,21 +879,19 @@ const DestylerComboboxItem = vue.defineComponent({
   }
 });
 
-const destylerComboboxItemIndicatorProps = {
+const comboboxItemIndicatorProps = {
+  ...primitive.primitiveProps,
+  /**
+   * @default span
+   */
   as: {
-    type: [String, Object],
-    required: false,
+    ...primitive.primitiveProps.as,
     default: "span"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
   }
 };
-const DestylerComboboxItemIndicator = vue.defineComponent({
+const ComboboxItemIndicator = vue.defineComponent({
   name: "DestylerComboboxItemIndicator",
-  props: destylerComboboxItemIndicatorProps,
+  props: comboboxItemIndicatorProps,
   setup() {
     composition.useForwardExpose();
     const itemContext = injectComboboxItemContext();
@@ -935,7 +901,7 @@ const DestylerComboboxItemIndicator = vue.defineComponent({
   },
   render() {
     if (this.itemContext.isSelected.value) {
-      return vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$props, {
+      return vue.h(primitive.Primitive, vue.mergeProps(this.$props, {
         "aria-hidden": ""
       }), {
         default: () => this.$slots.default?.()
@@ -944,25 +910,19 @@ const DestylerComboboxItemIndicator = vue.defineComponent({
   }
 });
 
-const destylerComboboxLabelProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
+const comboboxLabelProps = {
+  ...primitive.primitiveProps,
+  /**
+   * The id of the element the label is associated with.
+   */
   for: {
     type: String,
     required: false
   }
 };
-const DestylerComboboxLabel = vue.defineComponent({
+const ComboboxLabel = vue.defineComponent({
   name: "DestylerComboboxLabel",
-  props: destylerComboboxLabelProps,
+  props: comboboxLabelProps,
   setup() {
     composition.useForwardExpose();
     const groupContext = injectComboboxGroupContext({ id: "" });
@@ -971,7 +931,7 @@ const DestylerComboboxLabel = vue.defineComponent({
     };
   },
   render() {
-    return vue.withDirectives(vue.h(primitive.DestylerPrimitive, this.$props, {
+    return vue.withDirectives(vue.h(primitive.Primitive, this.$props, {
       default: () => this.$slots.default?.()
     }), [
       [directives.BindOnceDirective, { id: this.groupContext.id }]
@@ -979,77 +939,55 @@ const DestylerComboboxLabel = vue.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 = {
+  ...teleport.teleportPrimitiveProps
 };
-const DestylerComboboxPortal = vue.defineComponent({
+const ComboboxPortal = vue.defineComponent({
   name: "DestylerComboboxPortal",
-  props: destylerComboboxPortalProps,
+  props: comboboxPortalProps,
   render() {
-    return vue.h(teleport.DestylerTeleport, this.$props, {
+    return vue.h(teleport.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 = {
+  ...primitive.primitiveProps
 };
-const DestylerComboboxSeparator = vue.defineComponent({
+const ComboboxSeparator = vue.defineComponent({
   name: "DestylerComboboxSeparator",
-  props: destylerComboboxSeparatorProps,
+  props: comboboxSeparatorProps,
   setup() {
     composition.useForwardExpose();
   },
   render() {
-    return vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$props, {
+    return vue.h(primitive.Primitive, vue.mergeProps(this.$props, {
       "aria-hidden": ""
-    }));
+    }), () => this.$slots.default?.());
   }
 });
 
-const destylerComboboxTriggerProps = {
+const comboboxTriggerProps = {
+  ...primitive.primitiveProps,
+  /**
+   * @default button
+   */
   as: {
-    type: [String, Object],
-    required: false,
+    ...primitive.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 = vue.defineComponent({
+const ComboboxTrigger = vue.defineComponent({
   name: "DestylerComboboxTrigger",
-  props: destylerComboboxTriggerProps,
+  props: comboboxTriggerProps,
   setup(props) {
     composition.useForwardExpose();
     const rootContext = injectComboboxRootContext();
@@ -1060,7 +998,7 @@ const DestylerComboboxTrigger = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$props, {
+    return vue.h(primitive.Primitive, vue.mergeProps(this.$props, {
       "type": this.$props.as === "button" ? "button" : void 0,
       "tabindex": "-1",
       "aria-label": "Show popup",
@@ -1080,21 +1018,20 @@ const DestylerComboboxTrigger = vue.defineComponent({
   }
 });
 
-const destylerComboboxViewportProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
+const comboboxViewportProps = {
+  ...primitive.primitiveProps,
+  /**
+   * Will add `nonce` attribute to the style tag which can be used by Content Security Policy.
+   */
+  nonce: {
+    type: String,
+    required: false
   }
 };
-const DestylerComboboxViewport = vue.defineComponent({
+const ComboboxViewport = vue.defineComponent({
   name: "DestylerComboboxViewport",
-  props: destylerComboboxViewportProps,
+  props: comboboxViewportProps,
+  inheritAttrs: false,
   setup() {
     const { forwardRef } = composition.useForwardExpose();
     return {
@@ -1103,7 +1040,7 @@ const DestylerComboboxViewport = vue.defineComponent({
   },
   render() {
     return [
-      vue.h(primitive.DestylerPrimitive, {
+      vue.h(primitive.Primitive, vue.mergeProps(this.$attrs, this.$props, {
         "ref": (el) => this.forwardRef(el),
         "data-destyler-combobox-viewport": "",
         "role": "presentation",
@@ -1112,41 +1049,58 @@ const DestylerComboboxViewport = vue.defineComponent({
           flex: 1,
           overflow: "auto"
         }
-      }, {
-        default: () => this.$slots.default?.()
-      }),
-      vue.h(primitive.DestylerPrimitive, {
-        as: "style"
-      }, {
-        default: () => `
-        /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
-        [data-destyler-combobox-viewport] {
-          scrollbar-width:none;
-          -ms-overflow-style: none;
-          -webkit-overflow-scrolling: touch;
-        }
-        [data-destyler-combobox-viewport]::-webkit-scrollbar {
-          display: none;
-        }
-        `
-      })
+      }), () => this.$slots.default?.()),
+      vue.h(primitive.Primitive, {
+        as: "style",
+        nonce: this.$props.nonce
+      }, () => `
+      /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
+      [data-destyler-combobox-viewport] {
+        scrollbar-width:none;
+        -ms-overflow-style: none;
+        -webkit-overflow-scrolling: touch;
+      }
+      [data-destyler-combobox-viewport]::-webkit-scrollbar {
+        display: none;
+      }
+      `)
     ];
   }
 });
 
-exports.DestylerComboboxAnchor = DestylerComboboxAnchor;
-exports.DestylerComboboxArrow = DestylerComboboxArrow;
-exports.DestylerComboboxCancel = DestylerComboboxCancel;
-exports.DestylerComboboxContent = DestylerComboboxContent;
-exports.DestylerComboboxContentImpl = DestylerComboboxContentImpl;
-exports.DestylerComboboxEmpty = DestylerComboboxEmpty;
-exports.DestylerComboboxGroup = DestylerComboboxGroup;
-exports.DestylerComboboxInput = DestylerComboboxInput;
-exports.DestylerComboboxItem = DestylerComboboxItem;
-exports.DestylerComboboxItemIndicator = DestylerComboboxItemIndicator;
-exports.DestylerComboboxLabel = DestylerComboboxLabel;
-exports.DestylerComboboxPortal = DestylerComboboxPortal;
-exports.DestylerComboboxRoot = DestylerComboboxRoot;
-exports.DestylerComboboxSeparator = DestylerComboboxSeparator;
-exports.DestylerComboboxTrigger = DestylerComboboxTrigger;
-exports.DestylerComboboxViewport = DestylerComboboxViewport;
+exports.ComboboxAnchor = ComboboxAnchor;
+exports.ComboboxArrow = ComboboxArrow;
+exports.ComboboxCancel = ComboboxCancel;
+exports.ComboboxContent = ComboboxContent;
+exports.ComboboxContentImpl = ComboboxContentImpl;
+exports.ComboboxEmpty = ComboboxEmpty;
+exports.ComboboxGroup = ComboboxGroup;
+exports.ComboboxInput = ComboboxInput;
+exports.ComboboxItem = ComboboxItem;
+exports.ComboboxItemIndicator = ComboboxItemIndicator;
+exports.ComboboxLabel = ComboboxLabel;
+exports.ComboboxPortal = ComboboxPortal;
+exports.ComboboxRoot = ComboboxRoot;
+exports.ComboboxSeparator = ComboboxSeparator;
+exports.ComboboxTrigger = ComboboxTrigger;
+exports.ComboboxViewport = ComboboxViewport;
+exports.comboboxAnchorProps = comboboxAnchorProps;
+exports.comboboxArrowProps = comboboxArrowProps;
+exports.comboboxCancelProps = comboboxCancelProps;
+exports.comboboxContentEmits = comboboxContentEmits;
+exports.comboboxContentImplEmits = comboboxContentImplEmits;
+exports.comboboxContentImplProps = comboboxContentImplProps;
+exports.comboboxContentProps = comboboxContentProps;
+exports.comboboxEmptyProps = comboboxEmptyProps;
+exports.comboboxGroupProps = comboboxGroupProps;
+exports.comboboxInputProps = comboboxInputProps;
+exports.comboboxItemEmits = comboboxItemEmits;
+exports.comboboxItemIndicatorProps = comboboxItemIndicatorProps;
+exports.comboboxItemProps = comboboxItemProps;
+exports.comboboxLabelProps = comboboxLabelProps;
+exports.comboboxPortalProps = comboboxPortalProps;
+exports.comboboxRootEmits = comboboxRootEmits;
+exports.comboboxRootProps = comboboxRootProps;
+exports.comboboxSeparatorProps = comboboxSeparatorProps;
+exports.comboboxTriggerProps = comboboxTriggerProps;
+exports.comboboxViewportProps = comboboxViewportProps;