@edux-design/popovers 1.0.6 → 1.1.0

package/dist/index.mjs

@@ -2,7 +2,14 @@
 import React, { forwardRef } from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { cx } from "@edux-design/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
 var POPOVER_Z_INDEX = 2147483646;
+var POPOVER_POSITIONING_CLASSES = {
+  top: "-translate-y-(--motion-distance-xs)",
+  right: "translate-x-(--motion-distance-xs)",
+  bottom: "translate-y-(--motion-distance-xs)",
+  left: "-translate-x-(--motion-distance-xs)"
+};
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
@@ -24,14 +31,8 @@ var PopoverContent = forwardRef(
     contentProps = {},
     ...restProps
   }, ref) => {
-    const base = "bg-fg-base text-fg-invert text-sm font-normal rounded-xl shadow-lg px-12 py-8 animate-fade-in";
-    const positioning = {
-      top: "translate-y-[-4px]",
-      right: "translate-x-[4px]",
-      bottom: "translate-y-[4px]",
-      left: "translate-x-[-4px]"
-    }[side];
-    return /* @__PURE__ */ React.createElement(PopoverPortal, { container, ...portalProps }, /* @__PURE__ */ React.createElement(
+    const positioning = POPOVER_POSITIONING_CLASSES[side];
+    return /* @__PURE__ */ jsx(PopoverPortal, { container, ...portalProps, children: /* @__PURE__ */ jsxs(
       PopoverPrimitive.Content,
       {
         ref,
@@ -44,23 +45,167 @@ var PopoverContent = forwardRef(
         className: cx(positioning, className, "relative"),
         style: { zIndex: POPOVER_Z_INDEX, ...style },
         ...contentProps,
-        ...restProps
-      },
-      children,
-      showArrow && /* @__PURE__ */ React.createElement(
-        PopoverPrimitive.Arrow,
-        {
-          className: "fill-fg-base",
-          width: 12,
-          height: 8
-        }
-      )
-    ));
+        ...restProps,
+        children: [
+          children,
+          showArrow && /* @__PURE__ */ jsx(
+            PopoverPrimitive.Arrow,
+            {
+              className: "fill-fg-base",
+              width: 12,
+              height: 8
+            }
+          )
+        ]
+      }
+    ) });
   }
 );
 PopoverContent.displayName = "PopoverContent";
 var PopoverClose = PopoverPrimitive.Close;
