@mirohq/design-system-combobox 0.1.0-combobox.1 → 0.1.0-combobox.10

package/dist/module.js

@@ -1,30 +1,98 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { createContext, useState, useContext, useEffect } from 'react';
-import { useFormFieldContext } from '@mirohq/design-system-base-form';
-import { useHover } from '@react-aria/interactions';
-import { stringAttrValue, booleanishAttrValue, booleanify } from '@mirohq/design-system-utils';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { createContext, useRef, useState, useContext, useCallback, useEffect, useMemo } from 'react';
+import { Combobox as Combobox$1, ComboboxItem, ComboboxItemCheck, ComboboxList, Group as Group$1, GroupLabel as GroupLabel$1, ComboboxProvider as ComboboxProvider$1 } from '@ariakit/react';
+import { useFormFieldContext, FloatingLabel } from '@mirohq/design-system-base-form';
+import { booleanishAttrValue, mergeRefs, booleanify } from '@mirohq/design-system-utils';
+import * as RadixPopover from '@radix-ui/react-popover';
+import { Trigger as Trigger$1, Anchor, Portal as Portal$1 } from '@radix-ui/react-popover';
+import { styled, theme } from '@mirohq/design-system-stitches';
 import { Input } from '@mirohq/design-system-input';
-import { IconChevronDown, IconCheckMark } from '@mirohq/design-system-icons';
-import { styled } from '@mirohq/design-system-stitches';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { IconChevronDown, IconCross, IconCheckMark } from '@mirohq/design-system-icons';
+import { ScrollArea } from '@mirohq/design-system-scroll-area';
 import { Primitive } from '@mirohq/design-system-primitive';
