@activecollab/components 2.0.260 → 2.0.262

package/dist/esm/components/EditableText/EditableText.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableText.js","names":["React","forwardRef","useCallback","useEffect","useRef","useState","classNames","styled","css","EditableContent","StyledDiv","StyledSpan","Typography","StyledTextareaSpan","withConfig","displayName","componentId","_ref","invalid","EditableText","_ref2","ref","onSave","onCancel","value","inputProps","allowEmptyString","multiline","variant","weight","disabled","wrapRef","children","props","currentValue","setCurrentValue","prevValue","setPrevValue","escapeRef","intTextareaRef","isTextareaFocused","setIsTextareaFocused","handleBlur","e","current","target","trim","length","scrollLeft","handleFocus","handleKeyDown","key","blur","handleChange","createElement","_extends","forwardedAs","$disabled","className","String","replace","onFocus","onBlur","onKeyDown","onChange","placeholder","rows","type"],"sources":["../../../../src/components/EditableText/EditableText.tsx"],"sourcesContent":["import React, {\n  ChangeEvent,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport classNames from \"classnames\";\nimport styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport {\n  EditableContent,\n  EditableContentInterface,\n} from \"../EditableContent/EditableContent\";\nimport { StyledDiv, StyledSpan } from \"../EditableContent/Styles\";\nimport { Typography } from \"../Typography/Typography\";\n\nconst StyledTextareaSpan = styled(Typography)`\n  ${tw`\n    tw-absolute\n    tw-inset-0\n    tw-border\n    tw-border-transparent\n    tw-border-solid\n    hover:tw-border-theme-700\n    focus-within:tw-border-theme-700\n    tw-rounded-md\n    tw-box-border\n    tw-w-full`}\n\n  background-color: var(--input-background-color, #ffffff);\n  padding-left: 4px;\n  padding-right: 4px;\n  padding-top: 1px;\n  padding-bottom: 1px;\n  font-variant-numeric: tabular-nums;\n  outline-width: 0px;\n  outline: none;\n  resize: none;\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n  height: calc(1.5em * 3 + 2px); /* 3 rows height: line-height * 3 + padding */\n  min-height: calc(1.5em * 3 + 2px);\n  opacity: 0;\n\n  &:focus {\n    opacity: 1;\n    background-color: var(--input-background-color, #f8f9fa);\n  }\n\n  &:disabled {\n    opacity: 0;\n  }\n\n  ${({ invalid }) =>\n    invalid &&\n    css`\n      border-color: var(--red-alert) !important;\n    `}\n`;\n\nexport interface EditableTextInterface extends EditableContentInterface {\n  /** Value to display. */\n  value?: string | null;\n  /** Optional callback called on enter, click outside and tab. */\n  onSave?: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  /** Optional callback called on input reset. */\n  onCancel?: () => void;\n  /** If true, setting empty value will save it, instead of revert to previous value. */\n  allowEmptyString?: boolean;\n  /** If true, shows a textarea instead of input for multiline editing. */\n  multiline?: boolean;\n  /** Children content to display */\n  children?: React.ReactNode;\n}\n\nexport const EditableText = forwardRef<HTMLDivElement, EditableTextInterface>(\n  (\n    {\n      onSave,\n      onCancel,\n      value,\n      inputProps,\n      allowEmptyString,\n      multiline = false,\n      variant = \"Body 2\",\n      weight,\n      disabled = false,\n      invalid,\n      wrapRef,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [currentValue, setCurrentValue] = useState(value);\n    const [prevValue, setPrevValue] = useState(value);\n    const escapeRef = useRef(false);\n    const intTextareaRef = useRef<HTMLTextAreaElement>(null);\n    const [isTextareaFocused, setIsTextareaFocused] = useState(false);\n\n    useEffect(() => {\n      if (currentValue !== value) {\n        setCurrentValue(value);\n        setPrevValue(value);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n    const handleBlur = useCallback(\n      (e) => {\n        setIsTextareaFocused(false);\n        if (escapeRef.current) {\n          setCurrentValue(prevValue);\n          escapeRef.current = false;\n        } else {\n          if (\n            e.target.value.trim().length > 0 &&\n            prevValue !== e.target.value\n          ) {\n            setPrevValue(e.target.value);\n            setCurrentValue(e.target.value);\n            typeof onSave === \"function\" && onSave(e);\n          } else {\n            !allowEmptyString\n              ? setCurrentValue(prevValue)\n              : typeof onSave === \"function\" &&\n                prevValue !== e.target.value &&\n                onSave(e);\n          }\n        }\n        // Reset scroll position for textarea\n        if (multiline && intTextareaRef?.current) {\n          intTextareaRef.current.scrollLeft = 0;\n        }\n      },\n      [allowEmptyString, onSave, prevValue, multiline]\n    );\n\n    const handleFocus = useCallback(() => {\n      setIsTextareaFocused(true);\n    }, []);\n\n    const handleKeyDown = useCallback(\n      (e) => {\n        if (e.key === \"Enter\" && !multiline) {\n          e.target.blur();\n        }\n        if (e.key === \"Escape\") {\n          escapeRef.current = true;\n          e.target.blur();\n          typeof onCancel === \"function\" && onCancel();\n        }\n      },\n      [onCancel, multiline]\n    );\n\n    const handleChange = useCallback((e) => {\n      setCurrentValue(e.target.value);\n    }, []);\n\n    if (multiline) {\n      return (\n        <StyledDiv ref={wrapRef} {...props}>\n          <StyledSpan\n            variant={variant}\n            forwardedAs=\"span\"\n            weight={weight}\n            $disabled={!isTextareaFocused}\n            className=\"presentation\"\n          >\n            {children\n              ? children\n              : String(currentValue || \"\").replace(/\\n/g, \" \")}\n          </StyledSpan>\n          <StyledTextareaSpan\n            ref={intTextareaRef}\n            forwardedAs=\"textarea\"\n            variant={variant}\n            weight={weight}\n            value={currentValue ?? \"\"}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            onKeyDown={handleKeyDown}\n            onChange={handleChange}\n            disabled={disabled}\n            invalid={invalid}\n            data-form-type=\"other\"\n            placeholder={inputProps?.placeholder}\n            className={classNames(\"c-textarea\", inputProps?.className)}\n            rows={3}\n            {...inputProps}\n          />\n        </StyledDiv>\n      );\n    }\n\n    return (\n      <EditableContent\n        {...props}\n        variant={variant}\n        weight={weight}\n        disabled={disabled}\n        invalid={invalid}\n        wrapRef={wrapRef}\n        ref={ref}\n        inputProps={{\n          ...inputProps,\n          value: currentValue ?? \"\",\n          onBlur: handleBlur,\n          onKeyDown: handleKeyDown,\n          onChange: handleChange,\n          type: \"text\",\n          className: classNames(\"c-input\", inputProps?.className),\n        }}\n      >\n        {children}\n      </EditableContent>\n    );\n  }\n);\n\nEditableText.displayName = \"EditableText\";\n"],"mappings":"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"}
+{"version":3,"file":"EditableText.js","names":["React","forwardRef","useCallback","useEffect","useRef","useState","classNames","EditableContent","StyledDiv","StyledMultilineSpan","StyledTextareaSpan","EditableText","_ref","ref","onSave","onCancel","value","inputProps","allowEmptyString","multiline","variant","weight","disabled","invalid","wrapRef","children","props","currentValue","setCurrentValue","prevValue","setPrevValue","escapeRef","intTextareaRef","handleBlur","e","current","target","trim","length","scrollLeft","handleFocus","textarea","setSelectionRange","handleKeyDown","key","blur","handleChange","createElement","_extends","$multiline","forwardedAs","$disabled","className","onClick","focus","String","replace","onFocus","onBlur","onKeyDown","onChange","placeholder","rows","type","displayName"],"sources":["../../../../src/components/EditableText/EditableText.tsx"],"sourcesContent":["import React, {\n  ChangeEvent,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport classNames from \"classnames\";\n\nimport {\n  EditableContent,\n  EditableContentInterface,\n} from \"../EditableContent/EditableContent\";\nimport {\n  StyledDiv,\n  StyledMultilineSpan,\n  StyledTextareaSpan,\n} from \"../EditableContent/Styles\";\n\nexport interface EditableTextInterface extends EditableContentInterface {\n  /** Value to display. */\n  value?: string | null;\n  /** Optional callback called on enter, click outside and tab. */\n  onSave?: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  /** Optional callback called on input reset. */\n  onCancel?: () => void;\n  /** If true, setting empty value will save it, instead of revert to previous value. */\n  allowEmptyString?: boolean;\n  /** If true, shows a textarea instead of input for multiline editing. */\n  multiline?: boolean;\n  /** Children content to display */\n  children?: React.ReactNode;\n}\n\nexport const EditableText = forwardRef<HTMLDivElement, EditableTextInterface>(\n  (\n    {\n      onSave,\n      onCancel,\n      value,\n      inputProps,\n      allowEmptyString,\n      multiline = false,\n      variant = \"Body 2\",\n      weight,\n      disabled = false,\n      invalid,\n      wrapRef,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [currentValue, setCurrentValue] = useState(value);\n    const [prevValue, setPrevValue] = useState(value);\n    const escapeRef = useRef(false);\n    const intTextareaRef = useRef<HTMLTextAreaElement>(null);\n\n    useEffect(() => {\n      if (currentValue !== value) {\n        setCurrentValue(value);\n        setPrevValue(value);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n    const handleBlur = useCallback(\n      (e) => {\n        if (escapeRef.current) {\n          setCurrentValue(prevValue);\n          escapeRef.current = false;\n        } else {\n          if (\n            e.target.value.trim().length > 0 &&\n            prevValue !== e.target.value\n          ) {\n            setPrevValue(e.target.value);\n            setCurrentValue(e.target.value);\n            typeof onSave === \"function\" && onSave(e);\n          } else {\n            !allowEmptyString\n              ? setCurrentValue(prevValue)\n              : typeof onSave === \"function\" &&\n                prevValue !== e.target.value &&\n                onSave(e);\n          }\n        }\n        // Reset scroll position for textarea\n        if (multiline && intTextareaRef?.current) {\n          intTextareaRef.current.scrollLeft = 0;\n        }\n      },\n      [allowEmptyString, onSave, prevValue, multiline]\n    );\n\n    const handleFocus = useCallback(\n      (e) => {\n        if (multiline) {\n          const textarea = e.target;\n          const length = textarea.value.length;\n          textarea.setSelectionRange(length, length);\n        }\n      },\n      [multiline]\n    );\n\n    const handleKeyDown = useCallback(\n      (e) => {\n        if (e.key === \"Enter\" && !multiline) {\n          e.target.blur();\n        }\n        if (e.key === \"Escape\") {\n          escapeRef.current = true;\n          e.target.blur();\n          typeof onCancel === \"function\" && onCancel();\n        }\n      },\n      [onCancel, multiline]\n    );\n\n    const handleChange = useCallback((e) => {\n      setCurrentValue(e.target.value);\n    }, []);\n\n    if (multiline) {\n      return (\n        <StyledDiv ref={ref || wrapRef} {...props} $multiline={multiline}>\n          <StyledMultilineSpan\n            variant={variant}\n            forwardedAs=\"span\"\n            weight={weight}\n            $disabled={disabled}\n            invalid={invalid}\n            className=\"presentation\"\n            onClick={() => {\n              if (!disabled && intTextareaRef.current) {\n                intTextareaRef.current.focus();\n              }\n            }}\n          >\n            {children\n              ? children\n              : String(currentValue || \"\").replace(/\\n/g, \" \")}\n          </StyledMultilineSpan>\n          <StyledTextareaSpan\n            ref={intTextareaRef}\n            forwardedAs=\"textarea\"\n            variant={variant}\n            weight={weight}\n            value={currentValue ?? \"\"}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            onKeyDown={handleKeyDown}\n            onChange={handleChange}\n            disabled={disabled}\n            invalid={invalid}\n            data-form-type=\"other\"\n            placeholder={inputProps?.placeholder}\n            className={classNames(\"c-textarea\", inputProps?.className)}\n            rows={3}\n            {...inputProps}\n          />\n        </StyledDiv>\n      );\n    }\n\n    return (\n      <EditableContent\n        {...props}\n        variant={variant}\n        weight={weight}\n        disabled={disabled}\n        invalid={invalid}\n        wrapRef={wrapRef}\n        ref={ref}\n        inputProps={{\n          ...inputProps,\n          value: currentValue ?? \"\",\n          onBlur: handleBlur,\n          onKeyDown: handleKeyDown,\n          onChange: handleChange,\n          type: \"text\",\n          className: classNames(\"c-input\", inputProps?.className),\n        }}\n      >\n        {children}\n      </EditableContent>\n    );\n  }\n);\n\nEditableText.displayName = \"EditableText\";\n"],"mappings":"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"}

