@react-fabric/core 1.0.0-beta.54 → 1.0.0-beta.57

package/src/components/card/Card.tsx

@@ -24,10 +24,10 @@
 import classNames from "classnames";
 import {
   Children,
-  type DragEvent,
-  type MouseEventHandler,
   useCallback,
   useMemo,
+  type DragEvent,
+  type MouseEventHandler,
 } from "react";
 import { ErrorBoundary } from "../../core/boundary/ErrorBoundary";
 import { type ContentProps } from "../../core/content/Content";
@@ -37,6 +37,7 @@ import {
   type HeadFootProps,
 } from "../../core/headfoot/HeadFoot";
 import {
+  PolymorphicProps,
   type AriaProps,
   type ChildrenProp,
   type CssProp,
@@ -45,7 +46,7 @@ import {
 } from "../../types";
 import { nodeCheck } from "../../utils";
 
-export interface CardProps
+interface BaseProps
   extends CssProp,
     AriaProps,
     TestProps,
@@ -93,6 +94,9 @@ export interface CardProps
   dragData?: KeyValue;
 }
 
+export type CardProps<Tag extends React.ElementType = "div"> = BaseProps &
+  PolymorphicProps<Tag>;
+
 /**
  * A component that displays a card with a header, body, and footer. It can be used to display content in a structured format.
  * It supports various features such as click handling, drag-and-drop functionality, and customizable styles.
@@ -127,7 +131,7 @@ export interface CardProps
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-card--docs} for more details.
  */
