@react-fabric/core 1.0.0-beta.5 → 1.0.0-beta.51

package/src/components/tabpanel/Tab.tsx

@@ -21,24 +21,26 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { type ReactElement, useMemo } from "react";
+import { Fragment, type ReactElement, useMemo } from "react";
+import { Tooltip } from "../../overlays";
 import {
   type AriaProps,
   type BadgeType,
   type CallbackReturn,
   type ChildrenProp,
-  type ColorType,
+  type ColorState,
   type CssProp,
   type IconProps,
   type PolymorphicProps,
   type RefProp,
   type TestProps,
+  type TooltipProp,
 } from "../../types";
 import { Badge, getBadgeProps } from "../badge/Badge";
 import { DropdownTool } from "../dropdown/DropdownTool";
 import { Icon } from "../icon/Icon";
-import classes from "./TabPanel.module.css";
 
 export interface TabProps
   extends Partial<ChildrenProp>,
@@ -46,7 +48,8 @@ export interface TabProps
     RefProp,
     AriaProps,
     TestProps,
-    IconProps {
+    IconProps,
+    TooltipProp {
   /**
    * tab id
    */
@@ -58,11 +61,11 @@ export interface TabProps
   /**
    * tab color
    */
-  color?: ColorType;
+  color?: ColorState;
   /**
    * tab badge
    */
-  badge?: BadgeType;
+  badge?: string | number | BadgeType;
   /**
    * disabled
    */
@@ -104,12 +107,11 @@ export const Tab = <Tag extends React.ElementType = "button">({
   onClose,
   // @ts-expect-error ignore
   active,
-  // @ts-expect-error ignore
-  minimal,
   onClick,
   tabFlex,
   color,
   actions,
+  tooltip,
   activeClassName,
   ...aria
 }: TabProps & PolymorphicProps<Tag>) => {
@@ -117,63 +119,78 @@ export const Tab = <Tag extends React.ElementType = "button">({
     return getBadgeProps(badge);
   }, [badge]);
 
+  const minimal = useMemo(() => !label, [label]);
+
+  const tooltipProps = useMemo(() => {
+    if (isString(tooltip)) return { content: tooltip };
+
+    return tooltip ?? {};
+  }, [tooltip]);
+
   const E = as ?? "button";
+  const W = tooltip ? Tooltip : Fragment;
   return (
-    <E
-      data-id={id}
-      disabled={disabled}
-      data-color={color}
-      className={classNames(
-        classes.tabButton,
-        className,
-        active && "active pointer-events-none",
-        active && activeClassName,
-        disabled && "text-tint-500 pointer-events-none",
-        tabFlex ? "flex-1" : "flex-initial max-w-36 min-w-24",
-        "flex items-center justify-center px-1 rounded overflow-hidden",
-      )}
-      onClick={() => !active && onClick?.(id)}
-      ref={ref as AnyObject}
-      {...aria}
-    >
-      {icon && (
-        <Icon
-          icon={icon}
-          bg={iconBg}
-          color={iconColor}
-          rtlFlip={rtlFlip}
-          className="flex-content"
-        />
-      )}
-      {!minimal && (
-        <label className="flex-initial truncate text-center px-1 py-1">
-          {label}
-        </label>
-      )}
-      {badge && (
-        <Badge
-          {...badgeProps}
-          placement={minimal ? "end" : ""}
-          className={classNames("me-1", badgeProps.className)}
-        />
-      )}
-      {actions && active && (
-        <DropdownTool className="bg-base/20 me-1 z-5">{actions}</DropdownTool>
-      )}
-      {onClose && (
-        <span
-          role="none"
-          className={classNames(
-            "cursor-pointer me-1 opacity-65 hover:opacity-90 pointer-events-auto",
-          )}
-          onClick={(e) => {
-            onClose?.();
-            e.stopPropagation();
-          }}
-        >
-          &times;
-        </span>
-      )}
-    </E>
+    <W {...tooltipProps}>
+      <E
+        data-id={id}
+        disabled={disabled}
+        data-color={color}
+        data-inner-clickable
+        className={classNames(
+          "fabric-tabButton",
+          className,
+          active && "active pointer-events-none",
+          active && activeClassName,
+          disabled && "text-tint-500 pointer-events-none",
+          tabFlex ? "flex-1" : "flex-initial max-w-36",
+          minimal ? "min-w-6" : "min-w-18",
+          "flex items-center justify-center px-1 rounded overflow-hidden cursor-pointer",
+        )}
+        onClick={() => !active && onClick?.(id)}
+        ref={ref as AnyObject}
+        {...aria}
+      >
+        {icon && (
+          <Icon
+            icon={icon}
+            bg={iconBg}
+            color={iconColor}
+            rtlFlip={rtlFlip}
+            className="flex-content p-2"
+          />
+        )}
+        {!minimal && (
+          <label className="flex-initial truncate text-center px-1 py-1">
+            {label}
+          </label>
+        )}
+        {badge && (
+          <Badge
+            {...badgeProps}
+            placement={minimal ? "end" : ""}
+            className={classNames("me-1", badgeProps.className)}
+          />
+        )}
+        {actions && active && (
+          <DropdownTool className="bg-tint-50/20 me-1 z-5">
+            {actions}
+          </DropdownTool>
+        )}
+        {onClose && (
+          <span
+            role="none"
+            className={classNames(
+              "cursor-pointer me-1 opacity-65 hover:opacity-90 pointer-events-auto",
+            )}
+            onClick={(e) => {
+              onClose?.();
+              e.stopPropagation();
+            }}
+          >
+            &times;
+          </span>
+        )}
+      </E>
+    </W>
   );
 };

package/src/components/tabpanel/TabPanel.tsx

@@ -25,6 +25,7 @@ import classNames from "classnames";
 import {
   Children,
   cloneElement,
+  type ReactNode,
   useCallback,
   useEffect,
   useMemo,
@@ -33,7 +34,6 @@ import {
 import { type CallbackReturn, type ChildrenProp } from "../../types";
 import { nodeCheck } from "../../utils";
 import { Tab } from "./Tab";
-import classes from "./TabPanel.module.css";
 
 export interface TabPanelProps extends ChildrenProp<typeof Tab> {
   /**
@@ -64,6 +64,14 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
    * tab list className
    */
   headerClassName?: string;
+  /**
+   * append element
+   */
+  append?: ReactNode;
+  /**
+   * prepend element
+   */
+  prepend?: ReactNode;
   /**
    * change handler
    */
@@ -84,6 +92,8 @@ export const TabPanel = ({
   justify,
   variant,
   tabFlex,
+  append,
+  prepend,
   gap,
   onBeforeChange,
   onChange,
@@ -124,7 +134,7 @@ export const TabPanel = ({
   return (
     <div
       className={classNames(
-        classes.tabPanel,
+        "fabric-tabPanel",
         "area-content grid bg-base overflow-hidden",
       )}
       data-orientation={orientation}
@@ -132,21 +142,33 @@ export const TabPanel = ({
     >
       <div
         className={classNames(
-          classes.tabList,
+          "fabric-tabHeader",
           headerClassName,
           justify && `justify-${justify}`,
           ["start", "end"].includes(orientation) && "flex-col",
-          "flex flex-nowrap overflow-auto scroll-thin",
+          "flex flex-nowrap overflow-hidden items-center",
         )}
-        style={{ gap }}
       >
-        {tabs.map((node: AnyObject) =>
-          cloneElement(node, {
-            tabFlex: node.props.tabFlex ?? tabFlex,
-            onClick: handleClick,
-            active: node.props.id === active,
-          }),
-        )}
+        {prepend}
+        <div
+          className={classNames(
+            "fabric-tabList",
+            justify && `justify-${justify}`,
+            ["start", "end"].includes(orientation) && "flex-col",
+            ["bottom", "end"].includes(orientation) ? "self-start" : "self-end",
+            "flex flex-1 flex-nowrap overflow-auto scroll-thin",
+          )}
+          style={{ gap }}
+        >
+          {tabs.map((node: AnyObject) =>
+            cloneElement(node, {
+              tabFlex: node.props.tabFlex ?? tabFlex,
+              onClick: handleClick,
+              active: node.props.id === active,
+            }),
+          )}
+        </div>
+        {append}
       </div>
       {rest}
       {activeTabPanel}

package/src/context/Global.tsx

@@ -146,6 +146,10 @@ export const ApplicationProvider: FC<GlobalProps> = ({
     defaultLocale ?? systemLocale(),
   );
 
+  useEffect(() => {
+    defaultColorScheme && setColorScheme(defaultColorScheme);
+  }, [defaultColorScheme]);
+
   /** ***************** set initial theme and locale dir  *******************/
   useEffect(() => {
     document.documentElement.lang = locale;

package/src/context/NotificationCenter.tsx

@@ -194,7 +194,7 @@ export const NotificationManager = ({ onLoad }: KeyValue) => {
       {createPortal(
         <div
           style={{ zIndex: "var(--z-overlay)" }}
-          className="ruf-container__overlays pointer-events-none fixed inset-0 p-4 bg-transparent"
+          className="fabric-container__overlays pointer-events-none fixed inset-0 p-4 bg-transparent"
         >
           {Object.values(alerts).map(([el]: AnyObject) => el)}
         </div>,
@@ -203,7 +203,7 @@ export const NotificationManager = ({ onLoad }: KeyValue) => {
       {createPortal(
         <div
           style={{ zIndex: "var(--z-notifications)" }}
-          className="ruf-container__notifs flex flex-nowrap pointer-events-none fixed inset-0 p-2 bg-transparent flex-col-reverse items-center justify-end"
+          className="fabric-container__notifs flex flex-nowrap pointer-events-none fixed inset-0 p-2 bg-transparent flex-col-reverse items-center justify-end"
         >
           {Object.values(messages).map(([el]: AnyObject) => el)}
         </div>,
@@ -212,7 +212,7 @@ export const NotificationManager = ({ onLoad }: KeyValue) => {
       {createPortal(
         <div
           style={{ zIndex: "var(--z-notifications)" }}
-          className="ruf-container__toasts flex flex-nowrap pointer-events-none fixed inset-0 p-4 bg-transparent flex-col items-end justify-end overflow-auto scroll-hide"
+          className="fabric-container__toasts flex flex-nowrap pointer-events-none fixed inset-0 p-4 bg-transparent flex-col items-end justify-end overflow-auto scroll-hide"
         >
           {Object.values(toasts).map(([el]: AnyObject) => el)}
         </div>,

package/src/core/aside/Aside.tsx

@@ -45,7 +45,6 @@ import {
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { ErrorBoundary } from "../boundary/ErrorBoundary";
-import classes from "./Aside.module.css";
 
 export interface AsideProps
   extends IconProps,
@@ -197,9 +196,10 @@ export const Aside = ({
 
   return (
     <aside
-      className={classNames(classes.aside, className, "overflow-hidden grid")}
+      className={classNames("fabric-aside", className, "overflow-hidden grid")}
       data-align={align}
       data-flyout={peek}
+      data-loading={loading}
       data-collapsed={isCollapsed}
       style={isCollapsed ? undefined : widthStyles}
       data-testid={testId}
@@ -207,15 +207,16 @@ export const Aside = ({
     >
       <header
         className={classNames(
-          classes.asideHeader,
+          "fabric-asideHeader",
           headerClassName,
           "grid area-head items-center",
         )}
+        data-ref="asideHeader"
       >
         {title && (
           <div
             className={classNames(
-              classes.asideTitle,
+              "fabric-asideTitle",
               "truncate py-0.5 px-1 select-none pointer-events-none",
             )}
           >
@@ -225,7 +226,7 @@ export const Aside = ({
         {collapsable && (
           <Icon
             aria-label={isCollapsed ? "expand" : "collapse"}
-            className={classNames(classes.asideCollapse, "p-2 select-none")}
+            className={classNames("fabric-asideCollapse", "p-2 select-none")}
             icon={CoreIcons.chevronLeft}
             rtlFlip
             onClick={toggleCollapse}
@@ -239,12 +240,12 @@ export const Aside = ({
             color={iconColor}
             rtlFlip={rtlFlip}
             className={classNames(
-              classes.asideIcon,
+              "fabric-asideIcon",
               "p-1 text-lg select-none pointer-events-none",
             )}
           />
         )}
-        {actions && <div className={classes.asideActions}>{actions}</div>}
+        {actions && <div className={"fabric-asideActions"}>{actions}</div>}
       </header>
       {loading && <Loading />}
       {isCollapsed && (
@@ -252,14 +253,14 @@ export const Aside = ({
           role="none"
           onClick={tryPeek}
           data-ref="asidePlaceholder"
-          className={classes.asidePlaceholder}
+          className={"fabric-asidePlaceholder"}
         />
       )}
       <section
         ref={elementRef}
         data-ref="asideBody"
         className={classNames(
-          classes.asideBody,
+          "fabric-asideBody",
           bodyClassName,
           "overflow-hidden grid",
         )}
@@ -271,7 +272,7 @@ export const Aside = ({
         <div
           {...resizeHandleProps}
           className={classNames(
-            classes.asideResizer,
+            "fabric-asideResizer",
             "before:absolute before:inset-0 before:w-1 before:top-1/2 before:-translate-y-1/2 before:transition-all",
           )}
         />

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}