@mirohq/design-system-combobox 0.1.0-combobox.8 → 0.1.0

package/dist/module.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { createContext, useContext, useRef, useState, useCallback, useEffect, useMemo } from 'react';
+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 * as RadixPopover from '@radix-ui/react-popover';
-import { Anchor, Trigger as Trigger$1, Portal as Portal$1 } from '@radix-ui/react-popover';
 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 { useControllableState } from '@radix-ui/react-use-controllable-state';
@@ -13,17 +13,15 @@ import { ScrollArea } from '@mirohq/design-system-scroll-area';
 import { Primitive } from '@mirohq/design-system-primitive';
 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 StyledAnchor = styled(Anchor, {
-  position: "relative",
-  width: "100%"
-});
 const StyledInput = styled(Input, {
   flexWrap: "wrap",
   flexGrow: 1,
-  gap: "0 $50",
+  gap: "$50",
   overflowY: "scroll",
   "&[data-valid], &[data-invalid]": {
     // we don't need a bigger padding here as Input component will render its own icon
@@ -92,6 +90,9 @@ const ComboboxProvider = ({
   });
   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,
@@ -113,7 +114,13 @@ const ComboboxProvider = ({
         searchValue,
         setSearchValue,
         filteredItems,
-        setFilteredItems
+        setFilteredItems,
+        itemValueTextMap,
+        setItemValueTextMap,
+        placeholder,
+        setPlaceholder,
+        size,
+        setSize
       },
       children
     }
@@ -197,7 +204,6 @@ const Trigger = React.forwardRef(
     closeActionLabel,
     clearActionLabel,
     onChange,
-    css,
     ...restProps
   }, forwardRef) => {
     const {
@@ -211,16 +217,21 @@ const Trigger = React.forwardRef(
       onSearchValueChange,
       searchValue,
       setSearchValue,
-      setOpenState
+      setOpenState,
+      setSize,
+      setPlaceholder
     } = useComboboxContext();
     const {
       formElementId,
       ariaInvalid: formFieldAriaInvalid,
-      valid: formFieldValid,
-      label,
-      isFloatingLabel,
-      focused
+      valid: formFieldValid
     } = useFormFieldContext();
+    useEffect(() => {
+      setSize(size);
+    }, [size, setSize]);
+    useEffect(() => {
+      setPlaceholder(placeholder);
+    }, [setPlaceholder, placeholder]);
     const valid = formFieldValid != null ? formFieldValid : comboboxValid;
     const inputProps = {
       ...restProps,
@@ -235,8 +246,6 @@ const Trigger = React.forwardRef(
       id: id != null ? id : formElementId,
       placeholder: value.length === 0 ? placeholder : void 0
     };
-    const shouldUseFloatingLabel = label !== null && isFloatingLabel;
-    const isFloating = placeholder !== void 0 || value.length !== 0 || focused || searchValue !== "";
     const scrollIntoView = (event) => {
       var _a;
       const trigger = triggerRef == null ? void 0 : triggerRef.current;
@@ -256,47 +265,43 @@ const Trigger = React.forwardRef(
       onSearchValueChange == null ? void 0 : onSearchValueChange(e.target.value);
       onChange == null ? void 0 : onChange(e);
     };
-    return /* @__PURE__ */ jsxs(
-      StyledAnchor,
+    return /* @__PURE__ */ jsx(
+      Anchor,
       {
         ref: mergeRefs([triggerRef, forwardRef]),
-        css,
         onClick: () => {
           if (!booleanify(disabled) && !booleanify(ariaDisabled) && !booleanify(readOnly)) {
             setOpenState(true);
           }
         },
-        children: [
-          shouldUseFloatingLabel && /* @__PURE__ */ jsx(FloatingLabel, { floating: isFloating, size, children: label }),
-          /* @__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
-                      }
-                    )
-                  ]
-                }
-              )
-            }
-          )
-        ]
+        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
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
       }
     );
   }
@@ -362,7 +367,24 @@ const StyledItem = styled(ComboboxItem, {
 const Item = React.forwardRef(
   ({ disabled = false, value, textValue, children, ...restProps }, forwardRef) => {
     const { "aria-disabled": ariaDisabled, ...restAriaDisabledProps } = useAriaDisabled(restProps, { allowArrows: true });
-    const { autoFilter, filteredItems, triggerRef, inputRef } = useComboboxContext();
+    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;
     }
@@ -377,6 +399,7 @@ const Item = React.forwardRef(
         restProps.onClick(event);
       }
     };
+    const isSelected = comboboxValue.includes(value);
     return /* @__PURE__ */ jsxs(
       StyledItem,
       {
@@ -388,10 +411,12 @@ const Item = React.forwardRef(
         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 })
@@ -434,6 +459,22 @@ const getChildrenItemValues = (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;
@@ -441,9 +482,16 @@ const isInsideRef = (element, ref) => {
 };
 const Content = React.forwardRef(
   ({
+    side = "bottom",
     sideOffset = CONTENT_OFFSET,
+    align = "center",
+    alignOffset = 0,
+    collisionPadding = 0,
+    avoidCollisions = true,
+    sticky = "partial",
+    hideWhenDetached = true,
+    overflow = "visible",
     maxHeight,
-    overflow,
     children,
     ...restProps
   }, forwardRef) => {
@@ -455,7 +503,8 @@ const Content = React.forwardRef(
       setFilteredItems,
       searchValue,
       noResultsText,
-      direction
+      direction,
+      openState
     } = useComboboxContext();
     useEffect(() => {
       const childrenItemValues = getChildrenItemValues(children);
@@ -467,14 +516,28 @@ const Content = React.forwardRef(
         )
       );
     }, [children, autoFilter, setFilteredItems, searchValue]);
-    const content = filteredItems.size === 0 ? /* @__PURE__ */ jsx(NoResultPlaceholder, { children: noResultsText }) : children;
+    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) => {
@@ -520,8 +583,9 @@ const Group = React.forwardRef(({ children, ...rest }, forwardRef) => {
     ),
     [childValues, filteredItems, autoFilter]
   );
+  const getInvisibleContent = useInvisibleContent();
   if (!hasVisibleChildren) {
-    return null;
+    return getInvisibleContent(children);
   }
   return /* @__PURE__ */ jsx(StyledGroup, { ...rest, ref: forwardRef, children });
 });
@@ -573,35 +637,45 @@ const Chip = React.forwardRef(
 );
 Chip.LeftSlot = LeftSlot;
 
-const StyledValue = styled(Chip, {
-  marginTop: "$50"
-});
-
 const Value = ({ unselectAriaLabel }) => {
   const {
     value = [],
     setValue,
     disabled,
-    "aria-disabled": ariaDisabled
+    "aria-disabled": ariaDisabled,
+    itemValueTextMap
   } = useComboboxContext();
   const isDisabled = ariaDisabled === true || disabled;
-  const onItemRemove = (item) => {
-    setValue((prevValue) => prevValue == null ? void 0 : prevValue.filter((value2) => value2 !== item));
-  };
-  if (value.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Fragment, { children: value.map((item) => /* @__PURE__ */ jsx(
-    StyledValue,
-    {
-      onRemove: () => onItemRemove(item),
-      disabled: isDisabled,
-      removeAriaLabel: "".concat(unselectAriaLabel, " ").concat(item),
-      "data-testid": process.env.NODE_ENV === "test" ? "combobox-value-".concat(item) : void 0,
-      children: item
+  const onItemRemove = useCallback(
+    (item) => {
+      setValue((prevValue) => prevValue == null ? void 0 : prevValue.filter((value2) => value2 !== item));
     },
-    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 StyledSeparator = styled(Primitive.div, {
@@ -619,53 +693,71 @@ const Separator = React.forwardRef((props, forwardRef) => {
   return /* @__PURE__ */ jsx(StyledSeparator, { ...props, ref: forwardRef, "aria-hidden": true });
 });
 
-const Root = ({
-  value: valueProp,
-  children,
-  ...restProps
-}) => {
-  const {
-    openState,
-    setOpenState,
-    defaultValue,
-    value,
-    setValue,
-    required,
-    readOnly,
-    "aria-disabled": ariaDisabled,
-    disabled
-  } = useComboboxContext();
-  const { setRequired, setDisabled, setAriaDisabled, setReadOnly } = useFormFieldContext();
-  useEffect(() => {
-    setRequired == null ? void 0 : setRequired(required);
-    setDisabled == null ? void 0 : setDisabled(disabled);
-    setAriaDisabled == null ? void 0 : setAriaDisabled(ariaDisabled);
-    setReadOnly == null ? void 0 : setReadOnly(readOnly);
-  }, [
-    readOnly,
-    disabled,
-    ariaDisabled,
-    required,
-    setRequired,
-    setDisabled,
-    setAriaDisabled,
-    setReadOnly
-  ]);
-  const onSetSelectedValue = (newValue) => {
-    setValue(typeof newValue === "string" ? [newValue] : newValue);
-  };
-  const onOpenChange = (value2) => {
-    if (!booleanify(readOnly)) {
-      setOpenState(value2);
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    RadixPopover.Root,
-    {
-      open: openState,
-      onOpenChange,
-      ...restProps,
-      children: /* @__PURE__ */ jsx(
+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(
+  ({ value: valueProp, onValueChange, name, children, ...restProps }, forwardRef) => {
+    var _a;
+    const {
+      openState,
+      setOpenState,
+      defaultValue,
+      value = [],
+      setValue,
+      required,
+      readOnly,
+      "aria-disabled": ariaDisabled,
+      disabled,
+      direction,
+      size,
+      placeholder,
+      triggerRef
+    } = useComboboxContext();
+    const {
+      setRequired,
+      setDisabled,
+      setAriaDisabled,
+      setReadOnly,
+      label,
+      isFloatingLabel,
+      focused,
+      formElementRef
+    } = useFormFieldContext();
+    useEffect(() => {
+      setRequired == null ? void 0 : setRequired(required);
+      setDisabled == null ? void 0 : setDisabled(disabled);
+      setAriaDisabled == null ? void 0 : setAriaDisabled(ariaDisabled);
+      setReadOnly == null ? void 0 : setReadOnly(readOnly);
+    }, [
+      readOnly,
+      disabled,
+      ariaDisabled,
+      required,
+      setRequired,
+      setDisabled,
+      setAriaDisabled,
+      setReadOnly
+    ]);
+    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,
@@ -673,51 +765,86 @@ const Root = ({
           defaultSelectedValue: defaultValue,
           selectedValue: value,
           setSelectedValue: onSetSelectedValue,
-          children
+          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 = ({
-  "aria-disabled": ariaDisabled,
-  defaultOpen = false,
-  open,
-  valid,
-  disabled,
-  readOnly,
-  required,
-  value,
-  defaultValue,
-  onOpen,
-  onClose,
-  onSearchValueChange,
-  onValueChange,
-  direction = "ltr",
-  autoFilter = true,
-  noResultsText,
-  ...restProps
-}) => /* @__PURE__ */ jsx(
-  ComboboxProvider,
-  {
-    defaultValue,
-    value,
-    onValueChange,
-    onSearchValueChange,
-    defaultOpen,
+    ] });
+  }
+);
+const Combobox = React.forwardRef(
+  ({
+    "aria-disabled": ariaDisabled,
+    defaultOpen = false,
     open,
-    onOpen,
-    onClose,
     valid,
-    required,
     disabled,
     readOnly,
-    "aria-disabled": ariaDisabled,
-    direction,
-    autoFilter,
+    required,
+    value,
+    defaultValue,
+    onOpen,
+    onClose,
+    onSearchValueChange,
+    onValueChange,
+    direction = "ltr",
+    autoFilter = true,
     noResultsText,
-    children: /* @__PURE__ */ jsx(Root, { ...restProps, value })
-  }
+    ...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 })
+    }
+  )
 );
 Combobox.Portal = Portal;
 Combobox.Trigger = Trigger;