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

package/src/index.ts

@@ -40,9 +40,13 @@ export * from "./hooks/useStorage";
 
 export { HotKey } from "./hotkeys/HotKey";
 export { HotKeyLabel } from "./hotkeys/HotKeyLabel";
+export { HotKeyWrapper } from "./hotkeys/HotKeyWrapper";
 
+export { type ModalProps } from "./types";
 export { CoreIcons } from "./types/icons";
 
+export { cloneChildren } from "./utils";
+
 export {
   ApplicationProvider,
   useApplicationContext,

package/src/overlays/alert/Alert.module.css

@@ -25,7 +25,7 @@
   .alert {
     z-index: var(--z-overlay);
 
-    grid-template: "icon title" auto "icon message" auto "input input" auto "actions actions" auto / auto 1fr;
+    grid-template: "icon title" auto "message message" auto "input input" auto "actions actions" auto / auto 1fr;
     gap: 0.5rem 1rem;
 
     margin-top: -100%;

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: () => {
@@ -179,8 +190,23 @@ export const Alert = ({
               {iconType}
             </div>
 
-            <Title className="font-medium area-[title]">{title}</Title>
-            <p className="area-[message] py-4">{message}</p>
+            <Title className="font-medium area-[title] self-center">
+              {title}
+            </Title>
+            <div className="area-[message] py-4">{message}</div>
+            {type === "prompt" && (
+              <input
+                value={value}
+                placeholder={placeholder}
+                className={classNames(
+                  `area-[input] appearance-none outline-0 ring-${color}-500 border rounded border-${color}-200 w-full px-2 py-1`,
+                )}
+                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"
@@ -204,7 +230,7 @@ export const Alert = ({
                 size="sm"
                 variant="solid"
                 color={color}
-                onClick={() => handleClose(true)}
+                onClick={() => handleClose(type === "prompt" ? value : true)}
               >
                 {okLabel ?? t("action.ok", "OK")}
               </Button>

package/src/overlays/flyout/Flyout.tsx

@@ -30,11 +30,14 @@ import {
   useInteractions,
   useRole,
 } from "@floating-ui/react";
+import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
   Fragment,
+  isValidElement,
   useCallback,
   useEffect,
+  type ElementType,
   type PropsWithChildren,
 } from "react";
 import { Loading } from "../../components/animations/Animations";
@@ -55,8 +58,9 @@ import classes from "./Flyout.module.css";
 export interface FlyoutProps
   extends AriaProps,
     TestProps,
-    IconProps,
+    Omit<IconProps, "icon">,
     ChildrenProp {
+  icon?: string | ElementType<IconProps>;
   /**
    * flyout alignment
    */
@@ -140,6 +144,7 @@ export const Flyout = ({
   });
   const dismiss = useDismiss(context, {
     outsidePressEvent: "mousedown",
+    outsidePress: !hideMask,
     escapeKey: true,
   });
   const role = useRole(context);
@@ -173,9 +178,6 @@ export const Flyout = ({
   useEffect(() => {
     setTimeout(() => {
       refs.floating.current && (refs.floating.current.dataset.show = "true");
-      refs.floating.current
-        ?.querySelector<HTMLElement>('[role="dialog"]')
-        ?.focus();
     }, 50);
   }, []);
 
@@ -214,68 +216,67 @@ export const Flyout = ({
     <FloatingPortal>
       <Wrapper>
         <FloatingFocusManager context={context}>
-          <Wrapper>
-            <div
-              data-align={align}
-              className={classNames(
-                classes.flyout,
-                "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl",
-                align === "start" ? "start-0" : "end-0",
-                size === "sm" && "w-[20rem]",
-                size === "md" && "w-[40rem]",
-                size === "lg" && "w-[60vw]",
-                size === "xl" && "w-[80vw]",
-              )}
-              style={{
-                width,
-                minWidth,
-              }}
-              onMouseUpCapture={tryClosing}
-              ref={refs.setFloating}
-              {...getFloatingProps()}
-              {...aria}
-              {...aria}
-            >
-              <HotKeyWrapper>
-                <Header
-                  flex
-                  className={classNames(classes.flyoutHeader, headerClassName)}
-                >
-                  {icon && (
-                    <Icon
-                      icon={icon}
-                      bg={iconBg}
-                      color={iconColor}
-                      className={classNames(iconClassName, "p-1")}
-                      rtlFlip={rtlFlip}
-                    />
-                  )}
-                  <label className="flex-1 truncate py-2 px-1">{title}</label>
-                  {actions}
+          <div
+            data-align={align}
+            className={classNames(
+              classes.flyout,
+              "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl",
+              align === "start" ? "start-0" : "end-0",
+              size === "sm" && "w-[20rem]",
+              size === "md" && "w-[40rem]",
+              size === "lg" && "w-[60vw]",
+              size === "xl" && "w-[80vw]",
+            )}
+            style={{
+              width,
+              minWidth,
+            }}
+            onMouseUpCapture={tryClosing}
+            ref={refs.setFloating}
+            {...getFloatingProps()}
+            {...aria}
+            {...aria}
+          >
+            <HotKeyWrapper>
+              <Header
+                flex
+                className={classNames(classes.flyoutHeader, headerClassName)}
+              >
+                {isString(icon) && (
                   <Icon
-                    data-ref="panelClose"
-                    className={classNames(
-                      classes.panelAction,
-                      "cursor-pointer p-1 text-xl self-stretch",
-                    )}
-                    icon={CoreIcons.close}
-                    onClick={() => handleClose(false)}
+                    icon={icon}
+                    bg={iconBg}
+                    color={iconColor}
+                    className={classNames(iconClassName, "p-1")}
+                    rtlFlip={rtlFlip}
                   />
-                </Header>
-                {loading && <Loading />}
-                <div
-                  role="dialog"
+                )}
+                {isValidElement(icon) && icon}
+                <label className="flex-1 truncate py-2 px-1">{title}</label>
+                {actions}
+                <Icon
+                  data-ref="panelClose"
                   className={classNames(
-                    classes.flyoutBody,
-                    "flex-1 grid overflow-hidden",
+                    classes.panelAction,
+                    "cursor-pointer p-1 text-xl self-stretch",
                   )}
-                  {...({ tabIndex: 0 } as AnyObject)}
-                >
-                  {children}
-                </div>
-              </HotKeyWrapper>
-            </div>
-          </Wrapper>
+                  icon={CoreIcons.close}
+                  onClick={() => handleClose(false)}
+                />
+              </Header>
+              {loading && <Loading />}
+              <div
+                role="dialog"
+                className={classNames(
+                  classes.flyoutBody,
+                  "flex-1 grid overflow-hidden",
+                )}
+                {...({ tabIndex: 0 } as AnyObject)}
+              >
+                {children}
+              </div>
+            </HotKeyWrapper>
+          </div>
         </FloatingFocusManager>
       </Wrapper>
     </FloatingPortal>

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";
@@ -50,8 +56,9 @@ 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 +102,7 @@ export interface ModalProps
   /**
    * close handler
    */
-  onClose: (...args: AnyObject) => void;
+  onClose?: (...args: AnyObject) => void;
   /**
    * before close handler, return false to prevent close
    */
@@ -163,9 +170,6 @@ export const Modal = ({
   useEffect(() => {
     setTimeout(() => {
       refs.floating.current && (refs.floating.current.dataset.show = "true");
-      refs.floating.current
-        ?.querySelector<HTMLElement>("[role='dialog']")
-        ?.focus();
     }, 50);
   }, []);
 
@@ -174,7 +178,7 @@ export const Modal = ({
       <FloatingOverlay
         lockScroll
         style={{ zIndex: "var(--z-overlay-mask)" }}
-        className="bg-base/50 backdrop-blur-sm grid place-items-center"
+        className="bg-base/20 backdrop-blur-sm grid place-items-center"
       >
         <FloatingFocusManager context={context}>
           <dialog
@@ -203,7 +207,7 @@ export const Modal = ({
                 flex
                 className={classNames(classes.modalHeader, headerClassName)}
               >
-                {icon && (
+                {isString(icon) && (
                   <Icon
                     icon={icon}
                     bg={iconBg}
@@ -212,6 +216,7 @@ export const Modal = ({
                     rtlFlip={rtlFlip}
                   />
                 )}
+                {isValidElement(icon) && icon}
                 <label className="flex-1 truncate py-2 px-1">{title}</label>
                 {actions}
                 <Icon

package/src/overlays/tooltip/Tooltip.module.css

@@ -24,30 +24,30 @@
 @layer comp {
   .tooltip {
     z-index: var(--z-tooltip);
-    color: theme(backgroundColor.invert);
+    color: theme(backgroundColor.dimmed);
 
     &[data-color="primary"] {
-      color: theme(colors.primary.600);
+      color: theme(colors.primary.200);
     }
 
     &[data-color="accent"] {
-      color: theme(colors.accent.600);
+      color: theme(colors.accent.200);
     }
 
     &[data-color="info"] {
-      color: theme(colors.info.600);
+      color: theme(colors.info.200);
     }
 
     &[data-color="danger"] {
-      color: theme(colors.danger.600);
+      color: theme(colors.danger.200);
     }
 
     &[data-color="success"] {
-      color: theme(colors.success.600);
+      color: theme(colors.success.200);
     }
 
     &[data-color="warning"] {
-      color: theme(colors.warning.600);
+      color: theme(colors.warning.200);
     }
   }
 }

package/src/overlays/tooltip/Tooltip.tsx

@@ -153,7 +153,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} />
@@ -176,7 +176,7 @@ export const Tooltip = ({
             data-color={color}
             className={classNames(
               classes.tooltip,
-              "select-none text-sm not-italic flex py-1 px-2 rounded shadow-md bg-current",
+              "select-none text-sm not-italic flex py-1 px-2 !max-w-64 rounded shadow-md bg-current",
             )}
             ref={refs.setFloating}
             style={floatingStyles}
@@ -184,8 +184,8 @@ export const Tooltip = ({
           >
             <span
               className={classNames(
-                "font-medium text-invert flex-1",
-                isString(content) && "whitespace-pre-wrap",
+                "font-medium text-dimmed flex-1 break-all",
+                isString(content) && "whitespace-pre-wrap mixed-lang",
               )}
             >
               {content}

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 =
@@ -244,6 +249,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 =

package/src/types/index.ts

@@ -25,6 +25,10 @@
 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;
@@ -122,15 +126,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;
 
@@ -239,3 +235,8 @@ export interface SizeObject {
   width: number;
   height: number;
 }
+
+export interface ScrollObject extends PositionObject, SizeObject {
+  scrollWidth?: number;
+  scrollHeight: number;
+}

package/src/typography/{Link.tsx → Anchor.tsx}

@@ -36,7 +36,7 @@ import {
 import { getBgClass, getColor, getColorClass } from "../utils";
 import { TextSizeMap } from "./types";
 
-export interface LinkProps extends ChildrenProp, CssProp, RefProp, AriaProps {
+export interface AnchorProps extends ChildrenProp, CssProp, RefProp, AriaProps {
   /**
    * link background (CSS color / tailwind color)
    */
@@ -60,7 +60,7 @@ export interface LinkProps extends ChildrenProp, CssProp, RefProp, AriaProps {
 /**
  * Typography link component
  */
-export const Link = <Tag extends React.ElementType = "a">({
+export const Anchor = <Tag extends React.ElementType = "a">({
   ref,
   as,
   children,
@@ -70,7 +70,7 @@ export const Link = <Tag extends React.ElementType = "a">({
   family,
   size,
   ...aria
-}: LinkProps & PolymorphicProps<Tag>) => {
+}: AnchorProps & PolymorphicProps<Tag>) => {
   /** ***************** style map *******************/
   const styles = useMemoDebugger(
     () => {

package/src/typography/Text.tsx

@@ -165,7 +165,7 @@ export const Text = ({
         <div
           className={classNames(
             classes.text,
-            "text-reset mixed-lang px-[2px] whitespace-pre-wrap",
+            "mixed-lang px-[2px] whitespace-pre-wrap",
             family && `font-${family}`,
             bg && getBgClass(bg),
             color && getColorClass(color),

package/src/typography/Title.tsx

@@ -110,7 +110,6 @@ export const Title = ({
     <E
       className={classNames(
         classes.title,
-        "px-[2px] py-1 truncate whitespace-pre-wrap",
         className,
         family && `font-${family}`,
         !as && "text-lg",

package/src/typography/Typography.module.css

@@ -23,11 +23,13 @@
 
 @layer comp {
   .title {
+    padding: 4px 2px;
     line-height: 1.125;
+    white-space: prewrap;
   }
 
   .moreLink {
-    margin: -0.25rem 0 1rem;
+    margin: -0.25rem 0 0.25rem;
     text-align: end;
 
     & > span {
@@ -57,7 +59,7 @@
   }
 
   .mark {
-    --mark-color: var(--accent);
+    --mark-color: var(--primary);
 
     background-color: color-mix(
       in lab,

package/src/typography/index.ts

@@ -22,8 +22,8 @@
  */
 
 export { Abbr } from "./Abbr";
+export { Anchor } from "./Anchor";
 export { Copy } from "./Copy";
-export { Link } from "./Link";
 export { Mark } from "./Mark";
 export { Text } from "./Text";
 export { Title } from "./Title";

package/src/utils/cloneElement.ts

@@ -0,0 +1,44 @@
+/*
+ * 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.
+ */
+
+import { type ReactNode, Children, isValidElement } from "react";
+import { Fragment } from "react/jsx-runtime";
+
+export const cloneChildren = (
+  children: ReactNode,
+  callback: (child: ReactNode, index: number) => ReactNode,
+): ReactNode => {
+  return Children.map(children, (c: ReactNode) => {
+    if (isValidElement(c)) {
+      if (c.type === Fragment) {
+        // just compare to `Fragment`
+        return cloneChildren(c.props?.children, callback);
+      }
+      return c;
+    }
+    return c;
+  })
+    ?.flat()
+    .filter(Boolean)
+    .map(callback);
+};

package/src/utils/index.ts

@@ -24,5 +24,6 @@
 /* istanbul ignore file */
 
 export * from "./calculateDimensions";
+export * from "./cloneElement";
 export * from "./getColor";
 export * from "./nodeCheck";