@aurora-ds/components 0.24.6 → 0.24.8

package/dist/cjs/components/forms/input/Input.props.d.ts

@@ -1,9 +1,13 @@
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties, FocusEvent, ReactNode } from 'react';
 export type InputProps = {
     /** The value of the input */
     value: string;
     /** Callback fired when the value changes */
     onChange: (value: string) => void;
+    /** Callback fired when the input receives focus */
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    /** Callback fired when the input loses focus */
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     /** Label displayed above the input */
     label?: string;
     /** Whether the field is mandatory (displays an asterisk next to the label) */

package/dist/cjs/components/forms/textarea/TextArea.props.d.ts

@@ -1,9 +1,13 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, FocusEvent } from 'react';
 export type TextAreaProps = {
     /** The value of the textarea */
     value: string;
     /** Callback fired when the value changes */
     onChange: (value: string) => void;
+    /** Callback fired when the textarea receives focus */
+    onFocus?: (event: FocusEvent<HTMLTextAreaElement>) => void;
+    /** Callback fired when the textarea loses focus */
+    onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void;
     /** Label displayed above the textarea */
     label?: string;
     /** Whether the field is mandatory (displays an asterisk next to the label) */

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

@@ -1218,14 +1218,14 @@ const UploadIcon = () => (jsxRuntime.jsxs("svg", { xmlns: 'http://www.w3.org/200
 /**
  * Input component
  */
-const Input = React.forwardRef(({ value, onChange, label, mandatory = false, placeholder, disabled = false, type = 'text', ariaLabel, startIcon, endIcon, width, }, ref) => {
+const Input = React.forwardRef(({ value, onChange, onFocus, onBlur, label, mandatory = false, placeholder, disabled = false, type = 'text', ariaLabel, startIcon, endIcon, width, }, ref) => {
     const [showPassword, setShowPassword] = React.useState(false);
     const handleChange = (event) => {
         onChange(event.target.value);
     };
     const inputType = type === 'password' ? (showPassword ? 'text' : 'password') : type;
     const hasPasswordToggle = type === 'password';
-    return (jsxRuntime.jsxs(Stack, { direction: 'column', gap: 'xs', align: 'stretch', width: width ?? '100%', children: [label && (jsxRuntime.jsxs(Stack, { direction: 'row', gap: 'xs', align: 'center', children: [jsxRuntime.jsx(Text, { variant: 'label', fontSize: 'sm', children: label }), mandatory && (jsxRuntime.jsx(Text, { variant: 'label', fontSize: 'sm', color: 'error', children: "*" }))] })), jsxRuntime.jsxs("div", { className: `${INPUT_STYLES.container({ width })} ${disabled ? 'disabled' : ''}`, children: [jsxRuntime.jsx("input", { ref: ref, type: inputType, value: value, onChange: handleChange, placeholder: placeholder, disabled: disabled, className: INPUT_STYLES.root({ disabled, hasStartIcon: !!startIcon, hasEndIcon: !!endIcon, hasPasswordToggle }), "aria-label": ariaLabel || label }), startIcon && (jsxRuntime.jsx("div", { className: INPUT_STYLES.startIcon, children: jsxRuntime.jsx(Icon, { color: 'textTertiary', children: startIcon }) })), endIcon && (jsxRuntime.jsx("div", { className: hasPasswordToggle ? INPUT_STYLES.endIconShifted : INPUT_STYLES.endIcon, children: jsxRuntime.jsx(Icon, { color: 'textTertiary', children: endIcon }) })), hasPasswordToggle && (jsxRuntime.jsx("div", { className: INPUT_STYLES.passwordToggle, children: jsxRuntime.jsx(IconButton, { icon: showPassword ? jsxRuntime.jsx(EyeOffIcon, {}) : jsxRuntime.jsx(EyeIcon, {}), onClick: () => setShowPassword(!showPassword), disabled: disabled, ariaLabel: ariaLabel || label, variant: 'text', size: 'small', textColor: 'textSecondary' }) }))] })] }));
+    return (jsxRuntime.jsxs(Stack, { direction: 'column', gap: 'xs', align: 'stretch', width: width ?? '100%', children: [label && (jsxRuntime.jsxs(Stack, { direction: 'row', gap: 'xs', align: 'center', children: [jsxRuntime.jsx(Text, { variant: 'label', fontSize: 'sm', children: label }), mandatory && (jsxRuntime.jsx(Text, { variant: 'label', fontSize: 'sm', color: 'error', children: "*" }))] })), jsxRuntime.jsxs("div", { className: `${INPUT_STYLES.container({ width })} ${disabled ? 'disabled' : ''}`, children: [jsxRuntime.jsx("input", { ref: ref, type: inputType, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, disabled: disabled, className: INPUT_STYLES.root({ disabled, hasStartIcon: !!startIcon, hasEndIcon: !!endIcon, hasPasswordToggle }), "aria-label": ariaLabel || label }), startIcon && (jsxRuntime.jsx("div", { className: INPUT_STYLES.startIcon, children: jsxRuntime.jsx(Icon, { color: 'textTertiary', children: startIcon }) })), endIcon && (jsxRuntime.jsx("div", { className: hasPasswordToggle ? INPUT_STYLES.endIconShifted : INPUT_STYLES.endIcon, children: jsxRuntime.jsx(Icon, { color: 'textTertiary', children: endIcon }) })), hasPasswordToggle && (jsxRuntime.jsx("div", { className: INPUT_STYLES.passwordToggle, children: jsxRuntime.jsx(IconButton, { icon: showPassword ? jsxRuntime.jsx(EyeOffIcon, {}) : jsxRuntime.jsx(EyeIcon, {}), onClick: () => setShowPassword(!showPassword), disabled: disabled, ariaLabel: ariaLabel || label, variant: 'text', size: 'small', textColor: 'textSecondary' }) }))] })] }));
 });
 Input.displayName = 'Input';
 var Input_default = React.memo(Input);
@@ -1278,7 +1278,7 @@ const TEXTAREA_STYLES = theme.createStyles((theme) => ({
 /**
  * TextArea component with auto-expanding height based on content
  */
-const TextArea = React.forwardRef(({ value, onChange, label, mandatory = false, placeholder, disabled = false, ariaLabel, width, minRows = 3, maxRows, }, ref) => {
+const TextArea = React.forwardRef(({ value, onChange, onFocus, onBlur, label, mandatory = false, placeholder, disabled = false, ariaLabel, width, minRows = 3, maxRows, }, ref) => {
     const internalRef = React.useRef(null);
     const textareaRef = ref || internalRef;
     const adjustHeight = React.useCallback(() => {
@@ -1303,7 +1303,7 @@ const TextArea = React.forwardRef(({ value, onChange, label, mandatory = false,
     const handleChange = (event) => {
         onChange(event.target.value);
     };
-    return (jsxRuntime.jsxs(Stack, { direction: 'column', gap: 'xs', align: 'stretch', width: width ?? '100%', children: [label && (jsxRuntime.jsxs(Stack, { direction: 'row', gap: 'xs', align: 'center', children: [jsxRuntime.jsx(Text, { variant: 'label', fontSize: 'sm', children: label }), mandatory && (jsxRuntime.jsx(Text, { variant: 'label', fontSize: 'sm', color: 'error', children: "*" }))] })), jsxRuntime.jsx("div", { className: `${TEXTAREA_STYLES.container({ width })} ${disabled ? 'disabled' : ''}`, children: jsxRuntime.jsx("textarea", { ref: textareaRef, value: value, onChange: handleChange, placeholder: placeholder, disabled: disabled, className: TEXTAREA_STYLES.root({ disabled }), "aria-label": ariaLabel || label, rows: minRows }) })] }));
+    return (jsxRuntime.jsxs(Stack, { direction: 'column', gap: 'xs', align: 'stretch', width: width ?? '100%', children: [label && (jsxRuntime.jsxs(Stack, { direction: 'row', gap: 'xs', align: 'center', children: [jsxRuntime.jsx(Text, { variant: 'label', fontSize: 'sm', children: label }), mandatory && (jsxRuntime.jsx(Text, { variant: 'label', fontSize: 'sm', color: 'error', children: "*" }))] })), jsxRuntime.jsx("div", { className: `${TEXTAREA_STYLES.container({ width })} ${disabled ? 'disabled' : ''}`, children: jsxRuntime.jsx("textarea", { ref: textareaRef, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, disabled: disabled, className: TEXTAREA_STYLES.root({ disabled }), "aria-label": ariaLabel || label, rows: minRows }) })] }));
 });
 TextArea.displayName = 'TextArea';
 var TextArea_default = React.memo(TextArea);
@@ -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';