-import { Portal as Portal$1 } from '@radix-ui/react-popover';
-import { Group as Group$1, GroupLabel as GroupLabel$1 } from '@ariakit/react';
+import { mergeProps } from '@react-aria/utils';
+import { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled';
+import { useLayoutEffect } from '@mirohq/design-system-use-layout-effect';
+import { focus } from '@mirohq/design-system-styles';
+import { createPortal } from 'react-dom';
+import { BaseButton } from '@mirohq/design-system-base-button';
 
-const StyledTrigger = styled(Input, {});
+const StyledInput = styled(Input, {
+  flexWrap: "wrap",
+  flexGrow: 1,
+  gap: "$50",
+  overflowY: "scroll",
+  "&[data-valid], &[data-invalid]": {
+    // we don't need a bigger padding here as Input component will render its own icon
+    paddingRight: "$100"
+  },
+  "& input": {
+    minWidth: "$8",
+    flexBasis: 0,
+    flexGrow: 1
+  },
+  variants: {
+    size: {
+      large: {
+        minHeight: "$10",
+        height: "auto",
+        padding: "5px $100",
+        paddingRight: "$500"
+      },
+      "x-large": {
+        minHeight: "$12",
+        height: "auto",
+        padding: "5px $100",
+        paddingRight: "$500"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "large"
+  }
+});
 
 const ComboboxContext = createContext({});
 const ComboboxProvider = ({
   children,
+  open: openProp,
   defaultOpen,
+  onOpen,
+  onClose,
   valid,
   value: valueProp,
   defaultValue: defaultValueProp,
+  onValueChange,
+  onSearchValueChange,
+  autoFilter = true,
   ...restProps
 }) => {
-  const [openState, setOpenState] = useState(defaultOpen);
-  const [value, setValue] = useState(valueProp);
+  const triggerRef = useRef(null);
+  const inputRef = useRef(null);
+  const contentRef = useRef(null);
   const [defaultValue, setDefaultValue] = useState(defaultValueProp);
-  const [searchValue, setSearchValue] = useState();
+  const [openState = false, setOpenState] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: (state) => {
+      if (state) {
+        onOpen == null ? void 0 : onOpen();
+      } else {
+        onClose == null ? void 0 : onClose();
+      }
+    }
+  });
+  const [value, setValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValueProp,
+    onChange: onValueChange
+  });
+  const [filteredItems, setFilteredItems] = useState(/* @__PURE__ */ new Set());
+  const [searchValue, setSearchValue] = useState("");
+  const [size, setSize] = useState();
+  const [placeholder, setPlaceholder] = useState();
+  const [itemValueTextMap, setItemValueTextMap] = useState(/* @__PURE__ */ new Map());
   const { valid: formFieldValid } = useFormFieldContext();
   return /* @__PURE__ */ jsx(
     ComboboxContext.Provider,
@@ -38,8 +106,21 @@ const ComboboxProvider = ({
         setValue,
         setDefaultValue,
         defaultValue,
+        onSearchValueChange,
+        triggerRef,
+        inputRef,
+        contentRef,
+        autoFilter,
         searchValue,
-        setSearchValue
+        setSearchValue,
+        filteredItems,
+        setFilteredItems,
+        itemValueTextMap,
+        setItemValueTextMap,
+        placeholder,
+        setPlaceholder,
+        size,
+        setSize
       },
       children
     }
@@ -47,6 +128,70 @@ const ComboboxProvider = ({
 };
 const useComboboxContext = () => useContext(ComboboxContext);
 
+const StyledActionButton = styled(Input.ActionButton, {
+  position: "absolute",
+  right: "$100",
+  variants: {
+    size: {
+      large: {
+        top: "5px"
+      },
+      "x-large": {
+        top: "9px"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "large"
+  }
+});
+
+const TriggerActionButton = ({
+  openActionLabel,
+  closeActionLabel,
+  clearActionLabel,
+  size
+}) => {
+  const { openState, setOpenState, value = [], setValue } = useComboboxContext();
+  const isEmpty = value.length === 0;
+  const onToggleClick = useCallback(
+    (event) => {
+      if (openState) {
+        setOpenState(false);
+      }
+      event.stopPropagation();
+    },
+    [setOpenState, openState]
+  );
+  const onClearClick = useCallback(
+    (event) => {
+      setValue([]);
+      event.stopPropagation();
+    },
+    [setValue]
+  );
+  if (isEmpty) {
+    return /* @__PURE__ */ jsx(Trigger$1, { asChild: true, "aria-haspopup": "listbox", children: /* @__PURE__ */ jsx(
+      StyledActionButton,
+      {
+        label: openState ? closeActionLabel : openActionLabel,
+        size,
+        onClick: onToggleClick,
+        children: /* @__PURE__ */ jsx(IconChevronDown, { size: "small", weight: "thin" })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(
+    StyledActionButton,
+    {
+      label: clearActionLabel,
+      size,
+      onClick: onClearClick,
+      children: /* @__PURE__ */ jsx(IconCross, { size: "small", weight: "thin" })
+    }
+  );
+};
+
 const Trigger = React.forwardRef(
   ({
     id,
@@ -55,142 +200,536 @@ const Trigger = React.forwardRef(
     "aria-describedby": ariaDescribedBy,
     "aria-invalid": ariaInvalid,
     placeholder,
-    onHoverChange,
-    onHoverStart,
-    onHoverEnd,
+    openActionLabel,
+    closeActionLabel,
+    clearActionLabel,
+    onChange,
     ...restProps
   }, forwardRef) => {
     const {
       "aria-disabled": ariaDisabled,
       valid: comboboxValid,
       disabled,
-      value
+      value = [],
+      readOnly,
+      triggerRef,
+      inputRef,
+      onSearchValueChange,
+      searchValue,
+      setSearchValue,
+      setOpenState,
+      setSize,
+      setPlaceholder
     } = useComboboxContext();
     const {
       formElementId,
-      ariaDescribedBy: formFieldContextDescribedBy,
       ariaInvalid: formFieldAriaInvalid,
       valid: formFieldValid
     } = useFormFieldContext();
+    useEffect(() => {
+      setSize(size);
+    }, [size, setSize]);
+    useEffect(() => {
+      setPlaceholder(placeholder);
+    }, [setPlaceholder, placeholder]);
     const valid = formFieldValid != null ? formFieldValid : comboboxValid;
-    const { hoverProps } = useHover({
-      onHoverStart,
-      onHoverEnd,
-      onHoverChange: (isHovering) => {
-        onHoverChange == null ? void 0 : onHoverChange(isHovering);
-      }
-    });
-    const commonProps = {
+    const inputProps = {
       ...restProps,
-      ref: forwardRef,
       "aria-disabled": ariaDisabled,
       "aria-invalid": ariaInvalid != null ? ariaInvalid : formFieldAriaInvalid,
-      "aria-describedby": stringAttrValue(
-        ariaDescribedBy,
-        formFieldContextDescribedBy
-      ),
+      // todo MDS-1011: use formFieldContextDescribedBy after removing form context from BaseInput
+      "aria-describedby": ariaDescribedBy,
       valid,
       disabled,
+      readOnly,
       invalid: booleanishAttrValue(valid),
       id: id != null ? id : formElementId,
-      placeholder: value === void 0 ? placeholder : void 0
+      placeholder: value.length === 0 ? placeholder : void 0
+    };
+    const scrollIntoView = (event) => {
+      var _a;
+      const trigger = triggerRef == null ? void 0 : triggerRef.current;
+      const baseInput = (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.parentElement;
+      if (baseInput != null && trigger != null) {
+        event.preventDefault();
+        baseInput.scrollTo({
+          top: trigger.scrollHeight
+        });
+      }
+      if (restProps.onFocus !== void 0) {
+        restProps.onFocus(event);
+      }
     };
-    const variants = {
-      size
+    const onInputChange = (e) => {
+      setSearchValue(e.target.value);
+      onSearchValueChange == null ? void 0 : onSearchValueChange(e.target.value);
+      onChange == null ? void 0 : onChange(e);
     };
-    return /* @__PURE__ */ jsxs(StyledTrigger, { ...hoverProps, ...commonProps, ...variants, children: [
-      children,
-      /* @__PURE__ */ jsx(Input.ActionButton, { label: "custom label", children: /* @__PURE__ */ jsx(IconChevronDown, { size: "small", weight: "thin" }) })
-    ] });
+    return /* @__PURE__ */ jsx(
+      Anchor,
+      {
+        ref: mergeRefs([triggerRef, forwardRef]),
+        onClick: () => {
+          if (!booleanify(disabled) && !booleanify(ariaDisabled) && !booleanify(readOnly)) {
+            setOpenState(true);
+          }
+        },
+        children: /* @__PURE__ */ jsx(
+          Combobox$1,
+          {
+            render: /* @__PURE__ */ jsxs(
+              StyledInput,
+              {
+                ...inputProps,
+                value: searchValue,
+                size,
+                ref: inputRef,
+                onChange: onInputChange,
+                onFocus: scrollIntoView,
+                children: [
+                  children,
+                  /* @__PURE__ */ jsx(
+                    TriggerActionButton,
+                    {
+                      openActionLabel,
+                      closeActionLabel,
+                      clearActionLabel,
+                      size
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      }
+    );
   }
 );
 
-const StyledContent = styled(Primitive.div, {
+const NoResultPlaceholder = styled(Primitive.div, {
+  padding: "$100"
+});
+const StyledContent = styled(RadixPopover.Content, {
   backgroundColor: "$background-neutrals-container",
   borderRadius: "$50",
   boxShadow: "$50",
-  minWidth: "var(--radix-select-trigger-width)",
+  fontSize: "$175",
+  fontWeight: "normal",
+  lineHeight: "20px",
+  width: "var(--radix-popover-trigger-width)",
+  zIndex: "$select",
+  overflowY: "auto",
   padding: "$50",
-  zIndex: "$select"
+  boxSizing: "border-box",
+  outline: "1px solid transparent"
 });
 
-const Content = React.forwardRef(({ children, ...restProps }, forwardRef) => {
-  const { open, openState } = useComboboxContext();
-  if (!booleanify(open != null ? open : openState))
-    return null;
-  return /* @__PURE__ */ jsx(StyledContent, { ...restProps, ref: forwardRef, children });
+const StyledItemCheck = styled(Primitive.span, {
+  color: "$icon-primary"
 });
-
-const StyledItem = styled(Primitive.div, {
+const StyledItem = styled(ComboboxItem, {
+  display: "grid",
+  gridTemplateColumns: "20px 1fr",
   borderRadius: "$50",
   boxSizing: "border-box",
   color: "$text-neutrals",
   cursor: "pointer",
   fontSize: "$175",
-  lineHeight: 1.5,
+  lineHeight: "20px",
   position: "relative",
   userSelect: "none",
-  padding: "6px 0",
-  paddingInline: "$150 $100",
-  '&:hover:not([aria-disabled="true"])': {
-    background: "$background-primary-subtle-hover",
-    color: "$text-primary-hover"
+  padding: "6px $100 6px $150",
+  ...focus.css({
+    boxShadow: "$focus-small"
+  }),
+  '&:not([aria-disabled="true"])': {
+    _hover: {
+      background: "$background-primary-subtle-hover",
+      color: "$text-primary-hover",
+      ["".concat(StyledItemCheck)]: {
+        color: "$icon-primary-hover"
+      }
+    }
+  },
+  "&:disabled, &[aria-disabled=true], &[data-disabled]": {
+    cursor: "default",
+    color: "$text-neutrals-disabled",
+    ["".concat(StyledItemCheck)]: {
+      color: "$icon-neutrals-disabled"
+    }
+  },
+  '&[aria-selected="true"]:not(:disabled,[aria-disabled=true],[data-disabled])': {
+    color: "$text-primary-selected"
   }
 });
 
 const Item = React.forwardRef(
-  ({ value, textValue, children, ...restProps }, forwardRef) => {
-    const { value: comboboxValue } = useComboboxContext();
-    const isSelected = comboboxValue === value;
-    return /* @__PURE__ */ jsxs(StyledItem, { ref: forwardRef, ...restProps, children: [
-      isSelected && /* @__PURE__ */ jsx(IconCheckMark, { size: "small", weight: "thin" }),
-      children
-    ] });
+  ({ disabled = false, value, textValue, children, ...restProps }, forwardRef) => {
+    const { "aria-disabled": ariaDisabled, ...restAriaDisabledProps } = useAriaDisabled(restProps, { allowArrows: true });
+    const {
+      autoFilter,
+      filteredItems,
+      setItemValueTextMap,
+      triggerRef,
+      inputRef,
+      value: comboboxValue = []
+    } = useComboboxContext();
+    useLayoutEffect(() => {
+      const textToSet = textValue !== void 0 ? textValue : typeof children === "string" ? children : "";
+      setItemValueTextMap((prevState) => new Map(prevState.set(value, textToSet)));
+      return () => {
+        setItemValueTextMap((prevState) => {
+          prevState.delete(value);
+          return new Map(prevState);
+        });
+      };
+    }, [setItemValueTextMap, value, textValue, children]);
+    if (autoFilter !== false && !filteredItems.has(value)) {
+      return null;
+    }
+    const scrollIntoView = (event) => {
+      var _a;
+      if (((_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.parentElement) != null && (triggerRef == null ? void 0 : triggerRef.current) != null) {
+        inputRef.current.parentElement.scrollTo({
+          top: triggerRef.current.scrollHeight
+        });
+      }
+      if (restProps.onClick !== void 0) {
+        restProps.onClick(event);
+      }
+    };
+    const isSelected = comboboxValue.includes(value);
+    return /* @__PURE__ */ jsxs(
+      StyledItem,
+      {
+        ...mergeProps(restProps, restAriaDisabledProps),
+        focusable: true,
+        hideOnClick: false,
+        accessibleWhenDisabled: booleanify(ariaDisabled),
+        disabled: booleanify(ariaDisabled) || disabled,
+        ref: forwardRef,
+        value,
+        onClick: scrollIntoView,
+        "aria-selected": isSelected,
+        children: [
+          /* @__PURE__ */ jsx(
+            ComboboxItemCheck,
+            {
+              checked: isSelected,
+              render: ({ style, ...props }) => (
+                // AriakitComboboxItemCheck adds its owm inline styles which we want to omit here
+                /* @__PURE__ */ jsx(StyledItemCheck, { ...props })
+              ),
+              children: /* @__PURE__ */ jsx(
+                IconCheckMark,
+                {
+                  size: "small",
+                  "data-testid": process.env.NODE_ENV === "test" ? "combobox-item-check" : void 0
+                }
+              )
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+
+const itemType = React.createElement(Item).type;
+const getChildrenItemValues = (componentChildren) => {
+  const values = [];
+  const recurse = (children) => {
+    React.Children.forEach(children, (child) => {
+      if (!React.isValidElement(child)) {
+        return;
+      }
+      if (child.type === itemType) {
+        const props = child.props;
+        values.push(props.value);
+        return;
+      }
+      if (child.props.children) {
+        recurse(child.props.children);
+      }
+    });
+  };
+  recurse(componentChildren);
+  return values;
+};
+
+const useDocumentFragment = () => {
+  const [fragment, setFragment] = React.useState();
+  useLayoutEffect(() => {
+    setFragment(new DocumentFragment());
+  }, []);
+  return fragment;
+};
+
+const useInvisibleContent = () => {
+  const fragment = useDocumentFragment();
+  return useCallback(
+    (children) => fragment !== void 0 ? createPortal(/* @__PURE__ */ jsx("div", { children }), fragment) : null,
+    [fragment]
+  );
+};
+
+const CONTENT_OFFSET = parseInt(theme.space[50]);
+const isInsideRef = (element, ref) => {
+  var _a, _b;
+  return (_b = element != null && ((_a = ref.current) == null ? void 0 : _a.contains(element))) != null ? _b : false;
+};
+const Content = React.forwardRef(
+  ({
+    side = "bottom",
+    sideOffset = CONTENT_OFFSET,
+    align = "center",
+    alignOffset = 0,
+    collisionPadding = 0,
+    avoidCollisions = true,
+    sticky = "partial",
+    hideWhenDetached = true,
+    overflow = "visible",
+    maxHeight,
+    children,
+    ...restProps
+  }, forwardRef) => {
+    const {
+      triggerRef,
+      contentRef,
+      autoFilter,
+      filteredItems,
+      setFilteredItems,
+      searchValue,
+      noResultsText,
+      direction,
+      openState
+    } = useComboboxContext();
+    useEffect(() => {
+      const childrenItemValues = getChildrenItemValues(children);
+      setFilteredItems(
+        new Set(
+          autoFilter === false ? childrenItemValues : childrenItemValues.filter(
+            (child) => child.toLowerCase().includes(searchValue.toLowerCase())
+          )
+        )
+      );
+    }, [children, autoFilter, setFilteredItems, searchValue]);
+    const getInvisibleContent = useInvisibleContent();
+    if (!openState) {
+      return getInvisibleContent(children);
+    }
+    const content = filteredItems.size === 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(NoResultPlaceholder, { children: noResultsText }),
+      getInvisibleContent(children)
+    ] }) : children;
+    return /* @__PURE__ */ jsx(
+      StyledContent,
+      {
+        asChild: true,
+        ...restProps,
+        dir: direction,
+        side,
+        sideOffset,
+        align,
+        alignOffset,
+        avoidCollisions,
+        collisionPadding,
+        sticky,
+        hideWhenDetached,
+        ref: mergeRefs([forwardRef, contentRef]),
+        onOpenAutoFocus: (event) => event.preventDefault(),
+        onInteractOutside: (event) => {
+          const target = event.target;
+          const isTrigger = isInsideRef(target, triggerRef);
+          const isContent = isInsideRef(target, contentRef);
+          if (isTrigger || isContent) {
+            event.preventDefault();
+          }
+        },
+        children: /* @__PURE__ */ jsx(ComboboxList, { role: "listbox", children: overflow === "auto" ? /* @__PURE__ */ jsxs(ScrollArea, { type: "always", dir: direction, children: [
+          /* @__PURE__ */ jsx(
+            ScrollArea.Viewport,
+            {
+              availableHeight: "var(--radix-popover-content-available-height)",
+              verticalGap: "var(--space-50) * 2",
+              maxHeight,
+              children: content
+            }
+          ),
+          /* @__PURE__ */ jsx(ScrollArea.Scrollbar, { orientation: "vertical", children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {}) })
+        ] }) : content })
+      }
+    );
   }
 );
 
 const Portal = (props) => /* @__PURE__ */ jsx(Portal$1, { ...props });
 
-const StyledGroup = styled(Group$1, {});
+const StyledGroup = styled(Group$1);
 
-const Group = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsx(StyledGroup, { ...props, ref: forwardRef }));
+const Group = React.forwardRef(({ children, ...rest }, forwardRef) => {
+  const { autoFilter, filteredItems } = useComboboxContext();
+  const childValues = useMemo(
+    // don't perform calculation if auto filter is disabled
+    () => autoFilter !== false ? getChildrenItemValues(children) : [],
+    [children, autoFilter]
+  );
+  const hasVisibleChildren = useMemo(
+    () => (
+      // don't perform calculation if auto filter is disabled
+      autoFilter !== false ? childValues.some((value) => filteredItems.has(value)) : true
+    ),
+    [childValues, filteredItems, autoFilter]
+  );
+  const getInvisibleContent = useInvisibleContent();
+  if (!hasVisibleChildren) {
+    return getInvisibleContent(children);
+  }
+  return /* @__PURE__ */ jsx(StyledGroup, { ...rest, ref: forwardRef, children });
+});
 
-const StyledGroupLabel = styled(GroupLabel$1, {});
+const StyledGroupLabel = styled(GroupLabel$1, {
+  padding: "6px $100",
+  color: "$text-neutrals-subtle"
+});
 
 const GroupLabel = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsx(StyledGroupLabel, { ...props, ref: forwardRef }));
 
-const StyledValue = styled(Primitive.span, {});
+const StyledChip = styled(Primitive.div, {
+  fontSize: "$150",
+  padding: "$50 $100",
+  borderRadius: "$round",
+  display: "flex",
+  alignItems: "center",
+  gap: "$50",
+  whiteSpace: "nowrap",
+  maxWidth: "$35",
+  backgroundColor: "$background-neutrals-subtle",
+  color: "$text-neutrals"
+});
+const StyledChipButton = styled(BaseButton, {
+  color: "$icon-neutrals-inactive",
+  ...focus.css({
+    boxShadow: "$focus-small-outline"
+  })
+});
+const StyledChipContent = styled(Primitive.div, {
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  lineHeight: 1.3
+});
 
-const Value = React.forwardRef(
-  (props, forwardRef) => {
-    const { value } = useComboboxContext();
-    const isEmpty = value === void 0;
-    if (isEmpty) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx(StyledValue, { ref: forwardRef, ...props, children: value });
-  }
+const StyledLeftSlot = styled(Primitive.span, {
+  order: -1,
+  marginRight: "$50"
+});
+
+const LeftSlot = StyledLeftSlot;
+
+const Chip = React.forwardRef(
+  ({ children, disabled = false, onRemove, removeAriaLabel, ...restProps }, forwardRef) => /* @__PURE__ */ jsxs(StyledChip, { ...restProps, ref: forwardRef, children: [
+    /* @__PURE__ */ jsx(StyledChipContent, { children }),
+    !booleanify(disabled) && /* @__PURE__ */ jsx(StyledChipButton, { onClick: onRemove, "aria-label": removeAriaLabel, children: /* @__PURE__ */ jsx(IconCross, { size: "small", weight: "thin", "aria-hidden": true }) })
+  ] })
 );
+Chip.LeftSlot = LeftSlot;
+
+const Value = ({ unselectAriaLabel }) => {
+  const {
+    value = [],
+    setValue,
+    disabled,
+    "aria-disabled": ariaDisabled,
+    itemValueTextMap
+  } = useComboboxContext();
+  const isDisabled = ariaDisabled === true || disabled;
+  const onItemRemove = useCallback(
+    (item) => {
+      setValue((prevValue) => prevValue == null ? void 0 : prevValue.filter((value2) => value2 !== item));
+    },
+    [setValue]
+  );
+  const getItemText = useCallback(
+    (itemValue) => {
+      const textValue = itemValueTextMap.get(itemValue);
+      if (textValue === void 0 || textValue === "") {
+        return null;
+      }
+      return /* @__PURE__ */ jsx(
+        Chip,
+        {
+          onRemove: (e) => {
+            onItemRemove(itemValue);
+            e.stopPropagation();
+          },
+          disabled: isDisabled,
+          removeAriaLabel: "".concat(unselectAriaLabel, " ").concat(textValue),
+          "data-testid": process.env.NODE_ENV === "test" ? "combobox-value-".concat(itemValue) : void 0,
+          children: textValue
+        },
+        itemValue
+      );
+    },
+    [isDisabled, itemValueTextMap, onItemRemove, unselectAriaLabel]
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: value.map(getItemText) });
+};
 
-const StyledComboboxContent = styled(Primitive.div, {});
+const StyledSeparator = styled(Primitive.div, {
+  backgroundColor: "$border-neutrals-subtle",
+  height: "1px",
+  width: "100%",
+  margin: "$100 0"
+});
+
+const Separator = React.forwardRef((props, forwardRef) => {
+  const { autoFilter, searchValue } = useComboboxContext();
+  if (autoFilter === true && searchValue.length > 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(StyledSeparator, { ...props, ref: forwardRef, "aria-hidden": true });
+});
+
+const StyledNativeSelect = styled(Primitive.select, {
+  // if we support autoComplete, we would have to use visually-hidden styles here
+  display: "none"
+});
+const StyledComboboxContent = styled(Primitive.div, {
+  position: "relative",
+  width: "100%"
+});
 
 const Root = React.forwardRef(
-  ({
-    onOpen,
-    onClose,
-    onValueChange,
-    value: valueProp,
-    children,
-    ...restProps
-  }, forwardRef) => {
+  ({ value: valueProp, onValueChange, name, children, ...restProps }, forwardRef) => {
+    var _a;
     const {
+      openState,
+      setOpenState,
+      defaultValue,
+      value = [],
+      setValue,
       required,
       readOnly,
       "aria-disabled": ariaDisabled,
       disabled,
-      direction
+      direction,
+      size,
+      placeholder,
+      triggerRef
     } = useComboboxContext();
-    const { setRequired, setDisabled, setAriaDisabled, setReadOnly } = useFormFieldContext();
+    const {
+      setRequired,
+      setDisabled,
+      setAriaDisabled,
+      setReadOnly,
+      label,
+      isFloatingLabel,
+      focused,
+      formElementRef
+    } = useFormFieldContext();
     useEffect(() => {
       setRequired == null ? void 0 : setRequired(required);
       setDisabled == null ? void 0 : setDisabled(disabled);
@@ -206,7 +745,63 @@ const Root = React.forwardRef(
       setAriaDisabled,
       setReadOnly
     ]);
-    return /* @__PURE__ */ jsx(StyledComboboxContent, { ...restProps, ref: forwardRef, dir: direction, children });
+    const shouldUseFloatingLabel = label !== null && isFloatingLabel;
+    const isFloating = placeholder !== void 0 || value.length !== 0 || focused;
+    const onSetSelectedValue = (newValue) => {
+      setValue(typeof newValue === "string" ? [newValue] : newValue);
+    };
+    const onOpenChange = (value2) => {
+      if (!booleanify(readOnly)) {
+        setOpenState(value2);
+      }
+    };
+    const isFormControl = Boolean((_a = triggerRef.current) == null ? void 0 : _a.closest("form"));
+    return /* @__PURE__ */ jsxs(RadixPopover.Root, { open: openState, onOpenChange, children: [
+      /* @__PURE__ */ jsx(
+        ComboboxProvider$1,
+        {
+          open: openState,
+          setOpen: onOpenChange,
+          defaultSelectedValue: defaultValue,
+          selectedValue: value,
+          setSelectedValue: onSetSelectedValue,
+          children: /* @__PURE__ */ jsxs(
+            StyledComboboxContent,
+            {
+              ref: forwardRef,
+              ...restProps,
+              dir: direction,
+              "data-form-element": "select",
+              children: [
+                shouldUseFloatingLabel && /* @__PURE__ */ jsx(FloatingLabel, { floating: isFloating, size, children: label }),
+                children
+              ]
+            }
+          )
+        }
+      ),
+      isFormControl && /* @__PURE__ */ jsx(
+        StyledNativeSelect,
+        {
+          multiple: true,
+          autoComplete: "off",
+          name,
+          tabIndex: -1,
+          "aria-hidden": "true",
+          ref: formElementRef,
+          required,
+          disabled,
+          "aria-disabled": ariaDisabled,
+          value,
+          onChange: () => {
+          },
+          children: value.length === 0 ? /* @__PURE__ */ jsx("option", { value: "" }) : (
+            // since we don't support autoComplete we can render here only selected values
+            value.map((itemValue) => /* @__PURE__ */ jsx("option", { value: itemValue, children: itemValue }, itemValue))
+          )
+        }
+      )
+    ] });
   }
 );
 const Combobox = React.forwardRef(
@@ -220,21 +815,33 @@ const Combobox = React.forwardRef(
     required,
     value,
     defaultValue,
+    onOpen,
+    onClose,
+    onSearchValueChange,
+    onValueChange,
     direction = "ltr",
+    autoFilter = true,
+    noResultsText,
     ...restProps
   }, forwardRef) => /* @__PURE__ */ jsx(
     ComboboxProvider,
     {
       defaultValue,
       value,
+      onValueChange,
+      onSearchValueChange,
       defaultOpen,
       open,
+      onOpen,
+      onClose,
       valid,
       required,
       disabled,
       readOnly,
       "aria-disabled": ariaDisabled,
       direction,
+      autoFilter,
+      noResultsText,
       children: /* @__PURE__ */ jsx(Root, { ...restProps, value, ref: forwardRef })
     }
   )
@@ -246,6 +853,11 @@ Combobox.Item = Item;
 Combobox.Group = Group;
 Combobox.GroupLabel = GroupLabel;
 Combobox.Value = Value;
+Combobox.Separator = Separator;
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
 
-export { Combobox };
+export { Combobox, types as ComboboxTypes };
 //# sourceMappingURL=module.js.map