@activecollab/components 1.0.146 → 1.0.149

package/dist/cjs/components/ComboBox/ComboBox.js

@@ -15,6 +15,8 @@ var _Autocomplete = require("../Autocomplete");
 
 var _Button = require("../Button/Button");
 
+var _Autocomplete2 = require("../Autocomplete/Autocomplete");
+
 var _useForkRef = _interopRequireDefault(require("../../utils/useForkRef"));
 
 var _Popper = require("../Popper");
@@ -29,7 +31,23 @@ var _Styles = require("./Styles");
 
 var _InputAdornment = require("../Input/InputAdornment");
 
-var _excluded = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid"];
+var _Checkbox = require("../Checkbox");
+
+var _Chip = require("../Chip");
+
+var _Styles2 = require("../Input/Styles");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Typography = require("../Typography/Typography");
+
+var _Trigger = require("../Trigger");
+
+var _useOnClickOutside = require("../../hooks/useOnClickOutside");
+
+var _Avatar = require("../Avatar");
+
+var _excluded = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -73,9 +91,17 @@ var ComboBox = function ComboBox(_ref) {
       size = _ref$size === void 0 ? "regular" : _ref$size,
       _ref$invalid = _ref.invalid,
       invalid = _ref$invalid === void 0 ? false : _ref$invalid,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? "single" : _ref$type,
+      renderChip = _ref.renderChip,
+      _ref$forceCloseMenu = _ref.forceCloseMenu,
+      forceCloseMenu = _ref$forceCloseMenu === void 0 ? type === "single" : _ref$forceCloseMenu,
+      renderOption = _ref.renderOption,
+      _ref$limitChips = _ref.limitChips,
+      limitChips = _ref$limitChips === void 0 ? 2 : _ref$limitChips,
+      hiddenNumberText = _ref.hiddenNumberText,
       prop = _objectWithoutProperties(_ref, _excluded);
 
-  var timeoutRef = (0, _react.useRef)();
   var selectedName = (0, _react.useMemo)(function () {
     var value = "";
 
@@ -117,19 +143,28 @@ var ComboBox = function ComboBox(_ref) {
 
   var elementRef = (0, _react.useRef)(null);
   var handleRef = (0, _useForkRef.default)(setChildNode, elementRef);
+  var wrapperRef = (0, _react.useRef)(null);
+  var chipWrapper = (0, _react.useRef)(null);
 
   var _useState5 = (0, _react.useState)(false),
       _useState6 = _slicedToArray(_useState5, 2),
       open = _useState6[0],
       setOpen = _useState6[1];
 
+  (0, _useOnClickOutside.useOnClickOutside)(wrapperRef, function () {
+    return setOpen(false);
+  });
   var handleOnKeyDown = (0, _react.useCallback)(function (e) {
     if (e.key === "Escape" && open) {
       setOpen(false);
       setValue(selectedName);
       e.stopPropagation();
     }
-  }, [open, selectedName]);
+
+    if (e.key === "Enter" && type === "multiple") {
+      setValue("");
+    }
+  }, [open, selectedName, type]);
   (0, _react.useEffect)(function () {
     open && (childNode === null || childNode === void 0 ? void 0 : childNode.focus());
     !open && (childNode === null || childNode === void 0 ? void 0 : childNode.blur());
@@ -142,46 +177,191 @@ var ComboBox = function ComboBox(_ref) {
     setOpen(false);
   }, [handleEmptyAction]);
   var handleChange = (0, _react.useCallback)(function (selectedValue) {
-    if (selectedValue) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(selectedValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(selectedValue);
+
+    if (forceCloseMenu) {
       setOpen(false);
     }
-  }, [onChange]);
+  }, [forceCloseMenu, onChange]);
   var onOpen = (0, _react.useCallback)(function () {
     if (!disabled) {
       setOpen(true);
     }
   }, [disabled]);
   var handleRenderOption = (0, _react.useCallback)(function (option, props) {
+    if (typeof renderOption === "function") {
+      return renderOption(option, props);
+    }
+
+    if (type === "multiple") {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_OptionContent.OptionContent, {
+        imageUrl: option.image,
+        color: option.color,
+        textColor: option.textColor,
+        name: option.name
+      }), /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, props));
+    }
+
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_OptionContent.OptionContent, {
       imageUrl: option.image,
       color: option.color,
       textColor: option.textColor,
       name: option.name
     }), /*#__PURE__*/_react.default.createElement(_RadioButton.RadioButton, props));
-  }, []);
+  }, [type, renderOption]);
   var handleDeselect = (0, _react.useCallback)(function (e) {
     e.stopPropagation();
-    onChange === null || onChange === void 0 ? void 0 : onChange("");
+
+    if (type === "multiple") {
+      onChange === null || onChange === void 0 ? void 0 : onChange([]);
+    } else {
+      onChange === null || onChange === void 0 ? void 0 : onChange("");
+    }
+
     setOpen(false);
-  }, [onChange]);
+  }, [type, onChange]);
   var handleMouseDown = (0, _react.useCallback)(function (e) {
     e.preventDefault();
   }, []);
   var comboBoxRef = (0, _react.useRef)(null);
   var handleBlur = (0, _react.useCallback)(function () {
     setValue(selectedName);
-    timeoutRef.current = setTimeout(function () {
-      setOpen(false);
-    }, 200);
   }, [selectedName]);
-  (0, _react.useEffect)(function () {
-    return function () {
-      timeoutRef.current && clearTimeout(timeoutRef.current);
+  var renderChipAdornment = (0, _react.useCallback)(function (option, index) {
+    if (typeof renderChip === "function") {
+      return renderChip(option, index);
+    }
+
+    var avatarProps = {
+      className: "tw-my-0.5 tw-mr-0.5",
+      size: 18
     };
-  }, []);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxInput, {
+
+    switch (size) {
+      case "big":
+        avatarProps.size = 22;
+        break;
+
+      case "small":
+        avatarProps.size = 14;
+        break;
+    }
+
+    var leftAdornment = option.image ? /*#__PURE__*/_react.default.createElement(_Avatar.Avatar, _extends({
+      url: option.image
+    }, avatarProps)) : undefined;
+    return /*#__PURE__*/_react.default.createElement(_Chip.Chip, {
+      className: "c-combo-box-chip",
+      leftAdornment: leftAdornment,
+      label: option.name,
+      key: index,
+      onClose: !disabled ? function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (Array.isArray(selected) && selected.includes(option.id)) {
+          if (typeof onChange === "function") {
+            var newSelected = selected.filter(function (item) {
+              return item !== option.id;
+            });
+            onChange(newSelected);
+          }
+        }
+      } : undefined,
+      size: size
+    });
+  }, [disabled, onChange, renderChip, selected, size]);
+  var autoSize = (0, _react.useMemo)(function () {
+    if (type === "multiple" && open && Array.isArray(selected) && selected.length > 1) {
+      return "auto";
+    }
+
+    return size;
+  }, [open, selected, size, type]);
+  var startAdornment = (0, _react.useMemo)(function () {
+    if (type === "multiple" && Array.isArray(selected) && selected.length > 0) {
+      var elements = [];
+      var total = 0;
+      options.forEach(function (option, index) {
+        var isGrouped = (0, _Autocomplete2.isOptionGroup)(option);
+
+        if (selected.includes(option.id) && !isGrouped) {
+          total = total + 1;
+          elements.push(renderChipAdornment(option, index));
+        } else if (isGrouped) {
+          var groupedOptions = option.options.filter(function (o) {
+            return selected.includes(o.id);
+          });
+          total = total + groupedOptions.length;
+
+          if (groupedOptions.length > 0) {
+            groupedOptions.forEach(function (o, _index) {
+              elements.push(renderChipAdornment(o, "".concat(index, "_").concat(_index)));
+            });
+          }
+        }
+      });
+      var _hidden = 0;
+
+      if (!open && limitChips > 0 && elements.length > limitChips) {
+        _hidden = elements.splice(limitChips, elements.length - limitChips).length;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, elements, _hidden > 0 && /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+        variant: size === "small" ? "Caption 1" : size === "regular" ? "Body 2" : "Body 1",
+        className: "tw-flex tw-items-center tw-shrink-0",
+        key: "hidden"
+      }, typeof hiddenNumberText === "function" ? hiddenNumberText(_hidden) : "+".concat(_hidden)));
+    }
+
+    return undefined;
+  }, [type, selected, options, open, limitChips, hiddenNumberText, renderChipAdornment, size]);
+  var showXIcon = Array.isArray(selected) && type === "multiple" && selected.length > 0;
+  var hasSelected = type === "multiple" && Array.isArray(selected) && selected.length > 0;
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: "c-combo-box",
+    ref: wrapperRef
+  }, type === "multiple" ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Styles2.StyledInputWrapper, {
+    $size: size,
+    $invalid: invalid,
+    className: (0, _classnames.default)("tw-flex tw-space-between tw-flex-1", {
+      "tw-h-auto": autoSize === "auto"
+    }),
+    onClick: function onClick() {
+      var _elementRef$current;
+
+      (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.focus();
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("tw-flex tw-gap-1 tw-flex-1", {
+      "tw-flex-wrap tw-w-full": autoSize === "auto",
+      "tw-items-center": autoSize !== "auto",
+      "tw-overflow-hidden": !open
+    }),
+    ref: chipWrapper
+  }, startAdornment, /*#__PURE__*/_react.default.createElement(_Styles2.StyledInput, {
+    className: (0, _classnames.default)("tw-flex tw-flex-1 tw-self-center tw-m-0", {
+      "tw-w-full": !selected || Array.isArray(selected) && selected.length === 0,
+      "tw-w-auto": autoSize === "auto"
+    }),
+    onBlur: handleBlur,
+    onFocus: onOpen,
+    ref: handleRef,
+    value: loading && loadingText ? loadingText : value,
+    onKeyDown: handleOnKeyDown,
+    onChange: handleOnChange,
+    placeholder: !hasSelected ? placeholder : undefined,
+    disabled: disabled,
+    $size: size,
+    $loading: loading
+  })), !disabled && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, loading ? /*#__PURE__*/_react.default.createElement(_SpinnerLoader.SpinnerLoader, null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showXIcon && /*#__PURE__*/_react.default.createElement(_Trigger.Trigger, {
+    onMouseDown: handleMouseDown,
+    onClick: handleDeselect,
+    className: "tw-flex tw-justify-content-center",
+    "data-testid": "deselect-all"
+  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxCloseSmallIcon, null)), /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxCollapseExpandSingleIcon, {
+    $open: open
+  }))))) : /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxInput, {
     onBlur: handleBlur,
     onFocus: onOpen,
     wrapRef: comboBoxRef,
@@ -194,6 +374,7 @@ var ComboBox = function ComboBox(_ref) {
     size: size,
     invalid: invalid,
     $loading: loading,
+    startAdornment: startAdornment,
     endAdornment: !disabled ? /*#__PURE__*/_react.default.createElement(_InputAdornment.InputAdornment, {
       disablePointerEvents: disabled
     }, loading ? /*#__PURE__*/_react.default.createElement(_SpinnerLoader.SpinnerLoader, null) : selected ? /*#__PURE__*/_react.default.createElement(_Button.Button, {
@@ -223,7 +404,7 @@ var ComboBox = function ComboBox(_ref) {
     handleChange: handleChange,
     renderOption: handleRenderOption,
     options: options,
-    type: "single",
+    type: type,
     handleEmptyAction: emptyAction
   }))))) : null);
 };

