@autoguru/overdrive 4.26.1 → 4.26.3

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

@@ -1 +1 @@
-{"version":3,"file":"DropDown.d.ts","sourceRoot":"","sources":["../../../lib/components/DropDown/DropDown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE5D,OAAO,EACN,cAAc,EAAE,iBAAiB,EAEjC,SAAS,EAIT,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAOnC,KAAK,WAAW,GAAG,IAAI,CACtB,cAAc,CAAC,OAAO,MAAM,CAAC,EAC7B,IAAI,GAAG,UAAU,GAAG,SAAS,CAC7B,CAAC;AACF,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC;AAEpE,MAAM,WAAW,KAAM,SAAQ,WAAW,EAAE,WAAW;IACtD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,QAAQ,EAAC,iBAAiB,CAAC,KAAK,CAsC5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"DropDown.d.ts","sourceRoot":"","sources":["../../../lib/components/DropDown/DropDown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE5D,OAAO,EACN,cAAc,EACd,iBAAiB,EAEjB,SAAS,EAIT,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAOnC,KAAK,WAAW,GAAG,IAAI,CACtB,cAAc,CAAC,OAAO,MAAM,CAAC,EAC7B,IAAI,GAAG,UAAU,GAAG,SAAS,CAC7B,CAAC;AACF,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC;AAEpE,MAAM,WAAW,KAAM,SAAQ,WAAW,EAAE,WAAW;IACtD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,KAAK,CAsC7C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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,iFAmGxB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/EditableText/EditableText.js

@@ -2,12 +2,12 @@
 
 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"];
 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";
@@ -25,17 +25,25 @@ export const EditableText = forwardRef((_ref, ref) => {
       onBlur,
       onKeyDown,
       onModeChange,
-      tabIndex = 0
+      tabIndex = 0,
+      onChange: incomingOnChange
     } = _ref,
     inputProps = _objectWithoutProperties(_ref, _excluded);
   const textRef = 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 => {
+    if (mode === 'INPUT') {
+      setInputValue(e.currentTarget.value);
+    }
+    if (typeof incomingOnChange === 'function') incomingOnChange(e);
+  }, [incomingOnChange, mode, value]);
   const textStyles = useTextStyles({
     is,
     colour,
@@ -72,8 +80,9 @@ export const EditableText = forwardRef((_ref, ref) => {
       is: "input"
     }, inputProps), {}, {
       autoFocus: true,
-      value: value,
+      value: inputValue,
       className: clsx(textStyles, inputStyles.input.itself.root),
+      onChange: onChange,
       style: {
         width
       }
@@ -86,7 +95,7 @@ export const EditableText = forwardRef((_ref, ref) => {
       className: clsx(textStyles, styles.text, {
         [styles.textHidden]: mode === 'INPUT'
       }),
-      children: value
+      children: mode === 'INPUT' ? inputValue : value
     })]
   });
 });

package/dist/components/NumberInput/stories.js