package/dist/index.js

@@ -22499,19 +22499,22 @@
   var StyledDiv = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledDiv",
     componentId: "sc-1wapx2a-0"
-  })(["", " ", " ", ""], FontStyle, BoxSizingStyle, {
+  })(["", " ", " ", " ", ""], FontStyle, BoxSizingStyle, {
     "position": "relative",
     "display": "inline-block",
     "maxWidth": "100%"
+  }, function (_ref) {
+    var $multiline = _ref.$multiline;
+    return $multiline && styled.css(["position:relative;display:flex;"]);
   });
   var StyledSpan = styled__default["default"](Typography).withConfig({
     displayName: "Styles__StyledSpan",
     componentId: "sc-1wapx2a-1"
-  })(["visibility:hidden;display:block;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;position:relative;border:1px solid transparent;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:pre;font-variant-numeric:tabular-nums;", " ", " &:empty:before{content:\" \";}"], function (_ref) {
-    var $disabled = _ref.$disabled;
-    return $disabled && styled.css(["visibility:visible;"]);
-  }, function (_ref2) {
-    var invalid = _ref2.invalid;
+  })(["visibility:hidden;display:block;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;position:relative;border:1px solid transparent;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:pre;font-variant-numeric:tabular-nums;", " ", " &:empty:before{content:\" \";}"], function (_ref2) {
+    var $disabled = _ref2.$disabled;
+    return $disabled && styled.css(["visibility:visible;cursor:default !important;"]);
+  }, function (_ref3) {
+    var invalid = _ref3.invalid;
     return invalid && styled.css(["border:1px solid var(--red-alert);"]);
   });
   StyledSpan.displayName = "StyledSpan";
