@autoguru/overdrive 4.47.1 → 4.47.2

package/dist/components/DatePicker/DatePicker.css.d.ts

@@ -2,5 +2,5 @@ export declare const inputContainer: string;
 export declare const input: string;
 export declare const inputOverlay: string;
 export declare const contents: Record<"default" | "withLabel", string>;
-export declare const disabled: Record<"default" | "root", string>;
+export declare const disabled: Record<"cursor" | "native", string>;
 //# sourceMappingURL=DatePicker.css.d.ts.map

package/dist/components/DatePicker/DatePicker.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DatePicker/DatePicker.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,cAAc,QAOzB,CAAC;AAEH,eAAO,MAAM,KAAK,QAsBhB,CAAC;AAEH,eAAO,MAAM,YAAY,QAQvB,CAAC;AAEH,eAAO,MAAM,QAAQ,yCAmBnB,CAAC;AAEH,eAAO,MAAM,QAAQ,oCAenB,CAAC"}
+{"version":3,"file":"DatePicker.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DatePicker/DatePicker.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,cAAc,QAOzB,CAAC;AAEH,eAAO,MAAM,KAAK,QAsBhB,CAAC;AAEH,eAAO,MAAM,YAAY,QAQvB,CAAC;AAEH,eAAO,MAAM,QAAQ,yCAmBnB,CAAC;AAEH,eAAO,MAAM,QAAQ,qCAenB,CAAC"}

package/dist/components/DatePicker/DatePicker.css.js

