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

package/src/overlays/alert/Alert.tsx

@@ -31,7 +31,7 @@ import {
   useRole,
 } from "@floating-ui/react";
 import classNames from "classnames";
-import { useCallback, useLayoutEffect, useMemo } from "react";
+import { useCallback, useLayoutEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { AnimationIndicator } from "../../components/animations/Animations";
 import { Button } from "../../components/button/Button";
@@ -71,6 +71,14 @@ export interface AlertProps extends Omit<IconProps, "iconBg" | "iconColor"> {
    * cancel label
    */
   cancelLabel?: string;
+  /**
+   * placeholder for prompt
+   */
+  placeholder?: string;
+  /**
+   * default value for prompt
+   */
+  defaultValue?: string;
 }
 
 export const Alert = ({
@@ -85,8 +93,11 @@ export const Alert = ({
   type,
   okLabel,
   cancelLabel,
+  placeholder,
+  defaultValue,
 }: AlertProps) => {
   const { t } = useTranslation("core");
+  const [value, setValue] = useState(defaultValue);
   const { refs, context } = useFloating({
     open: true,
     onOpenChange: () => {
@@ -181,7 +192,19 @@ export const Alert = ({
 
             <Title className="font-medium area-[title]">{title}</Title>
             <p className="area-[message] py-4">{message}</p>
-            <div className="area-[message]">{message}</div>
+            {type === "prompt" && (
+              <input
+                value={value}
+                placeholder={placeholder}
+                className={classNames(
+                  "border rounded focus:border-primary-500",
+                )}
+                ref={(e) => e != null && setTimeout(() => e.focus(), 100)}
+                onBlur={(e) => e.target.focus()}
+                onChange={(e) => setValue(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && handleClose(value)}
+              />
+            )}
             <div className="flex gap-1 justify-center flex-nowrap pt-2 area-[actions]">
               <div
                 className="contents"

package/src/types/icons.ts

@@ -90,6 +90,11 @@ export module CoreIcons {
   export const collapse =
     "M5 2c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM5 4h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v14c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293zM8 13h8c0.552 0 1-0.448 1-1s-0.448-1-1-1h-8c-0.552 0-1 0.448-1 1s0.448 1 1 1z";
 
+  export const expandActive =
+    "M17,13H13V17H11V13H7V11H11V7H13V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z";
+  export const collapseActive =
+    "M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z";
+
   export const expandAll =
     "M5.293 16.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.414zM18.707 7.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.414z";
   export const colapseAll =

package/src/types/index.ts

@@ -145,7 +145,10 @@ export interface RefProp<T = HTMLElement> {
 /* *********** */
 
 // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
-export type CallbackReturn<T = unknown> = void | T | Promise<T | void>;
+export type CallbackReturn<T = unknown> =
+  | undefined
+  | T
+  | Promise<T | undefined>;
 
 export type ReactTag = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
 
@@ -155,7 +158,7 @@ export type PropsOf<AsTag extends ReactTag> = AsTag extends React.ElementType
 
 export type PolymorphicProps<AsTag extends ReactTag> = Omit<
   PropsOf<AsTag>,
-  "children" | "as" | "className"
+  "children" | "as" | "className" | "onClick"
 > & {
   /**
    * The component used for the root node.

package/src/typography/Abbr.tsx

@@ -26,7 +26,7 @@ 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 } from "../types";
+import { type ChildProp, type ColorType, type CssProp } from "../types";
 import { getColor, getColorClass } from "../utils";
 import classes from "./Typography.module.css";
 
@@ -64,7 +64,7 @@ const AbbrText = ({ color, children, tooltip, content }: AbbrTextProps) => {
   );
 };
 
-export interface AbbrProps extends ChildProp<string> {
+export interface AbbrProps extends ChildProp<string>, CssProp {
   /**
    * content to copy using the tooltip copy action
    */
@@ -87,6 +87,7 @@ export interface AbbrProps extends ChildProp<string> {
 export const Abbr = ({
   children,
   abbr,
+  className,
   renderer,
   copyContent = "text",
 }: AbbrProps) => {
@@ -148,5 +149,5 @@ export const Abbr = ({
   );
 
   /** ***************** component *******************/
-  return <span>{inner}</span>;
+  return <span className={className}>{inner}</span>;
 };

package/src/typography/Link.tsx

@@ -22,6 +22,7 @@
  */
 
 import classNames from "classnames";
+import { type MouseEventHandler } from "react";
 import { useMemoDebugger } from "../hooks/useEffectDebugger";
 import {
   type AriaProps,
@@ -52,6 +53,8 @@ export interface LinkProps extends ChildrenProp, CssProp, RefProp, AriaProps {
    * font family
    */
   family?: "sans" | "serif" | "mono";
+
+  onClick?: MouseEventHandler;
 }
 
 /**