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

package/src/context/context.ts

@@ -0,0 +1,100 @@
+/*
+ * 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";
+import { State } from "storybook/manager-api";
+import { GlobalProps } from "./Global";
+import { NotificationManagerRef } from "./NotificationCenter";
+
+interface GlobalContextType {
+  /**
+   * change language locale
+   * @param locale
+   */
+  changeLocale: (locale: string) => string;
+  /**
+   * change date calendar
+   * @param locale
+   */
+  changeCalendar: (calendar: State["calendar"]) => State["calendar"];
+  /**
+   * toggle theme between light and dark
+   * or force to theme provided
+   * @param theme
+   */
+  toggleColorScheme: (colorScheme?: State["colorScheme"]) => State["colorScheme"];
+  /**
+   * application default error display
+   */
+  errorElement: GlobalProps["errorElement"];
+
+  currentLocale: string;
+  currentCalendar: State["calendar"];
+  currentColorScheme: State["colorScheme"];
+
+  notificationManager: NotificationManagerRef;
+}
+
+export const GlobalContext = createContext<GlobalContextType>({} as GlobalContextType);
+
+/**
+ * internal usage only
+ * @internal
+ */
+export const useGlobals = () => useContext(GlobalContext);
+
+/**
+ * Hook to access the global application context.
+ * This hook provides access to the global context values, including the current locale, calendar, and color scheme.
+ *
+ * @returns {GlobalContextType} The global context values excluding the error element.
+ *
+ * @example
+ * ```jsx
+ * const { changeLocale, currentLocale, toggleColorScheme } = useApplicationContext();
+ * ```
+ */
+export const useApplicationContext = () => {
+  const { errorElement, ...rest } = useContext(GlobalContext);
+  return rest;
+};
+
+/**
+ * Hook to access the notification manager from the global context.
+ * This hook provides methods to show alerts, errors, messages, and toasts.
+ * It returns a reference to the notification manager, which can be used to display notifications in the application.
+ *
+ * @returns {NotificationManagerRef} The notification manager reference.
+ *
+ * @example
+ * ```jsx
+ * const notificationService = useNotificationService();
+ * notificationService.showMessage("Hello World");
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-notifications--notifications} for more details on available methods.
+ */
+export const useNotificationService = () => {
+  const { notificationManager } = useContext(GlobalContext);
+  return notificationManager ?? {};
+};

package/src/core/aside/Aside.tsx

@@ -22,26 +22,17 @@
  */
 
 import classNames from "classnames";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
 import { LoadingLine } from "../../components/animations/Animations";
-import { getIconProps, Icon, type IconProps } from "../../components/icon/Icon";
+import { Icon, type IconProps } from "../../components/icon/Icon";
 import { useLayoutEffectDebugger } from "../../hooks/useEffectDebugger";
 import { usePropToggle } from "../../hooks/usePropToggle";
 import { useResize } from "../../hooks/useResize";
-import {
-  type ChildrenProp,
-  type CollapseProps,
-  type CssProp,
-  type Elements,
-  type TestProps,
-} from "../../types";
+import { type ChildrenProp, type CollapseProps, type CssProp, type Elements, type TestProps } from "../../types";
+import { getIconProps } from "../../utils";
 import { ErrorBoundary } from "../boundary/ErrorBoundary";
 
