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

package/src/components/menu/MenuItem.tsx

@@ -29,8 +29,9 @@ import { HotKey } from "../../hotkeys/HotKey";
 import { HotKeyLabel } from "../../hotkeys/HotKeyLabel";
 import { Tooltip } from "../../overlays";
 import { type PolymorphicProps } from "../../types";
-import { Badge, getBadgeProps } from "../badge/Badge";
-import { getIconProps, Icon } from "../icon/Icon";
+import { getBadgeProps, getIconProps } from "../../utils";
+import { Badge } from "../badge/Badge";
+import { Icon } from "../icon/Icon";
 import { type MenuItemProps } from "./types";
 
 /**
@@ -92,23 +93,13 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
     if (minimal && !path) {
       path = iconToken(label);
     }
-    return (
-      <Icon
-        className={classNames("fabric-menuIcon", minimal && "minimal")}
-        {...getIconProps(path ?? "")}
-      />
-    );
+    return <Icon className={classNames("fabric-menuIcon", minimal && "minimal")} {...getIconProps(path ?? "")} />;
   }, [icon, minimal, label]);
 
   const Wrapper = useCallback(
     ({ children, ...rest }: AnyObject) => {
       return minimal ? (
-        <Tooltip
-          content={label}
-          placement="right"
-          disabled={childOpen}
-          {...rest}
-        >
+        <Tooltip content={label} placement="right" disabled={childOpen} {...rest}>
           {children}
         </Tooltip>
       ) : (
@@ -122,9 +113,7 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
     return (
       <div className="flex flex-nowrap text-start items-center">
         {iconEl}
-        {!minimal && (
-          <label className="flex-1 pe-4 py-[0.375em] truncate">{label}</label>
-        )}
+        {!minimal && <label className="flex-1 pe-4 py-[0.375em] truncate">{label}</label>}
         {appendLabel && (
           <span
             className={classNames(
@@ -138,16 +127,10 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
           </span>
         )}
         {badge && (
-          <Badge
-            {...badgeProps}
-            placement={minimal ? "end" : ""}
-            className={classNames("me-1", badgeProps.className)}
-          />
+          <Badge {...badgeProps} placement={minimal ? "end" : ""} className={classNames("me-1", badgeProps.className)} />
         )}
         {hotKey && <HotKeyLabel keyCombo={hotKey} />}
-        {!minimal && altIcon && (
-          <Icon className="text-muted px-1" icon={altIcon} rtlFlip />
-        )}
+        {!minimal && altIcon && <Icon className="text-muted px-1" icon={altIcon} rtlFlip />}
       </div>
     );
   }, [iconEl, minimal, appendLabel, label, badge, badgeProps, hotKey, active]);
@@ -177,9 +160,7 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
         }}
         {...(minimal ? {} : aria)}
       >
-        {!disabled && hotKey && (
-          <HotKey keyCombo={hotKey} handler={() => elRef.current?.click?.()} />
-        )}
+        {!disabled && hotKey && <HotKey keyCombo={hotKey} handler={() => elRef.current?.click?.()} />}
         {menuLabel}
       </E>
     </Wrapper>

package/src/components/menu/types.ts

@@ -45,7 +45,7 @@ export interface MenuItemProps extends CssProp, AriaProps, TestProps {
   /**
    * append label badge text
    */
-  appendLabel?: JSX.Element | string | number | false;
+  appendLabel?: React.ReactElement | string | number | false;
   /**
    * menu color
    */

package/src/components/meter/Meter.tsx

@@ -45,7 +45,7 @@ export interface MeterProps extends CssProp, AriaProps, TestProps {
  * The component can also display a label showing the percentage value.
  *
  * @param {MeterProps} props - The properties for the Meter component.
- * @returns {JSX.Element} The rendered Meter component.
+ * @returns {React.ReactElement} The rendered Meter component.
  *
  * @example
  * ```jsx

package/src/components/navigator/Navigator.tsx

@@ -23,7 +23,7 @@
 
 import { isEmpty } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { useCallback } from "react";
+import { useEffectEvent } from "react";
 import { HotKey } from "../../hotkeys/HotKey";
 import {
   type AriaProps,
@@ -36,10 +36,7 @@ import {
 import { Icon } from "../icon/Icon";
 
 export interface NavigatorProps
-  extends CssProp,
-    AriaProps,
-    TestProps,
-    Partial<ChildProp> {
+  extends CssProp, AriaProps, TestProps, Partial<ChildProp> {
   /**
    * item list length (ignore to enable infinite navigation)
    */
@@ -65,7 +62,7 @@ export interface NavigatorProps
  * It includes previous and next buttons, and supports keyboard navigation.
  *
  * @param {NavigatorProps} props - The properties for the Navigator component.
- * @returns {JSX.Element} The rendered Navigator component.
+ * @returns {React.ReactElement} The rendered Navigator component.
  *
  * @example
  * ```jsx
@@ -92,13 +89,11 @@ export const Navigator = ({
   disableKeyHandlers,
   ...aria
 }: NavigatorProps) => {
-  const navPrev = useCallback(
+  const navPrev = useEffectEvent(
     () => (isEmpty(current) || current !== 0) && onNavigate(-1),
-    [onNavigate, current, length],
   );
-  const navNext = useCallback(
+  const navNext = useEffectEvent(
     () => (isEmpty(current) || current + 1 < (length ?? 0)) && onNavigate(+1),
-    [onNavigate, current, length],
   );
   return (
     <div

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

@@ -26,8 +26,8 @@ import classNames from "classnames";
 import {
   Children,
   cloneElement,
-  useCallback,
   useEffect,
+  useEffectEvent,
   useMemo,
   useState,
 } from "react";
@@ -101,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
@@ -162,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"}