@react-fabric/core 1.0.0-beta.3 → 1.0.0-beta.31

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,78 @@ 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).*)/,
+      ) as string[];
       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/avatar/AvatarGroup.tsx

@@ -115,6 +115,7 @@ export const AvatarGroup = ({
       {avatars}
       {!!diff && (
         <dfn
+          data-ref="avatarCount"
           className={classNames(
             classes.avatar,
             "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center",

package/src/components/badge/Badge.tsx

@@ -43,6 +43,10 @@ export interface BadgeProps
    * make wrapper a block element
    */
   block?: boolean;
+  /**
+   * inline badge
+   */
+  inline?: boolean;
   /**
    * badge value
    */
@@ -90,6 +94,7 @@ export const Badge = ({
   max,
   ping,
   block,
+  inline,
   placement = "top-end",
   children,
   // @ts-expect-error ignore
@@ -120,7 +125,7 @@ export const Badge = ({
   return (
     <div
       className={classNames(
-        forButton ? "contents" : "relative",
+        forButton || inline ? "contents" : "relative",
         block ? "block" : "inline-block",
       )}
     >
@@ -129,7 +134,7 @@ export const Badge = ({
           ...rest,
           ref: innerRef,
         })}
-      {(!!ping || label) && (
+      {(!!ping || (label ?? icon)) && (
         <div
           data-ref="badge"
           data-ping={ping}
@@ -137,8 +142,8 @@ export const Badge = ({
           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",
+            "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-2 pointer-events-none",
+            (forButton && !placement) || inline ? "relative" : "absolute",
           )}
         >
           {label && <span className="p-1">{label}</span>}

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
    */
@@ -64,6 +64,7 @@ export const Breadcrumbs = ({
 
   return (
     <nav
+      data-ref="breadcrumbs"
       data-color={color}
       data-variant={variant}
       className={classNames(
@@ -84,8 +85,12 @@ export const Breadcrumbs = ({
       ))}
       {overflow && (
         <Dropdown closeOnClick showArrow>
-          <li className={classes.breadcrumbLink} data-separator={separator}>
-            <Link>...</Link>
+          <li
+            className={classes.breadcrumbLink}
+            data-separator={separator}
+            data-ref="breadcrumbOverflow"
+          >
+            <Anchor data->...</Anchor>
           </li>
           <div
             data-color={color}

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

@@ -166,6 +166,13 @@
       --outline: var(--color);
     }
 
+    &[data-variant="soft"] {
+      --bg: color-mix(in lab, var(--color) 25%, var(--fabric-bg));
+      --bg-hover: color-mix(in lab, var(--color) 35%, var(--fabric-bg));
+      --bg-click: color-mix(in lab, var(--color) 50%, theme(colors.tint.50));
+      --bg-active: color-mix(in lab, var(--color) 50%, theme(colors.tint.50));
+    }
+
     &[data-variant="solid"] {
       --outline: var(--color);
       --bg: color-mix(in lab, var(--color) 96%, var(--fabric-text));
@@ -245,7 +252,7 @@
         background-size: 1em 1em;
 
         & :global {
-          animation: progress 750ms linear infinite;
+          animation: bgprogress 750ms linear infinite;
         }
       }
 

package/src/components/button/Button.tsx

@@ -85,7 +85,7 @@ export interface BaseProps
   /**
    * button styling
    */
-  variant?: "outline" | "solid" | "link";
+  variant?: "outline" | "soft" | "solid" | "link";
   /**
    * active state with click disabled
    */
@@ -147,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
  */
@@ -186,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);
@@ -240,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
@@ -254,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/ButtonGroup.tsx

@@ -22,7 +22,7 @@
  */
 
 import classNames from "classnames";
-import { Children, cloneElement } from "react";
+import { cloneElement } from "react";
 import {
   type AriaProps,
   type ChildrenProp,
@@ -32,6 +32,7 @@ import {
   type SizeType,
   type TestProps,
 } from "../../types";
+import { cloneChildren } from "../../utils";
 import { type Button } from "./Button";
 import classes from "./Button.module.css";
 
@@ -96,7 +97,7 @@ export const ButtonGroup = ({
       )}
       {...aria}
     >
-      {Children.map(children, (child: AnyObject) =>
+      {cloneChildren(children, (child: AnyObject) =>
         cloneElement(child, {
           color,
           size,

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 }),
@@ -185,11 +191,14 @@ export const ConfirmButton = <Tag extends React.ElementType = "button">({
               {...getFloatingProps()}
             >
               <div className="font-medium ">
-                <p className="py-2 px-4">{message}</p>
+                <p className="py-2 px-4" data-ref="confirmMessage">
+                  {message}
+                </p>
                 <div className="flex justify-end py-2 px-4 gap-2">
                   <Button
                     size="sm"
                     variant="link"
+                    data-ref="confirmCancel"
                     color={color}
                     onClick={() => [clickHandler(false), setIsOpen(false)]}
                   >
@@ -200,6 +209,7 @@ export const ConfirmButton = <Tag extends React.ElementType = "button">({
                     variant="solid"
                     color={color}
                     autoFocus
+                    data-ref="confirmOk"
                     onClick={() => [clickHandler(true), setIsOpen(false)]}
                   >
                     {okLabel ?? t("action.ok")}

package/src/components/button/ToggleButtonGroup.tsx

@@ -23,7 +23,7 @@
 
 import { EMPTY_ARRAY, isArray } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { Children, cloneElement, useCallback, useMemo } from "react";
+import { cloneElement, useCallback, useMemo } from "react";
 import { useControlledValue } from "../../hooks/useControlledValue";
 import {
   type AriaProps,
@@ -32,6 +32,7 @@ import {
   type CssProp,
   type SizeType,
 } from "../../types";
+import { cloneChildren } from "../../utils";
 import { type ButtonProps } from "./Button";
 import classes from "./Button.module.css";
 
@@ -140,7 +141,7 @@ export const ToggleButtonGroup = ({
       )}
       {...aria}
     >
-      {Children.map(children, (child: AnyObject) =>
+      {cloneChildren(children, (child: AnyObject) =>
         cloneElement(child, {
           color,
           size,

package/src/components/callout/Callout.tsx

@@ -90,17 +90,26 @@ export const Callout = ({
       )}
       {...aria}
     >
-      {legend && <legend className="px-2 mx-4 font-medium">{legend}</legend>}
+      {legend && (
+        <legend className="px-2 mx-4 font-medium" data-ref="calloutLegend">
+          {legend}
+        </legend>
+      )}
       <div className={classNames("break-words whitespace-break-spaces p-2")}>
         <div className="flex flex-nowrap items-center text-xl pe-4 gap-2 mb-4 empty:mb-0">
-          {icon && <Icon icon={icon} />}
-          {title && <p className="flex-1">{title}</p>}
+          {icon && <Icon icon={icon} data-ref="calloutIcon" />}
+          {title && (
+            <p className="flex-1" data-ref="calloutTitle">
+              {title}
+            </p>
+          )}
         </div>
         <div className="pe-4">{children}</div>
       </div>
       {onClose && (
         <Icon
           size="md"
+          data-ref="calloutClose"
           className={classNames("absolute end-2", legend ? "top-0" : "top-2")}
           icon={CoreIcons.close}
           onClick={onClose}

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

@@ -25,13 +25,16 @@
   .chip {
     --blank-gradient: linear-gradient(to bottom, #00000005 0%, #0000 10%);
 
+    font-size: 0.875rem;
     color: theme(colors.tint.500);
+
     background-image: var(--blank-gradient);
     outline: 1px solid color-mix(in lab, currentcolor 20%, var(--fabric-bg));
     outline-offset: -1px;
 
     & > .chipLabel {
-      padding: 0.25em 0.5em;
+      padding: 0 0.5em;
+      line-height: 1.5;
     }
 
     & > .chipIcon {

package/src/components/chip/Chip.tsx

@@ -49,7 +49,7 @@ export interface ChipProps
   /**
    * chip size
    */
-  size?: SizeType;
+  size?: SizeType | number | string;
   /**
    * chip color (CSS color / tailwind color)
    */
@@ -152,11 +152,12 @@ export const Chip = <Tag extends React.ElementType = "div">({
     <E
       ref={ref}
       role="term"
+      data-ref="chip"
       className={classNames(
         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 align-middle max-w-72 rounded",
         rounded && "rounded-full",
         !!onClick && classes.clickable,
         disabled && classes.disabled,
@@ -164,11 +165,12 @@ export const Chip = <Tag extends React.ElementType = "div">({
       style={styles}
       data-variant={variant}
       data-inner-clickable={!!onClick}
-      {...{ onClick: clickHandler }}
+      {...{ onClick: disabled ? undefined : clickHandler }}
       {...aria}
     >
       {icon && (
         <Icon
+          data-ref="chipIcon"
           className={classNames(classes.chipIcon, "m-1")}
           icon={icon}
           bg={iconBg}
@@ -179,7 +181,8 @@ export const Chip = <Tag extends React.ElementType = "div">({
       )}
       {children && (
         <label
-          className={classNames(classes.chipLabel, "leading-none truncate")}
+          data-ref="chipLabel"
+          className={classNames(classes.chipLabel, "truncate")}
         >
           {children}
         </label>
@@ -187,6 +190,8 @@ export const Chip = <Tag extends React.ElementType = "div">({
       {onRemove && (
         <span
           role="none"
+          data-ref="chipRemove"
+          data-inner-cliackable
           className={classNames(
             classes.chipRemove,
             "cursor-pointer pe-1 opacity-65 hover:opacity-90",

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
    */
@@ -100,6 +104,7 @@ export const Collapsable = ({
   headerClassName,
   children,
   iconAlign,
+  stickyHeader,
   iconClosed = CoreIcons.chevronRight,
   iconOpen = CoreIcons.chevronDown,
   open,
@@ -138,6 +143,7 @@ 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={() => !disabled && setOpenState(!openState)}

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;
+  }
+}