@activecollab/components 2.0.279 → 2.0.281

package/dist/index.js

@@ -16406,11 +16406,11 @@
   CheckboxIcon.displayName = "CheckboxIcon";
   var CheckboxIcon$1 = CheckboxIcon;
 
-  var StyledInput$3 = styled__default["default"].input.withConfig({
+  var StyledInput$4 = styled__default["default"].input.withConfig({
     displayName: "Styles__StyledInput",
     componentId: "sc-y7zymm-0"
   })(["border:0px;clip:rect(0px,0px,0px,0px);cursor:pointer;height:1px;margin:-1px;opacity:0;overflow:hidden;padding:0px;position:absolute;white-space:nowrap;width:1px;"]);
-  StyledInput$3.displayName = "StyledInput";
+  StyledInput$4.displayName = "StyledInput";
   var StyledLabel$1 = styled__default["default"].label.withConfig({
     displayName: "Styles__StyledLabel",
     componentId: "sc-y7zymm-1"
@@ -16425,13 +16425,13 @@
     return !props.mixed && styled.css(["stroke:var(--color-theme-500);"]);
   }, function (props) {
     return props.mixed && styled.css(["stroke:transparent;"]);
-  }, StyledInput$3, StyledLabel$1, StyledInput$3, StyledLabel$1, function (props) {
+  }, StyledInput$4, StyledLabel$1, StyledInput$4, StyledLabel$1, function (props) {
     return !props.mixed && styled.css(["rect{stroke:var(--color-secondary);stroke-width:3px;}"]);
-  }, StyledInput$3, StyledLabel$1, function (props) {
+  }, StyledInput$4, StyledLabel$1, function (props) {
     return props.mixed && styled.css(["stroke:transparent;"]);
   }, function (props) {
-    return props.hover && !props.mixed && styled.css(["", ":not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}"], StyledInput$3, StyledLabel$1);
-  }, StyledInput$3, StyledLabel$1, function (props) {
+    return props.hover && !props.mixed && styled.css(["", ":not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}"], StyledInput$4, StyledLabel$1);
+  }, StyledInput$4, StyledLabel$1, function (props) {
     return !props.mixed && styled.css(["stroke:var(--page-paper-main);stroke-dashoffset:24;"]);
   }, function (props) {
     return props.mixed && styled.css(["stroke:transparent;"]);
@@ -16490,7 +16490,7 @@
       tabIndex: -1,
       mixed: indeterminate,
       $disabled: disabled
-    }, /*#__PURE__*/React__default["default"].createElement(StyledInput$3, _extends({
+    }, /*#__PURE__*/React__default["default"].createElement(StyledInput$4, _extends({
       role: "checkbox",
       id: id,
       className: "c-checkbox--input",
@@ -16533,7 +16533,7 @@
     return !props.$disabled && props.$invalid && props.$mode === "outlined" && styled.css(["border-color:var(--red-alert);"]);
   });
   StyledInputWrapper.displayName = "StyledInputWrapper";
-  var StyledInput$2 = styled__default["default"].input.withConfig({
+  var StyledInput$3 = styled__default["default"].input.withConfig({
     displayName: "Styles__StyledInput",
     componentId: "sc-ce8kcp-1"
   })(["", " ", " background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;", " &::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", " ", " ", ""], BoxSizingStyle, InputResetStyle, function (props) {
@@ -16551,7 +16551,7 @@
   }, function (props) {
     return props.$mode === "flat" && props.$invalid && styled.css(["color:var(--red-alert);"]);
   });
-  StyledInput$2.displayName = "StyledInput";
+  StyledInput$3.displayName = "StyledInput";
   var StyledPasswordIndicatorWrapper = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledPasswordIndicatorWrapper",
     componentId: "sc-ce8kcp-2"
@@ -16663,7 +16663,7 @@
       className: classNames__default["default"]("c-input-wrapper", className),
       onClick: handleWrapperClick,
       ref: wrapRef
-    }, startAdornment, /*#__PURE__*/React__default["default"].createElement(StyledInput$2, _extends({
+    }, startAdornment, /*#__PURE__*/React__default["default"].createElement(StyledInput$3, _extends({
       ref: handleRef,
       type: type,
       $size: size,
@@ -19672,6 +19672,9 @@
       setOpen(false);
     });
     var handleOnKeyDown = React.useCallback(function (e) {
+      if (e.key === "Tab" && open) {
+        setOpen(false);
+      }
       if (e.key === "Escape" && open) {
         setOpen(false);
         setValue(selectedName);
@@ -19687,10 +19690,10 @@
       }
     }, [focused, onCancel, onOpen, open, selectedName, type]);
     React.useEffect(function () {
-      var _childNode$current, _childNode$current2;
-      open && (childNode === null || childNode === void 0 || (_childNode$current = childNode.current) === null || _childNode$current === void 0 ? void 0 : _childNode$current.focus());
-      !open && (childNode === null || childNode === void 0 || (_childNode$current2 = childNode.current) === null || _childNode$current2 === void 0 ? void 0 : _childNode$current2.blur());
-    }, [childNode, open]);
+      if (!open && !isFirstRender) {
+        onClose === null || onClose === void 0 || onClose();
+      }
+    }, [open, onClose, isFirstRender]);
     React.useEffect(function () {
       setValue(selectedName);
     }, [selectedName]);
@@ -19757,10 +19760,14 @@
     var handleMouseDown = React.useCallback(function (e) {
       e.preventDefault();
     }, []);
-    var handleBlur = React.useCallback(function () {
+    var handleBlur = React.useCallback(function (e) {
+      var _wrapperRef$current;
+      if (e.relatedTarget && (_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(e.relatedTarget)) {
+        return;
+      }
       setValue(selectedName);
-      setFocused(!focused);
-    }, [focused, selectedName]);
+      setFocused(false);
+    }, [selectedName]);
     var renderChipAdornment = React.useCallback(function (option, index) {
       if (typeof renderChip === "function") {
         return renderChip(option, index);
@@ -19911,11 +19918,15 @@
       $open: open,
       ref: chipWrapper,
       $_css5: autoSize === "auto" && scrollWrapper ? sizeMap[size] * 3 + 8 + "px" : undefined
-    }, startAdornment, /*#__PURE__*/React__default["default"].createElement(StyledInput$2, {
+    }, startAdornment, /*#__PURE__*/React__default["default"].createElement(StyledInput$3, {
       className: "c-combo-box-input",
       onBlur: handleBlur,
-      onFocus: function onFocus() {
-        setFocused(!focused);
+      onFocus: function onFocus(e) {
+        if (e.target.matches(":focus-visible")) {
+          setOpen(true);
+          onOpen === null || onOpen === void 0 || onOpen();
+        }
+        setFocused(true);
       },
       onClick: handleOpen,
       ref: handleRef,
@@ -19936,7 +19947,8 @@
     })), !disabled && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, loading ? /*#__PURE__*/React__default["default"].createElement(SpinnerLoader, null) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, showXIcon && /*#__PURE__*/React__default["default"].createElement(_StyledTrigger, {
       onMouseDown: handleMouseDown,
       onClick: handleDeselect,
-      "data-testid": "deselect-all"
+      "data-testid": "deselect-all",
+      tabIndex: -1
     }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCloseSmallIcon, null)), invalid && errorMessage && /*#__PURE__*/React__default["default"].createElement(Tooltip, {
       title: errorMessage
     }, size === "regular" ? /*#__PURE__*/React__default["default"].createElement(StyledInfoSmallIcon, null) : /*#__PURE__*/React__default["default"].createElement(StyledInfoIcon, null)), showMenu && /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCollapseExpandSingleIcon, {
@@ -19945,9 +19957,12 @@
       className: classNames__default["default"]("c-combo-box-input", inputWrapperClassName),
       onBlur: handleBlur,
       wrapperClick: handleOpen,
-      onFocus: function onFocus() {
-        setFocused(!focused);
-        handleOpen();
+      onFocus: function onFocus(e) {
+        if (e.target.matches(":focus-visible")) {
+          setOpen(true);
+          onOpen === null || onOpen === void 0 || onOpen();
+        }
+        setFocused(true);
       },
       onClick: handleOpen,
       mode: triggerMode,
@@ -19968,7 +19983,8 @@
         onMouseDown: handleMouseDown,
         onClick: handleDeselect,
         variant: "text gray",
-        size: "small"
+        size: "small",
+        tabIndex: -1
       }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCloseSmallIcon, null)) : null, invalid && errorMessage && /*#__PURE__*/React__default["default"].createElement(Tooltip, {
         title: errorMessage
       }, size === "regular" ? /*#__PURE__*/React__default["default"].createElement(StyledInfoSmallIcon, null) : /*#__PURE__*/React__default["default"].createElement(StyledInfoIcon, null)), showMenu && /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCollapseExpandSingleIcon, {
@@ -22689,7 +22705,7 @@
     return invalid && styled.css(["border:1px solid var(--red-alert);"]);
   });
   StyledSpan.displayName = "StyledSpan";
-  var StyledInput$1 = styled__default["default"](Typography).withConfig({
+  var StyledInput$2 = styled__default["default"](Typography).withConfig({
     displayName: "Styles__StyledInput",
     componentId: "sc-1wapx2a-2"
   })(["", " background-color:inherit;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;text-overflow:ellipsis;font-variant-numeric:tabular-nums;&:focus-whitin{text-overflow:clip;}outline-width:0px;outline:none;&:disabled{opacity:0;}", ""], {
@@ -22714,7 +22730,7 @@
     var invalid = _ref4.invalid;
     return invalid && styled.css(["border-color:var(--red-alert) !important;"]);
   });
-  StyledInput$1.displayName = "StyledInput";
+  StyledInput$2.displayName = "StyledInput";
   var StyledMultilineSpan = styled__default["default"](StyledSpan).withConfig({
     displayName: "Styles__StyledMultilineSpan",
     componentId: "sc-1wapx2a-3"
@@ -22774,7 +22790,7 @@
       weight: weight,
       $disabled: disabled,
       className: "presentation"
-    }, children ? children : inputProps === null || inputProps === void 0 ? void 0 : inputProps.value), /*#__PURE__*/React__default["default"].createElement(StyledInput$1, _extends({}, inputProps, {
+    }, children ? children : inputProps === null || inputProps === void 0 ? void 0 : inputProps.value), /*#__PURE__*/React__default["default"].createElement(StyledInput$2, _extends({}, inputProps, {
       ref: handleRef,
       forwardedAs: "input",
       variant: variant,
@@ -23383,6 +23399,29 @@
     displayName: "Styles__StyledStartMenuDot",
     componentId: "sc-lxuoiz-6"
   })(["border-radius:50%;background-color:var(--color-primary);color:var(--page-paper-main);line-height:15px;width:15px;font-weight:bold;font-size:10px;text-align:center;margin-left:4px;"]);
+  var StyledInputSubmenu = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledInputSubmenu",
+    componentId: "sc-lxuoiz-7"
+  })(["", ""], {
+    "paddingLeft": "0.75rem",
+    "paddingRight": "0.75rem",
+    "paddingBottom": "0.5rem",
+    "paddingTop": "0.75rem"
+  });
+  var StyledInputSubmenuFooter = styled__default["default"](MenuFooter).withConfig({
+    displayName: "Styles__StyledInputSubmenuFooter",
+    componentId: "sc-lxuoiz-8"
+  })(["", " height:auto;"], {
+    "justifyContent": "space-between",
+    "paddingTop": "0.75rem"
+  });
+  var StyledInput$1 = styled__default["default"](Input).withConfig({
+    displayName: "Styles__StyledInput",
+    componentId: "sc-lxuoiz-9"
+  })(["", ""], {
+    "marginBottom": "1.25rem",
+    "width": "100%"
+  });
   StyledMenu.displayName = "StyledMenu";
   StyledMenuFooter.displayName = "StyledMenuFooter";
   StyledStartMenuList.displayName = "StyledStartMenuList";
@@ -23390,6 +23429,52 @@
   StyledStartMenuTitle.displayName = "StyledStartMenuTitle";
   StyledStartMenuDot.displayName = "StyledStartMenuDot";
   StyledStartMenuNoResults.displayName = "StyledStartMenuNoResults";
+  StyledInputSubmenu.displayName = "StyledInputSubmenu";
+  StyledInputSubmenuFooter.displayName = "StyledInputSubmenuFooter";
+  StyledInput$1.displayName = "StyledInput";
+
+  var InputSubmenu = function InputSubmenu(_ref) {
+    var _ref$value = _ref.value,
+      value = _ref$value === void 0 ? "" : _ref$value,
+      placeholder = _ref.placeholder,
+      saveLabel = _ref.saveLabel,
+      _ref$clearLabel = _ref.clearLabel,
+      clearLabel = _ref$clearLabel === void 0 ? "Clear" : _ref$clearLabel,
+      onSave = _ref.onSave,
+      onClear = _ref.onClear;
+    var _useState = React.useState(value),
+      _useState2 = _slicedToArray(_useState, 2),
+      inputValue = _useState2[0],
+      setInputValue = _useState2[1];
+    React.useEffect(function () {
+      setInputValue(value);
+    }, [value]);
+    var handleChange = React.useCallback(function (event) {
+      setInputValue(event.target.value);
+    }, []);
+    var handleSave = React.useCallback(function () {
+      onSave(inputValue);
+    }, [inputValue, onSave]);
+    var handleKeyDown = React.useCallback(function (event) {
+      if (event.key === "Enter") {
+        onSave(inputValue);
+      }
+    }, [inputValue, onSave]);
+    return /*#__PURE__*/React__default["default"].createElement(StyledInputSubmenu, null, /*#__PURE__*/React__default["default"].createElement(StyledInput$1, {
+      value: inputValue,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      placeholder: placeholder
+    }), /*#__PURE__*/React__default["default"].createElement(StyledInputSubmenuFooter, null, /*#__PURE__*/React__default["default"].createElement(Button, {
+      variant: "primary",
+      size: "small",
+      onClick: handleSave
+    }, saveLabel), /*#__PURE__*/React__default["default"].createElement(Button, {
+      variant: "text gray",
+      size: "small",
+      onClick: onClear
+    }, clearLabel)));
+  };
 
   var StartMenu = function StartMenu(_ref) {
     var data = _ref.data,
@@ -23414,7 +23499,8 @@
     }, /*#__PURE__*/React__default["default"].createElement(StyledStartMenuList, null, shouldRenderSubmenus ? data.map(function (_ref2, index) {
       var id = _ref2.id,
         title = _ref2.title,
-        submenu = _ref2.submenu;
+        submenu = _ref2.submenu,
+        type = _ref2.type;
       var count = 0;
       // Popricati o ovome kada je selected[id] vrednost 0.
       if (typeof selected[id] === "string") {
@@ -23423,7 +23509,7 @@
         var _selected$id;
         count = (_selected$id = selected[id]) === null || _selected$id === void 0 ? void 0 : _selected$id.length;
       }
-      if ((submenu === null || submenu === void 0 ? void 0 : submenu.length) > 1) {
+      if (type === "input" || (submenu === null || submenu === void 0 ? void 0 : submenu.length) > 1) {
         return /*#__PURE__*/React__default["default"].createElement(StyledStartMenuListItem, {
           key: "filter-list-item-".concat(index),
           onClick: function onClick() {
@@ -23466,7 +23552,7 @@
     }), children);
   };
 
-  var _excluded$7 = ["id", "title", "submenu", "searchPlaceholder", "disableInternalSort", "isSingleSelect", "defaultValue"];
+  var _excluded$7 = ["id", "title", "submenu", "searchPlaceholder", "disableInternalSort", "isSingleSelect", "defaultValue", "type", "inputPlaceholder", "saveLabel", "clearLabel"];
   var Filter = function Filter(_ref) {
     var data = _ref.data,
       _ref$selected = _ref.selected,
@@ -23563,6 +23649,27 @@
       setFilter(newFilters);
       onChange(newFilters);
     }, [filter, menu, onChange]);
+    var handleInputSave = React.useCallback(function (id, value) {
+      var newFilters = {};
+      if (value.trim()) {
+        newFilters = _objectSpread2(_objectSpread2({}, filter), {}, {
+          [id]: [value]
+        });
+      } else {
+        newFilters = _objectSpread2({}, filter);
+        delete newFilters[id];
+      }
+      setFilter(newFilters);
+      onChange(newFilters);
+      setIndex();
+    }, [filter, onChange, setIndex]);
+    var handleInputClear = React.useCallback(function (id) {
+      var newFilters = _objectSpread2({}, filter);
+      delete newFilters[id];
+      setFilter(newFilters);
+      onChange(newFilters);
+      setIndex();
+    }, [filter, onChange, setIndex]);
     var count = React.useMemo(function () {
       var c = 0;
       Object.values(filter).forEach(function (entry) {
@@ -23579,7 +23686,7 @@
       }
       for (var entry of data) {
         var _entry$submenu;
-        if (((_entry$submenu = entry.submenu) === null || _entry$submenu === void 0 ? void 0 : _entry$submenu.length) > 1) {
+        if (entry.type === "input" || ((_entry$submenu = entry.submenu) === null || _entry$submenu === void 0 ? void 0 : _entry$submenu.length) > 1) {
           return true;
         }
       }
@@ -23625,7 +23732,7 @@
       shouldRenderSubmenus: shouldRenderSubmenus,
       emptyFilterText: emptyFilterText
     }, children))), shouldRenderSubmenus && data.map(function (_ref2, index) {
-      var _filter$id;
+      var _filter$id$, _filter$id, _filter$id2;
       var id = _ref2.id,
         title = _ref2.title,
         submenu = _ref2.submenu,
@@ -23633,6 +23740,12 @@
         disableInternalSort = _ref2.disableInternalSort,
         isSingleSelect = _ref2.isSingleSelect,
         defaultValue = _ref2.defaultValue,
+        _ref2$type = _ref2.type,
+        submenuType = _ref2$type === void 0 ? "select" : _ref2$type,
+        inputPlaceholder = _ref2.inputPlaceholder,
+        _ref2$saveLabel = _ref2.saveLabel,
+        saveLabel = _ref2$saveLabel === void 0 ? "Save" : _ref2$saveLabel,
+        clearLabel = _ref2.clearLabel,
         rest = _objectWithoutProperties(_ref2, _excluded$7);
       return /*#__PURE__*/React__default["default"].createElement(SlideLeftRightTransition, {
         key: "filter-submenu-".concat(index),
@@ -23652,7 +23765,18 @@
         indexPage: menu === "index"
       }, /*#__PURE__*/React__default["default"].createElement(FocusLock.MoveFocusInside, {
         disabled: enteredMenu !== id
-      }, /*#__PURE__*/React__default["default"].createElement(Select, _extends({
+      }, submenuType === "input" ? /*#__PURE__*/React__default["default"].createElement(InputSubmenu, {
+        value: (_filter$id$ = (_filter$id = filter[id]) === null || _filter$id === void 0 ? void 0 : _filter$id[0]) !== null && _filter$id$ !== void 0 ? _filter$id$ : "",
+        placeholder: inputPlaceholder,
+        saveLabel: saveLabel,
+        clearLabel: clearLabel,
+        onSave: function onSave(value) {
+          return handleInputSave(id, value);
+        },
+        onClear: function onClear() {
+          return handleInputClear(id);
+        }
+      }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Select, _extends({
         options: submenu,
         selected: filter[id],
         onChange: handleChange,
@@ -23664,11 +23788,11 @@
         disableSearch: Boolean(submenu.length <= 7),
         disabledInternalSort: disableInternalSort,
         defaultValue: defaultValue
-      }, rest)), (_filter$id = filter[id]) !== null && _filter$id !== void 0 && _filter$id.length ? /*#__PURE__*/React__default["default"].createElement(StyledMenuFooter, null, /*#__PURE__*/React__default["default"].createElement(Button, {
+      }, rest)), (_filter$id2 = filter[id]) !== null && _filter$id2 !== void 0 && _filter$id2.length ? /*#__PURE__*/React__default["default"].createElement(StyledMenuFooter, null, /*#__PURE__*/React__default["default"].createElement(Button, {
         variant: "text colored",
         size: "small",
         onClick: handleReset
-      }, resetLabel)) : null)));
+      }, resetLabel)) : null))));
     }))));
   };