@react-fabric/core 1.0.0-beta.6 → 1.0.0-beta.61

package/src/overlays/tooltip/Tooltip.tsx

@@ -45,13 +45,13 @@ import {
   useMemo,
   useRef,
   useState,
+  type MouseEvent,
   type ReactElement,
 } from "react";
 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 {
   /**
@@ -63,7 +63,7 @@ export interface TooltipProps extends TooltipType, RefProp {
    */
   copyContent?: boolean | string;
   disabled?: boolean;
-  children: ReactElement;
+  children: ReactElement<KeyValue>;
 }
 
 export const getTooltipProps = (
@@ -82,6 +82,7 @@ export const Tooltip = ({
   ref,
   children,
   color,
+  textColor,
   content,
   open,
   copyContent,
@@ -125,7 +126,7 @@ export const Tooltip = ({
   });
 
   const hover = useHover(context, {
-    restMs: 250,
+    restMs: 500,
     delay: { open: 1000 },
     handleClose: copyContent ? safePolygon({ buffer: 1 }) : undefined,
   });
@@ -146,17 +147,18 @@ export const Tooltip = ({
   const copyEl = useMemo(() => {
     if (copyContent) {
       const copyText: AnyObject = isString(copyContent) ? copyContent : content;
-      const handler = () => {
+      const handler = (e: MouseEvent) => {
         setIsOpen(false);
+        e.stopPropagation();
         void navigator.clipboard.writeText(copyText.toString());
       };
       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} />
+          <Icon icon="icon-[mdi--content-copy]" />
         </span>
       );
     }
@@ -173,25 +175,47 @@ 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",
-              )}
-            >
-              {content}
-            </span>
+            {isValidElement(content) && content}
+            {isString(content) && (
+              <span
+                className={classNames(
+                  "font-medium flex-1 break-all whitespace-pre-wrap mixed-lang",
+                  !textColor && "contrast",
+                )}
+                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/global.d.ts

@@ -45,6 +45,14 @@ declare module "*.png" {
   const content: any;
   export default content;
 }
+declare module "*.jpg" {
+  const content: any;
+  export default content;
+}
+declare module "*.jpeg" {
+  const content: any;
+  export default content;
+}
 declare module "*.svg" {
   const content: any;
   export default content;

package/src/types/index.ts

@@ -25,33 +25,258 @@
 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 =
+  | "default"
   | "primary"
   | "accent"
+  | "muted"
   | "info"
   | "danger"
   | "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 +303,11 @@ export interface TooltipType {
   /**
    * tooltip color
    */
-  color?: ColorType;
+  color?: ColorType | PaletteType | string;
+  /**
+   * text color
+   */
+  textColor?: ColorType | PaletteType | string;
   /**
    * tooltip placement
    */
@@ -109,6 +338,10 @@ export interface CssProp {
    * css classname(s)
    */
   className?: string;
+  /**
+   * direction
+   */
+  dir?: "ltr" | "rtl";
 }
 
 export interface TestProps {
@@ -122,15 +355,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;
 
@@ -144,7 +369,6 @@ export interface RefProp<T = HTMLElement> {
 
 /* *********** */
 
-// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
 export type CallbackReturn<T = unknown> =
   | undefined
   | T
@@ -167,25 +391,6 @@ export type PolymorphicProps<AsTag extends ReactTag> = Omit<
   as?: AsTag;
 };
 
-export interface IconProps {
-  /**
-   * svg path / image url
-   */
-  icon?: string;
-  /**
-   * flip icon in rtl
-   */
-  rtlFlip?: boolean;
-  /**
-   * icon background color
-   */
-  iconBg?: ColorType | string;
-  /**
-   * icon color
-   */
-  iconColor?: ColorType | string;
-}
-
 export interface CollapseProps {
   /**
    * Allow collapsing
@@ -222,11 +427,22 @@ export interface TooltipProp {
   tooltip?: string | TooltipType;
 }
 
-export interface ChildProp<T = JSX.Element> {
+export type ReactElement =
+  | React.ReactElement
+  | string
+  | number
+  | bigint
+  | Iterable<React.ReactNode>
+  | React.ReactPortal
+  | boolean
+  | null
+  | undefined;
+
+export interface ChildProp<T = ReactElement> {
   children: Elements<T>;
 }
 
-export interface ChildrenProp<T = JSX.Element> {
+export interface ChildrenProp<T = ReactElement> {
   children: Elements<T> | Array<Elements<T>>;
 }
 
@@ -244,3 +460,33 @@ export interface ScrollObject extends PositionObject, SizeObject {
   scrollWidth?: number;
   scrollHeight: number;
 }
+
+export type ArrayType<T extends readonly any[] | ArrayLike<any> | undefined> =
+  T extends readonly any[]
+    ? T[number]
+    : T extends ArrayLike<any>
+      ? T[number]
+      : undefined;
+
+export type Complete<T> = {
+  [P in keyof Required<T>]: Pick<T, P> extends Required<Pick<T, P>>
+    ? T[P]
+    : T[P] | undefined;
+};
+
+export type NestedKeys<T> = T extends object
+  ? {
+      [K in keyof T]: K extends string | number
+        ? T[K] extends object
+          ? // Check for array type explicitly and handle it
+            T[K] extends readonly any[]
+            ? T[K][number] extends object
+              ? // Array of objects/items: return key with array index notation and recurse
+                `${K}.${NestedKeys<T[K][number]>}` | `${K}`
+              : `${K}`
+            : // Standard object: return key with dot notation and recurse
+              `${K}.${NestedKeys<T[K]>}` | `${K}`
+          : `${K}`
+        : never;
+    }[keyof T]
+  : "";

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;
@@ -43,17 +47,13 @@ const AbbrText = ({ color, children, tooltip, content }: AbbrTextProps) => {
     [tooltip],
   );
   const tooltipProps = useMemo(() => {
-    return { ...getTooltipProps(tooltip), copyContent: content };
+    return tooltip ? { ...getTooltipProps(tooltip), copyContent: content } : {};
   }, [tooltip, content]);
 
   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
    */
@@ -82,7 +88,34 @@ export interface AbbrProps extends ChildProp<string>, CssProp {
 }
 
 /**
- * Typography abbr component to wrap text parts in `abbr` with tooltip
+ * A component that renders abbreviated text with tooltips for additional information.
+ * It allows you to define a list of abbreviations, each with a tooltip and optional color.
+ * The component will tokenize the children text and replace matching parts with the abbreviated version.
+ * It supports a copy action that can either copy the text or the tooltip content.
+ * This component is useful for displaying technical terms or acronyms in a user-friendly way,
+ * while providing additional context through tooltips.
+ *
+ * @param {AbbrProps} props - The properties for the Abbr component.
+ * @returns {JSX.Element} The rendered Abbr component.
+ *
+ * @example
+ * ```jsx
+ * <Abbr
+ * abbr={[
+ *   ["HTML", "HyperText Markup Language", "primary"],
+ *   ["CSS", "Cascading Style Sheets", "secondary"],
+ *   ["JS", "JavaScript", "success"],
+ * ]}
+ * className="text-sm"
+ * copyContent="tooltip"
+ * >
+ *   Learn more about HTML, CSS, and JS.
+ * </Abbr>
+ * // Renders the text with abbreviations for HTML, CSS, and JS,
+ * // each with a tooltip showing the full form and colored according to the specified color.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--abbr} for more details.
  */
 export const Abbr = ({
   children,
@@ -109,6 +142,7 @@ export const Abbr = ({
 
   /** ***************** tokenize text with abbr list *******************/
   const inner = useMemoDebugger(
+    // eslint-disable-next-line @typescript-eslint/promise-function-async
     () => {
       if (isString(children)) {
         if (!isEmpty(abbr)) {