@udixio/ui-react 2.10.2 → 2.10.3

package/dist/lib/components/Menu.d.ts

@@ -12,5 +12,5 @@ import { ReactProps } from '../utils/component';
  * @a11y
  * - `role="listbox"` with `aria-selected` management.
  */
-export declare const Menu: ({ children, selected, onItemSelect, className, variant, ...restProps }: ReactProps<MenuInterface>) => import("react/jsx-runtime").JSX.Element;
+export declare const Menu: ({ children, className, variant, ...restProps }: ReactProps<MenuInterface>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Menu.d.ts.map

package/dist/lib/components/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Menu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAG7D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAMhD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,IAAI,GAAI,wEAOlB,UAAU,CAAC,aAAa,CAAC,4CAmF3B,CAAC"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Menu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAG7D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAMhD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,IAAI,GAAI,gDAKlB,UAAU,CAAC,aAAa,CAAC,4CA4D3B,CAAC"}

package/dist/lib/components/MenuItem.d.ts

@@ -5,5 +5,5 @@ import { MenuItemInterface } from '../interfaces/menu-item.interface';
  * @status beta
  * @category Selection
  */
-export declare const MenuItem: ({ label, children, value, leadingIcon, trailingIcon, disabled, selected, variant, onClick, onItemSelect, className, ...restProps }: ReactProps<MenuItemInterface>) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItem: ({ label, children, value, leadingIcon, trailingIcon, disabled, variant, href, onClick, onToggle, activated, className, ...restProps }: ReactProps<MenuItemInterface>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MenuItem.d.ts.map

package/dist/lib/components/MenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/lib/components/MenuItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,UAAU,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAMtE;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,oIAatB,UAAU,CAAC,iBAAiB,CAAC,4CAyK/B,CAAC"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/lib/components/MenuItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,UAAU,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAMtE;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,uIActB,UAAU,CAAC,iBAAiB,CAAC,4CA0L/B,CAAC"}

package/dist/lib/interfaces/menu-item.interface.d.ts