@@ -66,14 +66,14 @@ export const contents = styleVariants({
   }
 }, "contents");
 export const disabled = styleVariants({
-  default: {
+  cursor: {
     '@layer': {
       [cssLayerComponent]: {
         cursor: 'not-allowed'
       }
     }
   },
-  root: {
+  native: {
     '@layer': {
       [cssLayerComponent]: {
         opacity: '0.3'

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,5 +1,6 @@
 import { IconType } from '@autoguru/icons';
 import React from 'react';
+import type { AriaPopoverProps } from 'react-aria';
 import type { TestIdProp } from '../../types';
 import { type CalendarProps } from '../Calendar';
 type SizeScale = 'small' | 'medium' | 'large';
@@ -38,6 +39,10 @@ export interface DatePickerProps extends TestIdProp {
      */
     name?: string;
     onChange(date: string): void;
+    /**
+     * Calendar popover placement relative to the trigger ('bottom left', 'top', etc.)
+     */
+    placement?: AriaPopoverProps['placement'];
     /**
      * Visual size of the picker control (small, medium, large)
      */

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../lib/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAQzD,OAAO,KAMN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAS3D,KAAK,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9C,QAAA,MAAM,cAAc;;CAEV,CAAC;AAEX,KAAK,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5E,MAAM,WAAW,eAAgB,SAAQ,UAAU;IAClD;;OAEG;IACH,eAAe,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;CACvB;AAqBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,eAAO,MAAM,UAAU,0FAqLtB,CAAC"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../lib/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAQzD,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAInD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAS3D,KAAK,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9C,QAAA,MAAM,cAAc;;CAEV,CAAC;AAEX,KAAK,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5E,MAAM,WAAW,eAAgB,SAAQ,UAAU;IAClD;;OAEG;IACH,eAAe,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC1C;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;CACvB;AAqBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,eAAO,MAAM,UAAU,0FAqLtB,CAAC"}

package/dist/components/DatePicker/DatePicker.js

@@ -2,13 +2,13 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["calendarOptions", "className", "defaultValue", "disabled", "icon", "isLoading", "lang", "onChange", "size", "testId", "useNativePicker", "value", "valueLabel"];
+const _excluded = ["calendarOptions", "className", "defaultValue", "disabled", "icon", "isLoading", "lang", "onChange", "placement", "size", "testId", "useNativePicker", "value", "valueLabel"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { CalendarIcon } from '@autoguru/icons';
 import { getLocalTimeZone, parseDate, today } from '@internationalized/date';
 import clsx from 'clsx';
-import React, { useEffect, useMemo, useState, forwardRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useState, forwardRef } from 'react';
 import { elementStyles } from "../../styles/elementStyles.js";
 import { sprinkles } from "../../styles/sprinkles.css.js";
 import { Calendar } from "../Calendar/index.js";
@@ -101,6 +101,7 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       isLoading = false,
       lang,
       onChange,
+      placement = 'bottom left',
       size = 'medium',
       testId,
       useNativePicker = false,
@@ -134,12 +135,6 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       onChange(dateString);
     }
   };
-  const containerStyle = elementStyles({
-    className: [className, {
-      [styles.disabled.default]: disabled,
-      [styles.disabled.root]: disabled
-    }]
-  });
   const indicator = isLoading ? /*#__PURE__*/_jsx(ProgressSpinner, {
     size: size
   }) : /*#__PURE__*/_jsx(Icon, {
@@ -147,37 +142,40 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     size: size
   });
   const label = valueLabel ? /*#__PURE__*/_jsx(Text, {
+    colour: !useNativePicker && disabled ? 'muted' : undefined,
     size: textSizeMap[size],
     children: valueLabel
   }) : null;
-  const calendarProps = useMemo(() => ({
-    calendarOptions: _objectSpread(_objectSpread({}, isControlled ? {
+  const handleCalendarChange = useCallback(date => {
+    setSelectedDate(date);
+    if (typeof onChange === 'function') {
+      onChange(formatDateToString(date));
+    }
+    // Close the popover after date selection
+    if (popoverState) {
+      popoverState.close();
+    }
+  }, [onChange, popoverState]);
+  const calendarProps = useMemo(() => _objectSpread(_objectSpread({
+    calendarOptions: _objectSpread({}, isControlled ? {
       value: selectedDate || today(getLocalTimeZone())
     } : {
       defaultValue: selectedDate || today(getLocalTimeZone())
-    }), calendarOptions),
-    onChange: date => {
-      setSelectedDate(date);
-      if (typeof onChange === 'function') {
-        onChange(formatDateToString(date));
-      }
-      // Close the popover after date selection
-      if (popoverState) {
-        popoverState.close();
-      }
-    }
-  }), [selectedDate, calendarOptions, onChange, popoverState, isControlled]);
+    })
+  }, calendarOptions), {}, {
+    onChange: handleCalendarChange
+  }), [selectedDate, calendarOptions, handleCalendarChange, isControlled]);
   const contentCalendar = useMemo(() => /*#__PURE__*/_jsx(Calendar, _objectSpread({}, calendarProps)), [calendarProps]);
 
   // Use native picker only if explicitly requested
   if (useNativePicker) {
     return /*#__PURE__*/_jsxs("div", {
-      className: clsx(containerStyle, styles.inputContainer),
+      className: clsx(className, styles.inputContainer, disabled && styles.disabled.native),
       children: [/*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, inputProps), {}, {
         ref: ref,
         className: elementStyles({
           className: [styles.input, {
-            [styles.disabled.default]: disabled
+            [styles.disabled.cursor]: disabled
           }]
         }),
         type: "date",
@@ -195,21 +193,24 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     });
   }
   return /*#__PURE__*/_jsxs("div", {
-    className: clsx(containerStyle, sprinkles({
-      display: 'flex',
-      alignItems: 'center',
-      gap: '1'
-    })),
+    className: className,
     children: [/*#__PURE__*/_jsxs(PopoverTrigger, {
       content: contentCalendar,
-      placement: "bottom left",
+      placement: placement,
       testId: testId,
       isDisabled: disabled,
       onStateReady: setPopoverState,
-      children: [indicator, /*#__PURE__*/_jsx(VisuallyHidden, {
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: sprinkles({
+          display: 'flex',
+          alignItems: 'center',
+          gap: '1'
+        }),
+        children: [indicator, label]
+      }), /*#__PURE__*/_jsx(VisuallyHidden, {
         children: (_lang$openCalendar = lang === null || lang === void 0 ? void 0 : lang.openCalendar) !== null && _lang$openCalendar !== void 0 ? _lang$openCalendar : defaultEnglish.openCalendar
       })]
-    }), label, /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, inputProps), {}, {
+    }), /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, inputProps), {}, {
       ref: ref,
       value: formatDateToString(selectedDate),
       type: "hidden"

package/dist/components/Popover/Popover.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Popover/Popover.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,QAiBvB,CAAC;AAEH,eAAO,MAAM,YAAY,QASvB,CAAC;AAEH,eAAO,MAAM,eAAe,QAW1B,CAAC"}
+{"version":3,"file":"Popover.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Popover/Popover.css.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,YAAY,QAiBvB,CAAC;AAEH,eAAO,MAAM,YAAY,QAcvB,CAAC;AAEH,eAAO,MAAM,eAAe,QAY1B,CAAC"}

package/dist/components/Popover/Popover.css.js

@@ -4,6 +4,7 @@ import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/Popover/Popover.css.ts", "@autoguru/overdrive");
 import { style } from '@vanilla-extract/css';
 import { cssLayerComponent } from "../../styles/layers.css.js";
+import { selectors } from "../../styles/selectors.js";
 import { sprinkles } from "../../styles/sprinkles.css.js";
 import { overdriveTokens as tokens } from "../../themes/theme.css.js";
 export const overlayStyle = style([sprinkles({
@@ -27,7 +28,12 @@ export const triggerStyle = style({
       background: 'transparent',
       border: 'none',
       cursor: 'pointer',
-      padding: 0
+      padding: 0,
+      selectors: {
+        [selectors.disabled]: {
+          cursor: 'not-allowed'
+        }
+      }
     }
   }
 }, "triggerStyle");
@@ -39,7 +45,8 @@ export const fullScreenStyle = style({
       left: 0,
       position: 'fixed',
       right: 0,
-      top: 0
+      top: 0,
+      zIndex: 3
     }
   }
 }, "fullScreenStyle");

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.47.1",
+	"version": "4.47.2",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",
@@ -79,7 +79,7 @@
 		"@babel/preset-react": "7.27.1",
 		"@babel/preset-typescript": "7.27.1",
 		"@babel/runtime-corejs3": "7.28.4",
-		"@changesets/cli": "2.29.6",
+		"@changesets/cli": "2.29.7",
 		"@chromatic-com/storybook": "4.1.1",
 		"@internationalized/date": "3.9.0",
 		"@octokit/rest": "22.0.0",
@@ -96,8 +96,8 @@
 		"@testing-library/react": "16.3.0",
 		"@testing-library/react-hooks": "8.0.1",
 		"@testing-library/user-event": "14.6.1",
-		"@types/node": "24.3.1",
-		"@types/react": "19.1.12",
+		"@types/node": "24.4.0",
+		"@types/react": "19.1.13",
 		"@types/react-dom": "19.1.9",
 		"@types/webpack-env": "1.18.8",
 		"@typescript-eslint/utils": "8.41.0",
@@ -139,8 +139,8 @@
 		"prop-types": "15.8.1",
 		"rand-seed": "3.0.0",
 		"react": "19.1.1",
-		"react-aria": "3.43.1",
-		"react-aria-components": "1.12.1",
+		"react-aria": "3.43.2",
+		"react-aria-components": "1.12.2",
 		"react-dom": "19.1.1",
 		"react-focus-lock": "2.13.6",
 		"react-intersection-observer": "9.16.0",