@westpac/ui 0.50.0 → 0.52.0

package/dist/components/tooltip/tooltip.component.js

@@ -0,0 +1,55 @@
+'use client';
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { mergeProps, useHover, useFocusRing } from 'react-aria';
+import { TooltipContent } from './components/tooltip-content/tooltip-content.component.js';
+import { styles } from './tooltip.styles.js';
+export function Tooltip({ children, tooltip, id, className }) {
+    const localId = useId();
+    const [isOpen, setIsOpen] = useState(false);
+    const tooltipWaitTime = useRef(null);
+    const handleKeyDown = (e)=>{
+        if (e.key === 'Escape' && isOpen) {
+            setIsOpen(false);
+        }
+    };
+    const { hoverProps, isHovered } = useHover({});
+    const { isFocusVisible, focusProps } = useFocusRing({
+        within: true
+    });
+    const startTimer = useCallback(()=>{
+        tooltipWaitTime.current = setTimeout(()=>{
+            setIsOpen(true);
+        }, 1000);
+    }, []);
+    const stopTimer = useCallback(()=>{
+        if (tooltipWaitTime.current) {
+            clearTimeout(tooltipWaitTime.current);
+        }
+    }, []);
+    useEffect(()=>{
+        setIsOpen(isFocusVisible);
+    }, [
+        isFocusVisible
+    ]);
+    useEffect(()=>{
+        if (isHovered && !isOpen) startTimer();
+        if (!isHovered) setIsOpen(false);
+        return ()=>stopTimer();
+    }, [
+        isHovered
+    ]);
+    useEffect(()=>{
+        window.addEventListener('keydown', handleKeyDown);
+        return ()=>window.removeEventListener('keydown', handleKeyDown);
+    }, [
+        isOpen
+    ]);
+    return React.createElement("span", {
+        ...mergeProps(hoverProps, focusProps),
+        className: styles({
+            className
+        })
+    }, children, isOpen && React.createElement(TooltipContent, {
+        id: id !== null && id !== void 0 ? id : localId
+    }, tooltip));
+}

package/dist/components/tooltip/tooltip.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "relative", TVConfig<V, EV>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "relative", TVConfig<V, EV>, unknown, unknown, undefined>>;

package/dist/components/tooltip/tooltip.styles.js

@@ -0,0 +1,4 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'relative'
+});

package/dist/components/tooltip/tooltip.types.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export type TooltipProps = {
+    children: ReactNode;
+    tooltip: string;
+    id?: string;
+    className?: string;
+};

package/dist/components/tooltip/tooltip.types.js

@@ -0,0 +1 @@
+export { };

package/dist/css/westpac-ui.css