package/dist/cjs/components/ComboBox/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":["ComboBox","options","selected","loading","loadingText","onChange","placeholder","handleEmptyAction","disabled","size","invalid","prop","timeoutRef","selectedName","value","map","v","find","q","id","name","setValue","handleOnChange","e","target","childNode","setChildNode","elementRef","handleRef","open","setOpen","handleOnKeyDown","key","stopPropagation","focus","blur","emptyAction","handleChange","selectedValue","onOpen","handleRenderOption","option","props","image","color","textColor","handleDeselect","handleMouseDown","preventDefault","comboBoxRef","handleBlur","current","setTimeout","clearTimeout","zIndex","clientWidth","displayName"],"mappings":"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","sourcesContent":["import React, {\n  FC,\n  useCallback,\n  useState,\n  useEffect,\n  useRef,\n  useMemo,\n} from \"react\";\nimport { RadioButton } from \"../RadioButton\";\nimport { Autocomplete } from \"../Autocomplete\";\nimport { Button } from \"../Button/Button\";\nimport { IAutocompleteProps } from \"../Autocomplete/Autocomplete\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Popper } from \"../Popper\";\nimport { IOptionGroupProps } from \"../Select\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { SpinnerLoader } from \"../Loaders/Spinner/SpinnerLoader\";\nimport { OptionContent } from \"../Select/OptionContent/OptionContent\";\nimport {\n  StyledComboBoxCloseSmallIcon,\n  StyledComboBoxCollapseExpandSingleIcon,\n  StyledComboBoxInput,\n  StyledComboBoxList,\n} from \"./Styles\";\nimport { InputSize } from \"../Input/types\";\nimport { InputAdornment } from \"../Input/InputAdornment\";\n\nexport interface IComboBoxProps {\n  /** Set selected items */\n  selected?: string | number;\n  /** Set combobox in to loading state */\n  loading?: boolean;\n  /** Text to display while in loading state */\n  loadingText?: string;\n  /** onChange callback */\n  onChange?: (e: string | number) => void;\n  /** Placeholder for Select input */\n  placeholder?: string;\n  /** disable Input element */\n  disabled?: boolean;\n  /** Combobox size */\n  size?: InputSize;\n  /** Invalid state */\n  invalid?: boolean;\n}\n\nexport const ComboBox: FC<\n  IComboBoxProps & Omit<IAutocompleteProps, keyof IComboBoxProps>\n> = ({\n  options = [],\n  selected,\n  loading = false,\n  loadingText,\n  onChange,\n  placeholder,\n  handleEmptyAction,\n  disabled = false,\n  size = \"regular\",\n  invalid = false,\n  ...prop\n}) => {\n  const timeoutRef = useRef<NodeJS.Timeout>();\n  const selectedName = useMemo(() => {\n    let value = \"\";\n    if (!selected) {\n      return value;\n    }\n    options.map((v) => {\n      if ((v as IOptionGroupProps)?.options) {\n        return (v as IOptionGroupProps).options.find((q) => {\n          if (q.id === selected) {\n            value = q.name;\n            return;\n          }\n        });\n      } else {\n        if (v.id === selected) {\n          value = v.name;\n          return;\n        }\n      }\n    });\n    return value;\n  }, [options, selected]);\n  const [value, setValue] = useState(selectedName);\n  const handleOnChange = useCallback((e) => setValue(e.target.value), []);\n  const [childNode, setChildNode] = useState<HTMLInputElement | null>();\n  const elementRef = useRef<HTMLInputElement | null>(null);\n  const handleRef = useForkRef(setChildNode, elementRef);\n\n  const [open, setOpen] = useState(false);\n\n  const handleOnKeyDown = useCallback(\n    (e) => {\n      if (e.key === \"Escape\" && open) {\n        setOpen(false);\n        setValue(selectedName);\n        e.stopPropagation();\n      }\n    },\n    [open, selectedName]\n  );\n\n  useEffect(() => {\n    open && childNode?.focus();\n    !open && childNode?.blur();\n  }, [childNode, open]);\n\n  useEffect(() => {\n    setValue(selectedName);\n  }, [selectedName]);\n\n  const emptyAction = useCallback(\n    (v) => {\n      handleEmptyAction?.(v);\n      setOpen(false);\n    },\n    [handleEmptyAction]\n  );\n\n  const handleChange = useCallback(\n    (selectedValue) => {\n      if (selectedValue) {\n        onChange?.(selectedValue);\n        setOpen(false);\n      }\n    },\n    [onChange]\n  );\n\n  const onOpen = useCallback(() => {\n    if (!disabled) {\n      setOpen(true);\n    }\n  }, [disabled]);\n\n  const handleRenderOption = useCallback((option, props) => {\n    return (\n      <>\n        <OptionContent\n          imageUrl={option.image}\n          color={option.color}\n          textColor={option.textColor}\n          name={option.name}\n        />\n        <RadioButton {...props} />\n      </>\n    );\n  }, []);\n\n  const handleDeselect = useCallback(\n    (e) => {\n      e.stopPropagation();\n      onChange?.(\"\");\n      setOpen(false);\n    },\n    [onChange]\n  );\n\n  const handleMouseDown = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  const comboBoxRef = useRef<HTMLDivElement | null>(null);\n\n  const handleBlur = useCallback(() => {\n    setValue(selectedName);\n    timeoutRef.current = setTimeout(() => {\n      setOpen(false);\n    }, 200);\n  }, [selectedName]);\n\n  useEffect(() => {\n    return () => {\n      timeoutRef.current && clearTimeout(timeoutRef.current);\n    };\n  }, []);\n\n  return (\n    <>\n      <StyledComboBoxInput\n        className=\"c-combo-box\"\n        onBlur={handleBlur}\n        onFocus={onOpen}\n        wrapRef={comboBoxRef}\n        ref={handleRef}\n        value={loading && loadingText ? loadingText : value}\n        onKeyDown={handleOnKeyDown}\n        onChange={handleOnChange}\n        placeholder={placeholder}\n        disabled={disabled}\n        size={size}\n        invalid={invalid}\n        $loading={loading}\n        endAdornment={\n          !disabled ? (\n            <InputAdornment disablePointerEvents={disabled}>\n              {loading ? (\n                <SpinnerLoader />\n              ) : selected ? (\n                <Button\n                  onMouseDown={handleMouseDown}\n                  onClick={handleDeselect}\n                  variant=\"text gray\"\n                  size=\"small\"\n                >\n                  <StyledComboBoxCloseSmallIcon />\n                </Button>\n              ) : null}\n              <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n            </InputAdornment>\n          ) : null\n        }\n      />\n      {!disabled ? (\n        <Popper\n          anchorEl={comboBoxRef.current}\n          open={open}\n          placement=\"bottom\"\n          style={{ zIndex: 10 }}\n          strategy={\"fixed\"}\n        >\n          <RemoveScroll noIsolation allowPinchZoom>\n            <StyledComboBoxList $width={comboBoxRef.current?.clientWidth}>\n              <Autocomplete\n                {...prop}\n                inputEl={childNode}\n                selected={selected}\n                handleChange={handleChange}\n                renderOption={handleRenderOption}\n                options={options}\n                type=\"single\"\n                handleEmptyAction={emptyAction}\n              />\n            </StyledComboBoxList>\n          </RemoveScroll>\n        </Popper>\n      ) : null}\n    </>\n  );\n};\n\nComboBox.displayName = \"ComboBox\";\n"],"file":"ComboBox.js"}
+{"version":3,"sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":["ComboBox","options","selected","loading","loadingText","onChange","placeholder","handleEmptyAction","disabled","size","invalid","type","renderChip","forceCloseMenu","renderOption","limitChips","hiddenNumberText","prop","selectedName","value","map","v","find","q","id","name","setValue","handleOnChange","e","target","childNode","setChildNode","elementRef","handleRef","wrapperRef","chipWrapper","open","setOpen","handleOnKeyDown","key","stopPropagation","focus","blur","emptyAction","handleChange","selectedValue","onOpen","handleRenderOption","option","props","image","color","textColor","handleDeselect","handleMouseDown","preventDefault","comboBoxRef","handleBlur","renderChipAdornment","index","avatarProps","className","leftAdornment","undefined","Array","isArray","includes","newSelected","filter","item","autoSize","length","startAdornment","elements","total","forEach","isGrouped","push","groupedOptions","o","_index","hidden","splice","showXIcon","hasSelected","current","zIndex","clientWidth","displayName"],"mappings":"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","sourcesContent":["import React, {\n  FC,\n  useCallback,\n  useState,\n  useEffect,\n  useRef,\n  useMemo,\n  Fragment,\n} from \"react\";\nimport { RadioButton } from \"../RadioButton\";\nimport { Autocomplete } from \"../Autocomplete\";\nimport { Button } from \"../Button/Button\";\nimport {\n  IAutocompleteProps,\n  isOptionGroup,\n} from \"../Autocomplete/Autocomplete\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Popper } from \"../Popper\";\nimport { IOptionGroupProps, IOptionItemProps } from \"../Select\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { SpinnerLoader } from \"../Loaders/Spinner/SpinnerLoader\";\nimport { OptionContent } from \"../Select/OptionContent/OptionContent\";\nimport {\n  StyledComboBoxCloseSmallIcon,\n  StyledComboBoxCollapseExpandSingleIcon,\n  StyledComboBoxInput,\n  StyledComboBoxList,\n} from \"./Styles\";\nimport { InputSize } from \"../Input/types\";\nimport { InputAdornment } from \"../Input/InputAdornment\";\nimport { Checkbox } from \"../Checkbox\";\nimport { Chip } from \"../Chip\";\nimport { StyledInputWrapper, StyledInput } from \"../Input/Styles\";\nimport classNames from \"classnames\";\nimport { Typography } from \"../Typography/Typography\";\nimport { Trigger } from \"../Trigger\";\nimport { useOnClickOutside } from \"../../hooks/useOnClickOutside\";\nimport { Avatar, IAvatar } from \"../Avatar\";\n\nexport interface IComboBoxProps\n  extends Omit<IAutocompleteProps, \"handleChange\" | \"inputEl\"> {\n  /** Set combobox in to loading state */\n  loading?: boolean;\n  /** Text to display while in loading state */\n  loadingText?: string;\n  /** onChange callback */\n  onChange?: (\n    e: (string | number)[] | string | number | null | undefined\n  ) => void;\n  /** Placeholder for Select input */\n  placeholder?: string;\n  /** disable Input element */\n  disabled?: boolean;\n  /** Combobox size */\n  size?: InputSize;\n  /** Invalid state */\n  invalid?: boolean;\n  /** Render Chip */\n  renderChip?: <T extends IOptionItemProps>(\n    item: T,\n    key?: string | number\n  ) => JSX.Element;\n  /** Close menu on change */\n  forceCloseMenu?: boolean;\n  /** Limit chips */\n  limitChips?: number;\n  /** Hidden number text */\n  hiddenNumberText?: (hidden: number) => string;\n}\n\nexport const ComboBox: FC<IComboBoxProps> = ({\n  options = [],\n  selected,\n  loading = false,\n  loadingText,\n  onChange,\n  placeholder,\n  handleEmptyAction,\n  disabled = false,\n  size = \"regular\",\n  invalid = false,\n  type = \"single\",\n  renderChip,\n  forceCloseMenu = type === \"single\",\n  renderOption,\n  limitChips = 2,\n  hiddenNumberText,\n  ...prop\n}) => {\n  const selectedName = useMemo(() => {\n    let value = \"\";\n    if (!selected) {\n      return value;\n    }\n    options.map((v) => {\n      if ((v as IOptionGroupProps)?.options) {\n        return (v as IOptionGroupProps).options.find((q) => {\n          if (q.id === selected) {\n            value = q.name;\n            return;\n          }\n        });\n      } else {\n        if (v.id === selected) {\n          value = v.name;\n          return;\n        }\n      }\n    });\n    return value;\n  }, [options, selected]);\n  const [value, setValue] = useState(selectedName);\n  const handleOnChange = useCallback((e) => setValue(e.target.value), []);\n  const [childNode, setChildNode] = useState<HTMLInputElement | null>();\n  const elementRef = useRef<HTMLInputElement | null>(null);\n  const handleRef = useForkRef(setChildNode, elementRef);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const chipWrapper = useRef<HTMLDivElement>(null);\n\n  const [open, setOpen] = useState(false);\n\n  useOnClickOutside(wrapperRef, () => setOpen(false));\n\n  const handleOnKeyDown = useCallback(\n    (e) => {\n      if (e.key === \"Escape\" && open) {\n        setOpen(false);\n        setValue(selectedName);\n        e.stopPropagation();\n      }\n      if (e.key === \"Enter\" && type === \"multiple\") {\n        setValue(\"\");\n      }\n    },\n    [open, selectedName, type]\n  );\n\n  useEffect(() => {\n    open && childNode?.focus();\n    !open && childNode?.blur();\n  }, [childNode, open]);\n\n  useEffect(() => {\n    setValue(selectedName);\n  }, [selectedName]);\n\n  const emptyAction = useCallback(\n    (v) => {\n      handleEmptyAction?.(v);\n      setOpen(false);\n    },\n    [handleEmptyAction]\n  );\n\n  const handleChange = useCallback(\n    (selectedValue) => {\n      onChange?.(selectedValue);\n      if (forceCloseMenu) {\n        setOpen(false);\n      }\n    },\n    [forceCloseMenu, onChange]\n  );\n\n  const onOpen = useCallback(() => {\n    if (!disabled) {\n      setOpen(true);\n    }\n  }, [disabled]);\n\n  const handleRenderOption = useCallback(\n    (option, props) => {\n      if (typeof renderOption === \"function\") {\n        return renderOption(option, props);\n      }\n      if (type === \"multiple\") {\n        return (\n          <>\n            <OptionContent\n              imageUrl={option.image}\n              color={option.color}\n              textColor={option.textColor}\n              name={option.name}\n            />\n            <Checkbox {...props} />\n          </>\n        );\n      }\n      return (\n        <>\n          <OptionContent\n            imageUrl={option.image}\n            color={option.color}\n            textColor={option.textColor}\n            name={option.name}\n          />\n          <RadioButton {...props} />\n        </>\n      );\n    },\n    [type, renderOption]\n  );\n\n  const handleDeselect = useCallback(\n    (e) => {\n      e.stopPropagation();\n      if (type === \"multiple\") {\n        onChange?.([]);\n      } else {\n        onChange?.(\"\");\n      }\n\n      setOpen(false);\n    },\n    [type, onChange]\n  );\n\n  const handleMouseDown = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  const comboBoxRef = useRef<HTMLDivElement | null>(null);\n\n  const handleBlur = useCallback(() => {\n    setValue(selectedName);\n  }, [selectedName]);\n\n  const renderChipAdornment = useCallback(\n    (option, index) => {\n      if (typeof renderChip === \"function\") {\n        return renderChip(option, index);\n      }\n      const avatarProps: Partial<IAvatar> = {\n        className: \"tw-my-0.5 tw-mr-0.5\",\n        size: 18,\n      };\n      switch (size) {\n        case \"big\":\n          avatarProps.size = 22;\n          break;\n        case \"small\":\n          avatarProps.size = 14;\n          break;\n      }\n      const leftAdornment = option.image ? (\n        <Avatar url={option.image} {...avatarProps} />\n      ) : undefined;\n\n      return (\n        <Chip\n          className={\"c-combo-box-chip\"}\n          leftAdornment={leftAdornment}\n          label={option.name}\n          key={index}\n          onClose={\n            !disabled\n              ? (e) => {\n                  e.preventDefault();\n                  e.stopPropagation();\n                  if (Array.isArray(selected) && selected.includes(option.id)) {\n                    if (typeof onChange === \"function\") {\n                      const newSelected = selected.filter(\n                        (item) => item !== option.id\n                      );\n                      onChange(newSelected);\n                    }\n                  }\n                }\n              : undefined\n          }\n          size={size}\n        />\n      );\n    },\n    [disabled, onChange, renderChip, selected, size]\n  );\n\n  const autoSize = useMemo(() => {\n    if (\n      type === \"multiple\" &&\n      open &&\n      Array.isArray(selected) &&\n      selected.length > 1\n    ) {\n      return \"auto\";\n    }\n    return size;\n  }, [open, selected, size, type]);\n\n  const startAdornment = useMemo(() => {\n    if (type === \"multiple\" && Array.isArray(selected) && selected.length > 0) {\n      const elements: JSX.Element[] = [];\n      let total = 0;\n      options.forEach((option, index) => {\n        const isGrouped = isOptionGroup(option);\n        if (selected.includes(option.id) && !isGrouped) {\n          total = total + 1;\n          elements.push(renderChipAdornment(option, index));\n        } else if (isGrouped) {\n          const groupedOptions = option.options.filter((o) =>\n            selected.includes(o.id)\n          );\n          total = total + groupedOptions.length;\n          if (groupedOptions.length > 0) {\n            groupedOptions.forEach((o, _index) => {\n              elements.push(renderChipAdornment(o, `${index}_${_index}`));\n            });\n          }\n        }\n      });\n      let hidden = 0;\n      if (!open && limitChips > 0 && elements.length > limitChips) {\n        hidden = elements.splice(\n          limitChips,\n          elements.length - limitChips\n        ).length;\n      }\n\n      return (\n        <Fragment>\n          {elements}\n          {hidden > 0 && (\n            <Typography\n              variant={\n                size === \"small\"\n                  ? \"Caption 1\"\n                  : size === \"regular\"\n                  ? \"Body 2\"\n                  : \"Body 1\"\n              }\n              className={\"tw-flex tw-items-center tw-shrink-0\"}\n              key={\"hidden\"}\n            >\n              {typeof hiddenNumberText === \"function\"\n                ? hiddenNumberText(hidden)\n                : `+${hidden}`}\n            </Typography>\n          )}\n        </Fragment>\n      );\n    }\n    return undefined;\n  }, [\n    type,\n    selected,\n    options,\n    open,\n    limitChips,\n    hiddenNumberText,\n    renderChipAdornment,\n    size,\n  ]);\n\n  const showXIcon =\n    Array.isArray(selected) && type === \"multiple\" && selected.length > 0;\n\n  const hasSelected =\n    type === \"multiple\" && Array.isArray(selected) && selected.length > 0;\n\n  return (\n    <div className=\"c-combo-box\" ref={wrapperRef}>\n      {type === \"multiple\" ? (\n        <>\n          <StyledInputWrapper\n            $size={size}\n            $invalid={invalid}\n            className={classNames(\"tw-flex tw-space-between tw-flex-1\", {\n              \"tw-h-auto\": autoSize === \"auto\",\n            })}\n            onClick={() => {\n              elementRef.current?.focus();\n            }}\n          >\n            <div\n              className={classNames(\"tw-flex tw-gap-1 tw-flex-1\", {\n                \"tw-flex-wrap tw-w-full\": autoSize === \"auto\",\n                \"tw-items-center\": autoSize !== \"auto\",\n                \"tw-overflow-hidden\": !open,\n              })}\n              ref={chipWrapper}\n            >\n              {startAdornment}\n              <StyledInput\n                className={classNames(\n                  \"tw-flex tw-flex-1 tw-self-center tw-m-0\",\n                  {\n                    \"tw-w-full\":\n                      !selected ||\n                      (Array.isArray(selected) && selected.length === 0),\n                    \"tw-w-auto\": autoSize === \"auto\",\n                  }\n                )}\n                onBlur={handleBlur}\n                onFocus={onOpen}\n                ref={handleRef}\n                value={loading && loadingText ? loadingText : value}\n                onKeyDown={handleOnKeyDown}\n                onChange={handleOnChange}\n                placeholder={!hasSelected ? placeholder : undefined}\n                disabled={disabled}\n                $size={size}\n                $loading={loading}\n              />\n            </div>\n            {!disabled && (\n              <>\n                {loading ? (\n                  <SpinnerLoader />\n                ) : (\n                  <>\n                    {showXIcon && (\n                      <Trigger\n                        onMouseDown={handleMouseDown}\n                        onClick={handleDeselect}\n                        className={\"tw-flex tw-justify-content-center\"}\n                        data-testid={\"deselect-all\"}\n                      >\n                        <StyledComboBoxCloseSmallIcon />\n                      </Trigger>\n                    )}\n                    <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n                  </>\n                )}\n              </>\n            )}\n          </StyledInputWrapper>\n        </>\n      ) : (\n        <StyledComboBoxInput\n          onBlur={handleBlur}\n          onFocus={onOpen}\n          wrapRef={comboBoxRef}\n          ref={handleRef}\n          value={loading && loadingText ? loadingText : value}\n          onKeyDown={handleOnKeyDown}\n          onChange={handleOnChange}\n          placeholder={placeholder}\n          disabled={disabled}\n          size={size}\n          invalid={invalid}\n          $loading={loading}\n          startAdornment={startAdornment}\n          endAdornment={\n            !disabled ? (\n              <InputAdornment disablePointerEvents={disabled}>\n                {loading ? (\n                  <SpinnerLoader />\n                ) : selected ? (\n                  <Button\n                    onMouseDown={handleMouseDown}\n                    onClick={handleDeselect}\n                    variant=\"text gray\"\n                    size=\"small\"\n                  >\n                    <StyledComboBoxCloseSmallIcon />\n                  </Button>\n                ) : null}\n                <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n              </InputAdornment>\n            ) : null\n          }\n        />\n      )}\n\n      {!disabled ? (\n        <Popper\n          anchorEl={comboBoxRef.current}\n          open={open}\n          placement=\"bottom\"\n          style={{ zIndex: 10 }}\n          strategy={\"fixed\"}\n        >\n          <RemoveScroll noIsolation allowPinchZoom>\n            <StyledComboBoxList $width={comboBoxRef.current?.clientWidth}>\n              <Autocomplete\n                {...prop}\n                inputEl={childNode}\n                selected={selected}\n                handleChange={handleChange}\n                renderOption={handleRenderOption}\n                options={options}\n                type={type}\n                handleEmptyAction={emptyAction}\n              />\n            </StyledComboBoxList>\n          </RemoveScroll>\n        </Popper>\n      ) : null}\n    </div>\n  );\n};\n\nComboBox.displayName = \"ComboBox\";\n"],"file":"ComboBox.js"}

