@activecollab/components 1.0.415 → 1.0.418

package/dist/index.js

@@ -5206,6 +5206,44 @@
   MinusIcon.displayName = "MinusIcon";
   var MinusIcon$1 = MinusIcon;
 
+  /**
+   * @component MobileMenuIcon
+   * @description
+   *
+   * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
+   * The Icon component is
+   * customizable, allowing for variations in size, color, and style to fit the needs of the application.
+   *
+   *
+   * @example
+   * return (
+   *   <MobileMenuIcon className="mr-2" />
+   * )
+   *
+   * @see
+   * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
+   * @see
+   * https://design.activecollab.com/docs/foundations/icons
+   */
+  var MobileMenuIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
+    return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
+      width: 24,
+      height: 24,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      "data-testid": "MobileMenuIcon",
+      fill: "var(--color-theme-600)",
+      focusable: false,
+      ref: svgRef
+    }, props), /*#__PURE__*/React__default["default"].createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M20 17a1 1 0 110 2H4a1 1 0 110-2h16zm0-6a1 1 0 110 2H4a1 1 0 110-2h16zm0-6a1 1 0 110 2H4a1 1 0 010-2h16z"
+    }));
+  });
+  MobileMenuIcon.displayName = "MobileMenuIcon";
+  var MobileMenuIcon$1 = MobileMenuIcon;
+
   /**
    * @component MoveTriggerIcon
    * @description
@@ -8995,7 +9033,7 @@
   var StyledButton$1 = styled__default["default"].button.withConfig({
     displayName: "Styles__StyledButton",
     componentId: "sc-1v8h7mt-0"
-  })(["", " ", " ", " color:var(--color-theme-700);margin:0;padding:0;background:none;width:100%;height:auto;border:none;height:30px;line-height:1;transition:all 0.3s ease;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}"], FontStyle, BoxSizingStyle, {
+  })(["", " ", " ", " color:var(--color-theme-700);margin:0;padding:0;padding-top:0;background:none;width:100%;height:auto;border:none;height:30px;line-height:1;transition:all 0.3s ease;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}"], FontStyle, BoxSizingStyle, {
     "position": "relative",
     "margin": "0px",
     "display": "inline-block",
@@ -15323,8 +15361,11 @@
   var StyledComboBoxList = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledComboBoxList",
     componentId: "sc-5qvkpb-3"
-  })(["min-width:260px;background-color:var(--page-paper-main);border-radius:8px;border:1px solid var(--border-primary);box-shadow:var(--shadow-tertiary);margin:8px 0;width:", ";"], function (props) {
+  })(["min-width:260px;background-color:var(--page-paper-main);border-radius:8px;border:1px solid var(--border-primary);box-shadow:var(--shadow-tertiary);margin:8px 0;width:", ";", ""], function (props) {
     return "".concat(props.$width, "px");
+  }, function (_ref) {
+    var $hide = _ref.$hide;
+    return $hide === true && styled.css(["display:none;"]);
   });
   StyledComboBoxList.displayName = "StyledComboBoxList";
   var StyledChipWrapper = styled__default["default"].div.withConfig({
@@ -15336,18 +15377,18 @@
     "gap": "0.25rem"
   }, {
     "flex": "1 1 0%"
-  }, function (_ref) {
-    var $open = _ref.$open;
-    return $open ? "auto" : "hidden";
   }, function (_ref2) {
-    var $autoSize = _ref2.$autoSize;
+    var $open = _ref2.$open;
+    return $open ? "auto" : "hidden";
+  }, function (_ref3) {
+    var $autoSize = _ref3.$autoSize;
     return $autoSize === "auto" && styled.css(["", ";", ";"], {
       "flexWrap": "wrap"
     }, {
       "width": "100%"
     });
-  }, function (_ref3) {
-    var $autoSize = _ref3.$autoSize;
+  }, function (_ref4) {
+    var $autoSize = _ref4.$autoSize;
     return $autoSize !== "auto" && styled.css(["align-items:center;"]);
   });
   StyledChipWrapper.displayName = "StyledChipWrapper";
@@ -15482,7 +15523,7 @@
     return isFirst.current;
   };
 
-  var _excluded$j = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName", "scrollWrapper", "onClose", "onClear", "onDeselect"];
+  var _excluded$j = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName", "scrollWrapper", "onClose", "onClear", "onDeselect", "defaultValue"];
   var ComboBox = function ComboBox(_ref) {
     var _comboBoxRef$current2, _comboBoxRef$current3;
     var _ref$options = _ref.options,
@@ -15516,6 +15557,7 @@
       onClose = _ref.onClose,
       onClear = _ref.onClear,
       onDeselect = _ref.onDeselect,
+      defaultValue = _ref.defaultValue,
       prop = _objectWithoutProperties(_ref, _excluded$j);
     var selectedName = React.useMemo(function () {
       var value = "";
@@ -15772,6 +15814,9 @@
     }, [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;
+    var showMenu = React.useMemo(function () {
+      return Boolean(options.length || defaultValue || Number(value.length) > 0);
+    }, [defaultValue, options.length, value]);
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "c-combo-box"
     }, type === "multiple" ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(_StyledStyledInputWrapper, {
@@ -15816,7 +15861,7 @@
       onMouseDown: handleMouseDown,
       onClick: handleDeselect,
       "data-testid": "deselect-all"
-    }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCloseSmallIcon, null)), /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCollapseExpandSingleIcon, {
+    }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCloseSmallIcon, null)), showMenu && /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCollapseExpandSingleIcon, {
       $open: open
     }))))) : /*#__PURE__*/React__default["default"].createElement(StyledComboBoxInput, {
       className: classNames__default["default"]("c-combo-box-input", inputWrapperClassName),
@@ -15824,6 +15869,7 @@
       wrapperClick: onOpen,
       onFocus: function onFocus() {
         setFocused(!focused);
+        onOpen();
       },
       onClick: onOpen,
       wrapRef: comboBoxRef,
@@ -15844,7 +15890,7 @@
         onClick: handleDeselect,
         variant: "text gray",
         size: "small"
-      }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCloseSmallIcon, null)) : null, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCollapseExpandSingleIcon, {
+      }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCloseSmallIcon, null)) : null, showMenu && /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCollapseExpandSingleIcon, {
         $open: open
       })) : null
     }), !disabled ? /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