@@ -22536,11 +22539,39 @@
     ":hover": {
       "borderColor": "var(--color-theme-700)"
     }
-  }, function (_ref3) {
-    var invalid = _ref3.invalid;
+  }, function (_ref4) {
+    var invalid = _ref4.invalid;
     return invalid && styled.css(["border-color:var(--red-alert) !important;"]);
   });
   StyledInput$1.displayName = "StyledInput";
+  var StyledMultilineSpan = styled__default["default"](StyledSpan).withConfig({
+    displayName: "Styles__StyledMultilineSpan",
+    componentId: "sc-1wapx2a-3"
+  })(["cursor:", ";z-index:2;width:100%;visibility:visible !important;&:hover{border-color:", ";}"], function (_ref5) {
+    var $disabled = _ref5.$disabled;
+    return $disabled ? "default" : "text !important";
+  }, function (_ref6) {
+    var invalid = _ref6.invalid,
+      $disabled = _ref6.$disabled;
+    return invalid ? "var(--red-alert)" : $disabled ? "transparent" : "var(--border-primary)";
+  });
+  StyledMultilineSpan.displayName = "StyledMultilineSpan";
+  var StyledTextareaSpan = styled__default["default"](Typography).withConfig({
+    displayName: "Styles__StyledTextareaSpan",
+    componentId: "sc-1wapx2a-4"
+  })(["", " background-color:var(--input-background-color);border-color:var(--color-theme-500);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;pointer-events:none;z-index:1;&:focus{opacity:1;pointer-events:auto;background-color:var(--input-background-color);border-color:var(--color-primary);outline:none;z-index:3;}&:disabled{opacity:0;pointer-events:none;}", ""], {
+    "position": "absolute",
+    "inset": "0px",
+    "boxSizing": "border-box",
+    "width": "100%",
+    "borderRadius": "0.375rem",
+    "borderWidth": "1px",
+    "borderStyle": "solid"
+  }, function (_ref7) {
+    var invalid = _ref7.invalid;
+    return invalid && styled.css(["border-color:var(--red-alert) !important;"]);
+  });
+  StyledTextareaSpan.displayName = "StyledTextareaSpan";
 
   var _excluded$g = ["className", "variant", "weight", "disabled", "inputProps", "wrapRef", "children", "invalid"];
   var EditableContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -22587,45 +22618,23 @@
   EditableContent.displayName = "EditableContent";
 
   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 EditableText = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var onSave = _ref.onSave,
