@udixio/ui-react 2.9.22 → 2.9.24

package/src/lib/components/ContextMenu.tsx

@@ -0,0 +1,111 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { AnchorPositioner } from './AnchorPositioner';
+import { Menu } from './Menu';
+// import { MenuProps } from '../interfaces/menu.interface'; // MenuProps is not exported from interface file usually, check file content
+import { MenuInterface } from '../interfaces';
+import { ReactProps } from '../utils';
+
+// MenuInterface has props: MenuProps.
+// But MenuProps might not be exported directly from the package index, so accessing it via MenuInterface['props'] is safer if we can't import it.
+// Actually checking Step 1271, MenuProps IS exported.
+
+export type ContextMenuProps = {
+  props: { trigger: React.ReactNode } & MenuInterface['props'];
+  type: 'div';
+  states: {
+    hasGroups: boolean;
+  };
+  elements: [''];
+};
+
+export const ContextMenu = ({
+  trigger,
+  children,
+  onItemSelect,
+  ...menuProps
+}: ReactProps<ContextMenuProps>) => {
+  const [contextMenu, setContextMenu] = useState<{
+    mouseX: number;
+    mouseY: number;
+  } | null>(null);
+  const anchorRef = useRef<HTMLDivElement>(null);
+
+  const handleContextMenu = (event: React.MouseEvent) => {
+    event.preventDefault();
+    setContextMenu({
+      mouseX: event.clientX,
+      mouseY: event.clientY,
+    });
+  };
+
+  const handleClose = () => {
+    setContextMenu(null);
+  };
+
+  const handleSelect = (val: string | number) => {
+    handleClose();
+    onItemSelect?.(val);
+  };
+
+  useEffect(() => {
+    if (!contextMenu) return;
+    const handleOutsideInteraction = () => setContextMenu(null);
+    window.addEventListener('click', handleOutsideInteraction);
+    window.addEventListener('scroll', handleOutsideInteraction, true);
+
+    return () => {
+      window.removeEventListener('click', handleOutsideInteraction);
+      window.removeEventListener('scroll', handleOutsideInteraction, true);
+    };
+  }, [contextMenu]);
+
+  // Clone trigger if valid element to attach onContextMenu, otherwise wrap
+  const triggerElement = React.isValidElement(trigger) ? (
+    React.cloneElement(
+      trigger as React.ReactElement,
+      {
+        onContextMenu: (e: React.MouseEvent) => {
+          handleContextMenu(e);
+          // Call original handler if exists
+          (trigger as React.ReactElement).props.onContextMenu?.(e);
+        },
+      } as any,
+    )
+  ) : (
+    <div onContextMenu={handleContextMenu} className="inline-block">
+      {trigger}
+    </div>
+  );
+
+  return (
+    <>
+      {triggerElement}
+
+      {/* Invisible anchor element positioned at cursor */}
+      <div
+        ref={anchorRef}
+        style={{
+          position: 'fixed',
+          top: contextMenu?.mouseY ?? 0,
+          left: contextMenu?.mouseX ?? 0,
+          width: 1,
+          height: 1,
+          pointerEvents: 'none',
+          visibility: 'hidden',
+        }}
+      />
+
+      {contextMenu && (
+        <AnchorPositioner
+          anchorRef={anchorRef}
+          position="bottom right"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Menu onItemSelect={handleSelect} {...menuProps}>
+            {children}
+          </Menu>
+        </AnchorPositioner>
+      )}
+    </>
+  );
+};

package/src/lib/components/Menu.tsx

@@ -0,0 +1,113 @@
+import React, { useEffect, 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,
+  selected,
+  onItemSelect,
+  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,
+    selected,
+    onItemSelect,
+    className,
+    variant,
+    hasGroups,
+    ...restProps,
+  });
+
+  const listRef = useRef<HTMLDivElement>(null);
+
+  // Scroll to selected item on open
+  useEffect(() => {
+    if (listRef.current) {
+      const selectedEl = listRef.current.querySelector(
+        '[aria-selected="true"]',
+      ) as HTMLElement;
+      if (selectedEl) {
+        selectedEl.scrollIntoView({ block: 'nearest' });
+      }
+    }
+  }, []);
+
+  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) {
+        const childValue = (child.props as any).value;
+        const isSelected = Array.isArray(selected)
+          ? selected.includes(childValue)
+          : selected === childValue;
+
+        return React.cloneElement(child, {
+          selected: isSelected,
+          variant: variant,
+          onItemSelect: (val: string | number) => {
+            onItemSelect?.(val);
+          },
+        } 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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,9 @@
+
+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>;
+};

package/src/lib/components/MenuItem.tsx

@@ -0,0 +1,197 @@
+import React, { 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 { 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,
+  value,
+  leadingIcon,
+  trailingIcon,
+  disabled,
+  selected,
+  variant,
+  onClick,
+  onItemSelect, // Injected by Menu
+  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 itemRef = useRef<HTMLDivElement>(null);
+  const closeTimerRef = useRef<any>(null);
+
+  const styles = useMenuItemStyle({
+    variant,
+    disabled,
+    selected,
+    className,
+    value,
+  });
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+
+    if (subMenuElement) {
+      e.stopPropagation();
+      return;
+    }
+
+    onClick?.(e);
+    if (onItemSelect) {
+      onItemSelect(value);
+    }
+  };
+
+  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);
+
+  return (
+    <div
+      ref={itemRef}
+      className={styles.menuItem} // Added relative and overflow-hidden for State
+      onClick={handleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      role="option"
+      aria-haspopup={!!subMenuElement}
+      aria-expanded={isSubMenuOpen}
+      aria-selected={selected}
+      tabIndex={disabled ? -1 : 0}
+      onKeyDown={(e) => {
+        // ... key handlers ...
+        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}
+    >
+      <State
+        className="absolute inset-0 pointer-events-none"
+        colorName={classNames(
+          // Match text color for state layer usually
+          variant === 'vibrant' ? 'on-tertiary-container' : 'on-surface',
+          selected && '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>
+      )}
+    </div>
+  );
+};