@react-fabric/core 1.0.0-beta.61 → 1.0.0-beta.63

package/src/hooks/useNavigator.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useEffectEvent, useMemo, useState } from "react";
 
 /**
  * Custom hook to manage navigation through a list of items.
@@ -43,22 +43,18 @@ import { useCallback, useMemo, useRef, useState } from "react";
  */
 export const useNavigator = (totalCount = 0, defaultIndex = 0) => {
   const [currentIndex, setCurrentIndex] = useState(defaultIndex);
-  const refCurrent = useRef(defaultIndex);
 
-  const onNavigate = useCallback(
-    (dir: 1 | -1) => {
+  const onNavigate = useEffectEvent((dir: 1 | -1) => {
+    setCurrentIndex((prevValue) => {
       if (dir === -1) {
-        refCurrent.current =
-          refCurrent.current > 0 ? refCurrent.current - 1 : totalCount - 1;
+        return prevValue > 0 ? prevValue - 1 : totalCount - 1;
       }
       if (dir === 1) {
-        refCurrent.current =
-          refCurrent.current + 1 < totalCount ? refCurrent.current + 1 : 0;
+        return prevValue + 1 < totalCount ? prevValue + 1 : 0;
       }
-      setCurrentIndex(refCurrent.current);
-    },
-    [totalCount],
-  );
+      return prevValue;
+    });
+  });
   const headLabel = useMemo(
     () => (
       <span className="text-muted leading-none select-none">

package/src/hooks/useOverlayService.tsx

@@ -21,10 +21,9 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { useState, type ComponentProps, type ElementType } from "react";
+import { useRef, useState } from "react";
 import { type ModalProps } from "../types";
-
-type OverlayComponent = ElementType<ModalProps<AnyObject>>;
+import { EMPTY_FC } from "@react-fabric/utilities";
 
 /**
  * Hook to manage overlay components like modals or flyouts.
@@ -36,7 +35,8 @@ type OverlayComponent = ElementType<ModalProps<AnyObject>>;
  * of the overlay when it is closed, allowing you to handle the result in a controlled manner.
  *
  * @param ModalOrFlyout - The component to be used as an overlay.
- * @returns An array containing the current overlay and a function to open it.
+ * @param toggleOpen - If true, calling `openOverlay` while an overlay is already open will close the existing one instead of opening a new one.
+ * @returns An array containing the current overlay, a function to open it, and a boolean indicating if the overlay is open.
  *
  * @example
  * ```jsx
@@ -50,27 +50,32 @@ type OverlayComponent = ElementType<ModalProps<AnyObject>>;
  * <Overlay />
  * ```
  */
-export const useOverlayService = (
-  ModalOrFlyout: OverlayComponent,
+export const useOverlayService = <T extends AnyObject = AnyObject>(
+  ModalOrFlyout: React.FunctionComponent<ModalProps<T>>,
 ): [
-  Overlay: React.ReactNode | null,
-  openOverlay: (props?: KeyValue) => Promise<AnyObject>,
+  Overlay: React.FunctionComponent<Partial<T>>,
+  openOverlay: (props?: Partial<T>) => Promise<AnyObject>,
+  closeOverlay: ((args?: AnyObject) => void) | null,
 ] => {
-  const [Overlay, setOverlay] = useState<React.ReactNode | null>(null);
+  const [Overlay, setOverlay] = useState<React.FunctionComponent<Partial<T>>>(EMPTY_FC);
 
-  const openOverlay = async ({
-    onClose,
-    ...props
-  }: ComponentProps<typeof ModalOrFlyout> = {}) => {
+  const existingOpenPromise = useRef<AnyObject | null>(null);
+  const openOverlay = async ({ onClose, ...outerProps }: AnyObject = {}) => {
+    if (existingOpenPromise.current) {
+      return;
+    }
     return await new Promise((resolve) => {
-      const handleClose = (args: AnyObject) => {
-        setOverlay(null);
+      existingOpenPromise.current = (args: AnyObject) => {
+        setOverlay(EMPTY_FC);
         resolve(args);
         onClose?.(args);
+        existingOpenPromise.current = null;
       };
-      setOverlay(<ModalOrFlyout {...props} onClose={handleClose} />);
+      setOverlay(() => (overrideProps: Partial<T>) => (
+        <ModalOrFlyout {...outerProps} {...(overrideProps as any)} onClose={existingOpenPromise.current} />
+      ));
     });
   };
 
-  return [Overlay, openOverlay];
+  return [Overlay, openOverlay, existingOpenPromise.current];
 };

package/src/hooks/usePropToggle.ts

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { useCallback, useRef, useState, type RefObject } from "react";
+import { useEffectEvent, useRef, useState, type RefObject } from "react";
 import { useLayoutEffectDebugger } from "./useEffectDebugger";
 
 /**
@@ -61,12 +61,12 @@ export const usePropToggle = (
   );
 
   /** ***************** toggle handler *******************/
-  const doToggle = useCallback(() => {
+  const doToggle = useEffectEvent(() => {
     if (onToggle?.(!toggleOn, key) !== false) {
       toggleRef.current = !toggleOn;
       setToggleOn(!toggleOn);
     }
-  }, [toggleOn, onToggle, key]);
+  });
 
   return [toggleOn, doToggle, toggleRef];
 };

package/src/hooks/useResize.ts

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { useCallback, useRef, type RefObject } from "react";
+import { useCallback, useEffectEvent, useRef, type RefObject } from "react";
 import { useIsRtl } from "./useIsRtl";
 
 interface Options {
@@ -74,14 +74,14 @@ export const useResize = <T extends HTMLElement = HTMLDivElement>(
         /** ***************** check if reverse enabled of RTL *******************/
         const reversed = ((isRtl ? 1 : 0) ^ (isReverse ? 1 : 0)) === 1;
         const box = refEl.current?.getBoundingClientRect();
-        const x =
-          (evt.clientX - (reversed ? box.left : box.right)) *
-          (reversed ? -1 : 1);
-        const y = evt.clientY - box.bottom;
+        const diffX = ((box.left + box.right) / 2) * (reversed ? -1 : 1);
+        const diffY = (box.top + box.bottom) / 2;
+        const x = evt.clientX - diffX;
+        const y = evt.clientY - diffY;
         onResize({ x, y });
       }
     },
-    [onResize, isRtl, isReverse],
+    [isRtl, isReverse, onResize],
   );
 
   /** ***************** dettach handlers on mouseup *******************/
@@ -90,19 +90,16 @@ export const useResize = <T extends HTMLElement = HTMLDivElement>(
     document.removeEventListener("mousemove", onResizing);
     document.removeEventListener("mouseup", onResizeEnd);
     onEnd?.();
-  }, [onEnd, onResizing]);
+  }, [onResizing, onEnd]);
 
   /** ***************** attach handlers on mousedown *******************/
-  const onResizeStart = useCallback(
-    (e: React.MouseEvent) => {
-      e.preventDefault();
-      document.body.style.cursor = isVertical ? "row-resize" : "col-resize";
-      document.addEventListener("mousemove", onResizing);
-      document.addEventListener("mouseup", onResizeEnd);
-      onStart?.();
-    },
-    [onResizing, onResizeEnd, onStart],
-  );
+  const onResizeStart = useEffectEvent((e: React.MouseEvent) => {
+    e.preventDefault();
+    document.body.style.cursor = isVertical ? "row-resize" : "col-resize";
+    document.addEventListener("mousemove", onResizing);
+    document.addEventListener("mouseup", onResizeEnd);
+    onStart?.();
+  });
 
   return { ref: refEl, onMouseDown: onResizeStart };
 };

package/src/hooks/useResizeObserver.ts

@@ -21,10 +21,10 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { useEffect, useRef, useTransition, type RefObject } from "react";
+import { useEffectEvent, useRef, useTransition, type RefObject } from "react";
 import ResizeObserver from "resize-observer-polyfill";
 import { type SizeObject } from "../types";
-import { useDebounce } from "./useDebounce";
+import { useEffectDebugger } from "./useEffectDebugger";
 
 /**
  * Custom hook to observe size changes of an element using ResizeObserver.
@@ -51,28 +51,28 @@ export const useResizeObserver = <T extends HTMLElement = HTMLDivElement>(
   const ref = useRef<T>(null);
   const [, startTransition] = useTransition();
 
-  const callbackResize = useDebounce(
+  const callbackResize = useEffectEvent(() => {
+    startTransition(() => {
+      if (onResize && ref.current != null) {
+        const { offsetWidth: width, offsetHeight: height } = ref.current;
+        onResize?.({ width, height });
+      }
+    });
+  });
+
+  useEffectDebugger(
     () => {
-      startTransition(() => {
-        if (onResize && ref.current != null) {
-          const { offsetWidth: width, offsetHeight: height } = ref.current;
-          onResize?.({ width, height });
-        }
-      });
+      if (ref.current != null) {
+        const ob = new ResizeObserver(callbackResize);
+        ob.observe(ref.current);
+        return () => {
+          ob.disconnect();
+        };
+      }
     },
-    [onResize],
-    0,
+    [],
+    "useResizeObserver",
   );
 
-  useEffect(() => {
-    if (ref.current != null) {
-      const ob = new ResizeObserver(callbackResize);
-      ob.observe(ref.current);
-      return () => {
-        ob.disconnect();
-      };
-    }
-  }, [callbackResize, ref]);
-
   return ref;
 };

package/src/hooks/useStepper.tsx

@@ -36,7 +36,7 @@ export const useStepper = ({
 
   const stepper = useMemo(() => {
     return (
-      <div className="fabric-stepper bg-base flex-1 flex justify-center py-1 px-2 overflow-x-auto">
+      <div className="fabric-stepper bg-default flex-1 flex justify-center py-1 px-2 overflow-x-auto">
         {steps.map((child: any, index) => (
           <div
             className="fabric-stepper--pill"

package/src/hotkeys/HotKey.tsx

@@ -22,8 +22,8 @@
  */
 
 import { useEffectDebugger } from "../hooks/useEffectDebugger";
