@mirohq/design-system-combobox 0.1.0-combobox.3 → 0.1.0-combobox.5

package/dist/main.js

@@ -4,17 +4,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var Ariakit = require('@ariakit/react');
+var react = require('@ariakit/react');
 var designSystemBaseForm = require('@mirohq/design-system-base-form');
 var RadixPopover = require('@radix-ui/react-popover');
 var designSystemUtils = require('@mirohq/design-system-utils');
-var designSystemIcons = require('@mirohq/design-system-icons');
 var designSystemStitches = require('@mirohq/design-system-stitches');
 var designSystemInput = require('@mirohq/design-system-input');
+var designSystemIcons = require('@mirohq/design-system-icons');
+var utils = require('@react-aria/utils');
 var designSystemUseAriaDisabled = require('@mirohq/design-system-use-aria-disabled');
 var designSystemStyles = require('@mirohq/design-system-styles');
-var designSystemBaseButton = require('@mirohq/design-system-base-button');
 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 }; }
 
@@ -37,27 +38,40 @@ function _interopNamespace(e) {
 }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var Ariakit__namespace = /*#__PURE__*/_interopNamespace(Ariakit);
 var RadixPopover__namespace = /*#__PURE__*/_interopNamespace(RadixPopover);
 
-const StyledActionButton = designSystemStitches.styled(designSystemInput.Input.ActionButton, {
-  position: "absolute",
-  right: "$100",
-  top: "10px"
-});
 const StyledInput = designSystemStitches.styled(designSystemInput.Input, {
   flexWrap: "wrap",
   flexGrow: 1,
-  gap: "$50",
-  minHeight: "$12",
-  "&&&": {
-    height: "max-content",
-    padding: "$100 $400 $100 $100"
+  gap: "0 $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: "30px",
+    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"
   }
 });
 
