@udixio/ui-react 2.10.12 → 2.10.14

package/src/lib/components/MenuItem.tsx

@@ -1,215 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Icon } from '../icon';
-import { classNames, ReactProps } from '../utils';
-import { MenuItemInterface } from '../interfaces/menu-item.interface';
-import { useMenuItemStyle } from '../styles/menu-item.style';
-import { faCheck, faChevronRight } from '@fortawesome/free-solid-svg-icons';
-import { AnchorPositioner } from './AnchorPositioner';
-import { State } from '../effects';
-
-/**
- * Single item within a Menu.
- * @status beta
- * @category Selection
- */
-export const MenuItem = ({
-  label,
-  children,
-  leadingIcon,
-  trailingIcon,
-  disabled,
-  variant = 'standard',
-  href,
-  onClick,
-  onToggle,
-  activated = false,
-  className,
-  ...restProps
-}: ReactProps<MenuItemInterface>) => {
-  /* Extract subMenu from children if present */
-  let subMenuElement: React.ReactNode = null;
-  const contentChildren: React.ReactNode[] = [];
-
-  React.Children.forEach(children, (child) => {
-    // Check for Menu component via name (development) or if it has displayName 'Menu'
-    // We accept a child that is valid element and looks like a Menu.
-    if (
-      React.isValidElement(child) &&
-      ((child.type as any)?.name === 'Menu' ||
-        (child.type as any)?.displayName === 'Menu')
-    ) {
-      subMenuElement = child;
-    } else {
-      contentChildren.push(child);
-    }
-  });
-
-  const labelContent = contentChildren.length > 0 ? contentChildren : label;
-
-  const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);
-  const [isActive, setIsActive] = useState(activated);
-
-  if (isActive) {
-    leadingIcon = faCheck;
-  }
-
-  const itemRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);
-  const closeTimerRef = useRef<any>(null);
-
-  useEffect(() => {
-    setIsActive(activated);
-  }, [activated]);
-
-  const styles = useMenuItemStyle({
-    variant,
-    disabled,
-    className,
-    activated: isActive,
-    isActive,
-  });
-
-  const handleClick = (e: React.MouseEvent) => {
-    console.log('refrefd', disabled, subMenuElement, onToggle);
-    if (disabled) {
-      e.preventDefault();
-      return;
-    }
-
-    if (subMenuElement) {
-      e.stopPropagation();
-      return;
-    }
-
-    if (onToggle) {
-      setIsActive(!isActive);
-      onToggle(!isActive);
-    } else {
-      console.log('click', onClick);
-      onClick?.(e);
-    }
-  };
-
-  const handleMouseEnter = () => {
-    if (closeTimerRef.current) {
-      clearTimeout(closeTimerRef.current);
-      closeTimerRef.current = null;
-    }
-    if (!disabled && subMenuElement) {
-      setIsSubMenuOpen(true);
-    }
-  };
-
-  const handleMouseLeave = () => {
-    if (subMenuElement) {
-      closeTimerRef.current = setTimeout(() => {
-        setIsSubMenuOpen(false);
-      }, 150); // Delay to allow diagonal movement
-    }
-  };
-
-  React.useEffect(() => {
-    return () => {
-      if (closeTimerRef.current) {
-        clearTimeout(closeTimerRef.current);
-      }
-    };
-  }, []);
-
-  const effectiveTrailingIcon =
-    trailingIcon ?? (subMenuElement ? faChevronRight : undefined);
-
-  const ElementType = href ? 'a' : 'button';
-
-  return (
-    <ElementType
-      ref={itemRef as any}
-      href={href}
-      className={styles.menuItem}
-      onClick={handleClick}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      role="option"
-      aria-haspopup={!!subMenuElement}
-      aria-expanded={isSubMenuOpen}
-      aria-pressed={onToggle ? isActive : undefined}
-      tabIndex={disabled ? -1 : 0}
-      disabled={!href ? disabled : undefined}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          if (subMenuElement) {
-            setIsSubMenuOpen(!isSubMenuOpen);
-          } else {
-            handleClick(e as any);
-          }
-        }
-        if (e.key === 'ArrowRight' && subMenuElement) {
-          setIsSubMenuOpen(true);
-          e.stopPropagation();
-        }
-        if (e.key === 'ArrowLeft' && isSubMenuOpen) {
-          setIsSubMenuOpen(false);
-          e.stopPropagation();
-        }
-      }}
-      {...(restProps as any)}
-    >
-      <State
-        className="absolute inset-0 pointer-events-none"
-        colorName={classNames(
-          // Match text color for state layer usually
-          variant === 'vibrant' || isActive
-            ? 'on-tertiary-container'
-            : 'on-secondary-container',
-        )}
-        stateClassName={'state-ripple-group-[menu-item]'}
-      />
-
-      {leadingIcon && (
-        <div
-          className={classNames(
-            styles.itemIcon,
-            styles.leadingIcon,
-            'z-10 relative',
-          )}
-        >
-          {React.isValidElement(leadingIcon) ? (
-            leadingIcon
-          ) : (
-            <Icon icon={leadingIcon} />
-          )}
-        </div>
-      )}
-      <span className={classNames(styles.itemLabel, 'z-10 relative')}>
-        {labelContent}
-      </span>
-      {effectiveTrailingIcon && (
-        <div
-          className={classNames(
-            styles.itemIcon,
-            styles.trailingIcon,
-            'z-10 relative',
-          )}
-        >
-          {React.isValidElement(effectiveTrailingIcon) ? (
-            effectiveTrailingIcon
-          ) : (
-            <Icon icon={effectiveTrailingIcon} />
-          )}
-        </div>
-      )}
-
-      {subMenuElement && isSubMenuOpen && (
-        <AnchorPositioner
-          anchorRef={itemRef}
-          position="inline-end span-block-end"
-          hoverOpen={true}
-        >
-          <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-            {subMenuElement}
-          </div>
-        </AnchorPositioner>
-      )}
-    </ElementType>
-  );
-};

