@axa-fr/canopee-react 2.0.0-alpha.68 → 2.0.0-alpha.69

package/dist/distributeur/ButtonMultiActions/ButtonMultiActions.d.ts

@@ -0,0 +1,10 @@
+import "@axa-fr/canopee-css/distributeur/MultiActionsButton/MultiActionsButton.css";
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export type ButtonMultiActionsProps = {
+    label?: string;
+    menuLabel?: string;
+    align?: "auto" | "left" | "right";
+} & Omit<ComponentPropsWithoutRef<"button">, "children"> & {
+    children: ReactNode;
+};
+export declare const ButtonMultiActions: ({ label, menuLabel, align, className, id, onClick, onKeyDown, onMouseDown, children, ...buttonProps }: ButtonMultiActionsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/ButtonMultiActions/ButtonMultiActions.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/MultiActionsButton/MultiActionsButton.css";
+import chevronDown from "@material-symbols/svg-400/outlined/keyboard_arrow_down.svg";
+import { useId, useRef, } from "react";
+import { Button } from "../Button/Button";
+import { Svg } from "../Svg";
+import { getClassName } from "../utilities/helpers/getClassName";
+export const ButtonMultiActions = ({ label = "Actions", menuLabel = "Actions supplémentaires", align = "auto", className, id, onClick, onKeyDown, onMouseDown, children, ...buttonProps }) => {
+    const generatedId = useId();
+    const menuId = `${id ?? `af-button-multi-actions-${generatedId}`}-menu`;
+    const containerRef = useRef(null);
+    const menuRef = useRef(null);
+    const triggerRef = useRef(null);
+    const handleMenuToggle = (event) => {
+        const isOpen = event.newState === "open";
+        triggerRef.current?.setAttribute("aria-expanded", String(isOpen));
+        if (!isOpen) {
+            triggerRef.current?.focus();
+        }
+    };
+    // Open the menu and focus its first item when navigating with ArrowDown
+    const handleTriggerKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || menuRef.current?.matches(":popover-open"))
+            return;
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            menuRef.current?.showPopover();
+        }
+    };
+    // Close the menu once an action inside it has been activated
+    const handleMenuClick = (event) => {
+        if (event.target !== event.currentTarget) {
+            menuRef.current?.hidePopover();
+        }
+    };
+    // Close the menu when the user presses Escape, returning focus to the trigger
+    const handleMenuKeyDown = (event) => {
+        if (event.key === "Escape" || event.key === "Esc") {
+            event.preventDefault();
+            menuRef.current?.hidePopover();
+        }
+    };
+    return (_jsxs("div", { className: "af-button-multi-actions", ref: containerRef, children: [_jsx(Button, { ref: triggerRef, variant: "ghost", className: getClassName({
+                    baseClassName: "af-button-multi-actions__trigger",
+                    modifiers: [align],
+                    className,
+                }), "aria-haspopup": "menu", "aria-controls": menuId, "aria-expanded": "false", onClick: onClick, onKeyDown: handleTriggerKeyDown, onMouseDown: onMouseDown, ...buttonProps, popoverTarget: menuId, rightIcon: _jsx(Svg, { src: chevronDown, alt: "", "aria-hidden": "true", className: getClassName({
+                        baseClassName: "af-button-multi-actions__icon",
+                    }) }), children: label }), _jsx("div", { popover: "auto", id: menuId, role: "menu", "aria-label": menuLabel, tabIndex: -1, className: "af-button-multi-actions__menu", ref: menuRef, onToggle: handleMenuToggle, onKeyDown: handleMenuKeyDown, onClick: handleMenuClick, children: children })] }));
+};

package/dist/distributeur/ButtonMultiActions/index.d.ts

@@ -0,0 +1,2 @@
+export { ButtonMultiActions } from "./ButtonMultiActions";
+export type { ButtonMultiActionsProps } from "./ButtonMultiActions";

package/dist/distributeur/ButtonMultiActions/index.js

@@ -0,0 +1 @@
+export { ButtonMultiActions } from "./ButtonMultiActions";

package/dist/distributeur.d.ts

@@ -32,6 +32,7 @@ export { Footer } from "./distributeur/Layout/Footer";
 export { Header, HeaderTitle, Infos, MenuTitleWrapper, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, ToggleButton, User, type AnchorNavBarItem, } from "./distributeur/Layout/Header";
 export { MainContainer } from "./distributeur/Layout/MainContainer/MainContainer";
 export { Link, type LinkProps } from "./distributeur/Link/Link";
+export { ButtonMultiActions, type ButtonMultiActionsProps, } from "./distributeur/ButtonMultiActions";
 export { MandatoryMention } from "./distributeur/MandatoryMention/MandatoryMention";
 export { BooleanModal, Modal, ModalBody, ModalFooter, ModalHeader, ModalHeaderBase, } from "./distributeur/ModalAgent";
 export { ArticleRestitution, HeaderRestitution, Restitution, RestitutionList, SectionRestitution, SectionRestitutionColumn, SectionRestitutionRow, SectionRestitutionTitle, } from "./distributeur/Restitution";

package/dist/distributeur.js

@@ -31,6 +31,7 @@ export { Footer } from "./distributeur/Layout/Footer";
 export { Header, HeaderTitle, Infos, MenuTitleWrapper, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, ToggleButton, User, } from "./distributeur/Layout/Header";
 export { MainContainer } from "./distributeur/Layout/MainContainer/MainContainer";
 export { Link } from "./distributeur/Link/Link";
+export { ButtonMultiActions, } from "./distributeur/ButtonMultiActions";
 export { MandatoryMention } from "./distributeur/MandatoryMention/MandatoryMention";
 export { BooleanModal, Modal, ModalBody, ModalFooter, ModalHeader, ModalHeaderBase, } from "./distributeur/ModalAgent";
 export { ArticleRestitution, HeaderRestitution, Restitution, RestitutionList, SectionRestitution, SectionRestitutionColumn, SectionRestitutionRow, SectionRestitutionTitle, } from "./distributeur/Restitution";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/canopee-react",
-  "version": "2.0.0-alpha.68",
+  "version": "2.0.0-alpha.69",
   "description": "Package React - Design System Canopée",
   "exports": {
     "./distributeur": {
@@ -53,7 +53,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/canopee-css": "2.0.0-alpha.68",
+    "@axa-fr/canopee-css": "2.0.0-alpha.69",
     "@material-symbols/svg-400": ">= 0.19.0",
     "@material-symbols/svg-700": ">= 0.19.0",
     "react": ">= 19"