@duskmoon-dev/components 0.3.3 → 0.4.0

package/dist/components/dm-toolbar/index.js

@@ -44,6 +44,10 @@ function getDmToolbarItemClasses({
   return cn(dmToolbarItemClass, primary ? dmToolbarPrimaryItemClass : dmToolbarSecondaryItemClass, className);
 }
 
+// src/components/button/Button.tsx
+import React from "react";
+import { createPortal } from "react-dom";
+
 // src/classes/button.ts
 var buttonBaseClass = "btn";
 var buttonColorClasses = {
@@ -67,7 +71,7 @@ var buttonAppearanceClasses = {
 };
 var buttonShapeClasses = {
   rect: "",
-  circle: "btn-circle",
+  circle: "btn-circle btn-icon",
   square: "btn-square"
 };
 var buttonSizeClasses = {
@@ -87,11 +91,14 @@ function getButtonClasses({
   isLoading,
   className
 }) {
-  return cn(buttonBaseClass, buttonColorClasses[color], buttonAppearanceClasses[appearance], buttonShapeClasses[shape], buttonSizeClasses[size], block && buttonBlockClass, isLoading && buttonIsLoadingClass, className);
+  return cn(buttonBaseClass, buttonColorClasses[color], buttonAppearanceClasses[appearance], buttonShapeClasses[shape], buttonSizeClasses[size], shape === "circle" && size === "xs" && "btn-icon-sm", shape === "circle" && size === "sm" && "btn-icon-sm", shape === "circle" && size === "lg" && "btn-icon-lg", block && buttonBlockClass, isLoading && buttonIsLoadingClass, className);
 }
 
 // src/components/button/Button.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function isPromiseLike(value) {
+  return value !== null && (typeof value === "object" || typeof value === "function") && typeof value.then === "function";
+}
 function Button({
   color = "primary",
   appearance = "filled",
@@ -105,8 +112,155 @@ function Button({
   children,
   disabled,
   ref,
+  confirm,
+  onClick,
   ...props
 }) {
+  const buttonRef = React.useRef(null);
+  const popoverRef = React.useRef(null);
+  const cancelRef = React.useRef(null);
+  const approvalRef = React.useRef("idle");
+  const pendingRef = React.useRef(false);
+  const actionRef = React.useRef(0);
+  const operationRef = React.useRef(0);
+  const mountedRef = React.useRef(false);
+  const [portalTarget, setPortalTarget] = React.useState(null);
+  const [confirmLoading, setConfirmLoading] = React.useState(false);
+  const [confirmError, setConfirmError] = React.useState(false);
+  const generatedId = React.useId().replace(/:/g, "");
+  const popoverId = `button-confirm-${generatedId}`;
+  const titleId = `${popoverId}-title`;
+  const descriptionId = `${popoverId}-description`;
+  const anchor = `--${popoverId}-anchor`;
+  const hasConfirm = Boolean(confirm);
+  const confirmation = confirm && typeof confirm === "object" ? confirm : undefined;
+  const title = confirmation ? confirmation.title : "Confirm action";
+  const hasTitle = title !== undefined && title !== null && title !== false && title !== "";
+  const content = confirmation?.component ?? confirmation?.message ?? confirmation?.description;
+  const hasContent = content !== undefined && content !== null && content !== false && content !== "";
+  const mergedRef = React.useCallback((node) => {
+    buttonRef.current = node;
+    if (!node) {
+      if (typeof ref === "function")
+        ref(null);
+      else if (ref)
+        ref.current = null;
+      return;
+    }
+    const cleanup = typeof ref === "function" ? ref(node) : undefined;
+    if (ref && typeof ref !== "function")
+      ref.current = node;
+    return () => {
+      buttonRef.current = null;
+      if (typeof cleanup === "function")
+        cleanup();
+      else if (typeof ref === "function")
+        ref(null);
+      else if (ref)
+        ref.current = null;
+    };
+  }, [ref]);
+  React.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      operationRef.current += 1;
+    };
+  }, []);
+  React.useEffect(() => {
+    operationRef.current += 1;
+    approvalRef.current = "idle";
+    setConfirmError(false);
+    setPortalTarget(hasConfirm ? document.body : null);
+  }, [hasConfirm]);
+  function closePopover() {
+    if (popoverRef.current?.matches(":popover-open")) {
+      popoverRef.current.hidePopover();
+    }
+    buttonRef.current?.focus();
+  }
+  function handleClick(event) {
+    if (!confirm) {
+      onClick?.(event);
+      return;
+    }
+    if (approvalRef.current === "native") {
+      approvalRef.current = "idle";
+      return;
+    }
+    if (approvalRef.current === "action") {
+      approvalRef.current = "idle";
+      let result;
+      try {
+        result = onClick?.(event);
+      } catch {
+        event.preventDefault();
+        pendingRef.current = false;
+        setConfirmError(true);
+        return;
+      }
+      if (!isPromiseLike(result)) {
+        pendingRef.current = false;
+        closePopover();
+        return;
+      }
+      const userPreventedDefault = event.defaultPrevented;
+      event.preventDefault();
+      setConfirmLoading(true);
+      const action = actionRef.current;
+      const operation = operationRef.current;
+      Promise.resolve(result).then(() => {
+        if (!mountedRef.current || action !== actionRef.current)
+          return;
+        pendingRef.current = false;
+        setConfirmLoading(false);
+        if (operation !== operationRef.current)
+          return;
+        closePopover();
+        if (!userPreventedDefault && !buttonRef.current?.disabled) {
+          approvalRef.current = "native";
+          buttonRef.current?.click();
+          approvalRef.current = "idle";
+        }
+      }, () => {
+        if (!mountedRef.current || action !== actionRef.current)
+          return;
+        pendingRef.current = false;
+        setConfirmLoading(false);
+        if (operation !== operationRef.current)
+          return;
+        setConfirmError(true);
+        cancelRef.current?.focus();
+      });
+      return;
+    }
+    event.preventDefault();
+    if (disabled || isLoading || pendingRef.current)
+      return;
+    if (popoverRef.current?.matches(":popover-open")) {
+      closePopover();
+      return;
+    }
+    setConfirmError(false);
+    popoverRef.current?.showPopover();
+    cancelRef.current?.focus();
+  }
+  function handleConfirm(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    const trigger = buttonRef.current;
+    if (disabled || isLoading || pendingRef.current || !trigger || trigger.disabled || !event.currentTarget.matches(":popover-open"))
+      return;
+    setConfirmError(false);
+    pendingRef.current = true;
+    actionRef.current += 1;
+    approvalRef.current = "action";
+    trigger.click();
+    if (approvalRef.current === "action") {
+      approvalRef.current = "idle";
+      pendingRef.current = false;
+    }
+  }
   const classes = getButtonClasses({
     color,
     appearance,
@@ -116,29 +270,104 @@ function Button({
     isLoading,
     className
   });
-  return /* @__PURE__ */ jsxs("button", {
-    ref,
-    className: classes,
-    disabled: disabled || isLoading,
-    "aria-busy": isLoading,
-    "aria-disabled": disabled || isLoading,
-    ...props,
+  const confirmClasses = getButtonClasses({
+    color,
+    size: "sm",
+    isLoading: confirmLoading
+  });
+  return /* @__PURE__ */ jsxs(Fragment, {
     children: [
-      isLoading && /* @__PURE__ */ jsx("span", {
-        className: "btn-spinner"
-      }),
-      !isLoading && leftIcon && /* @__PURE__ */ jsx("span", {
-        className: "btn-icon-left",
-        children: leftIcon
-      }),
-      /* @__PURE__ */ jsx("span", {
-        className: "btn-content",
-        children
+      /* @__PURE__ */ jsxs("button", {
+        ref: confirm ? mergedRef : ref,
+        className: classes,
+        disabled: disabled || isLoading,
+        "aria-busy": isLoading,
+        "aria-disabled": disabled || isLoading,
+        ...props,
+        style: confirm ? { ...props.style, anchorName: anchor } : props.style,
+        "aria-haspopup": confirm ? "dialog" : props["aria-haspopup"],
+        "aria-controls": confirm ? popoverId : props["aria-controls"],
+        onClick: confirm ? handleClick : onClick,
+        children: [
+          isLoading && /* @__PURE__ */ jsx("span", {
+            className: "btn-spinner"
+          }),
+          !isLoading && leftIcon && /* @__PURE__ */ jsx("span", {
+            className: "btn-icon-left",
+            children: leftIcon
+          }),
+          /* @__PURE__ */ jsx("span", {
+            className: "btn-content",
+            children
+          }),
+          !isLoading && rightIcon && /* @__PURE__ */ jsx("span", {
+            className: "btn-icon-right",
+            children: rightIcon
+          })
+        ]
       }),
-      !isLoading && rightIcon && /* @__PURE__ */ jsx("span", {
-        className: "btn-icon-right",
-        children: rightIcon
-      })
+      confirm && portalTarget && createPortal(/* @__PURE__ */ jsxs("form", {
+        id: popoverId,
+        ref: popoverRef,
+        popover: "auto",
+        role: "dialog",
+        "aria-labelledby": hasTitle ? titleId : undefined,
+        "aria-label": hasTitle ? undefined : "Confirm action",
+        "aria-describedby": hasContent ? descriptionId : undefined,
+        className: "popover popover-confirm popover-bottom",
+        style: { positionAnchor: anchor },
+        onSubmit: handleConfirm,
+        onClick: (event) => event.stopPropagation(),
+        onToggle: (event) => {
+          if (!event.currentTarget.matches(":popover-open")) {
+            operationRef.current += 1;
+            if (event.currentTarget.contains(document.activeElement) || document.activeElement === document.body) {
+              buttonRef.current?.focus();
+            }
+          }
+        },
+        children: [
+          hasTitle && /* @__PURE__ */ jsx("div", {
+            className: "popover-header",
+            children: /* @__PURE__ */ jsx("h3", {
+              id: titleId,
+              className: "popover-title",
+              children: title
+            })
+          }),
+          hasContent && /* @__PURE__ */ jsx("div", {
+            id: descriptionId,
+            className: "popover-body",
+            children: content
+          }),
+          confirmError && /* @__PURE__ */ jsx("div", {
+            role: "alert",
+            className: "popover-body",
+            children: "The action failed. Please try again."
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: "popover-footer",
+            children: [
+              /* @__PURE__ */ jsx("button", {
+                ref: cancelRef,
+                type: "button",
+                className: "btn btn-text btn-sm",
+                popoverTarget: popoverId,
+                popoverTargetAction: "hide",
+                disabled: confirmLoading,
+                children: confirmation?.cancelText ?? "Cancel"
+              }),
+              /* @__PURE__ */ jsx("button", {
+                type: "submit",
+                className: confirmClasses,
+                disabled: disabled || isLoading || confirmLoading,
+                "aria-busy": confirmLoading,
+                children: confirmation?.confirmText ?? "Confirm"
+              })
+            ]
+          })
+        ]
+      }), portalTarget)
     ]
   });
 }
@@ -147,34 +376,32 @@ import {
   cloneElement,
   forwardRef,
   isValidElement,
+  useEffect,
   useId,
+  useRef,
   useState
 } from "react";
 
 // src/classes/dropdown.ts
-var dropdownWrapperClass = "dropdown-wrapper";
-var dropdownBaseClass = "popover dropdown";
-var dropdownOpenClass = "popover-show dropdown-open";
-var dropdownArrowClass = "popover-arrow dropdown-arrow";
+var dropdownWrapperClass = "dropdown";
+var dropdownBaseClass = "dropdown-content";
+var dropdownArrowClass = "dropdown-arrow";
 var dropdownMenuClass = "menu dropdown-menu";
 var dropdownButtonClass = "dropdown-button";
 var dropdownPlacementClasses = {
-  top: "popover-top dropdown-top",
-  bottom: "popover-bottom dropdown-bottom",
-  left: "popover-left dropdown-left",
-  right: "popover-right dropdown-right",
-  topLeft: "popover-top dropdown-top-left",
-  topRight: "popover-top dropdown-top-right",
-  bottomLeft: "popover-bottom dropdown-bottom-left",
-  bottomRight: "popover-bottom dropdown-bottom-right"
+  top: "dropdown-block-start",
+  bottom: "dropdown-block-end",
+  left: "dropdown-inline-start",
+  right: "dropdown-inline-end",
+  topLeft: "dropdown-block-start",
+  topRight: "dropdown-block-start",
+  bottomLeft: "dropdown-block-end",
+  bottomRight: "dropdown-block-end"
 };
 function getDropdownClasses({
-  placement = "bottomLeft",
-  open,
-  arrow,
   className
 }) {
-  return cn(dropdownBaseClass, dropdownPlacementClasses[placement], open && dropdownOpenClass, !arrow && "popover-no-arrow dropdown-no-arrow", className);
+  return cn(dropdownBaseClass, className);
 }
 
 // src/classes/menu.ts
@@ -227,9 +454,6 @@ function getMenuItemClasses({
 
 // src/components/dropdown/Dropdown.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function hasTrigger(triggers, trigger) {
-  return (triggers ?? ["hover"]).includes(trigger);
-}
 function callHandler(handler, event) {
   handler?.(event);
 }
@@ -281,85 +505,103 @@ var DropdownRoot = forwardRef(({
   ...props
 }, ref) => {
   const [internalOpen, setInternalOpen] = useState(Boolean(defaultOpen));
-  const isControlled = open !== undefined;
-  const visible = isControlled ? open : internalOpen;
-  const overlayId = useId();
-  function setVisible(nextOpen) {
-    if (disabled)
+  const [nativeOpen, setNativeOpen] = useState(Boolean(open ?? defaultOpen));
+  const visible = open ?? internalOpen;
+  const popupRef = useRef(null);
+  const popupId = useId();
+  const anchorName = `--dm-dropdown-${popupId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const clickTrigger = trigger.includes("click") || trigger.includes("hover");
+  useEffect(() => {
+    const popup = popupRef.current;
+    if (!popup?.showPopover || !popup?.hidePopover)
       return;
-    if (!isControlled) {
+    if (visible && !popup.matches(":popover-open"))
+      popup.showPopover();
+    if (!visible && popup.matches(":popover-open"))
+      popup.hidePopover();
+  }, [visible]);
+  function setVisible(nextOpen) {
+    if (open === undefined)
       setInternalOpen(nextOpen);
-    }
     onOpenChange?.(nextOpen);
   }
-  const close = () => setVisible(false);
-  const toggleVisible = () => setVisible(!visible);
+  function close() {
+    const popup = popupRef.current;
+    if (popup?.matches(":popover-open"))
+      popup.hidePopover();
+    else
+      setVisible(false);
+  }
   const menuNode = overlay ?? (menu?.items ? /* @__PURE__ */ jsx2("ul", {
     className: dropdownMenuClass,
     children: menu.items.map((item) => renderMenuItem(item, menu.onClick, close))
   }) : null);
   const popup = dropdownRender ? dropdownRender(menuNode) : menuNode;
-  const shouldRenderPopup = !destroyPopupOnHide || visible;
-  const triggerProps = {
-    "aria-controls": visible ? overlayId : undefined,
-    "aria-expanded": visible || undefined,
-    onMouseEnter: hasTrigger(trigger, "hover") ? () => setVisible(true) : undefined,
-    onMouseLeave: hasTrigger(trigger, "hover") ? () => setVisible(false) : undefined,
-    onClick: hasTrigger(trigger, "click") ? toggleVisible : undefined,
-    onContextMenu: hasTrigger(trigger, "contextMenu") ? (event) => {
-      event.preventDefault();
-      toggleVisible();
-    } : undefined
+  const show = () => !disabled && popupRef.current?.showPopover?.();
+  const hide = () => !disabled && popupRef.current?.hidePopover?.();
+  const toggle = () => {
+    if (disabled)
+      return;
+    if (popupRef.current?.matches(":popover-open"))
+      hide();
+    else
+      show();
   };
+  const childIsButton = isValidElement(children) && (children.type === "button" || children.type === Button);
   const triggerNode = isValidElement(children) ? cloneElement(children, {
-    "aria-controls": triggerProps["aria-controls"] ?? children.props["aria-controls"],
-    "aria-expanded": triggerProps["aria-expanded"] ?? children.props["aria-expanded"],
+    popoverTarget: childIsButton && clickTrigger && !disabled ? popupId : undefined,
+    style: {
+      ...children.props.style,
+      anchorName
+    },
+    "aria-controls": popupId,
+    "aria-expanded": nativeOpen,
+    disabled: disabled || children.props.disabled,
     onMouseEnter: (event) => {
       callHandler(children.props.onMouseEnter, event);
-      triggerProps.onMouseEnter?.();
+      if (trigger.includes("hover"))
+        show();
       onMouseEnter?.(event);
     },
     onMouseLeave: (event) => {
       callHandler(children.props.onMouseLeave, event);
-      triggerProps.onMouseLeave?.();
       onMouseLeave?.(event);
     },
     onClick: (event) => {
       callHandler(children.props.onClick, event);
-      triggerProps.onClick?.();
       onClick?.(event);
+      if (!childIsButton && clickTrigger && !event.defaultPrevented)
+        toggle();
     },
     onContextMenu: (event) => {
       callHandler(children.props.onContextMenu, event);
-      triggerProps.onContextMenu?.(event);
+      if (trigger.includes("contextMenu")) {
+        event.preventDefault();
+        toggle();
+      }
       onContextMenu?.(event);
     }
-  }) : /* @__PURE__ */ jsx2("span", {
-    role: "button",
-    tabIndex: disabled ? -1 : 0,
-    "aria-disabled": disabled || undefined,
-    "aria-controls": triggerProps["aria-controls"],
-    "aria-expanded": triggerProps["aria-expanded"],
+  }) : /* @__PURE__ */ jsx2("button", {
+    type: "button",
+    disabled,
+    popoverTarget: clickTrigger && !disabled ? popupId : undefined,
+    style: { anchorName },
+    "aria-controls": popupId,
+    "aria-expanded": nativeOpen,
     onMouseEnter: (event) => {
-      triggerProps.onMouseEnter?.();
+      if (trigger.includes("hover"))
+        show();
       onMouseEnter?.(event);
     },
     onMouseLeave: (event) => {
-      triggerProps.onMouseLeave?.();
       onMouseLeave?.(event);
     },
-    onClick: (event) => {
-      triggerProps.onClick?.();
-      onClick?.(event);
-    },
-    onKeyDown: (event) => {
-      if (event.key === "Enter" || event.key === " ") {
+    onClick,
+    onContextMenu: (event) => {
+      if (trigger.includes("contextMenu")) {
         event.preventDefault();
-        triggerProps.onClick?.();
+        toggle();
       }
-    },
-    onContextMenu: (event) => {
-      triggerProps.onContextMenu?.(event);
       onContextMenu?.(event);
     },
     children
@@ -367,25 +609,30 @@ var DropdownRoot = forwardRef(({
   return /* @__PURE__ */ jsxs2("span", {
     ...props,
     ref,
-    className: dropdownWrapperClass,
+    className: cn(dropdownWrapperClass, dropdownPlacementClasses[placement]),
+    onMouseLeave: trigger.includes("hover") ? hide : undefined,
     children: [
       triggerNode,
-      shouldRenderPopup ? /* @__PURE__ */ jsxs2("span", {
-        id: overlayId,
-        role: "menu",
-        className: getDropdownClasses({
-          placement,
-          open: visible,
-          arrow,
-          className
-        }),
+      /* @__PURE__ */ jsxs2("span", {
+        id: popupId,
+        ref: popupRef,
+        popover: "auto",
+        style: { positionAnchor: anchorName },
+        className: getDropdownClasses({ className, arrow }),
+        onToggle: (event) => {
+          if (event.target !== event.currentTarget)
+            return;
+          const nextOpen = event.nativeEvent.newState === "open";
+          setNativeOpen(nextOpen);
+          setVisible(nextOpen);
+        },
         children: [
-          popup,
+          !destroyPopupOnHide || visible ? popup : null,
           arrow ? /* @__PURE__ */ jsx2("span", {
             className: dropdownArrowClass
           }) : null
         ]
-      }) : null
+      })
     ]
   });
 });
@@ -397,31 +644,74 @@ var DropdownButton = forwardRef(({
   menu,
   onClick,
   trigger = ["click"],
+  color = "base",
+  appearance = "outline",
+  size,
+  shape,
+  block,
+  isLoading,
+  leftIcon,
+  rightIcon,
+  confirm,
   ...props
 }, ref) => {
+  const buttonStyle = { color, appearance, size, shape };
   const buttons = [
     /* @__PURE__ */ jsx2(Button, {
+      ...buttonStyle,
       disabled,
+      isLoading,
+      leftIcon,
+      rightIcon,
+      confirm,
       onClick,
       children
     }, "primary"),
     /* @__PURE__ */ jsx2(Button, {
+      ...buttonStyle,
+      type: "button",
       "aria-label": "Open dropdown",
-      disabled,
-      children: "v"
+      disabled: disabled || isLoading,
+      children: /* @__PURE__ */ jsxs2("svg", {
+        "aria-hidden": "true",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 24 24",
+        fill: "currentColor",
+        children: [
+          /* @__PURE__ */ jsx2("circle", {
+            cx: "5",
+            cy: "12",
+            r: "1.75"
+          }),
+          /* @__PURE__ */ jsx2("circle", {
+            cx: "12",
+            cy: "12",
+            r: "1.75"
+          }),
+          /* @__PURE__ */ jsx2("circle", {
+            cx: "19",
+            cy: "12",
+            r: "1.75"
+          })
+        ]
+      })
     }, "trigger")
   ];
   const renderedButtons = buttonsRender ? buttonsRender(buttons) : buttons;
-  return /* @__PURE__ */ jsx2(DropdownRoot, {
-    ...props,
+  return /* @__PURE__ */ jsxs2("span", {
     ref,
-    menu,
-    trigger,
-    disabled,
-    children: /* @__PURE__ */ jsx2("span", {
-      className: dropdownButtonClass,
-      children: renderedButtons
-    })
+    className: cn(dropdownButtonClass, block && "dropdown-button-block"),
+    children: [
+      renderedButtons[0],
+      /* @__PURE__ */ jsx2(DropdownRoot, {
+        ...props,
+        menu,
+        trigger,
+        disabled: disabled || isLoading,
+        children: renderedButtons[1]
+      })
+    ]
   });
 });
 DropdownButton.displayName = "Dropdown.Button";