@autoguru/overdrive 4.26.0 → 4.26.2

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

@@ -1,9 +1,7 @@
 import { IconType } from '@autoguru/icons';
-import * as React from 'react';
-import { ComponentProps, ReactNode } from 'react';
+import { ComponentProps, FunctionComponent, ReactNode } from 'react';
 import { Button } from '../Button';
 import { Flyout } from '../Flyout';
-import { EPositionerAlignment } from '../Positioner';
 type ButtonProps = Omit<ComponentProps<typeof Button>, 'is' | 'children' | 'onClick'>;
 type FlyoutProps = Pick<ComponentProps<typeof Flyout>, 'alignment'>;
 export interface Props extends ButtonProps, FlyoutProps {
@@ -13,14 +11,6 @@ export interface Props extends ButtonProps, FlyoutProps {
     isOpen?: boolean;
     onClick?: ComponentProps<typeof Button>['onClick'];
 }
-export declare const DropDown: ({ children: options, label, icon, alignment, isOpen: incomingIsOpen, onClick: incomingOnClick, ...buttonProps }: {
-    [x: string]: any;
-    children: any;
-    label: any;
-    icon?: React.ReactElement<React.SVGAttributes<SVGElement>, "svg"> | undefined;
-    alignment?: EPositionerAlignment | undefined;
-    isOpen: any;
-    onClick: any;
-}) => JSX.Element;
+export declare const DropDown: FunctionComponent<Props>;
 export default DropDown;
 //# sourceMappingURL=DropDown.d.ts.map

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;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,cAAc,EAEd,SAAS,EAIT,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAGnC,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAIrD,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;;;;;;;;iBAsCpB,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/DropDown/DropDown.js

@@ -23,7 +23,7 @@ export const DropDown = _ref => {
       label,
       icon = ChevronDownIcon,
       alignment = EPositionerAlignment.BOTTOM_LEFT,
-      isOpen: incomingIsOpen,
+      isOpen: incomingIsOpen = false,
       onClick: incomingOnClick
     } = _ref,
     buttonProps = _objectWithoutProperties(_ref, _excluded);

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.0",
+	"version": "4.26.2",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",