@@ -15866,7 +15912,8 @@
       noIsolation: true,
       allowPinchZoom: true
     }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxList, {
-      $width: (_comboBoxRef$current3 = comboBoxRef.current) === null || _comboBoxRef$current3 === void 0 ? void 0 : _comboBoxRef$current3.clientWidth
+      $width: (_comboBoxRef$current3 = comboBoxRef.current) === null || _comboBoxRef$current3 === void 0 ? void 0 : _comboBoxRef$current3.clientWidth,
+      $hide: !showMenu
     }, /*#__PURE__*/React__default["default"].createElement(Autocomplete, _extends({}, prop, {
       inputEl: childNode,
       selected: selected,
@@ -15874,7 +15921,8 @@
       renderOption: handleRenderOption,
       options: options,
       type: type,
-      handleEmptyAction: emptyAction
+      handleEmptyAction: emptyAction,
+      defaultValue: defaultValue
     })))))) : null);
   };
   ComboBox.displayName = "ComboBox";
@@ -18388,6 +18436,7 @@
   exports.MessageSmallIcon = MessageSmallIcon$1;
   exports.MessageSolidIcon = MessageSolidIcon$1;
   exports.MinusIcon = MinusIcon$1;
+  exports.MobileMenuIcon = MobileMenuIcon$1;
   exports.Modal = Modal;
   exports.MoveIcon = MoveIcon$1;
   exports.MoveTriggerIcon = MoveTriggerIcon$1;