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

package/src/components/panel/Panel.tsx

@@ -35,16 +35,12 @@ import {
   type ExpandProps,
   type TestProps,
 } from "../../types";
+import { getIconProps } from "../../utils";
 import { LoadingLine } from "../animations/Animations";
-import { getIconProps, Icon, type IconProps } from "../icon/Icon";
+import { Icon, type IconProps } from "../icon/Icon";
 
 export interface PanelProps
-  extends CssProp,
-    AriaProps,
-    TestProps,
-    ExpandProps,
-    CollapseProps,
-    ChildrenProp<HeadFootProps | ContentProps> {
+  extends CssProp, AriaProps, TestProps, ExpandProps, CollapseProps, ChildrenProp<HeadFootProps | ContentProps> {
   /**
    * panel id used by panel stack
    */
@@ -56,7 +52,7 @@ export interface PanelProps
   /**
    * header actions
    */
-  actions?: JSX.Element;
+  actions?: React.ReactElement;
   /**
    * header css classname(s)
    */
@@ -112,7 +108,7 @@ export interface PanelProps
  * It can be used in various applications where panels are needed, such as dashboards, settings pages, or content management systems.
  *
  * @param {PanelProps} props - The properties for the Panel component.
- * @returns {JSX.Element} The rendered Panel component.
+ * @returns {React.ReactElement} The rendered Panel component.
  *
  * @example
  * ```jsx
@@ -165,11 +161,7 @@ export const Panel = ({
   onBack,
   ...aria
 }: PanelProps) => {
-  const [collapsed, toggleCollapse] = usePropToggle(
-    _collapsed,
-    onCollapse,
-    panelId,
-  );
+  const [collapsed, toggleCollapse] = usePropToggle(_collapsed, onCollapse, panelId);
   const [expanded, toggleExpand] = usePropToggle(_expanded, onExpand, panelId);
 
   const hasTools = useMemo(() => {
@@ -205,11 +197,7 @@ export const Panel = ({
       {expanded && <HotKey keyCombo="esc" handler={toggleExpand} />}
       <header
         role="none"
-        className={classNames(
-          "fabric-panelHeader",
-          headerClassName,
-          "flex flex-nowrap items-center area-head",
-        )}
+        className={classNames("fabric-panelHeader", headerClassName, "flex flex-nowrap items-center area-head")}
         data-ref="panelHeader"
         onClick={collapsable ? toggleCollapse : undefined}
       >
@@ -222,37 +210,16 @@ export const Panel = ({
             onClick={onBack}
           />
         )}
-        {icon && (
-          <Icon
-            className="p-2 text-md select-none pointer-events-none"
-            {...getIconProps(icon)}
-          />
-        )}
-        <div
-          className={classNames(
-            titleClassName,
-            "flex-1 select-none truncate",
-            title && "py-1 first:px-2",
-          )}
-        >
-          {title}
-        </div>
+        {icon && <Icon className="p-2 text-md select-none pointer-events-none" {...getIconProps(icon)} />}
+        <div className={classNames(titleClassName, "flex-1 select-none truncate", title && "py-1 first:px-2")}>{title}</div>
         <div className="px-1 leading-none">{actions}</div>
         {hasTools && (
-          <div
-            role="none"
-            className="px-1 gap-px flex"
-            onClick={(e) => e.stopPropagation()}
-          >
+          <div role="none" className="px-1 gap-px flex" onClick={(e) => e.stopPropagation()}>
             {expandable && (
               <Icon
                 data-ref="panelExpand"
                 className={classNames("fabric-panelAction", "cursor-pointer")}
-                icon={
-                  expanded
-                    ? "icon-[mdi--fullscreen-exit]"
-                    : "icon-[mdi--fullscreen]"
-                }
+                icon={expanded ? "icon-[mdi--fullscreen-exit]" : "icon-[mdi--fullscreen]"}
                 onClick={toggleExpand}
               />
             )}
@@ -260,9 +227,7 @@ export const Panel = ({
               <Icon
                 data-ref="panelCollapse"
                 className={classNames("fabric-panelAction", "cursor-pointer")}
-                icon={
-                  collapsed ? "icon-[mdi--plus-box]" : "icon-[mdi--minus-box]"
-                }
+                icon={collapsed ? "icon-[mdi--plus-box-outline]" : "icon-[mdi--minus-box-outline]"}
                 onClick={toggleCollapse}
               />
             )}
@@ -278,13 +243,7 @@ export const Panel = ({
         )}
       </header>
       {(!collapsed || expanded) && (
-        <div
-          data-ref="panelBody"
-          className={classNames(
-            "fabric-panelBody",
-            "area-content grid overflow-hidden",
-          )}
-        >
+        <div data-ref="panelBody" className={classNames("fabric-panelBody", "area-content grid overflow-hidden")}>
           {loading && <LoadingLine />}
           {children}
         </div>

package/src/components/panel/PanelGroup.tsx

@@ -22,7 +22,7 @@
  */
 
 import classNames from "classnames";
-import { Children, cloneElement, useCallback, useState } from "react";
+import { Children, cloneElement, useEffectEvent, useState } from "react";
 import {
   useEffectDebugger,
   useMemoDebugger,
@@ -48,7 +48,7 @@ export interface PanelGroupProps extends ChildrenProp {
  * It uses the `Panel` component to render each individual panel within the group.
  *
  * @param {PanelGroupProps} props - The properties for the PanelGroup component.
- * @returns {JSX.Element} The rendered PanelGroup component.
+ * @returns {React.ReactElement} The rendered PanelGroup component.
  *
  * @example
  * ```jsx
@@ -88,7 +88,7 @@ export const PanelGroup = ({
     "PanelGroup setActive",
   );
 
-  const changeExpanded = useCallback(
+  const changeExpanded = useEffectEvent(
     (collapsed: boolean, id: string, handler?: AnyObject) => {
       if (!collapsed) {
         setExpandedPanel(id);
@@ -97,7 +97,6 @@ export const PanelGroup = ({
       handler?.(collapsed);
       return id !== expandedPanel;
     },
-    [onActiveChange, expandedPanel],
   );
 
   return (

package/src/components/panel/PanelStack.tsx

@@ -25,8 +25,8 @@ import {
   Children,
   cloneElement,
   type MouseEvent,
-  useCallback,
   useEffect,
+  useEffectEvent,
   useMemo,
   useRef,
   useState,
@@ -60,7 +60,7 @@ export interface PanelStackProps extends CssProp, ChildrenProp {
  * and it updates the active panel based on user interactions.
  *
  * @param {PanelStackProps} props - The properties for the PanelStack component.
- * @returns {JSX.Element} The rendered PanelStack component.
+ * @returns {React.ReactElement} The rendered PanelStack component.
  *
  * @example
  * ```jsx
@@ -112,40 +112,35 @@ export const PanelStack = ({
     });
   }, [onPanelChange, history]);
 
-  const goBack = useCallback(() => {
-     
+  const goBack = useEffectEvent(() => {
     if (onBack?.(history[0], history[1] ?? "root") !== false) {
       setHistory(history.slice(1));
     }
-  }, [history, onBack]);
+  });
 
   const currentPanel = useMemo<AnyObject>(
     () => panels.get(history[0]) ?? panels.values().next().value,
     [history, panels],
   );
 
-  const checkMenuClick = useCallback(
-    (e: MouseEvent) => {
-      const panelKey = (e.target as HTMLElement)?.dataset?.panel;
-      if (panelKey) {
-        if (panelKey === "back") {
-          goBack();
-        } else if (panelKey === "root") {
-           
-          if (onBack?.(history[0], "root") !== false) {
-            setHistory([]);
-          }
-        } else if (panels.has(panelKey)) {
-          setHistory([panelKey, ...history]);
+  const checkMenuClick = useEffectEvent((e: MouseEvent) => {
+    const panelKey = (e.target as HTMLElement)?.dataset?.panel;
+    if (panelKey) {
+      if (panelKey === "back") {
+        goBack();
+      } else if (panelKey === "root") {
+        if (onBack?.(history[0], "root") !== false) {
+          setHistory([]);
         }
-        e.stopPropagation();
-        e.preventDefault();
-        return false;
+      } else if (panels.has(panelKey)) {
+        setHistory([panelKey, ...history]);
       }
-      return true;
-    },
-    [goBack, history, panels, onBack],
-  );
+      e.stopPropagation();
+      e.preventDefault();
+      return false;
+    }
+    return true;
+  });
 
   return (
     <div

package/src/components/progress/ProgressBar.tsx

@@ -67,7 +67,7 @@ const SizeMap: KeyValue = {
  * The label can be customized or hidden based on the props provided.
  *
  * @param {ProgressProps} props - The properties for the ProgressBar component.
- * @returns {JSX.Element} The rendered ProgressBar component.
+ * @returns {React.ReactElement} The rendered ProgressBar component.
  *
  * @example
  * ```jsx
@@ -107,7 +107,7 @@ export const ProgressBar = ({
     <div
       className={classNames(
         "fabric-progressbar",
-        "block bg-dimmed relative rounded font-bold overflow-hidden whitespace-nowrap",
+        "block bg-tint-50 relative rounded font-bold overflow-hidden whitespace-nowrap",
       )}
       style={{
         ...progressVar,

package/src/components/progress/ProgressCircle.tsx

@@ -56,7 +56,7 @@ const SizeMap: KeyValue = {
  * The component is customizable with size and color props.
  *
  * @param {ProgressProps} props - The properties for the ProgressCircle component.
- * @returns {JSX.Element} - A circular progress indicator.
+ * @returns {React.ReactElement} - A circular progress indicator.
  *
  * @example
  * ```jsx
@@ -100,7 +100,7 @@ export const ProgressCircle = ({
     >
       <svg
         viewBox="0 0 100 100"
-        className={classNames("absolute inset-0 w-full h-full stroke-dimmed")}
+        className={classNames("absolute inset-0 w-full h-full stroke-tint-500")}
       >
         <circle
           cx="50"

package/src/components/tabpanel/Tab.tsx

@@ -37,17 +37,12 @@ import {
   type TestProps,
   type TooltipProp,
 } from "../../types";
-import { Badge, getBadgeProps } from "../badge/Badge";
+import { getBadgeProps, getIconProps } from "../../utils";
+import { Badge } from "../badge/Badge";
 import { DropdownTool } from "../dropdown/DropdownTool";
-import { getIconProps, Icon, type IconProps } from "../icon/Icon";
+import { Icon, type IconProps } from "../icon/Icon";
 
-export interface TabProps
-  extends Partial<ChildrenProp>,
-    CssProp,
-    RefProp,
-    AriaProps,
-    TestProps,
-    TooltipProp {
+export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaProps, TestProps, TooltipProp {
   /**
    * tab id
    */
@@ -100,7 +95,7 @@ export interface TabProps
  * It also supports tooltips, active states, and click handling.
  *
  * @param {TabProps} props - The properties for the Tab component.
- * @returns {JSX.Element} The rendered Tab component.
+ * @returns {React.ReactElement} The rendered Tab component.
  *
  * @example
  * ```jsx
@@ -179,29 +174,15 @@ export const Tab = <Tag extends React.ElementType = "button">({
         {...aria}
       >
         {icon && <Icon className="flex-content p-2" {...getIconProps(icon)} />}
-        {!minimal && (
-          <label className="flex-initial truncate text-center px-1 py-1">
-            {label}
-          </label>
-        )}
+        {!minimal && <label className="flex-initial truncate text-center px-1 py-1">{label}</label>}
         {badge && (
-          <Badge
-            {...badgeProps}
-            placement={minimal ? "end" : ""}
-            className={classNames("me-1", badgeProps.className)}
-          />
-        )}
-        {actions && active && (
-          <DropdownTool className="bg-tint-50/20 me-1 z-5">
-            {actions}
-          </DropdownTool>
+          <Badge {...badgeProps} placement={minimal ? "end" : ""} className={classNames("me-1", badgeProps.className)} />
         )}
+        {actions && active && <DropdownTool className="bg-tint-50/20 me-1 z-5">{actions}</DropdownTool>}
         {onClose && (
           <span
             role="none"
-            className={classNames(
-              "cursor-pointer me-1 opacity-65 hover:opacity-90 pointer-events-auto",
-            )}
+            className={classNames("cursor-pointer me-1 opacity-65 hover:opacity-90 pointer-events-auto")}
             onClick={(e) => {
               onClose?.();
               e.stopPropagation();

package/src/components/tabpanel/TabPanel.tsx

@@ -21,12 +21,13 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { getValue } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
   Children,
   cloneElement,
-  useCallback,
   useEffect,
+  useEffectEvent,
   useMemo,
   useState,
 } from "react";
@@ -100,7 +101,7 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
  * It can be customized with different styles and behaviors to fit the needs of the application.
  *
  * @param {TabPanelProps} props - The properties for the TabPanel component.
- * @returns {JSX.Element} The rendered TabPanel component.
+ * @returns {React.ReactElement} The rendered TabPanel component.
  *
  * @example
  * ```jsx
@@ -153,7 +154,7 @@ export const TabPanel = ({
   }, [children]);
 
   useEffect(() => {
-    setActive(activeTab);
+    setActive(getValue(activeTab ?? tabs[0]?.props.id));
   }, [activeTab]);
 
   const activeTabPanel = useMemo(() => {
@@ -161,23 +162,20 @@ export const TabPanel = ({
       .children;
   }, [tabs, active]);
 
-  const handleClick = useCallback(
-    (id: string) => {
-      void Promise.resolve(onBeforeChange?.(id, active)).then((ret) => {
-        if (ret !== false) {
-          setActive(id);
-          onChange?.(id);
-        }
-      });
-    },
-    [onBeforeChange, onChange, active],
-  );
+  const handleClick = useEffectEvent((id: string) => {
+    void Promise.resolve(onBeforeChange?.(id, active)).then((ret) => {
+      if (ret !== false) {
+        setActive(id);
+        onChange?.(id);
+      }
+    });
+  });
 
   return (
     <div
       className={classNames(
         "fabric-tabPanel",
-        "area-content grid bg-base overflow-hidden",
+        "area-content grid bg-default overflow-hidden",
       )}
       data-orientation={orientation}
       data-variant={variant ?? "default"}

package/src/context/Global.tsx

@@ -22,21 +22,10 @@
  */
 
 import i18next from "i18next";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-  type ComponentType,
-  type FC,
-  type PropsWithChildren,
-} from "react";
+import { useCallback, useEffect, useState, type ComponentType, type FC, type PropsWithChildren } from "react";
 import { HotKeyWrapper } from "../hotkeys/HotKeyWrapper";
-import {
-  NotificationManager,
-  type NotificationManagerRef,
-} from "./NotificationCenter";
+import { NotificationManager, type NotificationManagerRef } from "./NotificationCenter";
+import { GlobalContext } from "./context";
 
 interface State {
   locale: string;
@@ -55,69 +44,24 @@ export interface GlobalProps extends PropsWithChildren {
   defaultColorScheme?: State["colorScheme"];
 }
 
-interface GlobalContextType {
-  /**
-   * change language locale
-   * @param locale
-   */
-  changeLocale: (locale: string) => string;
-  /**
-   * change date calendat
-   * @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;
-}
-
 const KEY_LOCALE = "ruf:locale";
 const KEY_CALENDAR = "ruf:calendar";
 const KEY_COLOR_SCHEME = "ruf:colorScheme";
 const systemLocale = () => {
-  return (
-    (typeof window !== "undefined"
-      ? localStorage.getItem(KEY_LOCALE)
-      : undefined) ?? "en"
-  );
+  return (typeof window !== "undefined" ? localStorage.getItem(KEY_LOCALE) : undefined) ?? "en";
 };
 const systemCalendar = () => {
-  return (
-    (typeof window !== "undefined"
-      ? (localStorage.getItem(KEY_CALENDAR) as AnyObject)
-      : undefined) ?? "gregorian"
-  );
+  return (typeof window !== "undefined" ? (localStorage.getItem(KEY_CALENDAR) as AnyObject) : undefined) ?? "gregorian";
 };
 const systemColorScheme = () => {
   const theme: AnyObject =
     typeof window !== "undefined"
-      ? localStorage.getItem(KEY_COLOR_SCHEME) ??
-        (window.matchMedia("(prefers-color-scheme: dark)").matches
-          ? "dark"
-          : "light")
+      ? (localStorage.getItem(KEY_COLOR_SCHEME) ??
+        (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"))
       : "light";
   return theme;
 };
 
-export const GlobalContext = createContext<GlobalContextType>(
-  {} as GlobalContextType,
-);
-
 /**
  * global context provider
  */
@@ -128,23 +72,16 @@ export const ApplicationProvider: FC<GlobalProps> = ({
   defaultCalendar,
   defaultColorScheme,
 }) => {
-  const [refNotifications, setNotificationRef] =
-    useState<NotificationManagerRef>({
-      closeAll: () => undefined,
-      showAlert: () => undefined as AnyObject,
-      showError: () => undefined as AnyObject,
-      showMessage: () => undefined as AnyObject,
-      showToast: () => undefined as AnyObject,
-    });
-  const [colorScheme, setColorScheme] = useState<State["colorScheme"]>(
-    defaultColorScheme ?? systemColorScheme(),
-  );
-  const [calendar, setCalendar] = useState<State["calendar"]>(
-    defaultCalendar ?? systemCalendar(),
-  );
-  const [locale, setLocale] = useState<State["locale"]>(
-    defaultLocale ?? systemLocale(),
-  );
+  const [refNotifications, setNotificationRef] = useState<NotificationManagerRef>({
+    closeAll: () => undefined,
+    showAlert: () => undefined as AnyObject,
+    showError: () => undefined as AnyObject,
+    showMessage: () => undefined as AnyObject,
+    showToast: () => undefined as AnyObject,
+  });
+  const [colorScheme, setColorScheme] = useState<State["colorScheme"]>(defaultColorScheme ?? systemColorScheme());
+  const [calendar, setCalendar] = useState<State["calendar"]>(defaultCalendar ?? systemCalendar());
+  const [locale, setLocale] = useState<State["locale"]>(defaultLocale ?? systemLocale());
 
   useEffect(() => {
     defaultColorScheme && setColorScheme(defaultColorScheme);
@@ -172,14 +109,12 @@ export const ApplicationProvider: FC<GlobalProps> = ({
   /** ***************** theme toggle *******************/
   const toggleColorScheme = useCallback(
     (forceTheme?: State["colorScheme"]) => {
-      const newTheme =
-        forceTheme ?? (colorScheme === "dark" ? "light" : "dark");
+      const newTheme = forceTheme ?? (colorScheme === "dark" ? "light" : "dark");
       setColorScheme(newTheme);
       localStorage.setItem(KEY_COLOR_SCHEME, newTheme);
       document.documentElement.dataset.colorScheme = newTheme;
       return newTheme;
     },
-
     [colorScheme],
   );
 
@@ -224,45 +159,3 @@ export const ApplicationProvider: FC<GlobalProps> = ({
     </GlobalContext.Provider>
   );
 };
-
-/**
- * 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/context/NotificationCenter.tsx

@@ -110,7 +110,6 @@ export const NotificationManager = ({ onLoad }: KeyValue) => {
         const handleClose = (b: boolean | string = false) => {
           clearTimeout(timerRef);
           setTimeout(() => {
-            // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
             delete map[key];
             update();
             resolve(b);