# @westpac/ui ## 1.3.2 ### Patch Changes - 7e97f6b: - export usePagination hook from component library - updated components that were using a portalContainer to look for data-brand instead of data-theme ## 1.3.1 ### Patch Changes - 6bf4357: - updated padding on the panel of the popover component ## 1.3.0 ### Minor Changes - d699475: - added sort icon - updated backdrop overlays for modal type components to have less opacity ## 1.2.1 ### Patch Changes - 11f023c: fixed style issue with autocomplete dropdown ## 1.2.0 ### Minor Changes - ba74b1e: - added hideFilter prop to MultiSelect to hide the filter in dropdown - added hideSelectAll prop to MultiSelect to hide the Select All option in dropdown - added width prop to MultiSelect for fixed widths similar to the Input component ### Patch Changes - 5aa6631: - fix security issues in style-config - fix deprecated prop usage in autocomplete after package updates ## 1.1.2 ### Patch Changes - a55faea: set a default portalContainer for MultiSelect so styles render correctly in more situations without providing portalContainer ## 1.1.1 ### Patch Changes - 2eebb35: - fix issue with font import in style config - fix security issues ## 1.1.0 ### Minor Changes - bd3422f: add onPasteComplete handler to passcode ## 1.0.0 ### 📦 Major Changes — @westpac/ui & @westpac/style-config We are introducing a new architecture separating UI (@westpac/ui) components from style configuration (@westpac/style-config): - @westpac/style-config now provides: - Tailwind tokens - Light/dark theming - CSS + W3C design tokens --- ### 🚨 Migration Steps 1. Remove your existing tailwind.config.js and Follow the update instruction at [Tailwind CSS Upgrade Guide.](https://tailwindcss.com/docs/upgrade-guide). If the update command they provide doesn't work scroll down to the manual update instructions and follow those. 2. Install the updated dependencies: ```bash npm i @westpac/ui @westpac/style-config tailwindcss@4 postcss tailwind-variants@~3.1.1 ``` 3. Import global styles in your main CSS file: ```css @import 'tailwindcss'; /* Tailwind setup */ @import '@westpac/style-config/tailwind'; /* Register GEL components source for Tailwind */ @source "/node_modules/@westpac/ui/src"; /* For brand theming, import the required brand stylesheets: */ @import '@westpac/style-config/themes/wbc'; @import '@westpac/style-config/themes/stg'; @import '@westpac/style-config/themes/bom'; @import '@westpac/style-config/themes/bsa'; /* Also the fonts required for each theme: */ /* WBC fonts */ @font-face { src: url('/fonts/Westpac-Bold-v2.007.woff2') format('woff2'), url('/fonts/Westpac-Bold-v2.007.woff') format('woff'); font-family: 'Westpac'; font-weight: 100 900; font-style: normal; } /* STG fonts */ @font-face { src: url('/fonts/dragonbold-bold-webfont.woff2') format('woff2'), url('/fonts/dragonbold-bold-webfont.woff') format('woff'); font-family: 'Dragon Bold'; font-weight: 100 900; font-style: normal; } ``` 4. After including the css file to enable brand + theme switching, ensure your root HTML element includes: NOTE: Be sure to pass the brand with data-brand as previously it was data-theme #### NOTE: Dark Mode has been disabled for this release and switching to dark mode will not do anything. ```html or
``` 5. Update your `eslint.config.mjs` file ```mjs import eslintConfig from '@westpac/eslint-config/nextjs'; import { defineConfig } from 'eslint/config'; export default defineConfig([ ...eslintConfig, { settings: { 'better-tailwindcss': { // tailwindcss 4: the path to the entry file of the css based tailwind config (eg: `src/global.css`) entryPoint: 'src/globals.css', }, }, }, ]); ``` ### ✅ Token Updates We introduced new token names to support a multi-brand + dual-theme system. ##### Before ```tsx

My title

Lorem ipsum dolor sit amet

``` ##### After ```tsx

My title

Lorem ipsum dolor sit amet

``` To support migration, a codemod is available to automate this transition. NOTE: For the path to your files you may not be able to do glob patterns based on system and may have to use something different than what is noted below ```bash npx jscodeshift --parser=tsx -t node_modules/@westpac/ui/scripts/codemods/gel-tokens-tailwind-v1.cjs /**/*.tsx ``` NOTE: The parser parameter might be different based on your project, if you see a lot of errors, try another parser (babel, flow, ts, tsx) This will apply the codemod to all specified files in your project. You may have to run this script more than once depending on your project structure and the files you store styles in. For classes we are unable to replace with the equivalent token the code will inject a `[REPLACE_TOKEN]` string where it will require working with your project designer to manually update it to the correct color token. If you want to test the upgrade while waiting for your designers we recommened replacing with a token that is close or the hex value i.e. text-black = text-[#000]. To see all the new tokens you can check storybook [Storybook](https://gel-next-storybook-git-westpacgel.vercel.app/?path=/docs/foundation-colours--docs) or the [GEL website](https://gel.westpacgroup.com.au/design-system/wbc/foundation/tokens/colour-tokens) You can also find the codemod script [here](https://github.com/WestpacGEL/GEL-next/blob/develop/packages/ui/scripts/codemods/gel-tokens-tailwind-v1.cjs) --- ### 🆕 Additional Improvements #### Style Constants The constants `BREAKPOINTS` and `SPACING_UNIT` have been moved to `@westpac/style-config/constants` #### Before ```js import { BREAKPOINTS, SPACING_UNIT } from '@westpac/ui/theme-constants'; ``` #### After ```js import { BREAKPOINTS, SPACING_UNIT } from '@westpac/style-config/constants'; ``` #### Component Updates - Full support for TailwindCSS v4 and its [latest features](https://tailwindcss.com/blog/tailwindcss-v4) - Dark mode supported for BOM and BankSA logos #### Compacta usability update #### Before ```tsx () => { const [inputs, setInputs] = useState>({ 'primary-1234': 'test', }); const handleChange = (e: ChangeEvent) => { setInputs(prev => ({ ...prev, [e.target.name]: e.target.value })); }; return ( console.log('add')} onRemove={() => console.log('remove')} > {({ id, setPrimaryTitle, setSecondaryTitle, setTertiaryTitle }) => (
Primary title text { handleChange(e); setPrimaryTitle(e.target.value); }} /> Secondary title text { handleChange(e); setSecondaryTitle(e.target.value); }} /> Tertiary title text { handleChange(e); setTertiaryTitle(e.target.value); }} />
)} ); }; ``` #### After ```tsx () => { const { register, watch, setValue } = useForm({ defaultValues: { items: [{ primary: 'test', secondary: '', tertiary: '', fourth: '' }] }, }); const items = watch('items'); const handleAdd = useCallback(() => { setValue('items', [...items, { primary: '', secondary: '', tertiary: '', fourth: '' }]); }, [items, setValue]); return (
{items.map((item, index) => ( { setValue('items', [...items.slice(0, index), ...items.slice(index + 1)]); }} > ))}
); }; ``` #### Repeater aligned with Compacta specification #### Before ```jsx
Label 1
Label 2
``` #### After ```tsx () => { const { register, watch, setValue } = useForm({ defaultValues: { items: [{ label: '' }] }, }); const items = watch('items'); const handleAdd = useCallback(() => { setValue('items', [...items, { label: '' }]); }, [items, setValue]); return (
{items.map((item, index) => ( { setValue('items', [...items.slice(0, index), ...items.slice(index + 1)]); }} > ))}
); }; ``` ### Accordion now uses useDisclose from react-aria defaultExpandedKeys prop now works off the id value of the AccordionItem #### Before ```jsx Content ``` #### After ```jsx Content ``` ### ButtonGroup now uses useButtonGroupToggle from react-aria #### Before ```jsx ``` #### After ```jsx Left Middle Right ``` ### New Datepicker using react-aria hooks #### Before ```jsx ``` #### After ```jsx () => { const disableDates = ["2023-10-20"]; const isDateUnavailable = (date: DateValue) => disableDates.some( (disableDate) => disableDate.toString() === date.toString() ); return ; }; ``` ### Form, FormGroup, FormSection, FormChitchat deprecated The `Form` component has been deprecated. Its primary functionality was to manage vertical spacing between `FormGroup` elements using margin-bottom, which led to limitations and layout inconsistencies in more complex form structures. To ensure greater flexibility and maintainability, we are phasing out this component and its related abstractions. Spacing should now be applied directly using Tailwind CSS utility classes. #### Before ```jsx () => { const { register, handleSubmit, formState: { errors }, } = useForm(); return (
void handleSubmit(onSubmit)(event)}>