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

package/dist/main.js

@@ -13,10 +13,12 @@ var designSystemInput = require('@mirohq/design-system-input');
 var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var designSystemIcons = require('@mirohq/design-system-icons');
 var designSystemScrollArea = require('@mirohq/design-system-scroll-area');
+var designSystemPrimitive = require('@mirohq/design-system-primitive');
 var utils = require('@react-aria/utils');
 var designSystemUseAriaDisabled = require('@mirohq/design-system-use-aria-disabled');
+var designSystemUseLayoutEffect = require('@mirohq/design-system-use-layout-effect');
 var designSystemStyles = require('@mirohq/design-system-styles');
-var designSystemPrimitive = require('@mirohq/design-system-primitive');
+var reactDom = require('react-dom');
 var designSystemBaseButton = require('@mirohq/design-system-base-button');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -118,6 +120,7 @@ const ComboboxProvider = ({
   });
   const [filteredItems, setFilteredItems] = React.useState(/* @__PURE__ */ new Set());
   const [searchValue, setSearchValue] = React.useState("");
+  const [itemValueTextMap, setItemValueTextMap] = React.useState(/* @__PURE__ */ new Map());
   const { valid: formFieldValid } = designSystemBaseForm.useFormFieldContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
     ComboboxContext.Provider,
@@ -139,7 +142,9 @@ const ComboboxProvider = ({
         searchValue,
         setSearchValue,
         filteredItems,
-        setFilteredItems
+        setFilteredItems,
+        itemValueTextMap,
+        setItemValueTextMap
       },
       children
     }
