@udixio/ui-react 2.10.12 → 2.10.14

package/src/lib/components/FabMenu.tsx

@@ -1,239 +0,0 @@
-import React, { useId, 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
- * @devx
- * - Only `Button` children are rendered as actions.
- * - Controlled via `open`/`onOpenChange` or `defaultOpen`.
- * @a11y
- * - No focus trap or Escape handling when open.
- * @limitations
- * - No outside-click handling; close uses the explicit close button.
- */
-export const FabMenu = ({
-  className,
-  label,
-  variant = 'primary',
-  size = 'medium',
-  href,
-  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 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}
-    />
-  );
-
-  const id = useId();
-
-  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: {
-                    overflow: 'visible',
-                    opacity: 1,
-                    width: 'auto',
-                    transition: {
-                      ...transition,
-                      delay,
-                      opacity: {
-                        delay: transition?.duration / 2 + delay,
-                      },
-                    },
-                  },
-                  close: {
-                    overflow: 'hidden',
-                    opacity: 0,
-                    width: 0,
-                    transition: {
-                      ...transition,
-                      delay,
-                      opacity: {
-                        duration: transition?.duration / 1.5,
-                      },
-                    },
-                  },
-                };
-
-                return (
-                  <motion.div
-                    initial={'close'}
-                    animate={'open'}
-                    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 text-nowrap',
-                            {
-                              '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' + id,
-          })}
-        {open && (
-          <>
-            <MotionIconButton
-              layout
-              layoutId={'fab-menu' + id}
-              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

@@ -1,146 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-
-import { Icon } from '../icon';
-import { IconButtonInterface } from '../interfaces';
-import { useIconButtonStyle } from '../styles';
-import { classNames, ReactProps } from '../utils';
-import { State } from '../effects';
-import { Tooltip } from './Tooltip';
-
-export type IconButtonVariant = 'standard' | 'filled' | 'tonal' | 'outlined';
-
-/**
- * Icon buttons help people take minor actions with one tap
- * @status beta
- * @category Action
- * @devx
- * - Requires `label` or children to provide an aria-label.
- * - Uses `title` as tooltip text; native title attribute is suppressed.
- * @limitations
- * - Tooltip is always rendered (no explicit opt-out).
- */
-export const IconButton = ({
-  variant = 'standard',
-  href,
-  disabled = false,
-  title,
-  label,
-  onToggle,
-  activated = false,
-  onClick,
-  icon,
-  size = 'medium',
-  iconSelected,
-  className,
-  ref,
-  width = 'default',
-  shape = 'rounded',
-  allowShapeTransformation = true,
-  transition,
-  children,
-  ...restProps
-}: ReactProps<IconButtonInterface>) => {
-  if (children) label = children;
-  if (!label) {
-    throw new Error(
-      'IconButton component requires either a label prop or children content to provide an accessible aria-label',
-    );
-  }
-  if (!title && title !== null) {
-    title = label;
-  }
-
-  const [isActive, setIsActive] = React.useState(activated);
-
-  const handleClick = (e: React.MouseEvent<any, MouseEvent>) => {
-    if (disabled) {
-      e.preventDefault();
-    }
-    if (onToggle) {
-      setIsActive(!isActive);
-      onToggle(!isActive);
-    } else if (onClick) {
-      onClick(e);
-    }
-  };
-
-  useEffect(() => {
-    setIsActive(activated);
-  }, [activated]);
-
-  // Détermine le type de l'élément à rendre : un bouton ou un lien
-  const ElementType = href ? 'a' : 'button';
-
-  const styles = useIconButtonStyle({
-    transition,
-    shape,
-    allowShapeTransformation,
-    width,
-    href,
-    activated: isActive,
-    label,
-    iconSelected,
-    isActive,
-    onToggle,
-    disabled,
-    icon,
-    variant,
-    className,
-    size,
-    children: label,
-    ...restProps,
-  });
-
-  const defaultRef = useRef<HTMLDivElement>(null);
-  const resolvedRef = ref || defaultRef;
-
-  transition = { duration: 0.3, ...transition };
-
-  return (
-    <ElementType
-      disabled={disabled}
-      href={href}
-      style={{ transition: transition.duration + 's' }}
-      className={styles.iconButton}
-      aria-label={label}
-      {...(restProps as any)}
-      title={undefined}
-      onClick={handleClick}
-      ref={resolvedRef}
-    >
-      {title !== null && (
-        <Tooltip
-          targetRef={resolvedRef}
-          trigger={disabled ? null : undefined}
-          text={title}
-        ></Tooltip>
-      )}
-
-      <div className={styles.touchTarget} />
-      <State
-        style={{ transition: transition.duration + 's' }}
-        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,
-          },
-        )}
-        stateClassName={'state-ripple-group-[icon-button]'}
-      />
-      {icon ? <Icon icon={icon} className={styles.icon} /> : children}
-    </ElementType>
-  );
-};