package/dist/cjs/components/ComboBox/Styles.js

@@ -13,6 +13,8 @@ var _collection = require("../Icons/collection");
 
 var _Input = require("../Input");
 
+var _Styles = require("../Input/Styles");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -20,9 +22,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var StyledComboBoxInput = (0, _styledComponents.default)(_Input.Input).withConfig({
   displayName: "Styles__StyledComboBoxInput",
   componentId: "sc-5qvkpb-0"
-})(["overflow:hidden;text-overflow:ellipsis;width:100%;", ""], function (props) {
-  return props.$loading && (0, _styledComponents.css)(["cursor:progress;"]);
-});
+})(["overflow:hidden;text-overflow:ellipsis;width:100%;"]);
 exports.StyledComboBoxInput = StyledComboBoxInput;
 StyledComboBoxInput.displayName = "StyledComboBoxInput";
 var StyledIconDefaults = (0, _styledComponents.css)(["flex-shrink:0;cursor:pointer;"]);
@@ -37,7 +37,7 @@ StyledComboBoxCollapseExpandSingleIcon.displayName = "StyledComboBoxCollapseExpa
 var StyledComboBoxCloseSmallIcon = (0, _styledComponents.default)(_collection.CloseSmallIcon).withConfig({
   displayName: "Styles__StyledComboBoxCloseSmallIcon",
   componentId: "sc-5qvkpb-2"
-})(["", " opacity:0;transition-property:all;transition-duration:0.2s;transition-delay:0.5s;", ":hover &{opacity:1;transition-delay:0s;}"], StyledIconDefaults, StyledComboBoxInput);
+})(["", " opacity:0;transition-property:all;transition-duration:0.2s;transition-delay:0.5s;", ":hover,", ":hover &{opacity:1;transition-delay:0s;}"], StyledIconDefaults, StyledComboBoxInput, _Styles.StyledInputWrapper);
 exports.StyledComboBoxCloseSmallIcon = StyledComboBoxCloseSmallIcon;
 StyledComboBoxCloseSmallIcon.displayName = "StyledComboBoxCloseSmallIcon";
 