@@ -68,14 +82,18 @@ const ComboboxProvider = ({
   valid,
   value: valueProp,
   defaultValue: defaultValueProp,
+  onSearchValueChange,
+  autoFilter = true,
   ...restProps
 }) => {
   const triggerRef = React.useRef(null);
+  const inputRef = React.useRef(null);
   const contentRef = React.useRef(null);
-  const [openState, setOpenState] = React.useState(defaultOpen);
+  const [openState, setOpenState] = React.useState(defaultOpen != null ? defaultOpen : false);
   const [value, setValue] = React.useState(valueProp != null ? valueProp : []);
   const [defaultValue, setDefaultValue] = React.useState(defaultValueProp);
-  const [searchValue, setSearchValue] = React.useState();
+  const [filteredItems, setFilteredItems] = React.useState(/* @__PURE__ */ new Set());
+  const [searchValue, setSearchValue] = React.useState("");
   const { valid: formFieldValid } = designSystemBaseForm.useFormFieldContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
     ComboboxContext.Provider,
@@ -89,10 +107,15 @@ const ComboboxProvider = ({
         setValue,
         setDefaultValue,
         defaultValue,
+        onSearchValueChange,
+        triggerRef,
+        inputRef,
+        contentRef,
+        autoFilter,
         searchValue,
         setSearchValue,
-        triggerRef,
-        contentRef
+        filteredItems,
+        setFilteredItems
       },
       children
     }
@@ -100,6 +123,47 @@ const ComboboxProvider = ({
 };
 const useComboboxContext = () => React.useContext(ComboboxContext);
 
+const StyledActionButton = designSystemStitches.styled(designSystemInput.Input.ActionButton, {
+  position: "absolute",
+  right: "$100",
+  variants: {
+    size: {
+      large: {
+        top: "5px"
+      },
+      "x-large": {
+        top: "9px"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "large"
+  }
+});
+
+const TriggerActionButton = ({
+  openActionLabel,
+  clearActionLabel,
+  size
+}) => {
+  const { 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(
+    (event) => {
+      if (!isEmpty) {
+        setValue([]);
+      } else {
+        setOpenState((prevOpen) => !prevOpen);
+      }
+      event.stopPropagation();
+    },
+    [isEmpty, setValue, setOpenState]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledActionButton, { label, size, onClick: onActionButtonClick, children: /* @__PURE__ */ jsxRuntime.jsx(ActionButtonIcon, { size: "small", weight: "thin" }) });
+};
+
 const Trigger = React__default["default"].forwardRef(
   ({
     id,
@@ -108,6 +172,9 @@ const Trigger = React__default["default"].forwardRef(
     "aria-describedby": ariaDescribedBy,
     "aria-invalid": ariaInvalid,
     placeholder,
+    openActionLabel,
+    clearActionLabel,
+    onChange,
     ...restProps
   }, forwardRef) => {
     const {
@@ -115,13 +182,20 @@ const Trigger = React__default["default"].forwardRef(
       valid: comboboxValid,
       disabled,
       value,
-      triggerRef
+      triggerRef,
+      inputRef,
+      onSearchValueChange,
+      searchValue,
+      setSearchValue
     } = useComboboxContext();
     const {
       formElementId,
       ariaDescribedBy: formFieldContextDescribedBy,
       ariaInvalid: formFieldAriaInvalid,
-      valid: formFieldValid
+      valid: formFieldValid,
+      label,
+      isFloatingLabel,
+      focused
     } = designSystemBaseForm.useFormFieldContext();
     const valid = formFieldValid != null ? formFieldValid : comboboxValid;
     const inputProps = {
@@ -136,20 +210,59 @@ const Trigger = React__default["default"].forwardRef(
       disabled,
       invalid: designSystemUtils.booleanishAttrValue(valid),
       id: id != null ? id : formElementId,
-      placeholder: (value == null ? void 0 : value.length) === 0 ? placeholder : void 0
-    };
-    const variants = {
-      size
+      placeholder: value.length === 0 ? placeholder : void 0
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Anchor, { ref: designSystemUtils.mergeRefs([triggerRef, forwardRef]), children: /* @__PURE__ */ jsxRuntime.jsx(
-      Ariakit.Combobox,
-      {
-        render: /* @__PURE__ */ jsxRuntime.jsxs(StyledInput, { ...inputProps, ...variants, children: [
-          children,
-          /* @__PURE__ */ jsxRuntime.jsx(StyledActionButton, { label: "custom label", children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronDown, { size: "small", weight: "thin" }) })
-        ] })
+    const shouldUseFloatingLabel = label !== null && isFloatingLabel;
+    const isFloating = placeholder !== void 0 || value.length !== 0 || focused;
+    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 onInputChange = (e) => {
+      setSearchValue(e.target.value);
+      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,
+            {
+              ...inputProps,
+              value: searchValue,
+              size,
+              ref: inputRef,
+              onChange: onInputChange,
+              onFocus: scrollIntoView,
+              children: [
+                children,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  TriggerActionButton,
+                  {
+                    openActionLabel,
+                    clearActionLabel,
+                    size
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    ] });
   }
 );
 
@@ -160,37 +273,24 @@ const StyledContent = designSystemStitches.styled(RadixPopover__namespace.Conten
   fontSize: "$175",
   fontWeight: "normal",
   lineHeight: "1.5",
-  minWidth: "var(--radix-popover-trigger-width)",
+  width: "var(--radix-popover-trigger-width)",
   zIndex: "$select",
   overflowY: "auto",
-  marginTop: "$200"
+  marginTop: "$200",
+  padding: "$150",
+  boxSizing: "border-box",
+  outline: "1px solid transparent"
 });
 
-const Content = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => {
-  const { triggerRef, contentRef } = useComboboxContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    StyledContent,
-    {
-      ...restProps,
-      ref: designSystemUtils.mergeRefs([forwardRef, contentRef]),
-      onOpenAutoFocus: (event) => event.preventDefault(),
-      onInteractOutside: (event) => {
-        var _a, _b;
-        const target = event.target;
-        const isTrigger = target === triggerRef.current;
-        const isContent = (_b = target != null && ((_a = contentRef.current) == null ? void 0 : _a.contains(target))) != null ? _b : false;
-        if (isTrigger || isContent) {
-          event.preventDefault();
-        }
-      },
-      children
-    }
-  );
+const StyledItemCheck = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
+  color: "$icon-primary",
+  paddingX: "$100"
 });
-
-const StyledItem = designSystemStitches.styled(Ariakit.ComboboxItem, {
+const StyledItem = designSystemStitches.styled(react.ComboboxItem, {
   display: "flex",
   alignItems: "center",
+  justifyContent: "space-between",
+  gap: "$200",
   borderRadius: "$50",
   boxSizing: "border-box",
   color: "$text-neutrals",
@@ -199,15 +299,19 @@ const StyledItem = designSystemStitches.styled(Ariakit.ComboboxItem, {
   lineHeight: 1.5,
   position: "relative",
   userSelect: "none",
-  padding: "6px 0",
-  paddingInline: "$150 $100",
+  paddingX: "$100",
+  paddingY: "10px",
   ...designSystemStyles.focus.css({
-    boxShadow: "$focus-small",
-    outline: "1px solid transparent"
+    boxShadow: "$focus-small"
   }),
-  '&:hover:not([aria-disabled="true"])': {
-    background: "$background-primary-subtle-hover",
-    color: "$text-primary-hover"
+  '&: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",
@@ -218,39 +322,150 @@ const StyledItem = designSystemStitches.styled(Ariakit.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();
+    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);
+      }
+    };
     return /* @__PURE__ */ jsxRuntime.jsxs(
       StyledItem,
       {
-        ...restProps,
-        ...restAriaDisabledProps,
+        ...utils.mergeProps(restProps, restAriaDisabledProps),
         focusable: true,
         accessibleWhenDisabled: ariaDisabled === true,
         disabled: ariaDisabled === true || disabled,
         ref: forwardRef,
         value,
+        onClick: scrollIntoView,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Ariakit__namespace.ComboboxItemCheck, {}),
-          children
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            react.ComboboxItemCheck,
+            {
+              render: ({ style, ...props }) => (
+                // AriakitComboboxItemCheck adds its owm inline styles which we want to omit here
+                /* @__PURE__ */ jsxRuntime.jsx(StyledItemCheck, { ...props })
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCheckMark, { size: "small" })
+            }
+          )
         ]
       }
     );
   }
 );
 
-const Portal = (props) => /* @__PURE__ */ jsxRuntime.jsx(RadixPopover.Portal, { ...props });
+const itemType = React__default["default"].createElement(Item).type;
+const getChildrenItemValues = (componentChildren) => {
+  const values = [];
+  const recurse = (children) => {
+    React__default["default"].Children.forEach(children, (child) => {
+      if (!React__default["default"].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 StyledGroup = designSystemStitches.styled(Ariakit.Group, {});
+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(({ children, ...restProps }, forwardRef) => {
+  const {
+    triggerRef,
+    contentRef,
+    autoFilter,
+    filteredItems,
+    setFilteredItems,
+    searchValue,
+    noResultsText
+  } = useComboboxContext();
+  React.useEffect(() => {
+    const childrenItemValues = getChildrenItemValues(children);
+    setFilteredItems(
+      new Set(
+        autoFilter === false ? childrenItemValues : childrenItemValues.filter(
+          (child) => child.toLowerCase().includes(searchValue.toLowerCase())
+        )
+      )
+    );
+  }, [children, autoFilter, setFilteredItems, searchValue]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledContent,
+    {
+      ...restProps,
+      ref: designSystemUtils.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: filteredItems.size === 0 ? noResultsText : children
+    }
+  );
+});
+
+const Portal = (props) => /* @__PURE__ */ jsxRuntime.jsx(RadixPopover.Portal, { ...props });
 
-const Group = React__default["default"].forwardRef((props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledGroup, { ...props, ref: forwardRef }));
+const Group = React__default["default"].forwardRef(({ children, ...rest }, forwardRef) => {
+  const { autoFilter, filteredItems } = useComboboxContext();
+  const childValues = React.useMemo(
+    // don't perform calculation if auto filter is disabled
+    () => autoFilter !== false ? getChildrenItemValues(children) : [],
+    [children, autoFilter]
+  );
+  const hasVisibleChildren = React.useMemo(
+    () => (
+      // don't perform calculation if auto filter is disabled
+      autoFilter !== false ? childValues.some((value) => filteredItems.has(value)) : true
+    ),
+    [childValues, filteredItems, autoFilter]
+  );
+  if (!hasVisibleChildren) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Group, { ...rest, ref: forwardRef, children });
+});
 
-const StyledGroupLabel = designSystemStitches.styled(Ariakit.GroupLabel, {});
+const StyledGroupLabel = designSystemStitches.styled(react.GroupLabel, {
+  padding: "$100",
+  color: "$text-neutrals-subtle",
+  fontSize: "$150",
+  textTransform: "uppercase",
+  fontWeight: 650
+});
 
 const GroupLabel = React__default["default"].forwardRef((props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledGroupLabel, { ...props, ref: forwardRef }));
 
 const StyledChip = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
   fontSize: "$150",
   padding: "$50 $100",
-  borderRadius: "$half",
+  borderRadius: "$round",
   display: "flex",
   alignItems: "center",
   gap: "$50",
@@ -259,6 +474,12 @@ const StyledChip = designSystemStitches.styled(designSystemPrimitive.Primitive.d
   background: "$gray-100",
   color: "$gray-900"
 });
+const StyledChipButton = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
+  ...designSystemStyles.focus.css({
+    boxShadow: "$focus-small-outline",
+    borderColor: "$blue-400 !important"
+  })
+});
 const StyledChipContent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
   textOverflow: "ellipsis",
   whiteSpace: "nowrap",
@@ -276,11 +497,15 @@ const LeftSlot = StyledLeftSlot;
 const Chip = React__default["default"].forwardRef(
   ({ children, disabled = false, onRemove, removeChipAriaLabel, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsxs(StyledChip, { ...restProps, ref: forwardRef, children: [
     /* @__PURE__ */ jsxRuntime.jsx(StyledChipContent, { children }),
-    !designSystemUtils.booleanify(disabled) && /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseButton.BaseButton, { 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": removeChipAriaLabel, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCross, { size: "small", weight: "thin", color: "gray-500" }) })
   ] })
 );
 Chip.LeftSlot = LeftSlot;
 
+const StyledValue = designSystemStitches.styled(Chip, {
+  marginTop: "$50"
+});
+
 const Value = ({ removeChipAriaLabel }) => {
   const {
     value,
@@ -288,16 +513,15 @@ const Value = ({ removeChipAriaLabel }) => {
     disabled,
     "aria-disabled": ariaDisabled
   } = useComboboxContext();
-  const isEmpty = value === void 0 || value.length === 0;
   const isDisabled = ariaDisabled === true || disabled;
   const onItemRemove = (item) => {
     setValue((prevValue) => prevValue.filter((value2) => value2 !== item));
   };
-  if (isEmpty) {
+  if (value.length === 0) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-    Chip,
+    StyledValue,
     {
       onRemove: () => onItemRemove(item),
       disabled: isDisabled,
@@ -308,7 +532,18 @@ const Value = ({ removeChipAriaLabel }) => {
   )) });
 };
 
-const StyledComboboxContent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {});
+const StyledSeparator = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  backgroundColor: "$border-neutrals-subtle",
+  height: "1px",
+  width: "100%",
+  margin: "$100 0"
+});
+
+const Separator = React__default["default"].forwardRef((props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledSeparator, { ...props, ref: forwardRef, "aria-hidden": true }));
+
+const StyledComboboxContent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  position: "relative"
+});
 
 const Root = React__default["default"].forwardRef(({ value: valueProp, onValueChange, children, ...restProps }, forwardRef) => {
   const {
@@ -344,7 +579,7 @@ const Root = React__default["default"].forwardRef(({ value: valueProp, onValueCh
     setValue(newValue);
   };
   return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Root, { open: openState, onOpenChange: setOpenState, children: /* @__PURE__ */ jsxRuntime.jsx(
-    Ariakit__namespace.ComboboxProvider,
+    react.ComboboxProvider,
     {
       open: openState,
       setOpen: setOpenState,
@@ -366,15 +601,19 @@ const Combobox = React__default["default"].forwardRef(
     required,
     value,
     defaultValue,
+    onSearchValueChange,
     onOpen,
     onValueChange,
     direction = "ltr",
+    autoFilter = true,
+    noResultsText,
     ...restProps
   }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(
     ComboboxProvider,
     {
       defaultValue,
       value,
+      onSearchValueChange,
       defaultOpen,
       open,
       valid,
@@ -383,7 +622,17 @@ const Combobox = React__default["default"].forwardRef(
       readOnly,
       "aria-disabled": ariaDisabled,
       direction,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Root, { ...restProps, value, ref: forwardRef })
+      autoFilter,
+      noResultsText,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Root,
+        {
+          ...restProps,
+          noResultsText,
+          value,
+          ref: forwardRef
+        }
+      )
     }
   )
 );
@@ -394,7 +643,12 @@ Combobox.Item = Item;
 Combobox.Group = Group;
 Combobox.GroupLabel = GroupLabel;
 Combobox.Value = Value;
+Combobox.Separator = Separator;
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
 
-exports.Chip = Chip;
 exports.Combobox = Combobox;
+exports.ComboboxTypes = types;
 //# sourceMappingURL=main.js.map