-export interface AsideProps
-  extends ChildrenProp,
-    CollapseProps,
-    CssProp,
-    TestProps {
+export interface AsideProps extends ChildrenProp, CollapseProps, CssProp, TestProps {
   /**
    * page title
    */
@@ -57,7 +48,7 @@ export interface AsideProps
   /**
    * header actions
    */
-  actions?: Elements<JSX.Element>;
+  actions?: Elements<React.ReactElement>;
   /**
    * header class
    */
@@ -104,7 +95,7 @@ export interface AsideProps
  * It can be aligned to the start or end of the page.
  *
  * @param {AsideProps} props - The properties for the Aside component.
- * @returns {JSX.Element} The rendered Aside component.
+ * @returns {React.ReactElement} The rendered Aside component.
  *
  * @example
  * ```jsx
@@ -170,14 +161,14 @@ export const Aside = ({
 
   const handleResize = useRef(({ x }: { x: number }) => {
     if (elementRef.current != null) {
-      setWidth(elementRef.current.offsetWidth + x);
+      x !== 0 && setWidth(elementRef.current.offsetWidth + x);
     }
   });
   const resizeHandleProps = useResize(handleResize.current, {
     isReverse: align === "end",
   });
 
-  const tryPeek = useCallback(() => {
+  const tryPeek = useEffectEvent(() => {
     if (isCollapsed) {
       if (flyout) {
         setPeek(!peek);
@@ -186,18 +177,15 @@ export const Aside = ({
         void toggleCollapse();
       }
     }
-  }, [peek, flyout, isCollapsed, onFlyout, toggleCollapse]);
+  });
 
   useLayoutEffectDebugger(
     () => {
       if (peek) {
         const handler = (e: MouseEvent) => {
           if (
-            (e.target as HTMLElement).closest(`[data-ref="asideBody"]`) ==
-              null &&
-            (e.target as HTMLElement).closest(
-              `[data-ref="asidePlaceholder"]`,
-            ) == null
+            (e.target as HTMLElement).closest(`[data-ref="asideBody"]`) == null &&
+            (e.target as HTMLElement).closest(`[data-ref="asidePlaceholder"]`) == null
           ) {
             setPeek(false);
           }
@@ -230,24 +218,14 @@ export const Aside = ({
       style={isCollapsed ? undefined : widthStyles}
       data-testid={testId}
       data-test-value={testValue}
+      ref={elementRef}
     >
       <header
-        className={classNames(
-          "fabric-asideHeader",
-          headerClassName,
-          "grid area-head items-center",
-        )}
+        className={classNames("fabric-asideHeader", headerClassName, "grid area-head items-center")}
         data-ref="asideHeader"
       >
         {title && (
-          <div
-            className={classNames(
-              "fabric-asideTitle",
-              "truncate py-0.5 px-1 select-none pointer-events-none",
-            )}
-          >
-            {title}
-          </div>
+          <div className={classNames("fabric-asideTitle", "truncate py-0.5 px-1 select-none pointer-events-none")}>{title}</div>
         )}
         {collapsable && (
           <Icon
@@ -261,32 +239,17 @@ export const Aside = ({
         )}
         {icon && (
           <Icon
-            className={classNames(
-              "fabric-asideIcon",
-              "p-1 text-lg select-none pointer-events-none",
-            )}
+            className={classNames("fabric-asideIcon", "p-1 text-lg select-none pointer-events-none")}
             {...getIconProps(icon)}
           />
         )}
         {actions && <div className={"fabric-asideActions"}>{actions}</div>}
       </header>
       {loading && <LoadingLine />}
-      {isCollapsed && (
-        <div
-          role="none"
-          onClick={tryPeek}
-          data-ref="asidePlaceholder"
-          className={"fabric-asidePlaceholder"}
-        />
-      )}
+      {isCollapsed && <div role="none" onClick={tryPeek} data-ref="asidePlaceholder" className={"fabric-asidePlaceholder"} />}
       <section
-        ref={elementRef}
         data-ref="asideBody"
-        className={classNames(
-          "fabric-asideBody",
-          bodyClassName,
-          "overflow-hidden grid",
-        )}
+        className={classNames("fabric-asideBody", bodyClassName, "overflow-hidden grid")}
         style={isCollapsed ? widthStyles : undefined}
       >
         <ErrorBoundary>{children}</ErrorBoundary>

package/src/core/boundary/ErrorBoundary.tsx

@@ -26,11 +26,11 @@ import classNames from "classnames";
 import { Component } from "react";
 import { useTranslation } from "react-i18next";
 import { Fragment } from "react/jsx-runtime";
+import { useGlobals } from "../../context/context";
 import { useMemoDebugger } from "../../hooks/useEffectDebugger";
 import { usePropToggle } from "../../hooks/usePropToggle";
 import { type ChildrenProp } from "../../types";
 import { ErrorIcon } from "./ErrorIcon";
-import { useGlobals } from "../../context/Global";
 
 const DefaultError = ({ error }: { error?: string }) => {
   const { t } = useTranslation("core");
@@ -44,11 +44,7 @@ const DefaultError = ({ error }: { error?: string }) => {
 
 const ErrorMessage = ({ error, errorElement }: KeyValue) => {
   const { errorElement: globalError } = useGlobals();
-  const EE = useMemoDebugger(
-    () => errorElement ?? globalError ?? DefaultError,
-    [],
-    "ErrorBoundary element",
-  );
+  const EE = useMemoDebugger(() => errorElement ?? globalError ?? DefaultError, [], "ErrorBoundary element");
   return (
     <Fragment>
       <ErrorIcon />
@@ -63,26 +59,14 @@ const ErrorStack = ({ error, stack }: KeyValue) => {
   const [show, toggleShow] = usePropToggle(false);
   useLogger().error(error, {}, stack);
   return (
-    <div
-      className={classNames("fabric-boundaryDetail", "overflow-hidden grid")}
-    >
-      <div
-        className={classNames(
-          "fabric-boundaryLink",
-          "px-2 py-1 text-xs text-end",
-        )}
-      >
+    <div className={classNames("fabric-boundaryDetail", "overflow-hidden grid")}>
+      <div className={classNames("fabric-boundaryLink", "px-2 py-1 text-xs text-end")}>
         <span role="link" tabIndex={0} className="link" onClick={toggleShow}>
           {show ? "Hide Detail" : "Show Detail"}
         </span>
       </div>
       {show && (
-        <div
-          className={classNames(
-            "fabric-boundaryStack",
-            "overflow-auto p-2 text-xs border-t",
-          )}
-        >
+        <div className={classNames("fabric-boundaryStack", "overflow-auto p-2 text-xs border-t")}>
           <pre className="whitespace-pre-wrap">{stack}</pre>
         </div>
       )}
@@ -131,29 +115,16 @@ export class ErrorBoundary extends Component<
     this.setState({ hasError: true, error: error.message, stack: error.stack });
   }
 
-  // eslint-disable-next-line @typescript-eslint/promise-function-async
   render() {
     const env = process.env.NODE_ENV;
     if (this.state.hasError) {
       const { errorElement: E } = this.props;
       // You can render any custom fallback UI
       return (
-        <div
-          className={classNames(
-            "fabric-errorBoundary",
-            "grid grid-rows-1 overflow-hidden p-0.5 rounded-capped",
-          )}
-        >
-          <div
-            className={classNames(
-              "fabric-boundaryContent",
-              "overflow-hidden grid rounded-capped",
-            )}
-          >
+        <div className={classNames("fabric-errorBoundary", "grid grid-rows-1 overflow-hidden p-0.5 rounded-capped")}>
+          <div className={classNames("fabric-boundaryContent", "overflow-hidden grid rounded-capped")}>
             <ErrorMessage error={this.state.error} errorElement={E} />
-            {env === "development" && (
-              <ErrorStack error={this.state.error} stack={this.state.stack} />
-            )}
+            {env === "development" && <ErrorStack error={this.state.error} stack={this.state.stack} />}
           </div>
         </div>
       );

package/src/core/page/Page.tsx

@@ -23,13 +23,11 @@
 
 import classNames from "classnames";
 import { LoadingLine } from "../../components/animations/Animations";
-import { getIconProps, Icon, type IconProps } from "../../components/icon/Icon";
+import { Icon, type IconProps } from "../../components/icon/Icon";
 import { type ChildrenProp, type RefProp, type TestProps } from "../../types";
+import { getIconProps } from "../../utils";
 
-export interface PageProps
-  extends ChildrenProp,
-    TestProps,
-    RefProp<HTMLDivElement> {
+export interface PageProps extends ChildrenProp, TestProps, RefProp<HTMLDivElement> {
   /**
    * page title
    */

package/src/core/responsive/Responsive.tsx

@@ -22,19 +22,9 @@
  */
 
 import classNames from "classnames";
-import {
-  type AriaProps,
-  type ChildrenProp,
-  type CssProp,
-  type SizeTypeWithZero,
-  type TestProps,
-} from "../../types";
+import { type AriaProps, type ChildrenProp, type CssProp, type SizeTypeWithZero, type TestProps } from "../../types";
 
-export interface ContainerProps
-  extends AriaProps,
-    CssProp,
-    ChildrenProp,
-    TestProps {
+export interface ContainerProps extends AriaProps, CssProp, ChildrenProp, TestProps {
   /**
    * use full width
    */
@@ -43,6 +33,10 @@ export interface ContainerProps
    * gutter size
    */
   gutter?: SizeTypeWithZero;
+  /**
+   * use @container size queries for max-width
+   */
+  useContainer?: boolean;
 }
 
 export interface RowProps extends AriaProps, CssProp, ChildrenProp, TestProps {
@@ -68,11 +62,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 AriaProps, CssProp, TestProps, Partial<ChildrenProp> {
   /**
    * align items
    */
@@ -107,19 +97,13 @@ export interface ColProps
  * </Container>
  * ```
  */
-export const Container = ({
-  children,
-  fullWidth,
-  className,
-  gutter,
-  ...aria
-}: ContainerProps) => {
+export const Container = ({ children, fullWidth, className, gutter, useContainer, ...aria }: ContainerProps) => {
   return (
     <div
       className={classNames(
         "fabric-container",
         className,
-        !fullWidth && "container mx-auto",
+        !fullWidth && (useContainer ? "container-inner mx-auto" : "container mx-auto"),
       )}
       data-gutter={gutter}
       {...aria}
@@ -199,15 +183,7 @@ export const Row = ({
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-application--responsive} for more details.
  */
-export const Col = ({
-  children,
-  flex,
-  align,
-  truncate,
-  className,
-  stretchContent,
-  ...aria
-}: ColProps) => {
+export const Col = ({ children, flex, align, truncate, className, stretchContent, ...aria }: ColProps) => {
   return (
     <div
       className={classNames(

package/src/core/theme/ThemeProvider.tsx

@@ -24,8 +24,8 @@
 import { isColor } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { useMemo } from "react";
-import { type ChildrenProp } from "../../types";
-import { useApplicationContext } from "../../context/Global";
+import { useApplicationContext } from "../../context/context";
+import { type ChildrenProp, type CssProp } from "../../types";
 
 export interface ThemeProps {
   /**
@@ -91,7 +91,8 @@ export const ThemeProvider = ({
   tintColor,
   colorScheme,
   rounding,
-}: ThemeProps & ChildrenProp) => {
+  className,
+}: ThemeProps & ChildrenProp & CssProp) => {
   const { currentColorScheme } = useApplicationContext();
   const styles = useMemo(() => {
     const ret: KeyValue = {};
@@ -121,11 +122,7 @@ export const ThemeProvider = ({
       style={styles}
       data-color-scheme={colorScheme ?? currentColorScheme}
       data-rounding={rounding}
-      className={classNames(
-        "fabric-themeProvider",
-        "contents theme-base",
-        branding,
-      )}
+      className={classNames("fabric-themeProvider", "contents theme-base", branding, className)}
     >
       {children}
     </div>

package/src/core/viewport/Viewport.tsx

@@ -47,7 +47,7 @@ export const Viewport = ({ children }: PropsWithChildren) => {
       data-ref="viewport"
       className={classNames(
         "fabric-viewport",
-        "grid overflow-hidden absolute inset-0",
+        "grid overflow-hidden absolute inset-0 @container",
       )}
     >
       {children}

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, useEffectEvent, 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 const 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, reason) => {
+      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 = useEffectEvent((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 tryClosing = useRef((e: React.MouseEvent) => {
+    if (!(e.target as HTMLElement)?.closest("[data-dropdown-dismiss='false']")) setTimeout(() => setIsOpen(false), 50);
+  });
+
+  return [
+    isOpen && (
+      <FloatingPortal 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 AnyObject, {
+              ...getFloatingProps(),
+              style: {
+                ...floatingStyles,
+                borderRadius: "var(--rounding)",
+                zIndex: "var(--z-popover)",
+                fontSize: "0.875rem",
+              },
+              className: "bg-default outline rounded-capped shadow-lg",
+              ref: refs.setFloating,
+              onMouseUp: tryClosing.current,
+            })}
+          </FloatingFocusManager>
+        </FloatingOverlay>
+      </FloatingPortal>
+    ),
+    handleClick,
+  ];
+};

package/src/hooks/useIsDark.ts

@@ -21,7 +21,8 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { useCallback, useState } from "react";
+import { debounce } from "@react-fabric/utilities";
+import { useEffectEvent, useState } from "react";
 import { useLayoutEffectDebugger } from "./useEffectDebugger";
 
 /**
@@ -34,18 +35,19 @@ import { useLayoutEffectDebugger } from "./useEffectDebugger";
  */
 export const useIsDark = () => {
   const [isDark, setDark] = useState(false);
-  const checkTheme = useCallback(() => {
+  const checkTheme = useEffectEvent(() => {
     const [r] = getComputedStyle(
       document.documentElement,
     ).backgroundColor.match(/\d?\d?\d/g) as AnyObject;
     setDark(+r < 50);
-  }, []);
+  });
   useLayoutEffectDebugger(
     () => {
       if (MutationObserver) {
-        const ob = new MutationObserver(checkTheme);
+        const cb = debounce(checkTheme, 100);
+        const ob = new MutationObserver(cb);
         ob.observe(document.documentElement, { attributes: true });
-        checkTheme();
+        cb();
         return () => {
           ob.disconnect();
         };