@react-fabric/core 1.0.0-beta.8 → 1.0.1

package/src/components/button/ButtonGroup.tsx

@@ -1,77 +1,106 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 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 MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * 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.
+ * 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 classNames from "classnames";
-import { Children, cloneElement } from "react";
-import {
-  type AriaProps,
-  type ChildrenProp,
-  type ColorType,
-  type CssProp,
-  type RefProp,
-  type SizeType,
-  type TestProps,
-} from "../../types";
-import { type Button } from "./Button";
-import classes from "./Button.module.css";
+import { cn } from "@react-fabric/utilities";
+import { cloneElement, isValidElement } from "react";
+import type { ChildrenProp, CssProp, RefProp, TestProps } from "../../types";
+import { cloneChildren } from "../../utils";
+import type { ButtonProps, SharedButtonProps } from "./Button";
 
-export interface ButtonGroupProps
-  extends CssProp,
-    AriaProps,
-    TestProps,
-    RefProp<HTMLDivElement>,
-    ChildrenProp<React.ReactElement<typeof Button>> {
+interface BaseProps extends CssProp, TestProps, SharedButtonProps {
   /**
-   * vertical orientation
+   * When true, arranges buttons vertically (top-to-bottom) instead of horizontally.
    */
   vertical?: boolean;
   /**
-   * button styling
-   */
-  variant?: "outline" | "solid" | "link";
-  /**
-   * button size
-   */
-  size?: SizeType;
-  /**
-   * button color
-   */
-  color?: ColorType;
-  /**
-   * full rounded edges
-   */
-  rounded?: boolean;
-  /**
-   * disabled state
+   * When true, disables all child buttons and prevents user interaction.
    */
   disabled?: boolean;
   /**
-   * stretch to full width
+   * When true, stretches the group to full available width (uses `flex` instead of `inline-flex`).
    */
   fullWidth?: boolean;
 }
 
-export const ButtonGroup = ({
+export type ButtonGroupProps<T> = BaseProps &
+  RefProp<HTMLDivElement> &
+  ChildrenProp<ButtonProps & { value: T }> & {
+    onClick?: (value: T | null, e?: React.MouseEvent) => void;
+  };
+
+/**
+ * A container component that renders a group of related buttons with shared styling and behavior.
+ *
+ * ButtonGroup propagates common button properties (variant, color, size, rounded, disabled)
+ * to all direct child `<Button>` elements, ensuring visual consistency across the group.
+ * It also coordinates click handling by intercepting each child's `onClick` and invoking
+ * the group-level `onClick` callback with the clicked button's `value` prop — making it
+ * ideal for toggle groups, radio-style selections, and multi-select toolbars.
+ *
+ * @template T - The type of the `value` prop expected by child buttons (defaults to `string`).
+ *
+ * @example
+ * ```tsx
+ * // Single-select toggle group
+ * const [mode, setMode] = useState<"day" | "week" | "month">("day");
+ *
+ * <ButtonGroup
+ *   value={mode}
+ *   onClick={(v) => setMode(v ?? "day")}
+ *   variant="outlined"
+ *   color="primary"
+ *   size="sm"
+ * >
+ *    <Button value="day">Day</Button>
+ *    <Button value="week">Week</Button>
+ *    <Button value="month">Month</Button>
+ * </ButtonGroup>
+ *
+ * @example
+ * ```tsx
+ * // Multi-select with vertical layout
+ * const [tags, setTags] = useState<string[]>([]);
+ *
+ * <ButtonGroup
+ *   vertical
+ *   variant="soft"
+ *   color="info"
+ *   onClick={(tag) =>
+ *     setTags((prev) =>
+ *       prev.includes(tag!) ? prev.filter((t) => t !== tag) : [...prev, tag!]
+ *       )
+ *     }
+ * >
+ *    <Button value="react">React</Button>
+ *    <Button value="typescript">TypeScript</Button>
+ *    <Button value="tailwind">Tailwind</Button>
+ * </ButtonGroup>
+ * ```
+ */
+export function ButtonGroup<T extends AnyObject = string>({
+  ref,
   vertical,
   className,
   children,
@@ -81,32 +110,43 @@ export const ButtonGroup = ({
   fullWidth,
   color,
   size,
-  ...aria
-}: ButtonGroupProps) => {
+  onClick,
+  ...props
+}: ButtonGroupProps<T>) {
+  // Create a click handler that invokes both the group-level onClick and the child's own onClick
+  const clickHandler = (childValue: T, cb?: (e?: React.MouseEvent) => void) => (e?: React.MouseEvent) => {
+    onClick?.(childValue, e);
+    cb?.(e);
+  };
+
   return (
     <div
-      data-ref="buttonGroup"
-      className={classNames(
-        classes.buttonGroup,
+      {...props}
+      ref={ref}
+      className={cn(
+        "fabric-buttonGroup",
         className,
+        "flex-nowrap align-middle is-vertical:flex-col",
         fullWidth ? "flex" : "inline-flex",
-        "flex-nowrap align-middle rounded",
-        vertical && classes.vertical,
-        vertical && "flex-col items-stretch",
       )}
-      {...aria}
+      data-vertical={vertical}
     >
-      {Children.map(children, (child: AnyObject) =>
-        cloneElement(child, {
-          color,
-          size,
-          variant,
-          disabled,
-          rounded,
-          fullWidth,
-          ...child.props,
-        }),
-      )}
+      {cloneChildren(children)?.map((child) => {
+        if (isValidElement(child)) {
+          // Cast to expected shape and clone with propagated group-level props
+          const childEl = child as React.ReactElement<ButtonProps & { value: T }>;
+          return cloneElement(childEl, {
+            color,
+            size,
+            variant,
+            disabled,
+            rounded,
+            ...childEl.props,
+            onClick: clickHandler(childEl.props.value, childEl.props.onClick),
+          });
+        }
+        return child;
+      })}
     </div>
   );
-};
+}

package/src/components/button/ConfirmButton.tsx

@@ -22,12 +22,12 @@
  */
 
 import {
-  arrow,
-  autoUpdate,
-  flip,
   FloatingArrow,
   FloatingFocusManager,
   FloatingPortal,
+  arrow,
+  autoUpdate,
+  flip,
   offset,
   shift,
   useClick,
@@ -36,25 +36,13 @@ import {
   useInteractions,
   type Placement,
 } from "@floating-ui/react";
-import { mergeRefs } from "@react-fabric/utilities";
-import classNames from "classnames";
-import {
-  Fragment,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { cn, mergeRefs } from "@react-fabric/utilities";
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  type CallbackReturn,
-  type PolymorphicProps,
-  type RefProp,
-} from "../../types";
-import { Button, type BaseProps, type ButtonProps } from "./Button";
+import { type CallbackReturn } from "../../types";
+import { Button, type ButtonProps } from "./Button";
 
-interface ExtendedProps extends Omit<BaseProps, "onClick">, RefProp {
+interface ExtendedProps {
   /**
    * confirm message
    */
@@ -77,46 +65,45 @@ interface ExtendedProps extends Omit<BaseProps, "onClick">, RefProp {
   onClick?: (e: boolean) => CallbackReturn;
 }
 
-export type ConfirmButtonProps = ExtendedProps & ButtonProps;
-
 /**
- * Button with confirmation dropdown
+ * A button that shows a confirmation dialog when clicked, allowing the user to confirm or cancel an action.
+ * It supports custom messages, labels, and loading states.
+ * This component is useful for actions that require user confirmation, such as deleting items or submitting forms.
+ * It uses the Floating UI library to manage the positioning of the confirmation dialog, ensuring it appears correctly relative to the button.
+ * It also supports custom placement of the dialog, and can display an action message when the action is completed.
+ *
+ * @example
+ * ```jsx
+ * <ConfirmButton
+ *   message="Are you sure you want to delete this item?"
+ *   onClick={(confirmed) => {
+ *     if (confirmed) {
+ *       // Perform action
+ *     }
+ *   }}
+ * />
+ * ```
  */
-export const ConfirmButton = <Tag extends React.ElementType = "button">({
-  ref,
-  message,
-  color,
-  okLabel,
-  cancelLabel,
-  onClick,
-  loading,
-  placement = "bottom",
-  actionMessage,
-  showActionDone,
-  showActionDoneEvent = "click",
-  ...props
-}: ConfirmButtonProps & PolymorphicProps<Tag>) => {
+export const ConfirmButton = <Tag extends React.ElementType = "button">(props: ExtendedProps & ButtonProps<Tag>) => {
+  const { as, ref, message, color, okLabel, cancelLabel, showActionDoneEvent, onClick, loading, placement = "bottom", ...buttonProps } = props;
   const { t } = useTranslation("core");
   const arrowRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
   const [busy, setBusy] = useState(false);
   const [actionDone, setActionDone] = useState(false);
 
-  const clickHandler = useCallback(
-    (e: boolean) => {
-      setBusy(e);
-      const ret = onClick?.(e);
-      if (e) {
-        void Promise.resolve(ret).then((b) => {
-          setBusy(false);
-          if (b !== false && actionMessage && showActionDoneEvent === "click") {
-            setActionDone(true);
-          }
-        });
-      }
-    },
-    [onClick, actionMessage, showActionDoneEvent],
-  );
+  const clickHandler = (e: boolean) => {
+    setBusy(e);
+    const ret = onClick?.(e);
+    if (ret) {
+      void Promise.resolve(ret).then((b) => {
+        setBusy(false);
+        if (b !== false && showActionDoneEvent === "click") {
+          setActionDone(true);
+        }
+      });
+    }
+  };
   useEffect(() => {
     if (actionDone) {
       const timer = setTimeout(() => setActionDone(false), 2000);
@@ -150,74 +137,57 @@ export const ConfirmButton = <Tag extends React.ElementType = "button">({
   });
   const dismiss = useDismiss(context);
 
-  const { getReferenceProps, getFloatingProps } = useInteractions([
-    dismiss,
-    click,
-  ]);
-
-  const ButtonWrapper = useCallback(
-    ({ ref, ...props }: AnyObject) => <Button ref={ref} {...props} />,
-    [],
-  );
+  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, click]);
 
-  const innerRef = useMemo(
-    () => mergeRefs(ref, refs.setReference),
-    [ref, refs.setReference],
-  );
+  const innerRef = useMemo(() => mergeRefs(ref, refs.reference), [ref, refs.reference]);
 
   return (
     <Fragment>
-      <ButtonWrapper
-        {...props}
+      <Button
+        as={as as Tag}
+        {...(buttonProps as ButtonProps<Tag>)}
         color={color}
         loading={busy || loading}
-        showActionDone={actionDone || showActionDone}
+        showActionDone={actionDone}
         showActionDoneEvent="manual"
-        actionMessage={actionMessage}
         ref={innerRef}
         {...getReferenceProps()}
         data-dropdown-open={isOpen}
       />
       {isOpen && (
-        <FloatingPortal>
-          <FloatingFocusManager modal context={context}>
+        <FloatingPortal root={refs.domReference.current?.closest<HTMLElement>(".theme-base") ?? undefined}>
+          <FloatingFocusManager context={context}>
             <div
               data-color={color}
-              className={classNames(
-                "select-none not-italic rounded-capped shadow-lg outline outline-muted bg-base",
-              )}
-              ref={refs.setFloating}
-              style={floatingStyles}
+              className={cn("select-none not-italic rounded-capped shadow-lg outline outline-muted bg-default")}
+              ref={(el) => refs.setFloating(el)}
+              style={{
+                zIndex: "var(--z-popover)",
+                ...floatingStyles,
+              }}
               {...getFloatingProps()}
             >
               <div className="font-medium ">
-                <p className="py-2 px-4">{message}</p>
+                <p className="py-2 px-4" data-ref="confirmMessage">
+                  {message}
+                </p>
                 <div className="flex justify-end py-2 px-4 gap-2">
-                  <Button
-                    size="sm"
-                    variant="link"
-                    color={color}
-                    onClick={() => [clickHandler(false), setIsOpen(false)]}
-                  >
+                  <Button size="sm" variant="link" data-ref="confirmCancel" color={color} onClick={() => [clickHandler(false), setIsOpen(false)]}>
                     {cancelLabel ?? t("action.cancel")}
                   </Button>
                   <Button
                     size="sm"
                     variant="solid"
                     color={color}
-                    autoFocus
+                    {...{ autoFocus: true }}
+                    data-ref="confirmOk"
                     onClick={() => [clickHandler(true), setIsOpen(false)]}
                   >
                     {okLabel ?? t("action.ok")}
                   </Button>
                 </div>
               </div>
-              <FloatingArrow
-                ref={arrowRef}
-                context={context}
-                strokeWidth={0.5}
-                className="fill-base stroke-muted"
-              />
+              <FloatingArrow ref={arrowRef} context={context} strokeWidth={0.5} className="fill-default stroke-muted" />
             </div>
           </FloatingFocusManager>
         </FloatingPortal>