@@ -167,25 +172,48 @@ const StyledActionButton = designSystemStitches.styled(designSystemInput.Input.A
 
 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 ? designSystemIcons.IconChevronDown : designSystemIcons.IconCross;
-  const label = isEmpty ? openActionLabel : clearActionLabel;
-  const onActionButtonClick = React.useCallback(
+  const onToggleClick = React.useCallback(
     (event) => {
-      if (!isEmpty) {
-        setValue([]);
-      } else {
-        setOpenState((prevOpen = false) => !prevOpen);
+      if (openState) {
+        setOpenState(false);
       }
       event.stopPropagation();
     },
-    [isEmpty, setValue, setOpenState]
+    [setOpenState, openState]
+  );
+  const onClearClick = React.useCallback(
+    (event) => {
+      setValue([]);
+      event.stopPropagation();
+    },
+    [setValue]
+  );
+  if (isEmpty) {
+    return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover.Trigger, { asChild: true, "aria-haspopup": "listbox", children: /* @__PURE__ */ jsxRuntime.jsx(
+      StyledActionButton,
+      {
+        label: openState ? closeActionLabel : openActionLabel,
+        size,
+        onClick: onToggleClick,
+        children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronDown, { size: "small", weight: "thin" })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledActionButton,
+    {
+      label: clearActionLabel,
+      size,
+      onClick: onClearClick,
+      children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCross, { size: "small", weight: "thin" })
+    }
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledActionButton, { label, size, onClick: onActionButtonClick, children: /* @__PURE__ */ jsxRuntime.jsx(ActionButtonIcon, { size: "small", weight: "thin" }) });
 };
 
 const Trigger = React__default["default"].forwardRef(
@@ -197,6 +225,7 @@ const Trigger = React__default["default"].forwardRef(
     "aria-invalid": ariaInvalid,
     placeholder,
     openActionLabel,
+    closeActionLabel,
     clearActionLabel,
     onChange,
     css,
@@ -217,7 +246,6 @@ const Trigger = React__default["default"].forwardRef(
     } = useComboboxContext();
     const {
       formElementId,
-      ariaDescribedBy: formFieldContextDescribedBy,
       ariaInvalid: formFieldAriaInvalid,
       valid: formFieldValid,
       label,
@@ -229,10 +257,8 @@ const Trigger = React__default["default"].forwardRef(
       ...restProps,
       "aria-disabled": ariaDisabled,
       "aria-invalid": ariaInvalid != null ? ariaInvalid : formFieldAriaInvalid,
-      "aria-describedby": designSystemUtils.stringAttrValue(
-        ariaDescribedBy,
-        formFieldContextDescribedBy
-      ),
+      // todo MDS-1011: use formFieldContextDescribedBy after removing form context from BaseInput
+      "aria-describedby": ariaDescribedBy,
       valid,
       disabled,
       readOnly,
@@ -291,6 +317,7 @@ const Trigger = React__default["default"].forwardRef(
                       TriggerActionButton,
                       {
                         openActionLabel,
+                        closeActionLabel,
                         clearActionLabel,
                         size
                       }
@@ -306,6 +333,9 @@ const Trigger = React__default["default"].forwardRef(
   }
 );
 
+const NoResultPlaceholder = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  padding: "$100"
+});
 const StyledContent = designSystemStitches.styled(RadixPopover__namespace.Content, {
   backgroundColor: "$background-neutrals-container",
   borderRadius: "$50",
@@ -363,7 +393,23 @@ const StyledItem = designSystemStitches.styled(react.ComboboxItem, {
 const Item = React__default["default"].forwardRef(
   ({ disabled = false, value, textValue, children, ...restProps }, forwardRef) => {
     const { "aria-disabled": ariaDisabled, ...restAriaDisabledProps } = designSystemUseAriaDisabled.useAriaDisabled(restProps, { allowArrows: true });
-    const { autoFilter, filteredItems, triggerRef, inputRef } = useComboboxContext();
+    const {
+      autoFilter,
+      filteredItems,
+      setItemValueTextMap,
+      triggerRef,
+      inputRef
+    } = useComboboxContext();
+    designSystemUseLayoutEffect.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;
     }
@@ -435,13 +481,35 @@ const getChildrenItemValues = (componentChildren) => {
   return values;
 };
 
+const useDocumentFragment = () => {
+  const [fragment, setFragment] = React__default["default"].useState();
+  designSystemUseLayoutEffect.useLayoutEffect(() => {
+    setFragment(new DocumentFragment());
+  }, []);
+  return fragment;
+};
+
+const useInvisibleContent = () => {
+  const fragment = useDocumentFragment();
+  return React.useCallback(
+    (children) => fragment !== void 0 ? reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx("div", { children }), fragment) : null,
+    [fragment]
+  );
+};
+
 const CONTENT_OFFSET = parseInt(designSystemStitches.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__default["default"].forwardRef(
-  ({ sideOffset = CONTENT_OFFSET, maxHeight, children, ...restProps }, forwardRef) => {
+  ({
+    sideOffset = CONTENT_OFFSET,
+    maxHeight,
+    overflow,
+    children,
+    ...restProps
+  }, forwardRef) => {
     const {
       triggerRef,
       contentRef,
@@ -450,7 +518,8 @@ const Content = React__default["default"].forwardRef(
       setFilteredItems,
       searchValue,
       noResultsText,
-      direction
+      direction,
+      openState
     } = useComboboxContext();
     React.useEffect(() => {
       const childrenItemValues = getChildrenItemValues(children);
@@ -462,11 +531,20 @@ const Content = React__default["default"].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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(NoResultPlaceholder, { children: noResultsText }),
+      getInvisibleContent(children)
+    ] }) : children;
     return /* @__PURE__ */ jsxRuntime.jsx(
       StyledContent,
       {
+        asChild: true,
         ...restProps,
+        dir: direction,
         sideOffset,
         ref: designSystemUtils.mergeRefs([forwardRef, contentRef]),
         onOpenAutoFocus: (event) => event.preventDefault(),
@@ -478,7 +556,7 @@ const Content = React__default["default"].forwardRef(
             event.preventDefault();
           }
         },
-        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystemScrollArea.ScrollArea, { type: "always", dir: direction, children: [
+        children: /* @__PURE__ */ jsxRuntime.jsx(react.ComboboxList, { role: "listbox", children: overflow === "auto" ? /* @__PURE__ */ jsxRuntime.jsxs(designSystemScrollArea.ScrollArea, { type: "always", dir: direction, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             designSystemScrollArea.ScrollArea.Viewport,
             {
@@ -489,7 +567,7 @@ const Content = React__default["default"].forwardRef(
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(designSystemScrollArea.ScrollArea.Scrollbar, { orientation: "vertical", children: /* @__PURE__ */ jsxRuntime.jsx(designSystemScrollArea.ScrollArea.Thumb, {}) })
-        ] })
+        ] }) : content })
       }
     );
   }
@@ -497,6 +575,8 @@ const Content = React__default["default"].forwardRef(
 
 const Portal = (props) => /* @__PURE__ */ jsxRuntime.jsx(RadixPopover.Portal, { ...props });
 
+const StyledGroup = designSystemStitches.styled(react.Group);
+
 const Group = React__default["default"].forwardRef(({ children, ...rest }, forwardRef) => {
   const { autoFilter, filteredItems } = useComboboxContext();
   const childValues = React.useMemo(
@@ -511,10 +591,11 @@ const Group = React__default["default"].forwardRef(({ children, ...rest }, forwa
     ),
     [childValues, filteredItems, autoFilter]
   );
+  const getInvisibleContent = useInvisibleContent();
   if (!hasVisibleChildren) {
-    return null;
+    return getInvisibleContent(children);
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Group, { ...rest, ref: forwardRef, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledGroup, { ...rest, ref: forwardRef, children });
 });
 
 const StyledGroupLabel = designSystemStitches.styled(react.GroupLabel, {
@@ -533,13 +614,13 @@ const StyledChip = designSystemStitches.styled(designSystemPrimitive.Primitive.d
   gap: "$50",
   whiteSpace: "nowrap",
   maxWidth: "$35",
-  background: "$gray-100",
-  color: "$gray-900"
+  backgroundColor: "$background-neutrals-subtle",
+  color: "$text-neutrals"
 });
 const StyledChipButton = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
+  color: "$icon-neutrals-inactive",
   ...designSystemStyles.focus.css({
-    boxShadow: "$focus-small-outline",
-    borderColor: "$blue-400 !important"
+    boxShadow: "$focus-small-outline"
   })
 });
 const StyledChipContent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
@@ -557,9 +638,9 @@ const StyledLeftSlot = designSystemStitches.styled(designSystemPrimitive.Primiti
 const LeftSlot = StyledLeftSlot;
 
 const Chip = React__default["default"].forwardRef(
-  ({ children, disabled = false, onRemove, removeChipAriaLabel, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsxs(StyledChip, { ...restProps, ref: forwardRef, children: [
+  ({ children, disabled = false, onRemove, removeAriaLabel, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsxs(StyledChip, { ...restProps, ref: forwardRef, children: [
     /* @__PURE__ */ jsxRuntime.jsx(StyledChipContent, { children }),
-    !designSystemUtils.booleanify(disabled) && /* @__PURE__ */ jsxRuntime.jsx(StyledChipButton, { onClick: onRemove, "aria-label": removeChipAriaLabel, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCross, { size: "small", weight: "thin", color: "gray-500" }) })
+    !designSystemUtils.booleanify(disabled) && /* @__PURE__ */ jsxRuntime.jsx(StyledChipButton, { onClick: onRemove, "aria-label": removeAriaLabel, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCross, { size: "small", weight: "thin", "aria-hidden": true }) })
   ] })
 );
 Chip.LeftSlot = LeftSlot;
@@ -568,31 +649,42 @@ const StyledValue = designSystemStitches.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value.map((item) => /* @__PURE__ */ jsxRuntime.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 = React.useCallback(
+    (item) => {
+      setValue((prevValue) => prevValue == null ? void 0 : prevValue.filter((value2) => value2 !== item));
     },
-    item
-  )) });
+    [setValue]
+  );
+  const getItemText = React.useCallback(
+    (itemValue) => {
+      const textValue = itemValueTextMap.get(itemValue);
+      if (textValue === void 0 || textValue === "") {
+        return null;
+      }
+      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value.map(getItemText) });
 };
 
 const StyledSeparator = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {