@react-fabric/core 1.0.0-beta.4 → 1.0.0-beta.40

package/src/components/chip/Chip.tsx

@@ -30,14 +30,14 @@ import {
   type ColorType,
   type CssProp,
   type IconProps,
+  type PaletteType,
   type PolymorphicProps,
   type RefProp,
   type SizeType,
   type TestProps,
 } from "../../types";
-import { getColor, getColorClass } from "../../utils";
+import { getColor } from "../../utils";
 import { Icon } from "../icon/Icon";
-import classes from "./Chip.module.css";
 
 export interface ChipProps
   extends CssProp,
@@ -49,11 +49,11 @@ export interface ChipProps
   /**
    * chip size
    */
-  size?: SizeType;
+  size?: SizeType | number | string;
   /**
    * chip color (CSS color / tailwind color)
    */
-  color?: ColorType | string;
+  color?: ColorType | PaletteType | string;
   /**
    * chip styling
    */
@@ -152,24 +152,25 @@ export const Chip = <Tag extends React.ElementType = "div">({
     <E
       ref={ref}
       role="term"
+      data-ref="chip"
       className={classNames(
-        classes.chip,
+        "fabric-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,
+        !!onClick && "clickable",
+        disabled && "disabled",
       )}
       style={styles}
       data-variant={variant}
       data-inner-clickable={!!onClick}
-      {...{ onClick: clickHandler }}
+      {...{ onClick: disabled ? undefined : clickHandler }}
       {...aria}
     >
       {icon && (
         <Icon
-          className={classNames(classes.chipIcon, "m-1")}
+          data-ref="chipIcon"
+          className={classNames("fabric-chipIcon", "m-1")}
           icon={icon}
           bg={iconBg}
           onClick={onIconClick}
@@ -179,7 +180,8 @@ export const Chip = <Tag extends React.ElementType = "div">({
       )}
       {children && (
         <label
-          className={classNames(classes.chipLabel, "leading-none truncate")}
+          data-ref="chipLabel"
+          className={classNames("fabric-chipLabel", "truncate")}
         >
           {children}
         </label>
@@ -187,8 +189,10 @@ export const Chip = <Tag extends React.ElementType = "div">({
       {onRemove && (
         <span
           role="none"
+          data-ref="chipRemove"
+          data-inner-cliackable
           className={classNames(
-            classes.chipRemove,
+            "fabric-chipRemove",
             "cursor-pointer pe-1 opacity-65 hover:opacity-90",
           )}
           onClick={removeHandler}

package/src/components/collapsable/Collapsable.tsx

@@ -40,7 +40,6 @@ import {
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { Icon } from "../icon/Icon";
-import classes from "./Collapsable.module.css";
 
 interface CollapsableRef {
   button: RefObject<HTMLElement>;
@@ -66,6 +65,10 @@ export interface CollapsableProps
    * header button className
    */
   headerClassName?: string;
+  /**
+   * Header position sticky
+   */
+  stickyHeader?: boolean;
   /**
    * open state icon
    */
@@ -100,6 +103,7 @@ export const Collapsable = ({
   headerClassName,
   children,
   iconAlign,
+  stickyHeader,
   iconClosed = CoreIcons.chevronRight,
   iconOpen = CoreIcons.chevronDown,
   open,
@@ -130,14 +134,15 @@ export const Collapsable = ({
     return [h, b];
   }, [children]);
   return (
-    <div className={classNames(classes.collapsable, className)} {...aria}>
+    <div className={classNames("fabric-collapsable", className)} {...aria}>
       <div
         role="none"
         ref={headRef}
         className={classNames(
-          classes.collapsableHead,
+          "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 px-2 py-1 z-10",
           iconAlign === "end" ? "flex-row-reverse" : "flex-row",
         )}
         onClick={() => !disabled && setOpenState(!openState)}
@@ -148,7 +153,7 @@ export const Collapsable = ({
       {openState && (
         <div
           ref={bodyRef}
-          className={classNames(classes.collapsableBody, bodyClassName)}
+          className={classNames("fabric-collapsableBody", bodyClassName)}
         >
           {body}
         </div>

package/src/components/divider/Divider.tsx

@@ -24,12 +24,12 @@
 import classNames from "classnames";
 import { useCallback } from "react";
 import {
-  type CssProp,
   type ChildProp,
   type ColorType,
+  type CssProp,
   type PaletteType,
 } from "../../types";
-import { getBgClass, getBorderClass, getColorClass } from "../../utils";
+import { getColor } from "../../utils";
 
 export interface DividerProps extends CssProp, Partial<ChildProp> {
   /**
@@ -40,10 +40,14 @@ export interface DividerProps extends CssProp, Partial<ChildProp> {
    * vertical rule
    */
   vertical?: boolean;
+  /**
+   * divider label classname(s)
+   */
+  labelClassName?: string;
   /**
    * rule color
    */
-  color?: ColorType | PaletteType | "tint";
+  color?: ColorType | PaletteType | string;
   /**
    * text alignment
    */
@@ -52,8 +56,9 @@ export interface DividerProps extends CssProp, Partial<ChildProp> {
 
 export const Divider = ({
   children,
-  color,
+  color = "tint-300",
   vertical,
+  labelClassName,
   fill,
   align = "start",
   className,
@@ -62,13 +67,14 @@ export const Divider = ({
     ({ flex, className }: KeyValue) => {
       return (
         <hr
-          style={{ flex }}
+          style={{ flex, borderColor: getColor(color) }}
           className={classNames(
             className,
             vertical && "vertical",
             !flex && "self-stretch",
-            vertical ? "mx-1" : "my-1",
-            color && getBorderClass(color + "-200"),
+            vertical
+              ? "fabric-divider--vertical"
+              : "fabric-divider--horizontal",
           )}
         />
       );
@@ -88,9 +94,8 @@ export const Divider = ({
       <div
         className={classNames(
           "px-2 whitespace-nowrap",
-          vertical ? "mx-1" : "my-1",
-          fill && getBgClass((color ?? "tint") + "-200"),
-          !fill && getColorClass((color ?? "tint") + "-600"),
+          vertical ? "fabric-divider--vertical" : "fabric-divider--horizontal",
+          labelClassName,
           "rounded-full text-[0.75em]",
           vertical && "origin-center -rotate-90 z-1",
         )}

package/src/components/dropdown/Dropdown.tsx

@@ -54,7 +54,6 @@ import {
   useState,
 } from "react";
 import { type ChildProp, type RefProp } from "../../types";
-import classes from "./Dropdown.module.css";
 
 export interface DropdownProps extends RefProp {
   children: [React.ReactNode, React.ReactNode];
@@ -224,6 +223,7 @@ const DropdownElement = ({
             e.stopPropagation();
           },
         }),
+        "data-inner-clickable": "true",
         "data-dropdown-open": isOpen ? true : undefined,
         ref: innerRef,
       })}
@@ -248,6 +248,7 @@ const DropdownElement = ({
                 zIndex: "var(--z-popover)",
                 ...floatingStyles,
               }}
+              data-ref="dropdownBody"
               {...getFloatingProps({
                 onClick: (e) => e.stopPropagation(),
               })}
@@ -255,10 +256,9 @@ const DropdownElement = ({
               <div
                 role="none"
                 className={classNames(
-                  classes.dropdownBody,
+                  "fabric-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}
@@ -270,7 +270,7 @@ const DropdownElement = ({
                   ref={arrowRef}
                   context={context}
                   strokeWidth={0.5}
-                  className="fill-base stroke-muted"
+                  className="fill-base stroke-dimmed"
                 />
               )}
             </div>

package/src/components/dropdown/DropdownTool.tsx

@@ -31,10 +31,12 @@ export const DropdownTool = ({
   children,
   className,
   groupHover,
+  icon,
   ...props
 }: ChildProp &
   CssProp &
   Omit<DropdownProps, "children"> & {
+    icon?: string;
     /**
      * hide until group hovered
      */
@@ -43,12 +45,12 @@ export const DropdownTool = ({
   return (
     <Dropdown {...props}>
       <Icon
-        icon={CoreIcons.caretDown}
+        icon={icon ?? CoreIcons.caretDown}
         className={classNames(
+          "outline bg-tint-50/50 flex-content pointer-events-auto cursor-pointer",
           className,
-          "outline bg-base flex-content pointer-events-auto cursor-pointer",
           groupHover &&
-            "hidden group-hover:inline-block data-[dropdown-open]:inline-block",
+            "hidden group-hover/tool:inline-block data-[dropdown-open]:inline-block",
         )}
       />
       {children}

package/src/components/icon/Icon.tsx

@@ -23,8 +23,9 @@
 
 import { isString, isSvgPath } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { useMemoDebugger } from "../../hooks/useEffectDebugger";
+import { useMemo } from "react";
 import {
+  type PaletteType,
   type AriaProps,
   type ColorType,
   type CssProp,
@@ -32,8 +33,7 @@ import {
   type SizeType,
   type TestProps,
 } from "../../types";
-import { getBgClass, getColor, getColorClass } from "../../utils";
-import classes from "./Icon.module.css";
+import { getColor } from "../../utils";
 
 export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
   /**
@@ -43,11 +43,11 @@ export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
   /**
    * background color (CSS color / tailwind color)
    */
-  bg?: ColorType | string;
+  bg?: ColorType | PaletteType | string;
   /**
    * icon color (CSS color / tailwind color)
    */
-  color?: ColorType | string;
+  color?: ColorType | PaletteType | string;
   /**
    * flip icon in rtl
    */
@@ -101,86 +101,74 @@ export const Icon = ({
   ...rest
 }: IconProps) => {
   /** ***************** 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],
-    "Icon 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]);
 
   /** ***************** check if icon is svg path *******************/
-  const isSvg = useMemoDebugger(
-    () => {
-      return isSvgPath(icon);
-    },
-    [icon],
-    "Icon isSvg",
-  );
+  const isSvg = useMemo(() => {
+    return isSvgPath(icon);
+  }, [icon]);
 
   /** ***************** render icon *******************/
-  const iconEl = useMemoDebugger(
-    () => {
-      if (!isString(icon)) {
-        throw Error("Invalid icon expected string");
-      }
-      return isSvg ? (
-        <svg viewBox={viewBox}>
-          <path fill="currentColor" d={icon.toString()} />
-        </svg>
-      ) : icon?.toString().length <= 4 ? (
-        <svg role="img">
-          <text
-            x="50%"
-            y="50%"
-            dy=".1em"
-            dominantBaseline="middle"
-            textAnchor="middle"
-            style={{ fontSize: SvgTextSize[icon.length] ?? "1em" }}
-          >
-            {icon}
-          </text>
-        </svg>
-      ) : (
-        <i className={`${icon}`} />
-      );
-    },
-    [icon, isSvg, viewBox],
-    "Icon el",
-  );
+  const iconEl = useMemo(() => {
+    if (!isString(icon)) {
+      throw Error("Invalid icon expected string");
+    }
+    return isSvg ? (
+      <svg viewBox={viewBox}>
+        <path fill="currentColor" d={icon.toString()} />
+      </svg>
+    ) : icon?.toString().length <= 4 ? (
+      <svg role="img">
+        <text
+          x="50%"
+          y="50%"
+          dy=".1em"
+          dominantBaseline="middle"
+          textAnchor="middle"
+          style={{ fontSize: SvgTextSize[icon.length] }}
+        >
+          {icon}
+        </text>
+      </svg>
+    ) : (
+      <i className={`${icon}`} />
+    );
+  }, [icon, isSvg, viewBox]);
 
   return (
     <dfn
-      {...rest}
+      data-ref="icon"
       ref={ref}
+      {...rest}
       role="presentation"
       className={classNames(
-        classes.icon,
-        className,
-        "select-none overflow-hidden inline-block box-content leading-none not-italic text-center",
-        bg && getBgClass(bg),
-        color && getColorClass(color),
+        "fabric-icon",
+        "select-none overflow-hidden box-content leading-none not-italic text-center",
         !rounded && "rounded",
         rounded && "rounded-full",
         animate && `animate-${animate}`,
+        className,
       )}
       onClick={onClick}
       data-flip={rtlFlip}
       style={styles}
       data-clickable={!!onClick}
+      data-inner-clickable={!!onClick}
     >
       {iconEl}
     </dfn>