@activecollab/components 2.0.244 → 2.0.246

package/dist/index.js

@@ -19243,7 +19243,7 @@
   });
   Chip.displayName = "Chip";
 
-  var _excluded$C = ["options", "selected", "loading", "loadingText", "onChange", "onInputChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName", "scrollWrapper", "onClose", "onClear", "onDeselect", "defaultValue", "open", "onOpen", "triggerMode", "noResultText", "emptyValue", "disableVirtualization", "hideClearButton", "errorMessage"];
+  var _excluded$C = ["options", "selected", "loading", "loadingText", "onChange", "onInputChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName", "scrollWrapper", "onClose", "onClear", "onDeselect", "defaultValue", "open", "onOpen", "triggerMode", "noResultText", "emptyValue", "disableVirtualization", "hideClearButton", "errorMessage", "onCancel"];
   var sizeMap = {
     small: 18,
     regular: 24,
@@ -19295,6 +19295,7 @@
       _ref$hideClearButton = _ref.hideClearButton,
       hideClearButton = _ref$hideClearButton === void 0 ? false : _ref$hideClearButton,
       errorMessage = _ref.errorMessage,
+      onCancel = _ref.onCancel,
       prop = _objectWithoutProperties(_ref, _excluded$C);
     var selectedName = React.useMemo(function () {
       var value = "";
@@ -19346,12 +19347,14 @@
       if (e.target && (_comboBoxRef$current = comboBoxRef.current) !== null && _comboBoxRef$current !== void 0 && _comboBoxRef$current.contains(e.target)) {
         return;
       }
+      onCancel === null || onCancel === void 0 || onCancel(selectedName);
       setOpen(false);
     });
     var handleOnKeyDown = React.useCallback(function (e) {
       if (e.key === "Escape" && open) {
         setOpen(false);
         setValue(selectedName);
+        onCancel === null || onCancel === void 0 || onCancel(selectedName);
         e.stopPropagation();
       }
       if (e.key === "Enter" && type === "multiple") {
@@ -19361,7 +19364,7 @@
         setOpen(true);
         onOpen === null || onOpen === void 0 || onOpen();
       }
-    }, [focused, onOpen, open, selectedName, type]);
+    }, [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());
@@ -20416,7 +20419,7 @@
   var StyledHeader = styled__default["default"](Paper).withConfig({
     displayName: "Styles__StyledHeader",
     componentId: "sc-xrlqib-0"
-  })(["", " ", " padding:0 1rem;display:flex;overflow:hidden;min-width:350px;@media screen and (max-width:350px){overflow:auto;}"], function (props) {
+  })(["", " ", " padding:0 1rem;display:flex;overflow:hidden;@media screen and (max-width:350px){overflow:auto;}"], function (props) {
     return props.size === "big" && styled.css(["height:140px;"]);
   }, function (props) {
     return props.size === "small" && styled.css(["height:4rem;"]);
@@ -22335,14 +22338,46 @@
   });
   EditableContent.displayName = "EditableContent";
 
-  var _excluded$f = ["onSave", "onCancel", "value", "inputProps", "allowEmptyString"];
-  var EditableText = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-    var onSave = _ref.onSave,
-      onCancel = _ref.onCancel,
-      value = _ref.value,
-      inputProps = _ref.inputProps,
-      allowEmptyString = _ref.allowEmptyString,
-      props = _objectWithoutProperties(_ref, _excluded$f);
+  var _excluded$f = ["onSave", "onCancel", "value", "inputProps", "allowEmptyString", "multiline", "variant", "weight", "disabled", "invalid", "wrapRef", "children"];
+  var StyledTextareaSpan = styled__default["default"](Typography).withConfig({
+    displayName: "EditableText__StyledTextareaSpan",
+    componentId: "sc-j2ewzm-0"
+  })(["", " background-color:var(--input-background-color,#ffffff);padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;font-variant-numeric:tabular-nums;outline-width:0px;outline:none;resize:none;white-space:pre-wrap;overflow-wrap:break-word;height:calc(1.5em * 3 + 2px);min-height:calc(1.5em * 3 + 2px);opacity:0;&:focus{opacity:1;background-color:var(--input-background-color,#f8f9fa);}&:disabled{opacity:0;}", ""], {
+    "position": "absolute",
+    "inset": "0px",
+    "boxSizing": "border-box",
+    "width": "100%",
+    "borderRadius": "0.375rem",
+    "borderWidth": "1px",
+    "borderStyle": "solid",
+    "borderColor": "transparent",
+    ":focus-within": {
+      "borderColor": "var(--color-theme-700)"
+    },
+    ":hover": {
+      "borderColor": "var(--color-theme-700)"
+    }
+  }, function (_ref) {
+    var invalid = _ref.invalid;
+    return invalid && styled.css(["border-color:var(--red-alert) !important;"]);
+  });
+  var EditableText = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+    var onSave = _ref2.onSave,
+      onCancel = _ref2.onCancel,
+      value = _ref2.value,
+      inputProps = _ref2.inputProps,
+      allowEmptyString = _ref2.allowEmptyString,
+      _ref2$multiline = _ref2.multiline,
+      multiline = _ref2$multiline === void 0 ? false : _ref2$multiline,
+      _ref2$variant = _ref2.variant,
+      variant = _ref2$variant === void 0 ? "Body 2" : _ref2$variant,
+      weight = _ref2.weight,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      invalid = _ref2.invalid,
+      wrapRef = _ref2.wrapRef,
+      children = _ref2.children,
+      props = _objectWithoutProperties(_ref2, _excluded$f);
     var _useState = React.useState(value),
       _useState2 = _slicedToArray(_useState, 2),
       currentValue = _useState2[0],
