@udixio/ui-react 2.5.2 → 2.7.0

package/src/lib/components/FabMenu.tsx

@@ -0,0 +1,229 @@
+import React, { useRef, useState } from 'react';
+import { FabMenuInterface } from '../interfaces/fab-menu.interface';
+import { useFabMenuStyle } from '../styles/fab-menu.style';
+import { ReactProps } from '../utils/component';
+import { Fab } from './Fab';
+import { Button } from './Button';
+import { ButtonInterface } from '../interfaces';
+import { classNames } from '../utils';
+import { IconButton } from './IconButton';
+import { faClose } from '@fortawesome/free-solid-svg-icons';
+import { AnimatePresence, motion } from 'motion/react';
+
+/**
+ * Floating action buttons (FABs) help people take primary actions
+ * @status beta
+ * @category Action
+ */
+export const FabMenu = ({
+  className,
+  label,
+  variant = 'primary',
+  size = 'medium',
+  href,
+  type,
+  icon,
+  extended = false,
+  ref,
+  transition,
+  children,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  ...restProps
+}: ReactProps<FabMenuInterface>) => {
+  transition = { duration: 0.3, ease: 'easeInOut', ...transition };
+
+  const defaultRef = useRef(null);
+  const resolvedRef = ref || defaultRef;
+
+  // Controlled/uncontrolled open state
+  const isControlled = typeof openProp === 'boolean';
+  const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
+  const open = isControlled ? (openProp as boolean) : internalOpen;
+  const setOpen = (next: boolean) => {
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+
+  const buttonChildren = React.Children.toArray(children).filter(
+    (child) => React.isValidElement(child) && child.type === Button,
+  );
+
+  const styles = useFabMenuStyle({
+    href,
+    icon,
+    extended,
+    label,
+    size,
+    variant,
+    className,
+    transition,
+    children: label,
+    open,
+  });
+
+  const MotionFab = motion.create(Fab);
+  const MotionIconButton = motion.create(IconButton);
+  const MotionButton = motion.create(Button);
+
+  const renderFab = (props) => (
+    <MotionFab
+      icon={icon}
+      extended={extended}
+      label={label}
+      variant={(variant + 'Container') as any}
+      size={size}
+      className={styles.fab + ' ' + (className ?? '')}
+      aria-expanded={open}
+      onClick={() => setOpen(true)}
+      style={{ transition: 'border-radius 0.3s ease-in-out' }}
+      transition={{
+        duration: transition.duration,
+        ease: 'easeInOut',
+        borderRadius: { duration: transition.duration, ease: 'easeInOut' },
+        background: { duration: transition.duration, ease: 'easeInOut' },
+        ...transition,
+      }}
+      {...props}
+    />
+  );
+
+  return (
+    <div className={styles.fabMenu} ref={resolvedRef} {...restProps}>
+      <AnimatePresence>
+        {open && (
+          <div className={styles.actions} role="menu" aria-hidden={!open}>
+            {(() => {
+              const total = buttonChildren.length;
+              return buttonChildren.map((child, index) => {
+                const childProps = (
+                  child as React.ReactElement<ReactProps<ButtonInterface>>
+                ).props;
+                const reverseIndex = total - 1 - index; // inverser l'ordre d'animation
+                const delay = (transition?.delay ?? 0) + reverseIndex * 0.06; // délai échelonné inversé, un peu plus marqué
+
+                const variants = {
+                  open: {
+                    opacity: 1,
+                    width: 'auto',
+                    transition: {
+                      ...transition,
+                      delay,
+                      opacity: {
+                        delay: transition?.duration / 2 + delay,
+                      },
+                    },
+                  },
+                  close: {
+                    opacity: 0,
+                    width: 0,
+                    transition: {
+                      ...transition,
+                      delay,
+                      opacity: {
+                        duration: transition?.duration / 2,
+                      },
+                    },
+                  },
+                };
+
+                return (
+                  <motion.div
+                    initial={'close'}
+                    animate={'open'}
+                    className={'overflow-hidden'}
+                    variants={variants}
+                    transition={transition}
+                    exit={'close'}
+                  >
+                    {React.cloneElement(
+                      child as React.ReactElement<ReactProps<ButtonInterface>>,
+                      {
+                        key: index,
+                        shape: 'rounded',
+                        variant: 'filled',
+                        className: () => ({
+                          button: classNames('max-w-full overflow-hidden', {
+                            'px-0': !open,
+                            'bg-primary-container text-on-primary-container ':
+                              variant === 'primary',
+                            'bg-secondary-container text-on-secondary-container':
+                              variant === 'secondary',
+                            'bg-tertiary-container text-on-tertiary-container':
+                              variant === 'tertiary',
+                          }),
+                          stateLayer: classNames({
+                            'state-on-primary-container': variant === 'primary',
+                            'state-on-secondary-container':
+                              variant === 'secondary',
+                            'state-on-tertiary-container':
+                              variant === 'tertiary',
+                          }),
+                        }),
+                      },
+                    )}
+                  </motion.div>
+                );
+              });
+            })()}
+          </div>
+        )}
+      </AnimatePresence>
+
+      {renderFab({
+        className: 'invisible pointer-events-none',
+      })}
+      <div className={'absolute right-0 top-0'}>
+        {!open &&
+          renderFab({
+            className: '',
+            layout: true,
+            layoutId: 'fab-menu',
+          })}
+        {open && (
+          <>
+            <MotionIconButton
+              layout
+              layoutId="fab-menu"
+              variant={'filled'}
+              className={() => ({
+                iconButton: classNames('', {
+                  'bg-primary text-on-primary': variant === 'primary',
+                  'bg-secondary text-on-secondary': variant === 'secondary',
+                  'bg-tertiary text-on-tertiary': variant === 'tertiary',
+                }),
+                stateLayer: classNames({
+                  '[--default-color:var(--color-on-primary)]':
+                    variant === 'primary',
+                  '[--default-color:var(--color-on-secondary)]':
+                    variant === 'secondary',
+                  '[--default-color:var(--color-on-tertiary)]':
+                    variant === 'tertiary',
+                }),
+              })}
+              style={{ transition: 'border-radius 0.3s ease-in-out' }}
+              transition={{
+                duration: transition.duration,
+                ease: 'easeInOut',
+                borderRadius: {
+                  duration: transition.duration,
+                  ease: 'easeInOut',
+                },
+                background: {
+                  duration: transition.duration,
+                  ease: 'easeInOut',
+                },
+                ...transition,
+              }}
+              icon={faClose}
+              onClick={() => setOpen(false)}
+            >
+              Close
+            </MotionIconButton>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/lib/components/IconButton.tsx

@@ -2,9 +2,9 @@ import React, { useEffect, useRef } from 'react';
 
 import { Icon } from '../icon/icon';
 import { IconButtonInterface } from '../interfaces/icon-button.interface';
-import { iconButtonStyle } from '../styles/icon-button.style';
+import { useIconButtonStyle } from '../styles/icon-button.style';
 import { ReactProps } from '../utils/component';
-import { RippleEffect } from '../effects';
+import { State } from '../effects';
 import { classNames } from '../utils';
 import { ToolTip } from './ToolTip';
 
@@ -76,7 +76,7 @@ export const IconButton = ({
   // Détermine le type de l'élément à rendre : un bouton ou un lien
   const ElementType = href ? 'a' : 'button';
 
-  const styles = iconButtonStyle({
+  const styles = useIconButtonStyle({
     transition,
     shape,
     allowShapeTransformation,
@@ -120,35 +120,29 @@ export const IconButton = ({
       ></ToolTip>
 
       <div className={styles.touchTarget} />
-      <div
-        className={styles.stateLayer}
+      <State
         style={{ transition: transition.duration + 's' }}
-      >
-        {!disabled && (
-          <RippleEffect
-            colorName={classNames(
-              variant === 'standard' && {
-                'on-surface-variant': !isActive,
-                primary: isActive,
-              },
-              variant === 'filled' && {
-                primary: !isActive && Boolean(onToggle),
-                'inverse-on-surface': isActive || !onToggle,
-              },
-              variant === 'tonal' && {
-                'on-surface-variant': !isActive && Boolean(onToggle),
-                'on-secondary-container': isActive || !onToggle,
-              },
-              variant === 'outlined' && {
-                'on-surface-variant': !isActive,
-                'on-primary': isActive,
-              },
-            )}
-            triggerRef={resolvedRef}
-          />
+        className={styles.stateLayer}
+        colorName={classNames(
+          variant === 'standard' && {
+            'on-surface-variant': !isActive,
+            'on-primary': isActive,
+          },
+          variant === 'filled' && {
+            'on-surface-variant': !isActive && Boolean(onToggle),
+            'on-primary': isActive || !onToggle,
+          },
+          variant === 'tonal' && {
+            'on-secondary': isActive && Boolean(onToggle),
+            'on-secondary-container': !isActive || !onToggle,
+          },
+          variant === 'outlined' && {
+            'inverse-on-surface': isActive && Boolean(onToggle),
+            'on-surface-variant': !isActive || !onToggle,
+          },
         )}
-      </div>
-
+        stateClassName={'state-ripple-group-[icon-button]'}
+      />
       {icon && <Icon icon={icon} className={styles.icon} />}
     </ElementType>
   );

package/src/lib/components/NavigationRail.tsx

@@ -8,12 +8,15 @@ import {
   RefObject,
   useEffect,
   useRef,
-  useState
+  useState,
 } from 'react';
 import { ReactProps } from '../utils';
-import { NavigationRailItem, NavigationRailSection } from './NavigationRailItem';
+import {
+  NavigationRailItem,
+  NavigationRailSection,
+} from './NavigationRailItem';
 import { Fab } from './Fab';
-import { navigationRailStyle } from '../styles/navigation-rail.style';
+import { useNavigationRailStyle } from '../styles/navigation-rail.style';
 import { NavigationRailInterface } from '../interfaces/navigation-rail.interface';
 import { FabInterface, NavigationRailItemInterface } from '../interfaces';
 import { faBars, faXmark } from '@fortawesome/free-solid-svg-icons';
@@ -96,7 +99,7 @@ export const NavigationRail = ({
     (child) => isValidElement(child) && child.type === Fab,
   );
 
-  const styles = navigationRailStyle({
+  const styles = useNavigationRailStyle({
     children,
     onItemSelected,
     selectedItem,

package/src/lib/components/NavigationRailItem.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useRef, useState } from 'react';
 
 import { Icon } from '../icon';
-import { ReactProps } from '../utils';
+import { classNames, ReactProps } from '../utils';
 import { NavigationRailItemInterface } from '../interfaces';
-import { navigationRailItemStyle } from '../styles/navigation-rail-item.style';
+import { useNavigationRailItemStyle } from '../styles/navigation-rail-item.style';
 import { AnimatePresence, motion } from 'motion/react';
+import { State } from '../effects';
 
 /**
  * @status beta
@@ -80,7 +81,7 @@ export const NavigationRailItem = ({
     }
   };
 
-  const styles = navigationRailItemStyle({
+  const styles = useNavigationRailItemStyle({
     isExtended,
     extendedOnly,
     className,
@@ -128,7 +129,15 @@ export const NavigationRailItem = ({
         transition={transition}
         className={styles.container}
       >
-        <motion.div layout className={styles.stateLayer}></motion.div>
+        <State
+          style={{ transition: transition.duration + 's' }}
+          className={styles.stateLayer}
+          colorName={classNames({
+            'on-surface': !isSelected,
+            'on-secondary-container': isSelected,
+          })}
+          stateClassName={'state-ripple-group-[navigation-rail-item]'}
+        />
         {icon && (
           <Icon
             icon={isSelected ? iconSelected : icon}

package/src/lib/components/ProgressIndicator.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { ProgressIndicatorInterface } from '../interfaces/progress-indicator.interface';
 
 import { motion } from 'motion/react';
-import { progressIndicatorStyle } from '../styles/progress-indicator.style';
+import { useProgressIndicatorStyle } from '../styles/progress-indicator.style';
 import { ReactProps } from '../utils/component';
 
 /**
@@ -67,7 +67,7 @@ export const ProgressIndicator = ({
     return;
   }, [completedPercentage, transitionDuration]);
 
-  const styles = progressIndicatorStyle({
+  const styles = useProgressIndicatorStyle({
     className,
     variant,
     value,

package/src/lib/components/SideSheet.tsx

@@ -1,6 +1,5 @@
 import { MotionProps } from '../utils';
 import { SideSheetInterface } from '../interfaces';
-import { sideSheetStyle } from '../styles';
 import { Divider } from './Divider';
 
 import { faXmark } from '@fortawesome/free-solid-svg-icons';
@@ -8,6 +7,7 @@ import { IconButton } from './IconButton';
 import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'motion/react';
+import { sideSheetStyle } from '../styles';
 
 /**
  * Side sheets show secondary content anchored to the side of the screen
@@ -82,7 +82,7 @@ export const SideSheet = ({
         {isExtended && (
           <div
             {...rest}
-            className={styles.slideSheet}
+            className={styles.sideSheet}
             style={{ transition: transition.duration + 's' }}
           >
             <motion.div

package/src/lib/components/Slider.tsx

@@ -1,6 +1,6 @@
 import { AnimatePresence, motion } from 'motion/react';
 import { SliderInterface } from '../interfaces';
-import { sliderStyle } from '../styles';
+import { useSliderStyle } from '../styles';
 import { classNames, ReactProps } from '../utils';
 import { useEffect, useRef, useState } from 'react';
 
@@ -106,7 +106,7 @@ export const Slider = ({
     };
   }, [mouseDown]);
 
-  const styles = sliderStyle({
+  const styles = useSliderStyle({
     className,
     isChanging,
     marks,

package/src/lib/components/Snackbar.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
 import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { SnackbarInterface } from '../interfaces/snackbar.interface';
-import { snackbarStyle } from '../styles/snackbar.style';
+import { useSnackbarStyle } from '../styles/snackbar.style';
 
 import { MotionProps } from '../utils/component';
 import { IconButton } from './IconButton';
@@ -22,7 +22,7 @@ export const Snackbar = ({
 }: MotionProps<SnackbarInterface>) => {
   const [isVisible, setIsVisible] = useState(true);
 
-  const styles = snackbarStyle({
+  const styles = useSnackbarStyle({
     className,
     closeIcon,
     duration,

package/src/lib/components/Switch.tsx

@@ -3,7 +3,7 @@ import React, { useRef, useState } from 'react';
 import { Icon } from '../icon';
 import { motion } from 'motion/react';
 import { SwitchInterface } from '../interfaces/switch.interface';
-import { switchStyle } from '../styles/switch.style';
+import { useSwitchStyle } from '../styles/switch.style';
 import { MotionProps } from '../utils/component';
 
 /**
@@ -48,7 +48,7 @@ export const Switch = ({
     setIsSelected(!isSelected);
     onChange?.(!isSelected);
   };
-  const styles = switchStyle({
+  const styles = useSwitchStyle({
     className,
     isSelected,
     activeIcon,

package/src/lib/components/Tab.tsx

@@ -2,10 +2,10 @@ import { motion } from 'motion/react';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { Icon } from '../icon';
-import { RippleEffect } from '../effects/ripple';
-import { tabStyle } from '../styles/tab.style';
+import { useTabStyle } from '../styles/tab.style';
 import { TabInterface } from '../interfaces/tab.interface';
 import { ReactProps } from '../utils/component';
+import { State } from '../effects';
 
 /**
  * @status beta
@@ -63,7 +63,7 @@ export const Tab = ({
     }
   };
 
-  const styles = tabStyle({
+  const styles = useTabStyle({
     className,
     onTabSelected,
     scrollable,
@@ -90,14 +90,14 @@ export const Tab = ({
       onClick={handleClick}
       {...(restProps as any)}
     >
-      <span className={styles.stateLayer}>
-        <RippleEffect
-          colorName={
-            variant === 'primary' && isSelected ? 'primary' : 'on-surface'
-          }
-          triggerRef={resolvedRef}
-        />
-      </span>
+      <State
+        style={{ transition: 0.3 + 's' }}
+        className={styles.stateLayer}
+        colorName={
+          variant === 'primary' && isSelected ? 'primary' : 'on-surface'
+        }
+        stateClassName={'state-ripple-group-[tab]'}
+      />
       <span className={styles.content}>
         {icon && <Icon icon={icon} className={styles.icon} />}
         <span className={styles.label}>{label}</span>

package/src/lib/components/Tabs.tsx

@@ -2,7 +2,7 @@ import React, { useMemo, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { TabsInterface } from '../interfaces/tabs.interface';
 
-import { tabsStyle } from '../styles/tabs.style';
+import { useTabsStyle } from '../styles/tabs.style';
 import { ReactProps } from '../utils/component';
 import { TabProps } from '../interfaces/tab.interface';
 import { Tab } from './Tab';
@@ -62,7 +62,7 @@ export const Tabs = ({
 
   const tabsId = useMemo(() => uuidv4(), []);
 
-  const styles = tabsStyle({
+  const styles = useTabsStyle({
     children,
     onTabSelected,
     scrollable,

package/src/lib/components/TextField.tsx

@@ -5,7 +5,7 @@ import { motion } from 'motion/react';
 import { v4 as uuidv4 } from 'uuid';
 
 import TextareaAutosize from 'react-textarea-autosize';
-import { textFieldStyle } from '../styles/text-field.style';
+import { useTextFieldStyle } from '../styles/text-field.style';
 import { classNames } from '../utils';
 import { ReactProps } from '../utils/component';
 import { TextFieldInterface } from '../interfaces/text-field.interface';
@@ -102,7 +102,7 @@ export const TextField = ({
     setIsFocused(false);
   };
 
-  const styles = textFieldStyle({
+  const styles = useTextFieldStyle({
     showSupportingText,
     isFocused,
     showErrorIcon,

package/src/lib/components/ToolTip.tsx

@@ -1,8 +1,14 @@
-import { cloneElement, isValidElement, useEffect, useRef, useState } from 'react';
+import {
+  cloneElement,
+  isValidElement,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { MotionProps } from '../utils';
 import { Button } from './Button';
 import { ToolTipInterface } from '../interfaces';
-import { toolStyle } from '../styles';
+import { useToolTipStyle } from '../styles';
 import { v4 } from 'uuid';
 import { AnimatePresence, motion } from 'motion/react';
 import { SyncedFixedWrapper } from '../effects';
@@ -170,7 +176,7 @@ export const ToolTip = ({
     }
   }
 
-  const styles = toolStyle({
+  const styles = useToolTipStyle({
     variant,
     buttons,
     className,

package/src/lib/components/index.ts

@@ -5,6 +5,7 @@ export * from './CarouselItem';
 export * from './CarouselItem';
 export * from './Divider';
 export * from './Fab';
+export * from './FabMenu';
 export * from './IconButton';
 export * from './IconButton';
 export * from './ProgressIndicator';