@westpac/ui 0.55.3 → 0.56.1

package/dist/components/date-picker-beta/components/date-field/components/date-segment/date-segment.component.js

@@ -8,7 +8,6 @@ export function DateSegment({ segment, state, separator, ...props }) {
     const { segmentProps } = useDateSegment(segment, state, ref);
     const styles = dateSegmentStyles({
         isFocusVisible,
-        isPlaceholder: segment.isPlaceholder,
         isSeparator: segmentProps.role !== 'spinbutton'
     });
     return React.createElement("span", {

package/dist/components/date-picker-beta/components/date-field/components/date-segment/date-segment.styles.d.ts

@@ -1,8 +1,4 @@
 export declare const styles: import("tailwind-variants").TVReturnType<{
-    isPlaceholder: {
-        true: string;
-        false: string;
-    };
     isFocusVisible: {
         true: string;
         false: string;
@@ -11,13 +7,9 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "font-light disabled:form-control-disabled focus:focus-outline", {
+}, undefined, "uppercase disabled:form-control-disabled focus:focus-outline", {
     responsiveVariants: string[];
 }, {
-    isPlaceholder: {
-        true: string;
-        false: string;
-    };
     isFocusVisible: {
         true: string;
         false: string;
@@ -27,10 +19,6 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
-    isPlaceholder: {
-        true: string;
-        false: string;
-    };
     isFocusVisible: {
         true: string;
         false: string;
@@ -39,6 +27,6 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "font-light disabled:form-control-disabled focus:focus-outline", {
+}, undefined, "uppercase disabled:form-control-disabled focus:focus-outline", {
     responsiveVariants: string[];
 }, unknown, unknown, undefined>>;

package/dist/components/date-picker-beta/components/date-field/components/date-segment/date-segment.styles.js

@@ -1,17 +1,13 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'font-light disabled:form-control-disabled focus:focus-outline',
+    base: 'uppercase disabled:form-control-disabled focus:focus-outline',
     variants: {
-        isPlaceholder: {
-            true: 'text-text-50 opacity-100',
-            false: ''
-        },
         isFocusVisible: {
             true: 'focus-outline',
             false: ''
         },
         isSeparator: {
-            true: 'px-0.5 text-text-50',
+            true: 'px-0.5 text-text',
             false: ''
         }
     }

package/dist/components/date-picker-beta/components/popover/popover.styles.js

@@ -20,7 +20,7 @@ export const styles = tv({
                 underlay: '',
                 closeButton: 'pointer-events-none absolute right-0 top-0 size-5 -translate-y-1/2 translate-x-1/2 touch-none rounded-full border border-border bg-white opacity-0 focus:pointer-events-auto focus:touch-auto focus:opacity-100',
                 headerLabel: 'hidden',
-                popover: 'absolute mt-1 scale-100 animate-fadeIn rounded border border-border bg-white opacity-100 shadow-[0_5px_10px_rgba(0,0,0,0.2)]'
+                popover: 'absolute my-1 scale-100 animate-fadeIn rounded border border-border bg-white opacity-100 shadow-[0_5px_10px_rgba(0,0,0,0.2)]'
             }
         }
     }

package/dist/components/date-picker-beta/date-picker.component.d.ts

@@ -1,2 +1,2 @@
 import { type DatePickerBetaProps } from './date-picker.types.js';
-export declare function DatePickerBeta({ size, className, bottomSheetView, isDateUnavailable, disableDaysOfWeek, disableWeekends, separator, portalContainer, ...props }: DatePickerBetaProps): import("react/jsx-runtime").JSX.Element;
+export declare function DatePickerBeta({ size, className, bottomSheetView, isDateUnavailable, disableDaysOfWeek, disableWeekends, separator, placement, block, portalContainer, ...props }: DatePickerBetaProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/date-picker-beta/date-picker.component.js

@@ -22,7 +22,7 @@ const BREAKPOINTS_DECRECENT = [
 export function DatePickerBeta({ size = 'medium', className, bottomSheetView = {
     initial: true,
     xsl: false
-}, isDateUnavailable, disableDaysOfWeek, disableWeekends, separator, portalContainer, ...props }) {
+}, isDateUnavailable, disableDaysOfWeek, disableWeekends, separator, placement = 'bottom left', block = false, portalContainer, ...props }) {
     const { locale } = useLocale();
     const enhancedIsDateUnavailable = useMemo(()=>{
         return disableDaysOfWeek || disableWeekends ? (date)=>{
@@ -56,7 +56,8 @@ export function DatePickerBeta({ size = 'medium', className, bottomSheetView = {
     const styles = datePickerStyles({
         size,
         isInvalid: state.isInvalid,
-        isDisabled: props.isDisabled
+        isDisabled: props.isDisabled,
+        block
     });
     const breakpoint = useBreakpoint();
     const ref = useRef(null);
@@ -106,7 +107,7 @@ export function DatePickerBeta({ size = 'medium', className, bottomSheetView = {
         showAsBottomSheet: showAsBottomSheet,
         state: state,
         triggerRef: ref,
-        placement: "bottom left"
+        placement: placement
     }, React.createElement(Dialog, dialogProps, React.createElement(Calendar, {
         ...calendarProps,
         firstDayOfWeek: props.firstDayOfWeek

package/dist/components/date-picker-beta/date-picker.styles.d.ts

@@ -17,6 +17,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             button: string;
         };
     };
+    block: {
+        true: {
+            input: string;
+        };
+    };
     isInvalid: {
         true: {
             input: string;
@@ -53,6 +58,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             button: string;
         };
     };
+    block: {
+        true: {
+            input: string;
+        };
+    };
     isInvalid: {
         true: {
             input: string;
@@ -87,6 +97,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             button: string;
         };
     };
+    block: {
+        true: {
+            input: string;
+        };
+    };
     isInvalid: {
         true: {
             input: string;

package/dist/components/date-picker-beta/date-picker.styles.js

@@ -7,20 +7,25 @@ export const styles = tv({
     variants: {
         size: {
             small: {
-                input: 'form-control-small gap-1.5',
-                button: '-my-0.5 -mr-1.5 mb-[-0.25rem] min-h-5 py-[0.25rem]'
+                input: 'form-control-small max-h-5 gap-1.5',
+                button: '-mr-1.5 min-h-[1.75rem]'
             },
             medium: {
-                input: 'form-control-medium gap-2',
-                button: 'my-[-0.3125rem] -mr-2 min-h-6 py-[0.3125rem]'
+                input: 'form-control-medium max-h-6 gap-2',
+                button: '-mr-2 min-h-[2.125rem]'
             },
             large: {
-                input: 'form-control-large gap-2.5',
-                button: 'my-[-0.5rem] -mr-2.5 min-h-7 py-[0.5rem]'
+                input: 'form-control-large max-h-7 gap-2.5',
+                button: '-mr-2.5 min-h-[2.5rem]'
             },
             xlarge: {
-                input: 'form-control-xlarge gap-3',
-                button: '-my-1.5 -mr-3 mb-[-0.625rem] min-h-8 py-1.5'
+                input: 'form-control-xlarge max-h-8 gap-3',
+                button: '-mr-3 min-h-[2.875rem]'
+            }
+        },
+        block: {
+            true: {
+                input: 'w-full justify-between gap-0'
             }
         },
         isInvalid: {

package/dist/components/date-picker-beta/date-picker.types.d.ts

@@ -5,7 +5,12 @@ import { VariantProps } from 'tailwind-variants';
 import { Breakpoint } from '../../tailwind/constants/index.js';
 import { styles } from './date-picker.styles.js';
 type Variants = VariantProps<typeof styles>;
-export type DatePickerBetaProps<T extends DateValue = DateValue> = DatePickerStateOptions<T> & Variants & Omit<HTMLAttributes<HTMLDivElement>, 'invalid'> & {
+export type DatePickerBetaProps<T extends DateValue = DateValue> = DatePickerStateOptions<T> & Omit<Variants, 'block'> & Omit<HTMLAttributes<HTMLDivElement>, 'invalid'> & {
+    /**
+     * Allows the input to take the full width of its container.
+     * @default false
+     */
+    block?: boolean;
     /**
      * Determines whether to display the component as a bottom sheet view.
      * Can also accept an object to conditionally enable the bottom sheet based on breakpoints.
@@ -24,6 +29,11 @@ export type DatePickerBetaProps<T extends DateValue = DateValue> = DatePickerSta
      * Separator character used in the date field. Defaults to "/".
      */
     separator?: string;
+    /**
+     * Placement for the datepicker popover.
+     * @default "bottom left"
+     */
+    placement?: 'top left' | 'top right' | 'bottom left' | 'bottom right';
     /**
      * portal container for date picker
      */