@autoguru/overdrive 4.23.2 → 4.23.4

package/dist/components/EditableText/EditableText.css.d.ts

@@ -1,3 +1,4 @@
 export declare const root: string;
 export declare const text: string;
+export declare const textHidden: string;
 //# sourceMappingURL=EditableText.css.d.ts.map

package/dist/components/EditableText/EditableText.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditableText.css.d.ts","sourceRoot":"","sources":["../../../lib/components/EditableText/EditableText.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,IAAI,QAEf,CAAC"}
+{"version":3,"file":"EditableText.css.d.ts","sourceRoot":"","sources":["../../../lib/components/EditableText/EditableText.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,IAAI,QAEf,CAAC;AAEH,eAAO,MAAM,UAAU,QAGrB,CAAC"}

package/dist/components/EditableText/EditableText.css.js

@@ -14,4 +14,8 @@ export const root = style({
 export const text = style({
   cursor: 'pointer'
 }, "text");
+export const textHidden = style({
+  position: 'absolute',
+  visibility: 'hidden'
+}, "textHidden");
 __vanilla_filescope__.endFileScope();

package/dist/components/EditableText/EditableText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditableText.d.ts","sourceRoot":"","sources":["../../../lib/components/EditableText/EditableText.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,cAAc,EAEd,mBAAmB,EAGnB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,IAAI,EAAiB,MAAM,SAAS,CAAC;AAK9C,KAAK,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7D,KAAK,SAAS,GAAG,IAAI,CACpB,cAAc,CAAC,OAAO,IAAI,CAAC,EAC3B,IAAI,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,CAC5D,CAAC;AACF,KAAK,UAAU,GAAG,IAAI,CACrB,mBAAmB,CAAC,gBAAgB,CAAC,EACnC,OAAO,GACP,IAAI,GACJ,WAAW,GACX,OAAO,GACP,QAAQ,GACR,MAAM,SAAS,GACf,MAAM,QAAQ,CAChB,CAAC;AAEF,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,UAAU,EAAE,QAAQ;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,iFAiExB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"EditableText.d.ts","sourceRoot":"","sources":["../../../lib/components/EditableText/EditableText.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,cAAc,EAEd,mBAAmB,EAInB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,IAAI,EAAiB,MAAM,SAAS,CAAC;AAK9C,KAAK,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7D,KAAK,SAAS,GAAG,IAAI,CACpB,cAAc,CAAC,OAAO,IAAI,CAAC,EAC3B,IAAI,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,CAC5D,CAAC;AACF,KAAK,UAAU,GAAG,IAAI,CACrB,mBAAmB,CAAC,gBAAgB,CAAC,EACnC,OAAO,GACP,IAAI,GACJ,WAAW,GACX,OAAO,GACP,QAAQ,GACR,MAAM,SAAS,GACf,MAAM,QAAQ,CAChB,CAAC;AAEF,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,UAAU,EAAE,QAAQ;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,iFAqExB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/EditableText/EditableText.js

@@ -7,15 +7,14 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import clsx from 'clsx';
 import * as React from 'react';
-import { forwardRef, useRef, useState } from 'react';
-import { Box, useBoxStyles } from "../Box/index.js";
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { Box } from "../Box/index.js";
 import { Text, useTextStyles } from "../Text/index.js";
 import * as inputStyles from "../private/InputBase/withEnhancedInput.css.js";
 import * as styles from "./EditableText.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const EditableText = forwardRef((_ref, ref) => {
-  var _textRef$current;
   let {
       is,
       colour = 'muted',
@@ -32,9 +31,16 @@ export const EditableText = forwardRef((_ref, ref) => {
     colour,
     size
   });
+  const [width, setWidth] = useState(undefined);
+  useEffect(() => {
+    if (textRef.current) {
+      setWidth(textRef.current.clientWidth);
+    }
+  }, [textRef.current, value]);
   return _jsxs(Box, {
     ref: ref,
     display: display,
+    position: "relative",
     className: styles.root,
     onClick: onRequestEdit,
     onFocus: onRequestEdit,
@@ -51,16 +57,17 @@ export const EditableText = forwardRef((_ref, ref) => {
       value: value,
       className: clsx(textStyles, inputStyles.input.itself.root),
       style: {
-        width: (_textRef$current = textRef.current) === null || _textRef$current === void 0 ? void 0 : _textRef$current.offsetWidth
+        width
       }
     })), _jsx(Text, {
       noWrap: true,
       ref: textRef,
       is: is,
       colour: colour,
-      className: clsx(textStyles, styles.text, useBoxStyles({
-        display: isEditing ? 'none' : display
-      })),
+      size: size,
+      className: clsx(textStyles, styles.text, {
+        [styles.textHidden]: isEditing
+      }),
       children: value
     })]
   });

package/dist/components/EditableText/stories.js

@@ -1,10 +1,13 @@
 "use strict";
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["onChange", "value"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import isChromatic from 'chromatic';
 import * as React from 'react';
+import { useState } from 'react';
 import { EditableText } from "./index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export default {
@@ -20,7 +23,21 @@ export default {
     }
   }
 };
-const template = args => _jsx(EditableText, _objectSpread({}, args));
+const template = _ref => {
+  let {
+      onChange: incomingOnChange,
+      value: incomingValue
+    } = _ref,
+    args = _objectWithoutProperties(_ref, _excluded);
+  const [value, setValue] = useState(incomingValue);
+  return _jsx(EditableText, _objectSpread({
+    onChange: e => {
+      setValue(e.currentTarget.value);
+      typeof incomingOnChange === 'function' && incomingOnChange(e.currentTarget.value);
+    },
+    value: value
+  }, args));
+};
 const textProps = {
   colour: 'muted',
   value: 'Hello World',
@@ -49,11 +66,19 @@ const narrowCharactersProps = {
   value: 'Price is $111.01',
   type: 'text'
 };
+const customSizeProps = {
+  colour: 'warning',
+  value: '$999.99',
+  type: 'text',
+  size: '6'
+};
 export const text = template.bind(textProps);
 export const number = template.bind(numberProps);
 export const date = template.bind(dateProps);
 export const narrowCharacters = template.bind(narrowCharactersProps);
+export const customSize = template.bind(customSizeProps);
 text.args = textProps;
 number.args = numberProps;
 date.args = dateProps;
-narrowCharacters.args = narrowCharactersProps;
+narrowCharacters.args = narrowCharactersProps;
+customSize.args = customSizeProps;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.23.2",
+	"version": "4.23.4",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",