@autoguru/overdrive 4.23.3 → 4.23.5

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { ComponentProps, InputHTMLAttributes } from 'react';
+import { Box } from '../Box';
 import { Text } from '../Text';
-type BoxProps = Pick<ComponentProps<typeof Text>, 'display'>;
-type TextProps = Pick<ComponentProps<typeof Text>, 'is' | 'colour' | 'size' | 'display' | 'children' | 'noWrap'>;
-type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'style' | 'is' | 'autoFocus' | 'width' | 'height' | keyof TextProps | keyof BoxProps>;
+type BoxProps = Pick<ComponentProps<typeof Box>, 'display' | 'onFocus' | 'onBlur'>;
+type TextProps = Pick<ComponentProps<typeof Text>, 'is' | 'colour' | 'size' | 'children' | 'noWrap'>;
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'style' | 'is' | 'autoFocus' | 'width' | 'height' | 'onFocus' | 'onBlur' | keyof TextProps | keyof BoxProps>;
 export interface Props extends TextProps, InputProps, BoxProps {
     className?: string;
 }

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,iFAkExB,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,EAAE,cAAc,EAAc,mBAAmB,EAA+B,MAAM,OAAO,CAAC;AAErG,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAC7B,OAAO,EAAE,IAAI,EAAiB,MAAM,SAAS,CAAC;AAK9C,KAAK,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAC;AACnF,KAAK,SAAS,GAAG,IAAI,CACpB,cAAc,CAAC,OAAO,IAAI,CAAC,EAC3B,IAAI,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAChD,CAAC;AACF,KAAK,UAAU,GAAG,IAAI,CACrB,mBAAmB,CAAC,gBAAgB,CAAC,EACnC,OAAO,GACP,IAAI,GACJ,WAAW,GACX,OAAO,GACP,QAAQ,GACR,SAAS,GACT,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,iFA+ExB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/EditableText/EditableText.js

@@ -2,26 +2,27 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["is", "colour", "size", "display", "value"];
+const _excluded = ["is", "colour", "size", "display", "value", "onFocus", "onBlur"];
 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 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',
       size,
       display = 'inlineBlock',
-      value
+      value,
+      onFocus,
+      onBlur
     } = _ref,
     inputProps = _objectWithoutProperties(_ref, _excluded);
   const textRef = useRef(null);
@@ -32,13 +33,26 @@ 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,
-    onBlur: () => setIsEditing(false),
+    onFocus: e => {
+      onRequestEdit();
+      if (typeof onFocus === 'function') onFocus(e);
+    },
+    onBlur: e => {
+      setIsEditing(false);
+      if (typeof onBlur === 'function') onBlur(e);
+    },
     onKeyDown: e => {
       if (e.key === 'Enter' || e.key === 'Escape') {
         setIsEditing(false);
@@ -51,7 +65,7 @@ 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,
@@ -59,9 +73,9 @@ export const EditableText = forwardRef((_ref, ref) => {
       is: is,
       colour: colour,
       size: size,
-      className: clsx(textStyles, styles.text, useBoxStyles({
-        display: isEditing ? 'none' : display
-      })),
+      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',

package/package.json

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