@activecollab/components 1.0.185 → 1.0.186

package/dist/cjs/components/EditableContent/EditableContent.js

@@ -50,9 +50,16 @@ var EditableContent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       innerValue = _useState2[0],
       setInnerValue = _useState2[1];
 
+  var intInputRef = (0, _react.useRef)(null);
   var handleChange = (0, _react.useCallback)(function (evt) {
     setInnerValue(evt.target.value);
   }, []);
+  var handleBlur = (0, _react.useCallback)(function (evt) {
+    var _intInputRef$current;
+
+    intInputRef === null || intInputRef === void 0 ? void 0 : (_intInputRef$current = intInputRef.current) === null || _intInputRef$current === void 0 ? void 0 : _intInputRef$current.setSelectionRange(0, 0);
+    typeof (inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === "function" && (inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur(evt));
+  }, [inputProps]);
   return /*#__PURE__*/_react.default.createElement(_Styles.StyledDiv, _extends({
     className: className,
     ref: ref
@@ -61,11 +68,13 @@ var EditableContent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     forwardedAs: "span",
     weight: weight
   }, innerValue), /*#__PURE__*/_react.default.createElement(_Styles.StyledInput, _extends({}, inputProps, {
+    ref: intInputRef,
     forwardedAs: "input",
     variant: variant,
     weight: weight,
     onChange: handleChange,
-    value: innerValue
+    value: innerValue,
+    onBlur: handleBlur
   })));
 });
 exports.EditableContent = EditableContent;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"names":["EditableContent","ref","className","variant","weight","inputProps","props","value","innerValue","setInnerValue","handleChange","evt","target","displayName"],"mappings":";;;;;;;;;AAAA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,IAAMA,eAAe,gBAAG,uBAI7B,gBAAkEC,GAAlE,EAA0E;AAAA,MAAvEC,SAAuE,QAAvEA,SAAuE;AAAA,0BAA5DC,OAA4D;AAAA,MAA5DA,OAA4D,6BAAlD,QAAkD;AAAA,MAAxCC,MAAwC,QAAxCA,MAAwC;AAAA,MAAhCC,UAAgC,QAAhCA,UAAgC;AAAA,MAAjBC,KAAiB;;AAC1E,kBAAoC,qBAAS;AAAA,WAAMD,UAAN,aAAMA,UAAN,uBAAMA,UAAU,CAAEE,KAAlB;AAAA,GAAT,CAApC;AAAA;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AAEA,MAAMC,YAAY,GAAG,wBAAY,UAACC,GAAD,EAAS;AACxCF,IAAAA,aAAa,CAACE,GAAG,CAACC,MAAJ,CAAWL,KAAZ,CAAb;AACD,GAFoB,EAElB,EAFkB,CAArB;AAIA,sBACE,6BAAC,iBAAD;AAAW,IAAA,SAAS,EAAEL,SAAtB;AAAiC,IAAA,GAAG,EAAED;AAAtC,KAA+CK,KAA/C,gBACE,6BAAC,kBAAD;AAAY,IAAA,OAAO,EAAEH,OAArB;AAA8B,IAAA,WAAW,EAAC,MAA1C;AAAiD,IAAA,MAAM,EAAEC;AAAzD,KACGI,UADH,CADF,eAIE,6BAAC,mBAAD,eACMH,UADN;AAEE,IAAA,WAAW,EAAC,OAFd;AAGE,IAAA,OAAO,EAAEF,OAHX;AAIE,IAAA,MAAM,EAAEC,MAJV;AAKE,IAAA,QAAQ,EAAEM,YALZ;AAME,IAAA,KAAK,EAAEF;AANT,KAJF,CADF;AAeD,CA1B8B,CAAxB;;AA4BPR,eAAe,CAACa,WAAhB,GAA8B,iBAA9B","sourcesContent":["import React, { forwardRef, useCallback, useState } from \"react\";\nimport { Variant } from \"../Typography/Typography\";\nimport { StyledDiv, StyledInput, StyledSpan } from \"./Styles\";\n\nexport interface EditableContentInterface {\n  /** Typography variant. */\n  variant?: Variant;\n  /** Typography weight. */\n  weight?: \"light\" | \"regular\" | \"bold\" | \"medium\";\n  /** Input props. */\n  inputProps?: Partial<React.ComponentPropsWithoutRef<\"input\">>;\n}\n\nexport const EditableContent = forwardRef<\n  HTMLDivElement,\n  EditableContentInterface &\n    Omit<React.ComponentPropsWithoutRef<\"div\">, keyof EditableContentInterface>\n>(({ className, variant = \"Body 2\", weight, inputProps, ...props }, ref) => {\n  const [innerValue, setInnerValue] = useState(() => inputProps?.value);\n\n  const handleChange = useCallback((evt) => {\n    setInnerValue(evt.target.value);\n  }, []);\n\n  return (\n    <StyledDiv className={className} ref={ref} {...props}>\n      <StyledSpan variant={variant} forwardedAs=\"span\" weight={weight}>\n        {innerValue}\n      </StyledSpan>\n      <StyledInput\n        {...inputProps}\n        forwardedAs=\"input\"\n        variant={variant}\n        weight={weight}\n        onChange={handleChange}\n        value={innerValue}\n      />\n    </StyledDiv>\n  );\n});\n\nEditableContent.displayName = \"EditableContent\";\n"],"file":"EditableContent.js"}
