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

package/src/components/button/Button.tsx

@@ -26,8 +26,8 @@ import classNames from "classnames";
 import {
   Fragment,
   isValidElement,
-  useCallback,
   useEffect,
+  useEffectEvent,
   useMemo,
   useRef,
   useState,
@@ -50,10 +50,10 @@ import {
   type TestProps,
   type TooltipType,
 } from "../../types";
-import { getColor } from "../../utils";
+import { getBadgeProps, getColor, getIconProps } from "../../utils";
 import { AnimationIndicator } from "../animations/Animations";
-import { Badge, getBadgeProps } from "../badge/Badge";
-import { getIconProps, Icon, type IconProps } from "../icon/Icon";
+import { Badge } from "../badge/Badge";
+import { Icon, type IconProps } from "../icon/Icon";
 
 export interface BaseProps extends CssProp, AriaProps, RefProp, TestProps {
   /**
@@ -153,9 +153,7 @@ type ButtonTypeProps =
   | { children: string | React.ReactElement; "aria-label"?: string }
   | { children?: never; "aria-label": string };
 
-export type ButtonProps<Tag extends React.ElementType = "button"> = BaseProps &
-  ButtonTypeProps &
-  PolymorphicProps<Tag>;
+export type ButtonProps<Tag extends React.ElementType = "button"> = BaseProps & ButtonTypeProps & PolymorphicProps<Tag>;
 
 /**
  * A versatile button component that supports various styles, icons, and actions.
@@ -164,7 +162,7 @@ export type ButtonProps<Tag extends React.ElementType = "button"> = BaseProps &
  * It also includes features like after action tooltips, badges, and keyboard shortcuts.
  *
  * @param {ButtonProps} props - The properties for the Button component.
- * @returns {JSX.Element} The rendered Button component.
+ * @returns {React.ReactElement} The rendered Button component.
  *
  * @example
  * ```jsx
@@ -217,28 +215,18 @@ export const Button = <Tag extends React.ElementType = "button">({
   const [actionDone, setActionDone] = useState(false);
 
   // Handle click events
-  const clickHandler = useCallback(
-    (e: React.MouseEvent) => {
-      setBusy(true);
-      preventDefault && e.preventDefault();
-      stopPropagation && e.stopPropagation();
-      const ret = onClick?.(e);
-      void Promise.resolve(ret).then((b) => {
-        setBusy(false);
-        if (b !== false && actionMessage && showActionDoneEvent === "click") {
-          setActionDone(true);
-        }
-      });
-    },
-    [
-      onClick,
-      disabled,
-      preventDefault,
-      actionMessage,
-      showActionDoneEvent,
-      stopPropagation,
-    ],
-  );
+  const clickHandler = useEffectEvent((e: React.MouseEvent) => {
+    setBusy(true);
+    preventDefault && e.preventDefault();
+    stopPropagation && e.stopPropagation();
+    const ret = onClick?.(e);
+    void Promise.resolve(ret).then((b) => {
+      setBusy(false);
+      if (b !== false && actionMessage && showActionDoneEvent === "click") {
+        setActionDone(true);
+      }
+    });
+  });
 
   /** ***************** reset done state on timeout *******************/
   useEffect(() => {
@@ -255,10 +243,7 @@ export const Button = <Tag extends React.ElementType = "button">({
     "ActionButton done handler",
   );
 
-  const TooltipWrapper = useMemo(
-    () => (actionMessage ? Tooltip : Fragment),
-    [actionMessage, actionDone],
-  );
+  const TooltipWrapper = useMemo(() => (actionMessage ? Tooltip : Fragment), [actionMessage, actionDone]);
   const tooltipProps = useMemo(() => {
     if (actionDone && actionMessage) {
       return {
@@ -292,9 +277,7 @@ export const Button = <Tag extends React.ElementType = "button">({
       data-loading={busy || loading}
       data-disabled={disabled}
     >
-      {!disabled && hotKey && (
-        <HotKey keyCombo={hotKey} handler={hotKeyHandler.current} />
-      )}
+      {!disabled && hotKey && <HotKey keyCombo={hotKey} handler={hotKeyHandler.current} />}
       <TooltipWrapper {...tooltipProps}>
         <E
           ref={mergeRefs(ref, refEl)}
@@ -317,29 +300,16 @@ export const Button = <Tag extends React.ElementType = "button">({
           data-variant={variant}
           {...aria}
         >
-          {icon && (
-            <Icon
-              className={"fabric-buttonIcon"}
-              data-align={iconAlign}
-              {...getIconProps(icon)}
-            />
-          )}
-          {isValidElement(children) && (
-            <div className={"fabric-buttonChild"}>{children}</div>
-          )}
+          {icon && <Icon className={"fabric-buttonIcon"} data-align={iconAlign} {...getIconProps(icon)} />}
+          {isValidElement(children) && <div className={"fabric-buttonChild"}>{children}</div>}
           {isString(children) && (
-            <label
-              className={classNames("fabric-buttonLabel", "truncate")}
-              data-colored-icon={isObject(icon) && "bg" in icon}
-            >
+            <label className={classNames("fabric-buttonLabel", "truncate")} data-colored-icon={isObject(icon) && "bg" in icon}>
               {children}
             </label>
           )}
           {!isNil(badge) && <Badge {...badgeProps} />}
           {hotKey && children && <HotKeyLabel keyCombo={hotKey} />}
-          {altIcon && (
-            <Icon className={"fabric-altIcon"} icon={altIcon} rtlFlip />
-          )}
+          {altIcon && <Icon className={"fabric-altIcon"} icon={altIcon} rtlFlip />}
         </E>
       </TooltipWrapper>
       {actionDone && (

package/src/components/button/ButtonGroup.tsx

@@ -78,7 +78,7 @@ export interface ButtonGroupProps
  * such as toolbars, action groups, or navigation buttons.
  *
  * @param {ButtonGroupProps} props - The properties for the ButtonGroup component.
- * @returns {JSX.Element} The rendered ButtonGroup component.
+ * @returns {React.ReactElement} The rendered ButtonGroup component.
  *
  * @example
  * ```jsx

package/src/components/button/ConfirmButton.tsx

@@ -42,6 +42,7 @@ import {
   Fragment,
   useCallback,
   useEffect,
+  useEffectEvent,
   useMemo,
   useRef,
   useState,
@@ -87,7 +88,7 @@ export type ConfirmButtonProps = ExtendedProps & ButtonProps;
  * It also supports custom placement of the dialog, and can display an action message when the action is completed.
  *
  * @param {ConfirmButtonProps} props - The properties for the ConfirmButton component.
- * @returns {JSX.Element} The rendered ConfirmButton component.
+ * @returns {React.ReactElement} The rendered ConfirmButton component.
  *
  * @example
  * ```jsx
@@ -123,21 +124,18 @@ export const ConfirmButton = <Tag extends React.ElementType = "button">({
   const [busy, setBusy] = useState(false);
   const [actionDone, setActionDone] = useState(false);
 
-  const clickHandler = useCallback(
-    (e: boolean) => {
-      setBusy(e);
-      const ret = onClick?.(e);
-      if (e) {
-        void Promise.resolve(ret).then((b) => {
-          setBusy(false);
-          if (b !== false && actionMessage && showActionDoneEvent === "click") {
-            setActionDone(true);
-          }
-        });
-      }
-    },
-    [onClick, actionMessage, showActionDoneEvent],
-  );
+  const clickHandler = useEffectEvent((e: boolean) => {
+    setBusy(e);
+    const ret = onClick?.(e);
+    if (e) {
+      void Promise.resolve(ret).then((b) => {
+        setBusy(false);
+        if (b !== false && actionMessage && showActionDoneEvent === "click") {
+          setActionDone(true);
+        }
+      });
+    }
+  });
   useEffect(() => {
     if (actionDone) {
       const timer = setTimeout(() => setActionDone(false), 2000);
@@ -200,12 +198,17 @@ export const ConfirmButton = <Tag extends React.ElementType = "button">({
         data-dropdown-open={isOpen}
       />
       {isOpen && (
-        <FloatingPortal>
-          <FloatingFocusManager modal context={context}>
+        <FloatingPortal
+          root={
+            refs.domReference.current?.closest<HTMLElement>(".theme-base") ??
+            undefined
+          }
+        >
+          <FloatingFocusManager context={context}>
             <div
               data-color={color}
               className={classNames(
-                "select-none not-italic rounded-capped shadow-lg outline outline-muted bg-base",
+                "select-none not-italic rounded-capped shadow-lg outline outline-muted bg-default",
               )}
               ref={refs.setFloating}
               style={{
@@ -244,7 +247,7 @@ export const ConfirmButton = <Tag extends React.ElementType = "button">({
                 ref={arrowRef}
                 context={context}
                 strokeWidth={0.5}
-                className="fill-base stroke-muted"
+                className="fill-default stroke-muted"
               />
             </div>
           </FloatingFocusManager>

package/src/components/button/ToggleButtonGroup.tsx

@@ -99,7 +99,7 @@ export type ToggleButtonGroupProps<T> = BaseProps &
  * such as toggle switches, selection groups, or multi-select options.
  *
  * @param {ToggleButtonGroupProps} props - The properties for the ToggleButtonGroup component.
- * @returns {JSX.Element} The rendered ToggleButtonGroup component.
+ * @returns {React.ReactElement} The rendered ToggleButtonGroup component.
  *
  * @example
  * ```jsx

package/src/components/callout/Callout.tsx

@@ -22,28 +22,22 @@
  */
 
 import classNames from "classnames";
-import {
-  type AriaProps,
-  type ChildrenProp,
-  type ColorState,
-  type CssProp,
-  type TestProps,
-} from "../../types";
+import { type AriaProps, type ChildrenProp, type ColorState, type CssProp, type TestProps } from "../../types";
 import { Icon } from "../icon/Icon";
 
-export interface CalloutProps
-  extends AriaProps,
-    ChildrenProp,
-    CssProp,
-    TestProps {
+export interface CalloutProps extends AriaProps, ChildrenProp, CssProp, TestProps {
   /**
    * callout color
    */
-  color?: ColorState | "none";
+  color?: ColorState | "dimmed";
   /**
    * legend title
    */
   legend?: string | React.ReactElement;
+  /**
+   * legend class name
+   */
+  legendClassName?: string;
   /**
    * callout icon
    */
@@ -64,9 +58,9 @@ export interface CalloutProps
 
 // colors for different callout types
 const colors = {
-  none: "bg-base text-tint-900 border-tint-100",
-  default: "bg-tint-50/50 text-tint-800 border-tint-300",
-  muted: "bg-tint-50/50 text-muted border-muted",
+  default: "bg-default text-tint-900 border-tint-100",
+  dimmed: "bg-dimmed text-dimmed border-tint-200",
+  muted: "bg-muted text-muted border-tint-200",
   primary: "bg-primary-50/50 text-primary-800 border-primary-300",
   accent: "bg-accent-50/50 text-accent-800 border-accent-300",
   info: "bg-info-50/50 text-info-800 border-info-300",
@@ -83,7 +77,7 @@ const colors = {
  * such as alerts, notifications, or important messages.
  *
  * @param {CalloutProps} props - The properties for the Callout component.
- * @returns {JSX.Element} The rendered Callout component.
+ * @returns {React.ReactElement} The rendered Callout component.
  *
  * @example
  * ```jsx
@@ -105,6 +99,7 @@ export const Callout = ({
   children,
   color = "default",
   legend,
+  legendClassName,
   title,
   icon,
   border,
@@ -115,7 +110,7 @@ export const Callout = ({
   return (
     <fieldset
       className={classNames(
-        "block rounded-capped border max-w-full relative overflow-hidden mb-4",
+        "block rounded-capped border max-w-full relative overflow-hidden",
         colors[color],
         className,
         border === "dashed" && "border-dashed",
@@ -124,7 +119,7 @@ export const Callout = ({
       {...aria}
     >
       {legend && (
-        <legend className="px-2 mx-4 font-medium" data-ref="calloutLegend">
+        <legend className={classNames("px-2 mx-4 font-medium", legendClassName)} data-ref="calloutLegend">
           {legend}
         </legend>
       )}

package/src/components/card/Card.tsx

@@ -24,7 +24,7 @@
 import classNames from "classnames";
 import {
   Children,
-  useCallback,
+  useEffectEvent,
   useMemo,
   type DragEvent,
   type MouseEventHandler,
@@ -37,17 +37,18 @@ import {
   type HeadFootProps,
 } from "../../core/headfoot/HeadFoot";
 import {
-  type PolymorphicProps,
   type AriaProps,
   type ChildrenProp,
   type CssProp,
+  type PolymorphicProps,
   type RefProp,
   type TestProps,
 } from "../../types";
 import { nodeCheck } from "../../utils";
 
 interface BaseProps
-  extends CssProp,
+  extends
+    CssProp,
     AriaProps,
     TestProps,
     RefProp<HTMLDivElement>,
@@ -106,7 +107,7 @@ export type CardProps<Tag extends React.ElementType = "div"> = BaseProps &
  * It can be styled with custom CSS classes and supports features like selection indication and drag-and-drop functionality.
  *
  * @param {CardProps} props - The properties for the Card component.
- * @returns {JSX.Element} The rendered Card component.
+ * @returns {React.ReactElement} The rendered Card component.
  *
  * @example
  * ```jsx
@@ -161,13 +162,10 @@ export const Card = <Tag extends React.ElementType = "div">({
     );
   }, [children]);
 
-  const handleDragStart = useCallback(
-    (event: DragEvent) => {
-      dragKey && event.dataTransfer?.setData(dragKey, JSON.stringify(dragData));
-      dragKey && onDragStart?.(event, dragKey, dragData);
-    },
-    [onDragStart, dragKey, dragData],
-  );
+  const handleDragStart = useEffectEvent((event: DragEvent) => {
+    dragKey && event.dataTransfer?.setData(dragKey, JSON.stringify(dragData));
+    dragKey && onDragStart?.(event, dragKey, dragData);
+  });
 
   const E = as ?? "div";
   return (

package/src/components/card/CardCover.tsx

@@ -54,7 +54,7 @@ const scheme = {
  * It can be used to create visually appealing card layouts with media content.
  *
  * @param {CardCoverProps} props - The properties for the CardCover component.
- * @returns {JSX.Element} The rendered CardCover component.
+ * @returns {React.ReactElement} The rendered CardCover component.
  *
  * @example
  * ```jsx

package/src/components/card/FlipContent.tsx

@@ -48,7 +48,7 @@ export interface Props extends ChildrenProp, RefProp<FlipContentRef> {
  * The `flipCard` method can be called to toggle the visibility of the back content.
  *
  * @param {Props} props - The properties for the FlipContent component.
- * @returns {JSX.Element} The rendered FlipContent component.
+ * @returns {React.ReactElement} The rendered FlipContent component.
  *
  * @example
  * ```jsx
@@ -80,7 +80,7 @@ export const FlipContent = ({ ref, children }: Props) => {
           cloneElement(child, {
             className: classNames(
               child.props?.className ?? "",
-              idx === 0 ? "bg-base relative" : "bg-base absolute inset-0",
+              idx === 0 ? "bg-content relative" : "bg-content absolute inset-0",
             ),
             "data-card-flip-face": idx === 0 ? "front" : "back",
           } as AnyObject),

package/src/components/chip/Chip.tsx

@@ -22,7 +22,7 @@
  */
 
 import classNames from "classnames";
-import { useCallback, type ReactElement } from "react";
+import { useEffectEvent, type ReactElement } from "react";
 import { useMemoDebugger } from "../../hooks/useEffectDebugger";
 import {
   type AriaProps,
@@ -35,15 +35,10 @@ import {
   type SizeType,
   type TestProps,
 } from "../../types";
-import { getColor } from "../../utils";
-import { getIconProps, Icon, type IconProps } from "../icon/Icon";
+import { getColor, getIconProps } from "../../utils";
+import { Icon, type IconProps } from "../icon/Icon";
 
-export interface ChipProps
-  extends CssProp,
-    AriaProps,
-    TestProps,
-    ChildProp<string | ReactElement>,
-    RefProp<HTMLDivElement> {
+export interface ChipProps extends CssProp, AriaProps, TestProps, ChildProp<string | ReactElement>, RefProp<HTMLDivElement> {
   /**
    * chip size
    */
@@ -107,7 +102,7 @@ const SizeMap: KeyValue<string> = {
  * It can also include an icon and a remove button, making it versatile for different use cases.
  *
  * @param {ChipProps} props - The properties for the Chip component.
- * @returns {JSX.Element} The rendered Chip component.
+ * @returns {React.ReactElement} The rendered Chip component.
  *
  * @example
  * ```jsx
@@ -155,22 +150,16 @@ export const Chip = <Tag extends React.ElementType = "div">({
     "Chip styles",
   );
 
-  const clickHandler = useCallback(
-    (e: React.MouseEvent) => {
-      preventDefault && e.preventDefault();
-      stopPropagation && e.stopPropagation();
-      onClick?.(e);
-    },
-    [onClick, preventDefault, stopPropagation],
-  );
+  const clickHandler = useEffectEvent((e: React.MouseEvent) => {
+    preventDefault && e.preventDefault();
+    stopPropagation && e.stopPropagation();
+    onClick?.(e);
+  });
 
-  const removeHandler = useCallback(
-    (e: React.MouseEvent) => {
-      if (stopPropagation) e.stopPropagation();
-      onRemove?.(e);
-    },
-    [onRemove, stopPropagation],
-  );
+  const removeHandler = useEffectEvent((e: React.MouseEvent) => {
+    if (stopPropagation) e.stopPropagation();
+    onRemove?.(e);
+  });
 
   const E = as ?? "div";
   return (
@@ -201,10 +190,7 @@ export const Chip = <Tag extends React.ElementType = "div">({
         />
       )}
       {children && (
-        <label
-          data-ref="chipLabel"
-          className={classNames("fabric-chipLabel", "truncate flex-1")}
-        >
+        <label data-ref="chipLabel" className={classNames("fabric-chipLabel", "truncate flex-1")}>
           {children}
         </label>
       )}
@@ -213,10 +199,7 @@ export const Chip = <Tag extends React.ElementType = "div">({
           role="none"
           data-ref="chipRemove"
           data-inner-cliackable
-          className={classNames(
-            "fabric-chipRemove",
-            "cursor-pointer pe-1 opacity-65 hover:opacity-90",
-          )}
+          className={classNames("fabric-chipRemove", "cursor-pointer pe-1 opacity-65 hover:opacity-90")}
           onClick={removeHandler}
         >
           &times;

package/src/components/collapsable/Collapsable.tsx

@@ -101,7 +101,7 @@ export interface CollapsableProps
  * This component is ideal for creating accordions, expandable panels, or sections that can be toggled by the user.
  *
  * @param {CollapsableProps} props - The properties for the Collapsable component.
- * @returns {JSX.Element} The rendered Collapsable component.
+ * @returns {React.ReactElement} The rendered Collapsable component.
  *
  * @example
  * ```jsx
@@ -167,7 +167,7 @@ export const Collapsable = ({
           "fabric-collapsableHead",
           "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70",
           headerClassName,
-          stickyHeader && "bg-base sticky top-0 py-1 z-10",
+          stickyHeader && "bg-default sticky top-0 py-1 z-10",
           iconAlign === "end" ? "flex-row-reverse" : "flex-row",
         )}
         onClick={() => !disabled && setOpenState(!openState)}

package/src/components/divider/Divider.tsx

@@ -61,7 +61,7 @@ export interface DividerProps extends CssProp, Partial<ChildProp> {
  * styles, and alignment options.
  *
  * @param {DividerProps} props - The properties for the Divider component.
- * @returns {JSX.Element} The rendered Divider component.
+ * @returns {React.ReactElement} The rendered Divider component.
  *
  * @example
  * ```jsx