@arun-dev/headless 4.1.0 → 4.3.0

package/dist/dialog/index.cjs

@@ -0,0 +1,333 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/dialog/index.ts
+var dialog_exports = {};
+__export(dialog_exports, {
+  Dialog: () => index_parts_exports
+});
+module.exports = __toCommonJS(dialog_exports);
+
+// src/dialog/index.parts.ts
+var index_parts_exports = {};
+__export(index_parts_exports, {
+  Close: () => DialogClose,
+  Popup: () => DialogPopup,
+  Root: () => DialogRoot,
+  Title: () => DialogTitle,
+  Trigger: () => DialogTrigger
+});
+
+// src/dialog/DialogRoot.tsx
+var import_react3 = require("react");
+
+// src/core/useControlled.ts
+var import_react = require("react");
+function useControlled({
+  controlled,
+  default: defaultValue,
+  name = "Component",
+  state = "value"
+}) {
+  const { current: isControlled } = (0, import_react.useRef)(controlled !== void 0);
+  const [uncontrolled, setUncontrolled] = (0, import_react.useState)(defaultValue);
+  const defaultRef = (0, import_react.useRef)(defaultValue);
+  const value = isControlled ? controlled : uncontrolled;
+  if (process.env.NODE_ENV !== "production") {
+    if (isControlled !== (controlled !== void 0)) {
+      console.error(
+        `${name}: cannot switch between controlled and uncontrolled \`${state}\`. Decide which one this component is for the whole of its life.`
+      );
+    }
+    if (!isControlled && defaultRef.current !== defaultValue) {
+      console.error(
+        `${name}: cannot change the default \`${state}\` after mount. It is only read once, so later changes are silently ignored.`
+      );
+    }
+  }
+  const setValue = (0, import_react.useCallback)(
+    (next) => {
+      if (!isControlled) setUncontrolled(next);
+    },
+    [isControlled]
+  );
+  return [value, setValue];
+}
+
+// src/dialog/DialogRootContext.ts
+var import_react2 = require("react");
+var DialogRootContext = (0, import_react2.createContext)(null);
+function useDialogRootContext(part) {
+  const context = (0, import_react2.useContext)(DialogRootContext);
+  if (context === null) {
+    throw new Error(`<Dialog.${part}> must be rendered inside <Dialog.Root>.`);
+  }
+  return context;
+}
+
+// src/dialog/DialogRoot.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function DialogRoot({
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  closeOnBackdropClick = true,
+  children
+}) {
+  const [open, setOpenState] = useControlled({
+    controlled: openProp,
+    default: defaultOpen ?? false,
+    name: "Dialog.Root",
+    state: "open"
+  });
+  const setOpen = (0, import_react3.useCallback)(
+    (next) => {
+      if (next === open) return;
+      setOpenState(next);
+      onOpenChange?.(next);
+    },
+    [open, setOpenState, onOpenChange]
+  );
+  const popupId = (0, import_react3.useId)();
+  const [titleId, setTitleId] = (0, import_react3.useState)(void 0);
+  const context = (0, import_react3.useMemo)(
+    () => ({ open, setOpen, closeOnBackdropClick, popupId, titleId, setTitleId }),
+    [open, setOpen, closeOnBackdropClick, popupId, titleId]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogRootContext.Provider, { value: context, children });
+}
+
+// src/core/useRender.ts
+var import_react4 = require("react");
+
+// src/core/mergeProps.ts
+function isEventHandler(key) {
+  return key.length > 2 && key.startsWith("on") && key[2] === key[2]?.toUpperCase();
+}
+function mergeRefs(...refs) {
+  return (node) => {
+    const cleanups = refs.map((ref) => {
+      if (typeof ref === "function") {
+        const result = ref(node);
+        return typeof result === "function" ? result : () => ref(null);
+      }
+      if (ref && typeof ref === "object") {
+        ref.current = node;
+        return () => {
+          ref.current = null;
+        };
+      }
+      return void 0;
+    });
+    return () => {
+      cleanups.forEach((cleanup) => {
+        if (typeof cleanup === "function") cleanup();
+      });
+    };
+  };
+}
+function isSyntheticEvent(event) {
+  return typeof event === "object" && event !== null && "nativeEvent" in event;
+}
+function makeEventPreventable(event) {
+  if (Object.prototype.hasOwnProperty.call(event, "preventComponentHandler")) return;
+  const target = event;
+  target.preventComponentHandler = () => {
+    target.componentHandlerPrevented = true;
+  };
+}
+function isComponentHandlerPrevented(event) {
+  return typeof event === "object" && event !== null && event.componentHandlerPrevented === true;
+}
+function chainHandlers(earlier, value) {
+  return (...args) => {
+    const event = args[0];
+    if (isSyntheticEvent(event)) makeEventPreventable(event);
+    value(...args);
+    if (isComponentHandlerPrevented(event)) return;
+    earlier(...args);
+  };
+}
+function mergeProps(...objects) {
+  const merged = {};
+  for (const props of objects) {
+    if (!props) continue;
+    for (const key of Object.keys(props)) {
+      const value = props[key];
+      if (value === void 0) continue;
+      if (isEventHandler(key) && typeof value === "function") {
+        const earlier = merged[key];
+        merged[key] = typeof earlier === "function" ? chainHandlers(earlier, value) : value;
+      } else if (key === "className") {
+        merged.className = merged.className ? `${String(merged.className)} ${String(value)}` : value;
+      } else if (key === "style") {
+        merged.style = { ...merged.style, ...value };
+      } else if (key === "ref") {
+        merged.ref = merged.ref ? mergeRefs(merged.ref, value) : value;
+      } else {
+        merged[key] = value;
+      }
+    }
+  }
+  return merged;
+}
+
+// src/core/useRender.ts
+function useRender({
+  render,
+  defaultTagName,
+  props,
+  consumerProps
+}) {
+  const merged = mergeProps(props, consumerProps);
+  if ((0, import_react4.isValidElement)(render)) {
+    return (0, import_react4.cloneElement)(render, mergeProps(merged, render.props));
+  }
+  return (0, import_react4.createElement)(defaultTagName, merged);
+}
+
+// src/dialog/dialogDataAttributes.ts
+function dialogDataAttributes({ open }) {
+  return {
+    "data-open": open ? "" : void 0,
+    "data-closed": open ? void 0 : ""
+  };
+}
+
+// src/dialog/DialogTrigger.tsx
+function DialogTrigger({ className, children, render, ...rest }) {
+  const { open, setOpen, popupId } = useDialogRootContext("Trigger");
+  return useRender({
+    render,
+    defaultTagName: "button",
+    props: {
+      type: "button",
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      "aria-controls": popupId,
+      ...dialogDataAttributes({ open }),
+      className,
+      children,
+      onClick() {
+        setOpen(true);
+      }
+    },
+    consumerProps: rest
+  });
+}
+
+// src/dialog/DialogPopup.tsx
+var import_react5 = require("react");
+function isOnBackdrop(dialog, x, y) {
+  const rect = dialog.getBoundingClientRect();
+  return x < rect.left || x > rect.right || y < rect.top || y > rect.bottom;
+}
+function DialogPopup({ className, children, render, ...rest }) {
+  const { open, setOpen, closeOnBackdropClick, popupId, titleId } = useDialogRootContext("Popup");
+  const elementRef = (0, import_react5.useRef)(null);
+  const pressedBackdrop = (0, import_react5.useRef)(false);
+  const [, resync] = (0, import_react5.useReducer)((n) => n + 1, 0);
+  (0, import_react5.useEffect)(() => {
+    const dialog = elementRef.current;
+    if (!dialog || typeof dialog.showModal !== "function") return;
+    if (open && !dialog.open) dialog.showModal();
+    else if (!open && dialog.open) dialog.close();
+  });
+  const element = useRender({
+    render,
+    defaultTagName: "dialog",
+    props: {
+      id: popupId,
+      "aria-labelledby": titleId,
+      ...dialogDataAttributes({ open }),
+      className,
+      children,
+      ref: elementRef,
+      onCancel(event) {
+        if (event.target !== event.currentTarget) return;
+        if (event.defaultPrevented) return;
+        event.preventDefault();
+        setOpen(false);
+      },
+      onClose(event) {
+        if (event.target !== event.currentTarget) return;
+        setOpen(false);
+        resync();
+      },
+      onPointerDown(event) {
+        const dialog = elementRef.current;
+        pressedBackdrop.current = dialog !== null && event.target === dialog && isOnBackdrop(dialog, event.clientX, event.clientY);
+      },
+      onClick(event) {
+        const dialog = elementRef.current;
+        const onBackdrop = pressedBackdrop.current && dialog !== null && event.target === dialog && isOnBackdrop(dialog, event.clientX, event.clientY);
+        pressedBackdrop.current = false;
+        if (onBackdrop && closeOnBackdropClick) setOpen(false);
+      }
+    },
+    consumerProps: rest
+  });
+  return element;
+}
+
+// src/dialog/DialogTitle.tsx
+var import_react6 = require("react");
+function DialogTitle({
+  id: idProp,
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const { setTitleId } = useDialogRootContext("Title");
+  const generatedId = (0, import_react6.useId)();
+  const id = idProp ?? generatedId;
+  (0, import_react6.useLayoutEffect)(() => {
+    setTitleId(id);
+    return () => setTitleId(void 0);
+  }, [id, setTitleId]);
+  return useRender({
+    render,
+    defaultTagName: "h2",
+    props: { id, className, children },
+    consumerProps: rest
+  });
+}
+
+// src/dialog/DialogClose.tsx
+function DialogClose({ className, children, render, ...rest }) {
+  const { setOpen } = useDialogRootContext("Close");
+  return useRender({
+    render,
+    defaultTagName: "button",
+    props: {
+      type: "button",
+      className,
+      children,
+      onClick() {
+        setOpen(false);
+      }
+    },
+    consumerProps: rest
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Dialog
+});

package/dist/dialog/index.d.cts

@@ -0,0 +1,117 @@
+import * as react from 'react';
+import { ReactNode, ReactElement, Ref, ComponentPropsWithRef } from 'react';
+
+type DialogRootProps = {
+    /**
+     * Controlled state. Provide `onOpenChange` alongside it.
+     *
+     * Never `undefined` once mounted: the mode is latched at mount, as for Switch.
+     */
+    open?: boolean;
+    /** Initial state when uncontrolled. Read once, at mount. */
+    defaultOpen?: boolean;
+    /**
+     * Called on every request to open or close — Trigger, Close, Esc, a backdrop click or a
+     * `<form method="dialog">`. A controlled dialog moves only if the parent accepts it.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Close when the backdrop is clicked. On by default; turn it off where an accidental
+     * click would lose work. Esc and `Dialog.Close` still close.
+     */
+    closeOnBackdropClick?: boolean;
+    children?: ReactNode;
+};
+/**
+ * Holds a dialog's state and shares it with its parts. Renders no element of its own.
+ *
+ * The dialog itself is a native `<dialog>` opened with `showModal()` (decision 7), so
+ * the platform supplies the top layer, the backdrop, the inert page behind it, the focus
+ * trap and focus return. What this component adds is state: one `open` value, one setter
+ * every close path goes through, and the ids that wire up ARIA.
+ */
+declare function DialogRoot({ open: openProp, defaultOpen, onOpenChange, closeOnBackdropClick, children, }: DialogRootProps): react.JSX.Element;
+
+type DialogTriggerOwnProps = {
+    /** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type DialogTriggerProps = DialogTriggerOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof DialogTriggerOwnProps>;
+/**
+ * Opens the dialog. A native `<button>`, so focus and activation are the platform's, and
+ * where focus returns when the dialog closes.
+ *
+ * Optional: a dialog opened from state alone — after a save, say — needs no Trigger.
+ */
+declare function DialogTrigger({ className, children, render, ...rest }: DialogTriggerProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+type DialogPopupOwnProps = {
+    /**
+     * Element to render instead of the default `<dialog>`. Props and ref are merged onto it.
+     *
+     * The `<dialog>` is what supplies `showModal()` — the top layer, backdrop, focus trap
+     * and inert page; what `render` produces instead is the consumer's choice.
+     */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type DialogPopupProps = DialogPopupOwnProps & Omit<ComponentPropsWithRef<'dialog'>, keyof DialogPopupOwnProps | 'open'>;
+/**
+ * The dialog: a native `<dialog>`, opened with `showModal()` whenever the Root is open
+ * and closed with `close()` when it is not. State drives the element, never the reverse.
+ *
+ * Every way the platform closes a dialog is turned into a request through the Root's
+ * setter instead, so a controlled parent can refuse it:
+ *
+ * - **Esc** fires `cancel`, which is prevented, then reported.
+ * - **A backdrop click** is a click on the `<dialog>` itself outside its box. The press
+ *   has to start there too, so a text selection dragged out of the dialog does not close it.
+ * - **`<form method="dialog">`**, or a `cancel` the browser will not let be prevented,
+ *   closes the element first; the `close` event reports it, and the element reopens if
+ *   the state stays open.
+ *
+ * It stays mounted while closed — a closed `<dialog>` is `display: none` — so its content
+ * keeps its state between openings. Without a `Dialog.Title`, give it a name with
+ * `aria-label`.
+ */
+declare function DialogPopup({ className, children, render, ...rest }: DialogPopupProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+type DialogTitleOwnProps = {
+    /** Element to render instead of the default `<h2>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type DialogTitleProps = DialogTitleOwnProps & Omit<ComponentPropsWithRef<'h2'>, keyof DialogTitleOwnProps>;
+/**
+ * The dialog's heading, and its accessible name: the popup's `aria-labelledby` points at
+ * this element's `id` — yours if you pass one, a generated one otherwise.
+ */
+declare function DialogTitle({ id: idProp, className, children, render, ...rest }: DialogTitleProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+type DialogCloseOwnProps = {
+    /** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type DialogCloseProps = DialogCloseOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof DialogCloseOwnProps>;
+/**
+ * Closes the dialog — a Cancel button, or an icon-only × with an `aria-label`. A native
+ * `<button>`; the request goes through the Root, so a controlled parent can refuse it.
+ */
+declare function DialogClose({ className, children, render, ...rest }: DialogCloseProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+declare namespace index_parts {
+  export { DialogClose as Close, DialogPopup as Popup, DialogRoot as Root, DialogTitle as Title, DialogTrigger as Trigger };
+}
+
+/** The state Dialog.Root shares with its parts, and projects as `data-*` attributes. */
+type DialogState = {
+    open: boolean;
+};
+
+export { index_parts as Dialog, type DialogCloseProps, type DialogPopupProps, type DialogRootProps, type DialogState, type DialogTitleProps, type DialogTriggerProps };

package/dist/dialog/index.d.ts

@@ -0,0 +1,117 @@
+import * as react from 'react';
+import { ReactNode, ReactElement, Ref, ComponentPropsWithRef } from 'react';
+
+type DialogRootProps = {
+    /**
+     * Controlled state. Provide `onOpenChange` alongside it.
+     *
+     * Never `undefined` once mounted: the mode is latched at mount, as for Switch.
+     */
+    open?: boolean;
+    /** Initial state when uncontrolled. Read once, at mount. */
+    defaultOpen?: boolean;
+    /**
+     * Called on every request to open or close — Trigger, Close, Esc, a backdrop click or a
+     * `<form method="dialog">`. A controlled dialog moves only if the parent accepts it.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Close when the backdrop is clicked. On by default; turn it off where an accidental
+     * click would lose work. Esc and `Dialog.Close` still close.
+     */
+    closeOnBackdropClick?: boolean;
+    children?: ReactNode;
+};
+/**
+ * Holds a dialog's state and shares it with its parts. Renders no element of its own.
+ *
+ * The dialog itself is a native `<dialog>` opened with `showModal()` (decision 7), so
+ * the platform supplies the top layer, the backdrop, the inert page behind it, the focus
+ * trap and focus return. What this component adds is state: one `open` value, one setter
+ * every close path goes through, and the ids that wire up ARIA.
+ */
+declare function DialogRoot({ open: openProp, defaultOpen, onOpenChange, closeOnBackdropClick, children, }: DialogRootProps): react.JSX.Element;
+
+type DialogTriggerOwnProps = {
+    /** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type DialogTriggerProps = DialogTriggerOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof DialogTriggerOwnProps>;
+/**
+ * Opens the dialog. A native `<button>`, so focus and activation are the platform's, and
+ * where focus returns when the dialog closes.
+ *
+ * Optional: a dialog opened from state alone — after a save, say — needs no Trigger.
+ */
+declare function DialogTrigger({ className, children, render, ...rest }: DialogTriggerProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+type DialogPopupOwnProps = {
+    /**
+     * Element to render instead of the default `<dialog>`. Props and ref are merged onto it.
+     *
+     * The `<dialog>` is what supplies `showModal()` — the top layer, backdrop, focus trap
+     * and inert page; what `render` produces instead is the consumer's choice.
+     */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type DialogPopupProps = DialogPopupOwnProps & Omit<ComponentPropsWithRef<'dialog'>, keyof DialogPopupOwnProps | 'open'>;
+/**
+ * The dialog: a native `<dialog>`, opened with `showModal()` whenever the Root is open
+ * and closed with `close()` when it is not. State drives the element, never the reverse.
+ *
+ * Every way the platform closes a dialog is turned into a request through the Root's
+ * setter instead, so a controlled parent can refuse it:
+ *
+ * - **Esc** fires `cancel`, which is prevented, then reported.
+ * - **A backdrop click** is a click on the `<dialog>` itself outside its box. The press
+ *   has to start there too, so a text selection dragged out of the dialog does not close it.
+ * - **`<form method="dialog">`**, or a `cancel` the browser will not let be prevented,
+ *   closes the element first; the `close` event reports it, and the element reopens if
+ *   the state stays open.
+ *
+ * It stays mounted while closed — a closed `<dialog>` is `display: none` — so its content
+ * keeps its state between openings. Without a `Dialog.Title`, give it a name with
+ * `aria-label`.
+ */
+declare function DialogPopup({ className, children, render, ...rest }: DialogPopupProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+type DialogTitleOwnProps = {
+    /** Element to render instead of the default `<h2>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type DialogTitleProps = DialogTitleOwnProps & Omit<ComponentPropsWithRef<'h2'>, keyof DialogTitleOwnProps>;
+/**
+ * The dialog's heading, and its accessible name: the popup's `aria-labelledby` points at
+ * this element's `id` — yours if you pass one, a generated one otherwise.
+ */
+declare function DialogTitle({ id: idProp, className, children, render, ...rest }: DialogTitleProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+type DialogCloseOwnProps = {
+    /** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type DialogCloseProps = DialogCloseOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof DialogCloseOwnProps>;
+/**
+ * Closes the dialog — a Cancel button, or an icon-only × with an `aria-label`. A native
+ * `<button>`; the request goes through the Root, so a controlled parent can refuse it.
+ */
+declare function DialogClose({ className, children, render, ...rest }: DialogCloseProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+declare namespace index_parts {
+  export { DialogClose as Close, DialogPopup as Popup, DialogRoot as Root, DialogTitle as Title, DialogTrigger as Trigger };
+}
+
+/** The state Dialog.Root shares with its parts, and projects as `data-*` attributes. */
+type DialogState = {
+    open: boolean;
+};
+
+export { index_parts as Dialog, type DialogCloseProps, type DialogPopupProps, type DialogRootProps, type DialogState, type DialogTitleProps, type DialogTriggerProps };