@autoguru/overdrive 4.3.6 → 4.4.2

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

@@ -1,15 +1,5 @@
 import { style, styleVariants } from '@vanilla-extract/css';
 import { vars } from '../../../themes/base/vars.css';
-const iconRoot = style({
-    top: '50%',
-    transform: 'translate3d(0, -50%, 0)',
-    transition: `color 0.2s ${vars.animation.easing.decelerate} 0s`,
-    margin: `0 calc(${vars.space['3']} - 1px)`,
-});
-export const icon = {
-    prefix: [iconRoot, style({ left: 0 })],
-    suffix: [iconRoot, style({ right: 0 })],
-};
 export const input = {
     itself: styleVariants({
         root: {
@@ -17,10 +7,6 @@ export const input = {
             alignSelf: 'flex-end',
             background: 'transparent',
             outline: 'none',
-            fontSize: vars.typography.size['4'].fontSize,
-            lineHeight: vars.typography.size['4'].lineHeight,
-            height: vars.space['8'],
-            padding: `calc(((${vars.space['8']} - ${vars.typography.size['4'].fontSize}) / 2) - 3px) calc(${vars.space['4']} - 1px)`,
             selectors: {
                 '&[disabled]': {
                     color: vars.typography.colour.muted,
@@ -34,12 +20,6 @@ export const input = {
                 },
             },
         },
-        prefixed: {
-            paddingLeft: `calc((${vars.space['3']} - 1px) + (${vars.space['4']} - 1px) + ${vars.space[4]})`,
-        },
-        suffixed: {
-            paddingRight: `calc((${vars.space['3']} - 1px) + (${vars.space['4']} - 1px) + ${vars.space[4]})`,
-        },
     }),
 };
 const textAreaHeight = '107px';
@@ -51,3 +31,92 @@ export const types = styleVariants({
         resize: 'vertical',
     },
 });
+export const inputWrapperSize = {
+    small: {
+        root: styleVariants({
+            textarea: {
+                paddingTop: `${vars.space['2']}`,
+            },
+        }),
+    },
+    medium: {
+        root: styleVariants({
+            textarea: {
+                paddingTop: `${vars.space['2']}`,
+            },
+        }),
+    },
+};
+export const inputItselfSize = {
+    small: {
+        root: styleVariants({
+            any: {
+                fontSize: vars.typography.size['3'].fontSize,
+                lineHeight: vars.typography.size['3'].lineHeight,
+                padding: `${vars.space['2']}`,
+            },
+            textarea: {
+                padding: `0 ${vars.space['2']} ${vars.space['2']}`,
+            },
+        }),
+        prefixed: styleVariants({
+            any: {
+                paddingLeft: `calc(${vars.space['2']} + ${vars.space['5']} + ${vars.space['2']})`,
+            },
+            textarea: {
+                paddingLeft: `calc(${vars.space['2']} + ${vars.space['5']} + ${vars.space['2']})`,
+            },
+        }),
+        suffixed: styleVariants({
+            any: {
+                paddingRight: `calc(${vars.space['2']} + ${vars.space['5']} + ${vars.space['2']})`,
+            },
+            textarea: {
+                paddingRight: `calc(${vars.space['2']} + ${vars.space['5']} + ${vars.space['2']})`,
+            },
+        }),
+    },
+    medium: {
+        root: styleVariants({
+            any: {
+                fontSize: vars.typography.size['4'].fontSize,
+                lineHeight: vars.typography.size['4'].lineHeight,
+                height: vars.space['8'],
+                padding: `calc(((${vars.space['8']} - ${vars.typography.size['4'].fontSize}) / 2) - 3px) calc(${vars.space['4']} - 1px)`,
+            },
+            textarea: {
+                padding: `${vars.space['1']} calc(${vars.space['4']} - 1px) calc(((${vars.space['8']} - ${vars.typography.size['4'].fontSize}) / 2) - 3px)`,
+            },
+        }),
+        prefixed: styleVariants({
+            any: {
+                paddingLeft: `calc((${vars.space['3']} - 1px) + (${vars.space['4']} - 1px) + ${vars.space[4]})`,
+            },
+        }),
+        suffixed: styleVariants({
+            any: {
+                paddingRight: `calc((${vars.space['3']} - 1px) + (${vars.space['4']} - 1px) + ${vars.space[4]})`,
+            },
+        }),
+    },
+};
+export const iconRoot = style({
+    zIndex: 1,
+    top: '50%',
+    transform: 'translate3d(0, -50%, 0)',
+    transition: `color 0.2s ${vars.animation.easing.decelerate} 0s`,
+});
+export const prefixIcon = style({
+    left: 0,
+});
+export const suffixIcon = style({
+    right: 0,
+});
+export const iconSize = styleVariants({
+    small: {
+        margin: `0 ${vars.space['2']}`,
+    },
+    medium: {
+        margin: `0 calc(${vars.space['3']} - 1px)`,
+    },
+});

package/dist/components/private/InputBase/withEnhancedInput.d.ts

@@ -1,6 +1,7 @@
 import { IconType } from '@autoguru/icons';
 import * as React from 'react';
 import { AriaAttributes, ChangeEventHandler, ComponentType, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, MutableRefObject, ReactNode, Ref } from 'react';
+import * as styles from './withEnhancedInput.css';
 export interface EventHandlers<PrimitiveElementType> {
     onChange?: ChangeEventHandler<PrimitiveElementType>;
     onBlur?: FocusEventHandler<PrimitiveElementType>;
@@ -22,6 +23,7 @@ export interface EnhanceInputPrimitiveProps extends AriaAttributes {
     disabled?: boolean;
     notch?: boolean;
     reserveHintSpace?: boolean;
+    size?: keyof typeof styles.inputItselfSize;
     fieldIcon?: IconType;
     prefixIcon?: IconType;
     suffixIcon?: IconType;
@@ -35,9 +37,10 @@ export interface ValidationProps {
 }
 export declare type EnhanceInputProps<IncomingProps, PrimitiveElementType> = IncomingProps & EnhanceInputPrimitiveProps & EventHandlers<PrimitiveElementType> & ValidationProps;
 export declare type WrappedComponentProps<IncomingProps, PrimitiveElementType> = {
+    size: keyof typeof styles.inputItselfSize;
     validation: ValidationProps;
     eventHandlers: EventHandlers<PrimitiveElementType>;
-    field: Omit<EnhanceInputPrimitiveProps, 'placeholder' | 'hintText' | 'fieldIcon'> & {
+    field: Omit<EnhanceInputPrimitiveProps, 'placeholder' | 'hintText' | 'fieldIcon' | 'size'> & {
         ref: MutableRefObject<PrimitiveElementType>;
     };
     fieldIcon?: EnhanceInputPrimitiveProps['fieldIcon'];

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

@@ -1 +1 @@
-{"version":3,"file":"withEnhancedInput.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/withEnhancedInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"withEnhancedInput.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/withEnhancedInput.tsx"],"names":[],"mappings":"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"}

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

@@ -10,7 +10,7 @@ import { HintText } from './HintText';
 import * as inputStateStyles from './InputState.css';
 import { NotchedBase } from './NotchedBase';
 import * as styles from './withEnhancedInput.css';
-export const withEnhancedInput = (WrappingComponent, { primitiveType = 'text', withPrefixIcon = true, withSuffixIcon = true, } = { primitiveType: 'text' }) => forwardRef(({ placeholder, name, id = name, hintText, disabled = false, className, isTouched, isValid, isLoading = false, notch = true, reserveHintSpace = false, value: incomingValue = '', onChange: incomingOnChange, onReset, onMouseLeave, onMouseEnter, onBlur, onFocus, onKeyDown, prefixIcon, suffixIcon, wrapperRef, autoFocus, ...rest }, ref) => {
+export const withEnhancedInput = (WrappingComponent, { primitiveType = 'text', withPrefixIcon = true, withSuffixIcon = true, } = { primitiveType: 'text' }) => forwardRef(({ placeholder, name, id = name, hintText, disabled = false, className, isTouched, isValid, isLoading = false, notch = true, reserveHintSpace = false, size = 'medium', value: incomingValue = '', onChange: incomingOnChange, onReset, onMouseLeave, onMouseEnter, onBlur, onFocus, onKeyDown, prefixIcon, suffixIcon, wrapperRef, autoFocus, ...rest }, ref) => {
     invariant(!(prefixIcon && !withPrefixIcon), 'prefix icon is not supported for this component');
     invariant(!(suffixIcon && !withSuffixIcon), 'suffix icon is not supported for this component');
     const [value, onChange] = useInputControlledState(incomingValue, incomingOnChange);
@@ -29,15 +29,18 @@ export const withEnhancedInput = (WrappingComponent, { primitiveType = 'text', w
         width: 'full',
         position: 'relative',
         display: 'flex',
-    }), styles.types[primitiveType], styles.input.itself.root, {
-        [styles.input.itself.prefixed]: Boolean(prefixIcon),
-        [styles.input.itself.suffixed]: Boolean(suffixIcon || isLoading),
+    }), styles.input.itself.root, styles.types[primitiveType], styles.inputItselfSize[size].root.any, styles.inputItselfSize[size].root[primitiveType], {
+        [styles.inputItselfSize[size].prefixed.any]: Boolean(prefixIcon),
+        [styles.inputItselfSize[size].prefixed[primitiveType]]: Boolean(prefixIcon),
+        [styles.inputItselfSize[size].suffixed.any]: Boolean(suffixIcon || isLoading),
+        [styles.inputItselfSize[size].suffixed[primitiveType]]: Boolean(suffixIcon || isLoading),
     });
     const wrappingComponent = {
         validation: {
             isTouched,
             isValid,
         },
+        size,
         eventHandlers: {
             onChange: wrapEvent((event) => {
                 if (disabled) {
@@ -80,13 +83,13 @@ export const withEnhancedInput = (WrappingComponent, { primitiveType = 'text', w
         position: 'absolute',
     });
     return (React.createElement(Box, { width: "full", className: className, onMouseEnter: onMouseOver, onMouseLeave: onMouseOut },
-        React.createElement(NotchedBase, { id: id, prefixed: Boolean(prefixIcon), isEmpty: isEmpty, disabled: disabled, notch: notch, placeholder: placeholder, placeholderColourClassName: clsx({
+        React.createElement(NotchedBase, { id: id, prefixed: Boolean(prefixIcon), isEmpty: isEmpty, size: size, disabled: disabled, notch: notch, placeholder: placeholder, placeholderColourClassName: clsx({
                 [derivedColours.colour]: !isEmpty,
             }), borderColourClassName: derivedColours.borderColour },
-            React.createElement(Box, { ref: wrapperRef, width: "full", height: "full" },
-                prefixIcon ? (React.createElement(Icon, { icon: prefixIcon, size: "medium", className: clsx(iconStyles, styles.icon.prefix, derivedColours.colour) })) : null,
-                isLoading ? (React.createElement(ProgressSpinner, { className: clsx(iconStyles, styles.icon.suffix, derivedColours.colour) })) : null,
-                suffixIcon && !isLoading ? (React.createElement(Icon, { icon: suffixIcon, size: "medium", className: clsx(iconStyles, styles.icon.suffix, derivedColours.colour) })) : null,
+            React.createElement(Box, { ref: wrapperRef, className: styles.inputWrapperSize[size].root[primitiveType], width: "full", height: "full" },
+                prefixIcon ? (React.createElement(Icon, { icon: prefixIcon, size: "medium", className: clsx(iconStyles, styles.iconRoot, styles.prefixIcon, styles.iconSize[size], derivedColours.colour) })) : null,
+                isLoading ? (React.createElement(ProgressSpinner, { className: clsx(iconStyles, styles.iconRoot, styles.suffixIcon, styles.iconSize[size], derivedColours.colour) })) : null,
+                suffixIcon && !isLoading ? (React.createElement(Icon, { icon: suffixIcon, size: "medium", className: clsx(iconStyles, styles.iconRoot, styles.suffixIcon, styles.iconSize[size], derivedColours.colour) })) : null,
                 React.createElement(WrappingComponent, { ...wrappingComponent }))),
         hintText || reserveHintSpace ? (React.createElement(HintText, { className: derivedColours.colour, hintText: hintText, disabled: disabled, reserveHintSpace: reserveHintSpace })) : null));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.3.6",
+	"version": "4.4.2",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",
@@ -40,18 +40,18 @@
 		"@autoguru/icons": "1.7.17",
 		"@autoguru/tsconfig": "1.0.79",
 		"@autoguru/utilities": "1.1.0",
-		"@popperjs/core": "^2.10.2",
+		"@popperjs/core": "2.11.2",
 		"@types/react": "^18.0.9",
 		"@types/react-dom": "^18.0.4",
-		"clsx": "^1.1.1",
-		"colord": "^2.0.1",
-		"csstype": "^3.0.7",
-		"eslint-plugin-jest": "^24.4.0",
+		"clsx": "1.1.1",
+		"colord": "2.9.2",
+		"csstype": "3.0.10",
+		"eslint-plugin-jest": "26.2.2",
 		"react": "^18.1.0",
 		"react-dom": "^18.1.0",
-		"react-focus-lock": "^2.5.0",
-		"react-keyed-flatten-children": "^1.3.0",
-		"webpack": "^5.58.1"
+		"react-focus-lock": "2.8.1",
+		"react-keyed-flatten-children": "1.3.0",
+		"webpack": "5.69.0"
 	},
 	"peerDependencies": {
 		"@autoguru/icons": "^1.7.4",