@react-fabric/core 1.0.0-beta.60 → 1.0.0-beta.62

package/dist/types/types/index.d.ts

@@ -5,7 +5,7 @@ export type ModalProps<P = unknown> = P & {
 };
 export type SizeType = "xs" | "sm" | "md" | "lg" | "xl";
 export type SizeTypeWithZero = "xs" | "sm" | "md" | "lg" | "xl" | 0;
-export type ColorState = "primary" | "accent" | "info" | "danger" | "success" | "warning";
+export type ColorState = "default" | "primary" | "accent" | "muted" | "info" | "danger" | "success" | "warning";
 export type ColorType = "primary-50" | "primary-100" | "primary-200" | "primary-300" | "primary-400" | "primary-500" | "primary-600" | "primary-700" | "primary-800" | "primary-900" | "primary-950" | "accent-50" | "accent-100" | "accent-200" | "accent-300" | "accent-400" | "accent-500" | "accent-600" | "accent-700" | "accent-800" | "accent-900" | "accent-950" | "info-50" | "info-100" | "info-200" | "info-300" | "info-400" | "info-500" | "info-600" | "info-700" | "info-800" | "info-900" | "info-950" | "danger-50" | "danger-100" | "danger-200" | "danger-300" | "danger-400" | "danger-500" | "danger-600" | "danger-700" | "danger-800" | "danger-900" | "danger-950" | "success-50" | "success-100" | "success-200" | "success-300" | "success-400" | "success-500" | "success-600" | "success-700" | "success-800" | "success-900" | "success-950" | "warning-50" | "warning-100" | "warning-200" | "warning-300" | "warning-400" | "warning-500" | "warning-600" | "warning-700" | "warning-800" | "warning-900" | "warning-950";
 export type PaletteType = "scarlet-50" | "scarlet-100" | "scarlet-200" | "scarlet-300" | "scarlet-400" | "scarlet-500" | "scarlet-600" | "scarlet-700" | "scarlet-800" | "scarlet-900" | "scarlet-950" | "pumpkin-50" | "pumpkin-100" | "pumpkin-200" | "pumpkin-300" | "pumpkin-400" | "pumpkin-500" | "pumpkin-600" | "pumpkin-700" | "pumpkin-800" | "pumpkin-900" | "pumpkin-950" | "marigold-50" | "marigold-100" | "marigold-200" | "marigold-300" | "marigold-400" | "marigold-500" | "marigold-600" | "marigold-700" | "marigold-800" | "marigold-900" | "marigold-950" | "avacado-50" | "avacado-100" | "avacado-200" | "avacado-300" | "avacado-400" | "avacado-500" | "avacado-600" | "avacado-700" | "avacado-800" | "avacado-900" | "avacado-950" | "jade-50" | "jade-100" | "jade-200" | "jade-300" | "jade-400" | "jade-500" | "jade-600" | "jade-700" | "jade-800" | "jade-900" | "jade-950" | "denim-50" | "denim-100" | "denim-200" | "denim-300" | "denim-400" | "denim-500" | "denim-600" | "denim-700" | "denim-800" | "denim-900" | "denim-950" | "iris-50" | "iris-100" | "iris-200" | "iris-300" | "iris-400" | "iris-500" | "iris-600" | "iris-700" | "iris-800" | "iris-900" | "iris-950" | "lilac-50" | "lilac-100" | "lilac-200" | "lilac-300" | "lilac-400" | "lilac-500" | "lilac-600" | "lilac-700" | "lilac-800" | "lilac-900" | "lilac-950" | "coral-50" | "coral-100" | "coral-200" | "coral-300" | "coral-400" | "coral-500" | "coral-600" | "coral-700" | "coral-800" | "coral-900" | "coral-950" | "wood-50" | "wood-100" | "wood-200" | "wood-300" | "wood-400" | "wood-500" | "wood-600" | "wood-700" | "wood-800" | "wood-900" | "wood-950" | "silver-50" | "silver-100" | "silver-200" | "silver-300" | "silver-400" | "silver-500" | "silver-600" | "silver-700" | "silver-800" | "silver-900" | "silver-950" | "steel-50" | "steel-100" | "steel-200" | "steel-300" | "steel-400" | "steel-500" | "steel-600" | "steel-700" | "steel-800" | "steel-900" | "steel-950" | "olive-50" | "olive-100" | "olive-200" | "olive-300" | "olive-400" | "olive-500" | "olive-600" | "olive-700" | "olive-800" | "olive-900" | "olive-950" | "sand-50" | "sand-100" | "sand-200" | "sand-300" | "sand-400" | "sand-500" | "sand-600" | "sand-700" | "sand-800" | "sand-900" | "sand-950" | "tint-50" | "tint-100" | "tint-200" | "tint-300" | "tint-400" | "tint-500" | "tint-600" | "tint-700" | "tint-800" | "tint-900" | "tint-950";
 export type ColorWithGrays = ColorType | "invert" | "dimmed" | "muted";
