@udixio/ui-react 2.10.2 → 2.10.4

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

@@ -11,5 +11,5 @@ export type ContextMenuProps = {
     };
     elements: [''];
 };
-export declare const ContextMenu: ({ trigger, children, onItemSelect, ...menuProps }: ReactProps<ContextMenuProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const ContextMenu: ({ trigger, children, ...menuProps }: ReactProps<ContextMenuProps>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ContextMenu.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ContextMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAMtC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE;QAAE,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC7D,IAAI,EAAE,KAAK,CAAC;IACZ,MAAM,EAAE;QACN,SAAS,EAAE,OAAO,CAAC;KACpB,CAAC;IACF,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,mDAKzB,UAAU,CAAC,gBAAgB,CAAC,4CAqF9B,CAAC"}
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ContextMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAMtC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE;QAAE,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC7D,IAAI,EAAE,KAAK,CAAC;IACZ,MAAM,EAAE;QACN,SAAS,EAAE,OAAO,CAAC;KACpB,CAAC;IACF,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,qCAIzB,UAAU,CAAC,gBAAgB,CAAC,4CAoF9B,CAAC"}

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, 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,gIAatB,UAAU,CAAC,iBAAiB,CAAC,4CA2L/B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAmB3E,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,GAAI,4SA4BvB,UAAU,CAAC,kBAAkB,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4CAwfjE,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAmB3E,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,GAAI,4SA4BvB,UAAU,CAAC,kBAAkB,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4CA2gBjE,CAAC"}

package/dist/lib/interfaces/index.d.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/dist/lib/interfaces/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kCAAkC,CAAC;AACjD,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kCAAkC,CAAC;AACjD,cAAc,qBAAqB,CAAC"}

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

@@ -1,34 +1,28 @@
-import { ComponentInterface } from '../utils/component';
-export interface MenuItemInterface extends ComponentInterface {
-    value: string | number;
+import { ActionOrLink } from '../utils/component';
+type Props = {
     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,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/interfaces/menu.interface.d.ts

@@ -2,7 +2,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';
 }

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

@@ -1 +1 @@
-{"version":3,"file":"menu.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/menu.interface.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAE7C,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACjD,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;CAGlC;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,EAAE;QACN,SAAS,EAAE,OAAO,CAAC;KACpB,CAAC;IACF,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC;CACpB"}
+{"version":3,"file":"menu.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/menu.interface.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAE7C,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;CAGlC;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,EAAE;QACN,SAAS,EAAE,OAAO,CAAC;KACpB,CAAC;IACF,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC;CACpB"}

package/dist/lib/interfaces/text-field.interface.d.ts

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

package/dist/lib/interfaces/text-field.interface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/text-field.interface.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAErD,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;IAC5D,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;IAC5E,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,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,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;KAC/B,CAAC,CAAC;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC1D,YAAY,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AACF,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;IACvB,kBAAkB,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE;QACR,WAAW;QACX,SAAS;QACT,OAAO;QACP,OAAO;QACP,iBAAiB;QACjB,gBAAgB;QAChB,aAAa;QACb,cAAc;QACd,QAAQ;QACR,YAAY;KACb,CAAC;CACH"}
+{"version":3,"file":"text-field.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/text-field.interface.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAErD,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;IAC5D,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;IAC5E,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CACb;QACE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;KAC/B,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAC/B,CAAC;IACF,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC1D,YAAY,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AACF,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;IACvB,kBAAkB,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE;QACR,WAAW;QACX,SAAS;QACT,OAAO;QACP,OAAO;QACP,iBAAiB;QACjB,gBAAgB;QAChB,aAAa;QACb,cAAc;QACd,QAAQ;QACR,YAAY;KACb,CAAC;CACH"}

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

@@ -5,10 +5,10 @@ export declare const menuGroupStyle: (states: {
     className: any;
     variant: any;
     label: any;
-} & import('../interfaces/menu-group.interface').MenuGroupProps & object & {
+} & import('..').MenuGroupProps & object & {
     className: string | ClassNameComponent<MenuGroupInterface> | undefined;
 }) => Record<"menuGroup" | "groupLabel", string>;
-export declare const useMenuGroupStyle: (states: object & import('../interfaces/menu-group.interface').MenuGroupProps & {
+export declare const useMenuGroupStyle: (states: object & import('..').MenuGroupProps & {
     className?: string | ClassNameComponent<MenuGroupInterface> | undefined;
 }) => Record<"menuGroup" | "groupLabel", string>;
 //# sourceMappingURL=menu-group.style.d.ts.map

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

@@ -1,39 +1,83 @@
 import { ClassNameComponent } from '../utils';
 import { MenuItemInterface } from '../interfaces/menu-item.interface';
-export declare const menuItemStyle: (states: {
+export declare const menuItemStyle: (states: (({
     label: any;
-    value: any;
+    children: any;
     leadingIcon: any;
     trailingIcon: any;
     disabled: any;
-    selected: any;
     variant: any;
-    onItemSelect: any;
+    onClick: any;
+    onToggle: any;
+    activated: any;
+    href: any;
+} | {
+    label: any;
     children: any;
-} & {
+    leadingIcon: any;
+    trailingIcon: any;
+    disabled: any;
+    variant: any;
+    onClick: any;
+    onToggle: any;
+    activated: any;
+    href: any;
+}) & (({
     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;
+}) | ({
+    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;
+} & ((({
     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;
+}) | ({
+    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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA5BxB,CAAC;;;;;;;;;;;;gBAAD,CAAC;;;;;;;;;6GA+BF,CAAC;AACF,eAAO,MAAM,gBAAgB;;;;;;;;;gBAhC3B,CAAC;;;;;;;;;;;;gBAAD,CAAC;;;;;;;8GAmCF,CAAC"}

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

@@ -3,7 +3,6 @@ import { MenuInterface } from '../interfaces';
 export declare const menuStyle: (states: {
     children: any;
     selected: any;
-    onItemSelect: any;
     className: any;
     variant: any;
 } & import('..').MenuProps & {

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

@@ -1 +1 @@
-{"version":3,"file":"menu.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/menu.style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAoB9C,eAAO,MAAM,SAAS;;;;;;;;;;4BAAuD,CAAC;AAE9E,eAAO,MAAM,YAAY;;;;4BAGxB,CAAC"}
+{"version":3,"file":"menu.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/menu.style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAoB9C,eAAO,MAAM,SAAS;;;;;;;;;4BAAuD,CAAC;AAE9E,eAAO,MAAM,YAAY;;;;4BAGxB,CAAC"}

package/dist/lib/styles/text-field.style.d.ts

@@ -43,13 +43,9 @@ export declare const textFieldStyle: (states: {
     style?: React.CSSProperties;
     variant?: import('..').TextFieldVariant;
     options?: Array<{
-        label: string;
         value: string | number;
-        leadingIcon?: any;
-        trailingIcon?: any;
-        disabled?: boolean;
         type?: "divider" | "headline";
-    }>;
+    } & import('..').MenuItemInterface["props"]>;
     type?: "text" | "password" | "number" | "date" | "select";
     autoComplete?: "on" | "off" | string;
     autoFocus?: boolean;
@@ -77,13 +73,9 @@ export declare const useTextFieldStyle: (states: import('..').TextFieldStates &
     style?: React.CSSProperties;
     variant?: import('..').TextFieldVariant;
     options?: Array<{
-        label: string;
         value: string | number;
-        leadingIcon?: any;
-        trailingIcon?: any;
-        disabled?: boolean;
         type?: "divider" | "headline";
-    }>;
+    } & import('..').MenuItemInterface["props"]>;
     type?: "text" | "password" | "number" | "date" | "select";
     autoComplete?: "on" | "off" | string;
     autoFocus?: boolean;

package/dist/lib/styles/text-field.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/text-field.style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAmGnD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA3ErB,CAAL;oBAAuB,CAAC;gBAAmB,CAAC;YACtC,CAAC;;;;;;;;;;mKA6EP,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;mBAhFxB,CAAL;oBAAuB,CAAC;gBAAmB,CAAC;YACtC,CAAC;;;;;;;;;;mKAkFP,CAAC"}
+{"version":3,"file":"text-field.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/text-field.style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAmGnD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA3EgB,CAAA;;;;;;;;;;mKA8E1C,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;YAhFa,CAAA;;;;;;;;;;mKAmF1C,CAAC"}

package/package.json

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

package/src/lib/components/ContextMenu.tsx

@@ -21,7 +21,6 @@ export type ContextMenuProps = {
 export const ContextMenu = ({
   trigger,
   children,
-  onItemSelect,
   ...menuProps
 }: ReactProps<ContextMenuProps>) => {
   const [contextMenu, setContextMenu] = useState<{
@@ -42,9 +41,8 @@ export const ContextMenu = ({
     setContextMenu(null);
   };
 
-  const handleSelect = (val: string | number) => {
+  const handleSelect = () => {
     handleClose();
-    onItemSelect?.(val);
   };
 
   useEffect(() => {
@@ -101,7 +99,7 @@ export const ContextMenu = ({
           position="bottom right"
           onClick={(e) => e.stopPropagation()}
         >
-          <Menu onItemSelect={handleSelect} {...menuProps}>
+          <Menu onClick={handleSelect} {...menuProps}>
             {children}
           </Menu>
         </AnchorPositioner>

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';
 
@@ -15,14 +15,14 @@ import { State } from '../effects';
 export const MenuItem = ({
   label,
   children,
-  value,
   leadingIcon,
   trailingIcon,
   disabled,
-  selected,
-  variant,
+  variant = 'standard',
+  href,
   onClick,
-  onItemSelect, // Injected by Menu
+  onToggle,
+  activated = false,
   className,
   ...restProps
 }: ReactProps<MenuItemInterface>) => {
@@ -47,18 +47,29 @@ 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) => {
+    console.log('refrefd', disabled, subMenuElement, onToggle);
     if (disabled) {
       e.preventDefault();
       return;
@@ -69,9 +80,12 @@ export const MenuItem = ({
       return;
     }
 
-    onClick?.(e);
-    if (onItemSelect) {
-      onItemSelect(value);
+    if (onToggle) {
+      setIsActive(!isActive);
+      onToggle(!isActive);
+    } else {
+      console.log('click', onClick);
+      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>
   );
 };