package/src/lib/components/NavigationRail.tsx

@@ -1,186 +0,0 @@
-import {
-  Children,
-  cloneElement,
-  Fragment,
-  isValidElement,
-  ReactElement,
-  ReactNode,
-  RefObject,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import { ReactProps } from '../utils';
-import {
-  NavigationRailItem,
-  NavigationRailSection,
-} from './NavigationRailItem';
-import { Fab } from './Fab';
-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';
-import { IconButton } from './IconButton';
-
-/**
- * Navigation rails let people switch between UI views on mid-sized devices
- * @status beta
- * @category Navigation
- * @devx
- * - Treats `NavigationRailItem`, `NavigationRailSection`, and `Fab` specially.
- * - Selection is index-based; provide `selectedItem` for controlled usage.
- * @limitations
- * - `extended` is not fully controlled (prop changes after mount aren’t synced).
- * - Keyboard navigation/roving tabindex is not implemented.
- */
-export const NavigationRail = ({
-  variant = 'standard',
-  onItemSelected,
-  children,
-  className,
-  selectedItem: externalSelectedItem,
-  extended,
-  alignment = 'top',
-  menu = {
-    closed: {
-      icon: faBars,
-      label: 'Open menu',
-    },
-    opened: {
-      icon: faXmark,
-      label: 'Close menu',
-    },
-  },
-  style,
-  onExtendedChange,
-  transition,
-  setSelectedItem: externalSetSelectedItem,
-}: ReactProps<NavigationRailInterface>) => {
-  const [internalSelectedItem, internalSetSelectedItem] = useState<
-    number | null
-  >(null);
-
-  const [isExtended, setIsExtended] = useState(extended);
-
-  let selectedItem: number | null;
-  if (externalSelectedItem == 0 || externalSelectedItem != undefined) {
-    selectedItem = externalSelectedItem;
-  } else {
-    selectedItem = internalSelectedItem;
-  }
-
-  const setSelectedItem = externalSetSelectedItem || internalSetSelectedItem;
-
-  const ref = useRef<HTMLDivElement | null>(null);
-
-  const handleOnItemSelected = (
-    args: { index: number } & Pick<
-      ReactProps<NavigationRailItemInterface>,
-      'label' | 'icon'
-    > & {
-        ref: RefObject<any>;
-      },
-  ) => {
-    onItemSelected?.(args);
-  };
-
-  function flattenChildren(children: ReactNode): ReactNode[] {
-    const flatChildren: ReactNode[] = [];
-    Children.forEach(children, (child) => {
-      if (
-        isValidElement<{ children?: ReactNode }>(child) &&
-        child.type === Fragment
-      ) {
-        flatChildren.push(...flattenChildren(child.props.children));
-      } else {
-        flatChildren.push(child);
-      }
-    });
-    return flatChildren;
-  }
-
-  const childrenArray = flattenChildren(children);
-
-  const fab = childrenArray.filter(
-    (child) => isValidElement(child) && child.type === Fab,
-  );
-
-  const styles = useNavigationRailStyle({
-    children,
-    onItemSelected,
-    selectedItem,
-    setSelectedItem,
-    className,
-    variant,
-    extended: isExtended,
-    isExtended,
-    alignment,
-    menu,
-    transition,
-    onExtendedChange,
-  });
-  transition = { duration: 0.3, ...transition };
-  const extendedOnly = useRef(false);
-  extendedOnly.current = false;
-
-  useEffect(() => {
-    onExtendedChange?.(isExtended ?? false);
-  }, [isExtended]);
-
-  return (
-    <div
-      style={{ transition: transition.duration + 's', ...style }}
-      ref={ref}
-      className={styles.navigationRail}
-    >
-      <div className={styles.header}>
-        <IconButton
-          onClick={() => setIsExtended(!isExtended)}
-          label={isExtended ? menu?.opened.label : menu?.closed.label}
-          className={styles.menuIcon}
-          icon={!isExtended ? menu?.closed.icon : menu.opened.icon}
-        />
-        {fab.length > 0 &&
-          cloneElement(fab[0] as ReactElement<ReactProps<FabInterface>>, {
-            transition: transition,
-            isExtended: isExtended,
-            className: '!shadow-none mx-5 ' + (fab[0] as any).props.className,
-          })}
-      </div>
-
-      <div className={styles.segments}>
-        {(() => {
-          let itemIndex = 0;
-          return childrenArray.map((child) => {
-            if (isValidElement(child) && child.type === NavigationRailItem) {
-              return cloneElement(
-                child as ReactElement<ReactProps<NavigationRailItemInterface>>,
-                {
-                  key: itemIndex,
-                  index: itemIndex++, // Utilise et incrémente le compteur dédié
-                  variant: isExtended ? 'horizontal' : 'vertical',
-                  selectedItem,
-                  setSelectedItem: setSelectedItem,
-                  onItemSelected: handleOnItemSelected,
-                  transition,
-                  extendedOnly: extendedOnly.current,
-                  isExtended,
-                },
-              );
-            }
-            if (isValidElement(child) && child.type === Fab) {
-              return null;
-            }
-            if (isValidElement(child) && child.type === NavigationRailSection) {
-              extendedOnly.current = true;
-              if (!isExtended) return null;
-              return cloneElement(child as ReactElement<{ label: string }>, {});
-            }
-            return child;
-          });
-        })()}
-      </div>
-      <div className={'flex-1 max-h-[160px]'}></div>
-    </div>
-  );
-};

package/src/lib/components/NavigationRailItem.tsx

@@ -1,227 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-
-import { Icon } from '../icon';
-import { classNames, ReactProps } from '../utils';
-import { NavigationRailItemInterface } from '../interfaces';
-import { useNavigationRailItemStyle } from '../styles/navigation-rail-item.style';
-import { AnimatePresence, motion } from 'motion/react';
-import { State } from '../effects';
-
-/**
- * @status beta
- * @parent NavigationRail
- * @devx
- * - Section labels only render when the rail is extended.
- */
-export const NavigationRailSection = ({ label }: { label: string }) => {
-  return (
-    <div className={' h-9 flex items-center mx-9 mt-3'}>
-      <p className={'text-label-large text-on-surface-variant'}>{label}</p>
-    </div>
-  );
-};
-
-/**
- * @status beta
- * @parent NavigationRail
- * @devx
- * - Selection is index-based and provided by the parent rail.
- * - `extendedOnly` hides items when the rail is collapsed.
- * @a11y
- * - Uses `role="tab"` but no roving tabindex or aria-controls wiring.
- */
-export const NavigationRailItem = ({
-  className,
-  onClick,
-  label,
-  variant = 'vertical',
-  href,
-  icon,
-  selectedItem,
-  setSelectedItem,
-  index,
-  onItemSelected,
-  selected = false,
-  ref,
-  transition,
-  isExtended,
-  iconSelected,
-  style,
-  extendedOnly,
-  children,
-  ...restProps
-}: ReactProps<NavigationRailItemInterface>) => {
-  if (children) label = children;
-
-  const defaultRef = useRef<any>(null);
-  const resolvedRef = ref || defaultRef;
-
-  const [isSelected, setIsSelected] = useState<boolean>(selected);
-
-  useEffect(() => {
-    if (selected && selectedItem == null) {
-      setIsSelected(true);
-    } else {
-      setIsSelected(selectedItem == index && index != null);
-    }
-  }, [selectedItem]);
-
-  useEffect(() => {
-    if (selectedItem == index && onItemSelected) {
-      onItemSelected({
-        ref: resolvedRef as any,
-        index: index || 0,
-        label,
-        icon,
-      });
-    }
-  }, [selectedItem]);
-
-  const ElementType = href ? 'a' : 'button';
-
-  const handleClick = (e: React.MouseEvent<any>) => {
-    if (setSelectedItem) {
-      setSelectedItem(index ?? null);
-    }
-    if (onClick) {
-      onClick(e);
-    }
-  };
-
-  const styles = useNavigationRailItemStyle({
-    isExtended,
-    extendedOnly,
-    className,
-    onItemSelected,
-    selectedItem,
-    index,
-    transition,
-    selected: isSelected,
-    variant,
-    icon,
-    label,
-    isSelected,
-    setSelectedItem,
-    href: href as any,
-    children: label,
-    iconSelected,
-  });
-
-  transition = { duration: 0.3, ...transition };
-
-  if (extendedOnly && !isExtended) return null;
-
-  return (
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
-    <ElementType
-      {...restProps}
-      role="tab"
-      aria-selected={isSelected}
-      ref={resolvedRef}
-      href={href}
-      className={styles.navigationRailItem}
-      onClick={handleClick}
-      style={{ transition: transition.duration + 's', ...style }}
-    >
-      <motion.div
-        style={{
-          transition:
-            variant == 'horizontal'
-              ? transition.duration +
-                `s, gap ${transition.duration! / 2}s ${transition.duration! - transition.duration! / 2}s`
-              : transition.duration +
-                `s, gap ${transition.duration! / 3}s ${transition.duration! - transition.duration! / 3}s`,
-        }}
-        transition={transition}
-        className={styles.container}
-      >
-        <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}
-            className={styles.icon}
-          />
-        )}
-        <AnimatePresence>
-          {variant == 'horizontal' &&
-            (() => {
-              const initial = {
-                width: 0,
-                opacity: 0,
-                transition: {
-                  ...transition,
-                },
-              };
-              const animate = {
-                width: 'auto',
-                opacity: 1,
-                transition: {
-                  ...transition,
-                  opacity: {
-                    duration: transition.duration! / 2,
-                    delay: transition.duration! - transition.duration! / 2,
-                  },
-                },
-              };
-              return (
-                <motion.span
-                  initial={initial}
-                  animate={animate}
-                  exit={initial}
-                  className={styles.label}
-                >
-                  {label}
-                </motion.span>
-              );
-            })()}
-        </AnimatePresence>
-      </motion.div>
-      <AnimatePresence>
-        {variant == 'vertical' &&
-          (() => {
-            const initial = {
-              height: 0,
-              opacity: 0,
-              transition: {
-                ...transition,
-                opacity: {
-                  duration: 0,
-                },
-              },
-            };
-            const animate = {
-              height: 'auto',
-              opacity: 1,
-              transition: {
-                ...transition,
-                opacity: {
-                  duration: transition.duration! / 3,
-                  delay: transition.duration! - transition.duration! / 3,
-                },
-              },
-            };
-            return (
-              <motion.span
-                initial={animate}
-                animate={animate}
-                exit={initial}
-                className={styles.label}
-                transition={transition}
-              >
-                {label}
-              </motion.span>
-            );
-          })()}
-      </AnimatePresence>
-    </ElementType>
-  );
-};