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

package/dist/main.js

@@ -6,17 +6,17 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var react = require('@ariakit/react');
 var designSystemBaseForm = require('@mirohq/design-system-base-form');
-var designSystemUtils = require('@mirohq/design-system-utils');
 var RadixPopover = require('@radix-ui/react-popover');
+var designSystemUtils = require('@mirohq/design-system-utils');
 var designSystemStitches = require('@mirohq/design-system-stitches');
 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 designSystemStyles = require('@mirohq/design-system-styles');
-var designSystemPrimitive = require('@mirohq/design-system-primitive');
 var designSystemBaseButton = require('@mirohq/design-system-base-button');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -42,6 +42,10 @@ function _interopNamespace(e) {
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var RadixPopover__namespace = /*#__PURE__*/_interopNamespace(RadixPopover);
 
+const StyledAnchor = designSystemStitches.styled(RadixPopover.Anchor, {
+  position: "relative",
+  width: "100%"
+});
 const StyledInput = designSystemStitches.styled(designSystemInput.Input, {
   flexWrap: "wrap",
   flexGrow: 1,
@@ -163,25 +167,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(
@@ -193,8 +220,10 @@ const Trigger = React__default["default"].forwardRef(
     "aria-invalid": ariaInvalid,
     placeholder,
     openActionLabel,
+    closeActionLabel,
     clearActionLabel,
     onChange,
+    css,
     ...restProps
   }, forwardRef) => {
     const {
@@ -202,15 +231,16 @@ const Trigger = React__default["default"].forwardRef(
       valid: comboboxValid,
       disabled,
       value = [],
+      readOnly,
       triggerRef,
       inputRef,
       onSearchValueChange,
       searchValue,
-      setSearchValue
+      setSearchValue,
+      setOpenState
     } = useComboboxContext();
     const {
       formElementId,
-      ariaDescribedBy: formFieldContextDescribedBy,
       ariaInvalid: formFieldAriaInvalid,
       valid: formFieldValid,
       label,
@@ -222,18 +252,17 @@ 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,
       invalid: designSystemUtils.booleanishAttrValue(valid),
       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;
+    const isFloating = placeholder !== void 0 || value.length !== 0 || focused || searchValue !== "";
     const scrollIntoView = (event) => {
       var _a;
       const trigger = triggerRef == null ? void 0 : triggerRef.current;
@@ -253,73 +282,85 @@ const Trigger = React__default["default"].forwardRef(
       onSearchValueChange == null ? void 0 : onSearchValueChange(e.target.value);
       onChange == null ? void 0 : onChange(e);
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs(RadixPopover__namespace.Anchor, { ref: designSystemUtils.mergeRefs([triggerRef, forwardRef]), children: [
-      shouldUseFloatingLabel && /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseForm.FloatingLabel, { floating: isFloating, size, children: label }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        react.Combobox,
-        {
-          render: /* @__PURE__ */ jsxRuntime.jsxs(
-            StyledInput,
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      StyledAnchor,
+      {
+        ref: designSystemUtils.mergeRefs([triggerRef, forwardRef]),
+        css,
+        onClick: () => {
+          if (!designSystemUtils.booleanify(disabled) && !designSystemUtils.booleanify(ariaDisabled) && !designSystemUtils.booleanify(readOnly)) {
+            setOpenState(true);
+          }
+        },
+        children: [
+          shouldUseFloatingLabel && /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseForm.FloatingLabel, { floating: isFloating, size, children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            react.Combobox,
             {
-              ...inputProps,
-              value: searchValue,
-              size,
-              ref: inputRef,
-              onChange: onInputChange,
-              onFocus: scrollIntoView,
-              children: [
-                children,
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  TriggerActionButton,
-                  {
-                    openActionLabel,
-                    clearActionLabel,
-                    size
-                  }
-                )
-              ]
+              render: /* @__PURE__ */ jsxRuntime.jsxs(
+                StyledInput,
+                {
+                  ...inputProps,
+                  value: searchValue,
+                  size,
+                  ref: inputRef,
+                  onChange: onInputChange,
+                  onFocus: scrollIntoView,
+                  children: [
+                    children,
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      TriggerActionButton,
+                      {
+                        openActionLabel,
+                        closeActionLabel,
+                        clearActionLabel,
+                        size
+                      }
+                    )
+                  ]
+                }
+              )
             }
           )
-        }
-      )
-    ] });
+        ]
+      }
+    );
   }
 );
 
+const NoResultPlaceholder = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  padding: "$100"
+});
 const StyledContent = designSystemStitches.styled(RadixPopover__namespace.Content, {
   backgroundColor: "$background-neutrals-container",
   borderRadius: "$50",
   boxShadow: "$50",
   fontSize: "$175",
   fontWeight: "normal",
-  lineHeight: "1.5",
+  lineHeight: "20px",
   width: "var(--radix-popover-trigger-width)",
   zIndex: "$select",
   overflowY: "auto",
-  padding: "$150",
+  padding: "$50",
   boxSizing: "border-box",
   outline: "1px solid transparent"
 });
 
 const StyledItemCheck = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
-  color: "$icon-primary",
-  paddingX: "$100"
+  color: "$icon-primary"
 });
 const StyledItem = designSystemStitches.styled(react.ComboboxItem, {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  gap: "$200",
+  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",
-  paddingX: "$100",
-  paddingY: "10px",
+  padding: "6px $100 6px $150",
   ...designSystemStyles.focus.css({
     boxShadow: "$focus-small"
   }),
@@ -334,7 +375,13 @@ const StyledItem = designSystemStitches.styled(react.ComboboxItem, {
   },
   "&:disabled, &[aria-disabled=true], &[data-disabled]": {
     cursor: "default",
-    color: "$text-neutrals-disabled"
+    color: "$text-neutrals-disabled",
+    ["".concat(StyledItemCheck)]: {
+      color: "$icon-neutrals-disabled"
+    }
+  },
+  '&[aria-selected="true"]:not(:disabled,[aria-disabled=true],[data-disabled])': {
+    color: "$text-primary-selected"
   }
 });
 
@@ -361,13 +408,13 @@ const Item = React__default["default"].forwardRef(
       {
         ...utils.mergeProps(restProps, restAriaDisabledProps),
         focusable: true,
-        accessibleWhenDisabled: ariaDisabled === true,
-        disabled: ariaDisabled === true || disabled,
+        hideOnClick: false,
+        accessibleWhenDisabled: designSystemUtils.booleanify(ariaDisabled),
+        disabled: designSystemUtils.booleanify(ariaDisabled) || disabled,
         ref: forwardRef,
         value,
         onClick: scrollIntoView,
         children: [
-          children,
           /* @__PURE__ */ jsxRuntime.jsx(
             react.ComboboxItemCheck,
             {
@@ -383,7 +430,8 @@ const Item = React__default["default"].forwardRef(
                 }
               )
             }
-          )
+          ),
+          children
         ]
       }
     );