+{"version":3,"sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"names":["EditableContent","ref","className","variant","weight","inputProps","props","value","innerValue","setInnerValue","intInputRef","handleChange","evt","target","handleBlur","current","setSelectionRange","onBlur","displayName"],"mappings":";;;;;;;;;AAAA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,IAAMA,eAAe,gBAAG,uBAI7B,gBAAkEC,GAAlE,EAA0E;AAAA,MAAvEC,SAAuE,QAAvEA,SAAuE;AAAA,0BAA5DC,OAA4D;AAAA,MAA5DA,OAA4D,6BAAlD,QAAkD;AAAA,MAAxCC,MAAwC,QAAxCA,MAAwC;AAAA,MAAhCC,UAAgC,QAAhCA,UAAgC;AAAA,MAAjBC,KAAiB;;AAC1E,kBAAoC,qBAAS;AAAA,WAAMD,UAAN,aAAMA,UAAN,uBAAMA,UAAU,CAAEE,KAAlB;AAAA,GAAT,CAApC;AAAA;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AACA,MAAMC,WAAW,GAAG,mBAAyB,IAAzB,CAApB;AAEA,MAAMC,YAAY,GAAG,wBAAY,UAACC,GAAD,EAAS;AACxCH,IAAAA,aAAa,CAACG,GAAG,CAACC,MAAJ,CAAWN,KAAZ,CAAb;AACD,GAFoB,EAElB,EAFkB,CAArB;AAIA,MAAMO,UAAU,GAAG,wBACjB,UAACF,GAAD,EAAS;AAAA;;AACPF,IAAAA,WAAW,SAAX,IAAAA,WAAW,WAAX,oCAAAA,WAAW,CAAEK,OAAb,8EAAsBC,iBAAtB,CAAwC,CAAxC,EAA2C,CAA3C;AACA,YAAOX,UAAP,aAAOA,UAAP,uBAAOA,UAAU,CAAEY,MAAnB,qBAA4CZ,UAA5C,aAA4CA,UAA5C,uBAA4CA,UAAU,CAAEY,MAAZ,CAAmBL,GAAnB,CAA5C;AACD,GAJgB,EAKjB,CAACP,UAAD,CALiB,CAAnB;AAQA,sBACE,6BAAC,iBAAD;AAAW,IAAA,SAAS,EAAEH,SAAtB;AAAiC,IAAA,GAAG,EAAED;AAAtC,KAA+CK,KAA/C,gBACE,6BAAC,kBAAD;AAAY,IAAA,OAAO,EAAEH,OAArB;AAA8B,IAAA,WAAW,EAAC,MAA1C;AAAiD,IAAA,MAAM,EAAEC;AAAzD,KACGI,UADH,CADF,eAIE,6BAAC,mBAAD,eACMH,UADN;AAEE,IAAA,GAAG,EAAEK,WAFP;AAGE,IAAA,WAAW,EAAC,OAHd;AAIE,IAAA,OAAO,EAAEP,OAJX;AAKE,IAAA,MAAM,EAAEC,MALV;AAME,IAAA,QAAQ,EAAEO,YANZ;AAOE,IAAA,KAAK,EAAEH,UAPT;AAQE,IAAA,MAAM,EAAEM;AARV,KAJF,CADF;AAiBD,CArC8B,CAAxB;;AAuCPd,eAAe,CAACkB,WAAhB,GAA8B,iBAA9B","sourcesContent":["import React, { forwardRef, useRef, useCallback, useState } from \"react\";\nimport { Variant } from \"../Typography/Typography\";\nimport { StyledDiv, StyledInput, StyledSpan } from \"./Styles\";\n\nexport interface EditableContentInterface {\n  /** Typography variant. */\n  variant?: Variant;\n  /** Typography weight. */\n  weight?: \"light\" | \"regular\" | \"bold\" | \"medium\";\n  /** Input props. */\n  inputProps?: Partial<React.ComponentPropsWithoutRef<\"input\">>;\n}\n\nexport const EditableContent = forwardRef<\n  HTMLDivElement,\n  EditableContentInterface &\n    Omit<React.ComponentPropsWithoutRef<\"div\">, keyof EditableContentInterface>\n>(({ className, variant = \"Body 2\", weight, inputProps, ...props }, ref) => {\n  const [innerValue, setInnerValue] = useState(() => inputProps?.value);\n  const intInputRef = useRef<HTMLInputElement>(null);\n\n  const handleChange = useCallback((evt) => {\n    setInnerValue(evt.target.value);\n  }, []);\n\n  const handleBlur = useCallback(\n    (evt) => {\n      intInputRef?.current?.setSelectionRange(0, 0);\n      typeof inputProps?.onBlur === `function` && inputProps?.onBlur(evt);\n    },\n    [inputProps]\n  );\n\n  return (\n    <StyledDiv className={className} ref={ref} {...props}>\n      <StyledSpan variant={variant} forwardedAs=\"span\" weight={weight}>\n        {innerValue}\n      </StyledSpan>\n      <StyledInput\n        {...inputProps}\n        ref={intInputRef}\n        forwardedAs=\"input\"\n        variant={variant}\n        weight={weight}\n        onChange={handleChange}\n        value={innerValue}\n        onBlur={handleBlur}\n      />\n    </StyledDiv>\n  );\n});\n\nEditableContent.displayName = \"EditableContent\";\n"],"file":"EditableContent.js"}