-export const Card = ({
+export const Card = <Tag extends React.ElementType = "div">({
   children,
   className,
   bodyClassName,
@@ -140,8 +144,9 @@ export const Card = ({
   dragKey,
   dragData,
   ref,
+  as,
   ...aria
-}: CardProps) => {
+}: CardProps<Tag>) => {
   const [header, body, footer] = useMemo(() => {
     return Children.toArray(children as AnyObject).reduce<AnyObject[]>(
       (ret, node) => {
@@ -164,6 +169,7 @@ export const Card = ({
     [onDragStart, dragKey, dragData],
   );
 
+  const E = as ?? "div";
   return (
     <div
       className={classNames(
@@ -171,7 +177,7 @@ export const Card = ({
         "rounded-capped relative grid",
         flex && "flex-1",
         selected && selectedRibbon && "selected",
-        selected && "outline-2 outline-accent-500 outline-offset-2",
+        selected && "outline-1 outline-accent-500 outline-offset-2",
       )}
     >
       <ErrorBoundary>
@@ -179,22 +185,30 @@ export const Card = ({
           className={classNames(
             "fabric-card",
             className,
-            "rounded-capped flex flex-col flex-nowrap overflow-hidden",
+            "rounded-capped relative flex flex-col flex-nowrap overflow-hidden",
+            "href" in aria && "clickable",
+            "to" in aria && "clickable",
             onClick && "clickable",
           )}
           draggable={draggable}
           onDragStart={!draggable ? undefined : handleDragStart}
           ref={ref}
-          {...aria}
         >
           {header}
-          <div
-            role="none"
-            className={classNames("fabric-cardBody", bodyClassName, "flex-1")}
-            onClick={onClick}
-          >
-            {body}
-          </div>
+          <E role="none" onClick={onClick} {...aria} className="contents">
+            {body && (
+              <object
+                type="none"
+                className={classNames(
+                  "fabric-cardBody",
+                  bodyClassName,
+                  "flex-1",
+                )}
+              >
+                {body}
+              </object>
+            )}
+          </E>
           {footer}
         </div>
       </ErrorBoundary>

package/src/components/chip/Chip.tsx

@@ -66,6 +66,10 @@ export interface ChipProps
    * disabled state
    */
   disabled?: boolean;
+  /**
+   * prevent click default, useful when component is within a `a` link
+   */
+  preventDefault?: boolean;
   /**
    * prevent click propagation
    */
@@ -128,6 +132,7 @@ export const Chip = <Tag extends React.ElementType = "div">({
   onIconClick,
   onRemove,
   rounded,
+  preventDefault,
   stopPropagation,
   as,
   ...aria
@@ -153,10 +158,11 @@ export const Chip = <Tag extends React.ElementType = "div">({
 
   const clickHandler = useCallback(
     (e: React.MouseEvent) => {
-      if (stopPropagation) e.stopPropagation();
+      preventDefault && e.preventDefault();
+      stopPropagation && e.stopPropagation();
       onClick?.(e);
     },
-    [onClick, stopPropagation],
+    [onClick, preventDefault, stopPropagation],
   );
 
   const removeHandler = useCallback(

package/src/components/dropdown/Dropdown.tsx

@@ -221,6 +221,7 @@ const DropdownElement = ({
           onClick: (e) => {
             anchor.props.onClick?.(e);
             e.stopPropagation();
+            e.preventDefault();
           },
         }),
         "data-inner-clickable": "true",

package/src/components/icon/Icon.tsx

@@ -193,7 +193,11 @@ export const Icon = ({
         !!onClick && disabled && "opacity-30 pointer-events-none",
         className,
       )}
-      onClick={onClick}
+      onClick={(e) => {
+        onClick && e.stopPropagation();
+        onClick && e.preventDefault();
+        onClick?.(e);
+      }}
       data-flip={rtlFlip}
       style={styles}
       data-clickable={!!onClick}

package/src/components/menu/Menu.tsx

@@ -313,6 +313,7 @@ export const Menu = (props: MenuProps) => {
     return (
       <MenuComponent
         {...(props as AnyObject)}
+        className=""
         menuClassName={props.className}
       />
     );
@@ -323,6 +324,7 @@ export const Menu = (props: MenuProps) => {
       <FloatingTree>
         <MenuComponent
           {...(props as AnyObject)}
+          className=""
           menuClassName={props.className}
         />
       </FloatingTree>

package/src/components/tabpanel/Tab.tsx

@@ -174,8 +174,8 @@ export const Tab = <Tag extends React.ElementType = "button">({
           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",
+          minimal ? "min-w-6 rounded" : "rounded-capped",
+          "flex items-center justify-center overflow-hidden cursor-pointer",
         )}
         onClick={() => !active && onClick?.(id)}
         ref={ref as AnyObject}

package/src/components/tabpanel/TabPanel.tsx

@@ -47,11 +47,15 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
   /**
    * tab variations
    */
-  variant?: "soft" | "solid" | "outline";
+  variant?: "soft" | "solid" | "outline" | "pills";
   /**
    * tab button flex to fill tabs
    */
   tabFlex?: boolean;
+  /**
+   * rotate tab sideways for start/end orientation
+   */
+  tabRotate?: boolean;
   /**
    * tab button gap
    */
@@ -64,6 +68,10 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
    * tab list className
    */
   headerClassName?: string;
+  /**
+   * active tab className
+   */
+  activeClassName?: string;
   /**
    * append element
    */
@@ -122,11 +130,13 @@ export const TabPanel = ({
   headerClassName,
   orientation = "top",
   activeTab,
+  activeClassName,
   justify,
   variant,
   tabFlex,
   append,
   prepend,
+  tabRotate,
   gap,
   onBeforeChange,
   onChange,
@@ -177,6 +187,7 @@ export const TabPanel = ({
         className={classNames(
           "fabric-tabHeader",
           headerClassName,
+          tabRotate && "tab-rotate",
           justify && `justify-${justify}`,
           ["start", "end"].includes(orientation) && "flex-col",
           "flex flex-nowrap overflow-hidden items-center",
@@ -196,6 +207,7 @@ export const TabPanel = ({
           {tabs.map((node: AnyObject) =>
             cloneElement(node, {
               tabFlex: node.props.tabFlex ?? tabFlex,
+              activeClassName: node.props.activeClassName ?? activeClassName,
               onClick: handleClick,
               active: node.props.id === active,
             }),

package/src/overlays/flyout/Flyout.tsx

@@ -94,6 +94,10 @@ export interface FlyoutProps
    * minimum width
    */
   minWidth?: string | number;
+  /**
+   * portal root element
+   */
+  root?: HTMLElement;
   /**
    * hide backdrop mask
    */
@@ -129,6 +133,7 @@ export const Flyout = ({
   size,
   width,
   minWidth,
+  root,
   hideMask,
   align = "start",
   ...aria
@@ -193,7 +198,7 @@ export const Flyout = ({
   );
 
   return (
-    <FloatingPortal>
+    <FloatingPortal root={root}>
       {!hideMask && (
         <FloatingOverlay
           lockScroll

package/src/overlays/modal/Modal.tsx

@@ -105,7 +105,7 @@ export interface ModalProps
   /**
    * hide mask background
    */
-  noMask?: boolean;
+  hideMask?: boolean;
   /**
    * close handler
    */
@@ -131,7 +131,7 @@ export const Modal = ({
   loading,
   root,
   size,
-  noMask,
+  hideMask,
   width,
   height,
   minHeight,
@@ -193,7 +193,7 @@ export const Modal = ({
         }}
         className={classNames(
           "grid place-items-center p-16",
-          !noMask && "bg-tint-100/20 backdrop-blur-sm",
+          !hideMask && "bg-tint-100/20 backdrop-blur-sm",
         )}
       >
         <FloatingFocusManager context={context}>

package/src/types/icons.ts

@@ -417,7 +417,7 @@ export namespace CoreIcons {
   export const mediaPlay = "M8,5.14V19.14L19,12.14L8,5.14Z";
   export const mediaPause = "M14,19H18V5H14M6,19H10V5H6V19Z";
   export const mediaContrast =
-    "M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z";
+    "M12,20C9.79,20 7.79,19.1 6.34,17.66L17.66,6.34C19.1,7.79 20,9.79 20,12A8,8 0 0,1 12,20M6,8H8V6H9.5V8H11.5V9.5H9.5V11.5H8V9.5H6M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,16H17V14.5H12V16Z";
   export const mediaEqs =
     "M7 3H5V9H7V3M19 3H17V13H19V3M3 13H5V21H7V13H9V11H3V13M15 7H13V3H11V7H9V9H15V7M11 21H13V11H11V21M15 15V17H17V21H19V17H21V15H15Z";
   export const mediaCaptionOff =
@@ -437,4 +437,13 @@ export namespace CoreIcons {
     "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M6,7H18V9H6V7M6,11H15V13H6V11Z";
   export const mediaCommentAdd =
     "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M11,6H13V9H16V11H13V14H11V11H8V9H11V6Z";
+
+  export const mediaLightness =
+    "M12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z";
+  export const mediaColor =
+    "M19,11.5C19,11.5 17,13.67 17,15A2,2 0 0,0 19,17A2,2 0 0,0 21,15C21,13.67 19,11.5 19,11.5M5.21,10L10,5.21L14.79,10M16.56,8.94L7.62,0L6.21,1.41L8.59,3.79L3.44,8.94C2.85,9.5 2.85,10.47 3.44,11.06L8.94,16.56C9.23,16.85 9.62,17 10,17C10.38,17 10.77,16.85 11.06,16.56L16.56,11.06C17.15,10.47 17.15,9.5 16.56,8.94Z";
+  export const mediaInvert =
+    "M12,19.58V19.58C10.4,19.58 8.89,18.96 7.76,17.83C6.62,16.69 6,15.19 6,13.58C6,12 6.62,10.47 7.76,9.34L12,5.1M17.66,7.93L12,2.27V2.27L6.34,7.93C3.22,11.05 3.22,16.12 6.34,19.24C7.9,20.8 9.95,21.58 12,21.58C14.05,21.58 16.1,20.8 17.66,19.24C20.78,16.12 20.78,11.05 17.66,7.93Z";
+  export const mediaSaturate =
+    "M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z";
 }