@@ -418,7 +466,13 @@ const isInsideRef = (element, ref) => {
   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,
@@ -439,11 +493,13 @@ const Content = React__default["default"].forwardRef(
         )
       );
     }, [children, autoFilter, setFilteredItems, searchValue]);
-    const content = filteredItems.size === 0 ? noResultsText : children;
+    const content = filteredItems.size === 0 ? /* @__PURE__ */ jsxRuntime.jsx(NoResultPlaceholder, { children: noResultsText }) : children;
     return /* @__PURE__ */ jsxRuntime.jsx(
       StyledContent,
       {
+        asChild: true,
         ...restProps,
+        dir: direction,
         sideOffset,
         ref: designSystemUtils.mergeRefs([forwardRef, contentRef]),
         onOpenAutoFocus: (event) => event.preventDefault(),
@@ -455,18 +511,18 @@ 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,
             {
               availableHeight: "var(--radix-popover-content-available-height)",
-              verticalGap: "calc(var(--space-150) * 2)",
+              verticalGap: "var(--space-50) * 2",
               maxHeight,
               children: content
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(designSystemScrollArea.ScrollArea.Scrollbar, { orientation: "vertical", children: /* @__PURE__ */ jsxRuntime.jsx(designSystemScrollArea.ScrollArea.Thumb, {}) })
-        ] })
+        ] }) : content })
       }
     );
   }