package/dist/esm/components/EditableContent/EditableContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditableContent.d.ts","sourceRoot":"","sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAGnD,MAAM,WAAW,wBAAwB;IAEvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;IAEjD,UAAU,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAC,CAAC;CAC/D;AAED,eAAO,MAAM,eAAe,yuJA0B1B,CAAC"}
+{"version":3,"file":"EditableContent.d.ts","sourceRoot":"","sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAGnD,MAAM,WAAW,wBAAwB;IAEvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;IAEjD,UAAU,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAC,CAAC;CAC/D;AAED,eAAO,MAAM,eAAe,yuJAqC1B,CAAC"}

package/dist/esm/components/EditableContent/EditableContent.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["className", "variant", "weight", "inputProps"];
-import React, { forwardRef, useCallback, useState } from "react";
+import React, { forwardRef, useRef, useCallback, useState } from "react";
 import { StyledDiv, StyledInput, StyledSpan } from "./Styles";
 export var EditableContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
@@ -17,9 +17,16 @@ export var EditableContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
       innerValue = _useState[0],
       setInnerValue = _useState[1];
 
+  var intInputRef = useRef(null);
   var handleChange = useCallback(function (evt) {
     setInnerValue(evt.target.value);
   }, []);
+  var handleBlur = useCallback(function (evt) {
+    var _intInputRef$current;
+
+    intInputRef == null ? void 0 : (_intInputRef$current = intInputRef.current) == null ? void 0 : _intInputRef$current.setSelectionRange(0, 0);
+    typeof (inputProps == null ? void 0 : inputProps.onBlur) === "function" && (inputProps == null ? void 0 : inputProps.onBlur(evt));
+  }, [inputProps]);
   return /*#__PURE__*/React.createElement(StyledDiv, _extends({
     className: className,
     ref: ref
@@ -28,11 +35,13 @@ export var EditableContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
     forwardedAs: "span",
     weight: weight
   }, innerValue), /*#__PURE__*/React.createElement(StyledInput, _extends({}, inputProps, {
+    ref: intInputRef,
     forwardedAs: "input",
     variant: variant,
     weight: weight,
     onChange: handleChange,
-    value: innerValue
+    value: innerValue,
+    onBlur: handleBlur
   })));
 });
 EditableContent.displayName = "EditableContent";

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"names":["React","forwardRef","useCallback","useState","StyledDiv","StyledInput","StyledSpan","EditableContent","ref","className","variant","weight","inputProps","props","value","innerValue","setInnerValue","handleChange","evt","target","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,WAA5B,EAAyCC,QAAzC,QAAyD,OAAzD;AAEA,SAASC,SAAT,EAAoBC,WAApB,EAAiCC,UAAjC,QAAmD,UAAnD;AAWA,OAAO,IAAMC,eAAe,gBAAGN,UAAU,CAIvC,gBAAkEO,GAAlE,EAA0E;AAAA,MAAvEC,SAAuE,QAAvEA,SAAuE;AAAA,0BAA5DC,OAA4D;AAAA,MAA5DA,OAA4D,6BAAlD,QAAkD;AAAA,MAAxCC,MAAwC,QAAxCA,MAAwC;AAAA,MAAhCC,UAAgC,QAAhCA,UAAgC;AAAA,MAAjBC,KAAiB;;AAC1E,kBAAoCV,QAAQ,CAAC;AAAA,WAAMS,UAAN,oBAAMA,UAAU,CAAEE,KAAlB;AAAA,GAAD,CAA5C;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AAEA,MAAMC,YAAY,GAAGf,WAAW,CAAC,UAACgB,GAAD,EAAS;AACxCF,IAAAA,aAAa,CAACE,GAAG,CAACC,MAAJ,CAAWL,KAAZ,CAAb;AACD,GAF+B,EAE7B,EAF6B,CAAhC;AAIA,sBACE,oBAAC,SAAD;AAAW,IAAA,SAAS,EAAEL,SAAtB;AAAiC,IAAA,GAAG,EAAED;AAAtC,KAA+CK,KAA/C,gBACE,oBAAC,UAAD;AAAY,IAAA,OAAO,EAAEH,OAArB;AAA8B,IAAA,WAAW,EAAC,MAA1C;AAAiD,IAAA,MAAM,EAAEC;AAAzD,KACGI,UADH,CADF,eAIE,oBAAC,WAAD,eACMH,UADN;AAEE,IAAA,WAAW,EAAC,OAFd;AAGE,IAAA,OAAO,EAAEF,OAHX;AAIE,IAAA,MAAM,EAAEC,MAJV;AAKE,IAAA,QAAQ,EAAEM,YALZ;AAME,IAAA,KAAK,EAAEF;AANT,KAJF,CADF;AAeD,CA1BwC,CAAlC;AA4BPR,eAAe,CAACa,WAAhB,GAA8B,iBAA9B","sourcesContent":["import React, { forwardRef, useCallback, useState } from \"react\";\nimport { Variant } from \"../Typography/Typography\";\nimport { StyledDiv, StyledInput, StyledSpan } from \"./Styles\";\n\nexport interface EditableContentInterface {\n  /** Typography variant. */\n  variant?: Variant;\n  /** Typography weight. */\n  weight?: \"light\" | \"regular\" | \"bold\" | \"medium\";\n  /** Input props. */\n  inputProps?: Partial<React.ComponentPropsWithoutRef<\"input\">>;\n}\n\nexport const EditableContent = forwardRef<\n  HTMLDivElement,\n  EditableContentInterface &\n    Omit<React.ComponentPropsWithoutRef<\"div\">, keyof EditableContentInterface>\n>(({ className, variant = \"Body 2\", weight, inputProps, ...props }, ref) => {\n  const [innerValue, setInnerValue] = useState(() => inputProps?.value);\n\n  const handleChange = useCallback((evt) => {\n    setInnerValue(evt.target.value);\n  }, []);\n\n  return (\n    <StyledDiv className={className} ref={ref} {...props}>\n      <StyledSpan variant={variant} forwardedAs=\"span\" weight={weight}>\n        {innerValue}\n      </StyledSpan>\n      <StyledInput\n        {...inputProps}\n        forwardedAs=\"input\"\n        variant={variant}\n        weight={weight}\n        onChange={handleChange}\n        value={innerValue}\n      />\n    </StyledDiv>\n  );\n});\n\nEditableContent.displayName = \"EditableContent\";\n"],"file":"EditableContent.js"}
+{"version":3,"sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"names":["React","forwardRef","useRef","useCallback","useState","StyledDiv","StyledInput","StyledSpan","EditableContent","ref","className","variant","weight","inputProps","props","value","innerValue","setInnerValue","intInputRef","handleChange","evt","target","handleBlur","current","setSelectionRange","onBlur","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,MAA5B,EAAoCC,WAApC,EAAiDC,QAAjD,QAAiE,OAAjE;AAEA,SAASC,SAAT,EAAoBC,WAApB,EAAiCC,UAAjC,QAAmD,UAAnD;AAWA,OAAO,IAAMC,eAAe,gBAAGP,UAAU,CAIvC,gBAAkEQ,GAAlE,EAA0E;AAAA,MAAvEC,SAAuE,QAAvEA,SAAuE;AAAA,0BAA5DC,OAA4D;AAAA,MAA5DA,OAA4D,6BAAlD,QAAkD;AAAA,MAAxCC,MAAwC,QAAxCA,MAAwC;AAAA,MAAhCC,UAAgC,QAAhCA,UAAgC;AAAA,MAAjBC,KAAiB;;AAC1E,kBAAoCV,QAAQ,CAAC;AAAA,WAAMS,UAAN,oBAAMA,UAAU,CAAEE,KAAlB;AAAA,GAAD,CAA5C;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AACA,MAAMC,WAAW,GAAGhB,MAAM,CAAmB,IAAnB,CAA1B;AAEA,MAAMiB,YAAY,GAAGhB,WAAW,CAAC,UAACiB,GAAD,EAAS;AACxCH,IAAAA,aAAa,CAACG,GAAG,CAACC,MAAJ,CAAWN,KAAZ,CAAb;AACD,GAF+B,EAE7B,EAF6B,CAAhC;AAIA,MAAMO,UAAU,GAAGnB,WAAW,CAC5B,UAACiB,GAAD,EAAS;AAAA;;AACPF,IAAAA,WAAW,QAAX,oCAAAA,WAAW,CAAEK,OAAb,0CAAsBC,iBAAtB,CAAwC,CAAxC,EAA2C,CAA3C;AACA,YAAOX,UAAP,oBAAOA,UAAU,CAAEY,MAAnB,qBAA4CZ,UAA5C,oBAA4CA,UAAU,CAAEY,MAAZ,CAAmBL,GAAnB,CAA5C;AACD,GAJ2B,EAK5B,CAACP,UAAD,CAL4B,CAA9B;AAQA,sBACE,oBAAC,SAAD;AAAW,IAAA,SAAS,EAAEH,SAAtB;AAAiC,IAAA,GAAG,EAAED;AAAtC,KAA+CK,KAA/C,gBACE,oBAAC,UAAD;AAAY,IAAA,OAAO,EAAEH,OAArB;AAA8B,IAAA,WAAW,EAAC,MAA1C;AAAiD,IAAA,MAAM,EAAEC;AAAzD,KACGI,UADH,CADF,eAIE,oBAAC,WAAD,eACMH,UADN;AAEE,IAAA,GAAG,EAAEK,WAFP;AAGE,IAAA,WAAW,EAAC,OAHd;AAIE,IAAA,OAAO,EAAEP,OAJX;AAKE,IAAA,MAAM,EAAEC,MALV;AAME,IAAA,QAAQ,EAAEO,YANZ;AAOE,IAAA,KAAK,EAAEH,UAPT;AAQE,IAAA,MAAM,EAAEM;AARV,KAJF,CADF;AAiBD,CArCwC,CAAlC;AAuCPd,eAAe,CAACkB,WAAhB,GAA8B,iBAA9B","sourcesContent":["import React, { forwardRef, useRef, useCallback, useState } from \"react\";\nimport { Variant } from \"../Typography/Typography\";\nimport { StyledDiv, StyledInput, StyledSpan } from \"./Styles\";\n\nexport interface EditableContentInterface {\n  /** Typography variant. */\n  variant?: Variant;\n  /** Typography weight. */\n  weight?: \"light\" | \"regular\" | \"bold\" | \"medium\";\n  /** Input props. */\n  inputProps?: Partial<React.ComponentPropsWithoutRef<\"input\">>;\n}\n\nexport const EditableContent = forwardRef<\n  HTMLDivElement,\n  EditableContentInterface &\n    Omit<React.ComponentPropsWithoutRef<\"div\">, keyof EditableContentInterface>\n>(({ className, variant = \"Body 2\", weight, inputProps, ...props }, ref) => {\n  const [innerValue, setInnerValue] = useState(() => inputProps?.value);\n  const intInputRef = useRef<HTMLInputElement>(null);\n\n  const handleChange = useCallback((evt) => {\n    setInnerValue(evt.target.value);\n  }, []);\n\n  const handleBlur = useCallback(\n    (evt) => {\n      intInputRef?.current?.setSelectionRange(0, 0);\n      typeof inputProps?.onBlur === `function` && inputProps?.onBlur(evt);\n    },\n    [inputProps]\n  );\n\n  return (\n    <StyledDiv className={className} ref={ref} {...props}>\n      <StyledSpan variant={variant} forwardedAs=\"span\" weight={weight}>\n        {innerValue}\n      </StyledSpan>\n      <StyledInput\n        {...inputProps}\n        ref={intInputRef}\n        forwardedAs=\"input\"\n        variant={variant}\n        weight={weight}\n        onChange={handleChange}\n        value={innerValue}\n        onBlur={handleBlur}\n      />\n    </StyledDiv>\n  );\n});\n\nEditableContent.displayName = \"EditableContent\";\n"],"file":"EditableContent.js"}

