@westpac/ui 1.9.1 → 1.11.0

package/dist/components/heading/heading.component.d.ts

@@ -1,2 +1,8 @@
-import { type HeadingProps } from './heading.types.js';
-export declare function Heading({ className, tag, brandHeading, size, children, uppercase, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+export declare const Heading: React.ForwardRefExoticComponent<{
+    brandHeading?: import("../../types/responsive-variants.types.js").ResponsiveVariants<boolean | undefined>;
+    children?: React.ReactNode;
+    size: import("../../types/responsive-variants.types.js").ResponsiveVariants<2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | undefined>;
+    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    uppercase?: boolean;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLHeadingElement>>;

package/dist/components/heading/heading.component.js

@@ -1,9 +1,9 @@
 'use client';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { useBreakpoint } from '../../hook/breakpoints.hook.js';
 import { resolveResponsiveVariant } from '../../utils/breakpoint.util.js';
 import { styles } from './heading.styles.js';
-export function Heading({ className, tag, brandHeading, size, children, uppercase, ...props }) {
+function BaseHeading({ className, tag, brandHeading, size, children, uppercase, ...props }, ref) {
     const sizeToTag = {
         1: 'h1',
         2: 'h2',
@@ -25,6 +25,8 @@ export function Heading({ className, tag, brandHeading, size, children, uppercas
             size: resolveResponsiveVariant(size, breakpoint),
             uppercase
         }),
+        ref: ref,
         ...props
     }, children);
 }
+export const Heading = forwardRef(BaseHeading);

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

@@ -3,6 +3,7 @@ import { type VariantProps } from 'tailwind-variants';
 import { ResponsiveVariants } from '../../types/responsive-variants.types.js';
 import { styles } from './heading.styles.js';
 type Variants = VariantProps<typeof styles>;
+export type HeadingRef = HTMLHeadingElement;
 export type HeadingProps = {
     /**
      * Whether it should be a brand heading

package/dist/components/select/components/styled-select/styled-select.styles.js

@@ -3,7 +3,7 @@ export const styles = tv({
     slots: {
         root: 'relative inline-flex',
         select: 'form-control flex-1 overflow-hidden bg-no-repeat text-ellipsis group-first/add-on-before:rounded-r-none group-first/add-on-before:!border-x group-last/add-on-after:rounded-l-none group-last/add-on-after:!border-x group-[.input-group-after]:rounded-r-none group-[.input-group-after]:border-r-0 group-[.input-group-before]:rounded-l-none group-[.input-group-before]:border-l-0 disabled:form-control-disabled',
-        caret: 'absolute top-1/2 right-2 z-100 -translate-y-1/2 text-surface-muted-vivid'
+        caret: 'pointer-events-none absolute top-1/2 right-2 z-100 -translate-y-1/2 text-surface-muted-vivid'
     },
     variants: {
         size: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "1.9.1",
+  "version": "1.11.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -253,10 +253,10 @@
     "typescript": "^5.5.4",
     "vite": "^7.3.5",
     "vitest": "^3.2.6",
-    "@westpac/style-config": "~1.0.2",
-    "@westpac/test-config": "~0.0.0",
     "@westpac/eslint-config": "~1.1.0",
-    "@westpac/ts-config": "~0.0.0"
+    "@westpac/style-config": "~1.0.2",
+    "@westpac/ts-config": "~0.0.0",
+    "@westpac/test-config": "~0.0.0"
   },
   "dependencies": {
     "@internationalized/date": "~3.10.0",

package/src/components/heading/heading.component.tsx

@@ -1,14 +1,17 @@
 'use client';
 
-import React from 'react';
+import React, { forwardRef, Ref } from 'react';
 
 import { useBreakpoint } from '../../hook/breakpoints.hook.js';
 import { resolveResponsiveVariant } from '../../utils/breakpoint.util.js';
 
 import { styles } from './heading.styles.js';
-import { type HeadingProps } from './heading.types.js';
+import { HeadingRef, type HeadingProps } from './heading.types.js';
 
-export function Heading({ className, tag, brandHeading, size, children, uppercase, ...props }: HeadingProps) {
+function BaseHeading(
+  { className, tag, brandHeading, size, children, uppercase, ...props }: HeadingProps,
+  ref: Ref<HeadingRef>,
+) {
   const sizeToTag = {
     1: 'h1',
     2: 'h2',
@@ -32,9 +35,12 @@ export function Heading({ className, tag, brandHeading, size, children, uppercas
         size: resolveResponsiveVariant(size, breakpoint),
         uppercase,
       })}
+      ref={ref}
       {...props}
     >
       {children}
     </Tag>
   );
 }
+
+export const Heading = forwardRef(BaseHeading);

package/src/components/heading/heading.types.ts

@@ -6,6 +6,7 @@ import { ResponsiveVariants } from '../../types/responsive-variants.types.js';
 import { styles } from './heading.styles.js';
 
 type Variants = VariantProps<typeof styles>;
+export type HeadingRef = HTMLHeadingElement;
 
 export type HeadingProps = {
   /**

package/src/components/select/components/styled-select/styled-select.styles.ts

@@ -5,7 +5,7 @@ export const styles = tv({
     root: 'relative inline-flex',
     select:
       'form-control flex-1 overflow-hidden bg-no-repeat text-ellipsis group-first/add-on-before:rounded-r-none group-first/add-on-before:!border-x group-last/add-on-after:rounded-l-none group-last/add-on-after:!border-x group-[.input-group-after]:rounded-r-none group-[.input-group-after]:border-r-0 group-[.input-group-before]:rounded-l-none group-[.input-group-before]:border-l-0 disabled:form-control-disabled',
-    caret: 'absolute top-1/2 right-2 z-100 -translate-y-1/2 text-surface-muted-vivid', // z-index to ensure caret displays correctly in certain focus states
+    caret: 'pointer-events-none absolute top-1/2 right-2 z-100 -translate-y-1/2 text-surface-muted-vivid', // z-index to ensure caret displays correctly in certain focus states
   },
   variants: {
     size: {