@@ -118,10 +118,11 @@ export interface TooltipProp {
      */
     tooltip?: string | TooltipType;
 }
-export interface ChildProp<T = JSX.Element> {
+export type ReactElement = React.ReactElement | string | number | bigint | Iterable<React.ReactNode> | React.ReactPortal | boolean | null | undefined;
+export interface ChildProp<T = ReactElement> {
     children: Elements<T>;
 }
-export interface ChildrenProp<T = JSX.Element> {
+export interface ChildrenProp<T = ReactElement> {
     children: Elements<T> | Array<Elements<T>>;
 }
 export interface PositionObject {
@@ -140,3 +141,8 @@ export type ArrayType<T extends readonly any[] | ArrayLike<any> | undefined> = T
 export type Complete<T> = {
     [P in keyof Required<T>]: Pick<T, P> extends Required<Pick<T, P>> ? T[P] : T[P] | undefined;
 };
+export type NestedKeys<T> = T extends object ? {
+    [K in keyof T]: K extends string | number ? T[K] extends object ? T[K] extends readonly any[] ? T[K][number] extends object ? // Array of objects/items: return key with array index notation and recurse
+    `${K}.${NestedKeys<T[K][number]>}` | `${K}` : `${K}` : // Standard object: return key with dot notation and recurse
+    `${K}.${NestedKeys<T[K]>}` | `${K}` : `${K}` : never;
+}[keyof T] : "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.60",
+  "version": "1.0.0-beta.62",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -36,7 +36,10 @@
   },
   "dependencies": {
     "@floating-ui/react": "~0.27.16",
-    "@react-fabric/utilities": "^1.0.0-beta.60",
+    "@iconify-json/mdi": "~1.2.3",
+    "@iconify-json/svg-spinners": "~1.2.4",
+    "@iconify/tailwind4": "~1.2.1",
+    "@react-fabric/utilities": "^1.0.0-beta.62",
     "@tailwindcss/postcss": "~4.1.16",
     "boring-avatars": "~1.11.2",
     "classnames": "~2.5.1",
@@ -54,5 +57,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "a79f053ee7e13422c06d7d9c35d4f0c2610cdf5d"
+  "gitHead": "9dce2fd9bb753d67e3f8adbf50be257b4bc64242"
 }

package/src/components/animations/Animations.tsx

@@ -126,26 +126,24 @@ export const AnimationIndicator = ({
 };
 
 /**
- * A component that displays an animated bars loader.
- * It can be customized with color and size properties.
- * This component is typically used to indicate loading states in the UI.
+ * A component that displays a loading animation with a customizable icon, color, size, and mask blur.
+ * It is typically used to indicate loading states in the UI.
  *
- * @param {Object} props - The properties for the AnimationBars component.
- * @param {ColorType | PaletteType | string} [props.color="tint-500"] - The color of the bars.
- * @param {number | string} [props.size="2rem"] - The size of the bars.
- * @returns {JSX.Element} The rendered AnimationBars component.
- *
- * @example
- * ```jsx
- * <AnimationBars color="primary-500" size="3rem" />
- * ```
- *
- * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-animations--docs} for more details.
+ * @param {Object} props - The properties for the AnimationLoader component.
+ * @param {ColorType | PaletteType | string} [props.color="tint-500"] - The color of the loader icon.
+ * @param {number | string} [props.size="2rem"] - The size of the loader icon.
+ * @param {string} props.icon - The icon to be displayed as the loader.
+ * @param {"sm" | "md" | "lg"} [props.maskBlur] - The blur effect for the background mask.
+ * @returns {JSX.Element} The rendered AnimationLoader component.
  */
-export const AnimationBars = ({
+export const AnimationLoader = ({
   color = "tint-500",
   size = "2rem",
+  icon,
+  maskBlur,
 }: {
+  icon: string;
+  maskBlur?: "sm" | "md" | "lg";
   color?: ColorType | PaletteType | string;
   size?: number | string;
 }) => {
@@ -153,65 +151,75 @@ export const AnimationBars = ({
     <div
       className={classNames(
         "absolute inset-0 z-10 flex justify-center items-center cursor-wait",
+        maskBlur === "sm" && "backdrop-blur-sm",
+        maskBlur === "md" && "backdrop-blur-md",
+        maskBlur === "lg" && "backdrop-blur-lg",
       )}
     >
       <div
         className={classNames(
-          "outline outline-tint-500/20 p-4 bg-tint-50/50 backdrop-blur-sm rounded",
+          "outline outline-tint-500/20 p-4 bg-tint-50/50 backdrop-blur-sm leading-0 rounded",
         )}
       >
         <div
-          className={classNames("fabric-bars")}
-          style={{ width: size, color: getColor(color) }}
+          className={classNames("aspect-square", icon)}
+          style={{ fontSize: size, color: getColor(color) }}
         />
       </div>
     </div>
   );
 };
 
+/**
+ * A component that displays an animated bars loader.
+ * It can be customized with color and size properties.
+ * This component is typically used to indicate loading states in the UI.
+ *
+ * @param {Object} props - The properties for the LoadingBars component.
+ * @param {ColorType | PaletteType | string} [props.color="tint-500"] - The color of the bars.
+ * @param {number | string} [props.size="2rem"] - The size of the bars.
+ * @returns {JSX.Element} The rendered LoadingBars component.
+ *
+ * @example
+ * ```jsx
+ * <LoadingBars color="primary-500" size="3rem" />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-animations--docs} for more details.
+ */
+export const LoadingBars = (props: {
+  color?: ColorType | PaletteType | string;
+  size?: number | string;
+  maskBlur?: "sm" | "md" | "lg";
+}) => {
+  return (
+    <AnimationLoader icon="icon-[svg-spinners--bars-scale-fade]" {...props} />
+  );
+};
+
 /**
  * A component that displays a spinner animation.
  * It can be customized with color and size properties.
  * This component is typically used to indicate loading states in the UI.
  *
- * @param {Object} props - The properties for the AnimationSpinner component.
+ * @param {Object} props - The properties for the LoadingSpinner component.
  * @param {ColorType | PaletteType | string} [props.color="tint-700"] - The color of the spinner.
  * @param {number | string} [props.size="2rem"] - The size of the spinner.
- * @returns {JSX.Element} The rendered AnimationSpinner component.
+ * @returns {JSX.Element} The rendered LoadingSpinner component.
  *
  * @example
  * ```jsx
- * <AnimationSpinner color="primary-500" size="3rem" />
+ * <LoadingSpinner color="primary-500" size="3rem" />
  * ```
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-animations--docs} for more details.
  */
-export const AnimationSpinner = ({
-  color = "tint-700",
-  size = "2rem",
-}: {
+export const LoadingSpinner = (props: {
   color?: ColorType | PaletteType | string;
   size?: number | string;
+  maskBlur?: "sm" | "md" | "lg";
 }) => {
-  return (
-    <div
-      className={classNames(
-        "absolute inset-0 z-10 flex justify-center items-center cursor-wait",
-      )}
-      data-ref="spinner"
-    >
-      <div
-        className={classNames(
-          "outline outline-tint-500/20 p-4 bg-tint-50/50 backdrop-blur-sm rounded",
-        )}
-      >
-        <div
-          className={classNames("fabric-spinner")}
-          style={{ width: size, color: getColor(color) }}
-        />
-      </div>
-    </div>
-  );
+  return <AnimationLoader icon="icon-[svg-spinners--eclipse]" {...props} />;
 };
 
 /**
@@ -260,7 +268,7 @@ export const Skeleton = ({ className, ...rest }: CssProp) => {
  *
  * @returns {JSX.Element} The rendered Loading component.
  */
-export const Loading = () => {
+export const LoadingLine = () => {
   return (
     <div
       className={classNames(

package/src/components/button/Button.tsx

@@ -187,7 +187,7 @@ export const Button = <Tag extends React.ElementType = "button">({
   children,
   className,
   active,
-  color = "primary",
+  color = "default",
   icon,
   iconAlign = "start",
   altIcon,
@@ -292,7 +292,9 @@ export const Button = <Tag extends React.ElementType = "button">({
       data-loading={busy || loading}
       data-disabled={disabled}
     >
-      {hotKey && <HotKey keyCombo={hotKey} handler={hotKeyHandler.current} />}
+      {!disabled && hotKey && (
+        <HotKey keyCombo={hotKey} handler={hotKeyHandler.current} />
+      )}
       <TooltipWrapper {...tooltipProps}>
         <E
           ref={mergeRefs(ref, refEl)}

package/src/components/callout/Callout.tsx

@@ -29,7 +29,6 @@ import {
   type CssProp,
   type TestProps,
 } from "../../types";
-import { CoreIcons } from "../../types/icons";
 import { Icon } from "../icon/Icon";
 
 export interface CalloutProps
@@ -66,7 +65,8 @@ export interface CalloutProps
 // colors for different callout types
 const colors = {
   none: "bg-base text-tint-900 border-tint-100",
-  tint: "bg-tint-50/50 text-tint-800 border-tint-300",
+  default: "bg-tint-50/50 text-tint-800 border-tint-300",
+  muted: "bg-tint-50/50 text-muted border-muted",
   primary: "bg-primary-50/50 text-primary-800 border-primary-300",
   accent: "bg-accent-50/50 text-accent-800 border-accent-300",
   info: "bg-info-50/50 text-info-800 border-info-300",
@@ -103,8 +103,7 @@ const colors = {
  */
 export const Callout = ({
   children,
-  // @ts-expect-error ignore
-  color = "tint",
+  color = "default",
   legend,
   title,
   icon,
@@ -145,7 +144,7 @@ export const Callout = ({
           size="md"
           data-ref="calloutClose"
           className={classNames("absolute end-2", legend ? "top-0" : "top-2")}
-          icon={CoreIcons.close}
+          icon="icon-[mdi--close]"
           onClick={onClose}
         />
       )}

package/src/components/collapsable/Collapsable.tsx

@@ -38,7 +38,6 @@ import {
   type RefProp,
   type TestProps,
 } from "../../types";
-import { CoreIcons } from "../../types/icons";
 import { Icon } from "../icon/Icon";
 
 interface CollapsableRef {
@@ -108,8 +107,8 @@ export interface CollapsableProps
  * ```jsx
  * <Collapsable
  *   iconAlign="start"
- *   iconOpen={CoreIcons.chevronDown}
- *   iconClosed={CoreIcons.chevronRight}
+ *   iconOpen="icon-[mdi--chevron-down]"
+ *   iconClosed="icon-[mdi--chevron-right]"
  *   open={true}
  *   onOpen={() => console.log("Opened")}
  *   onClose={() => console.log("Closed")}
@@ -130,8 +129,8 @@ export const Collapsable = ({
   children,
   iconAlign,
   stickyHeader,
-  iconClosed = CoreIcons.chevronRight,
-  iconOpen = CoreIcons.chevronDown,
+  iconClosed = "icon-[mdi--chevron-right]",
+  iconOpen = "icon-[mdi--chevron-down]",
   open,
   onClose,
   onOpen,

package/src/components/dropdown/Dropdown.tsx

@@ -36,6 +36,7 @@ import {
   useClick,
   useDismiss,
   useFloating,
+  useFloatingNodeId,
   useFloatingTree,
   useHover,
   useInteractions,
@@ -116,6 +117,7 @@ const DropdownElement = ({
   const arrowRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
   const tree = useFloatingTree();
+  const nodeId = useFloatingNodeId();
 
   const [anchor, panel] = useMemo<AnyObject[]>(
     () => Children.toArray(children as AnyObject),
@@ -123,6 +125,7 @@ const DropdownElement = ({
   );
 
   const { refs, floatingStyles, context } = useFloating({
+    nodeId: `dropdown-${nodeId}`,
     open: isOpen,
     onOpenChange: (open, _, reason) => {
       if (reason === "reference-press") return;
@@ -148,6 +151,7 @@ const DropdownElement = ({
     enabled: !disabled,
     handleClose: safePolygon({ blockPointerEvents: true }),
   });
+
   const dismiss = useDismiss(context, {
     referencePress: true,
   });
@@ -168,6 +172,11 @@ const DropdownElement = ({
     return undefined;
   }, [refs, isOpen, fitToParent]);
 
+  const dismissDropdown = useCallback(() => {
+    setIsOpen(false);
+    onClose?.();
+  }, []);
+
   const tryClosing = useCallback(
     (e: React.MouseEvent) => {
       if (
@@ -259,7 +268,9 @@ const DropdownElement = ({
                 )}
                 onMouseUpCapture={tryClosing}
               >
-                {panel}
+                {cloneElement(panel, {
+                  dismiss: dismissDropdown,
+                })}
               </div>
               {showArrow && (
                 <FloatingArrow
@@ -308,11 +319,17 @@ const DropdownElement = ({
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-dropdown--docs} for more details.
  * @see {@link https://floating-ui.com/docs/react} for more details on Floating UI.
  */
-export const Dropdown = (props: DropdownProps) => (
-  <FloatingTree>
-    <DropdownElement {...props} />
-  </FloatingTree>
-);
+export const Dropdown = (props: DropdownProps) => {
+  const tree = useFloatingTree();
+  if (tree) {
+    return <DropdownElement {...props} />;
+  }
+  return (
+    <FloatingTree>
+      <DropdownElement {...props} />
+    </FloatingTree>
+  );
+};
 
 /**
  * A component that allows dismissing the dropdown when clicked.

package/src/components/dropdown/DropdownTool.tsx

@@ -23,7 +23,6 @@
 
 import classNames from "classnames";
 import { type ChildProp, type CssProp } from "../../types";
-import { CoreIcons } from "../../types/icons";
 import { Icon } from "../icon/Icon";
 import { Dropdown, type DropdownProps } from "./Dropdown";
 
@@ -70,7 +69,7 @@ export const DropdownTool = ({
   return (
     <Dropdown {...props}>
       <Icon
-        icon={icon ?? CoreIcons.caretDown}
+        icon={icon ?? "icon-[mdi--menu-down]"}
         className={classNames(
           "outline bg-tint-50/50 flex-content pointer-events-auto cursor-pointer",
           className,

package/src/components/icon/Icon.tsx

@@ -191,29 +191,29 @@ export const Icon = ({
   /** ***************** render icon *******************/
   const iconEl = useMemo(() => {
     if (isValidElement(icon)) return icon;
-    if (!isString(icon)) {
-      throw Error("Invalid icon expected string");
+    if (isString(icon)) {
+      return isSvg ? (
+        <svg viewBox={viewBox}>
+          <path fill="currentColor" d={icon.toString()} />
+        </svg>
+      ) : icon?.toString().length <= 4 ? (
+        <svg role="img">
+          <text
+            x="50%"
+            y="50%"
+            dy=".1em"
+            dominantBaseline="middle"
+            textAnchor="middle"
+            style={{ fontSize: SvgTextSize[icon.length] }}
+          >
+            {icon}
+          </text>
+        </svg>
+      ) : (
+        <i className={`${icon}`} />
+      );
     }
-    return isSvg ? (
-      <svg viewBox={viewBox}>
-        <path fill="currentColor" d={icon.toString()} />
-      </svg>
-    ) : icon?.toString().length <= 4 ? (
-      <svg role="img">
-        <text
-          x="50%"
-          y="50%"
-          dy=".1em"
-          dominantBaseline="middle"
-          textAnchor="middle"
-          style={{ fontSize: SvgTextSize[icon.length] }}
-        >
-          {icon}
-        </text>
-      </svg>
-    ) : (
-      <i className={`${icon}`} />
-    );
+    throw Error("Invalid icon expected string");
   }, [icon, isSvg, viewBox]);
 
   return (

package/src/components/index.ts

@@ -23,10 +23,11 @@
 
 export { ActionLabel } from "./actionLabel/ActionLabel";
 export {
-  AnimationBars,
   AnimationIndicator,
-  AnimationSpinner,
-  Loading,
+  AnimationLoader,
+  LoadingBars,
+  LoadingLine,
+  LoadingSpinner,
   Skeleton,
 } from "./animations/Animations";
 export { Avatar } from "./avatar/Avatar";
@@ -47,7 +48,7 @@ export { Divider } from "./divider/Divider";
 export { Dropdown, DropdownDismiss } from "./dropdown/Dropdown";
 export { DropdownTool } from "./dropdown/DropdownTool";
 export { EmptyContent } from "./empty/EmptyContent";
-export { Icon, getIconProps } from "./icon/Icon";
+export { getIconProps, Icon } from "./icon/Icon";
 export { Image, Video } from "./media/Media";
 export { ContextMenu } from "./menu/ContextMenu";
 export { Menu } from "./menu/Menu";

package/src/components/media/Media.tsx

@@ -25,7 +25,6 @@ import { getImageColorset } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { Fragment, useEffect, useRef, useState } from "react";
 import { type AriaProps, type CssProp, type TestProps } from "../../types";
-import { CoreIcons } from "../../types/icons";
 import { Button } from "../button/Button";
 import { Icon } from "../icon/Icon";
 
@@ -75,10 +74,10 @@ const loadIndicator = (
   <div
     className={classNames(
       "fabric-mediaPlaceholder",
-      "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-gray animate-pulse",
+      "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-sm text-gray",
     )}
   >
-    ●●●
+    <i className="icon-[svg-spinners--pulse-rings-2]" />
   </div>
 );
 
@@ -156,7 +155,7 @@ export const Image = ({
         <Icon
           size="2rem"
           className="absolute text-tint-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
-          icon={CoreIcons.mediaImageBroken}
+          icon="icon-[mdi--image-off-outline]"
         />
       )}
     </div>
@@ -272,7 +271,7 @@ export const Video = ({
               rounded
               variant="link"
               className={"fabric-mediaControlPlaceholder"}
-              icon={CoreIcons.ellipsis}
+              icon="icon-[mdi--dots-vertical]"
               aria-label="controls"
             />
             <Button
@@ -284,7 +283,7 @@ export const Video = ({
                 videoRef.current &&
                   (videoRef.current.volume = videoRef.current.volume ? 0 : 1);
               }}
-              icon={volume ? CoreIcons.volumeOn : CoreIcons.volumeOff}
+              icon={volume ? "icon-[mdi--volume]" : "icon-[mdi--volume-mute]"}
             />
             <Button
               rounded
@@ -296,7 +295,7 @@ export const Video = ({
                   ? videoRef.current?.play()
                   : videoRef.current?.pause();
               }}
-              icon={state ? CoreIcons.pause : CoreIcons.play}
+              icon={state ? "icon-[mdi--pause]" : "icon-[mdi--play]"}
             />
           </div>
         </Fragment>
@@ -305,7 +304,7 @@ export const Video = ({
         <Icon
           size="2rem"
           className="absolute text-tint-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
-          icon={CoreIcons.mediaVideoBroken}
+          icon="icon-[mdi--video-off-outline]"
         />
       )}
     </div>

package/src/components/menu/Menu.tsx

@@ -56,7 +56,6 @@ import {
   useState,
 } from "react";
 import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
-import { CoreIcons } from "../../types/icons";
 import { cloneChildren, nodeCheck } from "../../utils";
 import { MenuItem } from "./MenuItem";
 import { type MenuProps } from "./types";
@@ -72,6 +71,7 @@ const MenuComponent = ({
   trigger = "hover",
   // @ts-expect-error ignore
   ref,
+  forDropdown,
   ...rest
 }: Partial<MenuProps>) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -84,10 +84,10 @@ const MenuComponent = ({
   const nodeId = useFloatingNodeId();
   const parentId = useFloatingParentNodeId();
 
-  const isNested = parentId !== null;
+  const isNested = parentId !== null && !forDropdown;
 
   const { floatingStyles, refs, context } = useFloating<HTMLButtonElement>({
-    nodeId,
+    nodeId: `menu-${nodeId}`,
     open: !isNested || isOpen,
     onOpenChange(open, event, reason) {
       isNested && setIsOpen(open);
@@ -218,7 +218,7 @@ const MenuComponent = ({
           } as AnyObject) as AnyObject)}
           data-open={isOpen}
           minimal={minimal}
-          altIcon={CoreIcons.chevronRight}
+          altIcon="icon-[mdi--menu-right]"
           ref={mergeRefs(refs.setReference, ref)}
         />
       )}

package/src/components/menu/MenuItem.tsx

@@ -177,7 +177,7 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
         }}
         {...(minimal ? {} : aria)}
       >
-        {hotKey && (
+        {!disabled && hotKey && (
           <HotKey keyCombo={hotKey} handler={() => elRef.current?.click?.()} />
         )}
         {menuLabel}

package/src/components/menu/types.ts

@@ -45,7 +45,7 @@ export interface MenuItemProps extends CssProp, AriaProps, TestProps {
   /**
    * append label badge text
    */
-  appendLabel?: string | false;
+  appendLabel?: JSX.Element | string | number | false;
   /**
    * menu color
    */
@@ -83,6 +83,10 @@ export interface MenuItemProps extends CssProp, AriaProps, TestProps {
 export interface MenuRootProps extends CssProp {
   label?: never;
   minimal?: boolean;
+  /**
+   * use this create a dropdown button within menu-item
+   */
+  forDropdown?: boolean;
   menuClassName?: never;
   onClick?: (id: string) => CallbackReturn;
 }
@@ -91,6 +95,7 @@ export interface MenuInnerProps extends MenuItemProps {
   label: string;
   minimal?: never;
   trigger?: "hover" | "click";
+  forDropdown?: boolean;
   /**
    * floating menu className
    */