package/dist/index.js

@@ -11997,9 +11997,16 @@
         innerValue = _useState2[0],
         setInnerValue = _useState2[1];
 
+    var intInputRef = React.useRef(null);
     var handleChange = React.useCallback(function (evt) {
       setInnerValue(evt.target.value);
     }, []);
+    var handleBlur = React.useCallback(function (evt) {
+      var _intInputRef$current;
+
+      intInputRef === null || intInputRef === void 0 ? void 0 : (_intInputRef$current = intInputRef.current) === null || _intInputRef$current === void 0 ? void 0 : _intInputRef$current.setSelectionRange(0, 0);
+      typeof (inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === "function" && (inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur(evt));
+    }, [inputProps]);
     return /*#__PURE__*/React__default["default"].createElement(StyledDiv, _extends({
       className: className,
       ref: ref
@@ -12008,11 +12015,13 @@
       forwardedAs: "span",
       weight: weight
     }, innerValue), /*#__PURE__*/React__default["default"].createElement(StyledInput, _extends({}, inputProps, {
+      ref: intInputRef,
       forwardedAs: "input",
       variant: variant,
       weight: weight,
       onChange: handleChange,
-      value: innerValue
+      value: innerValue,
+      onBlur: handleBlur
     })));
   });
   EditableContent.displayName = "EditableContent";