@udixio/ui-react 2.10.2 → 2.10.4

package/src/lib/components/TextField.tsx

@@ -2,9 +2,9 @@ import React, { useEffect, useId, useMemo, useRef, useState } from 'react';
 import { Icon } from '../icon';
 import {
   faCalendarDays,
-  faCircleExclamation,
   faChevronDown,
   faChevronUp,
+  faCircleExclamation,
 } from '@fortawesome/free-solid-svg-icons';
 import { motion } from 'motion/react';
 import { DatePicker } from './DatePicker';
@@ -323,7 +323,7 @@ export const TextField = ({
   });
 
   const TextComponent = multiline ? TextareaAutosize : 'input';
-  // For select, we want the input to be readOnly but still focusable? 
+  // 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
     ? {}
@@ -345,8 +345,8 @@ export const TextField = ({
     <div ref={textFieldRef} className={styles.textField} style={style}>
       <fieldset
         onClick={() => {
-            if (isSelectInput) handleSelectToggle();
-            else focusInput();
+          if (isSelectInput) handleSelectToggle();
+          else focusInput();
         }}
         className={styles.content}
         role="presentation"
@@ -424,11 +424,11 @@ export const TextField = ({
             name={name}
             placeholder={isFocused ? (placeholder ?? undefined) : ''}
             onFocus={() => {
-                if(!isSelectInput) setIsFocused(true)
+              if (!isSelectInput) setIsFocused(true);
             }}
             onBlur={() => {
-                 // For select, we manage focus manually with menu state usually
-                 if(!isSelectInput) setIsFocused(false)
+              // For select, we manage focus manually with menu state usually
+              if (!isSelectInput) setIsFocused(false);
             }}
             disabled={disabled}
             autoComplete={autoComplete}
@@ -531,38 +531,56 @@ export const TextField = ({
       )}
 
       {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
+          anchorRef={textFieldRef}
+          position="bottom"
+          style={{ width: textFieldRef.current?.offsetWidth }}
+        >
+          <div ref={menuRef}>
+            <Menu selected={value}>
+              {children
+                ? React.Children.map(children, (child) => {
+                    if (
+                      React.isValidElement(child) &&
+                      child.type === MenuItem
+                    ) {
+                      return React.cloneElement(child, {
+                        onClick: (e: React.MouseEvent) => {
+                          if (child.props.onClick) {
+                            child.props.onClick(e);
+                          }
+                          handleSelectOption(child.props.value ?? '');
+                        },
+                      } as any);
+                    }
+                    return child;
+                  })
+                : 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}
+                        onClick={(e) => {
+                          if (opt.onClick) {
+                            opt.onClick(e);
+                          }
+                          handleSelectOption(opt.value ?? '');
+                        }}
+                        {...opt}
+                      >
+                        {opt.label}
+                      </MenuItem>
+                    );
+                  })}
+            </Menu>
+          </div>
         </AnchorPositioner>
       )}
     </div>
   );
 };
-

package/src/lib/interfaces/index.ts

@@ -10,6 +10,8 @@ export * from './fab.interface';
 export * from './fab-menu.interface';
 export * from './icon-button.interface';
 export * from './menu.interface';
+export * from './menu-group.interface';
+export * from './menu-item.interface';
 export * from './progress-indicator.interface';
 export * from './side-sheet.interface';
 export * from './slider.interface';

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

@@ -1,35 +1,29 @@
-import { ComponentInterface } from '../utils/component';
+import { ActionOrLink } from '../utils/component';
 
-export interface MenuItemInterface extends ComponentInterface {
-  value: string | number;
+type Props = {
   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;
+  onToggle?: (activated: boolean) => void;
+  activated?: boolean;
+};
+
+type Elements = [
+  'menuItem',
+  'selectedItem',
+  'itemLabel',
+  'itemIcon',
+  'leadingIcon',
+  'trailingIcon',
+];
+
+export type MenuItemInterface = ActionOrLink<Props> & {
+  states: {
+    isActive: boolean;
   };
-  states: Record<string, any>;
-  elements: [
-    'menuItem',
-    'selectedItem',
-    'itemLabel',
-    'itemIcon',
-    'leadingIcon',
-    'trailingIcon',
-  ];
-}
+  elements: Elements;
+};

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

@@ -3,7 +3,6 @@ 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")

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { IconButton } from '../components/IconButton';
 import { Icon } from '../icon';
+import { MenuItemInterface } from './menu-item.interface';
 
 export type TextFieldVariant = 'filled' | 'outlined';
 
@@ -22,14 +23,12 @@ type Props = {
   id?: string;
   style?: React.CSSProperties;
   variant?: TextFieldVariant;
-  options?: Array<{
-    label: string;
-    value: string | number;
-    leadingIcon?: any;
-    trailingIcon?: any;
-    disabled?: boolean;
-    type?: 'divider' | 'headline';
-  }>;
+  options?: Array<
+    {
+      value: string | number;
+      type?: 'divider' | 'headline';
+    } & MenuItemInterface['props']
+  >;
   type?: 'text' | 'password' | 'number' | 'date' | 'select';
   autoComplete?: 'on' | 'off' | string;
   autoFocus?: boolean;

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

@@ -9,31 +9,23 @@ import { MenuItemInterface } from '../interfaces/menu-item.interface';
 const menuItemConfig: ClassNameComponent<MenuItemInterface> = ({
   variant,
   disabled,
-  selected,
+  isActive,
 }) => ({
   menuItem: classNames(
-    'group/menu-item  overflow-hidden flex items-center h-12 px-3 cursor-pointer outline-none select-none shrink-0 ',
+    'group/menu-item text-start  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,
-    },
+    'rounded-xl',
+
     {
       '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',
-    },
+    (variant === 'vibrant' || isActive) && [
+      'bg-secondary-container text-on-secondary-container',
+    ],
   ),
   itemLabel: classNames('flex-1 truncate'),
   itemIcon: classNames(