@react-fabric/core 1.0.0-beta.1 → 1.0.0-beta.12

package/src/components/animations/Animations.tsx

@@ -104,7 +104,7 @@ export const AnimationIndicator = ({
 };
 
 export const AnimationBars = ({
-  color = "tint-700",
+  color = "tint",
   size = "2rem",
 }: {
   color?: ColorType | string;
@@ -142,6 +142,7 @@ export const AnimationSpinner = ({
       className={classNames(
         "absolute inset-0 z-10 flex justify-center items-center cursor-wait",
       )}
+      data-testid="spinner"
     >
       <div
         className={classNames(
@@ -164,15 +165,20 @@ export const Loading = () => {
         classes.loader,
         "area-[loader] relative overflow-x-clip",
       )}
+      data-testid="loading"
     >
       <div className="absolute z-10 py-px inset-x-0 top-0 after:h-0.5 after:block after:bg-primary-500" />
     </div>
   );
 };
 
-export const Skeleton = () => {
+export const Skeleton = ({ className, ...rest }: CssProp) => {
   return (
-    <div className={classNames("p-2 animate-pulse flex gap-2 max-w-lg")}>
+    <div
+      className={classNames(className, "p-2 animate-pulse flex gap-2 max-w-lg")}
+      data-testid="skeleton"
+      {...rest}
+    >
       <div className="bg-tint-100 rounded aspect-square h-12" />
       <div className="flex-1 flex flex-col gap-2">
         <div className="bg-tint-100 h-3 rounded-full" />

package/src/components/avatar/Avatar.tsx

@@ -24,8 +24,7 @@
 import { isSvgPath } from "@react-fabric/utilities";
 import BoringAvatar from "boring-avatars";
 import classNames from "classnames";
-import { useState } from "react";
-import { useMemoDebugger } from "../../hooks/useEffectDebugger";
+import { useMemo, useState } from "react";
 import {
   type AriaProps,
   type ColorType,
@@ -109,89 +108,77 @@ export const Avatar = ({
   const [fallback, setFallback] = useState(true);
 
   /** ***************** style map *******************/
-  const styles = useMemoDebugger(
-    () => {
-      const s: KeyValue = {};
-      if (bg) {
-        s.backgroundColor = getColor(bg);
-      }
-      if (color) {
-        s.color = getColor(color);
-      }
-      if (size && !(size in SizeMap)) {
-        s.fontSize = size;
-      }
-      if (size && size in SizeMap) {
-        s.fontSize = SizeMap[size];
-      }
-      return s;
-    },
-    [bg, color, size],
-    "Avatar styles",
-  );
+  const styles = useMemo(() => {
+    const s: KeyValue = {};
+    if (bg) {
+      s.backgroundColor = getColor(bg);
+    }
+    if (color) {
+      s.color = getColor(color);
+    }
+    if (size && !(size in SizeMap)) {
+      s.fontSize = size;
+    }
+    if (size && size in SizeMap) {
+      s.fontSize = SizeMap[size];
+    }
+    return s;
+  }, [bg, color, size]);
 
   /** ***************** render icon *******************/
-  const avatarImage = useMemoDebugger(
-    () => {
-      setFallback(!avatar);
+  const avatarImage = useMemo(() => {
+    setFallback(!avatar);
+    return (
+      avatar && (
+        <div className="contents">
+          <div
+            className={classNames(
+              classes.imgPlaceholder,
+              "absolute inset-0 bg-gray animate-pulse",
+            )}
+          />
+          <img
+            src={avatar}
+            alt={avatar}
+            className="align-baseline"
+            onError={() => setFallback(true)}
+            onLoad={(e) => e.currentTarget.previousElementSibling?.remove()}
+          />
+        </div>
+      )
+    );
+  }, [avatar]);
+
+  const fallbackAvatar = useMemo(() => {
+    if (fallbackIcon) {
+      return isSvgPath(fallbackIcon) ? (
+        <svg viewBox={viewBox}>
+          <path fill="currentColor" d={fallbackIcon.toString()} />
+        </svg>
+      ) : (
+        <i className={fallbackIcon} />
+      );
+    }
+    if (variant === "text") {
+      const [, first, second, group] =
+        name.match(/(?=(\w).* (\w).*)|(?=(\w\w).*)/) ?? [];
       return (
-        avatar && (
-          <div className="contents">
-            <div
-              className={classNames(
-                classes.imgPlaceholder,
-                "absolute inset-0 bg-gray animate-pulse",
-              )}
-            />
-            <img
-              src={avatar}
-              alt={avatar}
-              className="align-baseline"
-              onError={() => setFallback(true)}
-              onLoad={(e) => e.currentTarget.previousElementSibling?.remove()}
-            />
-          </div>
-        )
+        <svg role="img">
+          <text
+            x="50%"
+            y="50%"
+            dy=".1em"
+            dominantBaseline="middle"
+            textAnchor="middle"
+            style={{ fontSize: ".5em", fontWeight: 500 }}
+          >
+            {group ?? `${first}${second}`}
+          </text>
+        </svg>
       );
-    },
-    [avatar],
-    "Avatar icon",
-  );
-
-  const fallbackAvatar = useMemoDebugger(
-    () => {
-      if (fallbackIcon) {
-        return isSvgPath(fallbackIcon) ? (
-          <svg viewBox={viewBox}>
-            <path fill="currentColor" d={fallbackIcon.toString()} />
-          </svg>
-        ) : (
-          <i className={fallbackIcon} />
-        );
-      }
-      if (variant === "text") {
-        const [, first, second, group] =
-          name.match(/(?=(\w).* (\w).*)|(?=(\w\w).*)/) ?? [];
-        return (
-          <svg role="img">
-            <text
-              x="50%"
-              y="50%"
-              dy=".1em"
-              dominantBaseline="middle"
-              textAnchor="middle"
-              style={{ fontSize: ".5em", fontWeight: 500 }}
-            >
-              {group ?? `${first}${second}`}
-            </text>
-          </svg>
-        );
-      }
-      return <BoringAvatar square size={64} variant={variant} name={name} />;
-    },
-    [name, variant, fallbackIcon],
-    "Avatar fallback",
-  );
+    }
+    return <BoringAvatar square size={64} variant={variant} name={name} />;
+  }, [name, variant, fallbackIcon]);
 
   return (
     <dfn

package/src/components/badge/Badge.tsx

@@ -21,7 +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 { isNumber, isObject, mergeRefs } from "@react-fabric/utilities";
+import { isNil, isNumber, isObject, mergeRefs } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { cloneElement, useMemo } from "react";
 import {
@@ -101,10 +101,12 @@ export const Badge = ({
   ...rest
 }: BadgeProps) => {
   const label = useMemo(() => {
-    if (isNumber(value) && max && value > max) {
-      return `${max}+`;
+    if (!isNil(value)) {
+      if (isNumber(value) && max && value > max) {
+        return `${max}+`;
+      }
+      return `${value}`;
     }
-    return `${value}`;
   }, [value, max]);
 
   const innerRef = useMemo(
@@ -127,22 +129,24 @@ export const Badge = ({
           ...rest,
           ref: innerRef,
         })}
-      <div
-        data-ref="badge"
-        data-ping={ping}
-        data-placement={placement}
-        className={classNames(
-          classes.badge,
-          className,
-          "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-5 pointer-events-none",
-          forButton && !placement ? "relative" : "absolute",
-        )}
-      >
-        {label && <span className="p-1">{label}</span>}
-        {icon && (
-          <Icon icon={icon} bg={iconBg} color={iconColor} rtlFlip={rtlFlip} />
-        )}
-      </div>
+      {(!!ping || label) && (
+        <div
+          data-ref="badge"
+          data-ping={ping}
+          data-placement={placement}
+          className={classNames(
+            classes.badge,
+            className,
+            "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-5 pointer-events-none",
+            forButton && !placement ? "relative" : "absolute",
+          )}
+        >
+          {label && <span className="p-1">{label}</span>}
+          {icon && (
+            <Icon icon={icon} bg={iconBg} color={iconColor} rtlFlip={rtlFlip} />
+          )}
+        </div>
+      )}
     </div>
   );
 };

package/src/components/breadcrumbs/Breadcrumbs.tsx

@@ -24,14 +24,14 @@
 import classNames from "classnames";
 import { Children, useMemo } from "react";
 import { type AriaProps, type ChildrenProp, type CssProp } from "../../types";
-import { Link } from "../../typography/Link";
+import { Anchor } from "../../typography/Anchor";
 import { Dropdown } from "../dropdown/Dropdown";
 import classes from "./Breadcrumbs.module.css";
 
 export interface BreadcrumbProps
   extends CssProp,
     AriaProps,
-    ChildrenProp<typeof Link> {
+    ChildrenProp<typeof Anchor> {
   /**
    * breadcrumb styling
    */
@@ -85,7 +85,7 @@ export const Breadcrumbs = ({
       {overflow && (
         <Dropdown closeOnClick showArrow>
           <li className={classes.breadcrumbLink} data-separator={separator}>
-            <Link>...</Link>
+            <Anchor>...</Anchor>
           </li>
           <div
             data-color={color}

package/src/components/button/Button.module.css

@@ -245,7 +245,7 @@
         background-size: 1em 1em;
 
         & :global {
-          animation: progress 750ms linear infinite;
+          animation: bgprogress 750ms linear infinite;
         }
       }
 

package/src/components/button/Button.tsx

@@ -136,6 +136,8 @@ export interface BaseProps
    */
   hotKey?: string;
 
+  stopPropagation?: boolean;
+
   onMouseOut?: MouseEventHandler;
   onMouseOver?: MouseEventHandler;
   onMouseMove?: MouseEventHandler;
@@ -145,10 +147,14 @@ export interface BaseProps
   onWheel?: WheelEventHandler;
 }
 
-export type ButtonProps =
+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>;
+
 /**
  * Clickable action button
  */
@@ -175,6 +181,7 @@ export const Button = <Tag extends React.ElementType = "button">({
   spinOnHover,
   onClick,
   actionMessage,
+  stopPropagation,
   type = "button",
   hotKey,
   showActionDone,
@@ -183,7 +190,7 @@ export const Button = <Tag extends React.ElementType = "button">({
   // @ts-expect-error ignore
   "data-ref": dataRef,
   ...aria
-}: BaseProps & ButtonProps & PolymorphicProps<Tag>) => {
+}: ButtonProps<Tag>) => {
   const refEl = useRef<AnyObject>(null);
   const [busy, setBusy] = useState(false);
   const [actionDone, setActionDone] = useState(false);
@@ -191,7 +198,7 @@ export const Button = <Tag extends React.ElementType = "button">({
   const clickHandler = useCallback(
     (e: React.MouseEvent) => {
       setBusy(true);
-      // e.stopPropagation();
+      stopPropagation && e.stopPropagation();
       const ret = onClick?.(e);
       void Promise.resolve(ret).then((b) => {
         setBusy(false);
@@ -200,7 +207,7 @@ export const Button = <Tag extends React.ElementType = "button">({
         }
       });
     },
-    [onClick, disabled, actionMessage, showActionDoneEvent],
+    [onClick, disabled, actionMessage, showActionDoneEvent, stopPropagation],
   );
 
   /** ***************** reset done state on timeout *******************/
@@ -237,6 +244,10 @@ export const Button = <Tag extends React.ElementType = "button">({
     return getBadgeProps(badge);
   }, [badge]);
 
+  const hotKeyHandler = useRef(() => {
+    !disabled && refEl.current?.click();
+  });
+
   const E = as ?? "button";
   return (
     <div
@@ -251,12 +262,7 @@ export const Button = <Tag extends React.ElementType = "button">({
       data-loading={busy || loading}
       data-disabled={disabled}
     >
-      {hotKey && (
-        <HotKey
-          keyCombo={hotKey}
-          handler={() => !disabled && refEl.current?.click()}
-        />
-      )}
+      {hotKey && <HotKey keyCombo={hotKey} handler={hotKeyHandler.current} />}
       <TooltipWrapper {...tooltipProps}>
         <E
           ref={mergeRefs(ref, refEl)}

package/src/components/button/ConfirmButton.tsx

@@ -22,18 +22,19 @@
  */
 
 import {
-  FloatingArrow,
-  FloatingFocusManager,
-  FloatingPortal,
   arrow,
   autoUpdate,
   flip,
+  FloatingArrow,
+  FloatingFocusManager,
+  FloatingPortal,
   offset,
   shift,
   useClick,
   useDismiss,
   useFloating,
   useInteractions,
+  type Placement,
 } from "@floating-ui/react";
 import { mergeRefs } from "@react-fabric/utilities";
 import classNames from "classnames";
@@ -66,6 +67,10 @@ interface ExtendedProps extends Omit<BaseProps, "onClick">, RefProp {
    * ok label
    */
   cancelLabel?: string;
+  /**
+   * dropdown placement
+   */
+  placement?: Placement;
   /**
    * click handler, return Promise to autoset loading state
    */
@@ -85,6 +90,7 @@ export const ConfirmButton = <Tag extends React.ElementType = "button">({
   cancelLabel,
   onClick,
   loading,
+  placement = "bottom",
   actionMessage,
   showActionDone,
   showActionDoneEvent = "click",
@@ -127,7 +133,7 @@ export const ConfirmButton = <Tag extends React.ElementType = "button">({
       }
     },
     strategy: "fixed",
-    placement: "bottom",
+    placement,
     whileElementsMounted: autoUpdate,
     middleware: [
       shift({ padding: 8 }),

package/src/components/callout/Callout.tsx

@@ -26,6 +26,7 @@ import {
   type AriaProps,
   type ChildrenProp,
   type ColorType,
+  type CssProp,
   type PaletteType,
   type TestProps,
 } from "../../types";
@@ -33,7 +34,11 @@ import { CoreIcons } from "../../types/icons";
 import { getBgClass, getBorderClass, getColorClass } from "../../utils";
 import { Icon } from "../icon/Icon";
 
-export interface CalloutProps extends AriaProps, ChildrenProp, TestProps {
+export interface CalloutProps
+  extends AriaProps,
+    ChildrenProp,
+    CssProp,
+    TestProps {
   /**
    * callout color
    */
@@ -69,11 +74,13 @@ export const Callout = ({
   icon,
   border,
   onClose,
+  className,
   ...aria
 }: CalloutProps) => {
   return (
     <fieldset
       className={classNames(
+        className,
         "block rounded-capped border max-w-full relative overflow-hidden mb-4",
         getBgClass(color + "-50"),
         getColorClass(color + "-700"),

package/src/components/card/Card.tsx

@@ -39,6 +39,7 @@ import {
   type AriaProps,
   type ChildrenProp,
   type CssProp,
+  type RefProp,
   type TestProps,
 } from "../../types";
 import { nodeCheck } from "../../utils";
@@ -48,6 +49,7 @@ export interface CardProps
   extends CssProp,
     AriaProps,
     TestProps,
+    RefProp<HTMLDivElement>,
     ChildrenProp<React.ReactElement<HeadFootProps | ContentProps>> {
   /**
    * apply flex fill styling
@@ -94,6 +96,7 @@ export const Card = ({
   draggable,
   dragKey,
   dragData,
+  ref,
   ...aria
 }: CardProps) => {
   const [header, body, footer] = useMemo(() => {
@@ -136,6 +139,7 @@ export const Card = ({
                   dragKey &&
                   e.dataTransfer?.setData(dragKey, JSON.stringify(dragData))
           }
+          ref={ref}
           {...aria}
         >
           {header}

package/src/components/chip/Chip.module.css

@@ -31,7 +31,7 @@
     outline-offset: -1px;
 
     & > .chipLabel {
-      padding: 0.25em 0.5em;
+      padding: 0 0.5em;
     }
 
     & > .chipIcon {

package/src/components/chip/Chip.tsx

@@ -156,7 +156,7 @@ export const Chip = <Tag extends React.ElementType = "div">({
         classes.chip,
         className,
         color && getColorClass(color),
-        "select-none inline-flex flex-nowrap items-center max-w-72 text-sm leading-none rounded",
+        "select-none inline-flex flex-nowrap items-center max-w-72 text-sm rounded",
         rounded && "rounded-full",
         !!onClick && classes.clickable,
         disabled && classes.disabled,
@@ -178,9 +178,7 @@ export const Chip = <Tag extends React.ElementType = "div">({
         />
       )}
       {children && (
-        <label
-          className={classNames(classes.chipLabel, "leading-none truncate")}
-        >
+        <label className={classNames(classes.chipLabel, "truncate")}>
           {children}
         </label>
       )}

package/src/components/collapsable/Collapsable.tsx

@@ -66,6 +66,10 @@ export interface CollapsableProps
    * header button className
    */
   headerClassName?: string;
+  /**
+   * Header position sticky
+   */
+  stickyHeader?: boolean;
   /**
    * open state icon
    */
@@ -78,6 +82,10 @@ export interface CollapsableProps
    * open state
    */
   open?: boolean;
+  /**
+   * disable collapsable
+   */
+  disabled?: boolean;
   /**
    * open handler
    */
@@ -90,11 +98,13 @@ export interface CollapsableProps
 
 export const Collapsable = ({
   ref,
+  disabled,
   className,
   bodyClassName,
   headerClassName,
   children,
   iconAlign,
+  stickyHeader,
   iconClosed = CoreIcons.chevronRight,
   iconOpen = CoreIcons.chevronDown,
   open,
@@ -133,9 +143,10 @@ export const Collapsable = ({
           classes.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 px-2 py-1 z-10",
           iconAlign === "end" ? "flex-row-reverse" : "flex-row",
         )}
-        onClick={() => setOpenState(!openState)}
+        onClick={() => !disabled && setOpenState(!openState)}
       >
         <Icon size="1.125em" icon={openState ? iconOpen : iconClosed} rtlFlip />
         <div className="flex-1 px-2">{head}</div>

package/src/components/divider/Divider.module.css

@@ -0,0 +1,32 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .vertical {
+    margin-inline: 0.25rem;
+  }
+
+  .horizontal {
+    margin-block: 0.25rem;
+  }
+}

package/src/components/divider/Divider.tsx

@@ -30,6 +30,7 @@ import {
   type PaletteType,
 } from "../../types";
 import { getBgClass, getBorderClass, getColorClass } from "../../utils";
+import classes from "./Divider.module.css";
 
 export interface DividerProps extends CssProp, Partial<ChildProp> {
   /**
@@ -67,7 +68,7 @@ export const Divider = ({
             className,
             vertical && "vertical",
             !flex && "self-stretch",
-            vertical ? "mx-1" : "my-1",
+            vertical ? classes.vertical : classes.horizontal,
             color && getBorderClass(color + "-200"),
           )}
         />
@@ -88,7 +89,7 @@ export const Divider = ({
       <div
         className={classNames(
           "px-2 whitespace-nowrap",
-          vertical ? "mx-1" : "my-1",
+          vertical ? classes.vertical : classes.horizontal,
           fill && getBgClass((color ?? "tint") + "-200"),
           !fill && getColorClass((color ?? "tint") + "-600"),
           "rounded-full text-[0.75em]",

package/src/components/dropdown/Dropdown.tsx

@@ -224,6 +224,7 @@ const DropdownElement = ({
             e.stopPropagation();
           },
         }),
+        "data-inner-clickable": "true",
         "data-dropdown-open": isOpen ? true : undefined,
         ref: innerRef,
       })}
@@ -248,6 +249,7 @@ const DropdownElement = ({
                 zIndex: "var(--z-popover)",
                 ...floatingStyles,
               }}
+              data-testid="dropdown-body"
               {...getFloatingProps({
                 onClick: (e) => e.stopPropagation(),
               })}
@@ -257,8 +259,7 @@ const DropdownElement = ({
                 className={classNames(
                   classes.dropdownBody,
                   dropdownClassName,
-                  !plainDropdown &&
-                    "shadow-lg shadow-base bg-base ring-1 ring-tint-100",
+                  !plainDropdown && "shadow-lg bg-base ring-1 ring-tint-100",
                   "rounded-capped overflow-auto scroll-thin grid max-h-[70vh]",
                 )}
                 onMouseUpCapture={tryClosing}