@alto-avios/alto-ui 3.6.0 → 3.8.0

package/dist/components/Dialog/Dialog.d.ts

@@ -23,6 +23,11 @@ export interface DialogProps extends AriaDialogProps {
      * Shows/hides the close (X) button in header
      */
     hasDismissButton?: boolean;
+    /**
+     * Text for the close button's tooltip and aria-label
+     * @default "Close dialog"
+     */
+    dismissButtonLabel?: string;
     /**
      * ARIA role - use 'alertdialog' for important messages
      */

package/dist/components/Dialog/Dialog.js

@@ -45,6 +45,7 @@ function DialogWrapper({
     size = "medium",
     modal = false,
     hasDismissButton = true,
+    dismissButtonLabel = "Close dialog",
     role = "dialog",
     id
   } = props;
@@ -74,11 +75,7 @@ function DialogWrapper({
   const headerId = props["aria-labelledby"] || `${id}-header`;
   const contentId = props["aria-describedby"] || `${id}-content`;
   return /* @__PURE__ */ jsxs("div", { className: `${styles.dialogWrapper} ${modal ? styles.modal : ""}`, children: [
-    modal && /* @__PURE__ */ jsx("div", { className: styles.overlay, ...underlayProps, onClick: onClose, onKeyDown: (e) => {
-      if (e.key === "Enter" || e.key === "Space") {
-        onClose == null ? void 0 : onClose();
-      }
-    }, role: "button", tabIndex: 0 }),
+    modal && /* @__PURE__ */ jsx("div", { className: styles.overlay, ...underlayProps, onClick: onClose, "aria-hidden": "true" }),
     /* @__PURE__ */ jsx(FocusScope, { contain: true, restoreFocus: true, autoFocus: false, children: /* @__PURE__ */ jsxs("div", { ...overlayProps, ...dialogProps, ...modalProps, ref, className: `${styles.dialog} ${styles[size]}`, "data-size": size, id, role, "aria-labelledby": headerId, "aria-describedby": contentId, children: [
       /* @__PURE__ */ jsxs("div", { className: `${styles.dialogContent} ${!hasHeader ? styles.noHeader : ""}`, children: [
         hasHeader && /* @__PURE__ */ jsx("div", { className: styles.dialogHeader, id: headerId, children: headerChild }),
@@ -88,7 +85,7 @@ function DialogWrapper({
         iconName: "close",
         iconPrefix: "far",
         iconSize: "1x"
-      }, tooltipLabel: "Close dialog", "aria-label": "Close dialog" }) })
+      }, tooltipLabel: dismissButtonLabel, "aria-label": dismissButtonLabel }) })
     ] }) })
   ] });
 }

package/dist/components/Dialog/Dialog.js.map

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

package/dist/components/FieldHeader/FieldHeader.d.ts

@@ -6,6 +6,7 @@ export interface FieldHeaderProps {
     isInvalid?: boolean;
     isRequired?: boolean;
     labelFor?: string;
+    optionalTranslation?: string;
 }
-export declare const FieldHeader: ({ label, description, isInvalid, isRequired, errorMessage, labelFor, }: FieldHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FieldHeader: ({ label, description, isInvalid, isRequired, errorMessage, labelFor, optionalTranslation, }: FieldHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default FieldHeader;

package/dist/components/FieldHeader/FieldHeader.js

@@ -13,12 +13,13 @@ const FieldHeader = ({
   isInvalid,
   isRequired,
   errorMessage,
-  labelFor
+  labelFor,
+  optionalTranslation = "Optional"
 }) => {
   return /* @__PURE__ */ jsxs("div", { className: styles.fieldHeader, "data-invalid": isInvalid ? true : void 0, children: [
     /* @__PURE__ */ jsx("div", { className: styles["label-container"], children: label && /* @__PURE__ */ jsxs(FieldLabel, { required: isRequired ? true : void 0, htmlFor: labelFor, children: [
       label,
-      !isRequired && ` (Optional)`
+      !isRequired && ` (${optionalTranslation})`
     ] }) }),
     description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
     /* @__PURE__ */ jsx(FieldError, { children: errorMessage })

package/dist/components/FieldHeader/FieldHeader.js.map

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

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

@@ -57,9 +57,15 @@ export interface MenuProps {
      * @default true
      */
     allowTabOut?: boolean;
+    /**
+     * Whether the menu should close when mouse leaves the menu area
+     * @default true
+     */
+    closeOnHover?: boolean;
     /**
      * The content to display inside the menu (as JSX children)
-     * Can be custom HTML content
+     * Can be custom HTML content. Interactive elements work normally.
+     * Add data-menu-close="true" to elements that should close the menu when clicked.
      */
     children: React.ReactNode;
     /**
@@ -71,5 +77,5 @@ export interface MenuProps {
      */
     iconEndProps?: ButtonProps['iconEndProps'];
 }
-export declare const Menu: ({ label, "aria-label": ariaLabel, isDisabled, placement, buttonEmphasis, buttonStyleVariant, buttonOpenVariant, alignToElementId, shouldFlip, openOnHoverAndFocus, allowTabOut, children, iconStartProps, iconEndProps, }: MenuProps) => import("react/jsx-runtime").JSX.Element;
+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;
 export default Menu;