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

package/src/core/boundary/ErrorBoundary.tsx

@@ -29,7 +29,6 @@ import { Fragment } from "react/jsx-runtime";
 import { useMemoDebugger } from "../../hooks/useEffectDebugger";
 import { usePropToggle } from "../../hooks/usePropToggle";
 import { type ChildrenProp } from "../../types";
-import classes from "./ErrorBoundary.module.css";
 import { ErrorIcon } from "./ErrorIcon";
 import { useGlobals } from "../../context/Global";
 
@@ -53,7 +52,7 @@ const ErrorMessage = ({ error, errorElement }: KeyValue) => {
   return (
     <Fragment>
       <ErrorIcon />
-      <div className={classNames(classes.boundaryMessage, "p-2")}>
+      <div className={classNames("fabric-boundaryMessage", "p-2")}>
         <EE error={error} />
       </div>
     </Fragment>
@@ -64,10 +63,12 @@ const ErrorStack = ({ error, stack }: KeyValue) => {
   const [show, toggleShow] = usePropToggle(false);
   useLogger().error(error, {}, stack);
   return (
-    <div className={classNames(classes.boundaryDetail, "overflow-hidden grid")}>
+    <div
+      className={classNames("fabric-boundaryDetail", "overflow-hidden grid")}
+    >
       <div
         className={classNames(
-          classes.boundaryLink,
+          "fabric-boundaryLink",
           "px-2 py-1 text-xs text-end",
         )}
       >
@@ -78,7 +79,7 @@ const ErrorStack = ({ error, stack }: KeyValue) => {
       {show && (
         <div
           className={classNames(
-            classes.boundaryStack,
+            "fabric-boundaryStack",
             "overflow-auto p-2 text-xs border-t",
           )}
         >
@@ -122,13 +123,13 @@ export class ErrorBoundary extends Component<
       return (
         <div
           className={classNames(
-            classes.errorBoundary,
+            "fabric-errorBoundary",
             "grid grid-rows-1 overflow-hidden p-0.5 rounded-capped",
           )}
         >
           <div
             className={classNames(
-              classes.boundaryContent,
+              "fabric-boundaryContent",
               "overflow-hidden grid rounded-capped",
             )}
           >

package/src/core/boundary/ErrorIcon.tsx

@@ -22,13 +22,12 @@
  */
 
 import classNames from "classnames";
-import classes from "./ErrorBoundary.module.css";
 
 export const ErrorIcon = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 64 64"
-    className={classNames(classes.boundaryIcon, "size-6 m-2")}
+    className={classNames("fabric-boundaryIcon", "size-6 m-2")}
   >
     <path
       fill="#808080"

package/src/core/content/Content.tsx

@@ -22,19 +22,18 @@
  */
 
 import classNames from "classnames";
-import { useImperativeHandle } from "react";
+import { type MouseEvent, useImperativeHandle } from "react";
 import { useDebounce } from "../../hooks/useDebounce";
 import { useResizeObserver } from "../../hooks/useResizeObserver";
 import {
   type ChildrenProp,
   type CssProp,
-  type PositionObject,
   type RefProp,
+  type ScrollObject,
   type SizeObject,
   type TestProps,
 } from "../../types";
 import { ErrorBoundary } from "../boundary/ErrorBoundary";
-import classes from "./Content.module.css";
 
 export interface ContentProps
   extends ChildrenProp,
@@ -44,7 +43,7 @@ export interface ContentProps
   /**
    * scroll vevent handler
    */
-  onScroll?: (event: PositionObject) => void;
+  onScroll?: (scroll: ScrollObject, event: MouseEvent<HTMLDivElement>) => void;
   /**
    * scroll vevent handler
    */
@@ -65,13 +64,19 @@ export const Content = ({
 }: ContentProps) => {
   const resizeHandle = useResizeObserver(onResize);
   const scrollHandler = useDebounce(
-    (e: React.UIEvent<HTMLDivElement>) => {
-      onScroll?.({
-        // @ts-expect-error ignore
-        left: e.target.scrollLeft,
-        // @ts-expect-error ignore
-        top: e.target.scrollTop,
-      });
+    (e: MouseEvent<HTMLDivElement>) => {
+      const el = e.target as HTMLElement;
+      onScroll?.(
+        {
+          left: el.scrollLeft,
+          top: el.scrollTop,
+          scrollHeight: el.scrollHeight,
+          scrollWidth: el.scrollWidth,
+          width: el.offsetWidth,
+          height: el.offsetHeight,
+        },
+        e,
+      );
     },
     [onScroll],
   );
@@ -83,7 +88,7 @@ export const Content = ({
       data-test-value={testValue}
       ref={resizeHandle}
       onScroll={scrollHandler}
-      className={classNames(classes.content, "area-content", className)}
+      className={classNames("fabric-content", "area-content", className)}
     >
       <ErrorBoundary>{children}</ErrorBoundary>
     </section>

package/src/core/headfoot/HeadFoot.tsx

@@ -22,27 +22,15 @@
  */
 
 import classNames from "classnames";
-import { useMemoDebugger } from "../../hooks/useEffectDebugger";
 import {
   type AriaProps,
   type ChildrenProp,
-  type ColorWithGrays,
   type CssProp,
   type TestProps,
 } from "../../types";
-import { getBgClass, getColor, getColorClass } from "../../utils";
-import classes from "./HeadFoot.module.css";
 
 interface BaseProps extends CssProp, AriaProps, ChildrenProp, TestProps {
   dir?: "ltr" | "rtl";
-  /**
-   * background color
-   */
-  bg?: ColorWithGrays | string;
-  /**
-   * background color
-   */
-  color?: ColorWithGrays | string;
 }
 
 type DefaultProps = BaseProps & { flex?: false };
@@ -58,8 +46,6 @@ const HeadFoot = ({
   as: E,
   children,
   className,
-  bg,
-  color,
   flex,
   area,
   dir,
@@ -67,37 +53,18 @@ const HeadFoot = ({
   justify = "start",
   ...aria
 }: KeyValue & { as: "header" | "footer" }) => {
-  /** ***************** style map *******************/
-  const styles = useMemoDebugger(
-    () => {
-      const s: KeyValue = {};
-      if (bg) {
-        s.backgroundColor = getColor(bg);
-      }
-      if (color) {
-        s.color = getColor(color);
-      }
-      return s;
-    },
-    [bg],
-    "HeadFoot styles",
-  );
-
   return (
     <E
       dir={dir}
       className={classNames(
-        classes.headfoot,
+        "fabric-headfoot",
         className,
-        bg && getBgClass(bg),
-        color && getColorClass(color),
         area === "head" ? "area-head" : "area-foot",
         `leading-none`,
-        flex && "flex flex-nowrap gap-px",
+        flex && "flex flex-nowrap",
         align && `items-${align}`,
         justify && `justify-${justify}`,
       )}
-      style={styles}
       {...aria}
     >
       {children}

package/src/core/page/Page.tsx

@@ -25,7 +25,6 @@ import classNames from "classnames";
 import { Loading } from "../../components/animations/Animations";
 import { Icon } from "../../components/icon/Icon";
 import { type ChildrenProp, type IconProps, type TestProps } from "../../types";
-import classes from "./Page.module.css";
 
 export interface PageProps extends IconProps, ChildrenProp, TestProps {
   /**
@@ -66,8 +65,9 @@ export const Page = ({
     <div
       data-testid={testId}
       data-test-value={testValue}
+      data-loading={loading}
       className={classNames(
-        classes.page,
+        "fabric-page",
         "overflow-hidden grid area-content",
         paper && "shadow-paper m-[6px] rounded-capped",
       )}
@@ -76,7 +76,7 @@ export const Page = ({
         <div
           data-ref="pageTitle"
           className={classNames(
-            classes.pageTitle,
+            "fabric-pageTitle",
             "select-none flex gap-1 items-center justify-center px-1 py-0.5 font-medium text-center",
             titleClassName,
           )}

package/src/core/responsive/Responsive.tsx

@@ -29,7 +29,6 @@ import {
   type SizeTypeWithZero,
   type TestProps,
 } from "../../types";
-import classes from "./Responsive.module.css";
 
 export interface ContainerProps
   extends AriaProps,
@@ -81,7 +80,7 @@ export interface ColProps
   /**
    * column flex
    */
-  flex?: "auto" | "fill" | "full";
+  flex?: "auto" | "fill" | "full" | "initial" | "content";
   /**
    * stretch inner content
    */
@@ -101,7 +100,7 @@ export const Container = ({
   return (
     <div
       className={classNames(
-        classes.container,
+        "fabric-container",
         className,
         !fullWidth && "container mx-auto",
       )}
@@ -126,7 +125,7 @@ export const Row = ({
   return (
     <div
       className={classNames(
-        classes.row,
+        "fabric-row",
         className,
         "flex",
         orient === "row" && "flex-row",
@@ -156,12 +155,14 @@ export const Col = ({
   return (
     <div
       className={classNames(
-        classes.col,
+        "fabric-col",
         className,
-        stretchContent && classes.stretchContent,
-        flex === "auto" && "flex-content",
+        stretchContent && "stretchContent",
         flex === "fill" && "flex-1",
         flex === "full" && "flex-full",
+        flex === "auto" && "flex-auto",
+        flex === "initial" && "flex-initial",
+        flex === "content" && "flex-none",
         align && `self-${align}`,
       )}
       {...aria}

package/src/core/section/Section.tsx

@@ -24,7 +24,6 @@
 import classNames from "classnames";
 import { type ChildrenProp, type CssProp, type RefProp } from "../../types";
 import { ErrorBoundary } from "../boundary/ErrorBoundary";
-import classes from "./Section.module.css";
 
 /**
  * The section component provides a structured layout used within a page to organize and display content in a sectioned format, ensuring a consistent and intuitive user experience.
@@ -43,7 +42,7 @@ export const Section = ({
       dir={dir}
       ref={ref}
       className={classNames(
-        classes.section,
+        "fabric-section",
         className,
         "grid area-content overflow-hidden",
       )}

package/src/core/theme/ThemeProvider.tsx

@@ -25,7 +25,6 @@ import { isColor } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { useMemo } from "react";
 import { type ChildrenProp } from "../../types";
-import classes from "./Theme.module.css";
 
 export interface ThemeProps {
   /**
@@ -36,9 +35,9 @@ export interface ThemeProps {
    * branding css className
    *
    * .branding {
-   *  --primary: #color;
-   *  --accent: #color;
-   *  --tint: #color;
+   *  --color-primary: #color;
+   *  --color-accent: #color;
+   *  --color-tint: #color;
    * }
    */
   branding?: string;
@@ -57,7 +56,7 @@ export interface ThemeProps {
   /**
    * component rounding
    */
-  rounding?: "minimal" | "normal" | "full";
+  rounding?: "sm" | "md" | "full";
 }
 
 /**
@@ -75,22 +74,22 @@ export const ThemeProvider = ({
   const styles = useMemo(() => {
     const ret: KeyValue = {};
     if (primaryColor && isColor(primaryColor)) {
-      ret["--primary"] = primaryColor;
+      ret["--color-primary"] = primaryColor;
     }
     if (primaryColor && !isColor(primaryColor)) {
-      ret["--primary"] = `var(--${primaryColor})`;
+      ret["--color-primary"] = `var(--color-${primaryColor})`;
     }
     if (accentColor && isColor(accentColor)) {
-      ret["--accent"] = accentColor;
+      ret["--color-accent"] = accentColor;
     }
     if (accentColor && !isColor(accentColor)) {
-      ret["--accent"] = `var(--${accentColor})`;
+      ret["--color-accent"] = `var(--color-${accentColor})`;
     }
     if (tintColor && isColor(tintColor)) {
-      ret["--tint"] = tintColor;
+      ret["--color-tint"] = tintColor;
     }
     if (tintColor && !isColor(tintColor)) {
-      ret["--tint"] = `var(--${tintColor})`;
+      ret["--color-tint"] = `var(--color-${tintColor})`;
     }
     return ret;
   }, [primaryColor, accentColor, tintColor]);
@@ -101,7 +100,7 @@ export const ThemeProvider = ({
       data-color-scheme={colorScheme}
       data-rounding={rounding}
       className={classNames(
-        classes.themeProvider,
+        "fabric-themeProvider",
         "contents theme-base",
         branding,
       )}

package/src/core/viewport/Viewport.tsx

@@ -23,7 +23,6 @@
 
 import classNames from "classnames";
 import { type PropsWithChildren } from "react";
-import classes from "./Viewport.module.css";
 
 /**
  * The application viewport is the main container that defines the visible area where content is displayed and interacted with.
@@ -33,7 +32,7 @@ export const Viewport = ({ children }: PropsWithChildren) => {
     <div
       data-ref="viewport"
       className={classNames(
-        classes.viewport,
+        "fabric-viewport",
         "grid overflow-hidden absolute inset-0",
       )}
     >

package/src/hooks/useNavigator.tsx

@@ -21,24 +21,29 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 
 export const useNavigator = (totalCount = 0, defaultIndex = 0) => {
   const [currentIndex, setCurrentIndex] = useState(defaultIndex);
+  const refCurrent = useRef(defaultIndex);
+
   const onNavigate = useCallback(
     (dir: 1 | -1) => {
       if (dir === -1) {
-        setCurrentIndex(currentIndex > 0 ? currentIndex - 1 : totalCount - 1);
+        refCurrent.current =
+          refCurrent.current > 0 ? refCurrent.current - 1 : totalCount - 1;
       }
       if (dir === 1) {
-        setCurrentIndex(currentIndex + 1 < totalCount ? currentIndex + 1 : 0);
+        refCurrent.current =
+          refCurrent.current + 1 < totalCount ? refCurrent.current + 1 : 0;
       }
+      setCurrentIndex(refCurrent.current);
     },
-    [currentIndex, totalCount],
+    [totalCount],
   );
   const headLabel = useMemo(
     () => (
-      <span className="text-muted leading-none">
+      <span className="text-muted leading-none select-none">
         {currentIndex + 1}/{totalCount}
       </span>
     ),

package/src/hooks/useOverlayService.tsx

@@ -21,12 +21,15 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { useState, type FC, type ReactNode } from "react";
+import {
+  useState,
+  type ComponentProps,
+  type ElementType,
+  type ReactNode,
+} from "react";
+import { type ModalProps } from "../types";
 
-type OverlayComponent = FC<{
-  onClose: (args?: AnyObject) => void;
-  [key: string]: AnyObject;
-}>;
+type OverlayComponent = ElementType<ModalProps<AnyObject>>;
 
 export const useOverlayService = (
   ModalOrFlyout: OverlayComponent,
@@ -36,7 +39,10 @@ export const useOverlayService = (
 ] => {
   const [Overlay, setOverlay] = useState<ReactNode | null>(null);
 
-  const openOverlay = async ({ onClose, ...props }: KeyValue = {}) => {
+  const openOverlay = async ({
+    onClose,
+    ...props
+  }: ComponentProps<typeof ModalOrFlyout> = {}) => {
     return await new Promise((resolve) => {
       const handleClose = (args: AnyObject) => {
         setOverlay(null);

package/src/hotkeys/HotKeyLabel.tsx

@@ -54,7 +54,7 @@ export const HotKeyLabel = ({
   );
 
   return (
-    <kbd className="hotkey-label inline-flex gap-1 select-none self-center font-mono items-center text-[0.625rem] leading-4 bg-tint-500/10 text-base/50 whitespace-nowrap rounded px-2 mx-1">
+    <kbd className="hotkey-label inline-flex gap-1 select-none self-center font-mono items-center text-[0.625rem] leading-4 bg-tint-500/20 text-tint-900/65 whitespace-nowrap rounded px-2 mx-1">
       {label}
     </kbd>
   );

package/src/hotkeys/HotKeyWrapper.tsx

@@ -76,7 +76,9 @@ export const HotKeyWrapper: FC<PropsWithChildren> = memo(
       const find = items.find(
         ({ key, alt, ctrl, meta, shift }: KeyValue) =>
           (key.toLowerCase() === keyCode.toLowerCase() ||
-            key.toLowerCase() === code.toLowerCase()) &&
+            key.toLowerCase() === code.toLowerCase() ||
+            // work around for macos alt+key issue
+            `key${key.toLowerCase()}` === code.toLowerCase()) &&
           alt === altKey &&
           ctrl === ctrlKey &&
           meta === metaKey &&

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.tsx

@@ -36,11 +36,10 @@ 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 { Title } from "../../typography/Title";
-import { getBorderClass, getColorClass } from "../../utils";
-import classes from "./Alert.module.css";
+import { getColor } from "../../utils";
 
 export interface AlertProps extends Omit<IconProps, "iconBg" | "iconColor"> {
   /**
@@ -58,7 +57,7 @@ export interface AlertProps extends Omit<IconProps, "iconBg" | "iconColor"> {
   /**
    * theme color
    */
-  color?: ColorType;
+  color?: ColorState;
   /**
    * extra action button
    */
@@ -116,35 +115,20 @@ export const Alert = ({
   const iconType = useMemo(() => {
     if (icon)
       return (
-        <Icon icon={icon} size="md" rtlFlip={rtlFlip} color={color + "-600"} />
+        <Icon icon={icon} size="md" rtlFlip={rtlFlip} color={`${color}-600`} />
       );
     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`}
           />
         );
     }
@@ -172,17 +156,19 @@ export const Alert = ({
       <FloatingOverlay
         lockScroll
         style={{ zIndex: "var(--z-overlay-mask)" }}
-        className="bg-base/50 backdrop-blur-sm grid place-items-center"
+        className="bg-tint-100/50 backdrop-blur-sm grid place-items-center"
       >
         <FloatingFocusManager context={context}>
           <dialog
             role="alertdialog"
             className={classNames(
-              classes.alert,
-              getBorderClass(color + "-300"),
+              "fabric-alert",
               "grid bg-base border-2 pointer-events-auto overflow-hidden rounded-capped select-none",
               "min-w-72 max-w-sm p-6 relative outline-0 shadow-lg",
             )}
+            style={{
+              borderColor: getColor(`${color}-300`),
+            }}
             ref={refs.setFloating}
             {...getFloatingProps()}
           >
@@ -190,15 +176,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(
-                  "border rounded focus:border-primary-500",
+                  `area-[input] appearance-none outline-0 border rounded w-full px-2 py-1`,
                 )}
+                style={
+                  {
+                    borderColor: getColor(`${color}-200`),
+                    "--tw-ring-color": getColor(`${color}-500`),
+                  } as AnyObject
+                }
                 ref={(e) => e != null && setTimeout(() => e.focus(), 100)}
                 onBlur={(e) => e.target.focus()}
                 onChange={(e) => setValue(e.target.value)}
@@ -228,7 +222,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>