@react-fabric/core 1.0.0-beta.9 → 1.0.2

package/src/core/responsive/Responsive.tsx

@@ -1,60 +1,47 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
- *
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
  *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
  *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
  */
 
-import classNames from "classnames";
-import {
-  type AriaProps,
-  type ChildrenProp,
-  type CssProp,
-  type SizeTypeWithZero,
-  type TestProps,
-} from "../../types";
-import classes from "./Responsive.module.css";
+import { cn } from "@react-fabric/utilities";
+import type { ChildrenProp, CssProp, TestProps } from "../../types";
 
-export interface ContainerProps
-  extends AriaProps,
-    CssProp,
-    ChildrenProp,
-    TestProps {
+export interface ContainerProps extends CssProp, ChildrenProp, TestProps {
   /**
    * use full width
    */
   fullWidth?: boolean;
   /**
-   * gutter size
+   * use @container size queries for max-width
    */
-  gutter?: SizeTypeWithZero;
+  useContainer?: boolean;
 }
 
-export interface RowProps extends AriaProps, CssProp, ChildrenProp, TestProps {
+export interface RowProps extends CssProp, ChildrenProp, TestProps {
   /**
    * no wrapping
    */
   noWrap?: boolean;
-  /**
-   * gutter size
-   */
-  gutter?: SizeTypeWithZero;
   /**
    * flex orientation
    */
@@ -69,11 +56,7 @@ export interface RowProps extends AriaProps, CssProp, ChildrenProp, TestProps {
   justify?: "start" | "end" | "center" | "between";
 }
 
-export interface ColProps
-  extends AriaProps,
-    CssProp,
-    TestProps,
-    Partial<ChildrenProp> {
+export interface ColProps extends CssProp, TestProps, Partial<ChildrenProp> {
   /**
    * align items
    */
@@ -81,92 +64,102 @@ export interface ColProps
   /**
    * column flex
    */
-  flex?: "auto" | "fill" | "full";
+  flex?: "fill" | "full" | "initial" | "content";
   /**
    * stretch inner content
    */
   stretchContent?: boolean;
+  /**
+   * truncate text
+   */
+  truncate?: boolean;
 }
 
+const ALIGN_MAP = {
+  start: "items-start",
+  end: "items-end",
+  center: "items-center",
+  stretch: "items-stretch",
+};
+
+const JUSTIFY_MAP = {
+  start: "justify-start",
+  end: "justify-end",
+  center: "justify-center",
+  between: "justify-between",
+};
+
+const FLEX_MAP = {
+  span: "flex-span",
+  fill: "flex-1",
+  full: "flex-full",
+  initial: "flex-initial",
+  content: "flex-content",
+};
+
 /**
- * Responsive layout container
+ * Container that wraps children in a div with optional full-width and container-size queries.
  */
-export const Container = ({
-  children,
-  fullWidth,
-  className,
-  gutter,
-  ...aria
-}: ContainerProps) => {
+export function Container({ children, fullWidth, className, useContainer, ...props }: ContainerProps) {
   return (
     <div
-      className={classNames(
-        classes.container,
-        className,
-        !fullWidth && "container mx-auto",
-      )}
-      data-gutter={gutter}
-      {...aria}
+      className={cn("fabric-container", className, !fullWidth && (useContainer ? "container-inner" : "container"), " mx-auto")}
+      aria-roledescription="flex-container"
+      {...props}
     >
       {children}
     </div>
   );
-};
+}
 
-export const Row = ({
-  children,
-  gutter,
-  noWrap,
-  orient,
-  align = "stretch",
-  justify = "start",
-  className,
-  ...aria
-}: RowProps) => {
+/**
+ * Row component with flex layout, supporting orientation, alignment, and wrapping.
+ */
+export function Row({ children, noWrap, orient, align = "stretch", justify = "start", className, ...props }: RowProps) {
   return (
     <div
-      className={classNames(
-        classes.row,
+      className={cn(
+        "fabric-row",
         className,
         "flex",
-        orient === "row" && "flex-row",
-        orient === "col" && "flex-col",
-        orient === "row-reverse" && "flex-row-reverse",
-        orient === "col-reverse" && "flex-col-reverse",
+        {
+          "flex-row": orient === "row",
+          "flex-col": orient === "col",
+          "flex-row-reverse": orient === "row-reverse",
+          "flex-col-reverse": orient === "col-reverse",
+        },
         noWrap ? "flex-nowrap" : "flex-wrap",
-        `justify-${justify}`,
-        `items-${align}`,
+        JUSTIFY_MAP[justify],
+        ALIGN_MAP[align],
       )}
-      data-gutter={gutter}
-      {...aria}
+      aria-roledescription="flex-row"
+      {...props}
     >
       {children}
     </div>
   );
-};
+}
 
-export const Col = ({
-  children,
-  flex,
-  align,
-  className,
-  stretchContent,
-  ...aria
-}: ColProps) => {
+/**
+ * Column component within a Row, supporting flex sizing, alignment, and text truncation.
+ */
+export function Col({ children, flex, align, truncate, className, stretchContent, ...props }: ColProps) {
   return (
     <div
-      className={classNames(
-        classes.col,
+      className={cn(
+        "fabric-col",
         className,
-        stretchContent && classes.stretchContent,
-        flex === "auto" && "flex-content",
-        flex === "fill" && "flex-1",
-        flex === "full" && "flex-full",
-        align && `self-${align}`,
+        {
+          "stretch-content": stretchContent,
+          truncate: truncate,
+        },
+        FLEX_MAP[flex ?? "span"],
+        align && ALIGN_MAP[align],
       )}
-      {...aria}
+      aria-roledescription="flex-col"
+      {...props}
     >
       {children}
     </div>
   );
-};
+}

package/src/core/theme/ThemeProvider.tsx

@@ -1,31 +1,32 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
- *
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
  *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
  *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
  */
 
-import { isColor } from "@react-fabric/utilities";
-import classNames from "classnames";
+import { cn, isColor, isString } from "@react-fabric/utilities";
 import { useMemo } from "react";
-import { type ChildrenProp } from "../../types";
-import classes from "./Theme.module.css";
+import { useApplicationContext } from "../../context/context";
+import type { ChildrenProp, CustomColors } from "../../types";
 
 export interface ThemeProps {
   /**
@@ -36,77 +37,65 @@ export interface ThemeProps {
    * branding css className
    *
    * .branding {
-   *  --primary: #color;
-   *  --accent: #color;
-   *  --tint: #color;
+   *  --color-primary: #color;
+   *  --color-secondary: #color;
+   *  --color-tint: #color;
    * }
    */
   branding?: string;
   /**
    * primary color
    */
-  primaryColor?: string;
+  primaryColor?: CustomColors;
   /**
-   * accent color
+   * secondary color
    */
-  accentColor?: string;
+  secondaryColor?: CustomColors;
   /**
    * tint mix color
    */
-  tintColor?: string;
+  tintColor?: CustomColors;
   /**
    * component rounding
    */
-  rounding?: "minimal" | "normal" | "full";
+  rounding?: "sm" | "md" | "full";
 }
 
 /**
- * Theme override
+ * Sets CSS custom properties for theme colors (primary, secondary, tint) and applies branding class.
  */
-export const ThemeProvider = ({
+export function ThemeProvider({
   children,
   branding,
   primaryColor,
-  accentColor,
+  secondaryColor,
   tintColor,
   colorScheme,
   rounding,
-}: ThemeProps & ChildrenProp) => {
+}: ThemeProps & ChildrenProp) {
+  const { currentColorScheme } = useApplicationContext();
   const styles = useMemo(() => {
     const ret: KeyValue = {};
-    if (primaryColor && isColor(primaryColor)) {
-      ret["--primary"] = primaryColor;
-    }
-    if (primaryColor && !isColor(primaryColor)) {
-      ret["--primary"] = `var(--${primaryColor})`;
+    if (isString(primaryColor)) {
+      ret["--color-primary"] = isColor(primaryColor) ? primaryColor : `var(--color-${primaryColor})`;
     }
-    if (accentColor && isColor(accentColor)) {
-      ret["--accent"] = accentColor;
+    if (isString(secondaryColor)) {
+      ret["--color-secondary"] = isColor(secondaryColor) ? secondaryColor : `var(--color-${secondaryColor})`;
     }
-    if (accentColor && !isColor(accentColor)) {
-      ret["--accent"] = `var(--${accentColor})`;
-    }
-    if (tintColor && isColor(tintColor)) {
-      ret["--tint"] = tintColor;
-    }
-    if (tintColor && !isColor(tintColor)) {
-      ret["--tint"] = `var(--${tintColor})`;
+    if (isString(tintColor)) {
+      ret["--color-tint"] = isColor(tintColor) ? tintColor : `var(--color-${tintColor})`;
     }
     return ret;
-  }, [primaryColor, accentColor, tintColor]);
+  }, [primaryColor, secondaryColor, tintColor]);
 
   return (
     <div
       style={styles}
-      data-color-scheme={colorScheme}
+      data-color-scheme={colorScheme ?? currentColorScheme}
       data-rounding={rounding}
-      className={classNames(
-        classes.themeProvider,
-        "contents theme-base",
-        branding,
-      )}
+      className={cn("fabric-themeProvider", "contents theme-base", branding)}
     >
       {children}
     </div>
   );
-};
+}

package/src/core/viewport/Viewport.tsx

@@ -1,43 +1,41 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
  *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
  *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
  */
 
-import classNames from "classnames";
-import { type PropsWithChildren } from "react";
-import classes from "./Viewport.module.css";
+import type { ChildrenProp } from "../../types";
 
 /**
- * The application viewport is the main container that defines the visible area where content is displayed and interacted with.
+ * Full-screen viewport container with grid layout and container queries.
  */
-export const Viewport = ({ children }: PropsWithChildren) => {
+export function Viewport({ children }: ChildrenProp) {
   return (
     <div
       data-ref="viewport"
-      className={classNames(
-        classes.viewport,
-        "grid overflow-hidden absolute inset-0",
-      )}
+      aria-roledescription="viewport"
+      className="fabric-viewport sectioned overflow-hidden absolute inset-0"
     >
       {children}
     </div>
   );
-};
+}

package/src/hooks/useClientService.ts

@@ -0,0 +1,47 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * Custom hook that returns a client-side API on the client and a server-side mock on the server.
+ *
+ * Useful for isomorphic components that need different behavior during SSR vs. CSR,
+ * such as accessing browser APIs or window objects that are unavailable during server rendering.
+ *
+ * @param {any} clientApi - The client-side API object to return when running in the browser.
+ * @param {any} serverMock - The mock API object to return when running on the server.
+ * @returns The client API on the client, the server mock on the server, or `undefined` if neither is provided.
+ *
+ * @example
+ * ```tsx
+ * const clipboard = useClientService(
+ *   { write: (text) => navigator.clipboard.writeText(text) },
+ *   { write: () => Promise.resolve() }
+ * );
+ * ```
+ */
+// eslint-disable-next-line @eslint-react/no-unnecessary-use-prefix
+export function useClientService<T extends AnyObject = AnyObject>(clientApi: T, serverMock?: T): T | undefined {
+  return typeof window === "undefined" ? serverMock : clientApi;
+}

package/src/hooks/useContextMenu.tsx

@@ -0,0 +1,131 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2026 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  FloatingFocusManager,
+  FloatingOverlay,
+  FloatingPortal,
+  autoUpdate,
+  flip,
+  offset,
+  useClick,
+  useDismiss,
+  useFloating,
+  useFloatingNodeId,
+  useInteractions,
+} from "@floating-ui/react";
+import { cloneElement, useRef, useState } from "react";
+import { type Menu } from "../components/menu/Menu";
+
+/**
+ * A hook that provides a context menu that appears on right-click.
+ * It uses the Floating UI library to manage the positioning and interactions of the menu.
+ * This hook is useful for creating custom context menus that can be triggered by right-clicking on elements.
+ *
+ * @param {ContextMenuProps} props - The properties for the ContextMenu hook.
+ * @returns {[React.ReactElement | null, (e: MouseEvent) => void]} An array containing the rendered ContextMenu component (or null if not open) and the function to handle right-click events.
+ */
+export function useContextMenu(
+  menu: React.ReactElement<typeof Menu>,
+): [Overlay: React.ReactNode, onContentMenu: (e: React.MouseEvent) => void] {
+  const [isOpen, setIsOpen] = useState(false);
+  const nodeId = useFloatingNodeId();
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    nodeId,
+    onOpenChange: (open, evt) => {
+      const target = evt?.target as HTMLElement;
+      if (!target?.closest(".menu-list")) setIsOpen(open);
+    },
+    strategy: "fixed",
+    placement: "bottom-start",
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(8), flip()],
+  });
+
+  const click = useClick(context, {
+    toggle: true,
+    ignoreMouse: true,
+  });
+  const dismiss = useDismiss(context, { bubbles: true });
+
+  const { getFloatingProps } = useInteractions([dismiss, click]);
+
+  const handleClick = (e: React.MouseEvent) => {
+    const virtual = {
+      getBoundingClientRect() {
+        return {
+          width: 0,
+          height: 0,
+          x: e.clientX,
+          y: e.clientY,
+          top: e.clientY,
+          left: e.clientX,
+          right: e.clientX,
+          bottom: e.clientY,
+        };
+      },
+    };
+    refs.setReference(virtual);
+    setIsOpen(true);
+    e.nativeEvent.stopImmediatePropagation();
+    e.preventDefault();
+    return false;
+  };
+
+  const tryClosingRef = useRef((e: React.MouseEvent) => {
+    if (!(e.target as HTMLElement)?.closest("[data-dropdown-dismiss='false']")) setTimeout(() => setIsOpen(false), 50);
+  });
+
+  return [
+    isOpen && (
+      <FloatingPortal key="cmenu" root={refs.domReference.current?.closest<HTMLElement>(".theme-base") ?? undefined}>
+        <FloatingOverlay
+          lockScroll
+          style={{
+            zIndex: "var(--z-overlay-mask)",
+            position: "absolute",
+            overflow: "hidden",
+          }}
+        >
+          <FloatingFocusManager context={context}>
+            {cloneElement(menu as React.ReactElement<KeyValue>, {
+              ...getFloatingProps(),
+              style: {
+                ...floatingStyles,
+                borderRadius: "var(--rounding)",
+                zIndex: "var(--z-popover)",
+                fontSize: "0.875rem",
+              },
+              className: "bg-default outline rounded-capped shadow-lg",
+              ref: refs.floating,
+              onMouseUp: tryClosingRef.current,
+            })}
+          </FloatingFocusManager>
+        </FloatingOverlay>
+      </FloatingPortal>
+    ),
+    handleClick,
+  ];
+}