+      onCancel = _ref.onCancel,
+      value = _ref.value,
+      inputProps = _ref.inputProps,
+      allowEmptyString = _ref.allowEmptyString,
+      _ref$multiline = _ref.multiline,
+      multiline = _ref$multiline === void 0 ? false : _ref$multiline,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? "Body 2" : _ref$variant,
+      weight = _ref.weight,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      invalid = _ref.invalid,
+      wrapRef = _ref.wrapRef,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded$f);
     var _useState = React.useState(value),
       _useState2 = _slicedToArray(_useState, 2),
       currentValue = _useState2[0],
@@ -22636,10 +22645,6 @@
       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);
@@ -22648,7 +22653,6 @@
       // 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;
@@ -22666,9 +22670,13 @@
         intTextareaRef.current.scrollLeft = 0;
       }
     }, [allowEmptyString, onSave, prevValue, multiline]);
-    var handleFocus = React.useCallback(function () {
-      setIsTextareaFocused(true);
-    }, []);
+    var handleFocus = React.useCallback(function (e) {
+      if (multiline) {
+        var textarea = e.target;
+        var length = textarea.value.length;
+        textarea.setSelectionRange(length, length);
+      }
+    }, [multiline]);
     var handleKeyDown = React.useCallback(function (e) {
       if (e.key === "Enter" && !multiline) {
         e.target.blur();
@@ -22684,13 +22692,21 @@
     }, []);
     if (multiline) {
       return /*#__PURE__*/React__default["default"].createElement(StyledDiv, _extends({
-        ref: wrapRef
-      }, props), /*#__PURE__*/React__default["default"].createElement(StyledSpan, {
+        ref: ref || wrapRef
+      }, props, {
+        $multiline: multiline
+      }), /*#__PURE__*/React__default["default"].createElement(StyledMultilineSpan, {
         variant: variant,
         forwardedAs: "span",
         weight: weight,
-        $disabled: !isTextareaFocused,
-        className: "presentation"
+        $disabled: disabled,
+        invalid: invalid,
+        className: "presentation",
+        onClick: function onClick() {
+          if (!disabled && intTextareaRef.current) {
+            intTextareaRef.current.focus();
+          }
+        }
       }, children ? children : String(currentValue || "").replace(/\n/g, " ")), /*#__PURE__*/React__default["default"].createElement(StyledTextareaSpan, _extends({
         ref: intTextareaRef,
         forwardedAs: "textarea",