@autoguru/overdrive 4.23.4 → 4.23.6

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

@@ -1,12 +1,15 @@
 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' | 'onKeyDown'>;
+type TextProps = Pick<ComponentProps<typeof Text>, 'is' | 'colour' | 'size' | 'children' | 'noWrap'>;
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'style' | 'is' | 'autoFocus' | 'width' | 'height' | 'onFocus' | 'onBlur' | 'onKeyDown' | keyof TextProps | keyof BoxProps>;
 export interface Props extends TextProps, InputProps, BoxProps {
     className?: string;
+    onModeChange?: (mode: InputMode) => void;
 }
+type InputMode = 'TEXT' | 'INPUT';
 export declare const EditableText: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLAnchorElement>>;
 export default EditableText;
 //# sourceMappingURL=EditableText.d.ts.map

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,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"}
+{"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,GAAG,WAAW,CAAC,CAAC;AACjG,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,WAAW,GACX,MAAM,SAAS,GACf,MAAM,QAAQ,CAChB,CAAC;AAEF,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,UAAU,EAAE,QAAQ;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CACzC;AAED,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAClC,eAAO,MAAM,YAAY,iFAwFxB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/EditableText/EditableText.js

@@ -2,7 +2,7 @@
 
 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", "onKeyDown", "onModeChange"];
 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';
@@ -20,12 +20,21 @@ export const EditableText = forwardRef((_ref, ref) => {
       colour = 'muted',
       size,
       display = 'inlineBlock',
-      value
+      value,
+      onFocus,
+      onBlur,
+      onKeyDown,
+      onModeChange
     } = _ref,
     inputProps = _objectWithoutProperties(_ref, _excluded);
   const textRef = useRef(null);
-  const [isEditing, setIsEditing] = useState(false);
-  const onRequestEdit = () => setIsEditing(true);
+  const [mode, setMode] = useState('TEXT');
+  const onRequestModeChange = newMode => {
+    setMode(newMode);
+    if (typeof onModeChange === 'function') {
+      onModeChange(newMode);
+    }
+  };
   const textStyles = useTextStyles({
     is,
     colour,
@@ -42,15 +51,22 @@ export const EditableText = forwardRef((_ref, ref) => {
     display: display,
     position: "relative",
     className: styles.root,
-    onClick: onRequestEdit,
-    onFocus: onRequestEdit,
-    onBlur: () => setIsEditing(false),
+    onClick: () => onRequestModeChange('INPUT'),
+    onFocus: e => {
+      if (typeof onFocus === 'function') onFocus(e);
+      onRequestModeChange('INPUT');
+    },
+    onBlur: e => {
+      if (typeof onBlur === 'function') onBlur(e);
+      onRequestModeChange('TEXT');
+    },
     onKeyDown: e => {
+      if (typeof onKeyDown === 'function') onKeyDown(e);
       if (e.key === 'Enter' || e.key === 'Escape') {
-        setIsEditing(false);
+        onRequestModeChange('TEXT');
       }
     },
-    children: [isEditing && _jsx(Box, _objectSpread(_objectSpread({
+    children: [mode === 'INPUT' && _jsx(Box, _objectSpread(_objectSpread({
       is: "input"
     }, inputProps), {}, {
       autoFocus: true,
@@ -66,7 +82,7 @@ export const EditableText = forwardRef((_ref, ref) => {
       colour: colour,
       size: size,
       className: clsx(textStyles, styles.text, {
-        [styles.textHidden]: isEditing
+        [styles.textHidden]: mode === 'INPUT'
       }),
       children: value
     })]

package/package.json

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