@westpac/ui 0.57.4 → 0.59.0

package/dist/css/westpac-ui.min.css

@@ -3339,6 +3339,15 @@ body {
 .right-3 {
   right: 1.125rem;
 }
+.right-6\.5 {
+  right: 2.4375rem;
+}
+.right-8\.5 {
+  right: 3.1875rem;
+}
+.right-9\.5 {
+  right: 3.5625rem;
+}
 .right-\[-1px\] {
   right: -1px;
 }
@@ -3369,6 +3378,9 @@ body {
 .top-\[5vh\] {
   top: 5vh;
 }
+.top-auto {
+  top: auto;
+}
 .top-full {
   top: 100%;
 }
@@ -3505,6 +3517,14 @@ body {
   margin-top: -0.75rem;
   margin-bottom: -0.75rem;
 }
+.-my-\[0\.3125rem\] {
+  margin-top: -0.3125rem;
+  margin-bottom: -0.3125rem;
+}
+.-my-\[0\.5rem\] {
+  margin-top: -0.5rem;
+  margin-bottom: -0.5rem;
+}
 .mx-2 {
   margin-left: 0.75rem;
   margin-right: 0.75rem;
@@ -3551,18 +3571,45 @@ body {
 .-mb-1 {
   margin-bottom: -0.375rem;
 }
+.-mb-\[0\.25rem\] {
+  margin-bottom: -0.25rem;
+}
+.-mb-\[0\.625rem\] {
+  margin-bottom: -0.625rem;
+}
 .-ml-2 {
   margin-left: -0.75rem;
 }
+.-mr-1\.5 {
+  margin-right: -0.5625rem;
+}
+.-mr-2 {
+  margin-right: -0.75rem;
+}
+.-mr-2\.5 {
+  margin-right: -0.9375rem;
+}
+.-mr-3 {
+  margin-right: -1.125rem;
+}
+.-mt-0\.5 {
+  margin-top: -0.1875rem;
+}
 .-mt-1 {
   margin-top: -0.375rem;
 }
+.-mt-1\.5 {
+  margin-top: -0.5625rem;
+}
 .-mt-2 {
   margin-top: -0.75rem;
 }
 .mb-0 {
   margin-bottom: 0rem;
 }
+.mb-0\.5 {
+  margin-bottom: 0.1875rem;
+}
 .mb-1 {
   margin-bottom: 0.375rem;
 }
@@ -3587,6 +3634,9 @@ body {
 .ml-1\.5 {
   margin-left: 0.5625rem;
 }
+.ml-5 {
+  margin-left: 1.875rem;
+}
 .ml-\[-1px\] {
   margin-left: -1px;
 }
@@ -3772,6 +3822,9 @@ body {
   height: -moz-fit-content;
   height: fit-content;
 }
+.\!h-auto {
+  height: auto !important;
+}
 .h-1 {
   height: 0.375rem;
 }
@@ -3922,6 +3975,9 @@ body {
 .max-h-\[400px\] {
   max-height: 400px;
 }
+.max-h-\[432px\] {
+  max-height: 432px;
+}
 .max-h-\[80vh\] {
   max-height: 80vh;
 }
@@ -3937,6 +3993,18 @@ body {
 .min-h-12 {
   min-height: 4.5rem;
 }
+.min-h-5 {
+  min-height: 1.875rem;
+}
+.min-h-6 {
+  min-height: 2.25rem;
+}
+.min-h-7 {
+  min-height: 2.625rem;
+}
+.min-h-8 {
+  min-height: 3rem;
+}
 .min-h-9 {
   min-height: 3.375rem;
 }
@@ -3967,6 +4035,9 @@ body {
 .w-3 {
   width: 1.125rem;
 }
+.w-3\/5 {
+  width: 60%;
+}
 .w-6 {
   width: 2.25rem;
 }
@@ -4320,6 +4391,11 @@ body {
 .touch-manipulation {
   touch-action: manipulation;
 }
+.select-all {
+  -webkit-user-select: all;
+     -moz-user-select: all;
+          user-select: all;
+}
 .resize {
   resize: both;
 }
@@ -4787,6 +4863,10 @@ body {
   --tw-border-opacity: 1;
   border-top-color: rgba(var(--colors-border), var(--tw-border-opacity, 1));
 }
+.border-t-hero {
+  --tw-border-opacity: 1;
+  border-top-color: rgba(var(--colors-hero), var(--tw-border-opacity, 1));
+}
 .border-opacity-0 {
   --tw-border-opacity: 0;
 }
@@ -4855,6 +4935,9 @@ body {
 .bg-black\/20 {
   background-color: rgb(0 0 0 / 0.2);
 }
+.bg-black\/5 {
+  background-color: rgb(0 0 0 / 0.05);
+}
 .bg-black\/50 {
   background-color: rgb(0 0 0 / 0.5);
 }
@@ -6508,6 +6591,9 @@ body {
 .\!outline-offset-0 {
   outline-offset: 0px !important;
 }
+.\!outline-offset-\[-2px\] {
+  outline-offset: -2px !important;
+}
 .\!outline-offset-\[-3px\] {
   outline-offset: -3px !important;
 }
@@ -6534,6 +6620,11 @@ body {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.transition-\[background-color\] {
+  transition-property: background-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .transition-\[background\] {
   transition-property: background;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -8359,6 +8450,16 @@ body {
   outline-offset: 3px;
   outline-color: rgb(var(--colors-focus));
 }
+.focus-visible\:bg-background:focus-visible {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--colors-background), var(--tw-bg-opacity, 1));
+}
+.focus-visible\:outline-2:focus-visible {
+  outline-width: 2px;
+}
+.focus-visible\:\!outline-offset-\[-2px\]:focus-visible {
+  outline-offset: -2px !important;
+}
 .focus-visible\:focus-outline:focus-visible {
   outline-style: solid;
   outline-width: 2px;
@@ -8807,6 +8908,15 @@ body {
   .xsl\:right-0 {
     right: 0rem;
   }
+  .xsl\:right-6\.5 {
+    right: 2.4375rem;
+  }
+  .xsl\:right-8\.5 {
+    right: 3.1875rem;
+  }
+  .xsl\:right-9\.5 {
+    right: 3.5625rem;
+  }
   .xsl\:top-0 {
     top: 0rem;
   }
@@ -8918,6 +9028,14 @@ body {
   .xsl\:row-span-6 {
     grid-row: span 6 / span 6;
   }
+  .xsl\:-my-\[0\.3125rem\] {
+    margin-top: -0.3125rem;
+    margin-bottom: -0.3125rem;
+  }
+  .xsl\:-my-\[0\.5rem\] {
+    margin-top: -0.5rem;
+    margin-bottom: -0.5rem;
+  }
   .xsl\:mx-\[-8vw\] {
     margin-left: -8vw;
     margin-right: -8vw;
@@ -8930,9 +9048,33 @@ body {
     margin-top: 0.75rem;
     margin-bottom: 0.75rem;
   }
+  .xsl\:-mb-\[0\.25rem\] {
+    margin-bottom: -0.25rem;
+  }
+  .xsl\:-mb-\[0\.625rem\] {
+    margin-bottom: -0.625rem;
+  }
+  .xsl\:-mr-1\.5 {
+    margin-right: -0.5625rem;
+  }
+  .xsl\:-mr-2 {
+    margin-right: -0.75rem;
+  }
+  .xsl\:-mr-2\.5 {
+    margin-right: -0.9375rem;
+  }
+  .xsl\:-mr-3 {
+    margin-right: -1.125rem;
+  }
+  .xsl\:-mt-0\.5 {
+    margin-top: -0.1875rem;
+  }
   .xsl\:-mt-1 {
     margin-top: -0.375rem;
   }
+  .xsl\:-mt-1\.5 {
+    margin-top: -0.5625rem;
+  }
   .xsl\:-mt-2 {
     margin-top: -0.75rem;
   }
@@ -9101,6 +9243,18 @@ body {
   .xsl\:min-h-12 {
     min-height: 4.5rem;
   }
+  .xsl\:min-h-5 {
+    min-height: 1.875rem;
+  }
+  .xsl\:min-h-6 {
+    min-height: 2.25rem;
+  }
+  .xsl\:min-h-7 {
+    min-height: 2.625rem;
+  }
+  .xsl\:min-h-8 {
+    min-height: 3rem;
+  }
   .xsl\:min-h-9 {
     min-height: 3.375rem;
   }
@@ -10498,6 +10652,15 @@ body {
   .sm\:right-0 {
     right: 0rem;
   }
+  .sm\:right-6\.5 {
+    right: 2.4375rem;
+  }
+  .sm\:right-8\.5 {
+    right: 3.1875rem;
+  }
+  .sm\:right-9\.5 {
+    right: 3.5625rem;
+  }
   .sm\:top-0 {
     top: 0rem;
   }
@@ -10606,6 +10769,14 @@ body {
   .sm\:row-span-6 {
     grid-row: span 6 / span 6;
   }
+  .sm\:-my-\[0\.3125rem\] {
+    margin-top: -0.3125rem;
+    margin-bottom: -0.3125rem;
+  }
+  .sm\:-my-\[0\.5rem\] {
+    margin-top: -0.5rem;
+    margin-bottom: -0.5rem;
+  }
   .sm\:mx-\[-8vw\] {
     margin-left: -8vw;
     margin-right: -8vw;
@@ -10618,12 +10789,36 @@ body {
     margin-top: 0.75rem;
     margin-bottom: 0.75rem;
   }
+  .sm\:-mb-\[0\.25rem\] {
+    margin-bottom: -0.25rem;
+  }
+  .sm\:-mb-\[0\.625rem\] {
+    margin-bottom: -0.625rem;
+  }
   .sm\:-ml-4 {
     margin-left: -1.5rem;
   }
+  .sm\:-mr-1\.5 {
+    margin-right: -0.5625rem;
+  }
+  .sm\:-mr-2 {
+    margin-right: -0.75rem;
+  }
+  .sm\:-mr-2\.5 {
+    margin-right: -0.9375rem;
+  }
+  .sm\:-mr-3 {
+    margin-right: -1.125rem;
+  }
+  .sm\:-mt-0\.5 {
+    margin-top: -0.1875rem;
+  }
   .sm\:-mt-1 {
     margin-top: -0.375rem;
   }
+  .sm\:-mt-1\.5 {
+    margin-top: -0.5625rem;
+  }
   .sm\:-mt-2 {
     margin-top: -0.75rem;
   }
@@ -10809,6 +11004,18 @@ body {
   .sm\:min-h-12 {
     min-height: 4.5rem;
   }
+  .sm\:min-h-5 {
+    min-height: 1.875rem;
+  }
+  .sm\:min-h-6 {
+    min-height: 2.25rem;
+  }
+  .sm\:min-h-7 {
+    min-height: 2.625rem;
+  }
+  .sm\:min-h-8 {
+    min-height: 3rem;
+  }
   .sm\:min-h-9 {
     min-height: 3.375rem;
   }
@@ -12297,6 +12504,15 @@ body {
   .md\:right-0 {
     right: 0rem;
   }
+  .md\:right-6\.5 {
+    right: 2.4375rem;
+  }
+  .md\:right-8\.5 {
+    right: 3.1875rem;
+  }
+  .md\:right-9\.5 {
+    right: 3.5625rem;
+  }
   .md\:top-0 {
     top: 0rem;
   }
@@ -12413,6 +12629,14 @@ body {
     margin-top: -1.125rem;
     margin-bottom: -1.125rem;
   }
+  .md\:-my-\[0\.3125rem\] {
+    margin-top: -0.3125rem;
+    margin-bottom: -0.3125rem;
+  }
+  .md\:-my-\[0\.5rem\] {
+    margin-top: -0.5rem;
+    margin-bottom: -0.5rem;
+  }
   .md\:mx-\[-8vw\] {
     margin-left: -8vw;
     margin-right: -8vw;
@@ -12425,12 +12649,36 @@ body {
     margin-top: 0.75rem;
     margin-bottom: 0.75rem;
   }
+  .md\:-mb-\[0\.25rem\] {
+    margin-bottom: -0.25rem;
+  }
+  .md\:-mb-\[0\.625rem\] {
+    margin-bottom: -0.625rem;
+  }
   .md\:-ml-3 {
     margin-left: -1.125rem;
   }
+  .md\:-mr-1\.5 {
+    margin-right: -0.5625rem;
+  }
+  .md\:-mr-2 {
+    margin-right: -0.75rem;
+  }
+  .md\:-mr-2\.5 {
+    margin-right: -0.9375rem;
+  }
+  .md\:-mr-3 {
+    margin-right: -1.125rem;
+  }
+  .md\:-mt-0\.5 {
+    margin-top: -0.1875rem;
+  }
   .md\:-mt-1 {
     margin-top: -0.375rem;
   }
+  .md\:-mt-1\.5 {
+    margin-top: -0.5625rem;
+  }
   .md\:-mt-2 {
     margin-top: -0.75rem;
   }
@@ -12608,6 +12856,18 @@ body {
   .md\:min-h-12 {
     min-height: 4.5rem;
   }
+  .md\:min-h-5 {
+    min-height: 1.875rem;
+  }
+  .md\:min-h-6 {
+    min-height: 2.25rem;
+  }
+  .md\:min-h-7 {
+    min-height: 2.625rem;
+  }
+  .md\:min-h-8 {
+    min-height: 3rem;
+  }
   .md\:min-h-9 {
     min-height: 3.375rem;
   }
@@ -14109,6 +14369,15 @@ body {
   .lg\:right-0 {
     right: 0rem;
   }
+  .lg\:right-6\.5 {
+    right: 2.4375rem;
+  }
+  .lg\:right-8\.5 {
+    right: 3.1875rem;
+  }
+  .lg\:right-9\.5 {
+    right: 3.5625rem;
+  }
   .lg\:top-0 {
     top: 0rem;
   }
@@ -14217,6 +14486,14 @@ body {
   .lg\:row-span-6 {
     grid-row: span 6 / span 6;
   }
+  .lg\:-my-\[0\.3125rem\] {
+    margin-top: -0.3125rem;
+    margin-bottom: -0.3125rem;
+  }
+  .lg\:-my-\[0\.5rem\] {
+    margin-top: -0.5rem;
+    margin-bottom: -0.5rem;
+  }
   .lg\:mx-\[-8vw\] {
     margin-left: -8vw;
     margin-right: -8vw;
@@ -14229,9 +14506,33 @@ body {
     margin-top: 0.75rem;
     margin-bottom: 0.75rem;
   }
+  .lg\:-mb-\[0\.25rem\] {
+    margin-bottom: -0.25rem;
+  }
+  .lg\:-mb-\[0\.625rem\] {
+    margin-bottom: -0.625rem;
+  }
+  .lg\:-mr-1\.5 {
+    margin-right: -0.5625rem;
+  }
+  .lg\:-mr-2 {
+    margin-right: -0.75rem;
+  }
+  .lg\:-mr-2\.5 {
+    margin-right: -0.9375rem;
+  }
+  .lg\:-mr-3 {
+    margin-right: -1.125rem;
+  }
+  .lg\:-mt-0\.5 {
+    margin-top: -0.1875rem;
+  }
   .lg\:-mt-1 {
     margin-top: -0.375rem;
   }
+  .lg\:-mt-1\.5 {
+    margin-top: -0.5625rem;
+  }
   .lg\:-mt-2 {
     margin-top: -0.75rem;
   }
@@ -14403,6 +14704,18 @@ body {
   .lg\:min-h-12 {
     min-height: 4.5rem;
   }
+  .lg\:min-h-5 {
+    min-height: 1.875rem;
+  }
+  .lg\:min-h-6 {
+    min-height: 2.25rem;
+  }
+  .lg\:min-h-7 {
+    min-height: 2.625rem;
+  }
+  .lg\:min-h-8 {
+    min-height: 3rem;
+  }
   .lg\:min-h-9 {
     min-height: 3.375rem;
   }
@@ -15847,6 +16160,15 @@ body {
   .xl\:right-0 {
     right: 0rem;
   }
+  .xl\:right-6\.5 {
+    right: 2.4375rem;
+  }
+  .xl\:right-8\.5 {
+    right: 3.1875rem;
+  }
+  .xl\:right-9\.5 {
+    right: 3.5625rem;
+  }
   .xl\:top-0 {
     top: 0rem;
   }
@@ -15955,6 +16277,14 @@ body {
   .xl\:row-span-6 {
     grid-row: span 6 / span 6;
   }
+  .xl\:-my-\[0\.3125rem\] {
+    margin-top: -0.3125rem;
+    margin-bottom: -0.3125rem;
+  }
+  .xl\:-my-\[0\.5rem\] {
+    margin-top: -0.5rem;
+    margin-bottom: -0.5rem;
+  }
   .xl\:mx-\[-8vw\] {
     margin-left: -8vw;
     margin-right: -8vw;
@@ -15967,9 +16297,33 @@ body {
     margin-top: 0.75rem;
     margin-bottom: 0.75rem;
   }
+  .xl\:-mb-\[0\.25rem\] {
+    margin-bottom: -0.25rem;
+  }
+  .xl\:-mb-\[0\.625rem\] {
+    margin-bottom: -0.625rem;
+  }
+  .xl\:-mr-1\.5 {
+    margin-right: -0.5625rem;
+  }
+  .xl\:-mr-2 {
+    margin-right: -0.75rem;
+  }
+  .xl\:-mr-2\.5 {
+    margin-right: -0.9375rem;
+  }
+  .xl\:-mr-3 {
+    margin-right: -1.125rem;
+  }
+  .xl\:-mt-0\.5 {
+    margin-top: -0.1875rem;
+  }
   .xl\:-mt-1 {
     margin-top: -0.375rem;
   }
+  .xl\:-mt-1\.5 {
+    margin-top: -0.5625rem;
+  }
   .xl\:-mt-2 {
     margin-top: -0.75rem;
   }
@@ -16133,6 +16487,18 @@ body {
   .xl\:min-h-12 {
     min-height: 4.5rem;
   }
+  .xl\:min-h-5 {
+    min-height: 1.875rem;
+  }
+  .xl\:min-h-6 {
+    min-height: 2.25rem;
+  }
+  .xl\:min-h-7 {
+    min-height: 2.625rem;
+  }
+  .xl\:min-h-8 {
+    min-height: 3rem;
+  }
   .xl\:min-h-9 {
     min-height: 3.375rem;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.57.4",
+  "version": "0.59.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -130,6 +130,9 @@
     "./modal": {
       "default": "./dist/components/modal/index.js"
     },
+    "./multi-select": {
+      "default": "./dist/components/multi-select/index.js"
+    },
     "./pagination": {
       "default": "./dist/components/pagination/index.js"
     },

package/src/components/compacta/compacta.component.tsx

@@ -24,6 +24,7 @@ export function Compacta({
   children,
   titleTag: Tag = 'h3',
   addText = 'Add another',
+  initialCompactas,
   ...props
 }: CompactaProps) {
   const [initial, setInitial] = useState(true);
@@ -118,6 +119,26 @@ export function Compacta({
     }
   }, [items.length, action]);
 
+  useEffect(() => {
+    if (initialCompactas) {
+      const newItems = initialCompactas.map((item, index) => {
+        const itemId = item.id ?? `${id}-${generateID()}`;
+        return {
+          id: itemId,
+          open: index === initialCompactas.length - 1 ? true : false,
+          delay: false,
+          title: {
+            primary: item.title?.primary ?? '',
+            secondary: item.title?.secondary ?? '',
+            tertiary: item.title?.tertiary ?? '',
+          },
+        };
+      });
+      setItems(newItems);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const styles = compactaStyles({});
 
   return (

package/src/components/compacta/compacta.types.ts

@@ -9,6 +9,16 @@ export type CompactaProps = {
    * Component to repeat
    */
   children: (...props: ContentProps[]) => ReactNode;
+  /**
+   * The initial compactas to render. Each compacta needs a unique id if you want to pre-fill values.
+   * Each object contained within the array represents a compacta.
+   */
+  initialCompactas?: {
+    // Compacta id
+    id?: string;
+    // Titles to pre-fill, won't be done automatically
+    title?: { primary?: string; secondary?: string; tertiary?: string };
+  }[];
   /**
    * Tag for primary title
    * @default h3

package/src/components/index.ts

@@ -48,3 +48,4 @@ export * from './pass-code-view/index.js';
 export * from './progress-indicator/index.js';
 export * from './header/index.js';
 export * from './footer/index.js';
+export * from './multi-select/index.js';

package/src/components/multi-select/components/multi-select-dropdown/multi-select-dropdown.component.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import React, { useContext, useRef } from 'react';
+
+import { ButtonRef } from '../../../../components/button/button.types.js';
+import { MultiSelectListBox } from '../../components/multi-select-list-box/multi-select-list-box.component.js';
+import { MultiSelectContext } from '../../multi-select.component.js';
+import { MultiSelectPopover } from '../multi-select-popover/multi-select-popover.component.js';
+import { MultiSelectSearchbar } from '../multi-select-searchbar/multi-select-searchbar.component.js';
+
+import { MultiSelectDropdownProps } from './multi-select-dropdown.types.js';
+
+export function MultiSelectDropdown<T extends object = object>({
+  setFilterText,
+  ...props
+}: MultiSelectDropdownProps<T>) {
+  const { filterText, listBoxRef } = useContext(MultiSelectContext);
+  const closeBtnRef = useRef<ButtonRef>(null);
+
+  return (
+    <MultiSelectPopover>
+      <MultiSelectSearchbar filterText={filterText} setFilterText={setFilterText} closeBtnRef={closeBtnRef} />
+      <MultiSelectListBox {...props} aria-label="multiselect list" escapeKeyBehavior="none" listBoxRef={listBoxRef} />
+    </MultiSelectPopover>
+  );
+}