@@ -22352,6 +22387,11 @@
       prevValue = _useState4[0],
       setPrevValue = _useState4[1];
     var escapeRef = React.useRef(false);
+    var intTextareaRef = React.useRef(null);
+    var _useState5 = React.useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isTextareaFocused = _useState6[0],
+      setIsTextareaFocused = _useState6[1];
     React.useEffect(function () {
       if (currentValue !== value) {
         setCurrentValue(value);
@@ -22360,6 +22400,7 @@
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
     var handleBlur = React.useCallback(function (e) {
+      setIsTextareaFocused(false);
       if (escapeRef.current) {
         setCurrentValue(prevValue);
         escapeRef.current = false;
@@ -22372,9 +22413,16 @@
           !allowEmptyString ? setCurrentValue(prevValue) : typeof onSave === "function" && prevValue !== e.target.value && onSave(e);
         }
       }
-    }, [allowEmptyString, onSave, prevValue]);
+      // Reset scroll position for textarea
+      if (multiline && intTextareaRef !== null && intTextareaRef !== void 0 && intTextareaRef.current) {
+        intTextareaRef.current.scrollLeft = 0;
+      }
+    }, [allowEmptyString, onSave, prevValue, multiline]);
+    var handleFocus = React.useCallback(function () {
+      setIsTextareaFocused(true);
+    }, []);
     var handleKeyDown = React.useCallback(function (e) {
-      if (e.key === "Enter") {
+      if (e.key === "Enter" && !multiline) {
         e.target.blur();
       }
       if (e.key === "Escape") {
@@ -22382,11 +22430,43 @@
         e.target.blur();
         typeof onCancel === "function" && onCancel();
       }
-    }, [onCancel]);
+    }, [onCancel, multiline]);
     var handleChange = React.useCallback(function (e) {
       setCurrentValue(e.target.value);
     }, []);
+    if (multiline) {
+      return /*#__PURE__*/React__default["default"].createElement(StyledDiv, _extends({
+        ref: wrapRef
+      }, props), /*#__PURE__*/React__default["default"].createElement(StyledSpan, {
+        variant: variant,
+        forwardedAs: "span",
+        weight: weight,
+        $disabled: !isTextareaFocused,
+        className: "presentation"
+      }, children ? children : String(currentValue || "").replace(/\n/g, " ")), /*#__PURE__*/React__default["default"].createElement(StyledTextareaSpan, _extends({
+        ref: intTextareaRef,
+        forwardedAs: "textarea",
+        variant: variant,
+        weight: weight,
+        value: currentValue !== null && currentValue !== void 0 ? currentValue : "",
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        onChange: handleChange,
+        disabled: disabled,
+        invalid: invalid,
+        "data-form-type": "other",
+        placeholder: inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder,
+        className: classNames__default["default"]("c-textarea", inputProps === null || inputProps === void 0 ? void 0 : inputProps.className),
+        rows: 3
+      }, inputProps)));
+    }
     return /*#__PURE__*/React__default["default"].createElement(EditableContent, _extends({}, props, {
+      variant: variant,
+      weight: weight,
+      disabled: disabled,
+      invalid: invalid,
+      wrapRef: wrapRef,
       ref: ref,
       inputProps: _objectSpread2(_objectSpread2({}, inputProps), {}, {
         value: currentValue !== null && currentValue !== void 0 ? currentValue : "",
@@ -22396,7 +22476,7 @@
         type: "text",
         className: classNames__default["default"]("c-input", inputProps === null || inputProps === void 0 ? void 0 : inputProps.className)
       })
-    }));
+    }), children);
   });
   EditableText.displayName = "EditableText";