package/dist/cjs/components/ComboBox/Styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ComboBox/Styles.ts"],"names":["StyledComboBoxInput","Input","props","$loading","css","displayName","StyledIconDefaults","StyledComboBoxCollapseExpandSingleIcon","CollapseExpandSingleIcon","$open","StyledComboBoxCloseSmallIcon","CloseSmallIcon","StyledComboBoxList","styled","div","$width"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;AAEO,IAAMA,mBAAmB,GAAG,+BAAOC,YAAP,CAAH;AAAA;AAAA;AAAA,+DAK5B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,QACAC,qBADA,uBADA;AAAA,CAL4B,CAAzB;;AAYPJ,mBAAmB,CAACK,WAApB,GAAkC,qBAAlC;AAEA,IAAMC,kBAAkB,OAAGF,qBAAH,oCAAxB;AAKO,IAAMG,sCAAsC,GAAG,+BACpDC,oCADoD,CAAH;AAAA;AAAA;AAAA,wEAG/CF,kBAH+C,EAO/C,UAACJ,KAAD;AAAA,SACAA,KAAK,CAACO,KAAN,QACAL,qBADA,8BADA;AAAA,CAP+C,CAA5C;;AAcPG,sCAAsC,CAACF,WAAvC,GACE,wCADF;AAGO,IAAMK,4BAA4B,GAAG,+BAAOC,0BAAP,CAAH;AAAA;AAAA;AAAA,2IACrCL,kBADqC,EAOrCN,mBAPqC,CAAlC;;AAaPU,4BAA4B,CAACL,WAA7B,GAA2C,8BAA3C;;AAEO,IAAMO,kBAAkB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,oLAOpB,UAACZ,KAAD;AAAA,mBAAcA,KAAK,CAACa,MAApB;AAAA,CAPoB,CAAxB;;;AAUPH,kBAAkB,CAACP,WAAnB,GAAiC,oBAAjC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { CollapseExpandSingleIcon, CloseSmallIcon } from \"../Icons/collection\";\nimport { Input } from \"../Input\";\n\nexport const StyledComboBoxInput = styled(Input)<{ $loading?: boolean }>`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n\n  ${(props) =>\n    props.$loading &&\n    css`\n      cursor: progress;\n    `}\n`;\n\nStyledComboBoxInput.displayName = \"StyledComboBoxInput\";\n\nconst StyledIconDefaults = css`\n  flex-shrink: 0;\n  cursor: pointer;\n`;\n\nexport const StyledComboBoxCollapseExpandSingleIcon = styled(\n  CollapseExpandSingleIcon\n)<{ $open?: boolean }>`\n  ${StyledIconDefaults}\n  color: var(--color-theme-600);\n  transform: rotate(180deg);\n\n  ${(props) =>\n    props.$open &&\n    css`\n      transform: rotate(0deg);\n    `}\n`;\n\nStyledComboBoxCollapseExpandSingleIcon.displayName =\n  \"StyledComboBoxCollapseExpandSingleIcon\";\n\nexport const StyledComboBoxCloseSmallIcon = styled(CloseSmallIcon)`\n  ${StyledIconDefaults}\n  opacity: 0;\n  transition-property: all;\n  transition-duration: 0.2s;\n  transition-delay: 0.5s;\n\n  ${StyledComboBoxInput}:hover & {\n    opacity: 1;\n    transition-delay: 0s;\n  }\n`;\n\nStyledComboBoxCloseSmallIcon.displayName = \"StyledComboBoxCloseSmallIcon\";\n\nexport const StyledComboBoxList = styled.div<{ $width?: number }>`\n  min-width: 260px;\n  background-color: var(--page-paper-main);\n  border-radius: 8px;\n  border: 1px solid var(--border-primary);\n  box-shadow: var(--shadow-tertiary);\n  margin: 8px 0;\n  width: ${(props) => `${props.$width}px`};\n`;\n\nStyledComboBoxList.displayName = \"StyledComboBoxList\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../src/components/ComboBox/Styles.ts"],"names":["StyledComboBoxInput","Input","displayName","StyledIconDefaults","css","StyledComboBoxCollapseExpandSingleIcon","CollapseExpandSingleIcon","props","$open","StyledComboBoxCloseSmallIcon","CloseSmallIcon","StyledInputWrapper","StyledComboBoxList","styled","div","$width"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAEO,IAAMA,mBAAmB,GAAG,+BAAOC,YAAP,CAAH;AAAA;AAAA;AAAA,0DAAzB;;AAMPD,mBAAmB,CAACE,WAApB,GAAkC,qBAAlC;AAEA,IAAMC,kBAAkB,OAAGC,qBAAH,oCAAxB;AAKO,IAAMC,sCAAsC,GAAG,+BACpDC,oCADoD,CAAH;AAAA;AAAA;AAAA,wEAG/CH,kBAH+C,EAO/C,UAACI,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,QACAJ,qBADA,8BADA;AAAA,CAP+C,CAA5C;;AAcPC,sCAAsC,CAACH,WAAvC,GACE,wCADF;AAGO,IAAMO,4BAA4B,GAAG,+BAAOC,0BAAP,CAAH;AAAA;AAAA;AAAA,sJACrCP,kBADqC,EAOrCH,mBAPqC,EAOPW,0BAPO,CAAlC;;AAaPF,4BAA4B,CAACP,WAA7B,GAA2C,8BAA3C;;AAEO,IAAMU,kBAAkB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,oLAOpB,UAACP,KAAD;AAAA,mBAAcA,KAAK,CAACQ,MAApB;AAAA,CAPoB,CAAxB;;;AAUPH,kBAAkB,CAACV,WAAnB,GAAiC,oBAAjC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { CollapseExpandSingleIcon, CloseSmallIcon } from \"../Icons/collection\";\nimport { Input } from \"../Input\";\nimport { StyledInputWrapper } from \"../Input/Styles\";\n\nexport const StyledComboBoxInput = styled(Input)<{ $loading?: boolean }>`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n`;\n\nStyledComboBoxInput.displayName = \"StyledComboBoxInput\";\n\nconst StyledIconDefaults = css`\n  flex-shrink: 0;\n  cursor: pointer;\n`;\n\nexport const StyledComboBoxCollapseExpandSingleIcon = styled(\n  CollapseExpandSingleIcon\n)<{ $open?: boolean }>`\n  ${StyledIconDefaults}\n  color: var(--color-theme-600);\n  transform: rotate(180deg);\n\n  ${(props) =>\n    props.$open &&\n    css`\n      transform: rotate(0deg);\n    `}\n`;\n\nStyledComboBoxCollapseExpandSingleIcon.displayName =\n  \"StyledComboBoxCollapseExpandSingleIcon\";\n\nexport const StyledComboBoxCloseSmallIcon = styled(CloseSmallIcon)`\n  ${StyledIconDefaults}\n  opacity: 0;\n  transition-property: all;\n  transition-duration: 0.2s;\n  transition-delay: 0.5s;\n\n  ${StyledComboBoxInput}:hover, ${StyledInputWrapper}:hover & {\n    opacity: 1;\n    transition-delay: 0s;\n  }\n`;\n\nStyledComboBoxCloseSmallIcon.displayName = \"StyledComboBoxCloseSmallIcon\";\n\nexport const StyledComboBoxList = styled.div<{ $width?: number }>`\n  min-width: 260px;\n  background-color: var(--page-paper-main);\n  border-radius: 8px;\n  border: 1px solid var(--border-primary);\n  box-shadow: var(--shadow-tertiary);\n  margin: 8px 0;\n  width: ${(props) => `${props.$width}px`};\n`;\n\nStyledComboBoxList.displayName = \"StyledComboBoxList\";\n"],"file":"Styles.js"}

