@react-fabric/core 1.0.0-beta.8 → 1.0.1

package/src/components/divider/Divider.tsx

@@ -21,21 +21,17 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import classNames from "classnames";
-import { useCallback } from "react";
-import {
-  type CssProp,
-  type ChildProp,
-  type ColorType,
-  type PaletteType,
-} from "../../types";
-import { getBgClass, getBorderClass, getColorClass } from "../../utils";
+import { cn } from "@react-fabric/utilities";
+import type { ChildProp, CssPropWithMap, CustomColors } from "../../types";
+import { getColor } from "../../utils";
 
-export interface DividerProps extends CssProp, Partial<ChildProp> {
-  /**
-   * apply text bg
-   */
-  fill?: boolean;
+export interface DividerProps
+  extends
+    CssPropWithMap<{
+      root: string;
+      label: string;
+    }>,
+    Partial<ChildProp> {
   /**
    * vertical rule
    */
@@ -43,63 +39,88 @@ export interface DividerProps extends CssProp, Partial<ChildProp> {
   /**
    * rule color
    */
-  color?: ColorType | PaletteType | "tint";
+  color?: CustomColors;
   /**
    * text alignment
    */
   align?: "start" | "end" | "center";
+  /**
+   * divider style
+   */
+  style?: "solid" | "dashed" | "dotted";
 }
 
-export const Divider = ({
-  children,
+const Rule = ({
+  flex,
+  className,
   color,
   vertical,
-  fill,
-  align = "start",
-  className,
-}: DividerProps) => {
-  const Rule = useCallback(
-    ({ flex, className }: KeyValue) => {
-      return (
-        <hr
-          style={{ flex }}
-          className={classNames(
-            className,
-            vertical && "vertical",
-            !flex && "self-stretch",
-            vertical ? "mx-1" : "my-1",
-            color && getBorderClass(color + "-200"),
-          )}
-        />
-      );
-    },
-    [color, vertical],
+  style,
+}: {
+  flex?: string;
+  className: string;
+  color: DividerProps["color"];
+  vertical: DividerProps["vertical"];
+  style: DividerProps["style"];
+}) => {
+  return (
+    <hr
+      style={{ flex, borderColor: getColor(color), borderStyle: style }}
+      className={cn(
+        className,
+        vertical && "vertical",
+        !flex && "self-stretch",
+        vertical ? "fabric-divider--vertical" : "fabric-divider--horizontal",
+      )}
+    />
   );
+};
 
+/**
+ * A component that represents a visual divider between content.
+ * It can be used to separate sections of content, with optional text labels.
+ * It supports both horizontal and vertical orientations, customizable colors,
+ * styles, and alignment options.
+ *
+ * @example
+ * ```jsx
+ * <Divider color="primary" align="center" style="dashed">
+ *   Divider Text
+ * </Divider>
+ * // Renders a horizontal divider with primary color, centered text, and dashed style.
+ * ```
+ */
+export function Divider({ children, color, vertical, style, align = "start", className, classNames }: DividerProps) {
   return children ? (
-    <div
-      className={classNames(
-        "flex flex-nowrap items-center",
-        vertical && "flex-col",
-        className,
-      )}
-    >
-      <Rule flex={align === "start" ? "0 0 1rem" : "1 1 1em"} />
+    <div className={cn("flex flex-nowrap items-center fabric-divider", vertical && "flex-col")}>
+      <Rule
+        className={cn(className, classNames?.root)}
+        style={style}
+        color={color}
+        vertical={vertical}
+        flex={align === "start" ? "0 0 1rem" : "1 1 1em"}
+      />
       <div
-        className={classNames(
-          "px-2 whitespace-nowrap",
-          vertical ? "mx-1" : "my-1",
-          fill && getBgClass((color ?? "tint") + "-200"),
-          !fill && getColorClass((color ?? "tint") + "-600"),
+        className={cn(
+          "px-2 whitespace-nowrap text-dimmed",
+          vertical ? "fabric-divider-label--vertical" : "fabric-divider-label--horizontal",
+          classNames?.label,
           "rounded-full text-[0.75em]",
           vertical && "origin-center -rotate-90 z-1",
         )}
+        style={{ color: getColor(color) }}
       >
         {children}
       </div>
-      <Rule flex={align === "end" ? "0 0 1rem" : "1 1 1em"} />
+      <Rule
+        className={cn(className, classNames?.root)}
+        style={style}
+        color={color}
+        vertical={vertical}
+        flex={align === "end" ? "0 0 1rem" : "1 1 1em"}
+      />
     </div>
   ) : (
-    <Rule className={className} />
+    <Rule style={style} color={color} vertical={vertical} className={cn(className, classNames?.root)} />
   );
-};
+}

package/src/components/dropdown/Dropdown.tsx

@@ -21,6 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import type { Placement } from "@floating-ui/react";
 import {
   FloatingArrow,
   FloatingFocusManager,
@@ -36,25 +37,14 @@ import {
   useClick,
   useDismiss,
   useFloating,
+  useFloatingNodeId,
   useFloatingTree,
   useHover,
   useInteractions,
-  type Placement,
 } 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 { type ChildProp, type RefProp } from "../../types";
-import classes from "./Dropdown.module.css";
+import { cn, mergeRefs } from "@react-fabric/utilities";
+import { Children, cloneElement, useEffect, useMemo, useRef, useState } from "react";
+import type { ChildProp, RefProp } from "../../types";
 
 export interface DropdownProps extends RefProp {
   children: [React.ReactNode, React.ReactNode];
@@ -85,11 +75,15 @@ export interface DropdownProps extends RefProp {
   /**
    * dropdown body className
    */
-  dropdownClassName?: string;
+  className?: string;
+  /**
+   * dropdown trigger event, default is click
+   */
+  trigger?: "click" | "hover";
   /**
-   * dropdown event
+   * portal root element
    */
-  dropdownEvent?: "click" | "hover";
+  root?: HTMLElement;
   /**
    * open handler
    */
@@ -100,7 +94,7 @@ export interface DropdownProps extends RefProp {
   onClose?: () => void;
 }
 
-const DropdownElement = ({
+function DropdownComponent({
   ref,
   children,
   showArrow,
@@ -109,21 +103,24 @@ const DropdownElement = ({
   placement = "bottom",
   onClose,
   onOpen,
+  root,
   disabled,
   plainDropdown,
-  dropdownEvent,
-  dropdownClassName,
-}: DropdownProps) => {
+  trigger = "click",
+  className,
+}: 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<Array<React.ReactElement<KeyValue>>>(() => {
+    // eslint-disable-next-line @eslint-react/no-children-to-array
+    return Children.toArray(children) as Array<React.ReactElement<KeyValue>>;
+  }, [children]);
 
   const { refs, floatingStyles, context } = useFloating({
+    nodeId: `dropdown-${nodeId}`,
     open: isOpen,
     onOpenChange: (open, _, reason) => {
       if (reason === "reference-press") return;
@@ -134,9 +131,9 @@ const DropdownElement = ({
     placement,
     whileElementsMounted: autoUpdate,
     middleware: [
+      offset(showArrow ? 9 : 4),
       shift({ padding: 8 }),
       flip(),
-      showArrow && offset(9),
       showArrow &&
         arrow({
           element: arrowRef,
@@ -144,58 +141,48 @@ 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(() => {
+  const [minWidth, minHeight] = useMemo(() => {
     if (fitToParent) {
-      const el: HTMLElement =
-        // @ts-expect-error ignore
-        refs.reference.current?.closest('[data-ref="buttonGroup"]') ??
-        refs.reference.current;
-      return el?.offsetWidth;
+      const ref = refs.reference.current as HTMLElement;
+      const el = (ref?.closest('[data-ref="buttonGroup"]') ?? refs.reference.current) as HTMLElement;
+      return [el?.offsetWidth, el?.offsetHeight];
     }
-    return undefined;
+    return [undefined, undefined];
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
   }, [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 tryClosing = (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),
-    [ref, anchor.props.ref, refs.setReference],
+    () => mergeRefs(ref, anchor.props?.ref, (el: HTMLDivElement) => refs.setReference(el)),
+    [ref, anchor.props.ref, refs],
   );
 
   useEffect(() => {
-    disabled && setIsOpen(false);
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
+    if (disabled) setIsOpen(false);
   }, [disabled]);
 
   useEffect(() => {
@@ -212,86 +199,104 @@ 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>
+    <>
       {cloneElement(anchor, {
         ...getReferenceProps({
           onClick: (e) => {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call
             anchor.props.onClick?.(e);
             e.stopPropagation();
+            e.preventDefault();
           },
         }),
+        "data-inner-clickable": "true",
         "data-dropdown-open": isOpen ? true : undefined,
         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={(el) => {
-                refs.setFloating(el);
-                el
-                  ?.querySelector<HTMLElement>("input,textarea,button")
-                  ?.focus();
-              }}
+              ref={(el) => refs.setFloating(el)}
               style={{
-                minWidth,
                 zIndex: "var(--z-popover)",
                 ...floatingStyles,
               }}
-              data-testid="dropdown-body"
+              data-ref="dropdownBody"
               {...getFloatingProps({
                 onClick: (e) => e.stopPropagation(),
               })}
             >
               <div
                 role="none"
-                className={classNames(
-                  classes.dropdownBody,
-                  dropdownClassName,
-                  !plainDropdown &&
-                    "shadow-lg shadow-base bg-base ring-1 ring-tint-100",
-                  "rounded-capped overflow-auto scroll-thin grid max-h-[70vh]",
+                className={cn(
+                  "fabric-dropdownBody",
+                  className,
+                  !plainDropdown && "shadow-lg bg-default ring-1 ring-tint-200",
+                  "rounded-capped grid max-h-[60vh] scroll-thin",
                 )}
+                style={{
+                  minWidth,
+                  minHeight,
+                }}
                 onMouseUpCapture={tryClosing}
               >
                 {panel}
               </div>
               {showArrow && (
-                <FloatingArrow
-                  ref={arrowRef}
-                  context={context}
-                  strokeWidth={0.5}
-                  className="fill-base stroke-muted"
-                />
+                <FloatingArrow ref={arrowRef} context={context} strokeWidth={0.5} className="fill-default stroke-soft" />
               )}
             </div>
           </FloatingFocusManager>
         </FloatingPortal>
       )}
-    </Fragment>
+    </>
   );
-};
+}
 
-export const Dropdown = (props: DropdownProps) => (
-  <FloatingTree>
-    <DropdownElement {...props} />
-  </FloatingTree>
-);
+/**
+ * A component that displays a dropdown menu with an anchor and a panel.
+ * It supports various features such as placement, arrow display, click handling,
+ * and event handling for opening and closing the dropdown.
+ *
+ * @example
+ * ```jsx
+ * <Dropdown
+ *   placement="bottom"
+ *   showArrow
+ *   closeOnClick
+ *   fitToParent
+ *   onOpen={() => console.log("Dropdown opened")}
+ *   onClose={() => console.log("Dropdown closed")}
+ * >
+ *   <button>Open Dropdown</button>
+ *   <div>
+ *     <DropdownDismiss>
+ *       <button>Dismiss</button>
+ *     </DropdownDismiss>
+ *     <p>Dropdown Content</p>
+ *   </div>
+ * </Dropdown>
+ * ```
+ */
+export function Dropdown(props: DropdownProps) {
+  return (
+    <FloatingTree>
+      <DropdownComponent {...props} />
+    </FloatingTree>
+  );
+}
 
-export const DropdownDismiss = ({
-  children,
-  dismiss = true,
-}: ChildProp & { dismiss?: boolean }) => {
+/**
+ * A component that allows dismissing the dropdown when clicked.
+ * It can be used inside the dropdown panel to provide a dismiss area.
+ * It supports an optional `dismiss` prop to control whether the dropdown should be dismissed on click.
+ */
+export function DropdownDismiss({ children, dismiss = true }: ChildProp & { dismiss?: boolean }) {
   const tree = useFloatingTree();
 
   return (
@@ -299,11 +304,9 @@ 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

@@ -21,13 +21,31 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import classNames from "classnames";
-import { type ChildProp, type CssProp } from "../../types";
-import { CoreIcons } from "../../types/icons";
+import { cn } from "@react-fabric/utilities";
+import type { ChildProp, CssProp } from "../../types";
 import { Icon } from "../icon/Icon";
-import { Dropdown, type DropdownProps } from "./Dropdown";
+import type { DropdownProps } from "./Dropdown";
+import { Dropdown } from "./Dropdown";
 
-export const DropdownTool = ({
+/**
+ * A dropdown component that displays an icon and tool menu.
+ * It can be used to create a dropdown menu that appears when the icon is clicked or hovered over.
+ * This component is useful for creating toolbars or action menus in a user interface.
+ * It accepts children as menu items and can be styled with additional CSS classes.
+ *
+ * @example
+ * ```jsx
+ * <DropdownTool
+ *   icon="caret-down"
+ *   groupHover={true}
+ *   className="my-dropdown"
+ * >
+ *   <MenuItem>Item 1</MenuItem>
+ *   <MenuItem>Item 2</MenuItem>
+ * </DropdownTool>
+ * ```
+ */
+export function DropdownTool({
   children,
   className,
   groupHover,
@@ -41,19 +59,18 @@ export const DropdownTool = ({
      * hide until group hovered
      */
     groupHover?: boolean;
-  }) => {
+  }) {
   return (
     <Dropdown {...props}>
       <Icon
-        icon={icon ?? CoreIcons.caretDown}
-        className={classNames(
+        icon={icon ?? "icon-[mdi--menu-down]"}
+        className={cn(
           className,
-          "outline bg-base flex-content pointer-events-auto cursor-pointer",
-          groupHover &&
-            "hidden group-hover:inline-block data-[dropdown-open]:inline-block",
+          groupHover && "invisible group-hover/tool:visible data-dropdown-open:visible",
+          "outline bg-tint-50/50 flex-content pointer-events-auto cursor-pointer",
         )}
       />
       {children}
     </Dropdown>
   );
-};
+}