@westpac/ui 0.48.0 → 0.50.0

package/src/components/date-picker-beta/date-picker.types.ts

@@ -0,0 +1,40 @@
+import { HTMLAttributes } from 'react';
+import { DateValue } from 'react-aria';
+import { DatePickerStateOptions } from 'react-stately';
+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'> & {
+    /**
+     * 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.
+     */
+    bottomSheetView?: boolean | Partial<Record<Breakpoint | 'initial', boolean>>;
+
+    /**
+     * An array of numbers representing the days of the week to disable.
+     * For example, to disable Monday, Wednesday, and Saturday: [0, 2, 5].
+     */
+    disableDaysOfWeek?: number[];
+
+    /**
+     * If true, disables selection of weekend days (Saturday and Sunday).
+     */
+    disableWeekends?: boolean;
+
+    /**
+     * Separator character used in the date field. Defaults to "/".
+     */
+    separator?: string;
+    /**
+     * portal container for date picker
+     */
+    portalContainer?: Element;
+  };

package/src/components/date-picker-beta/index.ts

@@ -0,0 +1,2 @@
+export { DatePickerBeta } from './date-picker.component.js';
+export { type DatePickerBetaProps } from './date-picker.types.js';

package/src/components/index.ts

@@ -17,6 +17,7 @@ export * from './switch/index.js';
 export * from './progress-bar/index.js';
 export * from './link/index.js';
 export * from './date-picker/index.js';
+export * from './date-picker-beta/index.js';
 export * from './grid/index.js';
 export * from './table/index.js';
 export * from './panel/index.js';

package/src/components/input-group/input-group.component.tsx

@@ -32,6 +32,10 @@ export function InputGroup({
   tag: Tag = 'div',
   className,
   width = 'full',
+  id: propID,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
+  'aria-label': ariaLabel,
   ...props
 }: InputGroupProps) {
   const _id = useId();
@@ -87,13 +91,15 @@ export function InputGroup({
       if (isValidElement(child)) {
         return cloneElement(child, {
           size,
-          id,
-          'aria-describedby': ariaDescribedByValue,
+          id: propID || id,
+          'aria-labelledby': ariaLabelledBy,
+          'aria-describedby': ariaDescribedBy || ariaDescribedByValue,
+          'aria-label': ariaLabel,
           ...(width !== 'full' ? { width: width } : {}),
         } as Partial<unknown> & Attributes);
       }
     });
-  }, [children, size, id, ariaDescribedByValue, width]);
+  }, [children, size, propID, id, ariaLabelledBy, ariaDescribedBy, ariaDescribedByValue, ariaLabel, width]);
 
   const isFieldset = useMemo(() => Tag === 'fieldset', [Tag]);
 

package/src/components/input-group/input-group.styles.ts

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'group m-0 mb-5 border-none p-0',
+      base: 'group m-0 border-none p-0',
       input: 'relative flex',
     },
     variants: {

package/src/components/input-group/input-group.types.ts

@@ -68,4 +68,20 @@ export type InputGroupProps = {
    * width of input
    */
   width?: InputProps['width'];
+  /**
+   * id
+   */
+  id?: string;
+  /**
+   * aria-labelledby
+   */
+  'aria-labelledby'?: string;
+  /**
+   * aria-describedby
+   */
+  'aria-describedby'?: string;
+  /**
+   * aria-label
+   */
+  'aria-label'?: string;
 };

package/src/tailwind/tailwind-plugin.ts

@@ -129,6 +129,24 @@ export const WestpacUIKitBasePlugin = plugin.withOptions(
                 transform: 'translateY(0)',
               },
             },
+            fadeInUp: {
+              '0%': {
+                opacity: '0',
+                transform: 'translateY(10vh)',
+              },
+              '100%': {
+                opacity: '1',
+                transform: 'translateY(0)',
+              },
+            },
+            slideUp: {
+              '0%': {
+                transform: 'translateY(100%)',
+              },
+              '100%': {
+                transform: 'translateY(0)',
+              },
+            },
             maxHeightIn: {
               '0%': { maxHeight: '0' },
             },
@@ -137,6 +155,8 @@ export const WestpacUIKitBasePlugin = plugin.withOptions(
             skeleton: 'waveLines 2s infinite ease-out',
             fadeIn: 'fadeIn 0.2s ease',
             fadeInDown: 'fadeInDown 0.4s ease',
+            fadeInUp: 'fadeInUp 0.4s ease',
+            slideUp: 'slideUp 0.4s ease',
             maxHeightIn: 'maxHeightIn 0.4s ease',
           },
           boxShadow: {