@@ -474,6 +530,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(
@@ -491,15 +549,12 @@ const Group = React__default["default"].forwardRef(({ children, ...rest }, forwa
   if (!hasVisibleChildren) {
     return null;
   }
-  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, {
-  padding: "$100",
-  color: "$text-neutrals-subtle",
-  fontSize: "$150",
-  textTransform: "uppercase",
-  fontWeight: 650
+  padding: "6px $100",
+  color: "$text-neutrals-subtle"
 });
 
 const GroupLabel = React__default["default"].forwardRef((props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledGroupLabel, { ...props, ref: forwardRef }));
@@ -513,13 +568,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, {
@@ -537,9 +592,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;
@@ -548,7 +603,7 @@ const StyledValue = designSystemStitches.styled(Chip, {
   marginTop: "$50"
 });
 
-const Value = ({ removeChipAriaLabel }) => {
+const Value = ({ unselectAriaLabel }) => {
   const {
     value = [],
     setValue,
@@ -567,7 +622,7 @@ const Value = ({ removeChipAriaLabel }) => {
     {
       onRemove: () => onItemRemove(item),
       disabled: isDisabled,
-      removeChipAriaLabel,
+      removeAriaLabel: "".concat(unselectAriaLabel, " ").concat(item),
       "data-testid": process.env.NODE_ENV === "test" ? "combobox-value-".concat(item) : void 0,
       children: item
     },
@@ -590,12 +645,11 @@ const Separator = React__default["default"].forwardRef((props, forwardRef) => {
   return /* @__PURE__ */ jsxRuntime.jsx(StyledSeparator, { ...props, ref: forwardRef, "aria-hidden": true });
 });
 
-const StyledComboboxContent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
-  position: "relative",
-  width: "100%"
-});
-
-const Root = React__default["default"].forwardRef(({ value: valueProp, onValueChange, children, ...restProps }, forwardRef) => {
+const Root = ({
+  value: valueProp,
+  children,
+  ...restProps
+}) => {
   const {
     openState,
     setOpenState,
@@ -605,8 +659,7 @@ const Root = React__default["default"].forwardRef(({ value: valueProp, onValueCh
     required,
     readOnly,
     "aria-disabled": ariaDisabled,
-    disabled,
-    direction
+    disabled
   } = useComboboxContext();
   const { setRequired, setDisabled, setAriaDisabled, setReadOnly } = designSystemBaseForm.useFormFieldContext();
   React.useEffect(() => {
@@ -627,78 +680,70 @@ const Root = React__default["default"].forwardRef(({ value: valueProp, onValueCh
   const onSetSelectedValue = (newValue) => {
     setValue(typeof newValue === "string" ? [newValue] : newValue);
   };
-  const comboboxProps = {
-    ...restProps,
-    onClick: (event) => {
-      if (!designSystemUtils.booleanify(disabled)) {
-        setOpenState(true);
-      }
-      if (restProps.onClick !== void 0) {
-        restProps.onClick(event);
-      }
+  const onOpenChange = (value2) => {
+    if (!designSystemUtils.booleanify(readOnly)) {
+      setOpenState(value2);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Root, { open: openState, onOpenChange: setOpenState, children: /* @__PURE__ */ jsxRuntime.jsx(
-    react.ComboboxProvider,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadixPopover__namespace.Root,
     {
       open: openState,
-      setOpen: setOpenState,
-      defaultSelectedValue: defaultValue,
-      selectedValue: value,
-      setSelectedValue: onSetSelectedValue,
+      onOpenChange,
+      ...restProps,
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        StyledComboboxContent,
+        react.ComboboxProvider,
         {
-          ...comboboxProps,
-          ref: forwardRef,
-          dir: direction,
+          open: openState,
+          setOpen: onOpenChange,
+          defaultSelectedValue: defaultValue,
+          selectedValue: value,
+          setSelectedValue: onSetSelectedValue,
           children
         }
       )
     }
-  ) });
-});
-const Combobox = React__default["default"].forwardRef(
-  ({
-    "aria-disabled": ariaDisabled,
-    defaultOpen = false,
+  );
+};
+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__ */ jsxRuntime.jsx(
+  ComboboxProvider,
+  {
+    defaultValue,
+    value,
+    onValueChange,
+    onSearchValueChange,
+    defaultOpen,
     open,
+    onOpen,
+    onClose,
     valid,
+    required,
     disabled,
     readOnly,
-    required,
-    value,
-    defaultValue,
-    onOpen,
-    onClose,
-    onSearchValueChange,
-    onValueChange,
-    direction = "ltr",
-    autoFilter = true,
+    "aria-disabled": ariaDisabled,
+    direction,
+    autoFilter,
     noResultsText,
-    ...restProps
-  }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(
-    ComboboxProvider,
-    {
-      defaultValue,
-      value,
-      onValueChange,
-      onSearchValueChange,
-      defaultOpen,
-      open,
-      onOpen,
-      onClose,
-      valid,
-      required,
-      disabled,
-      readOnly,
-      "aria-disabled": ariaDisabled,
-      direction,
-      autoFilter,
-      noResultsText,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Root, { ...restProps, value, ref: forwardRef })
-    }
-  )
+    children: /* @__PURE__ */ jsxRuntime.jsx(Root, { ...restProps, value })
+  }
 );
 Combobox.Portal = Portal;
 Combobox.Trigger = Trigger;