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

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

package/src/components/dropdown/Dropdown.tsx

@@ -36,6 +36,7 @@ import {
   useClick,
   useDismiss,
   useFloating,
+  useFloatingNodeId,
   useFloatingTree,
   useHover,
   useInteractions,
@@ -43,16 +44,7 @@ import {
 } from "@floating-ui/react";
 import { mergeRefs } from "@react-fabric/utilities";
 import classNames from "classnames";
-import {
-  Children,
-  Fragment,
-  cloneElement,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { Children, Fragment, cloneElement, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
 import { type ChildProp, type RefProp } from "../../types";
 
 export interface DropdownProps extends RefProp {
@@ -86,9 +78,13 @@ export interface DropdownProps extends RefProp {
    */
   dropdownClassName?: string;
   /**
-   * dropdown event
+   * dropdown trigger event, default is click
+   */
+  trigger?: "click" | "hover";
+  /**
+   * portal root element
    */
-  dropdownEvent?: "click" | "hover";
+  root?: HTMLElement;
   /**
    * open handler
    */
@@ -108,21 +104,21 @@ const DropdownElement = ({
   placement = "bottom",
   onClose,
   onOpen,
+  root,
   disabled,
   plainDropdown,
-  dropdownEvent,
+  trigger = "click",
   dropdownClassName,
 }: DropdownProps) => {
   const arrowRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
   const tree = useFloatingTree();
+  const nodeId = useFloatingNodeId();
 
-  const [anchor, panel] = useMemo<AnyObject[]>(
-    () => Children.toArray(children as AnyObject),
-    [children],
-  );
+  const [anchor, panel] = useMemo<AnyObject[]>(() => Children.toArray(children as AnyObject), [children]);
 
   const { refs, floatingStyles, context } = useFloating({
+    nodeId: `dropdown-${nodeId}`,
     open: isOpen,
     onOpenChange: (open, _, reason) => {
       if (reason === "reference-press") return;
@@ -143,50 +139,44 @@ const DropdownElement = ({
     ],
   });
 
-  const handler = dropdownEvent === "hover" ? useHover : useClick;
+  const handler = trigger === "hover" ? useHover : useClick;
   const click = handler(context, {
     enabled: !disabled,
     handleClose: safePolygon({ blockPointerEvents: true }),
   });
+
   const dismiss = useDismiss(context, {
     referencePress: true,
   });
 
-  const { getReferenceProps, getFloatingProps } = useInteractions([
-    dismiss,
-    click,
-  ]);
+  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, click]);
 
   const minWidth = useMemo(() => {
     if (fitToParent) {
       const el: HTMLElement =
         // @ts-expect-error ignore
-        refs.reference.current?.closest('[data-ref="buttonGroup"]') ??
-        refs.reference.current;
+        refs.reference.current?.closest('[data-ref="buttonGroup"]') ?? refs.reference.current;
       return el?.offsetWidth;
     }
     return undefined;
   }, [refs, isOpen, fitToParent]);
 
-  const tryClosing = useCallback(
-    (e: React.MouseEvent) => {
-      if (
-        !refs.floating.current?.contains(
-          (e.target as HTMLElement).closest("[data-dropdown-dismiss='false']"),
-        ) &&
-        (!!closeOnClick ||
-          refs.floating.current?.contains(
-            (e.target as HTMLElement).closest("[data-dropdown-dismiss='true']"),
-          ))
-      ) {
-        setTimeout(() => {
-          setIsOpen(false);
-          onClose?.();
-        }, 100);
-      }
-    },
-    [closeOnClick, onClose],
-  );
+  const dismissDropdown = useEffectEvent(() => {
+    setIsOpen(false);
+    onClose?.();
+  });
+
+  const tryClosing = useEffectEvent((e: React.MouseEvent) => {
+    if (
+      !refs.floating.current?.contains((e.target as HTMLElement).closest("[data-dropdown-dismiss='false']")) &&
+      (!!closeOnClick || refs.floating.current?.contains((e.target as HTMLElement).closest("[data-dropdown-dismiss='true']")))
+    ) {
+      setTimeout(() => {
+        setIsOpen(false);
+        onClose?.();
+      }, 100);
+    }
+  });
 
   const innerRef = useMemo(
     () => mergeRefs(ref, anchor.props.ref, refs.setReference),
@@ -211,8 +201,7 @@ const DropdownElement = ({
     };
   }, [tree]);
 
-  if (!anchor || !panel)
-    throw Error("Dropdown requires two elements [Anchor, Panel]");
+  if (!anchor || !panel) throw Error("Dropdown requires two elements [Anchor, Panel]");
 
   return (
     <Fragment>
@@ -229,14 +218,9 @@ const DropdownElement = ({
         ref: innerRef,
       })}
       {isOpen && (
-        <FloatingPortal
-          root={
-            refs.domReference.current?.closest<HTMLElement>(".theme-base") ??
-            undefined
-          }
-        >
+        <FloatingPortal root={root ?? refs.domReference.current?.closest<HTMLElement>(".theme-base") ?? undefined}>
           <FloatingOverlay />
-          <FloatingFocusManager context={context} modal>
+          <FloatingFocusManager context={context} closeOnFocusOut>
             <div
               ref={refs.setFloating}
               style={{
@@ -254,20 +238,22 @@ const DropdownElement = ({
                 className={classNames(
                   "fabric-dropdownBody",
                   dropdownClassName,
-                  !plainDropdown && "shadow-lg bg-base ring-1 ring-tint-100",
-                  "rounded-capped overflow-auto scroll-thin grid max-h-[70vh]",
+                  !plainDropdown && "shadow-lg bg-default ring-1 ring-tint-100",
+                  "rounded-capped grid max-h-[70vh]",
                 )}
                 onMouseUpCapture={tryClosing}
               >
-                {panel}
+                {cloneElement(
+                  panel,
+                  typeof panel.type === "string"
+                    ? {}
+                    : {
+                        dismiss: dismissDropdown,
+                      },
+                )}
               </div>
               {showArrow && (
-                <FloatingArrow
-                  ref={arrowRef}
-                  context={context}
-                  strokeWidth={0.5}
-                  className="fill-base stroke-dimmed"
-                />
+                <FloatingArrow ref={arrowRef} context={context} strokeWidth={0.5} className="fill-default stroke-dimmed" />
               )}
             </div>
           </FloatingFocusManager>
@@ -308,11 +294,17 @@ const DropdownElement = ({
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-dropdown--docs} for more details.
  * @see {@link https://floating-ui.com/docs/react} for more details on Floating UI.
  */
-export const Dropdown = (props: DropdownProps) => (
-  <FloatingTree>
-    <DropdownElement {...props} />
-  </FloatingTree>
-);
+export const Dropdown = (props: DropdownProps) => {
+  const tree = useFloatingTree();
+  if (tree) {
+    return <DropdownElement {...props} />;
+  }
+  return (
+    <FloatingTree>
+      <DropdownElement {...props} />
+    </FloatingTree>
+  );
+};
 
 /**
  * A component that allows dismissing the dropdown when clicked.
@@ -323,10 +315,7 @@ export const Dropdown = (props: DropdownProps) => (
  * @param dismiss - Whether to dismiss the dropdown on click (default: true).
  * @returns JSX Element
  */
-export const DropdownDismiss = ({
-  children,
-  dismiss = true,
-}: ChildProp & { dismiss?: boolean }) => {
+export const DropdownDismiss = ({ children, dismiss = true }: ChildProp & { dismiss?: boolean }) => {
   const tree = useFloatingTree();
 
   return (
@@ -334,9 +323,7 @@ export const DropdownDismiss = ({
       role="none"
       className="contents"
       data-dropdown-dismiss={dismiss}
-      onMouseUp={() =>
-        dismiss && setTimeout(() => tree?.events.emit("close"), 50)
-      }
+      onMouseUp={() => dismiss && setTimeout(() => tree?.events.emit("close"), 50)}
     >
       {children}
     </div>

package/src/components/dropdown/DropdownTool.tsx

@@ -37,7 +37,7 @@ import { Dropdown, type DropdownProps } from "./Dropdown";
  * @param {string} icon - The icon to be displayed in the dropdown.
  * @param {boolean} groupHover - If true, the dropdown will only be visible when the parent group is hovered.
  * @param {DropdownProps} props - Additional properties for the dropdown.
- * @returns {JSX.Element} The rendered DropdownTool component.
+ * @returns {React.ReactElement} The rendered DropdownTool component.
  *
  * @example
  * ```jsx

package/src/components/empty/EmptyContent.tsx

@@ -41,11 +41,11 @@ export interface EmptyContentProps
   /**
    * empty title
    */
-  title?: string | JSX.Element;
+  title?: string | React.ReactElement;
   /**
    * empty message
    */
-  message: string | JSX.Element;
+  message: string | React.ReactElement;
   /**
    * content size
    */
@@ -113,7 +113,7 @@ const DefaultIcon = () => (
  * such as in empty states of lists, tables, or other content areas.
  *
  * @param {EmptyContentProps} props - The properties for the EmptyContent component.
- * @returns {JSX.Element} The rendered EmptyContent component.
+ * @returns {React.ReactElement} The rendered EmptyContent component.
  *
  * @example
  * ```jsx