@aurora-ds/components 0.24.6 → 0.24.7

package/dist/cjs/components/overlay/menu/Menu.props.d.ts

@@ -6,4 +6,9 @@ export type MenuProps = {
     children: ReactNode;
     anchorOrigin?: AnchorOrigin;
     width?: CSSProperties['width'];
+    /**
+     * Désactive l'animation/transition d'apparition du menu
+     * @default false
+     */
+    disableAnimation?: boolean;
 };

package/dist/cjs/components/overlay/menu/Menu.styles.d.ts

@@ -1,4 +1,13 @@
+import { CSSProperties } from 'react';
 import { AnchorOrigin, AnchorPosition } from '@hooks/useAnchorPosition.types';
+type MenuStyleParams = {
+    isFadingIn: boolean;
+    anchorOrigin: AnchorOrigin;
+    position: AnchorPosition;
+    width?: CSSProperties['width'];
+    disableAnimation?: boolean;
+};
 export declare const MENU_STYLES: {
-    root: (isFadingIn: boolean, anchorOrigin: AnchorOrigin, position: AnchorPosition, width?: import("csstype").Property.Width<string | number> | undefined) => string;
+    root: (args_0: MenuStyleParams) => string;
 };
+export {};

package/dist/cjs/index.js

@@ -1405,7 +1405,7 @@ const SelectItem = ({ option, isSelected = false, onSelect }) => {
 SelectItem.displayName = 'SelectItem';
 
 const MENU_STYLES = theme.createStyles((theme) => ({
-    root: (isFadingIn, anchorOrigin, position, width) => ({
+    root: ({ isFadingIn, anchorOrigin, position, width, disableAnimation = false }) => ({
         position: 'fixed',
         zIndex: theme.zIndex.popover,
         marginTop: theme.spacing.xs,
@@ -1417,10 +1417,10 @@ const MENU_STYLES = theme.createStyles((theme) => ({
         maxHeight: MENU_ITEM_SIZE * 8,
         overflowY: 'auto',
         width,
-        opacity: isFadingIn ? 1 : 0,
-        transform: isFadingIn ? 'scale(1)' : 'scale(0.95)',
+        opacity: disableAnimation ? 1 : (isFadingIn ? 1 : 0),
+        transform: disableAnimation ? 'scale(1)' : (isFadingIn ? 'scale(1)' : 'scale(0.95)'),
         transformOrigin: anchorOrigin === 'right' ? 'top right' : 'top left',
-        transition: `opacity ${DEFAULT_TRANSITION_DURATION_MS}ms ease-out, transform ${DEFAULT_TRANSITION_DURATION_MS}ms ease-out`,
+        transition: disableAnimation ? 'none' : `opacity ${DEFAULT_TRANSITION_DURATION_MS}ms ease-out, transform ${DEFAULT_TRANSITION_DURATION_MS}ms ease-out`,
         top: position?.top ?? 0,
         left: position?.left ?? 0,
         visibility: position ? 'visible' : 'hidden',
@@ -1554,7 +1554,7 @@ const useTransitionRender = (isOpen, duration = DEFAULT_TRANSITION_DURATION_MS)
     };
 };
 
-const Menu = ({ anchor, onClose, children, anchorOrigin = 'right', width }) => {
+const Menu = ({ anchor, onClose, children, anchorOrigin = 'right', width, disableAnimation = false }) => {
     // refs
     const menuRef = React.useRef(null);
     const anchorRef = React.useRef(null);
@@ -1579,7 +1579,7 @@ const Menu = ({ anchor, onClose, children, anchorOrigin = 'right', width }) => {
     if (!isVisible) {
         return null;
     }
-    return reactDom.createPortal(jsxRuntime.jsx("div", { ref: menuRef, className: MENU_STYLES.root(isFadingIn, anchorOrigin, position, width), children: children }), document.body);
+    return reactDom.createPortal(jsxRuntime.jsx("div", { ref: menuRef, className: MENU_STYLES.root({ isFadingIn, anchorOrigin, position, width, disableAnimation }), children: children }), document.body);
 };
 Menu.displayName = 'Menu';