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

package/src/components/tabpanel/Tab.tsx

@@ -21,8 +21,10 @@
  * 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,
@@ -34,6 +36,7 @@ import {
   type PolymorphicProps,
   type RefProp,
   type TestProps,
+  type TooltipProp,
 } from "../../types";
 import { Badge, getBadgeProps } from "../badge/Badge";
 import { DropdownTool } from "../dropdown/DropdownTool";
@@ -46,7 +49,8 @@ export interface TabProps
     RefProp,
     AriaProps,
     TestProps,
-    IconProps {
+    IconProps,
+    TooltipProp {
   /**
    * tab id
    */
@@ -62,7 +66,7 @@ export interface TabProps
   /**
    * tab badge
    */
-  badge?: BadgeType;
+  badge?: string | number | BadgeType;
   /**
    * disabled
    */
@@ -104,12 +108,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 +120,76 @@ 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(
+          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",
+          minimal ? "min-w-6 px-2 py-1" : "min-w-18",
+          "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>
   );
 };

package/src/components/tabpanel/TabPanel.module.css

@@ -25,10 +25,51 @@
   .tabPanel {
     --color: theme(colors.primary.500);
 
-    & > .tabList {
+    &[data-orientation="top"] {
+      grid-template: "tablist" auto "content" 1fr / 1fr;
+
+      .tabHeader {
+        box-shadow: 0 -1px 0 theme(borderColor.dimmed) inset;
+      }
+    }
+
+    &[data-orientation="bottom"] {
+      grid-template: "content" 1fr "tablist" auto / 1fr;
+
+      .tabHeader {
+        margin-top: 1px;
+        box-shadow: 0 1px 0 theme(borderColor.dimmed) inset;
+      }
+    }
+
+    &[data-orientation="start"] {
+      grid-template: "tablist content" 1fr / auto 1fr;
+
+      .tabHeader {
+        box-shadow: -1px 0 0 theme(borderColor.dimmed) inset;
+      }
+    }
+
+    &[data-orientation="end"] {
+      grid-template: "content tablist" 1fr / 1fr auto;
+
+      .tabHeader {
+        box-shadow: 1px 0 0 theme(borderColor.dimmed) inset;
+      }
+    }
+  }
+}
+
+@layer util {
+  .tabPanel {
+    & .tabList > .tabButton:global(.active) {
+      pointer-events: none;
+    }
+
+    & > .tabHeader {
       grid-area: tablist;
 
-      & > .tabButton {
+      & > .tabList > .tabButton {
         &[data-color="accent"] {
           --color: theme(colors.accent.500);
         }
@@ -64,7 +105,7 @@
     }
 
     &[data-variant="outline"] {
-      & > .tabList > .tabButton:global(.active) {
+      & .tabList > .tabButton:global(.active) {
         --active-color: theme(backgroundColor.base);
         --active-border: 0 0 0 1px theme(borderColor.base) inset;
 
@@ -73,71 +114,19 @@
     }
 
     &[data-variant="solid"] {
-      & > .tabList > .tabButton:global(.active) {
+      & .tabList > .tabButton:global(.active) {
         color: theme(colors.white);
         background-color: var(--color);
       }
     }
 
     &[data-variant="soft"] {
-      & > .tabList > .tabButton:global(.active) {
+      & .tabList > .tabButton:global(.active) {
         background-color: color-mix(in lab, var(--color) 20%, var(--fabric-bg));
       }
     }
 
-    &[data-orientation="top"] {
-      grid-template: "tablist" auto "content" 1fr / 1fr;
-      padding-inline: 2px;
-
-      &[data-variant="outline"] > .tabList,
-      &[data-variant="solid"] > .tabList,
-      &[data-variant="soft"] > .tabList {
-        box-shadow: 0 -1px 0 theme(borderColor.dimmed) inset;
-      }
-    }
-
-    &[data-orientation="bottom"] {
-      grid-template: "content" 1fr "tablist" auto / 1fr;
-      padding-inline: 2px;
-
-      &[data-variant="outline"] > .tabList,
-      &[data-variant="solid"] > .tabList,
-      &[data-variant="soft"] > .tabList {
-        box-shadow: 0 1px 0 theme(borderColor.dimmed) inset;
-      }
-    }
-
-    &[data-orientation="start"] {
-      grid-template: "tablist content" 1fr / auto 1fr;
-      padding-block: 2px;
-
-      &[data-variant="outline"] > .tabList,
-      &[data-variant="solid"] > .tabList,
-      &[data-variant="soft"] > .tabList {
-        box-shadow: -1px 0 0 theme(borderColor.dimmed) inset;
-      }
-    }
-
-    &[data-orientation="end"] {
-      grid-template: "content tablist" 1fr / 1fr auto;
-      padding-block: 2px;
-
-      &[data-variant="outline"] > .tabList,
-      &[data-variant="solid"] > .tabList,
-      &[data-variant="soft"] > .tabList {
-        box-shadow: 1px 0 0 theme(borderColor.dimmed) inset;
-      }
-    }
-  }
-}
-
-@layer util {
-  .tabPanel {
-    & > .tabList > .tabButton:global(.active) {
-      pointer-events: none;
-    }
-
-    &[data-orientation="top"] > .tabList {
+    &[data-orientation="top"] .tabList {
       & > .tabButton:global(.active) {
         box-shadow:
           0 -2px 0 var(--active-color) inset,
@@ -145,7 +134,7 @@
       }
     }
 
-    &[data-orientation="bottom"] > .tabList {
+    &[data-orientation="bottom"] .tabList {
       & > .tabButton:global(.active) {
         box-shadow:
           0 2px 0 var(--active-color) inset,
@@ -153,7 +142,7 @@
       }
     }
 
-    &[data-orientation="start"] > .tabList {
+    &[data-orientation="start"] .tabList {
       & > .tabButton:global(.active) {
         box-shadow:
           -2px 0 0 var(--active-color) inset,
@@ -161,7 +150,7 @@
       }
     }
 
-    &[data-orientation="end"] > .tabList {
+    &[data-orientation="end"] .tabList {
       & > .tabButton:global(.active) {
         box-shadow:
           2px 0 0 var(--active-color) inset,
@@ -169,28 +158,28 @@
       }
     }
 
-    &[data-orientation="top"] > .tabList > .tabButton {
+    &[data-orientation="top"] .tabList > .tabButton {
       margin-top: 2px;
       margin-inline: 1px;
       border-end-start-radius: 0;
       border-end-end-radius: 0;
     }
 
-    &[data-orientation="bottom"] > .tabList > .tabButton {
+    &[data-orientation="bottom"] .tabList > .tabButton {
       margin-bottom: 2px;
       margin-inline: 1px;
       border-start-start-radius: 0;
       border-start-end-radius: 0;
     }
 
-    &[data-orientation="start"] > .tabList > .tabButton {
+    &[data-orientation="start"] .tabList > .tabButton {
       margin-block: 1px;
       margin-inline-start: 2px;
       border-start-end-radius: 0;
       border-end-end-radius: 0;
     }
 
-    &[data-orientation="end"] > .tabList > .tabButton {
+    &[data-orientation="end"] .tabList > .tabButton {
       margin-block: 1px;
       margin-inline-end: 2px;
       border-start-start-radius: 0;

package/src/components/tabpanel/TabPanel.tsx

@@ -25,6 +25,7 @@ import classNames from "classnames";
 import {
   Children,
   cloneElement,
+  type ReactNode,
   useCallback,
   useEffect,
   useMemo,
@@ -64,6 +65,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 +93,8 @@ export const TabPanel = ({
   justify,
   variant,
   tabFlex,
+  append,
+  prepend,
   gap,
   onBeforeChange,
   onChange,
@@ -132,21 +143,33 @@ export const TabPanel = ({
     >
       <div
         className={classNames(
-          classes.tabList,
+          classes.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(
+            classes.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/core/aside/Aside.tsx

@@ -23,12 +23,12 @@
 
 import classNames from "classnames";
 import {
-  type ReactNode,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
+  type ReactNode,
 } from "react";
 import { Loading } from "../../components/animations/Animations";
 import { Icon } from "../../components/icon/Icon";
@@ -38,6 +38,7 @@ import { useResize } from "../../hooks/useResize";
 import {
   type ChildrenProp,
   type CollapseProps,
+  type CssProp,
   type Elements,
   type IconProps,
   type TestProps,
@@ -50,6 +51,7 @@ export interface AsideProps
   extends IconProps,
     ChildrenProp,
     CollapseProps,
+    CssProp,
     TestProps {
   /**
    * page title
@@ -67,6 +69,10 @@ export interface AsideProps
    * header class
    */
   headerClassName?: string;
+  /**
+   * header class
+   */
+  bodyClassName?: string;
 
   /**
    * show loading indicator
@@ -109,6 +115,8 @@ export const Aside = ({
   iconBg,
   iconColor,
   rtlFlip,
+  className,
+  bodyClassName,
   headerClassName,
   resizeable,
   flyout,
@@ -189,9 +197,10 @@ export const Aside = ({
 
   return (
     <aside
-      className={classNames(classes.aside, "overflow-hidden grid")}
+      className={classNames(classes.aside, className, "overflow-hidden grid")}
       data-align={align}
       data-flyout={peek}
+      data-loading={loading}
       data-collapsed={isCollapsed}
       style={isCollapsed ? undefined : widthStyles}
       data-testid={testId}
@@ -203,6 +212,7 @@ export const Aside = ({
           headerClassName,
           "grid area-head items-center",
         )}
+        data-ref="asideHeader"
       >
         {title && (
           <div
@@ -250,7 +260,11 @@ export const Aside = ({
       <section
         ref={elementRef}
         data-ref="asideBody"
-        className={classNames(classes.asideBody, "overflow-hidden grid")}
+        className={classNames(
+          classes.asideBody,
+          bodyClassName,
+          "overflow-hidden grid",
+        )}
         style={isCollapsed ? widthStyles : undefined}
       >
         <ErrorBoundary>{children}</ErrorBoundary>

package/src/core/content/Content.tsx

@@ -22,14 +22,14 @@
  */
 
 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";
@@ -44,7 +44,7 @@ export interface ContentProps
   /**
    * scroll vevent handler
    */
-  onScroll?: (event: PositionObject) => void;
+  onScroll?: (scroll: ScrollObject, event: MouseEvent<HTMLDivElement>) => void;
   /**
    * scroll vevent handler
    */
@@ -65,13 +65,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],
   );

package/src/core/headfoot/HeadFoot.module.css

@@ -23,6 +23,8 @@
 
 @layer comp {
   .headfoot {
+    gap: 2px;
+
     .buttonWrapper + .buttonWrapper {
       margin-inline-start: 0.25rem;
     }

package/src/core/headfoot/HeadFoot.tsx

@@ -93,7 +93,7 @@ const HeadFoot = ({
         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}`,
       )}

package/src/core/page/Page.tsx

@@ -66,6 +66,7 @@ export const Page = ({
     <div
       data-testid={testId}
       data-test-value={testValue}
+      data-loading={loading}
       className={classNames(
         classes.page,
         "overflow-hidden grid area-content",

package/src/core/responsive/Responsive.tsx

@@ -81,7 +81,7 @@ export interface ColProps
   /**
    * column flex
    */
-  flex?: "auto" | "fill" | "full";
+  flex?: "auto" | "fill" | "full" | "content";
   /**
    * stretch inner content
    */
@@ -159,9 +159,10 @@ export const Col = ({
         classes.col,
         className,
         stretchContent && classes.stretchContent,
-        flex === "auto" && "flex-content",
         flex === "fill" && "flex-1",
         flex === "full" && "flex-full",
+        flex === "auto" && "flex-initial",
+        flex === "content" && "flex-content",
         align && `self-${align}`,
       )}
       {...aria}

package/src/core/section/Section.module.css

@@ -23,6 +23,6 @@
 
 @layer comp {
   .section {
-    grid-template: "head head head" auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
+    grid-template: ". loader ." auto "head head head" auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
   }
 }

package/src/core/theme/ThemeProvider.tsx

@@ -57,7 +57,7 @@ export interface ThemeProps {
   /**
    * component rounding
    */
-  rounding?: "minimal" | "normal" | "full";
+  rounding?: "sm" | "md" | "full";
 }
 
 /**