@destyler/dialog 0.0.7-beta.5 → 0.0.7-beta.9

package/dist/index.mjs

@@ -1,337 +0,0 @@
-import { createAnatomy } from '@zag-js/anatomy';
-import { createScope, raf } from '@zag-js/dom-query';
-import { ariaHidden } from '@zag-js/aria-hidden';
-import { createMachine } from '@zag-js/core';
-import { trackDismissableElement } from '@zag-js/dismissable';
-import { trapFocus } from '@zag-js/focus-trap';
-import { preventBodyScroll } from '@zag-js/remove-scroll';
-import { compact, createSplitProps } from '@zag-js/utils';
-import { createProps } from '@zag-js/types';
-
-const anatomy = createAnatomy("dialog").parts(
-  "trigger",
-  "backdrop",
-  "positioner",
-  "content",
-  "title",
-  "description",
-  "closeTrigger"
-);
-const parts = anatomy.build();
-
-const dom = createScope({
-  getPositionerId: (ctx) => ctx.ids?.positioner ?? `dialog:${ctx.id}:positioner`,
-  getBackdropId: (ctx) => ctx.ids?.backdrop ?? `dialog:${ctx.id}:backdrop`,
-  getContentId: (ctx) => ctx.ids?.content ?? `dialog:${ctx.id}:content`,
-  getTriggerId: (ctx) => ctx.ids?.trigger ?? `dialog:${ctx.id}:trigger`,
-  getTitleId: (ctx) => ctx.ids?.title ?? `dialog:${ctx.id}:title`,
-  getDescriptionId: (ctx) => ctx.ids?.description ?? `dialog:${ctx.id}:description`,
-  getCloseTriggerId: (ctx) => ctx.ids?.closeTrigger ?? `dialog:${ctx.id}:close`,
-  getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
-  getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
-  getBackdropEl: (ctx) => dom.getById(ctx, dom.getBackdropId(ctx)),
-  getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
-  getTitleEl: (ctx) => dom.getById(ctx, dom.getTitleId(ctx)),
-  getDescriptionEl: (ctx) => dom.getById(ctx, dom.getDescriptionId(ctx)),
-  getCloseTriggerEl: (ctx) => dom.getById(ctx, dom.getCloseTriggerId(ctx))
-});
-
-function connect(state, send, normalize) {
-  const ariaLabel = state.context["aria-label"];
-  const open = state.matches("open");
-  const rendered = state.context.renderedElements;
-  return {
-    open,
-    setOpen(nextOpen) {
-      if (nextOpen === open)
-        return;
-      send(nextOpen ? "OPEN" : "CLOSE");
-    },
-    getTriggerProps() {
-      return normalize.button({
-        ...parts.trigger.attrs,
-        "dir": state.context.dir,
-        "id": dom.getTriggerId(state.context),
-        "aria-haspopup": "dialog",
-        "type": "button",
-        "aria-expanded": open,
-        "data-state": open ? "open" : "closed",
-        "aria-controls": dom.getContentId(state.context),
-        onClick(event) {
-          if (event.defaultPrevented)
-            return;
-          send("TOGGLE");
-        }
-      });
-    },
-    getBackdropProps() {
-      return normalize.element({
-        ...parts.backdrop.attrs,
-        "dir": state.context.dir,
-        "hidden": !open,
-        "id": dom.getBackdropId(state.context),
-        "data-state": open ? "open" : "closed"
-      });
-    },
-    getPositionerProps() {
-      return normalize.element({
-        ...parts.positioner.attrs,
-        dir: state.context.dir,
-        id: dom.getPositionerId(state.context),
-        style: {
-          pointerEvents: open ? void 0 : "none"
-        }
-      });
-    },
-    getContentProps() {
-      return normalize.element({
-        ...parts.content.attrs,
-        "dir": state.context.dir,
-        "role": state.context.role,
-        "hidden": !open,
-        "id": dom.getContentId(state.context),
-        "tabIndex": -1,
-        "data-state": open ? "open" : "closed",
-        "aria-modal": true,
-        "aria-label": ariaLabel || void 0,
-        "aria-labelledby": ariaLabel || !rendered.title ? void 0 : dom.getTitleId(state.context),
-        "aria-describedby": rendered.description ? dom.getDescriptionId(state.context) : void 0
-      });
-    },
-    getTitleProps() {
-      return normalize.element({
-        ...parts.title.attrs,
-        dir: state.context.dir,
-        id: dom.getTitleId(state.context)
-      });
-    },
-    getDescriptionProps() {
-      return normalize.element({
-        ...parts.description.attrs,
-        dir: state.context.dir,
-        id: dom.getDescriptionId(state.context)
-      });
-    },
-    getCloseTriggerProps() {
-      return normalize.button({
-        ...parts.closeTrigger.attrs,
-        dir: state.context.dir,
-        id: dom.getCloseTriggerId(state.context),
-        type: "button",
-        onClick(event) {
-          if (event.defaultPrevented)
-            return;
-          event.stopPropagation();
-          send("CLOSE");
-        }
-      });
-    }
-  };
-}
-
-function machine(userContext) {
-  const ctx = compact(userContext);
-  return createMachine(
-    {
-      id: "dialog",
-      initial: ctx.open ? "open" : "closed",
-      context: {
-        role: "dialog",
-        renderedElements: {
-          title: true,
-          description: true
-        },
-        modal: true,
-        trapFocus: true,
-        preventScroll: true,
-        closeOnInteractOutside: true,
-        closeOnEscape: true,
-        restoreFocus: true,
-        ...ctx
-      },
-      created: ["setAlertDialogProps"],
-      watch: {
-        open: ["toggleVisibility"]
-      },
-      states: {
-        open: {
-          entry: ["checkRenderedElements", "syncZIndex"],
-          activities: ["trackDismissableElement", "trapFocus", "preventScroll", "hideContentBelow"],
-          on: {
-            "CONTROLLED.CLOSE": {
-              target: "closed"
-            },
-            "CLOSE": [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnClose"]
-              },
-              {
-                target: "closed",
-                actions: ["invokeOnClose"]
-              }
-            ],
-            "TOGGLE": [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnClose"]
-              },
-              {
-                target: "closed",
-                actions: ["invokeOnClose"]
-              }
-            ]
-          }
-        },
-        closed: {
-          on: {
-            "CONTROLLED.OPEN": {
-              target: "open"
-            },
-            "OPEN": [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnOpen"]
-              },
-              {
-                target: "open",
-                actions: ["invokeOnOpen"]
-              }
-            ],
-            "TOGGLE": [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnOpen"]
-              },
-              {
-                target: "open",
-                actions: ["invokeOnOpen"]
-              }
-            ]
-          }
-        }
-      }
-    },
-    {
-      guards: {
-        isOpenControlled: (ctx2) => !!ctx2["open.controlled"]
-      },
-      activities: {
-        trackDismissableElement(ctx2, _evt, { send }) {
-          const getContentEl = () => dom.getContentEl(ctx2);
-          return trackDismissableElement(getContentEl, {
-            defer: true,
-            pointerBlocking: ctx2.modal,
-            exclude: [dom.getTriggerEl(ctx2)],
-            onInteractOutside(event) {
-              ctx2.onInteractOutside?.(event);
-              if (!ctx2.closeOnInteractOutside) {
-                event.preventDefault();
-              }
-            },
-            persistentElements: ctx2.persistentElements,
-            onFocusOutside: ctx2.onFocusOutside,
-            onPointerDownOutside: ctx2.onPointerDownOutside,
-            onEscapeKeyDown(event) {
-              ctx2.onEscapeKeyDown?.(event);
-              if (!ctx2.closeOnEscape) {
-                event.preventDefault();
-              }
-            },
-            onDismiss() {
-              send({ type: "CLOSE", src: "interact-outside" });
-            }
-          });
-        },
-        preventScroll(ctx2) {
-          if (!ctx2.preventScroll)
-            return;
-          return preventBodyScroll(dom.getDoc(ctx2));
-        },
-        trapFocus(ctx2) {
-          if (!ctx2.trapFocus || !ctx2.modal)
-            return;
-          const contentEl = () => dom.getContentEl(ctx2);
-          return trapFocus(contentEl, {
-            preventScroll: true,
-            returnFocusOnDeactivate: !!ctx2.restoreFocus,
-            initialFocus: ctx2.initialFocusEl,
-            setReturnFocus: (el) => ctx2.finalFocusEl?.() ?? el
-          });
-        },
-        hideContentBelow(ctx2) {
-          if (!ctx2.modal)
-            return;
-          const getElements = () => [dom.getContentEl(ctx2)];
-          return ariaHidden(getElements, { defer: true });
-        }
-      },
-      actions: {
-        setAlertDialogProps(ctx2) {
-          if (ctx2.role !== "alertdialog")
-            return;
-          ctx2.initialFocusEl ||= () => dom.getCloseTriggerEl(ctx2);
-          ctx2.closeOnInteractOutside = false;
-        },
-        checkRenderedElements(ctx2) {
-          raf(() => {
-            ctx2.renderedElements.title = !!dom.getTitleEl(ctx2);
-            ctx2.renderedElements.description = !!dom.getDescriptionEl(ctx2);
-          });
-        },
-        syncZIndex(ctx2) {
-          raf(() => {
-            const contentEl = dom.getContentEl(ctx2);
-            if (!contentEl)
-              return;
-            const win = dom.getWin(ctx2);
-            const styles = win.getComputedStyle(contentEl);
-            const elems = [dom.getPositionerEl(ctx2), dom.getBackdropEl(ctx2)];
-            elems.forEach((node) => {
-              node?.style.setProperty("--z-index", styles.zIndex);
-            });
-          });
-        },
-        invokeOnClose(ctx2) {
-          ctx2.onOpenChange?.({ open: false });
-        },
-        invokeOnOpen(ctx2) {
-          ctx2.onOpenChange?.({ open: true });
-        },
-        toggleVisibility(ctx2, evt, { send }) {
-          send({ type: ctx2.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: evt });
-        }
-      }
-    }
-  );
-}
-
-const props = createProps()([
-  "aria-label",
-  "closeOnEscape",
-  "closeOnInteractOutside",
-  "dir",
-  "finalFocusEl",
-  "getRootNode",
-  "getRootNode",
-  "id",
-  "id",
-  "ids",
-  "initialFocusEl",
-  "modal",
-  "onEscapeKeyDown",
-  "onFocusOutside",
-  "onInteractOutside",
-  "onOpenChange",
-  "onPointerDownOutside",
-  "open.controlled",
-  "open",
-  "persistentElements",
-  "preventScroll",
-  "restoreFocus",
-  "role",
-  "trapFocus"
-]);
-const splitProps = createSplitProps(props);
-
-export { anatomy, connect, machine, props, splitProps };