package/dist/cjs/components/Input/Styles.js

@@ -53,7 +53,7 @@ StyledInputWrapper.displayName = "StyledInputWrapper";
 var StyledInput = _styledComponents.default.input.withConfig({
   displayName: "Styles__StyledInput",
   componentId: "sc-ce8kcp-1"
-})(["", " ", " ", " ", " ", " ", " padding:0px;margin:0 4px;background-color:var(--input-background-color);border:none;outline:none;&::placeholder{", "}", " ", ""], {
+})(["", " ", " ", " ", " ", " ", " padding:0px;margin:0 4px;background-color:var(--input-background-color);border:none;outline:none;&::placeholder{", "}", " ", " ", ""], {
   "fontSize": "0.875rem"
 }, {
   "color": "var(--color-theme-900)"
@@ -75,6 +75,8 @@ var StyledInput = _styledComponents.default.input.withConfig({
   return props.disabled && (0, _styledComponents.css)(["", ""], {
     "cursor": "not-allowed"
   });
+}, function (props) {
+  return props.$loading && (0, _styledComponents.css)(["cursor:progress;"]);
 });
 
 exports.StyledInput = StyledInput;

package/dist/cjs/components/Input/Styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Input/Styles.ts"],"names":["StyledInputWrapper","styled","div","FontStyle","BoxSizingStyle","props","$size","css","$disabled","$invalid","displayName","StyledInput","input","disabled"],"mappings":";;;;;;;;;AAAA;;AAGA;;AACA;;;;;;AAOO,IAAMA,kBAAkB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,iOACzB;AAAA;AAAA,CADyB,EAEzB;AAAA;AAAA,CAFyB,EAGzB;AAAA;AAAA,CAHyB,EAMzB;AAAA;AAAA,CANyB,EAc3BC,oBAd2B,EAe3BC,8BAf2B,EAiB3B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,OAAhB,QACAC,qBADA,qCADA;AAAA,CAjB2B,EAwB3B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,KAAhB,QACAC,qBADA,mBADA;AAAA,CAxB2B,EA8B3B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,SAAN,QACAD,qBADA,YAEM;AAAA;AAAA;AAAA,GAFN,CADA;AAAA,CA9B2B,EAoC3B,UAACF,KAAD;AAAA,SACA,CAACA,KAAK,CAACG,SAAP,IACA,CAACH,KAAK,CAACI,QADP,QAEAF,qBAFA,oCAKQ;AAAA;AAAA,GALR,CADA;AAAA,CApC2B,EA8C3B,UAACF,KAAD;AAAA,SACA,CAACA,KAAK,CAACG,SAAP,IACAH,KAAK,CAACI,QADN,QAEAF,qBAFA,YAGM;AAAA;AAAA,GAHN,CADA;AAAA,CA9C2B,CAAxB;;;AAsDPP,kBAAkB,CAACU,WAAnB,GAAiC,oBAAjC;;AAMO,IAAMC,WAAW,GAAGV,0BAAOW,KAAV;AAAA;AAAA;AAAA,qKAClB;AAAA;AAAA,CADkB,EAElB;AAAA;AAAA,CAFkB,EAGlB;AAAA;AAAA,CAHkB,EAIlB;AAAA;AAAA,CAJkB,EAKlB;AAAA;AAAA,CALkB,EAMlB;AAAA;AAAA,CANkB,EAgBhB;AAAA;AAAA,CAhBgB,EAmBpB,UAACP,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,KAAhB,QACAC,qBADA,YAEM;AAAA;AAAA,GAFN,CADA;AAAA,CAnBoB,EAyBpB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACQ,QAAN,QACAN,qBADA,YAEM;AAAA;AAAA,GAFN,CADA;AAAA,CAzBoB,CAAjB;;;AAgCPI,WAAW,CAACD,WAAZ,GAA0B,aAA1B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\ninterface StyledInputWrapperProps {\n  $size?: InputSize;\n  $invalid?: boolean;\n  $disabled?: boolean;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n  ${tw`tw-cursor-text`}\n  ${tw`tw-flex`}\n  ${tw`tw-items-center`}\n  border-width: 1px;\n  border-style: solid;\n  ${tw`tw-border-theme-500`}\n  border-radius: 8px;\n  padding: 4px;\n  height: 32px;\n  background-color: var(--input-background-color);\n  transition: all 0.3s ease;\n  width: 360px;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    props.$size === \"small\" &&\n    css`\n      border-radius: 6px;\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      height: 40px;\n    `}\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      ${tw`tw-cursor-not-allowed tw-opacity-50`}\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    !props.$invalid &&\n    css`\n      &:focus-within,\n      &:hover {\n        ${tw`tw-border-primary`}\n      }\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    props.$invalid &&\n    css`\n      ${tw`tw-border-alert`}\n    `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps {\n  $size?: InputSize;\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n  ${tw`tw-text-body-2`}\n  ${tw`tw-text-theme-900`}\n  ${tw`tw-leading-regular`}\n  ${tw`tw-tracking-regular`}\n  ${tw`tw-font-regular`}\n  ${tw`tw-w-full`}\n\n  padding: 0px;\n  margin: 0 4px;\n\n  background-color: var(--input-background-color);\n  border: none;\n  outline: none;\n\n  &::placeholder {\n    ${tw`tw-text-theme-transparent-500`}\n  }\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      ${tw`tw-text-body-1`}\n    `}\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      ${tw`tw-cursor-not-allowed`}\n    `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../src/components/Input/Styles.ts"],"names":["StyledInputWrapper","styled","div","FontStyle","BoxSizingStyle","props","$size","css","$disabled","$invalid","displayName","StyledInput","input","disabled","$loading"],"mappings":";;;;;;;;;AAAA;;AAGA;;AACA;;;;;;AAOO,IAAMA,kBAAkB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,iOACzB;AAAA;AAAA,CADyB,EAEzB;AAAA;AAAA,CAFyB,EAGzB;AAAA;AAAA,CAHyB,EAMzB;AAAA;AAAA,CANyB,EAc3BC,oBAd2B,EAe3BC,8BAf2B,EAiB3B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,OAAhB,QACAC,qBADA,qCADA;AAAA,CAjB2B,EAwB3B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,KAAhB,QACAC,qBADA,mBADA;AAAA,CAxB2B,EA8B3B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,SAAN,QACAD,qBADA,YAEM;AAAA;AAAA;AAAA,GAFN,CADA;AAAA,CA9B2B,EAoC3B,UAACF,KAAD;AAAA,SACA,CAACA,KAAK,CAACG,SAAP,IACA,CAACH,KAAK,CAACI,QADP,QAEAF,qBAFA,oCAKQ;AAAA;AAAA,GALR,CADA;AAAA,CApC2B,EA8C3B,UAACF,KAAD;AAAA,SACA,CAACA,KAAK,CAACG,SAAP,IACAH,KAAK,CAACI,QADN,QAEAF,qBAFA,YAGM;AAAA;AAAA,GAHN,CADA;AAAA,CA9C2B,CAAxB;;;AAsDPP,kBAAkB,CAACU,WAAnB,GAAiC,oBAAjC;;AAOO,IAAMC,WAAW,GAAGV,0BAAOW,KAAV;AAAA;AAAA;AAAA,0KAClB;AAAA;AAAA,CADkB,EAElB;AAAA;AAAA,CAFkB,EAGlB;AAAA;AAAA,CAHkB,EAIlB;AAAA;AAAA,CAJkB,EAKlB;AAAA;AAAA,CALkB,EAMlB;AAAA;AAAA,CANkB,EAgBhB;AAAA;AAAA,CAhBgB,EAmBpB,UAACP,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,KAAhB,QACAC,qBADA,YAEM;AAAA;AAAA,GAFN,CADA;AAAA,CAnBoB,EAyBpB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACQ,QAAN,QACAN,qBADA,YAEM;AAAA;AAAA,GAFN,CADA;AAAA,CAzBoB,EA+BpB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACS,QAAN,QACAP,qBADA,uBADA;AAAA,CA/BoB,CAAjB;;;AAsCPI,WAAW,CAACD,WAAZ,GAA0B,aAA1B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\ninterface StyledInputWrapperProps {\n  $size?: InputSize;\n  $invalid?: boolean;\n  $disabled?: boolean;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n  ${tw`tw-cursor-text`}\n  ${tw`tw-flex`}\n  ${tw`tw-items-center`}\n  border-width: 1px;\n  border-style: solid;\n  ${tw`tw-border-theme-500`}\n  border-radius: 8px;\n  padding: 4px;\n  height: 32px;\n  background-color: var(--input-background-color);\n  transition: all 0.3s ease;\n  width: 360px;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    props.$size === \"small\" &&\n    css`\n      border-radius: 6px;\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      height: 40px;\n    `}\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      ${tw`tw-cursor-not-allowed tw-opacity-50`}\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    !props.$invalid &&\n    css`\n      &:focus-within,\n      &:hover {\n        ${tw`tw-border-primary`}\n      }\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    props.$invalid &&\n    css`\n      ${tw`tw-border-alert`}\n    `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps {\n  $size?: InputSize;\n  $loading?: boolean;\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n  ${tw`tw-text-body-2`}\n  ${tw`tw-text-theme-900`}\n  ${tw`tw-leading-regular`}\n  ${tw`tw-tracking-regular`}\n  ${tw`tw-font-regular`}\n  ${tw`tw-w-full`}\n\n  padding: 0px;\n  margin: 0 4px;\n\n  background-color: var(--input-background-color);\n  border: none;\n  outline: none;\n\n  &::placeholder {\n    ${tw`tw-text-theme-transparent-500`}\n  }\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      ${tw`tw-text-body-1`}\n    `}\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      ${tw`tw-cursor-not-allowed`}\n    `}\n\n  ${(props) =>\n    props.$loading &&\n    css`\n      cursor: progress;\n    `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"file":"Styles.js"}

package/dist/cjs/components/Loaders/Spinner/Styles.js

@@ -20,7 +20,7 @@ var rotateAnimation = (0, _styledComponents.keyframes)(["from{transform:rotate(0
 var StyledSpinnerLoader = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledSpinnerLoader",
   componentId: "sc-1ht53g9-0"
-})(["", " border-radius:100%;", " ", " ", " ", ""], _BoxSizingStyle.BoxSizingStyle, function (props) {
+})(["", " border-radius:100%;flex-shrink:0;", " ", " ", " ", ""], _BoxSizingStyle.BoxSizingStyle, function (props) {
   return (0, _styledComponents.css)(["width:", "px;height:", "px;animation:", " ", "s infinite linear;"], props.$diameter, props.$diameter, rotateAnimation, props.$rotateDurationInSeconds);
 }, function (props) {
   return props.$activeColorPercentage === "25%" && (0, _styledComponents.css)(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);

package/dist/cjs/components/Loaders/Spinner/Styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Loaders/Spinner/Styles.ts"],"names":["rotateAnimation","keyframes","StyledSpinnerLoader","styled","div","BoxSizingStyle","props","css","$diameter","$rotateDurationInSeconds","$activeColorPercentage","$stroke","$inactiveStrokeColor","$activeStrokeColor"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;AAEA,IAAMA,eAAe,OAAGC,2BAAH,iEAArB;;AAcO,IAAMC,mBAAmB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,oDAC5BC,8BAD4B,EAG5B,UAACC,KAAD;AAAA,aACAC,qBADA,wEAEWD,KAAK,CAACE,SAFjB,EAGYF,KAAK,CAACE,SAHlB,EAIeR,eAJf,EAIkCM,KAAK,CAACG,wBAJxC;AAAA,CAH4B,EAW5B,UAACH,KAAD;AAAA,SACAA,KAAK,CAACI,sBAAN,KAAiC,KAAjC,QACAH,qBADA,kIAEkBD,KAAK,CAACK,OAFxB,EAE2CL,KAAK,CAACM,oBAFjD,EAGmBN,KAAK,CAACK,OAHzB,EAG4CL,KAAK,CAACM,oBAHlD,EAIiBN,KAAK,CAACK,OAJvB,EAI0CL,KAAK,CAACM,oBAJhD,EAKgBN,KAAK,CAACK,OALtB,EAKyCL,KAAK,CAACO,kBAL/C,CADA;AAAA,CAX4B,EAoB5B,UAACP,KAAD;AAAA,SACAA,KAAK,CAACI,sBAAN,KAAiC,KAAjC,QACAH,qBADA,kIAEkBD,KAAK,CAACK,OAFxB,EAE2CL,KAAK,CAACO,kBAFjD,EAGmBP,KAAK,CAACK,OAHzB,EAG4CL,KAAK,CAACM,oBAHlD,EAIiBN,KAAK,CAACK,OAJvB,EAI0CL,KAAK,CAACM,oBAJhD,EAKgBN,KAAK,CAACK,OALtB,EAKyCL,KAAK,CAACO,kBAL/C,CADA;AAAA,CApB4B,EA6B1B,UAACP,KAAD;AAAA,SACFA,KAAK,CAACI,sBAAN,KAAiC,KAAjC,QACAH,qBADA,kIAEkBD,KAAK,CAACK,OAFxB,EAE2CL,KAAK,CAACO,kBAFjD,EAGmBP,KAAK,CAACK,OAHzB,EAG4CL,KAAK,CAACO,kBAHlD,EAIiBP,KAAK,CAACK,OAJvB,EAI0CL,KAAK,CAACM,oBAJhD,EAKgBN,KAAK,CAACK,OALtB,EAKyCL,KAAK,CAACO,kBAL/C,CADE;AAAA,CA7B0B,CAAzB","sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\n\nconst rotateAnimation = keyframes`\n  from { transform: rotate(0deg); }\n  to { transform: rotate(359deg); }\n`;\n\nexport interface StyledSpinnerLoaderProps {\n  $diameter: number;\n  $stroke: number;\n  $activeStrokeColor: string;\n  $inactiveStrokeColor: string;\n  $activeColorPercentage: \"25%\" | \"50%\" | \"75%\";\n  $rotateDurationInSeconds: number;\n}\n\nexport const StyledSpinnerLoader = styled.div<StyledSpinnerLoaderProps>`\n  ${BoxSizingStyle}\n  border-radius: 100%;\n  ${(props) =>\n    css`\n      width: ${props.$diameter}px;\n      height: ${props.$diameter}px;\n      animation: ${rotateAnimation} ${props.$rotateDurationInSeconds}s infinite\n        linear;\n    `}\n\n  ${(props) =>\n    props.$activeColorPercentage === \"25%\" &&\n    css`\n      border-right: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n      border-bottom: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n      border-left: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n      border-top: ${props.$stroke}px solid ${props.$activeStrokeColor};\n    `}\n\n  ${(props) =>\n    props.$activeColorPercentage === \"50%\" &&\n    css`\n      border-right: ${props.$stroke}px solid ${props.$activeStrokeColor};\n      border-bottom: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n      border-left: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n      border-top: ${props.$stroke}px solid ${props.$activeStrokeColor};\n    `}\n\n    ${(props) =>\n    props.$activeColorPercentage === \"75%\" &&\n    css`\n      border-right: ${props.$stroke}px solid ${props.$activeStrokeColor};\n      border-bottom: ${props.$stroke}px solid ${props.$activeStrokeColor};\n      border-left: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n      border-top: ${props.$stroke}px solid ${props.$activeStrokeColor};\n    `}\n`;\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../../src/components/Loaders/Spinner/Styles.ts"],"names":["rotateAnimation","keyframes","StyledSpinnerLoader","styled","div","BoxSizingStyle","props","css","$diameter","$rotateDurationInSeconds","$activeColorPercentage","$stroke","$inactiveStrokeColor","$activeStrokeColor"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;AAEA,IAAMA,eAAe,OAAGC,2BAAH,iEAArB;;AAcO,IAAMC,mBAAmB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,kEAC5BC,8BAD4B,EAI5B,UAACC,KAAD;AAAA,aACAC,qBADA,wEAEWD,KAAK,CAACE,SAFjB,EAGYF,KAAK,CAACE,SAHlB,EAIeR,eAJf,EAIkCM,KAAK,CAACG,wBAJxC;AAAA,CAJ4B,EAY5B,UAACH,KAAD;AAAA,SACAA,KAAK,CAACI,sBAAN,KAAiC,KAAjC,QACAH,qBADA,kIAEkBD,KAAK,CAACK,OAFxB,EAE2CL,KAAK,CAACM,oBAFjD,EAGmBN,KAAK,CAACK,OAHzB,EAG4CL,KAAK,CAACM,oBAHlD,EAIiBN,KAAK,CAACK,OAJvB,EAI0CL,KAAK,CAACM,oBAJhD,EAKgBN,KAAK,CAACK,OALtB,EAKyCL,KAAK,CAACO,kBAL/C,CADA;AAAA,CAZ4B,EAqB5B,UAACP,KAAD;AAAA,SACAA,KAAK,CAACI,sBAAN,KAAiC,KAAjC,QACAH,qBADA,kIAEkBD,KAAK,CAACK,OAFxB,EAE2CL,KAAK,CAACO,kBAFjD,EAGmBP,KAAK,CAACK,OAHzB,EAG4CL,KAAK,CAACM,oBAHlD,EAIiBN,KAAK,CAACK,OAJvB,EAI0CL,KAAK,CAACM,oBAJhD,EAKgBN,KAAK,CAACK,OALtB,EAKyCL,KAAK,CAACO,kBAL/C,CADA;AAAA,CArB4B,EA8B1B,UAACP,KAAD;AAAA,SACFA,KAAK,CAACI,sBAAN,KAAiC,KAAjC,QACAH,qBADA,kIAEkBD,KAAK,CAACK,OAFxB,EAE2CL,KAAK,CAACO,kBAFjD,EAGmBP,KAAK,CAACK,OAHzB,EAG4CL,KAAK,CAACO,kBAHlD,EAIiBP,KAAK,CAACK,OAJvB,EAI0CL,KAAK,CAACM,oBAJhD,EAKgBN,KAAK,CAACK,OALtB,EAKyCL,KAAK,CAACO,kBAL/C,CADE;AAAA,CA9B0B,CAAzB","sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\n\nconst rotateAnimation = keyframes`\n  from { transform: rotate(0deg); }\n  to { transform: rotate(359deg); }\n`;\n\nexport interface StyledSpinnerLoaderProps {\n  $diameter: number;\n  $stroke: number;\n  $activeStrokeColor: string;\n  $inactiveStrokeColor: string;\n  $activeColorPercentage: \"25%\" | \"50%\" | \"75%\";\n  $rotateDurationInSeconds: number;\n}\n\nexport const StyledSpinnerLoader = styled.div<StyledSpinnerLoaderProps>`\n  ${BoxSizingStyle}\n  border-radius: 100%;\n  flex-shrink: 0;\n  ${(props) =>\n    css`\n      width: ${props.$diameter}px;\n      height: ${props.$diameter}px;\n      animation: ${rotateAnimation} ${props.$rotateDurationInSeconds}s infinite\n        linear;\n    `}\n\n  ${(props) =>\n    props.$activeColorPercentage === \"25%\" &&\n    css`\n      border-right: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n      border-bottom: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n      border-left: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n      border-top: ${props.$stroke}px solid ${props.$activeStrokeColor};\n    `}\n\n  ${(props) =>\n    props.$activeColorPercentage === \"50%\" &&\n    css`\n      border-right: ${props.$stroke}px solid ${props.$activeStrokeColor};\n      border-bottom: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n      border-left: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n      border-top: ${props.$stroke}px solid ${props.$activeStrokeColor};\n    `}\n\n    ${(props) =>\n    props.$activeColorPercentage === \"75%\" &&\n    css`\n      border-right: ${props.$stroke}px solid ${props.$activeStrokeColor};\n      border-bottom: ${props.$stroke}px solid ${props.$activeStrokeColor};\n      border-left: ${props.$stroke}px solid ${props.$inactiveStrokeColor};\n      border-top: ${props.$stroke}px solid ${props.$activeStrokeColor};\n    `}\n`;\n"],"file":"Styles.js"}

package/dist/cjs/components/Select/OptionGroup/OptionGroup.js

@@ -91,9 +91,9 @@ var OptionGroup = function OptionGroup(_ref) {
       }
     }
   }, [allOptionValues, checked, isAllOptionsChecked, onChange]);