@@ -4137,6 +4137,9 @@ body {
 .min-w-0 {
   min-width: 0rem;
 }
+.min-w-4 {
+  min-width: 1.5rem;
+}
 .min-w-7 {
   min-width: 2.625rem;
 }
@@ -4477,6 +4480,9 @@ body {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
 .text-ellipsis {
   text-overflow: ellipsis;
 }
@@ -5729,6 +5735,9 @@ body {
 .p-0 {
   padding: 0rem;
 }
+.p-0\.5 {
+  padding: 0.1875rem;
+}
 .p-1 {
   padding: 0.375rem;
 }
@@ -8571,9 +8580,6 @@ body {
   }
 }
 @media not all and (min-width: 992px) {
-  .max-md\:mb-7 {
-    margin-bottom: 2.625rem;
-  }
   .max-md\:mt-0\.5 {
     margin-top: 0.1875rem;
   }
@@ -8694,6 +8700,9 @@ body {
   .xsl\:pointer-events-auto {
     pointer-events: auto;
   }
+  .xsl\:visible {
+    visibility: visible;
+  }
   .xsl\:\!fixed {
     position: fixed !important;
   }
@@ -9144,6 +9153,9 @@ body {
   .xsl\:w-full {
     width: 100%;
   }
+  .xsl\:min-w-4 {
+    min-width: 1.5rem;
+  }
   .xsl\:min-w-\[11\.875rem\] {
     min-width: 11.875rem;
   }
@@ -9303,6 +9315,12 @@ body {
   .xsl\:overflow-auto {
     overflow: auto;
   }
+  .xsl\:overflow-hidden {
+    overflow: hidden;
+  }
+  .xsl\:overflow-visible {
+    overflow: visible;
+  }
   .xsl\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -10298,9 +10316,6 @@ body {
     background-color: rgba(var(--colors-pop), var(--tw-bg-opacity, 1));
   }
   @media not all and (min-width: 992px) {
-    .xsl\:max-md\:mb-7 {
-      margin-bottom: 2.625rem;
-    }
     .xsl\:max-md\:flex-col {
       flex-direction: column;
     }
@@ -10381,6 +10396,9 @@ body {
   .sm\:pointer-events-auto {
     pointer-events: auto;
   }
+  .sm\:visible {
+    visibility: visible;
+  }
   .sm\:\!fixed {
     position: fixed !important;
   }
@@ -10856,6 +10874,9 @@ body {
   .sm\:min-w-10 {
     min-width: 3.75rem;
   }
+  .sm\:min-w-4 {
+    min-width: 1.5rem;
+  }
   .sm\:min-w-\[11\.875rem\] {
     min-width: 11.875rem;
   }
@@ -11015,6 +11036,12 @@ body {
   .sm\:overflow-auto {
     overflow: auto;
   }
+  .sm\:overflow-hidden {
+    overflow: hidden;
+  }
+  .sm\:overflow-visible {
+    overflow: visible;
+  }
   .sm\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -12051,9 +12078,6 @@ body {
     background-color: rgba(var(--colors-pop), var(--tw-bg-opacity, 1));
   }
   @media not all and (min-width: 992px) {
-    .sm\:max-md\:mb-7 {
-      margin-bottom: 2.625rem;
-    }
     .sm\:max-md\:flex-col {
       flex-direction: column;
     }
@@ -12105,9 +12129,6 @@ body {
     .xsl\:md\:ml-6 {
       margin-left: 2.25rem;
     }
-    .xsl\:md\:mb-4 {
-      margin-bottom: 1.5rem;
-    }
     .xsl\:md\:max-w-container-md {
       max-width: 72.75rem;
     }
@@ -12134,9 +12155,6 @@ body {
     .sm\:md\:ml-6 {
       margin-left: 2.25rem;
     }
-    .sm\:md\:mb-4 {
-      margin-bottom: 1.5rem;
-    }
     .sm\:md\:max-w-container-md {
       max-width: 72.75rem;
     }
@@ -12192,6 +12210,9 @@ body {
   .md\:pointer-events-auto {
     pointer-events: auto;
   }
+  .md\:visible {
+    visibility: visible;
+  }
   .md\:\!fixed {
     position: fixed !important;
   }
@@ -12431,9 +12452,6 @@ body {
     margin-bottom: -1px;
   }
   @media (min-width: 992px) {
-    .md\:md\:mb-4 {
-      margin-bottom: 1.5rem;
-    }
     .md\:md\:ml-6 {
       margin-left: 2.25rem;
     }
@@ -12659,6 +12677,9 @@ body {
   .md\:w-full {
     width: 100%;
   }
+  .md\:min-w-4 {
+    min-width: 1.5rem;
+  }
   .md\:min-w-\[11\.875rem\] {
     min-width: 11.875rem;
   }
@@ -12818,6 +12839,12 @@ body {
   .md\:overflow-auto {
     overflow: auto;
   }
+  .md\:overflow-hidden {
+    overflow: hidden;
+  }
+  .md\:overflow-visible {
+    overflow: visible;
+  }
   .md\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -13215,9 +13242,6 @@ body {
   .md\:pb-3 {
     padding-bottom: 1.125rem;
   }
-  .md\:pb-4 {
-    padding-bottom: 1.5rem;
-  }
   .md\:pb-5 {
     padding-bottom: 1.875rem;
   }
@@ -13847,9 +13871,6 @@ body {
     background-color: rgba(var(--colors-pop), var(--tw-bg-opacity, 1));
   }
   @media not all and (min-width: 992px) {
-    .md\:max-md\:mb-7 {
-      margin-bottom: 2.625rem;
-    }
     .md\:max-md\:flex-col {
       flex-direction: column;
     }
@@ -13939,9 +13960,6 @@ body {
     .lg\:md\:max-w-container-md {
       max-width: 72.75rem;
     }
-    .lg\:md\:mb-4 {
-      margin-bottom: 1.5rem;
-    }
     .lg\:md\:ml-6 {
       margin-left: 2.25rem;
     }
@@ -14011,6 +14029,9 @@ body {
   .lg\:pointer-events-auto {
     pointer-events: auto;
   }
+  .lg\:visible {
+    visibility: visible;
+  }
   .lg\:\!fixed {
     position: fixed !important;
   }
@@ -14461,6 +14482,9 @@ body {
   .lg\:w-full {
     width: 100%;
   }
+  .lg\:min-w-4 {
+    min-width: 1.5rem;
+  }
   .lg\:min-w-\[11\.875rem\] {
     min-width: 11.875rem;
   }
@@ -14620,6 +14644,12 @@ body {
   .lg\:overflow-auto {
     overflow: auto;
   }
+  .lg\:overflow-hidden {
+    overflow: hidden;
+  }
+  .lg\:overflow-visible {
+    overflow: visible;
+  }
   .lg\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -15627,9 +15657,6 @@ body {
     background-color: rgba(var(--colors-pop), var(--tw-bg-opacity, 1));
   }
   @media not all and (min-width: 992px) {
-    .lg\:max-md\:mb-7 {
-      margin-bottom: 2.625rem;
-    }
     .lg\:max-md\:flex-col {
       flex-direction: column;
     }
@@ -15681,9 +15708,6 @@ body {
     .xl\:md\:max-w-container-md {
       max-width: 72.75rem;
     }
-    .xl\:md\:mb-4 {
-      margin-bottom: 1.5rem;
-    }
     .xl\:md\:ml-6 {
       margin-left: 2.25rem;
     }
@@ -15753,6 +15777,9 @@ body {
   .xl\:pointer-events-auto {
     pointer-events: auto;
   }
+  .xl\:visible {
+    visibility: visible;
+  }
   .xl\:\!fixed {
     position: fixed !important;
   }
@@ -16195,6 +16222,9 @@ body {
   .xl\:w-full {
     width: 100%;
   }
+  .xl\:min-w-4 {
+    min-width: 1.5rem;
+  }
   .xl\:min-w-\[11\.875rem\] {
     min-width: 11.875rem;
   }
@@ -16346,6 +16376,12 @@ body {
   .xl\:overflow-auto {
     overflow: auto;
   }
+  .xl\:overflow-hidden {
+    overflow: hidden;
+  }
+  .xl\:overflow-visible {
+    overflow: visible;
+  }
   .xl\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -17335,9 +17371,6 @@ body {
     background-color: rgba(var(--colors-pop), var(--tw-bg-opacity, 1));
   }
   @media not all and (min-width: 992px) {
-    .xl\:max-md\:mb-7 {
-      margin-bottom: 2.625rem;
-    }
     .xl\:max-md\:flex-col {
       flex-direction: column;
     }

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

@@ -4137,6 +4137,9 @@ body {
 .min-w-0 {
   min-width: 0rem;
 }
+.min-w-4 {
+  min-width: 1.5rem;
+}
 .min-w-7 {
   min-width: 2.625rem;
 }
@@ -4477,6 +4480,9 @@ body {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
 .text-ellipsis {
   text-overflow: ellipsis;
 }
@@ -5729,6 +5735,9 @@ body {
 .p-0 {
   padding: 0rem;
 }
+.p-0\.5 {
+  padding: 0.1875rem;
+}
 .p-1 {
   padding: 0.375rem;
 }
@@ -8571,9 +8580,6 @@ body {
   }
 }
 @media not all and (min-width: 992px) {
-  .max-md\:mb-7 {
-    margin-bottom: 2.625rem;
-  }
   .max-md\:mt-0\.5 {
     margin-top: 0.1875rem;
   }
@@ -8694,6 +8700,9 @@ body {
   .xsl\:pointer-events-auto {
     pointer-events: auto;
   }
+  .xsl\:visible {
+    visibility: visible;
+  }
   .xsl\:\!fixed {
     position: fixed !important;
   }
@@ -9144,6 +9153,9 @@ body {
   .xsl\:w-full {
     width: 100%;
   }
+  .xsl\:min-w-4 {
+    min-width: 1.5rem;
+  }
   .xsl\:min-w-\[11\.875rem\] {
     min-width: 11.875rem;
   }
@@ -9303,6 +9315,12 @@ body {
   .xsl\:overflow-auto {
     overflow: auto;
   }
+  .xsl\:overflow-hidden {
+    overflow: hidden;
+  }
+  .xsl\:overflow-visible {
+    overflow: visible;
+  }
   .xsl\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -10298,9 +10316,6 @@ body {
     background-color: rgba(var(--colors-pop), var(--tw-bg-opacity, 1));
   }
   @media not all and (min-width: 992px) {
-    .xsl\:max-md\:mb-7 {
-      margin-bottom: 2.625rem;
-    }
     .xsl\:max-md\:flex-col {
       flex-direction: column;
     }
@@ -10381,6 +10396,9 @@ body {
   .sm\:pointer-events-auto {
     pointer-events: auto;
   }
+  .sm\:visible {
+    visibility: visible;
+  }
   .sm\:\!fixed {
     position: fixed !important;
   }
@@ -10856,6 +10874,9 @@ body {
   .sm\:min-w-10 {
     min-width: 3.75rem;
   }
+  .sm\:min-w-4 {
+    min-width: 1.5rem;
+  }
   .sm\:min-w-\[11\.875rem\] {
     min-width: 11.875rem;
   }
@@ -11015,6 +11036,12 @@ body {
   .sm\:overflow-auto {
     overflow: auto;
   }
+  .sm\:overflow-hidden {
+    overflow: hidden;
+  }
+  .sm\:overflow-visible {
+    overflow: visible;
+  }
   .sm\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -12051,9 +12078,6 @@ body {
     background-color: rgba(var(--colors-pop), var(--tw-bg-opacity, 1));
   }
   @media not all and (min-width: 992px) {
-    .sm\:max-md\:mb-7 {
-      margin-bottom: 2.625rem;
-    }
     .sm\:max-md\:flex-col {
       flex-direction: column;
     }
@@ -12105,9 +12129,6 @@ body {
     .xsl\:md\:ml-6 {
       margin-left: 2.25rem;
     }
-    .xsl\:md\:mb-4 {
-      margin-bottom: 1.5rem;
-    }
     .xsl\:md\:max-w-container-md {
       max-width: 72.75rem;
     }
@@ -12134,9 +12155,6 @@ body {
     .sm\:md\:ml-6 {
       margin-left: 2.25rem;
     }
-    .sm\:md\:mb-4 {
-      margin-bottom: 1.5rem;
-    }
     .sm\:md\:max-w-container-md {
       max-width: 72.75rem;
     }
@@ -12192,6 +12210,9 @@ body {
   .md\:pointer-events-auto {
     pointer-events: auto;
   }
+  .md\:visible {
+    visibility: visible;
+  }
   .md\:\!fixed {
     position: fixed !important;
   }
@@ -12431,9 +12452,6 @@ body {
     margin-bottom: -1px;
   }
   @media (min-width: 992px) {
-    .md\:md\:mb-4 {
-      margin-bottom: 1.5rem;
-    }
     .md\:md\:ml-6 {
       margin-left: 2.25rem;
     }
@@ -12659,6 +12677,9 @@ body {
   .md\:w-full {
     width: 100%;
   }
+  .md\:min-w-4 {
+    min-width: 1.5rem;
+  }
   .md\:min-w-\[11\.875rem\] {
     min-width: 11.875rem;
   }
@@ -12818,6 +12839,12 @@ body {
   .md\:overflow-auto {
     overflow: auto;
   }
+  .md\:overflow-hidden {
+    overflow: hidden;
+  }
+  .md\:overflow-visible {
+    overflow: visible;
+  }
   .md\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -13215,9 +13242,6 @@ body {
   .md\:pb-3 {
     padding-bottom: 1.125rem;
   }
-  .md\:pb-4 {
-    padding-bottom: 1.5rem;
-  }
   .md\:pb-5 {
     padding-bottom: 1.875rem;
   }
@@ -13847,9 +13871,6 @@ body {
     background-color: rgba(var(--colors-pop), var(--tw-bg-opacity, 1));
   }
   @media not all and (min-width: 992px) {
-    .md\:max-md\:mb-7 {
-      margin-bottom: 2.625rem;
-    }
     .md\:max-md\:flex-col {
       flex-direction: column;
     }
@@ -13939,9 +13960,6 @@ body {
     .lg\:md\:max-w-container-md {
       max-width: 72.75rem;
     }
-    .lg\:md\:mb-4 {
-      margin-bottom: 1.5rem;
-    }
     .lg\:md\:ml-6 {
       margin-left: 2.25rem;
     }
@@ -14011,6 +14029,9 @@ body {
   .lg\:pointer-events-auto {
     pointer-events: auto;
   }
+  .lg\:visible {
+    visibility: visible;
+  }
   .lg\:\!fixed {
     position: fixed !important;
   }
@@ -14461,6 +14482,9 @@ body {
   .lg\:w-full {
     width: 100%;
   }
+  .lg\:min-w-4 {
+    min-width: 1.5rem;
+  }
   .lg\:min-w-\[11\.875rem\] {
     min-width: 11.875rem;
   }
@@ -14620,6 +14644,12 @@ body {
   .lg\:overflow-auto {
     overflow: auto;
   }
+  .lg\:overflow-hidden {
+    overflow: hidden;
+  }
+  .lg\:overflow-visible {
+    overflow: visible;
+  }
   .lg\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -15627,9 +15657,6 @@ body {
     background-color: rgba(var(--colors-pop), var(--tw-bg-opacity, 1));
   }
   @media not all and (min-width: 992px) {
-    .lg\:max-md\:mb-7 {
-      margin-bottom: 2.625rem;
-    }
     .lg\:max-md\:flex-col {
       flex-direction: column;
     }
@@ -15681,9 +15708,6 @@ body {
     .xl\:md\:max-w-container-md {
       max-width: 72.75rem;
     }
-    .xl\:md\:mb-4 {
-      margin-bottom: 1.5rem;
-    }
     .xl\:md\:ml-6 {
       margin-left: 2.25rem;
     }
@@ -15753,6 +15777,9 @@ body {
   .xl\:pointer-events-auto {
     pointer-events: auto;
   }
+  .xl\:visible {
+    visibility: visible;
+  }
   .xl\:\!fixed {
     position: fixed !important;
   }
@@ -16195,6 +16222,9 @@ body {
   .xl\:w-full {
     width: 100%;
   }
+  .xl\:min-w-4 {
+    min-width: 1.5rem;
+  }
   .xl\:min-w-\[11\.875rem\] {
     min-width: 11.875rem;
   }
@@ -16346,6 +16376,12 @@ body {
   .xl\:overflow-auto {
     overflow: auto;
   }
+  .xl\:overflow-hidden {
+    overflow: hidden;
+  }
+  .xl\:overflow-visible {
+    overflow: visible;
+  }
   .xl\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -17335,9 +17371,6 @@ body {
     background-color: rgba(var(--colors-pop), var(--tw-bg-opacity, 1));
   }
   @media not all and (min-width: 992px) {
-    .xl\:max-md\:mb-7 {
-      margin-bottom: 2.625rem;
-    }
     .xl\:max-md\:flex-col {
       flex-direction: column;
     }