@mirohq/design-system-combobox 0.1.0-combobox.7 → 0.1.0-combobox.9

package/dist/module.js

@@ -1,19 +1,21 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { createContext, useContext, useRef, useState, useCallback, useEffect, useMemo } from 'react';
-import { Combobox as Combobox$1, ComboboxItem, ComboboxItemCheck, Group as Group$1, GroupLabel as GroupLabel$1, ComboboxProvider as ComboboxProvider$1 } from '@ariakit/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, Portal as Portal$1 } from '@radix-ui/react-popover';
-import { stringAttrValue, booleanishAttrValue, mergeRefs, booleanify } from '@mirohq/design-system-utils';
+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 { styled, theme } from '@mirohq/design-system-stitches';
 import { Input } from '@mirohq/design-system-input';
 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 { 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 { Primitive } from '@mirohq/design-system-primitive';
+import { createPortal } from 'react-dom';
 import { BaseButton } from '@mirohq/design-system-base-button';
 
 const StyledAnchor = styled(Anchor, {
@@ -92,6 +94,7 @@ const ComboboxProvider = ({
   });
   const [filteredItems, setFilteredItems] = useState(/* @__PURE__ */ new Set());
   const [searchValue, setSearchValue] = useState("");
+  const [itemValueTextMap, setItemValueTextMap] = useState(/* @__PURE__ */ new Map());
   const { valid: formFieldValid } = useFormFieldContext();
   return /* @__PURE__ */ jsx(
     ComboboxContext.Provider,
@@ -113,7 +116,9 @@ const ComboboxProvider = ({
         searchValue,
         setSearchValue,
         filteredItems,
-        setFilteredItems
+        setFilteredItems,
+        itemValueTextMap,
+        setItemValueTextMap
       },
       children
     }
@@ -141,25 +146,48 @@ const StyledActionButton = styled(Input.ActionButton, {
 
 const TriggerActionButton = ({
   openActionLabel,
+  closeActionLabel,
   clearActionLabel,
   size
 }) => {
-  const { setOpenState, value = [], setValue } = useComboboxContext();
+  const { openState, setOpenState, value = [], setValue } = useComboboxContext();
   const isEmpty = value.length === 0;
-  const ActionButtonIcon = isEmpty ? IconChevronDown : IconCross;
-  const label = isEmpty ? openActionLabel : clearActionLabel;
-  const onActionButtonClick = useCallback(
+  const onToggleClick = useCallback(
     (event) => {
-      if (!isEmpty) {
-        setValue([]);
-      } else {
-        setOpenState((prevOpen = false) => !prevOpen);
+      if (openState) {
+        setOpenState(false);
       }
       event.stopPropagation();
     },
-    [isEmpty, setValue, setOpenState]
+    [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" })
+    }
   );
-  return /* @__PURE__ */ jsx(StyledActionButton, { label, size, onClick: onActionButtonClick, children: /* @__PURE__ */ jsx(ActionButtonIcon, { size: "small", weight: "thin" }) });
 };
 
 const Trigger = React.forwardRef(
@@ -171,6 +199,7 @@ const Trigger = React.forwardRef(
     "aria-invalid": ariaInvalid,
     placeholder,
     openActionLabel,
+    closeActionLabel,
     clearActionLabel,
     onChange,
     css,
@@ -191,7 +220,6 @@ const Trigger = React.forwardRef(
     } = useComboboxContext();
     const {
       formElementId,
-      ariaDescribedBy: formFieldContextDescribedBy,
       ariaInvalid: formFieldAriaInvalid,
       valid: formFieldValid,
       label,
@@ -203,10 +231,8 @@ const Trigger = React.forwardRef(
       ...restProps,
       "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,
@@ -265,6 +291,7 @@ const Trigger = React.forwardRef(
                       TriggerActionButton,
                       {
                         openActionLabel,
+                        closeActionLabel,
                         clearActionLabel,
                         size
                       }
@@ -280,6 +307,9 @@ const Trigger = React.forwardRef(
   }
 );
 
+const NoResultPlaceholder = styled(Primitive.div, {
+  padding: "$100"
+});
 const StyledContent = styled(RadixPopover.Content, {
   backgroundColor: "$background-neutrals-container",
   borderRadius: "$50",
@@ -337,7 +367,23 @@ 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
+    } = 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;
     }
@@ -409,13 +455,35 @@ 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;
   return (_b = element != null && ((_a = ref.current) == null ? void 0 : _a.contains(element))) != null ? _b : false;
 };
 const Content = React.forwardRef(
-  ({ sideOffset = CONTENT_OFFSET, maxHeight, children, ...restProps }, forwardRef) => {
+  ({
+    sideOffset = CONTENT_OFFSET,
+    maxHeight,
+    overflow,
+    children,
+    ...restProps
+  }, forwardRef) => {
     const {
       triggerRef,
       contentRef,
@@ -424,7 +492,8 @@ const Content = React.forwardRef(
       setFilteredItems,
       searchValue,
       noResultsText,
-      direction
+      direction,
+      openState
     } = useComboboxContext();
     useEffect(() => {
       const childrenItemValues = getChildrenItemValues(children);
@@ -436,11 +505,20 @@ const Content = React.forwardRef(
         )
       );
     }, [children, autoFilter, setFilteredItems, searchValue]);
-    const content = filteredItems.size === 0 ? 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,
         sideOffset,
         ref: mergeRefs([forwardRef, contentRef]),
         onOpenAutoFocus: (event) => event.preventDefault(),
@@ -452,7 +530,7 @@ const Content = React.forwardRef(
             event.preventDefault();
           }
         },
-        children: /* @__PURE__ */ jsxs(ScrollArea, { type: "always", dir: direction, children: [
+        children: /* @__PURE__ */ jsx(ComboboxList, { role: "listbox", children: overflow === "auto" ? /* @__PURE__ */ jsxs(ScrollArea, { type: "always", dir: direction, children: [
           /* @__PURE__ */ jsx(
             ScrollArea.Viewport,
             {
@@ -463,7 +541,7 @@ const Content = React.forwardRef(
             }
           ),
           /* @__PURE__ */ jsx(ScrollArea.Scrollbar, { orientation: "vertical", children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {}) })
-        ] })
+        ] }) : content })
       }
     );
   }
@@ -471,6 +549,8 @@ const Content = React.forwardRef(
 
 const Portal = (props) => /* @__PURE__ */ jsx(Portal$1, { ...props });
 
+const StyledGroup = styled(Group$1);
+
 const Group = React.forwardRef(({ children, ...rest }, forwardRef) => {
   const { autoFilter, filteredItems } = useComboboxContext();
   const childValues = useMemo(
@@ -485,10 +565,11 @@ const Group = React.forwardRef(({ children, ...rest }, forwardRef) => {
     ),
     [childValues, filteredItems, autoFilter]
   );
+  const getInvisibleContent = useInvisibleContent();
   if (!hasVisibleChildren) {
-    return null;
+    return getInvisibleContent(children);
   }
-  return /* @__PURE__ */ jsx(Group$1, { ...rest, ref: forwardRef, children });
+  return /* @__PURE__ */ jsx(StyledGroup, { ...rest, ref: forwardRef, children });
 });
 
 const StyledGroupLabel = styled(GroupLabel$1, {
@@ -507,13 +588,13 @@ const StyledChip = styled(Primitive.div, {
   gap: "$50",
   whiteSpace: "nowrap",
   maxWidth: "$35",
-  background: "$gray-100",
-  color: "$gray-900"
+  backgroundColor: "$background-neutrals-subtle",
+  color: "$text-neutrals"
 });
 const StyledChipButton = styled(BaseButton, {
+  color: "$icon-neutrals-inactive",
   ...focus.css({
-    boxShadow: "$focus-small-outline",
-    borderColor: "$blue-400 !important"
+    boxShadow: "$focus-small-outline"
   })
 });
 const StyledChipContent = styled(Primitive.div, {
@@ -531,9 +612,9 @@ const StyledLeftSlot = styled(Primitive.span, {
 const LeftSlot = StyledLeftSlot;
 
 const Chip = React.forwardRef(
-  ({ children, disabled = false, onRemove, removeChipAriaLabel, ...restProps }, forwardRef) => /* @__PURE__ */ jsxs(StyledChip, { ...restProps, ref: forwardRef, children: [
+  ({ 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": removeChipAriaLabel, children: /* @__PURE__ */ jsx(IconCross, { size: "small", weight: "thin", color: "gray-500" }) })
+    !booleanify(disabled) && /* @__PURE__ */ jsx(StyledChipButton, { onClick: onRemove, "aria-label": removeAriaLabel, children: /* @__PURE__ */ jsx(IconCross, { size: "small", weight: "thin", "aria-hidden": true }) })
   ] })
 );
 Chip.LeftSlot = LeftSlot;
@@ -542,31 +623,42 @@ const StyledValue = styled(Chip, {
   marginTop: "$50"
 });
 
-const Value = ({ removeChipAriaLabel }) => {
+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,
-      removeChipAriaLabel,
-      "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(
+        StyledValue,
+        {
+          onRemove: () => onItemRemove(itemValue),
+          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, {