package/src/lib/components/Menu.tsx

@@ -1,88 +0,0 @@
-import React, { useRef } from 'react';
-import { MenuInterface } from '../interfaces/menu.interface';
-import { useMenuStyle } from '../styles/menu.style';
-import { classNames } from '../utils';
-import { ReactProps } from '../utils/component';
-import { MenuItem } from './MenuItem';
-import { Divider } from './Divider';
-import { MenuHeadline } from './MenuHeadline';
-import { MenuGroup } from './MenuGroup';
-
-/**
- * Menu displays a list of choices on a temporary surface.
- * @status beta
- * @category Selection
- * @limitations
- * - Don’t use MenuGroup in scrollable menus
- * @devx
- * - Used internally by `TextField` for `type="select"`.
- * - Supports keyboard navigation and auto-scrolling to selected item.
- * @a11y
- * - `role="listbox"` with `aria-selected` management.
- */
-export const Menu = ({
-  children,
-  className,
-  variant = 'standard',
-  ...restProps
-}: ReactProps<MenuInterface>) => {
-  /* pass restProps to include key such as variant */
-  const hasGroups = React.Children.toArray(children).some(
-    (child) => React.isValidElement(child) && child.type === MenuGroup,
-  );
-  const styles = useMenuStyle({
-    children,
-    className,
-    variant,
-    hasGroups,
-    ...restProps,
-  });
-
-  const listRef = useRef<HTMLDivElement>(null);
-
-  const renderChildren = (nodes: React.ReactNode): React.ReactNode => {
-    return React.Children.map(nodes, (child) => {
-      if (!React.isValidElement(child)) return child;
-
-      // Handle MenuGroup: add surface styles if grouped
-      if (child.type === MenuGroup) {
-        const groupChildren = renderChildren((child.props as any).children);
-        return React.cloneElement(child, {
-          children: groupChildren,
-          variant: variant,
-        } as any);
-      }
-
-      if (child.type === MenuItem) {
-        return React.cloneElement(child, {
-          variant: (child.props as any).variant ?? variant,
-        } as any);
-      }
-
-      if (child.type === MenuHeadline) {
-        return React.cloneElement(child, {
-          variant: variant,
-        } as any);
-      }
-
-      if (child.type === Divider) {
-        return React.cloneElement(child, {
-          className: classNames('my-1', (child.props as any).className),
-        } as any);
-      }
-
-      return child;
-    });
-  };
-
-  return (
-    <div ref={listRef} className={styles.menu} role="listbox" {...restProps}>
-      {renderChildren(children)}
-      {React.Children.count(children) === 0 && (
-        <div className="px-4 py-3 text-on-surface-variant opacity-60 italic text-body-medium">
-          No options
-        </div>
-      )}
-    </div>
-  );
-};

package/src/lib/components/MenuGroup.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { ReactProps } from '../utils/component';
-import { useMenuGroupStyle } from '../styles/menu-group.style';
-import { MenuGroupInterface } from '../interfaces/menu-group.interface';
-
-/**
- * MenuGroup renders a group of menu items with persistent styling.
- * It is primarily used to apply grouping logic or context to its children.
- *
- * @status beta
- * @category Selection
- */
-export const MenuGroup = ({
-  children,
-  className,
-  variant,
-  label,
-  ...restProps
-}: ReactProps<MenuGroupInterface> & React.HTMLAttributes<HTMLDivElement>) => {
-  const styles = useMenuGroupStyle({
-    children,
-    className,
-    variant,
-    label,
-    ...restProps,
-  });
-
-  return (
-    <div className={styles.menuGroup} role="group" {...restProps}>
-      {label && <div className={styles.groupLabel}>{label}</div>}
-      {children}
-    </div>
-  );
-};

package/src/lib/components/MenuHeadline.tsx

@@ -1,9 +0,0 @@
-
-import React from 'react';
-import { useMenuHeadlineStyle, MenuHeadlineInterface } from '../styles/menu-headline.style';
-import { ReactProps } from '../utils';
-
-export const MenuHeadline = ({ label, children, variant, className, ...restProps }: ReactProps<MenuHeadlineInterface> & { children?: React.ReactNode }) => {
-    const styles = useMenuHeadlineStyle({ variant, className });
-    return <div className={styles.headline} role="group" aria-label={label} {...restProps}>{children ?? label}</div>;
-};