@autoguru/overdrive 4.26.2 → 4.26.4

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;AAEf,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAC7B,OAAO,EAAE,IAAI,EAAiB,MAAM,SAAS,CAAC;AAK9C,KAAK,QAAQ,GAAG,IAAI,CACnB,cAAc,CAAC,OAAO,GAAG,CAAC,EAC1B,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,CAC9C,CAAC;AACF,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,iFAuFxB,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,EAEN,cAAc,EAEd,mBAAmB,EAKnB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAC7B,OAAO,EAAE,IAAI,EAAiB,MAAM,SAAS,CAAC;AAK9C,KAAK,QAAQ,GAAG,IAAI,CACnB,cAAc,CAAC,OAAO,GAAG,CAAC,EAC1B,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,CAC9C,CAAC;AACF,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,iFAqHxB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/EditableText/EditableText.js

@@ -2,19 +2,21 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["is", "colour", "size", "display", "value", "onFocus", "onBlur", "onKeyDown", "onModeChange", "tabIndex"];
+const _excluded = ["is", "colour", "size", "display", "value", "onFocus", "onBlur", "onKeyDown", "onModeChange", "tabIndex", "onChange", "type"];
 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, useEffect, useRef, useState } from 'react';
+import { forwardRef, useCallback, 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";
+const numberInputValuePattern = /^\d*\.?\d*$/;
 export const EditableText = forwardRef((_ref, ref) => {
+  var _inputRef$current;
   let {
       is,
       colour = 'muted',
@@ -25,17 +27,32 @@ export const EditableText = forwardRef((_ref, ref) => {
       onBlur,
       onKeyDown,
       onModeChange,
-      tabIndex = 0
+      tabIndex = 0,
+      onChange: incomingOnChange,
+      type = 'text'
     } = _ref,
     inputProps = _objectWithoutProperties(_ref, _excluded);
   const textRef = useRef(null);
+  const inputRef = useRef(null);
   const [mode, setMode] = useState('TEXT');
+  const [inputValue, setInputValue] = useState(value);
   const onRequestModeChange = newMode => {
     setMode(newMode);
     if (typeof onModeChange === 'function') {
       onModeChange(newMode);
     }
   };
+  const onChange = useCallback(e => {
+    const changeValue = e.currentTarget.value;
+    const lastChar = changeValue.charAt(changeValue.length - 1);
+    if (type === 'number' && !numberInputValuePattern.test(lastChar)) {
+      return;
+    }
+    if (mode === 'INPUT') {
+      setInputValue(changeValue);
+    }
+    if (typeof incomingOnChange === 'function') incomingOnChange(e);
+  }, [incomingOnChange, type]);
   const textStyles = useTextStyles({
     is,
     colour,
@@ -46,7 +63,7 @@ export const EditableText = forwardRef((_ref, ref) => {
     if (textRef.current) {
       setWidth(textRef.current.clientWidth);
     }
-  }, [textRef.current, value]);
+  }, [textRef.current, inputValue]);
   return _jsxs(Box, {
     ref: ref,
     display: display,
@@ -56,6 +73,7 @@ export const EditableText = forwardRef((_ref, ref) => {
     onClick: () => onRequestModeChange('INPUT'),
     onFocus: e => {
       if (typeof onFocus === 'function') onFocus(e);
+      setInputValue(value);
       onRequestModeChange('INPUT');
     },
     onBlur: e => {
@@ -72,8 +90,11 @@ export const EditableText = forwardRef((_ref, ref) => {
       is: "input"
     }, inputProps), {}, {
       autoFocus: true,
-      value: value,
+      ref: inputRef,
+      type: type !== 'number' ? type : 'text',
+      value: inputValue,
       className: clsx(textStyles, inputStyles.input.itself.root),
+      onChange: onChange,
       style: {
         width
       }
@@ -86,7 +107,7 @@ export const EditableText = forwardRef((_ref, ref) => {
       className: clsx(textStyles, styles.text, {
         [styles.textHidden]: mode === 'INPUT'
       }),
-      children: value
+      children: mode === 'INPUT' ? ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) || value : value
     })]
   });
 });

package/package.json

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

package/readme.md

@@ -16,7 +16,7 @@
 Overdrive is a product component library and design system for AutoGuru, built
 with React, TypeScript, Vanilla Extract, and Storybook.
 
-[Storybook playground](http://overdrive.autoguru.io/).
+[Storybook playground](https://overdrive.autoguru.io/).
 
 Overdrive is a product component library, and design system for AutoGuru. Built
 with [React](https://github.com/facebook/react),