@westpac/ui 0.54.0 → 0.55.1

package/dist/components/button-dropdown/button-dropdown.component.d.ts

@@ -1,2 +1,2 @@
 import { type ButtonDropdownProps } from './button-dropdown.types.js';
-export declare function ButtonDropdown({ className, dropdownSize, iconBefore: IconBefore, open, text, children, size, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelBy, look, soft, block, dropDownIcon: Icon, shouldFlip, }: ButtonDropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonDropdown({ className, dropdownSize, iconBefore: IconBefore, open, text, children, size, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelBy, look, soft, block, dropDownIcon: Icon, placement, shouldFlip, }: ButtonDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/button-dropdown/button-dropdown.component.js

@@ -6,7 +6,7 @@ import { Button } from '../button/index.js';
 import { DropDownIcon } from '../icon/index.js';
 import { styles as buttonDropdownStyles } from './button-dropdown.styles.js';
 import { ButtonDropdownPanel } from './components/button-dropdown-panel/button-dropdown-panel.component.js';
-export function ButtonDropdown({ className, dropdownSize = 'medium', iconBefore: IconBefore, open = false, text, children, size, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelBy, look = 'hero', soft = false, block = false, dropDownIcon: Icon = DropDownIcon, shouldFlip }) {
+export function ButtonDropdown({ className, dropdownSize = 'medium', iconBefore: IconBefore, open = false, text, children, size, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelBy, look = 'hero', soft = false, block = false, dropDownIcon: Icon = DropDownIcon, placement = 'bottom start', shouldFlip }) {
     const ref = useRef(null);
     const panelId = useId();
     const styles = buttonDropdownStyles({
@@ -54,7 +54,7 @@ export function ButtonDropdown({ className, dropdownSize = 'medium', iconBefore:
         className: styles.panel({
             className
         }),
-        placement: "bottom start",
+        placement: placement,
         triggerRef: ref,
         state: state,
         block: block,

package/dist/components/button-dropdown/button-dropdown.types.d.ts

@@ -1,4 +1,5 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { Placement } from 'react-aria';
 import { type VariantProps } from 'tailwind-variants';
 import { ButtonProps } from '../button/index.js';
 import { IconProps } from '../icon/icon.types.js';
@@ -22,6 +23,10 @@ export type ButtonDropdownProps = {
      * State of whether the Popover is open
      */
     open?: boolean;
+    /**
+     * placement of the popover
+     */
+    placement?: Placement;
     /**
      * Soft look button
      */

package/dist/components/modal/components/modal-dialog/components/modal-dialog-body/modal-dialog-body.component.js

@@ -1,4 +1,5 @@
 'use client';
+import React from 'react';
 import { useModalDialogContext } from '../../modal-dialog.component.js';
 import { styles as modalBodyStyles } from './modal-dialog-body.styles.js';
 export function ModalDialogBody({ className, children, ...props }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.54.0",
+  "version": "0.55.1",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -205,18 +205,19 @@
     "!**/*.{test,spec,stories}.{ts,tsx,js,jsx}"
   ],
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.0.1",
+    "@chromatic-com/storybook": "^4.1.3",
     "@eslint/eslintrc": "~3.3.1",
     "@eslint/js": "~9.30.0",
     "@react-types/accordion": "3.0.0-alpha.14",
     "@react-types/combobox": "~3.13.6",
     "@react-types/shared": "~3.30.0",
     "@react-types/tabs": "~3.3.16",
-    "@storybook/addon-a11y": "9.0.17",
-    "@storybook/addon-docs": "9.0.17",
-    "@storybook/addon-links": "9.0.17",
-    "@storybook/addon-themes": "~9.0.17",
-    "@storybook/react-vite": "9.0.17",
+    "@storybook/addon-a11y": "10.1.4",
+    "@storybook/addon-docs": "10.1.4",
+    "@storybook/addon-links": "10.1.4",
+    "@storybook/addon-mcp": "~0.1.4",
+    "@storybook/addon-themes": "~10.1.4",
+    "@storybook/react-vite": "10.1.4",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.35",
     "@testing-library/jest-dom": "^5.16.5",
@@ -235,8 +236,8 @@
     "cross-env": "~7.0.3",
     "csstype": "~3.1.3",
     "eslint": "^9.32.0",
-    "eslint-plugin-storybook": "~9.0.17",
-    "glob": "~10.3.3",
+    "eslint-plugin-storybook": "~10.1.4",
+    "glob": "~10.5.0",
     "jsdom": "^22.1.0",
     "plop": "~3.1.2",
     "postcss": "~8.4.31",
@@ -247,17 +248,17 @@
     "react-docgen-typescript": "~2.2.2",
     "react-dom": "^18.2.0",
     "shx": "^0.3.4",
-    "storybook": "9.0.17",
+    "storybook": "10.1.4",
     "tailwind-variants": "~0.2.1",
     "tailwindcss": "~3.4.15",
     "tailwindcss-themer": "~3.1.0",
     "ts-node": "~10.9.1",
     "typescript": "^5.5.4",
-    "vite": "^7.0.5",
+    "vite": "^7.0.8",
     "vitest": "^3.2.4",
+    "@westpac/test-config": "~0.0.0",
     "@westpac/eslint-config": "~1.0.1",
-    "@westpac/ts-config": "~0.0.0",
-    "@westpac/test-config": "~0.0.0"
+    "@westpac/ts-config": "~0.0.0"
   },
   "dependencies": {
     "@duetds/date-picker": "~1.4.0",
@@ -285,6 +286,10 @@
     "tailwindcss": "~3.4.15",
     "tailwindcss-themer": "~3.1.0"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/WestpacGEL/GEL-next.git"
+  },
   "scripts": {
     "dev": "pnpm build:watch",
     "clean": "shx rm -rf dist",

package/src/components/button-dropdown/button-dropdown.component.tsx

@@ -25,6 +25,7 @@ export function ButtonDropdown({
   soft = false,
   block = false,
   dropDownIcon: Icon = DropDownIcon,
+  placement = 'bottom start',
   shouldFlip,
 }: ButtonDropdownProps) {
   const ref = useRef<HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement & HTMLDivElement>(null);
@@ -73,7 +74,7 @@ export function ButtonDropdown({
       {state.isOpen && (
         <ButtonDropdownPanel
           className={styles.panel({ className })}
-          placement="bottom start"
+          placement={placement}
           triggerRef={ref}
           state={state}
           block={block}

package/src/components/button-dropdown/button-dropdown.types.ts

@@ -1,4 +1,5 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { Placement } from 'react-aria';
 import { type VariantProps } from 'tailwind-variants';
 
 import { ButtonProps } from '../button/index.js';
@@ -26,6 +27,10 @@ export type ButtonDropdownProps = {
    * State of whether the Popover is open
    */
   open?: boolean;
+  /**
+   * placement of the popover
+   */
+  placement?: Placement;
   /**
    * Soft look button
    */

package/src/components/modal/components/modal-dialog/components/modal-dialog-body/modal-dialog-body.component.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import React from 'react';
+
 import { useModalDialogContext } from '../../modal-dialog.component.js';
 
 import { styles as modalBodyStyles } from './modal-dialog-body.styles.js';