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

package/src/overlays/modal/Modal.tsx

@@ -30,8 +30,14 @@ import {
   useInteractions,
   useRole,
 } from "@floating-ui/react";
+import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { useCallback, useEffect } from "react";
+import {
+  type ElementType,
+  isValidElement,
+  useCallback,
+  useEffect,
+} from "react";
 import { Loading } from "../../components/animations/Animations";
 import { Icon } from "../../components/icon/Icon";
 import { Header } from "../../core/headfoot/HeadFoot";
@@ -45,13 +51,13 @@ import {
   type TestProps,
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
-import classes from "./Modal.module.css";
 
 export interface ModalProps
   extends AriaProps,
     TestProps,
-    IconProps,
+    Omit<IconProps, "icon">,
     ChildrenProp {
+  icon?: string | ElementType<IconProps>;
   /**
    * header className
    */
@@ -95,7 +101,7 @@ export interface ModalProps
   /**
    * close handler
    */
-  onClose: (...args: AnyObject) => void;
+  onClose?: (...args: AnyObject) => void;
   /**
    * before close handler, return false to prevent close
    */
@@ -163,9 +169,6 @@ export const Modal = ({
   useEffect(() => {
     setTimeout(() => {
       refs.floating.current && (refs.floating.current.dataset.show = "true");
-      refs.floating.current
-        ?.querySelector<HTMLElement>("[role='dialog']")
-        ?.focus();
     }, 50);
   }, []);
 
@@ -173,15 +176,15 @@ export const Modal = ({
     <FloatingPortal>
       <FloatingOverlay
         lockScroll
-        style={{ zIndex: "var(--z-overlay-mask)" }}
-        className="bg-base/50 backdrop-blur-sm grid place-items-center"
+        style={{ zIndex: "var(--z-overlay-mask)", overflow: "hidden" }}
+        className="bg-tint-100/20 backdrop-blur-sm grid place-items-center p-16"
       >
         <FloatingFocusManager context={context}>
           <dialog
             className={classNames(
-              classes.modal,
+              "fabric-modal",
               "rounded-capped relative overflow-hidden flex flex-col flex-nowrap",
-              "ring-1 ring-tint-100 ring-offset-1 focus-within:ring-primary-300 shadow-xl",
+              "ring-2 ring-offset-2 ring-tint-100 focus-within:ring-primary-300 shadow-xl",
               size === "sm" && "w-[20rem]",
               size === "md" && "w-[40rem]",
               size === "lg" && "w-[60vw]",
@@ -201,9 +204,10 @@ export const Modal = ({
             <HotKeyWrapper>
               <Header
                 flex
-                className={classNames(classes.modalHeader, headerClassName)}
+                align="center"
+                className={classNames("fabric-modalHeader", headerClassName)}
               >
-                {icon && (
+                {isString(icon) && (
                   <Icon
                     icon={icon}
                     bg={iconBg}
@@ -212,12 +216,13 @@ export const Modal = ({
                     rtlFlip={rtlFlip}
                   />
                 )}
+                {isValidElement(icon) && icon}
                 <label className="flex-1 truncate py-2 px-1">{title}</label>
                 {actions}
                 <Icon
                   data-ref="panelClose"
                   className={classNames(
-                    classes.panelAction,
+                    "fabric-panelAction",
                     "cursor-pointer p-1 text-xl self-stretch",
                   )}
                   icon={CoreIcons.close}
@@ -228,7 +233,7 @@ export const Modal = ({
               <div
                 role="dialog"
                 className={classNames(
-                  classes.modalBody,
+                  "fabric-modalBody",
                   "flex-1 grid overflow-hidden",
                 )}
                 {...({ tabIndex: 0 } as AnyObject)}

package/src/overlays/toast/Toast.tsx

@@ -27,10 +27,9 @@ import { useTranslation } from "react-i18next";
 import { AnimationIndicator } from "../../components/animations/Animations";
 import { Button } from "../../components/button/Button";
 import { Icon } from "../../components/icon/Icon";
-import { type ColorType, type Elements, type IconProps } from "../../types";
+import { type ColorState, type Elements, type IconProps } from "../../types";
 import { CoreIcons } from "../../types/icons";
-import { getBgClass, getBorderClass, getColorClass } from "../../utils";
-import classes from "./Toast.module.css";
+import { getColor } from "../../utils";
 
 export interface ToastProps extends Omit<IconProps, "iconBg" | "iconColor"> {
   /**
@@ -48,7 +47,7 @@ export interface ToastProps extends Omit<IconProps, "iconBg" | "iconColor"> {
   /**
    * theme color
    */
-  color?: ColorType;
+  color?: ColorState;
   /**
    * extra action button
    */
@@ -87,31 +86,16 @@ export const Toast = ({
       );
     switch (color) {
       case "danger":
-        return (
-          <AnimationIndicator
-            type="cross"
-            className={getColorClass(color + "-600")}
-          />
-        );
+        return <AnimationIndicator type="cross" color={"danger-600"} />;
       case "success":
-        return (
-          <AnimationIndicator
-            type="check"
-            className={getColorClass(color + "-600")}
-          />
-        );
+        return <AnimationIndicator type="check" color={"success-600"} />;
       case "warning":
-        return (
-          <AnimationIndicator
-            type="exclaim"
-            className={getColorClass(color + "-600")}
-          />
-        );
+        return <AnimationIndicator type="exclaim" color={"warning-600"} />;
       default:
         return (
           <AnimationIndicator
             type={type === "confirm" ? "question" : "info"}
-            className={getColorClass(color + "-600")}
+            color={`${color}-600`}
           />
         );
     }
@@ -138,22 +122,29 @@ export const Toast = ({
     <div
       role="alert"
       className={classNames(
-        classes.toast,
-        getBorderClass(color + "-300"),
+        "fabric-toast",
         "flex flex-nowrap max-w-sm bg-base min-w-72 border pointer-events-auto relative overflow-hidden rounded-capped mt-4 select-none",
       )}
+      style={{
+        borderColor: getColor(color + "-300"),
+      }}
       ref={elRef}
     >
       <div
-        className={classNames("flex-initial p-2", getBgClass(color + "-100"))}
+        className={classNames("flex-initial p-2")}
+        style={{
+          backgroundColor: getColor(color + "-300"),
+        }}
       >
         {iconType}
       </div>
       <div
         className={classNames(
-          getBgClass(color + "-50/50"),
           "flex flex-col flex-1 flex-nowrap overflow-hidden p-2",
         )}
+        style={{
+          backgroundColor: getColor(color + "-50"),
+        }}
       >
         <div className="flex flex-nowrap gap-2 items-start">
           <div className="font-medium flex-1">{title}</div>

package/src/overlays/tooltip/Tooltip.tsx

@@ -51,7 +51,7 @@ import { Icon } from "../../components/icon/Icon";
 import { useIsRtl } from "../../hooks/useIsRtl";
 import { type RefProp, type TooltipType } from "../../types";
 import { CoreIcons } from "../../types/icons";
-import classes from "./Tooltip.module.css";
+import { getColor } from "../../utils";
 
 export interface TooltipProps extends TooltipType, RefProp {
   /**
@@ -82,6 +82,7 @@ export const Tooltip = ({
   ref,
   children,
   color,
+  textColor,
   content,
   open,
   copyContent,
@@ -153,7 +154,7 @@ export const Tooltip = ({
       return (
         <span
           role="none"
-          className="ms-2 cursor-pointer text-invert flex-content opacity-75 hover:opacity-90 active:opacity-60"
+          className="ms-2 cursor-pointer text-dimmed flex-content opacity-75 hover:opacity-90 active:opacity-60"
           onClick={handler}
         >
           <Icon icon={CoreIcons.copy} />
@@ -173,25 +174,45 @@ export const Tooltip = ({
         <FloatingPortal>
           <dfn
             data-ref="tooltip"
-            data-color={color}
             className={classNames(
-              classes.tooltip,
-              "select-none text-sm not-italic flex py-1 px-2 rounded shadow-md bg-current",
+              "fabric-tooltip z-(--z-tooltip)",
+              "select-none text-sm not-italic flex py-1 px-2 !max-w-lg rounded shadow-md bg-muted",
             )}
             ref={refs.setFloating}
-            style={floatingStyles}
+            style={{
+              color: textColor ? getColor(textColor) : undefined,
+              backgroundColor: color ? getColor(color) : undefined,
+              ...floatingStyles,
+            }}
             {...getFloatingProps()}
           >
             <span
               className={classNames(
-                "font-medium text-invert flex-1",
-                isString(content) && "whitespace-pre-wrap",
+                "font-medium flex-1 break-all",
+                !textColor && "contrast",
+                isString(content) && "whitespace-pre-wrap mixed-lang",
               )}
+              style={{
+                color: textColor
+                  ? undefined
+                  : color
+                    ? getColor(color)
+                    : "var(--bg-color-muted)",
+              }}
             >
               {content}
             </span>
             {copyEl}
-            <FloatingArrow ref={arrowRef} context={context} />
+            <FloatingArrow
+              ref={arrowRef}
+              context={context}
+              strokeWidth={0.5}
+              className="fill-muted stroke-dimmed"
+              style={{
+                stroke: color ? getColor(color) : undefined,
+                fill: color ? getColor(color) : undefined,
+              }}
+            />
           </dfn>
         </FloatingPortal>
       )}

package/src/types/icons.ts

@@ -100,6 +100,11 @@ export module CoreIcons {
   export const colapseAll =
     "M18.707 21.293l-6-6c-0.391-0.391-1.024-0.391-1.414 0l-6 6c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414zM5.293 2.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
 
+  export const expandAllVar =
+    "M13,9V15H16L12,19L8,15H11V9H8L12,5L16,9H13M4,2H20V4H4V2M4,20H20V22H4V20Z";
+  export const colapseAllVar =
+    "M4,12H20V14H4V12M4,9H20V11H4V9M16,4L12,8L8,4H11V1H13V4H16M8,19L12,15L16,19H13V22H11V19H8Z";
+
   export const folderClosed =
     "M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z";
   export const folderOpen =
@@ -249,6 +254,7 @@ export module CoreIcons {
     "M5.541 2.159c-0.153-0.1-0.34-0.159-0.541-0.159-0.552 0-1 0.448-1 1v18c-0.001 0.182 0.050 0.372 0.159 0.541 0.299 0.465 0.917 0.599 1.382 0.3l14-9c0.114-0.072 0.219-0.174 0.3-0.3 0.299-0.465 0.164-1.083-0.3-1.382zM6 4.832l11.151 7.168-11.151 7.168z";
   export const pause =
     "M6 3c-0.552 0-1 0.448-1 1v16c0 0.552 0.448 1 1 1h4c0.552 0 1-0.448 1-1v-16c0-0.552-0.448-1-1-1zM7 5h2v14h-2zM14 3c-0.552 0-1 0.448-1 1v16c0 0.552 0.448 1 1 1h4c0.552 0 1-0.448 1-1v-16c0-0.552-0.448-1-1-1zM15 5h2v14h-2z";
+  export const stop = "M18,18H6V6H18V18Z";
   export const volumeOn =
     "M10 7.081v9.839l-3.375-2.7c-0.17-0.137-0.388-0.22-0.625-0.22h-3v-4h3c0.218 0.001 0.439-0.071 0.625-0.219zM10.375 4.219l-4.726 3.781h-3.649c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h3.649l4.726 3.781c0.431 0.345 1.061 0.275 1.406-0.156 0.148-0.185 0.22-0.407 0.219-0.625v-14c0-0.552-0.448-1-1-1-0.237 0-0.455 0.083-0.625 0.219zM18.363 5.637c1.757 1.758 2.635 4.059 2.635 6.364 0 2.304-0.878 4.605-2.635 6.362-0.39 0.391-0.39 1.024 0 1.414s1.024 0.39 1.414 0c2.147-2.147 3.22-4.963 3.221-7.776s-1.074-5.63-3.221-7.778c-0.39-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM14.833 9.167c0.781 0.781 1.171 1.803 1.171 2.828s-0.39 2.047-1.171 2.828c-0.39 0.391-0.39 1.024 0 1.414s1.024 0.39 1.414 0c1.171-1.171 1.757-2.708 1.757-4.242s-0.586-3.071-1.757-4.242c-0.39-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
   export const volumeOff =
@@ -348,6 +354,9 @@ export module CoreIcons {
   export const colorPicker =
     "M19.35,11.72L17.22,13.85L15.81,12.43L8.1,20.14L3.5,22L2,20.5L3.86,15.9L11.57,8.19L10.15,6.78L12.28,4.65L19.35,11.72M16.76,3C17.93,1.83 19.83,1.83 21,3C22.17,4.17 22.17,6.07 21,7.24L19.08,9.16L14.84,4.92L16.76,3M5.56,17.03L4.5,19.5L6.97,18.44L14.4,11L13,9.6L5.56,17.03Z";
 
+  export const list =
+    "M11 15H17V17H11V15M9 7H7V9H9V7M11 13H17V11H11V13M11 9H17V7H11V9M9 11H7V13H9V11M21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H19C20.1 3 21 3.9 21 5M19 5H5V19H19V5M9 15H7V17H9V15Z";
+
   /**
    * alert icons
    */

package/src/types/index.ts

@@ -25,11 +25,15 @@
 import { type Placement } from "@floating-ui/react";
 import { type JSXElementConstructor, type Ref } from "react";
 
+export type ModalProps<P = unknown> = P & {
+  onClose: (...args: AnyObject) => void;
+};
+
 export type SizeType = "xs" | "sm" | "md" | "lg" | "xl";
 
 export type SizeTypeWithZero = "xs" | "sm" | "md" | "lg" | "xl" | 0;
 
-export type ColorType =
+export type ColorState =
   | "primary"
   | "accent"
   | "info"
@@ -37,21 +41,240 @@ export type ColorType =
   | "success"
   | "warning";
 
+export type ColorType =
+  | "primary-50"
+  | "primary-100"
+  | "primary-200"
+  | "primary-300"
+  | "primary-400"
+  | "primary-500"
+  | "primary-600"
+  | "primary-700"
+  | "primary-800"
+  | "primary-900"
+  | "primary-950"
+  | "accent-50"
+  | "accent-100"
+  | "accent-200"
+  | "accent-300"
+  | "accent-400"
+  | "accent-500"
+  | "accent-600"
+  | "accent-700"
+  | "accent-800"
+  | "accent-900"
+  | "accent-950"
+  | "info-50"
+  | "info-100"
+  | "info-200"
+  | "info-300"
+  | "info-400"
+  | "info-500"
+  | "info-600"
+  | "info-700"
+  | "info-800"
+  | "info-900"
+  | "info-950"
+  | "danger-50"
+  | "danger-100"
+  | "danger-200"
+  | "danger-300"
+  | "danger-400"
+  | "danger-500"
+  | "danger-600"
+  | "danger-700"
+  | "danger-800"
+  | "danger-900"
+  | "danger-950"
+  | "success-50"
+  | "success-100"
+  | "success-200"
+  | "success-300"
+  | "success-400"
+  | "success-500"
+  | "success-600"
+  | "success-700"
+  | "success-800"
+  | "success-900"
+  | "success-950"
+  | "warning-50"
+  | "warning-100"
+  | "warning-200"
+  | "warning-300"
+  | "warning-400"
+  | "warning-500"
+  | "warning-600"
+  | "warning-700"
+  | "warning-800"
+  | "warning-900"
+  | "warning-950";
+
 export type PaletteType =
-  | "scarlet"
-  | "pumpkin"
-  | "marigold"
-  | "avacado"
-  | "jade"
-  | "denim"
-  | "iris"
-  | "lilac"
-  | "coral"
-  | "wood"
-  | "silver"
-  | "steel"
-  | "olive"
-  | "sand";
+  | "scarlet-50"
+  | "scarlet-100"
+  | "scarlet-200"
+  | "scarlet-300"
+  | "scarlet-400"
+  | "scarlet-500"
+  | "scarlet-600"
+  | "scarlet-700"
+  | "scarlet-800"
+  | "scarlet-900"
+  | "scarlet-950"
+  | "pumpkin-50"
+  | "pumpkin-100"
+  | "pumpkin-200"
+  | "pumpkin-300"
+  | "pumpkin-400"
+  | "pumpkin-500"
+  | "pumpkin-600"
+  | "pumpkin-700"
+  | "pumpkin-800"
+  | "pumpkin-900"
+  | "pumpkin-950"
+  | "marigold-50"
+  | "marigold-100"
+  | "marigold-200"
+  | "marigold-300"
+  | "marigold-400"
+  | "marigold-500"
+  | "marigold-600"
+  | "marigold-700"
+  | "marigold-800"
+  | "marigold-900"
+  | "marigold-950"
+  | "avacado-50"
+  | "avacado-100"
+  | "avacado-200"
+  | "avacado-300"
+  | "avacado-400"
+  | "avacado-500"
+  | "avacado-600"
+  | "avacado-700"
+  | "avacado-800"
+  | "avacado-900"
+  | "avacado-950"
+  | "jade-50"
+  | "jade-100"
+  | "jade-200"
+  | "jade-300"
+  | "jade-400"
+  | "jade-500"
+  | "jade-600"
+  | "jade-700"
+  | "jade-800"
+  | "jade-900"
+  | "jade-950"
+  | "denim-50"
+  | "denim-100"
+  | "denim-200"
+  | "denim-300"
+  | "denim-400"
+  | "denim-500"
+  | "denim-600"
+  | "denim-700"
+  | "denim-800"
+  | "denim-900"
+  | "denim-950"
+  | "iris-50"
+  | "iris-100"
+  | "iris-200"
+  | "iris-300"
+  | "iris-400"
+  | "iris-500"
+  | "iris-600"
+  | "iris-700"
+  | "iris-800"
+  | "iris-900"
+  | "iris-950"
+  | "lilac-50"
+  | "lilac-100"
+  | "lilac-200"
+  | "lilac-300"
+  | "lilac-400"
+  | "lilac-500"
+  | "lilac-600"
+  | "lilac-700"
+  | "lilac-800"
+  | "lilac-900"
+  | "lilac-950"
+  | "coral-50"
+  | "coral-100"
+  | "coral-200"
+  | "coral-300"
+  | "coral-400"
+  | "coral-500"
+  | "coral-600"
+  | "coral-700"
+  | "coral-800"
+  | "coral-900"
+  | "coral-950"
+  | "wood-50"
+  | "wood-100"
+  | "wood-200"
+  | "wood-300"
+  | "wood-400"
+  | "wood-500"
+  | "wood-600"
+  | "wood-700"
+  | "wood-800"
+  | "wood-900"
+  | "wood-950"
+  | "silver-50"
+  | "silver-100"
+  | "silver-200"
+  | "silver-300"
+  | "silver-400"
+  | "silver-500"
+  | "silver-600"
+  | "silver-700"
+  | "silver-800"
+  | "silver-900"
+  | "silver-950"
+  | "steel-50"
+  | "steel-100"
+  | "steel-200"
+  | "steel-300"
+  | "steel-400"
+  | "steel-500"
+  | "steel-600"
+  | "steel-700"
+  | "steel-800"
+  | "steel-900"
+  | "steel-950"
+  | "olive-50"
+  | "olive-100"
+  | "olive-200"
+  | "olive-300"
+  | "olive-400"
+  | "olive-500"
+  | "olive-600"
+  | "olive-700"
+  | "olive-800"
+  | "olive-900"
+  | "olive-950"
+  | "sand-50"
+  | "sand-100"
+  | "sand-200"
+  | "sand-300"
+  | "sand-400"
+  | "sand-500"
+  | "sand-600"
+  | "sand-700"
+  | "sand-800"
+  | "sand-900"
+  | "sand-950"
+  | "tint-50"
+  | "tint-100"
+  | "tint-200"
+  | "tint-300"
+  | "tint-400"
+  | "tint-500"
+  | "tint-600"
+  | "tint-700"
+  | "tint-800"
+  | "tint-900"
+  | "tint-950";
 
 export type ColorWithGrays = ColorType | "invert" | "dimmed" | "muted";
 
@@ -78,7 +301,11 @@ export interface TooltipType {
   /**
    * tooltip color
    */
-  color?: ColorType;
+  color?: ColorType | PaletteType | string;
+  /**
+   * text color
+   */
+  textColor?: ColorType | PaletteType | string;
   /**
    * tooltip placement
    */
@@ -122,15 +349,7 @@ export interface TestProps {
   "data-test-value"?: AnyObject;
 }
 
-export type Elements<T> =
-  | React.ReactElement<T>
-  | React.ReactPortal
-  | React.ReactNode
-  | string
-  | number
-  | boolean
-  | null
-  | undefined;
+export type Elements<T> = React.ReactElement<T> | React.ReactNode;
 
 export type AriaProps = React.AriaAttributes;
 
@@ -179,11 +398,11 @@ export interface IconProps {
   /**
    * icon background color
    */
-  iconBg?: ColorType | string;
+  iconBg?: ColorType | PaletteType | string;
   /**
    * icon color
    */
-  iconColor?: ColorType | string;
+  iconColor?: ColorType | PaletteType | string;
 }
 
 export interface CollapseProps {
@@ -239,3 +458,8 @@ export interface SizeObject {
   width: number;
   height: number;
 }
+
+export interface ScrollObject extends PositionObject, SizeObject {
+  scrollWidth?: number;
+  scrollHeight: number;
+}

package/src/typography/Abbr.tsx

@@ -26,9 +26,13 @@ import classNames from "classnames";
 import { Fragment, useCallback, useMemo } from "react";
 import { useMemoDebugger } from "../hooks/useEffectDebugger";
 import { Tooltip, getTooltipProps } from "../overlays/tooltip/Tooltip";
-import { type ChildProp, type ColorType, type CssProp } from "../types";
-import { getColor, getColorClass } from "../utils";
-import classes from "./Typography.module.css";
+import {
+  type ChildProp,
+  type ColorType,
+  type CssProp,
+  type PaletteType,
+} from "../types";
+import { getColor } from "../utils";
 
 interface AbbrTextProps {
   children: string;
@@ -49,11 +53,7 @@ const AbbrText = ({ color, children, tooltip, content }: AbbrTextProps) => {
   return (
     <TooltipWrapper {...tooltipProps}>
       <abbr
-        className={classNames(
-          classes.abbr,
-          "whitespace-nowrap",
-          color && getColorClass(color),
-        )}
+        className={classNames("fabric-abbr", "whitespace-nowrap")}
         style={
           color ? ({ "--abbr-color": getColor(color) } as AnyObject) : undefined
         }
@@ -74,7 +74,13 @@ export interface AbbrProps extends ChildProp<string>, CssProp {
    *
    * [textPart, tooltip, color (class name or color string)]
    */
-  abbr: Array<[textPart: string, tooltip: string, color?: ColorType | string]>;
+  abbr: Array<
+    [
+      textPart: string,
+      tooltip: string,
+      color?: ColorType | PaletteType | string,
+    ]
+  >;
   /**
    * renderer callback
    */