@@ -83,6 +83,7 @@ const Template = _ref => {
 const sharedProps = {
   disabled: false,
   name: 'number',
+  value: '',
   placeholder: defaultPlaceholder,
   isValid: false,
   isTouched: false,

package/dist/components/private/InputBase/NotchedBase.css.d.ts

@@ -1,4 +1,5 @@
 export declare const root: string;
+export declare const notchGapPlaceholder: string;
 export declare const borders: {
     root: {
         default: string[];

package/dist/components/private/InputBase/NotchedBase.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotchedBase.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/NotchedBase.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QAEf,CAAC;AAeH,eAAO,MAAM,OAAO;;;;;;;;;CAuCnB,CAAC;AAEF,eAAO,MAAM,aAAa;;;CAmCzB,CAAC;AACF,eAAO,MAAM,aAAa;;;CAmCzB,CAAC;AAEF,eAAO,MAAM,WAAW,gDAWtB,CAAC;AA2BH,eAAO,MAAM,oBAAoB,KAiDhC,CAAC"}
+{"version":3,"file":"NotchedBase.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/NotchedBase.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,QAEf,CAAC;AAeH,eAAO,MAAM,mBAAmB,QAG9B,CAAC;AAEH,eAAO,MAAM,OAAO;;;;;;;;;CAuCnB,CAAC;AAEF,eAAO,MAAM,aAAa;;;CAmCzB,CAAC;AACF,eAAO,MAAM,aAAa;;;CAmCzB,CAAC;AAEF,eAAO,MAAM,WAAW,gDAWtB,CAAC;AAyBH,eAAO,MAAM,oBAAoB,KAiDhC,CAAC"}

package/dist/components/private/InputBase/NotchedBase.css.js

@@ -4,6 +4,7 @@ import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/private/InputBase/NotchedBase.css.ts", "@autoguru/overdrive");
 import { style, styleVariants } from '@vanilla-extract/css';
 import { themeContractVars as vars } from "../../../themes/theme.css.js";
+const active_scaling_factor = 0.7777;
 export const root = style({
   transition: "fill 0.2s ".concat(vars.animation.easing.decelerate, " 0s")
 }, "root");
@@ -18,6 +19,10 @@ const borderVisualDefaults = style({
   borderRadius: vars.border.radius['1'],
   boxShadow: vars.elevation['2']
 }, "borderVisualDefaults");
+export const notchGapPlaceholder = style({
+  visibility: 'hidden',
+  fontSize: "calc(".concat(vars.typography.size['4'].fontSize, " * ").concat(active_scaling_factor, ")")
+}, "notchGapPlaceholder");
 export const borders = {
   root: {
     default: [borderVisualDefaults, style({
@@ -132,7 +137,6 @@ export const placeholder = styleVariants({
     color: vars.typography.colour.muted
   }
 }, "placeholder");
-const active_scaling_factor = 0.7777;
 const calcPlaceholderTranslate = (notched, prefixed, size) => {
   if (notched) {
     return "calc(".concat(vars.space['2'], " + ").concat(vars.space['2'], "), calc(-0.5 * ").concat(active_scaling_factor, " * ").concat(vars.typography.size['4'].fontSize, ")");

package/dist/components/private/InputBase/NotchedBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotchedBase.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/NotchedBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EACN,iBAAiB,EACjB,SAAS,EAIT,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,MAAM,MAAM,mBAAmB,CAAC;AAM5C,MAAM,WAAW,KAAK;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,0BAA0B,EAAE,MAAM,CAAC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,MAAM,OAAO,MAAM,CAAC,oBAAoB,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC,OAAO,MAAM,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC;IACzD,YAAY,CAAC,EAAE,MAAM,CAAC,OAAO,MAAM,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,KAAK,CAyLhD,CAAC"}
+{"version":3,"file":"NotchedBase.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/NotchedBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAK7D,OAAO,KAAK,MAAM,MAAM,mBAAmB,CAAC;AAE5C,MAAM,WAAW,KAAK;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,0BAA0B,EAAE,MAAM,CAAC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,MAAM,OAAO,MAAM,CAAC,oBAAoB,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC,OAAO,MAAM,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC;IACzD,YAAY,CAAC,EAAE,MAAM,CAAC,OAAO,MAAM,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,KAAK,CA0LhD,CAAC"}

package/dist/components/private/InputBase/NotchedBase.js

@@ -2,15 +2,12 @@
 
 import clsx from 'clsx';
 import * as React from 'react';
-import { useEffect, useRef, useState } from 'react';
+import { useRef } from 'react';
 import { Box } from "../../Box/index.js";
 import { useTextStyles } from "../../Text/index.js";
 import * as styles from "./NotchedBase.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const ACTIVE_SCALING_FACTOR = 0.7777;
-const ACTIVE_PADDING_ADDED = 16;
-const ROUGH_WIDTH_PER_CHARACTER = 10.2;
 export const NotchedBase = _ref => {
   let {
     id,
@@ -34,14 +31,7 @@ export const NotchedBase = _ref => {
     size: '4'
   });
   const labelRef = useRef(null);
-  const [labelWidth, setLabelWidth] = useState(getNotchedComputedWidthForWidth(placeholder.length * ROUGH_WIDTH_PER_CHARACTER));
   const shouldMerge = !isFocused && !isHovered;
-  useEffect(() => {
-    if (labelRef.current) {
-      setLabelWidth(labelRef.current.offsetWidth);
-    }
-  }, [placeholder]);
-  const notchedWidth = getNotchedComputedWidthForWidth(labelWidth);
   return _jsxs(Box, {
     position: "relative",
     width: "full",
@@ -79,12 +69,14 @@ export const NotchedBase = _ref => {
           [styles.bordersAttach.flatCorners.TOP_LEFT]: attach === 'LEFT' || attach === 'TOP' || attach === 'ALL',
           [styles.bordersAttach.flatCorners.BOTTOM_LEFT]: attach === 'LEFT' || attach === 'BOTTOM' || attach === 'ALL'
         })
-      }), _jsx("div", {
+      }), _jsxs("div", {
         className: clsx(styles.borders.middle, borderColourClassName),
-        style: {
-          width: isEmpty ? 0 : notchedWidth
-        },
-        children: _jsx(Box, {
+        children: [_jsx(Box, {
+          display: isEmpty || placeholder.length === 0 ? 'none' : 'block',
+          paddingX: "2",
+          className: [labelStyles, styles.notchGapPlaceholder],
+          children: placeholder
+        }), _jsx(Box, {
           ref: labelRef,
           is: "label",
           pointerEvents: "none",
@@ -103,7 +95,7 @@ export const NotchedBase = _ref => {
             [styles.placeholderPlacement[size].shifted]: !isEmpty
           }),
           children: placeholder
-        })
+        })]
       }), _jsx("div", {
         className: clsx(styles.borders.trailing, borderColourClassName, borderColourClassName, {
           [styles.bordersMerged.complete.RIGHT]: shouldMerge && borderMerged === 'RIGHT',
@@ -116,7 +108,4 @@ export const NotchedBase = _ref => {
       })]
     })]
   });
-};
-function getNotchedComputedWidthForWidth(width) {
-  return Math.round((width * ACTIVE_SCALING_FACTOR + ACTIVE_PADDING_ADDED) * 100) / 100;
-}
+};

package/package.json

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