@alto-avios/alto-ui 4.3.0 → 4.4.1

package/dist/components/Icon/Icon.js

@@ -3,27 +3,27 @@ import { c as cva } from "../../index-DdUYounA.js";
 import { useState, useEffect } from "react";
 import { foregroundColorVariants } from "../../utils/foregroundColour/foregroundColor.js";
 import { backgroundColorVariants } from "../../utils/backgroundColor/backgroundColor.js";
-import '../../assets/Icon.css';const iconSize0_5x = "_iconSize0_5x_h11q1_8";
-const iconSize0_75x = "_iconSize0_75x_h11q1_12";
-const iconSize1_25x = "_iconSize1_25x_h11q1_16";
-const iconSize1_5x = "_iconSize1_5x_h11q1_20";
-const iconSize2_5x = "_iconSize2_5x_h11q1_24";
-const iconSize1x = "_iconSize1x_h11q1_39";
-const iconSize2x = "_iconSize2x_h11q1_54";
-const iconSize3x = "_iconSize3x_h11q1_64";
-const iconSize4x = "_iconSize4x_h11q1_69";
-const iconSize5x = "_iconSize5x_h11q1_74";
-const iconSize6x = "_iconSize6x_h11q1_79";
-const iconSize7x = "_iconSize7x_h11q1_84";
-const iconSize8x = "_iconSize8x_h11q1_89";
-const iconSize9x = "_iconSize9x_h11q1_94";
-const iconSize10x = "_iconSize10x_h11q1_99";
-const icon$1 = "_icon_h11q1_1";
-const fixedWidth = "_fixedWidth_h11q1_105";
-const square = "_square_h11q1_109";
-const roomy = "_roomy_h11q1_113";
+import '../../assets/Icon.css';const iconSize0_5x = "_iconSize0_5x_1wjol_8";
+const iconSize0_75x = "_iconSize0_75x_1wjol_12";
+const iconSize1_25x = "_iconSize1_25x_1wjol_16";
+const iconSize1_5x = "_iconSize1_5x_1wjol_20";
+const iconSize2_5x = "_iconSize2_5x_1wjol_24";
+const iconSize1x = "_iconSize1x_1wjol_41";
+const iconSize2x = "_iconSize2x_1wjol_59";
+const iconSize3x = "_iconSize3x_1wjol_71";
+const iconSize4x = "_iconSize4x_1wjol_77";
+const iconSize5x = "_iconSize5x_1wjol_83";
+const iconSize6x = "_iconSize6x_1wjol_89";
+const iconSize7x = "_iconSize7x_1wjol_95";
+const iconSize8x = "_iconSize8x_1wjol_101";
+const iconSize9x = "_iconSize9x_1wjol_107";
+const iconSize10x = "_iconSize10x_1wjol_113";
+const icon$1 = "_icon_1wjol_1";
+const fixedWidth = "_fixedWidth_1wjol_120";
+const square = "_square_1wjol_124";
+const roomy = "_roomy_1wjol_128";
 const styles = {
-  "icon-wrapper": "_icon-wrapper_h11q1_1",
+  "icon-wrapper": "_icon-wrapper_1wjol_1",
   iconSize0_5x,
   iconSize0_75x,
   iconSize1_25x,

package/dist/components/Link/Link.d.ts

@@ -44,14 +44,20 @@ export interface LinkProps extends AriaLinkProps {
      */
     target?: string;
     /**
+     * @deprecated Use externalLinkScreenReaderText instead
      * Aria label applied when target="_blank"
      * @default "open in new tab"
      */
     ariaLabelExternal?: string;
+    /**
+     * Specify custom screen reader text for external links
+     * @default "opens in a new tab"
+     */
+    externalLinkScreenReaderText?: string;
     /**
      * 	The focus style of the button
      */
     focusStyle?: 'default' | 'white';
 }
-declare const Link: ({ size, underline, iconStartProps, iconEndProps, href, target, focusStyle, children, ariaLabelExternal, foregroundColor, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;
+declare const Link: ({ size, underline, iconStartProps, iconEndProps, href, target, focusStyle, children, ariaLabelExternal, externalLinkScreenReaderText, foregroundColor, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;
 export default Link;

package/dist/components/Link/Link.js

@@ -1,8 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
+import { Link as Link$1 } from "react-aria-components";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
 import { Icon } from "../Icon/Icon.js";
 import { c as cva } from "../../index-DdUYounA.js";
-import { Link as Link$1 } from "react-aria-components";
 import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
 import { foregroundColorVariants } from "../../utils/foregroundColour/foregroundColor.js";
 import '../../assets/Link.css';const link$1 = "_link_52mqv_1";
@@ -56,14 +57,17 @@ const Link = ({
   target = "_self",
   focusStyle = "default",
   children,
-  ariaLabelExternal = "open in new tab",
+  ariaLabelExternal,
+  externalLinkScreenReaderText = "opens in a new tab",
   foregroundColor = "accentPrimary",
   ...props
 }) => {
-  const externalLinkProps = target === "_blank" ? {
-    rel: "noopener noreferrer",
-    "aria-label": ariaLabelExternal
-  } : {};
+  useEffect(() => {
+    if (ariaLabelExternal && process.env.NODE_ENV !== "production") {
+      console.warn("[Link] `ariaLabelExternal` prop is deprecated. Use the `externalLinkScreenReaderText` prop instead.");
+    }
+  }, [ariaLabelExternal]);
+  const isExternalLink = target === "_blank";
   const iconSize = useMemo(() => {
     switch (size) {
       case "xs":
@@ -85,14 +89,15 @@ const Link = ({
     focusStyle
   })} ${foregroundColorVariants({
     foregroundColor
-  })}`, href, target, ...externalLinkProps, ...props, children: [
+  })}`, href, target, rel: isExternalLink ? "noopener noreferrer" : void 0, ...props, children: [
     iconStartProps && /* @__PURE__ */ jsx(Icon, { className: link({
       iconStart: !!iconStartProps
     }), iconSize, ...iconStartProps }),
     children,
     iconEndProps && /* @__PURE__ */ jsx(Icon, { className: link({
       iconEnd: !!iconEndProps
-    }), iconSize, ...iconEndProps })
+    }), iconSize, ...iconEndProps }),
+    isExternalLink && /* @__PURE__ */ jsx(VisuallyHidden, { children: externalLinkScreenReaderText || ariaLabelExternal })
   ] });
 };
 export {

package/dist/components/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Link.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/ListBox/ListBox.d.ts

@@ -5,7 +5,7 @@ export interface ListBoxProps<T> extends AriaListBoxProps<T> {
 }
 export declare const ListBox: {
     <T extends object>({ children, isLoading, ...props }: ListBoxProps<T>): import("react/jsx-runtime").JSX.Element;
-    Item: ({ children, isLoading, labelLoading, ...props }: import('..').ListBoxItemProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ children, isLoading, labelLoading, announceLoadingDelay, ...props }: import('..').ListBoxItemProps) => import("react/jsx-runtime").JSX.Element;
     Group: <T extends object>(props: import('react-aria-components').ListBoxSectionProps<T> & React.RefAttributes<HTMLElement>) => React.ReactElement | null;
     GroupHeader: ({ children }: {
         children: React.ReactNode;

package/dist/components/ListBoxItem/ListBoxItem.d.ts

@@ -7,9 +7,14 @@ export interface ListBoxItemProps extends AriaListBoxItemProps {
      */
     isLoading?: boolean;
     /**
-     *  Enables disabled state
+     * Visually hidden text to show when loading for screen readers
      */
     labelLoading?: string;
+    /**
+     *  Announces loading state to screen readers after a delay (in ms)
+     *  @default 300
+     */
+    announceLoadingDelay?: number;
 }
-export declare const ListBoxItem: ({ children, isLoading, labelLoading, ...props }: ListBoxItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListBoxItem: ({ children, isLoading, labelLoading, announceLoadingDelay, ...props }: ListBoxItemProps) => import("react/jsx-runtime").JSX.Element;
 export default ListBoxItem;

package/dist/components/ListBoxItem/ListBoxItem.js

@@ -1,28 +1,40 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
 import { ListBoxItem as ListBoxItem$1, Text } from "react-aria-components";
 import { Icon } from "../Icon/Icon.js";
 import LoadingSpinner from "../LoadingSpinner/LoadingSpinner.js";
-import '../../assets/ListBoxItem.css';const listBoxItem = "_listBoxItem_vneoh_1";
-const listBoxItemLabel = "_listBoxItemLabel_vneoh_19";
-const listBoxItemIcon = "_listBoxItemIcon_vneoh_71";
-const listBoxItemSelected = "_listBoxItemSelected_vneoh_77";
+import '../../assets/ListBoxItem.css';const listBoxItem = "_listBoxItem_nivvq_1";
+const listBoxItemLabel = "_listBoxItemLabel_nivvq_19";
+const listBoxItemIcon = "_listBoxItemIcon_nivvq_71";
+const listBoxItemSelected = "_listBoxItemSelected_nivvq_77";
 const styles = {
   listBoxItem,
   listBoxItemLabel,
   listBoxItemIcon,
-  listBoxItemSelected
+  listBoxItemSelected,
+  "sr-only": "_sr-only_nivvq_88"
 };
 const ListBoxItem = ({
   children,
   isLoading,
   labelLoading = "Loading",
+  announceLoadingDelay = 300,
   ...props
 }) => {
+  const [announce, setAnnounce] = useState(false);
+  useEffect(() => {
+    if (isLoading) {
+      const timer = setTimeout(() => setAnnounce(true), announceLoadingDelay);
+      return () => clearTimeout(timer);
+    }
+    setAnnounce(false);
+  }, [isLoading, announceLoadingDelay]);
   return /* @__PURE__ */ jsxs(ListBoxItem$1, { className: styles["listBoxItem"], ...isLoading && {
     "data-loading": true
   }, textValue: typeof children === "string" ? children : void 0, ...props, children: [
     /* @__PURE__ */ jsx(Text, { slot: "label", className: styles["listBoxItemLabel"], children: isLoading ? labelLoading : children }),
-    isLoading ? /* @__PURE__ */ jsx(LoadingSpinner, { size: "1x", className: styles["listBoxItemIcon"] }) : /* @__PURE__ */ jsx("span", { className: styles["listBoxItemSelected"], children: /* @__PURE__ */ jsx(Icon, { iconName: "check", scale: "1x", padding: "square" }) })
+    /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: styles["sr-only"], children: announce ? labelLoading : "" }),
+    isLoading ? /* @__PURE__ */ jsx(LoadingSpinner, { size: "1.25x", className: styles["listBoxItemIcon"] }) : /* @__PURE__ */ jsx("span", { className: styles["listBoxItemSelected"], children: /* @__PURE__ */ jsx(Icon, { iconName: "check", scale: "1x", padding: "square" }) })
   ] });
 };
 export {

package/dist/components/ListBoxItem/ListBoxItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListBoxItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ListBoxItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/LoadingSpinner/LoadingSpinner.d.ts

@@ -1,12 +1,15 @@
+import { ProgressBarProps } from 'react-aria-components';
 import { IconSize } from '../Icon/Icon';
 import { ForegroundVariants } from '../../utils/foregroundColour/foregroundColor';
-export interface LoadingSpinnerProps {
+export interface LoadingSpinnerProps extends Omit<ProgressBarProps, 'value' | 'minValue' | 'maxValue' | 'children'> {
     /**
      * What size loading spinner
      */
     size?: IconSize;
     /**
      * What size loading spinner
+     * @deprecated Use size instead
+     * @ignore
      */
     buttonSize?: 'sm' | 'md' | 'lg' | undefined;
     /**
@@ -14,7 +17,16 @@ export interface LoadingSpinnerProps {
      * @default "secondary"
      */
     styleVariant?: ForegroundVariants['foregroundColor'];
+    /**
+     * Aria label for the loading spinner for screen readers
+     * @default "Loading"
+     */
+    'aria-label'?: string;
+    /**
+     * Additional classes to apply to the loading spinner container
+     * @ignore
+     */
     className?: string;
 }
-declare const LoadingSpinner: ({ size, buttonSize, styleVariant, className, }: LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;
+declare const LoadingSpinner: ({ size, buttonSize, styleVariant, "aria-label": ariaLabel, className, ...props }: LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;
 export default LoadingSpinner;

package/dist/components/LoadingSpinner/LoadingSpinner.js

@@ -1,26 +1,80 @@
 import { jsx } from "react/jsx-runtime";
 import { c as cva } from "../../index-DdUYounA.js";
 import { ProgressBar } from "react-aria-components";
-import { Icon } from "../Icon/Icon.js";
-import '../../assets/LoadingSpinner.css';const loadingSpinner$1 = "_loadingSpinner_1kyw6_1";
-const sm = "_sm_1kyw6_5";
-const md = "_md_1kyw6_9";
-const lg = "_lg_1kyw6_13";
+import { foregroundColorVariants } from "../../utils/foregroundColour/foregroundColor.js";
+import * as React from "react";
+import { forwardRef } from "react";
+import '../../assets/LoadingSpinner.css';const loadingSpinner$1 = "_loadingSpinner_1pdea_1";
+const iconWrapper = "_iconWrapper_1pdea_13";
+const spinner = "_spinner_1pdea_21";
+const iconSize0_5x = "_iconSize0_5x_1pdea_37";
+const iconSize0_75x = "_iconSize0_75x_1pdea_42";
+const iconSize1x = "_iconSize1x_1pdea_47";
+const iconSize1_25x = "_iconSize1_25x_1pdea_52";
+const iconSize1_5x = "_iconSize1_5x_1pdea_57";
+const iconSize2x = "_iconSize2x_1pdea_62";
+const iconSize2_5x = "_iconSize2_5x_1pdea_67";
+const iconSize3x = "_iconSize3x_1pdea_72";
+const iconSize4x = "_iconSize4x_1pdea_77";
+const iconSize5x = "_iconSize5x_1pdea_82";
+const iconSize6x = "_iconSize6x_1pdea_87";
+const iconSize7x = "_iconSize7x_1pdea_92";
+const iconSize8x = "_iconSize8x_1pdea_97";
+const iconSize9x = "_iconSize9x_1pdea_102";
+const iconSize10x = "_iconSize10x_1pdea_107";
 const styles = {
   loadingSpinner: loadingSpinner$1,
-  sm,
-  md,
-  lg
+  iconWrapper,
+  spinner,
+  iconSize0_5x,
+  iconSize0_75x,
+  iconSize1x,
+  iconSize1_25x,
+  iconSize1_5x,
+  iconSize2x,
+  iconSize2_5x,
+  iconSize3x,
+  iconSize4x,
+  iconSize5x,
+  iconSize6x,
+  iconSize7x,
+  iconSize8x,
+  iconSize9x,
+  iconSize10x
 };
+const SvgLoadingSpinner = ({
+  title,
+  titleId,
+  ...props
+}, ref) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ref, "aria-labelledby": titleId, ...props }, title ? /* @__PURE__ */ React.createElement("title", { id: titleId }, title) : null, /* @__PURE__ */ React.createElement("path", { opacity: 0.4, d: "M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z" }), /* @__PURE__ */ React.createElement("path", { d: "M24 12C24 10.4241 23.6896 8.86371 23.0865 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.3709 2.40042 18.0481 1.5165 16.5922 0.913445C15.1363 0.310389 13.5758 -6.88831e-08 12 0C11.1715 0 10.5 0.671573 10.5 1.5C10.5 2.32843 11.1715 3 12 3C13.1819 3 14.3522 3.23279 15.4441 3.68508C16.5361 4.13738 17.5282 4.80031 18.3639 5.63604C19.1997 6.47177 19.8626 7.46392 20.3149 8.55585C20.7672 9.64778 21 10.8181 21 12C21 12.8284 21.6715 13.5 22.4999 13.5C23.3284 13.5 24 12.8284 24 12Z" }));
+const ForwardRef = forwardRef(SvgLoadingSpinner);
 const loadingSpinner = cva(styles.loadingSpinner, {
   variants: {
     buttonSize: {
       sm: styles.sm,
       md: styles.md,
       lg: styles.lg
+    },
+    size: {
+      "0.5x": styles.iconSize0_5x,
+      "0.75x": styles.iconSize0_75x,
+      "1x": styles.iconSize1x,
+      "1.25x": styles.iconSize1_25x,
+      "1.5x": styles.iconSize1_5x,
+      "2x": styles.iconSize2x,
+      "2.5x": styles.iconSize2_5x,
+      "3x": styles.iconSize3x,
+      "4x": styles.iconSize4x,
+      "5x": styles.iconSize5x,
+      "6x": styles.iconSize6x,
+      "7x": styles.iconSize7x,
+      "8x": styles.iconSize8x,
+      "9x": styles.iconSize9x,
+      "10x": styles.iconSize10x
     }
   },
   defaultVariants: {
+    size: "1x",
     buttonSize: "md"
   }
 });
@@ -28,11 +82,18 @@ const LoadingSpinner = ({
   size = "2x",
   buttonSize = "md",
   styleVariant = "secondary",
-  className
+  "aria-label": ariaLabel = "Loading",
+  className,
+  ...props
 }) => {
-  return /* @__PURE__ */ jsx(ProgressBar, { className: `${loadingSpinner({
-    buttonSize
-  })}  ${className}`, "aria-label": "Loading", children: /* @__PURE__ */ jsx(Icon, { iconName: "spinner-third", iconPrefix: "fad", iconSize: size, color: styleVariant, spin: true, buttonsize: buttonSize, padding: "square" }) });
+  return /* @__PURE__ */ jsx(ProgressBar, { isIndeterminate: true, className: `${loadingSpinner({
+    buttonSize,
+    size
+  })} ${className} ${foregroundColorVariants({
+    foregroundColor: styleVariant
+  })} `, "aria-valuetext": ariaLabel, "aria-label": ariaLabel, ...props, children: /* @__PURE__ */ jsx("span", { className: `${styles.iconWrapper} ${loadingSpinner({
+    size
+  })}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx(ForwardRef, { className: styles.spinner }) }) });
 };
 export {
   LoadingSpinner as default

package/dist/components/LoadingSpinner/LoadingSpinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingSpinner.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"LoadingSpinner.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Menu/Menu.d.ts

@@ -5,7 +5,7 @@ export interface MenuProps {
     /**
      * The label text for the menu button
      */
-    label: string;
+    label?: string;
     /**
      * Accessible label for the menu (for screen readers)
      * Defaults to the button label if not provided
@@ -76,6 +76,53 @@ export interface MenuProps {
      * Icon props for the end of the button
      */
     iconEndProps?: ButtonProps['iconEndProps'];
+    /**
+     * Callback function that is called when the open state of the menu changes
+     */
+    onOpenChange?: (isOpen: boolean) => void;
 }
-export declare const Menu: ({ label, "aria-label": ariaLabel, isDisabled, placement, buttonEmphasis, buttonStyleVariant, buttonOpenVariant, alignToElementId, shouldFlip, openOnHoverAndFocus, allowTabOut, closeOnHover, children, iconStartProps, iconEndProps, }: MenuProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Component to replace default Button with another button-like component/element
+ */
+export declare const Trigger: React.ForwardRefExoticComponent<import('react-aria').AriaButtonOptions<"button"> & import('react-aria').HoverProps & {
+    as?: "button" | undefined;
+    elementType?: "a" | "button";
+    styleVariant?: "accent" | "critical" | "neutral" | "white";
+    emphasis?: "primary" | "secondary" | "tertiary" | "quaternary";
+    size?: "lg" | "sm" | "md";
+    iconEndProps?: import('..').IconProps;
+    iconStartProps?: import('..').IconProps;
+    isLoading?: boolean;
+    textAlign?: "left" | "right" | "center";
+    children?: React.ReactNode;
+    type?: "button" | "submit" | "reset";
+    fullWidth?: boolean;
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    focusStyle?: "default" | "white";
+    slot?: string;
+    iconButton?: boolean;
+    passthroughProps?: Partial<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>> | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export declare const Menu: {
+    ({ label, "aria-label": ariaLabel, isDisabled, placement, buttonEmphasis, buttonStyleVariant, buttonOpenVariant, alignToElementId, shouldFlip, openOnHoverAndFocus, allowTabOut, closeOnHover, children, iconStartProps, iconEndProps, onOpenChange, }: MenuProps): import("react/jsx-runtime").JSX.Element;
+    Trigger: React.ForwardRefExoticComponent<import('react-aria').AriaButtonOptions<"button"> & import('react-aria').HoverProps & {
+        as?: "button" | undefined;
+        elementType?: "a" | "button";
+        styleVariant?: "accent" | "critical" | "neutral" | "white";
+        emphasis?: "primary" | "secondary" | "tertiary" | "quaternary";
+        size?: "lg" | "sm" | "md";
+        iconEndProps?: import('..').IconProps;
+        iconStartProps?: import('..').IconProps;
+        isLoading?: boolean;
+        textAlign?: "left" | "right" | "center";
+        children?: React.ReactNode;
+        type?: "button" | "submit" | "reset";
+        fullWidth?: boolean;
+        target?: "_blank" | "_self" | "_parent" | "_top";
+        focusStyle?: "default" | "white";
+        slot?: string;
+        iconButton?: boolean;
+        passthroughProps?: Partial<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>> | undefined;
+    } & React.RefAttributes<HTMLButtonElement>>;
+};
 export default Menu;

package/dist/components/Menu/Menu.js

@@ -1,7 +1,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useId, useRef, useEffect, useState } from "react";
+import React__default, { forwardRef, useId, useRef, useEffect, useState } from "react";
 import { Button } from "../Button/Button.js";
 import { Popover } from "../Popover/Popover.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { useObjectRef } from "@react-aria/utils";
+import { useButton } from "@react-aria/button";
 import '../../assets/Menu.css';const menuContainer = "_menuContainer_qw7ps_1";
 const menuContent = "_menuContent_qw7ps_6";
 const styles = {
@@ -15,7 +18,8 @@ const menuRegistry = {
   },
   getActiveMenu: () => menuRegistry.activeMenuId
 };
-const useMenuState = (menuId) => {
+const useMenuState = (menuId, onOpenChange) => {
+  const isMounted = useRef(false);
   const [isOpen, setIsOpen] = useState(false);
   const [preventFocusOpen, setPreventFocusOpen] = useState(false);
   const [openedViaKeyboard, setOpenedViaKeyboard] = useState(false);
@@ -48,6 +52,12 @@ const useMenuState = (menuId) => {
       openMenu(isKeyboardFocused);
     }
   };
+  useEffect(() => {
+    if (onOpenChange && isMounted.current) onOpenChange(isOpen);
+  }, [isOpen]);
+  useEffect(() => {
+    isMounted.current = true;
+  }, []);
   return {
     isOpen,
     setIsOpen,
@@ -303,6 +313,25 @@ const useMenuCloseHandling = (menuRef, containerRef, isOpen, menuId, closeMenu)
     };
   }, [isOpen, menuId, closeMenu, menuRef, containerRef]);
 };
+const Trigger = forwardRef(function Trigger2({
+  children,
+  ...triggerProps
+}, forwardedRef) {
+  const element = React__default.Children.only(children);
+  const ref = useObjectRef(forwardedRef);
+  const elementProps = {
+    ...triggerProps,
+    ...element.props
+  };
+  const {
+    buttonProps
+  } = useButton(elementProps, ref);
+  const props = element.type !== Button && element.type !== IconButton ? buttonProps : elementProps;
+  return React__default.cloneElement(element, {
+    ...props,
+    ref
+  });
+});
 const Menu = ({
   label,
   "aria-label": ariaLabel,
@@ -318,7 +347,8 @@ const Menu = ({
   closeOnHover = true,
   children,
   iconStartProps,
-  iconEndProps
+  iconEndProps,
+  onOpenChange
 }) => {
   const uniqueId = useId();
   const menuId = `menu-${uniqueId}`;
@@ -335,7 +365,7 @@ const Menu = ({
     closeMenu,
     openMenu,
     toggleMenu
-  } = useMenuState(menuId);
+  } = useMenuState(menuId, onOpenChange);
   const {
     handleMenuKeyDown,
     getFocusableElements
@@ -425,13 +455,31 @@ const Menu = ({
     setOpenedViaKeyboard(isKeyboardFocused);
     toggleMenu();
   };
+  const defaultTriggerProps = {
+    ref: buttonRef,
+    "aria-haspopup": true,
+    "aria-expanded": isOpen,
+    onPress: handleButtonPress,
+    onKeyDown: handleKeyDown
+  };
+  const menuChildren = React__default.Children.toArray(children);
+  let menuItems = children;
+  let trigger = /* @__PURE__ */ jsx(Button, { emphasis: buttonEmphasis, styleVariant: currentStyleVariant, isDisabled, iconStartProps, iconEndProps, ...defaultTriggerProps, children: label });
+  const triggerIndex = menuChildren.findIndex((child) => (child == null ? void 0 : child.type) === Trigger);
+  const customTrigger = menuChildren[triggerIndex];
+  if (React__default.isValidElement(customTrigger)) {
+    trigger = React__default.cloneElement(customTrigger, defaultTriggerProps);
+    menuItems = menuChildren.filter((_, index) => index !== triggerIndex);
+  }
   return /* @__PURE__ */ jsxs("div", { className: styles.menuContainer, ref: containerRef, children: [
-    /* @__PURE__ */ jsx(Button, { ref: buttonRef, emphasis: buttonEmphasis, styleVariant: currentStyleVariant, isDisabled, onPress: handleButtonPress, onKeyDown: handleKeyDown, "aria-haspopup": "true", "aria-expanded": isOpen, iconStartProps, iconEndProps, children: label }),
-    isOpen && /* @__PURE__ */ jsx(Popover, { state: menuTriggerState, triggerRef: getAlignmentTarget(), hasArrow: false, placement, shouldFlip, isNonModal: true, allowTabOut, autoFocus: openedViaKeyboard, children: /* @__PURE__ */ jsx("div", { className: styles.menuContent, ref: menuRef, onKeyDown: handleMenuKeyDown, role: "menu", "aria-label": ariaLabel || label, tabIndex: -1, children }) })
+    trigger,
+    isOpen && /* @__PURE__ */ jsx(Popover, { state: menuTriggerState, triggerRef: getAlignmentTarget(), hasArrow: false, placement, shouldFlip, isNonModal: true, allowTabOut, autoFocus: openedViaKeyboard, children: /* @__PURE__ */ jsx("div", { className: styles.menuContent, ref: menuRef, onKeyDown: handleMenuKeyDown, role: "menu", "aria-label": ariaLabel || label, tabIndex: -1, children: menuItems }) })
   ] });
 };
+Menu.Trigger = Trigger;
 export {
   Menu,
+  Trigger,
   Menu as default
 };
 //# sourceMappingURL=Menu.js.map

package/dist/components/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Menu.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/MonthYearField/MonthYearField.d.ts

@@ -103,5 +103,9 @@ export interface MonthYearFieldRef {
         year: string;
     }) => void;
 }
+/**
+ * @deprecated This component is no longer in use and will be removed in future versions.
+ *
+ */
 export declare const MonthYearField: React.ForwardRefExoticComponent<MonthYearFieldProps & React.RefAttributes<MonthYearFieldRef>>;
 export default MonthYearField;

package/dist/components/MonthYearField/MonthYearField.js

@@ -77,8 +77,13 @@ const MonthYearField = forwardRef((props, ref) => {
     placeholderYear = yearFormat === 4 ? "YYYY" : "YY",
     id: providedId,
     name,
+    errorMessage,
+    isInvalid,
     ...fieldProps
   } = props;
+  if (process.env.NODE_ENV !== "production") {
+    console.warn("MonthYearField is deprecated and will be removed in a future version. ");
+  }
   const monthRef = useRef(null);
   const yearRef = useRef(null);
   const [monthValueInternal, setMonthValue] = React__default.useState(monthValueControlled ?? "");
@@ -313,9 +318,9 @@ const MonthYearField = forwardRef((props, ref) => {
     onFocus == null ? void 0 : onFocus(e);
   }, [onFocus]);
   const combinedValue = monthValue && yearValue ? `${monthValue.padStart(2, "0")}/${yearValue}` : "";
-  return /* @__PURE__ */ jsxs(Field, { as: FieldWrapper, ...fieldProps, isDisabled, isRequired, labelFor: id, className: styles.monthYearField, children: [
+  return /* @__PURE__ */ jsxs(Field, { as: FieldWrapper, ...fieldProps, isDisabled, isRequired, errorMessage, isInvalid, labelFor: id, className: styles.monthYearField, children: [
     name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: combinedValue }),
-    /* @__PURE__ */ jsxs("div", { className: styles.inputsContainer, ...!!(props == null ? void 0 : props.errorMessage) || (props == null ? void 0 : props.isInvalid) ? {
+    /* @__PURE__ */ jsxs("div", { className: styles.inputsContainer, ...!!errorMessage || isInvalid ? {
       "data-invalid": true
     } : {}, children: [
       /* @__PURE__ */ jsx(Input, { ref: monthRef, id: `${id}-month`, name: `${id}-month`, inputMode: "numeric", "aria-label": labelMonth, placeholder: placeholderMonth, value: monthValue, onChange: handleMonthChange, onBlur: handleMonthBlur, onFocus: handleMonthFocus, onKeyDown: handleMonthKeyDown, maxLength: 2, className: styles.input, autoComplete: autoCompleteMonth, "data-segment": "month", type: "text" }),

package/dist/components/MonthYearField/MonthYearField.js.map

@@ -1 +1 @@
-{"version":3,"file":"MonthYearField.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MonthYearField.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/PasswordField/PasswordField.js

@@ -39,27 +39,22 @@ const PasswordField = forwardRef(({
   const [internalValue, setInternalValue] = useState(props == null ? void 0 : props.defaultValue);
   const value = (props == null ? void 0 : props.value) ?? internalValue;
   const isVisibleState = (props == null ? void 0 : props.isVisible) ?? internalVisible;
-  const inputId = React__default.useId();
-  const descriptionId = React__default.useId();
-  const errorId = React__default.useId();
   const requirementsId = React__default.useId();
-  const hasDescription = !!props.description;
   const hasValidations = !!((_a = props.strengthValidations) == null ? void 0 : _a.length);
-  const hasError = !!props.isInvalid;
-  const ariaDescribedBy = [hasDescription && descriptionId, hasValidations && requirementsId, props["aria-describedby"]].filter(Boolean).join(" ");
+  const ariaDescribedBy = [hasValidations && requirementsId, props["aria-describedby"]].filter(Boolean).join(" ") || void 0;
   const handleChange = React__default.useCallback((e) => {
     var _a2;
     setInternalValue(e.target.value);
     (_a2 = props == null ? void 0 : props.onChange) == null ? void 0 : _a2.call(props, e.target.value);
-  }, [props == null ? void 0 : props.onChange]);
+  }, [props.onChange]);
   const srLabels = useMemo(() => ({
     ...DEFAULT_SR_LABELS,
     ...screenReaderStrengthLabels ?? {}
   }), [screenReaderStrengthLabels]);
   const tooltipLabel = isVisibleState ? tooltipLabelHidePassword : tooltipLabelShowPassword;
   return /* @__PURE__ */ jsxs("div", { className: styles["passwordField__wrapper"], children: [
-    /* @__PURE__ */ jsx(Field, { as: TextField, className: styles.passwordField, label: "Password", hasEndIcon: true, labelFor: (props == null ? void 0 : props.labelFor) ?? inputId, descriptionId: hasDescription ? descriptionId : void 0, errorId: hasError ? errorId : void 0, ...props, children: /* @__PURE__ */ jsx("div", { className: styles["passwordField"], children: /* @__PURE__ */ jsxs(Group, { children: [
-      /* @__PURE__ */ jsx(Input, { id: (props == null ? void 0 : props.labelFor) ?? inputId, ref, type: isVisibleState ? "text" : "password", value, onChange: handleChange, "aria-describedby": ariaDescribedBy, "aria-errormessage": hasError ? errorId : void 0, "aria-invalid": hasError || void 0 }),
+    /* @__PURE__ */ jsx(Field, { as: TextField, className: styles.passwordField, label: "Password", hasEndIcon: true, ...props, children: /* @__PURE__ */ jsx("div", { className: styles["passwordField"], children: /* @__PURE__ */ jsxs(Group, { children: [
+      /* @__PURE__ */ jsx(Input, { ref, type: isVisibleState ? "text" : "password", value, onChange: handleChange, "aria-describedby": ariaDescribedBy }),
       /* @__PURE__ */ jsx(IconButton, { size: "sm", iconProps: isVisibleState ? {
         iconName: "eye",
         iconPrefix: "fas"

package/dist/components/PasswordField/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PasswordField.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}