@udixio/ui-react 2.9.22 → 2.9.24

package/src/lib/components/TextField.tsx

@@ -3,10 +3,16 @@ import { Icon } from '../icon';
 import {
   faCalendarDays,
   faCircleExclamation,
+  faChevronDown,
+  faChevronUp,
 } from '@fortawesome/free-solid-svg-icons';
 import { motion } from 'motion/react';
 import { DatePicker } from './DatePicker';
 import { Button } from './Button';
+import { Menu } from './Menu';
+import { MenuItem } from './MenuItem';
+import { Divider } from './Divider';
+import { MenuHeadline } from './MenuHeadline';
 
 import TextareaAutosize from 'react-textarea-autosize';
 import { useTextFieldStyle } from '../styles/text-field.style';
@@ -22,6 +28,7 @@ import { TextFieldInterface } from '../interfaces';
  * @devx
  * - Supports controlled (`value`) and uncontrolled (`defaultValue`) usage.
  * - `multiline` switches to textarea mode.
+ * - `type="select" ` switches to select mode with `options`
  * @a11y
  * - `aria-describedby` links supporting text/error to input.
  */
@@ -50,8 +57,10 @@ export const TextField = ({
   ref,
   onFocus,
   onBlur,
+  options,
+  children,
   ...restProps
-}: ReactProps<TextFieldInterface>) => {
+}: ReactProps<TextFieldInterface> & { children?: React.ReactNode }) => {
   const generatedId = useId();
   const id = idProp || generatedId;
   const helperTextId = `${id}-helper`;
@@ -78,20 +87,23 @@ export const TextField = ({
   }, [errorText]);
 
   const focusInput = () => {
-    if (inputRef.current && !isFocused) {
-      inputRef.current.focus();
+    if (inputRef.current && !isFocused && !disabled) {
+      if (type !== 'select') {
+        inputRef.current.focus();
+      }
     }
   };
 
   useEffect(() => {
     if (!autoFocus || disabled) return;
 
-    const rafId = window.requestAnimationFrame(() => {
-      focusInput();
-    });
-
-    return () => window.cancelAnimationFrame(rafId);
-  }, [autoFocus, disabled, inputRef]);
+    if (type !== 'select') {
+      const rafId = window.requestAnimationFrame(() => {
+        focusInput();
+      });
+      return () => window.cancelAnimationFrame(rafId);
+    }
+  }, [autoFocus, disabled, inputRef, type]);
 
   useEffect(() => {
     if (isFocused) {
@@ -134,20 +146,67 @@ export const TextField = ({
     return null;
   }, [value]);
 
-  const handleDatePickerOpen = () => {
+  const handleDatePickerToggle = () => {
     if (disabled) return;
-    setTempDate(initialDateValue);
-    setShowDatePicker(true);
+    if (showDatePicker) {
+      setShowDatePicker(false);
+    } else {
+      setTempDate(initialDateValue);
+      setShowDatePicker(true);
+    }
   };
 
   useEffect(() => {
     if (showDatePicker) {
       setIsFocused(true);
-    } else {
+    } else if (!isSelectInput || !showMenu) {
       setIsFocused(false);
     }
   }, [showDatePicker]);
 
+  useEffect(() => {
+    if (!showDatePicker) return;
+
+    const isInside = (target: Node | null) => {
+      if (!target) return false;
+      return (
+        textFieldRef.current?.contains(target) ||
+        datePickerRef.current?.contains(target)
+      );
+    };
+
+    const handlePointerDown = (e: PointerEvent) => {
+      const target = e.target as Node;
+      const inDatePicker = datePickerRef.current?.contains(target);
+      const inCalendarTrigger = calendarTriggerRef.current?.contains(target);
+      if (!inDatePicker && !inCalendarTrigger) {
+        setShowDatePicker(false);
+      }
+    };
+
+    const handleFocusIn = (e: FocusEvent) => {
+      if (!isInside(e.target as Node)) {
+        setShowDatePicker(false);
+      }
+    };
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setShowDatePicker(false);
+      }
+    };
+
+    document.addEventListener('pointerdown', handlePointerDown);
+    document.addEventListener('focusin', handleFocusIn);
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown);
+      document.removeEventListener('focusin', handleFocusIn);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [showDatePicker]);
+
   const handleDateConfirm = () => {
     const newValue = tempDate ? tempDate.toLocaleDateString('en-CA') : '';
 
@@ -156,7 +215,6 @@ export const TextField = ({
     }
 
     if (onChange) {
-      // Create a synthetic event
       const event = {
         target: {
           value: newValue,
@@ -169,13 +227,78 @@ export const TextField = ({
     setShowDatePicker(false);
   };
 
-  const effectiveTrailingIcon =
-    isDateInput && !trailingIcon ? faCalendarDays : trailingIcon;
+  // Select Logic
+  const isSelectInput = type === 'select';
+  const [showMenu, setShowMenu] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const displayValue = useMemo(() => {
+    if (isSelectInput && options) {
+      const selectedOption = options.find(
+        (o) => String(o.value) === String(value),
+      );
+      return selectedOption ? selectedOption.label : value;
+    }
+    return value;
+  }, [value, isSelectInput, options]);
+
+  const handleSelectToggle = () => {
+    if (disabled) return;
+    setShowMenu(!showMenu);
+    setIsFocused(!showMenu);
+  };
 
-  // Enhance styles for date input
-  const inputDateClass = isDateInput
-    ? '[&::-webkit-calendar-picker-indicator]:hidden cursor-pointer'
-    : '';
+  const handleSelectOption = (optionValue: string | number) => {
+    if (!isControlled) {
+      setInternalValue(String(optionValue));
+    }
+
+    if (onChange) {
+      const event = {
+        target: {
+          value: String(optionValue),
+          name,
+          type,
+        },
+      } as React.ChangeEvent<HTMLInputElement>;
+      onChange(event);
+    }
+    setShowMenu(false);
+    setIsFocused(false);
+  };
+
+  // Close menu on outside click
+  useEffect(() => {
+    if (!showMenu) return;
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        textFieldRef.current &&
+        !textFieldRef.current.contains(event.target as Node) &&
+        menuRef.current &&
+        !menuRef.current.contains(event.target as Node)
+      ) {
+        setShowMenu(false);
+        setIsFocused(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [showMenu]);
+
+  const effectiveTrailingIcon = useMemo(() => {
+    if (trailingIcon) return trailingIcon;
+    if (isDateInput) return faCalendarDays;
+    if (isSelectInput) return showMenu ? faChevronUp : faChevronDown;
+    return undefined;
+  }, [trailingIcon, isDateInput, isSelectInput, showMenu]);
+
+  // Enhance styles for date input or select
+  const inputSpecialClass =
+    isDateInput || isSelectInput
+      ? '[&::-webkit-calendar-picker-indicator]:hidden cursor-pointer selection:bg-transparent'
+      : '';
 
   const styles = useTextFieldStyle({
     showSupportingText: hasSupportingText,
@@ -194,25 +317,37 @@ export const TextField = ({
     trailingIcon: effectiveTrailingIcon,
     variant,
     errorText,
-    value: String(value),
+    value: String(displayValue),
     suffix,
     multiline,
   });
 
   const TextComponent = multiline ? TextareaAutosize : 'input';
-  const textComponentProps = multiline ? {} : { type };
+  // For select, we want the input to be readOnly but still focusable? 
+  // Actually, for better UX, standard select inputs are often readOnly text fields.
+  const textComponentProps = multiline
+    ? {}
+    : {
+        type: isSelectInput ? 'text' : type,
+        readOnly: isSelectInput,
+      };
 
   const isFloating =
     isFocused ||
     (typeof value === 'string' && value.length > 0) ||
-    type == 'date'; // Float label when picker open
+    type == 'date' ||
+    (isSelectInput && showMenu);
+
   const showLegend = isFloating && variant === 'outlined';
   const showLabel = !showLegend;
 
   return (
     <div ref={textFieldRef} className={styles.textField} style={style}>
       <fieldset
-        onClick={focusInput}
+        onClick={() => {
+            if (isSelectInput) handleSelectToggle();
+            else focusInput();
+        }}
         className={styles.content}
         role="presentation"
       >
@@ -282,14 +417,19 @@ export const TextField = ({
           <TextComponent
             {...(restProps as any)}
             ref={inputRef as any}
-            value={value}
+            value={displayValue} // Use displayValue for select
             onChange={handleChange}
-            className={classNames(styles.input, inputDateClass)}
+            className={classNames(styles.input, inputSpecialClass)}
             id={id}
             name={name}
             placeholder={isFocused ? (placeholder ?? undefined) : ''}
-            onFocus={() => setIsFocused(true)}
-            onBlur={() => setIsFocused(false)}
+            onFocus={() => {
+                if(!isSelectInput) setIsFocused(true)
+            }}
+            onBlur={() => {
+                 // For select, we manage focus manually with menu state usually
+                 if(!isSelectInput) setIsFocused(false)
+            }}
             disabled={disabled}
             autoComplete={autoComplete}
             aria-invalid={!!errorText?.length}
@@ -307,11 +447,12 @@ export const TextField = ({
                 ref={isDateInput ? calendarTriggerRef : undefined}
                 onClick={(event) => {
                   event.stopPropagation();
-                  if (isDateInput) handleDatePickerOpen();
+                  if (isDateInput) handleDatePickerToggle();
+                  if (isSelectInput) handleSelectToggle();
                 }}
                 className={classNames(
                   styles.trailingIcon,
-                  isDateInput && 'cursor-pointer',
+                  (isDateInput || isSelectInput) && 'cursor-pointer',
                 )}
               >
                 <div className="flex items-center justify-center w-full h-full">
@@ -358,18 +499,7 @@ export const TextField = ({
 
       {isDateInput && showDatePicker && (
         <>
-          <AnchorPositioner
-            onBlur={(e) => {
-              if (
-                datePickerRef.current &&
-                !datePickerRef.current?.contains(e.relatedTarget)
-              ) {
-                setShowDatePicker(false);
-              }
-            }}
-            anchorRef={textFieldRef}
-            position="bottom"
-          >
+          <AnchorPositioner anchorRef={textFieldRef} position="bottom">
             <div
               ref={datePickerRef}
               className="z-50 shadow-xl rounded-[28px] bg-surface-container-high overflow-hidden"
@@ -399,6 +529,40 @@ export const TextField = ({
           </AnchorPositioner>
         </>
       )}
+
+      {isSelectInput && showMenu && (
+        <AnchorPositioner anchorRef={textFieldRef} position="bottom" style={{ width: textFieldRef.current?.offsetWidth }}>
+            <div ref={menuRef}>
+                <Menu
+                    selected={value}
+                    onItemSelect={handleSelectOption}
+                >
+                    {children}
+                    {!children && options?.map((opt, i) => {
+                         if (opt.type === 'divider') {
+                            return <Divider key={i} className="my-1" />
+                         }
+                         if (opt.type === 'headline') {
+                            return <MenuHeadline key={i} label={opt.label} />
+                         }
+                         return (
+                            <MenuItem
+                                key={opt.value ?? i}
+                                value={opt.value ?? ''}
+                                label={opt.label}
+                                leadingIcon={opt.leadingIcon}
+                                trailingIcon={opt.trailingIcon}
+                                disabled={opt.disabled}
+                            >
+                                {opt.label}
+                            </MenuItem>
+                         )
+                    })}
+                </Menu>
+            </div>
+        </AnchorPositioner>
+      )}
     </div>
   );
 };
+

package/src/lib/components/index.ts

@@ -1,17 +1,22 @@
+
 export * from './AnchorPositioner';
 export * from './Button';
 export * from './Card';
+export * from './Card';
 export * from './Carousel';
 export * from './CarouselItem';
-export * from './CarouselItem';
 export * from './Checkbox';
 export * from './Chip';
+export * from './ContextMenu';
 export * from './Chips';
 export * from './Divider';
 export * from './Fab';
 export * from './FabMenu';
 export * from './IconButton';
-export * from './IconButton';
+export * from './Menu';
+export * from './MenuItem';
+export * from './MenuGroup';
+export * from './MenuHeadline';
 export * from './ProgressIndicator';
 export * from './Slider';
 export * from './SideSheet';

package/src/lib/interfaces/index.ts

@@ -9,6 +9,7 @@ export * from './divider.interface';
 export * from './fab.interface';
 export * from './fab-menu.interface';
 export * from './icon-button.interface';
+export * from './menu.interface';
 export * from './progress-indicator.interface';
 export * from './side-sheet.interface';
 export * from './slider.interface';

package/src/lib/interfaces/menu-group.interface.ts

@@ -0,0 +1,13 @@
+export interface MenuGroupProps {
+  children: React.ReactNode;
+  className?: string;
+  variant?: 'standard' | 'vibrant';
+  label?: string;
+}
+
+export interface MenuGroupInterface {
+  type: 'div';
+  props: MenuGroupProps;
+  states: object;
+  elements: ['menuGroup', 'groupLabel'];
+}

package/src/lib/interfaces/menu-item.interface.ts

@@ -0,0 +1,35 @@
+import { ComponentInterface } from '../utils/component';
+
+export interface MenuItemInterface extends ComponentInterface {
+  value: string | number;
+  label?: string;
+  children?: React.ReactNode;
+  leadingIcon?: any;
+  trailingIcon?: any;
+  disabled?: boolean;
+  selected?: boolean; // Injected by parent
+  variant?: 'standard' | 'vibrant'; // Injected by parent
+  onClick?: (e?: React.MouseEvent) => void;
+  // ComponentInterface implementation
+  type: 'div';
+  props: {
+    label?: string;
+    value: string | number;
+    leadingIcon?: any;
+    trailingIcon?: any;
+    disabled?: boolean;
+    selected?: boolean;
+    variant?: 'standard' | 'vibrant';
+    onItemSelect?: (value: string | number) => void; // Injected
+    children?: React.ReactNode;
+  };
+  states: Record<string, any>;
+  elements: [
+    'menuItem',
+    'selectedItem',
+    'itemLabel',
+    'itemIcon',
+    'leadingIcon',
+    'trailingIcon',
+  ];
+}

package/src/lib/interfaces/menu.interface.ts

@@ -0,0 +1,20 @@
+export type MenuStates = Record<string, any>;
+
+export interface MenuProps {
+  children: React.ReactNode;
+  selected?: string | number | (string | number)[];
+  onItemSelect?: (value: string | number) => void;
+  className?: string;
+  variant?: 'standard' | 'vibrant';
+  // options prop REMOVED as requested by user ("options passed as children")
+  // However, for backward compat or data-driven, one might want it, but I will strictly follow "options as children"
+}
+
+export interface MenuInterface {
+  type: 'div';
+  props: MenuProps;
+  states: {
+    hasGroups: boolean;
+  };
+  elements: ['menu'];
+}

package/src/lib/interfaces/text-field.interface.ts

@@ -22,7 +22,15 @@ type Props = {
   id?: string;
   style?: React.CSSProperties;
   variant?: TextFieldVariant;
-  type?: 'text' | 'password' | 'number' | 'date';
+  options?: Array<{
+    label: string;
+    value: string | number;
+    leadingIcon?: any;
+    trailingIcon?: any;
+    disabled?: boolean;
+    type?: 'divider' | 'headline';
+  }>;
+  type?: 'text' | 'password' | 'number' | 'date' | 'select';
   autoComplete?: 'on' | 'off' | string;
   autoFocus?: boolean;
   multiline?: boolean;

package/src/lib/styles/index.ts

@@ -9,6 +9,8 @@ export * from './divider.style';
 export * from './fab.style';
 export * from './fab-menu.style';
 export * from './icon-button.style';
+export * from './menu.style';
+export * from './menu-group.style';
 export * from './progress-indicator.style';
 export * from './side-sheet.style';
 export * from './slider.style';
@@ -20,3 +22,4 @@ export * from './tab-panels.style';
 export * from './text-field.style';
 export * from './tooltip.style';
 export { useButtonStyle } from './button.style';
+export { useMenuStyle } from './menu.style';

package/src/lib/styles/menu-group.style.ts

@@ -0,0 +1,34 @@
+import {
+  type ClassNameComponent,
+  classNames,
+  createUseClassNames,
+  defaultClassNames,
+} from '../utils';
+import { MenuGroupInterface } from '../interfaces/menu-group.interface';
+
+const menuGroupConfig: ClassNameComponent<MenuGroupInterface> = ({
+  variant,
+}) => ({
+  menuGroup: classNames(
+    'flex flex-col gap-0.5 mb-0.5 last:mb-0',
+    'rounded-lg py-0.5 px-1 shadow-2 first:rounded-t-2xl last:rounded-b-2xl',
+    {
+      'bg-surface-container': variant === 'standard',
+      'bg-tertiary-container text-on-tertiary-container': variant === 'vibrant',
+    },
+  ),
+  groupLabel: classNames('px-3 pt-2  text-label-small tracking-wide ', {
+    'text-on-surface-variant': variant === 'standard',
+    'text-on-tertiary-container opacity-80': variant === 'vibrant',
+  }),
+});
+
+export const menuGroupStyle = defaultClassNames<MenuGroupInterface>(
+  'menuGroup',
+  menuGroupConfig,
+);
+
+export const useMenuGroupStyle = createUseClassNames<MenuGroupInterface>(
+  'menuGroup',
+  menuGroupConfig,
+);

package/src/lib/styles/menu-headline.style.ts

@@ -0,0 +1,20 @@
+
+import { type ClassNameComponent, classNames, defaultClassNames, createUseClassNames } from '../utils';
+
+export interface MenuHeadlineInterface {
+    label?: string;
+    variant?: 'standard' | 'vibrant';
+    type: 'div';
+    props: { label?: string; variant?: 'standard' | 'vibrant' };
+    states: Record<string, any>;
+    elements: ['headline'];
+}
+
+const menuHeadlineConfig: ClassNameComponent<MenuHeadlineInterface> = ({ props }) => ({
+  headline: classNames('px-3 py-1 text-label-small opacity-60 mt-1', {
+      'text-on-surface-variant': !props?.variant || props.variant === 'standard',
+       // Vibrant treatment if different
+  }),
+});
+
+export const useMenuHeadlineStyle = createUseClassNames<MenuHeadlineInterface>('menu-headline', menuHeadlineConfig);

package/src/lib/styles/menu-item.style.ts

@@ -0,0 +1,53 @@
+import {
+  type ClassNameComponent,
+  classNames,
+  createUseClassNames,
+  defaultClassNames,
+} from '../utils';
+import { MenuItemInterface } from '../interfaces/menu-item.interface';
+
+const menuItemConfig: ClassNameComponent<MenuItemInterface> = ({
+  variant,
+  disabled,
+  selected,
+}) => ({
+  menuItem: classNames(
+    'group/menu-item  overflow-hidden flex items-center h-12 px-3 cursor-pointer outline-none select-none shrink-0 ',
+    'text-label-large',
+    'transition-colors duration-200',
+    {
+      'rounded-sm': selected,
+      'rounded-xl': !selected,
+    },
+    {
+      'text-on-surface': !variant || variant === 'standard',
+      // 'hover:bg-on-surface/[0.08] focus:bg-on-surface/[0.12]': !props?.variant || props.variant === 'standard', // Handled by State
+      // 'hover:bg-on-tertiary-container/[0.08] focus:bg-on-tertiary-container/[0.12]': props?.variant === 'vibrant', // Handled by State
+      'opacity-38 pointer-events-none': disabled,
+    },
+  ),
+  selectedItem: classNames(
+    'bg-secondary-container text-on-secondary-container',
+    // 'hover:bg-secondary-container/[0.8]',
+    '[&_.menu-item-icon]:text-inherit',
+    {
+      // For vibrant, selected state
+      '!bg-on-tertiary-container/[0.12]': variant === 'vibrant',
+    },
+  ),
+  itemLabel: classNames('flex-1 truncate'),
+  itemIcon: classNames(
+    'w-6 h-6 flex items-center justify-center menu-item-icon',
+  ),
+  leadingIcon: classNames('mr-3'),
+  trailingIcon: classNames('ml-3'),
+});
+
+export const menuItemStyle = defaultClassNames<MenuItemInterface>(
+  'menuItem',
+  menuItemConfig,
+);
+export const useMenuItemStyle = createUseClassNames<MenuItemInterface>(
+  'menuItem',
+  menuItemConfig,
+);

package/src/lib/styles/menu.style.ts

@@ -0,0 +1,32 @@
+import {
+  type ClassNameComponent,
+  classNames,
+  createUseClassNames,
+  defaultClassNames,
+} from '../utils';
+import { MenuInterface } from '../interfaces';
+
+const menuConfig: ClassNameComponent<MenuInterface> = ({
+  variant,
+  hasGroups,
+}) => ({
+  menu: classNames(
+    'z-50 min-w-[112px] max-w-[280px] max-h-[300px] ',
+    'flex flex-col',
+    { 'overflow-y-auto': !hasGroups },
+    {
+      'bg-surface-container': !variant || variant === 'standard',
+      // Vibrant uses tertiary-container (approximated) or just colored surface
+      'bg-tertiary-container text-on-tertiary-container': variant === 'vibrant',
+      'py-0.5 shadow-2 px-1 rounded-2xl': !hasGroups,
+      'bg-transparent ': hasGroups,
+    },
+  ),
+});
+
+export const menuStyle = defaultClassNames<MenuInterface>('menu', menuConfig);
+
+export const useMenuStyle = createUseClassNames<MenuInterface>(
+  'menu',
+  menuConfig,
+);