+
+// src/elements/ConfirmationPopover.tsx
+import { forwardRef as forwardRef2, useId, useRef, useState } from "react";
+import { Button } from "@edux-design/buttons";
+import { cx as cx2 } from "@edux-design/utils";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ConfirmationPopover = forwardRef2(function ConfirmationPopover2({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  title,
+  description,
+  children,
+  trigger,
+  onConfirm,
+  onCancel,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  pendingLabel = "Working\u2026",
+  pending = false,
+  error,
+  confirmDisabled = false,
+  cancelDisabled = false,
+  dismissible = true,
+  returnFocusRef,
+  isDanger = false,
+  allowDismissWhilePending = false,
+  modal = true,
+  anchor,
+  contentProps = {},
+  portalProps,
+  confirmButtonProps = {},
+  cancelButtonProps = {}
+}, ref) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const resolvedOpen = open ?? uncontrolledOpen;
+  const cancelRef = useRef(null);
+  const titleId = useId();
+  const descriptionId = useId();
+  const locked = !dismissible || pending && !allowDismissWhilePending;
+  const {
+    onClick: onCancelClick,
+    ref: actionRef,
+    ...cancelProps
+  } = cancelButtonProps;
+  const { onClick: onConfirmClick, ...confirmProps } = confirmButtonProps;
+  const requestOpen = (next) => {
+    if (!next && locked) return;
+    if (open === void 0) setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs2(Popover, { open: resolvedOpen, onOpenChange: requestOpen, modal, children: [
+    anchor && /* @__PURE__ */ jsx2(PopoverAnchor, { asChild: true, children: anchor }),
+    /* @__PURE__ */ jsx2(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs2(
+      PopoverContent,
+      {
+        side: "bottom",
+        align: "end",
+        ...contentProps,
+        ref,
+        portalProps,
+        "aria-labelledby": contentProps["aria-labelledby"] ?? titleId,
+        "aria-describedby": contentProps["aria-describedby"] ?? (description ? descriptionId : void 0),
+        "aria-busy": pending || void 0,
+        className: cx2(
+          "w-[min(320px,calc(100vw-32px))] max-h-[var(--radix-popover-content-available-height)] overflow-auto rounded-md border-2 border-border-subtle bg-bg-base p-16 text-sm text-fg-base shadow-lg motion-reduce:animate-none",
+          contentProps.className
+        ),
+        onOpenAutoFocus: (event) => {
+          contentProps.onOpenAutoFocus?.(event);
+          if (!event.defaultPrevented) {
+            event.preventDefault();
+            if (!locked && !cancelDisabled) cancelRef.current?.focus();
+            else if (event.target instanceof HTMLElement) event.target.focus();
+          }
+        },
+        onCloseAutoFocus: (event) => {
+          contentProps.onCloseAutoFocus?.(event);
+          if (!event.defaultPrevented && returnFocusRef?.current?.isConnected) {
+            event.preventDefault();
+            returnFocusRef.current.focus();
+          }
+        },
+        onEscapeKeyDown: (event) => {
+          contentProps.onEscapeKeyDown?.(event);
+          if (locked) event.preventDefault();
+        },
+        onInteractOutside: (event) => {
+          contentProps.onInteractOutside?.(event);
+          if (locked) event.preventDefault();
+        },
+        children: [
+          /* @__PURE__ */ jsx2("h2", { id: titleId, className: "text-base font-semibold text-fg-base", children: title }),
+          description && /* @__PURE__ */ jsx2("p", { id: descriptionId, className: "mt-8 text-sm text-fg-subtle", children: description }),
+          children && /* @__PURE__ */ jsx2("div", { className: "mt-12", children }),
+          error && /* @__PURE__ */ jsx2("div", { role: "alert", className: "mt-8 text-fg-danger-emphasis", children: error }),
+          pending && /* @__PURE__ */ jsx2("p", { role: "status", className: "sr-only", children: pendingLabel }),
+          /* @__PURE__ */ jsxs2("div", { className: "mt-16 flex flex-wrap justify-end gap-8", children: [
+            /* @__PURE__ */ jsx2(
+              Button,
+              {
+                ...cancelProps,
+                ref: (node) => {
+                  cancelRef.current = node;
+                  if (typeof actionRef === "function") actionRef(node);
+                  else if (actionRef) actionRef.current = node;
+                },
+                type: "button",
+                size: "small",
+                isSecondary: true,
+                disabled: locked || cancelDisabled,
+                onClick: (event) => {
+                  onCancelClick?.(event);
+                  if (!event.defaultPrevented) onCancel?.(event);
+                  if (!event.defaultPrevented) requestOpen(false);
+                },
+                children: cancelLabel
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              Button,
+              {
+                ...confirmProps,
+                type: "button",
+                size: "small",
+                isDanger,
+                disabled: pending || confirmDisabled,
+                onClick: (event) => {
+                  onConfirmClick?.(event);
+                  if (!event.defaultPrevented) onConfirm(event);
+                },
+                children: pending ? pendingLabel : confirmLabel
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+});
 export {
+  ConfirmationPopover,
   Popover,
   PopoverAnchor,
   PopoverClose,

package/docs/confirmation.md

@@ -0,0 +1,118 @@
+# ConfirmationPopover
+
+Import `ConfirmationPopover` and `ConfirmationPopoverProps` from `@edux-design/popovers`.
+It composes the existing Popover root/trigger/anchor/content so it retains portalling,
+placement, offsets, collision handling and public ref/event behaviour.
+
+```tsx
+<ConfirmationPopover
+  open={activeConfirmation === row.id}
+  onOpenChange={(next) => setActiveConfirmation(next ? row.id : null)}
+  title="Delete this question?"
+  description="The question will be removed from this group."
+  trigger={
+    <IconButton
+      aria-label="Delete question"
+      icon={<Trash />}
+      isBare
+      isDanger
+      size="small"
+      onMouseDown={(event) => event.preventDefault()}
+    />
+  }
+  confirmLabel="Delete question"
+  isDanger
+  onConfirm={handleDelete}
+  confirmButtonProps={{
+    onMouseDown: (event) => event.preventDefault(),
+    onClick: (event) => event.stopPropagation(),
+  }}
+  cancelButtonProps={{
+    onMouseDown: (event) => event.preventDefault(),
+    onClick: (event) => event.stopPropagation(),
+  }}
+  contentProps={{ side: "bottom", align: "end", collisionPadding: 16 }}
+/>
+```
+
+`trigger` is required: pass one ref-forwarding element; `PopoverTrigger asChild`
+preserves its original handlers/ref. `anchor` optionally supplies another
+ref-forwarding positioning element. `modal` defaults to `true`, containing keyboard
+focus and blocking outside pointer interaction using the underlying Radix root.
+Set `modal={false}` only when a non-modal contextual workflow is intended; it permits
+focus to leave. Outside focus dismisses that non-modal presentation unless locked
+or vetoed. Idle Escape and Cancel close in both modes. The trigger normally receives
+focus after modal closure; `returnFocusRef` and preventable `onCloseAutoFocus` cover
+removed rows and explicit host editor focus.
+
+Use `contentProps` for `side`, `align`, offsets, collision settings and native event
+hooks; defaults are bottom/end with the existing Popover gap. `portalProps` forwards
+the existing Radix Portal options. The responsive surface is at most 320px wide,
+leaves 16px at viewport edges, and scrolls within available Popover height.
+The generic composition adds no editor selection suppression or row drag policy;
+pass native trigger/action handlers when an adapter needs those behaviours.
+
+Both confirmations leave mutation policy in the host. They never await, interpret,
+catch, or auto-close after `onConfirm`: synchronous commands, promises, false results,
+blocking document errors and retriable service errors can keep their own lifecycle.
+An async handler must catch its own rejection and update its own `pending`/`error`.
+Nothing schedules asynchronous component state after the callback.
+
+`open` is authoritative when supplied. Omit it and use `defaultOpen` for an
+uncontrolled presentation; `onOpenChange(next)` reports user requests in either mode.
+Confirm does not close even in uncontrolled mode: use controlled state when success
+must close the presentation. `onCancel(event)` only reports the Cancel button;
+Escape and outside dismissal report through `onOpenChange`, without pretending to
+be a Cancel activation.
+
+Actions use Edux `Button`, default to `type="button"`, and wrap on narrow surfaces.
+The default confirm action is neutral. Set `isDanger` for destructive actions.
+`confirmDisabled` and `cancelDisabled` independently disable their respective
+buttons. An error renders a `role="alert"`; an error alone does not disable retry.
+For a stale editor/document error, the host also sets `confirmDisabled`.
+
+While `pending`, both actions are disabled, the surface has `aria-busy`, and
+`pendingLabel` (default “Working…”) replaces the confirm text and is exposed as a
+status. Escape, outside pointer/focus dismissal, Cancel, and trigger toggle requests
+cannot close the presentation. `allowDismissWhilePending` explicitly unlocks user
+cancellation while confirm remains disabled; use it only when the host permits that
+policy. `dismissible={false}` locks user dismissal regardless of pending. A controlled
+host can always set `open={false}`, for example after confirmed success. There is no
+implicit header X action to bypass these rules.
+
+Safe initial focus goes to Cancel. If Cancel is unavailable, focus stays on the
+surface rather than choosing the destructive action. Native `contentProps`
+`onOpenAutoFocus`/`onCloseAutoFocus` can call `event.preventDefault()` to replace the
+focus policy; these hooks run first. `returnFocusRef` supplies an explicit return
+target when the originating row might disappear. For an editor command that places
+its own selection/focus, prevent close autofocus so automatic restoration cannot
+undo that command. A missing or disconnected return target is not focused.
+
+`contentProps` forwards native attributes, style/className, keyboard/pointer events,
+and Radix focus/dismissal hooks. The surface ref is an `HTMLDivElement`.
+`confirmButtonProps`/`cancelButtonProps` forward native button attributes, refs and
+mouse/keyboard handlers. Their click handlers run before `onConfirm`/`onCancel`;
+`preventDefault()` vetoes the corresponding action, and `stopPropagation()` remains
+available for editable/sortable row adapters. Forced action type, disabled state and
+pending guards take precedence. Caller dismissal hooks run first, then the internal
+lock always prevents dismissal while locked; a handler cannot accidentally undo it.
+
+Each surface is a labelled `dialog`, with a meaningful description when provided.
+Confirmation is a decision, so it uses ordinary buttons rather than menu navigation.
+It does not automatically claim urgent `alertdialog` semantics. A caller may set
+`contentProps.role="alertdialog"` when that semantic is appropriate. Error messages
+have alert semantics separately. IDs remain unique across instances.
+
+Use current semantic surface/foreground/border/action/danger tokens. There are no
+new tokens or package-owned palettes, and theme switching does not change geometry.
+Pass `portalProps.container` when a brand/mode scope is below the document root;
+put `brand--blue`/`brand--teal` and `theme--light`/`theme--dark` on that same scope.
+Default portals inherit the application root theme. Native reduced-motion rules
+apply; the compositions also disable their surface animation for reduced motion.
+The primitives keep collision/viewport bounds, content scrolls, and footer actions
+wrap. Domain checks, permissions, editor resolver registration, persistence, source
+warnings, server mutation and cancellation remain local.
+
+Storybook: `Popovers/ConfirmationPopover` includes the shared confirmation cases and
+an editable/sortable-style row proving action propagation stays under host control.
+Component tests use real Radix interaction. Public type/runtime fixtures live under `test/`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edux-design/popovers",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "private": false,
   "sideEffects": [
     "**/*.css"
@@ -13,25 +13,21 @@
       "require": "./dist/index.js"
     }
   },
-  "scripts": {
-    "lint": "eslint . --max-warnings 0",
-    "build": "tsup src/index.js --format esm,cjs  --external react,react-dom,@radix-ui/react-popover",
-    "dev": "tsup src/index.js --format esm,cjs  --external react,react-dom,@radix-ui/react-popover",
-    "generate:component": "turbo gen react-component",
-    "check-types": "tsc --noEmit"
-  },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
     "@edux-design/utils": "*",
     "@radix-ui/react-popover": "1.1.15"
   },
-  "devDependencies": {
-    "typescript": "^5.9.2",
-    "tailwindcss": "^4.1.12",
-    "postcss": "^8.5.6",
-    "tsup": "^8.5.0",
-    "@tailwindcss/cli": "^4.1.12",
-    "@tailwindcss/postcss": "^4.1.12"
+  "files": [
+    "dist",
+    "docs",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE",
+    "LICENSE.md"
+  ],
+  "dependencies": {
+    "@edux-design/buttons": "*"
   }
 }

package/src/demos/Popover.stories.jsx

@@ -1,248 +0,0 @@
-import React, { useState } from "react";
-import {
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverClose,
-} from "./../index";
-import { Button } from "@edux-design/buttons";
-import { cx } from "@edux-design/utils";
-
-const meta = {
-  title: "Components/Popover",
-  component: Popover,
-  parameters: {
-    layout: "centered",
-    docs: {
-      description: {
-        component: `
-Radix-based **Popover** component.
-
-Use for contextual overlays triggered by a click, such as menus, mini-editors, or form helpers.
-
-Built with [@radix-ui/react-popover](https://www.radix-ui.com/primitives/docs/components/popover).
-        `,
-      },
-    },
-  },
-  argTypes: {
-    side: {
-      control: "select",
-      options: ["top", "right", "bottom", "left"],
-      description: "Placement of the popover relative to its trigger.",
-      table: { defaultValue: { summary: "bottom" } },
-    },
-    align: {
-      control: "select",
-      options: ["start", "center", "end"],
-      description: "Alignment of the popover along the cross axis.",
-      table: { defaultValue: { summary: "center" } },
-    },
-    sideOffset: {
-      control: { type: "number", min: 0, step: 1 },
-      description: "Gap between the trigger and popover.",
-      table: { defaultValue: { summary: 8 } },
-    },
-  },
-};
-export default meta;
-/**
- * ───────────────────────────────────────────────
- * Basic Popover
- * ───────────────────────────────────────────────
- */
-export const Basic = {
-  render: (args) => (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="primary">Open Popover</Button>
-      </PopoverTrigger>
-
-      <PopoverContent {...args}>
-        <div className="space-y-4 w-[200px]">
-          <p>This is a simple popover content.</p>
-          <PopoverClose asChild>
-            <Button variant="secondary" size="sm">
-              Close
-            </Button>
-          </PopoverClose>
-        </div>
-      </PopoverContent>
-    </Popover>
-  ),
-  args: {
-    side: "bottom",
-    align: "center",
-    sideOffset: 8,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "A basic popover triggered by a button click.",
-      },
-    },
-  },
-};
-
-/**
- * ───────────────────────────────────────────────
- * Custom Content
- * ───────────────────────────────────────────────
- */
-export const CustomContent = {
-  render: (args) => (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="primary">Show Custom Popover</Button>
-      </PopoverTrigger>
-      <PopoverContent
-        {...args}
-        className={cx(
-          "rounded-2xl border border-fg-subtle bg-fg-base p-16 w-[240px]",
-          "shadow-lg"
-        )}
-      >
-        <h3 className="font-semibold text-base mb-4">Popover title</h3>
-        <p className="text-sm text-fg-subtle">
-          You can render **anything** inside here — forms, menus, etc.
-        </p>
-        <div className="mt-8 flex justify-end">
-          <PopoverClose asChild>
-            <Button variant="bare" size="sm">
-              Dismiss
-            </Button>
-          </PopoverClose>
-        </div>
-      </PopoverContent>
-    </Popover>
-  ),
-  args: {
-    side: "top",
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Demonstrates custom content styling, with title, text, and custom buttons.",
-      },
-    },
-  },
-};
-
-/**
- * ───────────────────────────────────────────────
- * Controlled Popover
- * ───────────────────────────────────────────────
- */
-export const Controlled = {
-  render: (args) => {
-    const [open, setOpen] = useState(false);
-    return (
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button variant="primary">
-            {open ? "Close Popover" : "Open Controlled Popover"}
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent {...args}>
-          <div className="w-[220px] text-sm">
-            <p>This popover is **controlled** externally using React state.</p>
-            <div className="mt-6 flex justify-end">
-              <Button variant="bare" size="sm" onClick={() => setOpen(false)}>
-                Close
-              </Button>
-            </div>
-          </div>
-        </PopoverContent>
-      </Popover>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Shows how to control the popover’s open state externally via React state.",
-      },
-    },
-  },
-};
-
-/**
- * ───────────────────────────────────────────────
- *  All Sides Example
- * ───────────────────────────────────────────────
- */
-export const Sides = {
-  render: () => (
-    <div className="grid grid-cols-2 gap-16">
-      {["top", "right", "bottom", "left"].map((side) => (
-        <Popover key={side}>
-          <PopoverTrigger asChild>
-            <Button variant="secondary">Side: {side}</Button>
-          </PopoverTrigger>
-          <PopoverContent side={side}>
-            <p className="w-[140px] text-center">
-              Popover on <strong>{side}</strong>
-            </p>
-          </PopoverContent>
-        </Popover>
-      ))}
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "Showcases popovers appearing on all sides of the trigger.",
-      },
-    },
-  },
-};
-
-/**
- * ───────────────────────────────────────────────
- * No Auto Focus Example
- * ───────────────────────────────────────────────
- */
-export const NoAutoFocus = {
-  render: (args) => (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="primary">Open Non-Focusing Popover</Button>
-      </PopoverTrigger>
-
-      <PopoverContent
-        {...args}
-        onOpenAutoFocus={(event) => {
-          // Prevent Radix from automatically moving focus into the popover
-          event.preventDefault();
-        }}
-        trapFocus={false}
-        disableOutsidePointerEvents={false}
-        className="w-[220px]"
-      >
-        <p className="text-sm mb-4">
-          This popover <strong>does not steal focus</strong>. The trigger (or
-          other input) remains focused.
-        </p>
-        <PopoverClose asChild>
-          <Button variant="secondary" size="sm">
-            Close
-          </Button>
-        </PopoverClose>
-      </PopoverContent>
-    </Popover>
-  ),
-  args: {
-    side: "bottom",
-    align: "center",
-    sideOffset: 8,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Demonstrates disabling Radix’s default auto-focus behaviour using `onOpenAutoFocus={(e) => e.preventDefault()}`. The editor or trigger element retains focus when the popover opens.",
-      },
-    },
-  },
-};