@react-fabric/core 1.0.0-beta.22 → 1.0.0-beta.24

package/src/components/menu/Menu.tsx

@@ -45,7 +45,7 @@ import {
   useRole,
   useTypeahead,
 } from "@floating-ui/react";
-import { cloneChildren, mergeRefs } from "@react-fabric/utilities";
+import { mergeRefs } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
   cloneElement,
@@ -55,8 +55,9 @@ import {
   useRef,
   useState,
 } from "react";
+import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
 import { CoreIcons } from "../../types/icons";
-import { nodeCheck } from "../../utils";
+import { cloneChildren, nodeCheck } from "../../utils";
 import { MenuItem } from "./MenuItem";
 import { type MenuProps } from "./types";
 
@@ -219,47 +220,49 @@ const MenuComponent = ({
         {(!isNested || isOpen) && (
           <Wrapper {...wrapperProps}>
             {isNested && <FloatingOverlay />}
-            <FloatingFocusManager
-              context={context}
-              modal={!isNested}
-              initialFocus={isNested ? -1 : 0}
-              returnFocus={!isNested}
-            >
-              <div
-                className={classNames(
-                  menuClassName,
-                  "flex flex-col bg-base p-1 menu-list",
-                  isNested &&
-                    "outline shadow-lg rounded-capped max-h-96 overflow-auto scroll-thin z-[var(--z-popover)]",
-                )}
-                autoFocus
-                ref={mergeRefs(isNested ? refs.setFloating : ref)}
-                {...getFloatingProps({
-                  onClick: isNested ? undefined : handleClick,
-                })}
-                // @ts-expect-error ignore
-                {...{ style: !isNested ? rest.style : floatingStyles }}
+            <HotKeyWrapper>
+              <FloatingFocusManager
+                context={context}
+                modal={!isNested}
+                initialFocus={isNested ? -1 : 0}
+                returnFocus={!isNested}
               >
-                {cloneChildren(children, (child: AnyObject, index) => {
-                  labelsRef.current[index] = child.props.label;
-                  return cloneElement(
-                    child,
-                    nodeCheck(child, MenuItem, Menu, MenuComponent)
-                      ? {
-                          minimal: !isNested && minimal,
-                          "data-focus": activeIndex === index,
-                          ref: (el: HTMLElement) =>
-                            (elementsRef.current[index] = el),
-                          ...getItemProps({
-                            onClick: child.props.onClick,
-                            tabIndex: activeIndex === index ? 0 : -1,
-                          }),
-                        }
-                      : {},
-                  );
-                })}
-              </div>
-            </FloatingFocusManager>
+                <div
+                  className={classNames(
+                    menuClassName,
+                    "flex flex-col bg-base p-1 menu-list",
+                    isNested &&
+                      "outline shadow-lg rounded-capped max-h-96 overflow-auto scroll-thin z-[var(--z-popover)]",
+                  )}
+                  autoFocus
+                  ref={mergeRefs(isNested ? refs.setFloating : ref)}
+                  {...getFloatingProps({
+                    onClick: isNested ? undefined : handleClick,
+                  })}
+                  // @ts-expect-error ignore
+                  {...{ style: !isNested ? rest.style : floatingStyles }}
+                >
+                  {cloneChildren(children, (child: AnyObject, index) => {
+                    labelsRef.current[index] = child.props.label;
+                    return cloneElement(
+                      child,
+                      nodeCheck(child, MenuItem, Menu, MenuComponent)
+                        ? {
+                            minimal: !isNested && minimal,
+                            "data-focus": activeIndex === index,
+                            ref: (el: HTMLElement) =>
+                              (elementsRef.current[index] = el),
+                            ...getItemProps({
+                              onClick: child.props.onClick,
+                              tabIndex: activeIndex === index ? 0 : -1,
+                            }),
+                          }
+                        : {},
+                    );
+                  })}
+                </div>
+              </FloatingFocusManager>
+            </HotKeyWrapper>
           </Wrapper>
         )}
       </FloatingList>

package/src/components/menu/MenuItem.tsx

@@ -22,9 +22,10 @@
  */
 
 import { useFloatingTree } from "@floating-ui/react";
-import { iconToken } from "@react-fabric/utilities";
+import { iconToken, mergeRefs } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { Fragment, useCallback, useMemo } from "react";
+import { Fragment, useCallback, useMemo, useRef } from "react";
+import { HotKey } from "../../hotkeys/HotKey";
 import { HotKeyLabel } from "../../hotkeys/HotKeyLabel";
 import { Tooltip } from "../../overlays";
 import { type PolymorphicProps } from "../../types";
@@ -58,6 +59,7 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
   ref,
   ...aria
 }: MenuItemProps & PolymorphicProps<Tag>) => {
+  const elRef = useRef<HTMLElement>(null);
   const tree = useFloatingTree();
   const badgeProps = useMemo(() => {
     return getBadgeProps(badge);
@@ -135,7 +137,7 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
   return (
     <Wrapper {...aria}>
       <E
-        ref={ref}
+        ref={mergeRefs(ref, elRef)}
         data-dropdown-dismiss
         data-color={color}
         className={classNames(
@@ -155,6 +157,9 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
         }}
         {...(minimal ? {} : aria)}
       >
+        {hotKey && (
+          <HotKey keyCombo={hotKey} handler={() => elRef.current?.click?.()} />
+        )}
         {menuLabel}
       </E>
     </Wrapper>

package/src/index.ts

@@ -40,10 +40,13 @@ export * from "./hooks/useStorage";
 
 export { HotKey } from "./hotkeys/HotKey";
 export { HotKeyLabel } from "./hotkeys/HotKeyLabel";
+export { HotKeyWrapper } from "./hotkeys/HotKeyWrapper";
 
 export { type ModalProps } from "./types";
 export { CoreIcons } from "./types/icons";
 
+export { cloneChildren } from "./utils";
+
 export {
   ApplicationProvider,
   useApplicationContext,

package/src/overlays/tooltip/Tooltip.tsx

@@ -184,7 +184,7 @@ export const Tooltip = ({
           >
             <span
               className={classNames(
-                "font-medium text-dimmed flex-1",
+                "font-medium text-dimmed flex-1 break-all",
                 isString(content) && "whitespace-pre-wrap mixed-lang",
               )}
             >

package/src/utils/cloneElement.ts

@@ -0,0 +1,44 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * 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:
+ *
+ * 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 { type ReactNode, Children, isValidElement } from "react";
+import { Fragment } from "react/jsx-runtime";
+
+export const cloneChildren = (
+  children: ReactNode,
+  callback: (child: ReactNode, index: number) => ReactNode,
+): ReactNode => {
+  return Children.map(children, (c: ReactNode) => {
+    if (isValidElement(c)) {
+      if (c.type === Fragment) {
+        // just compare to `Fragment`
+        return cloneChildren(c.props?.children, callback);
+      }
+      return c;
+    }
+    return c;
+  })
+    ?.flat()
+    .filter(Boolean)
+    .map(callback);
+};

package/src/utils/index.ts

@@ -24,5 +24,6 @@
 /* istanbul ignore file */
 
 export * from "./calculateDimensions";
+export * from "./cloneElement";
 export * from "./getColor";
 export * from "./nodeCheck";