@@ -1,34 +1,29 @@
-import { ComponentInterface } from '../utils/component';
-export interface MenuItemInterface extends ComponentInterface {
-    value: string | number;
+import { ActionOrLink } from '../utils/component';
+type Props = {
+    value?: string | number;
     label?: string;
     children?: React.ReactNode;
     leadingIcon?: any;
     trailingIcon?: any;
     disabled?: boolean;
-    selected?: boolean;
     variant?: 'standard' | 'vibrant';
     onClick?: (e?: React.MouseEvent) => void;
-    type: 'div';
-    props: {
-        label?: string;
-        value: string | number;
-        leadingIcon?: any;
-        trailingIcon?: any;
-        disabled?: boolean;
-        selected?: boolean;
-        variant?: 'standard' | 'vibrant';
-        onItemSelect?: (value: string | number) => void;
-        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;
+};
+export {};
 //# sourceMappingURL=menu-item.interface.d.ts.map

package/dist/lib/interfaces/menu-item.interface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/menu-item.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAExD,MAAM,WAAW,iBAAkB,SAAQ,kBAAkB;IAC3D,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAEzC,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE;QACL,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,WAAW,CAAC,EAAE,GAAG,CAAC;QAClB,YAAY,CAAC,EAAE,GAAG,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;QACjC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;QAChD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KAC5B,CAAC;IACF,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,QAAQ,EAAE;QACR,UAAU;QACV,cAAc;QACd,WAAW;QACX,UAAU;QACV,aAAa;QACb,cAAc;KACf,CAAC;CACH"}
+{"version":3,"file":"menu-item.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/menu-item.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,KAAK,QAAQ,GAAG;IACd,UAAU;IACV,cAAc;IACd,WAAW;IACX,UAAU;IACV,aAAa;IACb,cAAc;CACf,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG;IACpD,MAAM,EAAE;QACN,QAAQ,EAAE,OAAO,CAAC;KACnB,CAAC;IACF,QAAQ,EAAE,QAAQ,CAAC;CACpB,CAAC"}

package/dist/lib/styles/menu-item.style.d.ts

@@ -1,39 +1,89 @@
 import { ClassNameComponent } from '../utils';
 import { MenuItemInterface } from '../interfaces/menu-item.interface';
-export declare const menuItemStyle: (states: {
-    label: any;
+export declare const menuItemStyle: (states: (({
     value: any;
+    label: any;
+    children: any;
     leadingIcon: any;
     trailingIcon: any;
     disabled: any;
-    selected: any;
     variant: any;
-    onItemSelect: any;
+    onClick: any;
+    onToggle: any;
+    activated: any;
+    href: any;
+} | {
+    value: any;
+    label: any;
     children: any;
-} & {
+    leadingIcon: any;
+    trailingIcon: any;
+    disabled: any;
+    variant: any;
+    onClick: any;
+    onToggle: any;
+    activated: any;
+    href: any;
+}) & (({
+    value?: string | number;
     label?: string;
-    value: string | number;
+    children?: React.ReactNode;
     leadingIcon?: any;
     trailingIcon?: any;
     disabled?: boolean;
-    selected?: boolean;
     variant?: "standard" | "vibrant";
-    onItemSelect?: (value: string | number) => void;
+    onClick?: (e?: React.MouseEvent) => void;
+    onToggle?: (activated: boolean) => void;
+    activated?: boolean;
+} & {
+    href?: string;
+}) | ({
+    value?: string | number;
+    label?: string;
     children?: React.ReactNode;
-} & Record<string, any> & {
+    leadingIcon?: any;
+    trailingIcon?: any;
+    disabled?: boolean;
+    variant?: "standard" | "vibrant";
+    onClick?: (e?: React.MouseEvent) => void;
+    onToggle?: (activated: boolean) => void;
+    activated?: boolean;
+} & {
+    href?: never;
+}))) & {
+    isActive: boolean;
+} & {
     className: string | ClassNameComponent<MenuItemInterface> | undefined;
 }) => Record<"leadingIcon" | "trailingIcon" | "selectedItem" | "menuItem" | "itemLabel" | "itemIcon", string>;
-export declare const useMenuItemStyle: (states: Record<string, any> & {
+export declare const useMenuItemStyle: (states: {
+    isActive: boolean;
+} & ((({
+    value?: string | number;
     label?: string;
-    value: string | number;
+    children?: React.ReactNode;
     leadingIcon?: any;
     trailingIcon?: any;
     disabled?: boolean;
-    selected?: boolean;
     variant?: "standard" | "vibrant";
-    onItemSelect?: (value: string | number) => void;
+    onClick?: (e?: React.MouseEvent) => void;
+    onToggle?: (activated: boolean) => void;
+    activated?: boolean;
+} & {
+    href?: string;
+}) | ({
+    value?: string | number;
+    label?: string;
     children?: React.ReactNode;
+    leadingIcon?: any;
+    trailingIcon?: any;
+    disabled?: boolean;
+    variant?: "standard" | "vibrant";
+    onClick?: (e?: React.MouseEvent) => void;
+    onToggle?: (activated: boolean) => void;
+    activated?: boolean;
 } & {
+    href?: never;
+})) & {
     className?: string | ClassNameComponent<MenuItemInterface> | undefined;
-}) => Record<"leadingIcon" | "trailingIcon" | "selectedItem" | "menuItem" | "itemLabel" | "itemIcon", string>;
+})) => Record<"leadingIcon" | "trailingIcon" | "selectedItem" | "menuItem" | "itemLabel" | "itemIcon", string>;
 //# sourceMappingURL=menu-item.style.d.ts.map

package/dist/lib/styles/menu-item.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/menu-item.style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAuCtE,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;6GAGzB,CAAC;AACF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;6GAG5B,CAAC"}
+{"version":3,"file":"menu-item.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/menu-item.style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AA+BtE,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA1BpB,CAAC;;;;;;;;;;;;;gBAAD,CAAC;;;;;;;;;6GA6BN,CAAC;AACF,eAAO,MAAM,gBAAgB;;;;;;;;;;gBA9BvB,CAAC;;;;;;;;;;;;;gBAAD,CAAC;;;;;;;8GAiCN,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/ui-react",
-  "version": "2.10.2",
+  "version": "2.10.3",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/lib/components/Menu.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 import { MenuInterface } from '../interfaces/menu.interface';
 import { useMenuStyle } from '../styles/menu.style';
 import { classNames } from '../utils';
@@ -22,8 +22,6 @@ import { MenuGroup } from './MenuGroup';
  */
 export const Menu = ({
   children,
-  selected,
-  onItemSelect,
   className,
   variant = 'standard',
   ...restProps
@@ -34,8 +32,6 @@ export const Menu = ({
   );
   const styles = useMenuStyle({
     children,
-    selected,
-    onItemSelect,
     className,
     variant,
     hasGroups,
@@ -44,18 +40,6 @@ export const Menu = ({
 
   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;
@@ -70,17 +54,8 @@ export const Menu = ({
       }
 
       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);
       }
 

package/src/lib/components/MenuItem.tsx

@@ -1,9 +1,9 @@
-import React, { useRef, useState } from 'react';
+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 { faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import { faCheck, faChevronRight } from '@fortawesome/free-solid-svg-icons';
 import { AnchorPositioner } from './AnchorPositioner';
 import { State } from '../effects';
 
@@ -19,10 +19,11 @@ export const MenuItem = ({
   leadingIcon,
   trailingIcon,
   disabled,
-  selected,
-  variant,
+  variant = 'standard',
+  href,
   onClick,
-  onItemSelect, // Injected by Menu
+  onToggle,
+  activated = false,
   className,
   ...restProps
 }: ReactProps<MenuItemInterface>) => {
@@ -47,15 +48,26 @@ export const MenuItem = ({
   const labelContent = contentChildren.length > 0 ? contentChildren : label;
 
   const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);
-  const itemRef = useRef<HTMLDivElement>(null);
+  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,
-    selected,
     className,
     value,
+    activated: isActive,
+    isActive,
   });
 
   const handleClick = (e: React.MouseEvent) => {
@@ -69,9 +81,11 @@ export const MenuItem = ({
       return;
     }
 
-    onClick?.(e);
-    if (onItemSelect) {
-      onItemSelect(value);
+    if (onToggle) {
+      setIsActive(!isActive);
+      onToggle(!isActive);
+    } else {
+      onClick?.(e);
     }
   };
 
@@ -104,20 +118,23 @@ export const MenuItem = ({
   const effectiveTrailingIcon =
     trailingIcon ?? (subMenuElement ? faChevronRight : undefined);
 
+  const ElementType = href ? 'a' : 'button';
+
   return (
-    <div
-      ref={itemRef}
-      className={styles.menuItem} // Added relative and overflow-hidden for State
+    <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-selected={selected}
+      aria-pressed={onToggle ? isActive : undefined}
       tabIndex={disabled ? -1 : 0}
+      disabled={!href ? disabled : undefined}
       onKeyDown={(e) => {
-        // ... key handlers ...
         if (e.key === 'Enter' || e.key === ' ') {
           e.preventDefault();
           if (subMenuElement) {
@@ -135,14 +152,15 @@ export const MenuItem = ({
           e.stopPropagation();
         }
       }}
-      {...restProps}
+      {...(restProps as any)}
     >
       <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',
+          variant === 'vibrant' || isActive
+            ? 'on-tertiary-container'
+            : 'on-secondary-container',
         )}
         stateClassName={'state-ripple-group-[menu-item]'}
       />
@@ -192,6 +210,6 @@ export const MenuItem = ({
           </div>
         </AnchorPositioner>
       )}
-    </div>
+    </ElementType>
   );
 };

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

@@ -1,35 +1,30 @@
-import { ComponentInterface } from '../utils/component';
+import { ActionOrLink } from '../utils/component';
 
-export interface MenuItemInterface extends ComponentInterface {
-  value: string | number;
+type Props = {
+  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;
+  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/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(