-  return /*#__PURE__*/_react.default.createElement("li", {
+  return /*#__PURE__*/_react.default.createElement(_Styles.StyledOptionGroupLi, {
     key: id,
-    className: (0, _classnames.default)("c-option-group tw-flex-col", optionGroupClassName)
+    className: (0, _classnames.default)("c-option-group", optionGroupClassName)
   }, /*#__PURE__*/_react.default.createElement(_Styles.StyledOptionGroup, {
     key: id
   }, /*#__PURE__*/_react.default.createElement(_Styles.StyledOptionGroupOption, {

package/dist/cjs/components/Select/OptionGroup/OptionGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Select/OptionGroup/OptionGroup.tsx"],"names":["OptionGroup","id","name","options","type","hover","filter","checked","onChange","setHover","renderOptions","optionGroupClassName","list","v","toLowerCase","includes","trim","document","getElementById","focus","isAllOptionsChecked","every","option","handleHover","undefined","allOptionValues","map","handleClick","e","stopPropagation","i","values","unique","item","pos","indexOf","index","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AAKA;;;;;;;;;;;;;;;;;;;;AA0BO,IAAMA,WAEZ,GAAG,SAFSA,WAET,OAYE;AAAA,MAXJC,EAWI,QAXJA,EAWI;AAAA,MAVJC,IAUI,QAVJA,IAUI;AAAA,MATJC,OASI,QATJA,OASI;AAAA,MARJC,IAQI,QARJA,IAQI;AAAA,MAPJC,KAOI,QAPJA,KAOI;AAAA,MANJC,MAMI,QANJA,MAMI;AAAA,MALJC,OAKI,QALJA,OAKI;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,MAFJC,aAEI,QAFJA,aAEI;AAAA,MADJC,oBACI,QADJA,oBACI;AACJ,MAAMC,IAAI,GAAG,oBACX;AAAA,WACEN,MAAM,GACFH,OAAO,CAACG,MAAR,CAAe,UAACO,CAAD;AAAA,aACbA,CAAC,CAACX,IAAF,CAAOY,WAAP,GAAqBC,QAArB,CAA8BT,MAAM,CAACU,IAAP,GAAcF,WAAd,EAA9B,CADa;AAAA,KAAf,CADE,GAIFX,OALN;AAAA,GADW,EAOX,CAACG,MAAD,EAASH,OAAT,CAPW,CAAb;AAUA,wBAAU,YAAM;AACd,QAAIE,KAAK,KAAKJ,EAAV,IAAgBG,IAAI,KAAK,QAA7B,EAAuC;AAAA;;AACrC,+BAAAa,QAAQ,CAACC,cAAT,WAA2BjB,EAA3B,kFAAkCkB,KAAlC;AACD;AACF,GAJD,EAIG,CAACd,KAAD,EAAQD,IAAR,EAAcH,EAAd,CAJH;AAMA,MAAMmB,mBAAmB,GAAG,oBAC1B;AAAA,WAAMjB,OAAO,CAACkB,KAAR,CAAc,UAACC,MAAD;AAAA,aAAYf,OAAO,CAACQ,QAAR,CAAiBO,MAAM,CAACrB,EAAxB,CAAZ;AAAA,KAAd,CAAN;AAAA,GAD0B,EAE1B,CAACE,OAAD,EAAUI,OAAV,CAF0B,CAA5B;AAKA,MAAMgB,WAAW,GAAG,wBAAY,YAAM;AACpC,QAAId,QAAJ,EAAc;AACZA,MAAAA,QAAQ,CAACL,IAAI,KAAK,QAAT,GAAoBoB,SAApB,GAAgCvB,EAAjC,CAAR;AACD;AACF,GAJmB,EAIjB,CAACQ,QAAD,EAAWL,IAAX,EAAiBH,EAAjB,CAJiB,CAApB;AAMA,MAAMwB,eAAe,GAAG,oBACtB;AAAA,WAAMtB,OAAO,CAACuB,GAAR,CAAY,UAACJ,MAAD;AAAA,aAAYA,MAAM,CAACrB,EAAnB;AAAA,KAAZ,CAAN;AAAA,GADsB,EAEtB,CAACE,OAAD,CAFsB,CAAxB;AAKA,MAAMwB,WAAW,GAAG,wBAClB,UAACC,CAAD,EAAO;AACLA,IAAAA,CAAC,CAACC,eAAF;;AACA,QAAIrB,QAAJ,EAAc;AACZ,UAAIY,mBAAJ,EAAyB;AACvBZ,QAAAA,QAAQ,CACND,OAAO,CAACD,MAAR,CAAe,UAACwB,CAAD;AAAA,iBAAOL,eAAe,CAACV,QAAhB,CAAyBe,CAAzB,MAAgC,KAAvC;AAAA,SAAf,CADM,CAAR;AAGD,OAJD,MAIO;AACL,YAAMC,MAAM,gCAAOxB,OAAP,sBAAmBkB,eAAnB,EAAZ;AACA,YAAMO,MAAM,GAAGD,MAAM,CAACzB,MAAP,CAAc,UAAC2B,IAAD,EAAOC,GAAP,EAAe;AAC1C,iBAAOH,MAAM,CAACI,OAAP,CAAeF,IAAf,MAAyBC,GAAhC;AACD,SAFc,CAAf;AAGA1B,QAAAA,QAAQ,CAACwB,MAAD,CAAR;AACD;AACF;AACF,GAhBiB,EAiBlB,CAACP,eAAD,EAAkBlB,OAAlB,EAA2Ba,mBAA3B,EAAgDZ,QAAhD,CAjBkB,CAApB;AAoBA,sBACE;AACE,IAAA,GAAG,EAAEP,EADP;AAEE,IAAA,SAAS,EAAE,yBAAW,4BAAX,EAAyCU,oBAAzC;AAFb,kBAIE,6BAAC,yBAAD;AAAmB,IAAA,GAAG,EAAEV;AAAxB,kBACE,6BAAC,+BAAD;AACE,IAAA,YAAY,EAAEsB,WADhB;AAEE,IAAA,KAAK,EAAElB,KAAK,KAAKJ,EAAV,IAAgBG,IAAI,KAAK;AAFlC,kBAIE,6BAAC,+BAAD,QACGF,IADH,EAEGE,IAAI,KAAK,UAAT,iBACC,6BAAC,kBAAD;AACE,IAAA,EAAE,YAAKH,EAAL,CADJ;AAEE,IAAA,OAAO,EAAEmB,mBAFX;AAGE,IAAA,QAAQ,EAAEO,WAHZ;AAIE,IAAA,IAAI,EAAC;AAJP,IAHJ,CAJF,CADF,eAiBE,6BAAC,UAAD,QACGf,IAAI,CAACc,GAAL,CAAS,UAACO,IAAD,EAAyBG,KAAzB,EAAmC;AAC3C,WAAO,OAAO1B,aAAP,KAAyB,UAAzB,GACHA,aAAa,CAACuB,IAAD,EAAOG,KAAP,CADV,GAEHH,IAAI,CAAC/B,IAFT;AAGD,GAJA,CADH,CAjBF,CAJF,CADF;AAgCD,CAnGM;;;AAqGPF,WAAW,CAACqC,WAAZ,GAA0B,aAA1B","sourcesContent":["import React, { useCallback, useEffect, useMemo, FC } from \"react\";\nimport classNames from \"classnames\";\nimport { IOptionItemProps } from \"../Option/Option\";\nimport { Checkbox } from \"../../Checkbox/Checkbox\";\nimport {\n  StyledOptionGroup,\n  StyledOptionGroupHeader,\n  StyledOptionGroupOption,\n} from \"./Styles\";\nimport { List } from \"../../List\";\n\nexport interface IOptionGroupProps extends IOptionItemProps {\n  /** Options items list */\n  options: IOptionItemProps[];\n}\n\ninterface IAdditionalOptionGroupProps {\n  /** Select type: single or multiple */\n  type?: \"single\" | \"multiple\";\n  /** Value of hovered element */\n  hover?: number | string | null;\n  /** Filter for labels */\n  filter?: string;\n  /** Checked values */\n  checked: (string | number)[];\n  /** onChange callback */\n  onChange?: (e: (string | number)[]) => void;\n  /** Set value of hovered element */\n  setHover?: (e: number | string | undefined) => void;\n  /** Render function */\n  renderOptions?: (item: IOptionItemProps, index: number) => void;\n  /** Value that represent class names */\n  optionGroupClassName?: string;\n}\n\nexport const OptionGroup: FC<\n  IOptionGroupProps & IAdditionalOptionGroupProps\n> = ({\n  id,\n  name,\n  options,\n  type,\n  hover,\n  filter,\n  checked,\n  onChange,\n  setHover,\n  renderOptions,\n  optionGroupClassName,\n}) => {\n  const list = useMemo(\n    () =>\n      filter\n        ? options.filter((v) =>\n            v.name.toLowerCase().includes(filter.trim().toLowerCase())\n          )\n        : options,\n    [filter, options]\n  );\n\n  useEffect(() => {\n    if (hover === id && type !== \"single\") {\n      document.getElementById(`${id}`)?.focus();\n    }\n  }, [hover, type, id]);\n\n  const isAllOptionsChecked = useMemo(\n    () => options.every((option) => checked.includes(option.id)),\n    [options, checked]\n  );\n\n  const handleHover = useCallback(() => {\n    if (setHover) {\n      setHover(type === \"single\" ? undefined : id);\n    }\n  }, [setHover, type, id]);\n\n  const allOptionValues = useMemo(\n    () => options.map((option) => option.id),\n    [options]\n  );\n\n  const handleClick = useCallback(\n    (e) => {\n      e.stopPropagation();\n      if (onChange) {\n        if (isAllOptionsChecked) {\n          onChange(\n            checked.filter((i) => allOptionValues.includes(i) === false)\n          );\n        } else {\n          const values = [...checked, ...allOptionValues];\n          const unique = values.filter((item, pos) => {\n            return values.indexOf(item) === pos;\n          });\n          onChange(unique);\n        }\n      }\n    },\n    [allOptionValues, checked, isAllOptionsChecked, onChange]\n  );\n\n  return (\n    <li\n      key={id}\n      className={classNames(\"c-option-group tw-flex-col\", optionGroupClassName)}\n    >\n      <StyledOptionGroup key={id}>\n        <StyledOptionGroupOption\n          onMouseEnter={handleHover}\n          hover={hover === id && type === \"multiple\"}\n        >\n          <StyledOptionGroupHeader>\n            {name}\n            {type === \"multiple\" && (\n              <Checkbox\n                id={`${id}`}\n                checked={isAllOptionsChecked}\n                onChange={handleClick}\n                type=\"checkbox\"\n              />\n            )}\n          </StyledOptionGroupHeader>\n        </StyledOptionGroupOption>\n        <List>\n          {list.map((item: IOptionItemProps, index) => {\n            return typeof renderOptions === \"function\"\n              ? renderOptions(item, index)\n              : item.name;\n          })}\n        </List>\n      </StyledOptionGroup>\n    </li>\n  );\n};\n\nOptionGroup.displayName = \"OptionGroup\";\n"],"file":"OptionGroup.js"}
+{"version":3,"sources":["../../../../../src/components/Select/OptionGroup/OptionGroup.tsx"],"names":["OptionGroup","id","name","options","type","hover","filter","checked","onChange","setHover","renderOptions","optionGroupClassName","list","v","toLowerCase","includes","trim","document","getElementById","focus","isAllOptionsChecked","every","option","handleHover","undefined","allOptionValues","map","handleClick","e","stopPropagation","i","values","unique","item","pos","indexOf","index","displayName"],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useMemo, FC } from \"react\";\nimport classNames from \"classnames\";\nimport { IOptionItemProps } from \"../Option/Option\";\nimport { Checkbox } from \"../../Checkbox/Checkbox\";\nimport {\n  StyledOptionGroup,\n  StyledOptionGroupHeader,\n  StyledOptionGroupOption,\n  StyledOptionGroupLi,\n} from \"./Styles\";\nimport { List } from \"../../List\";\n\nexport interface IOptionGroupProps extends IOptionItemProps {\n  /** Options items list */\n  options: IOptionItemProps[];\n}\n\ninterface IAdditionalOptionGroupProps {\n  /** Select type: single or multiple */\n  type?: \"single\" | \"multiple\";\n  /** Value of hovered element */\n  hover?: number | string | null;\n  /** Filter for labels */\n  filter?: string;\n  /** Checked values */\n  checked: (string | number)[];\n  /** onChange callback */\n  onChange?: (e: (string | number)[]) => void;\n  /** Set value of hovered element */\n  setHover?: (e: number | string | undefined) => void;\n  /** Render function */\n  renderOptions?: (item: IOptionItemProps, index: number) => void;\n  /** Value that represent class names */\n  optionGroupClassName?: string;\n}\n\nexport const OptionGroup: FC<\n  IOptionGroupProps & IAdditionalOptionGroupProps\n> = ({\n  id,\n  name,\n  options,\n  type,\n  hover,\n  filter,\n  checked,\n  onChange,\n  setHover,\n  renderOptions,\n  optionGroupClassName,\n}) => {\n  const list = useMemo(\n    () =>\n      filter\n        ? options.filter((v) =>\n            v.name.toLowerCase().includes(filter.trim().toLowerCase())\n          )\n        : options,\n    [filter, options]\n  );\n\n  useEffect(() => {\n    if (hover === id && type !== \"single\") {\n      document.getElementById(`${id}`)?.focus();\n    }\n  }, [hover, type, id]);\n\n  const isAllOptionsChecked = useMemo(\n    () => options.every((option) => checked.includes(option.id)),\n    [options, checked]\n  );\n\n  const handleHover = useCallback(() => {\n    if (setHover) {\n      setHover(type === \"single\" ? undefined : id);\n    }\n  }, [setHover, type, id]);\n\n  const allOptionValues = useMemo(\n    () => options.map((option) => option.id),\n    [options]\n  );\n\n  const handleClick = useCallback(\n    (e) => {\n      e.stopPropagation();\n      if (onChange) {\n        if (isAllOptionsChecked) {\n          onChange(\n            checked.filter((i) => allOptionValues.includes(i) === false)\n          );\n        } else {\n          const values = [...checked, ...allOptionValues];\n          const unique = values.filter((item, pos) => {\n            return values.indexOf(item) === pos;\n          });\n          onChange(unique);\n        }\n      }\n    },\n    [allOptionValues, checked, isAllOptionsChecked, onChange]\n  );\n\n  return (\n    <StyledOptionGroupLi\n      key={id}\n      className={classNames(\"c-option-group\", optionGroupClassName)}\n    >\n      <StyledOptionGroup key={id}>\n        <StyledOptionGroupOption\n          onMouseEnter={handleHover}\n          hover={hover === id && type === \"multiple\"}\n        >\n          <StyledOptionGroupHeader>\n            {name}\n            {type === \"multiple\" && (\n              <Checkbox\n                id={`${id}`}\n                checked={isAllOptionsChecked}\n                onChange={handleClick}\n                type=\"checkbox\"\n              />\n            )}\n          </StyledOptionGroupHeader>\n        </StyledOptionGroupOption>\n        <List>\n          {list.map((item: IOptionItemProps, index) => {\n            return typeof renderOptions === \"function\"\n              ? renderOptions(item, index)\n              : item.name;\n          })}\n        </List>\n      </StyledOptionGroup>\n    </StyledOptionGroupLi>\n  );\n};\n\nOptionGroup.displayName = \"OptionGroup\";\n"],"file":"OptionGroup.js"}

package/dist/cjs/components/Select/OptionGroup/Styles.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledOptionGroupOption = exports.StyledOptionGroupHeader = exports.StyledOptionGroup = void 0;
+exports.StyledOptionGroupOption = exports.StyledOptionGroupLi = exports.StyledOptionGroupHeader = exports.StyledOptionGroup = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -17,9 +17,16 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+var StyledOptionGroupLi = _styledComponents.default.li.withConfig({
+  displayName: "Styles__StyledOptionGroupLi",
+  componentId: "sc-16v5afu-0"
+})(["flex-direction:column;"]);
+
+exports.StyledOptionGroupLi = StyledOptionGroupLi;
+
 var StyledOptionGroup = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledOptionGroup",
-  componentId: "sc-16v5afu-0"
+  componentId: "sc-16v5afu-1"
 })(["", " ", " ", ""], {
   "userSelect": "none"
 }, _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle);
@@ -29,7 +36,7 @@ StyledOptionGroup.displayName = "StyledOptionGroup";
 
 var StyledOptionGroupHeader = _styledComponents.default.h3.withConfig({
   displayName: "Styles__StyledOptionGroupHeader",
-  componentId: "sc-16v5afu-1"
+  componentId: "sc-16v5afu-2"
 })(["height:28px;display:flex;justify-content:space-between;align-items:center;padding:0 16px;color:var(--color-theme-900);margin:6px 0;*{margin:auto 0;}"]);
 
 exports.StyledOptionGroupHeader = StyledOptionGroupHeader;
@@ -37,7 +44,7 @@ StyledOptionGroupHeader.displayName = "StyledOptionGroupHeader";
 
 var StyledOptionGroupOption = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledOptionGroupOption",
-  componentId: "sc-16v5afu-2"
+  componentId: "sc-16v5afu-3"
 })(["", ""], function (props) {
   return props.hover && (0, _styledComponents.css)(["background-color:var(--color-theme-200);"]);
 });