-import { useHotKeys } from "./HotKeyWrapper";
 import { type HotKeyProps } from "./commons";
+import { useHotKeys } from "./context";
 
 export const HotKey = ({ keyCombo, global, handler }: HotKeyProps) => {
   const { addHotKey, removeHotKey } = useHotKeys();

package/src/hotkeys/HotKeyWrapper.tsx

@@ -21,119 +21,95 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import {
-  createContext,
-  memo,
-  useCallback,
-  useContext,
-  useRef,
-  type FC,
-  type PropsWithChildren,
-} from "react";
+import { memo, useCallback, useEffectEvent, useRef, type FC, type PropsWithChildren } from "react";
 import { useEffectDebugger } from "../hooks/useEffectDebugger";
 import { reduceHotKey } from "./commons";
+import { HotKeysContext } from "./context";
 
-/** @internal */
-export const HotKeysContext = createContext<{
-  addHotKey: (key: string, handler: () => void, global?: boolean) => void;
-  removeHotKey: (key: string) => void;
-}>({} as AnyObject);
+export const HotKeyWrapper: FC<PropsWithChildren> = memo(({ children }: PropsWithChildren) => {
+  const refEl = useRef<HTMLDivElement>(null);
+  const keyList = useRef<KeyValue[]>([]);
 
-export const useHotKeys = () => useContext(HotKeysContext);
+  const addHotKey = useEffectEvent(
+    (keyCombo: string, handler: () => void, global = false) =>
+      (keyList.current = [
+        ...keyList.current.filter(({ _key }) => _key !== keyCombo),
+        reduceHotKey({ keyCombo, handler, global }),
+      ]),
+  );
+  const removeHotKey = useEffectEvent(
+    (key: string) => (keyList.current = [...keyList.current.filter(({ _key }) => _key !== key)]),
+  );
 
-export const HotKeyWrapper: FC<PropsWithChildren> = memo(
-  ({ children }: PropsWithChildren) => {
-    const refEl = useRef<HTMLDivElement>(null);
-    const keyList = useRef<KeyValue[]>([]);
-
-    const addHotKey = useCallback(
-      (keyCombo: string, handler: () => void, global = false) =>
-        (keyList.current = [
-          ...keyList.current.filter(({ _key }) => _key !== keyCombo),
-          reduceHotKey({ keyCombo, handler, global }),
-        ]),
-      [],
-    );
-    const removeHotKey = useCallback(
-      (key: string) =>
-        (keyList.current = [
-          ...keyList.current.filter(({ _key }) => _key !== key),
-        ]),
-      [],
+  const handler = useEffectEvent((items: KeyValue[], event: KeyboardEvent) => {
+    if (items.length === 0) return;
+    const { key: keyCode, code, altKey, ctrlKey, metaKey, shiftKey } = event;
+    if (
+      keyCode !== "Enter" &&
+      keyCode !== "Esc" &&
+      ["INPUT", "TEXTAREA", "SELECT"].includes((event.target as HTMLElement).tagName)
+    )
+      return;
+    const find = items.find(
+      ({ key, alt, ctrl, meta, shift }: KeyValue) =>
+        (key.toLowerCase() === keyCode.toLowerCase() ||
+          key.toLowerCase() === code.toLowerCase() ||
+          // work around for macos alt+key issue
+          `key${key.toLowerCase()}` === code.toLowerCase()) &&
+        alt === altKey &&
+        ctrl === ctrlKey &&
+        meta === metaKey &&
+        shift === shiftKey,
     );
+    if (find?.handler) {
+      find.handler();
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  });
 
-    const handler = useCallback((items: KeyValue[], event: KeyboardEvent) => {
-      if (items.length === 0) return;
-      const { key: keyCode, code, altKey, ctrlKey, metaKey, shiftKey } = event;
-      if (
-        keyCode !== "Enter" &&
-        keyCode !== "Esc" &&
-        ["INPUT", "TEXTAREA", "SELECT"].includes(
-          (event.target as HTMLElement).tagName,
-        )
-      )
-        return;
-      const find = items.find(
-        ({ key, alt, ctrl, meta, shift }: KeyValue) =>
-          (key.toLowerCase() === keyCode.toLowerCase() ||
-            key.toLowerCase() === code.toLowerCase() ||
-            // work around for macos alt+key issue
-            `key${key.toLowerCase()}` === code.toLowerCase()) &&
-          alt === altKey &&
-          ctrl === ctrlKey &&
-          meta === metaKey &&
-          shift === shiftKey,
+  const handleGlobal = useCallback(
+    (event: KeyboardEvent) => {
+      handler(
+        keyList.current.filter((i) => i.global),
+        event,
       );
-      if (find?.handler) {
-        find.handler();
-        event.preventDefault();
-        event.stopImmediatePropagation();
-      }
-    }, []);
-
-    const handleGlobal = useCallback(
-      (event: KeyboardEvent) => {
-        handler(
-          keyList.current.filter((i) => i.global),
-          event,
-        );
-      },
-      [handler],
-    );
-    const handleHotKey = useCallback(
-      (event: KeyboardEvent) => {
-        handler(
-          keyList.current.filter((i) => !i.global),
-          event,
-        );
-      },
-      [handler],
-    );
+    },
+    [handler],
+  );
+  const handleHotKey = useCallback(
+    (event: KeyboardEvent) => {
+      handler(
+        keyList.current.filter((i) => !i.global),
+        event,
+      );
+    },
+    [handler],
+  );
 
-    useEffectDebugger(
-      () => {
-        const el: HTMLElement | null | undefined = refEl.current?.parentElement;
-        if (el) {
-          el.tabIndex = 0;
-          el.addEventListener("keydown", handleHotKey);
-          document.addEventListener("keydown", handleGlobal);
-          return () => {
-            el.removeEventListener("keydown", handleHotKey);
-            document.removeEventListener("keydown", handleGlobal);
-          };
-        }
-      },
-      [handleGlobal, handleHotKey],
-      "HotKeyWrapper attach handlers",
-    );
+  useEffectDebugger(
+    () => {
+      const el: HTMLElement | null | undefined = refEl.current?.parentElement;
+      if (el) {
+        el.tabIndex = 0;
+        el.addEventListener("keydown", handleHotKey);
+        document.addEventListener("keydown", handleGlobal);
+        return () => {
+          el.removeEventListener("keydown", handleHotKey);
+          document.removeEventListener("keydown", handleGlobal);
+        };
+      }
+    },
+    [handleGlobal, handleHotKey],
+    "HotKeyWrapper attach handlers",
+  );
 
-    return (
-      <HotKeysContext.Provider value={{ addHotKey, removeHotKey }}>
-        <div ref={refEl} style={{ display: "contents" }}>
-          {children}
-        </div>
-      </HotKeysContext.Provider>
-    );
-  },
-);
+  return (
+    <HotKeysContext.Provider value={{ addHotKey, removeHotKey }}>
+      <div ref={refEl} style={{ display: "contents" }}>
+        {children}
+      </div>
+    </HotKeysContext.Provider>
+  );
+});
 HotKeyWrapper.displayName = "HotKeyProvider";

package/src/hotkeys/commons.ts

@@ -67,6 +67,8 @@ export const reduceHotKey = ({ keyCombo, global, handler }: HotKeyProps) => {
       else if (e.trim().toLowerCase() === "down") item.key = "arrowdown";
       else if (e.trim().toLowerCase().startsWith("del")) item.key = "delete";
       else if (e.trim().toLowerCase().startsWith("esc")) item.key = "escape";
+      else if (e.trim().toLowerCase().startsWith("plus")) item.key = "+";
+      else if (e.trim().toLowerCase().startsWith("minus")) item.key = "-";
       else item.key = e.trim().toLowerCase();
     }
   });

package/src/hotkeys/context.ts

@@ -0,0 +1,32 @@
+/*
+ * 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 { createContext, useContext } from "react";
+
+/** @internal */
+export const HotKeysContext = createContext<{
+  addHotKey: (key: string, handler: () => void, global?: boolean) => void;
+  removeHotKey: (key: string) => void;
+}>({} as AnyObject);
+
+export const useHotKeys = () => useContext(HotKeysContext);

package/src/i18n/index.ts

@@ -23,8 +23,8 @@
 /* istanbul ignore file */
 
 import i18n from "i18next";
-import ar from "./ar.json";
-import en from "./en.json";
+import ar from "./ar/core.json";
+import en from "./en/core.json";
 
 /**
  * add language bundles using bundle keys as namespaces

package/src/index.ts

@@ -28,6 +28,7 @@ export { Flyout, Modal, Tooltip } from "./overlays";
 export * from "./typography";
 
 export * from "./hooks/useClientService";
+export * from "./hooks/useContextMenu";
 export * from "./hooks/useDebounce";
 export * from "./hooks/useEffectDebugger";
 export * from "./hooks/useIsDark";
@@ -45,11 +46,7 @@ export { HotKeyWrapper } from "./hotkeys/HotKeyWrapper";
 
 export { type ModalProps } from "./types";
 
-export { cloneChildren } from "./utils";
+export { cloneChildren, getBadgeProps, getIconProps } from "./utils";
 
-export {
-  ApplicationProvider,
-  useApplicationContext,
-  useGlobals,
-  useNotificationService,
-} from "./context/Global";
+export { useApplicationContext, useNotificationService } from "./context/context";
+export { ApplicationProvider } from "./context/Global";

package/src/overlays/alert/Alert.tsx

@@ -31,7 +31,7 @@ import {
   useRole,
 } from "@floating-ui/react";
 import classNames from "classnames";
-import { useCallback, useLayoutEffect, useMemo, useState } from "react";
+import { useEffectEvent, useLayoutEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { AnimationIndicator } from "../../components/animations/Animations";
 import { Button } from "../../components/button/Button";
@@ -64,7 +64,7 @@ export interface AlertProps {
   /**
    * toast text
    */
-  message: string | JSX.Element;
+  message: string | React.ReactElement;
   /**
    * theme color
    */
@@ -72,7 +72,7 @@ export interface AlertProps {
   /**
    * extra action button
    */
-  actions?: Elements<JSX.Element>;
+  actions?: Elements<React.ReactElement>;
   /**
    * ok label
    */
@@ -100,7 +100,6 @@ export const Alert = ({
   rtlFlip,
   actions,
   // @ts-expect-error internal prop
-  // eslint-disable-next-line react/prop-types --- IGNORE ---
   onClose,
   type,
   okLabel,
@@ -153,15 +152,12 @@ export const Alert = ({
     }
   }, [color, type, icon, iconSrc, rtlFlip]);
 
-  const handleClose = useCallback(
-    (ret: AnyObject) => {
-      refs.floating.current && (refs.floating.current.dataset.show = "false");
-      setTimeout(() => {
-        onClose(ret);
-      }, 250);
-    },
-    [onClose],
-  );
+  const handleClose = useEffectEvent((ret: AnyObject) => {
+    refs.floating.current && (refs.floating.current.dataset.show = "false");
+    setTimeout(() => {
+      onClose(ret);
+    }, 250);
+  });
   useLayoutEffect(() => {
     setTimeout(
       () =>
@@ -177,12 +173,12 @@ export const Alert = ({
         style={{ zIndex: "var(--z-overlay-mask)" }}
         className="bg-tint-100/50 backdrop-blur-sm grid place-items-center"
       >
-        <FloatingFocusManager context={context}>
+        <FloatingFocusManager context={context} modal>
           <dialog
             role="alertdialog"
             className={classNames(
               "fabric-alert",
-              "grid bg-base border-2 pointer-events-auto overflow-hidden rounded-capped select-none",
+              "grid bg-default border-2 pointer-events-auto overflow-hidden rounded-capped select-none",
               "min-w-72 max-w-sm p-6 relative outline-0 shadow-lg",
             )}
             style={{
@@ -248,7 +244,7 @@ export const Alert = ({
                 {okLabel ?? t("action.ok", "OK")}
               </Button>
             </div>
-            <div className="absolute top-2 end-2">
+            <div className="absolute top-2 inset-e-2">
               <Button
                 size="sm"
                 variant="link"