@zag-js/toast 1.43.0 → 2.0.0-next.1

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as _zag_js_core from '@zag-js/core';
 import { ToastGroupSchema } from './toast.types.mjs';
-export { ActionOptions, ToastApi as Api, ToastGroupApi as GroupApi, ToastGroupMachine as GroupMachine, ToastGroupProps as GroupProps, ToastGroupService as GroupService, IntlTranslations, ToastMachine as Machine, Options, Placement, PromiseOptions, ToastProps as Props, ToastService as Service, Status, StatusChangeDetails, ToastStore as Store, ToastStoreProps as StoreProps, ToastHeight, ToastQueuePriority, Type } from './toast.types.mjs';
+export { ActionOptions, ToastApi as Api, ToastGroupApi as GroupApi, ToastGroupMachine as GroupMachine, ToastGroupProps as GroupProps, ToastGroupService as GroupService, GroupState, IntlTranslations, ToastMachine as Machine, Options, Placement, PromiseOptions, ToastProps as Props, RootState, ToastService as Service, Status, StatusChangeDetails, ToastStore as Store, ToastStoreProps as StoreProps, ToastHeight, ToastQueuePriority, Type } from './toast.types.mjs';
 import { groupConnect } from './toast-group.connect.mjs';
 export { anatomy } from './toast.anatomy.mjs';
 export { connect } from './toast.connect.mjs';

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as _zag_js_core from '@zag-js/core';
 import { ToastGroupSchema } from './toast.types.js';
-export { ActionOptions, ToastApi as Api, ToastGroupApi as GroupApi, ToastGroupMachine as GroupMachine, ToastGroupProps as GroupProps, ToastGroupService as GroupService, IntlTranslations, ToastMachine as Machine, Options, Placement, PromiseOptions, ToastProps as Props, ToastService as Service, Status, StatusChangeDetails, ToastStore as Store, ToastStoreProps as StoreProps, ToastHeight, ToastQueuePriority, Type } from './toast.types.js';
+export { ActionOptions, ToastApi as Api, ToastGroupApi as GroupApi, ToastGroupMachine as GroupMachine, ToastGroupProps as GroupProps, ToastGroupService as GroupService, GroupState, IntlTranslations, ToastMachine as Machine, Options, Placement, PromiseOptions, ToastProps as Props, RootState, ToastService as Service, Status, StatusChangeDetails, ToastStore as Store, ToastStoreProps as StoreProps, ToastHeight, ToastQueuePriority, Type } from './toast.types.js';
 import { groupConnect } from './toast-group.connect.js';
 export { anatomy } from './toast.anatomy.js';
 export { connect } from './toast.connect.js';

package/dist/toast-group.connect.js

@@ -38,7 +38,12 @@ var import_toast = require("./toast.anatomy.js");
 var dom = __toESM(require("./toast.dom.js"));
 var import_toast2 = require("./toast.utils.js");
 function groupConnect(service, normalize) {
-  const { context, prop, send, refs, computed } = service;
+  const { context, prop, send, refs, computed, scope } = service;
+  function getGroupState() {
+    const placement = computed("placement");
+    const [side, align = "center"] = placement.split("-");
+    return { placement, side, align };
+  }
   return {
     getCount() {
       return context.get("toasts").length;
@@ -46,14 +51,15 @@ function groupConnect(service, normalize) {
     getToasts() {
       return context.get("toasts");
     },
+    getGroupState,
     getGroupProps(options = {}) {
       const { label = "Notifications" } = options;
       const { hotkey } = prop("store").attrs;
       const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
-      const placement = computed("placement");
-      const [side, align = "center"] = placement.split("-");
+      const groupState = getGroupState();
+      const { placement, side, align } = groupState;
       return normalize.element({
-        ...import_toast.parts.group.attrs,
+        ...import_toast.parts.group.attrs(scope.id),
         dir: prop("dir"),
         tabIndex: -1,
         role: "region",

package/dist/toast-group.connect.mjs

@@ -4,7 +4,12 @@ import { parts } from "./toast.anatomy.mjs";
 import * as dom from "./toast.dom.mjs";
 import { getGroupPlacementStyle } from "./toast.utils.mjs";
 function groupConnect(service, normalize) {
-  const { context, prop, send, refs, computed } = service;
+  const { context, prop, send, refs, computed, scope } = service;
+  function getGroupState() {
+    const placement = computed("placement");
+    const [side, align = "center"] = placement.split("-");
+    return { placement, side, align };
+  }
   return {
     getCount() {
       return context.get("toasts").length;
@@ -12,14 +17,15 @@ function groupConnect(service, normalize) {
     getToasts() {
       return context.get("toasts");
     },
+    getGroupState,
     getGroupProps(options = {}) {
       const { label = "Notifications" } = options;
       const { hotkey } = prop("store").attrs;
       const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
-      const placement = computed("placement");
-      const [side, align = "center"] = placement.split("-");
+      const groupState = getGroupState();
+      const { placement, side, align } = groupState;
       return normalize.element({
-        ...parts.group.attrs,
+        ...parts.group.attrs(scope.id),
         dir: prop("dir"),
         tabIndex: -1,
         role: "region",

package/dist/toast.connect.js

@@ -51,6 +51,9 @@ function connect(service, normalize) {
   const description = prop("description");
   const action = prop("action");
   const [side, align = "center"] = placement.split("-");
+  function getRootState() {
+    return { visible, paused, mounted, frontmost, stacked: !!stacked, type, placement, side, align };
+  }
   return {
     type,
     title,
@@ -68,22 +71,23 @@ function connect(service, normalize) {
     dismiss() {
       send({ type: "DISMISS", src: "programmatic" });
     },
+    getRootState,
     getRootProps() {
+      const rootState = getRootState();
       return normalize.element({
-        ...import_toast.parts.root.attrs,
+        ...import_toast.parts.root.attrs(scope.id),
         dir: prop("dir"),
-        id: dom.getRootId(scope),
-        "data-state": visible ? "open" : "closed",
-        "data-type": type,
-        "data-placement": placement,
-        "data-align": align,
-        "data-side": side,
-        "data-mounted": (0, import_dom_query.dataAttr)(mounted),
-        "data-paused": (0, import_dom_query.dataAttr)(paused),
-        "data-first": (0, import_dom_query.dataAttr)(frontmost),
-        "data-sibling": (0, import_dom_query.dataAttr)(!frontmost),
-        "data-stack": (0, import_dom_query.dataAttr)(stacked),
-        "data-overlap": (0, import_dom_query.dataAttr)(!stacked),
+        "data-state": rootState.visible ? "open" : "closed",
+        "data-type": rootState.type,
+        "data-placement": rootState.placement,
+        "data-align": rootState.align,
+        "data-side": rootState.side,
+        "data-mounted": (0, import_dom_query.dataAttr)(rootState.mounted),
+        "data-paused": (0, import_dom_query.dataAttr)(rootState.paused),
+        "data-first": (0, import_dom_query.dataAttr)(rootState.frontmost),
+        "data-sibling": (0, import_dom_query.dataAttr)(!rootState.frontmost),
+        "data-stack": (0, import_dom_query.dataAttr)(rootState.stacked),
+        "data-overlap": (0, import_dom_query.dataAttr)(!rootState.stacked),
         role: "status",
         "aria-atomic": "true",
         "aria-describedby": description ? dom.getDescriptionId(scope) : void 0,
@@ -115,19 +119,19 @@ function connect(service, normalize) {
     },
     getTitleProps() {
       return normalize.element({
-        ...import_toast.parts.title.attrs,
+        ...import_toast.parts.title.attrs(scope.id),
         id: dom.getTitleId(scope)
       });
     },
     getDescriptionProps() {
       return normalize.element({
-        ...import_toast.parts.description.attrs,
+        ...import_toast.parts.description.attrs(scope.id),
         id: dom.getDescriptionId(scope)
       });
     },
     getActionTriggerProps() {
       return normalize.button({
-        ...import_toast.parts.actionTrigger.attrs,
+        ...import_toast.parts.actionTrigger.attrs(scope.id),
         type: "button",
         onClick(event) {
           if (event.defaultPrevented) return;
@@ -138,8 +142,7 @@ function connect(service, normalize) {
     },
     getCloseTriggerProps() {
       return normalize.button({
-        id: dom.getCloseTriggerId(scope),
-        ...import_toast.parts.closeTrigger.attrs,
+        ...import_toast.parts.closeTrigger.attrs(scope.id),
         type: "button",
         "aria-label": translations?.closeTriggerLabel,
         onClick(event) {

package/dist/toast.connect.mjs

@@ -17,6 +17,9 @@ function connect(service, normalize) {
   const description = prop("description");
   const action = prop("action");
   const [side, align = "center"] = placement.split("-");
+  function getRootState() {
+    return { visible, paused, mounted, frontmost, stacked: !!stacked, type, placement, side, align };
+  }
   return {
     type,
     title,
@@ -34,22 +37,23 @@ function connect(service, normalize) {
     dismiss() {
       send({ type: "DISMISS", src: "programmatic" });
     },
+    getRootState,
     getRootProps() {
+      const rootState = getRootState();
       return normalize.element({
-        ...parts.root.attrs,
+        ...parts.root.attrs(scope.id),
         dir: prop("dir"),
-        id: dom.getRootId(scope),
-        "data-state": visible ? "open" : "closed",
-        "data-type": type,
-        "data-placement": placement,
-        "data-align": align,
-        "data-side": side,
-        "data-mounted": dataAttr(mounted),
-        "data-paused": dataAttr(paused),
-        "data-first": dataAttr(frontmost),
-        "data-sibling": dataAttr(!frontmost),
-        "data-stack": dataAttr(stacked),
-        "data-overlap": dataAttr(!stacked),
+        "data-state": rootState.visible ? "open" : "closed",
+        "data-type": rootState.type,
+        "data-placement": rootState.placement,
+        "data-align": rootState.align,
+        "data-side": rootState.side,
+        "data-mounted": dataAttr(rootState.mounted),
+        "data-paused": dataAttr(rootState.paused),
+        "data-first": dataAttr(rootState.frontmost),
+        "data-sibling": dataAttr(!rootState.frontmost),
+        "data-stack": dataAttr(rootState.stacked),
+        "data-overlap": dataAttr(!rootState.stacked),
         role: "status",
         "aria-atomic": "true",
         "aria-describedby": description ? dom.getDescriptionId(scope) : void 0,
@@ -81,19 +85,19 @@ function connect(service, normalize) {
     },
     getTitleProps() {
       return normalize.element({
-        ...parts.title.attrs,
+        ...parts.title.attrs(scope.id),
         id: dom.getTitleId(scope)
       });
     },
     getDescriptionProps() {
       return normalize.element({
-        ...parts.description.attrs,
+        ...parts.description.attrs(scope.id),
         id: dom.getDescriptionId(scope)
       });
     },
     getActionTriggerProps() {
       return normalize.button({
-        ...parts.actionTrigger.attrs,
+        ...parts.actionTrigger.attrs(scope.id),
         type: "button",
         onClick(event) {
           if (event.defaultPrevented) return;
@@ -104,8 +108,7 @@ function connect(service, normalize) {
     },
     getCloseTriggerProps() {
       return normalize.button({
-        id: dom.getCloseTriggerId(scope),
-        ...parts.closeTrigger.attrs,
+        ...parts.closeTrigger.attrs(scope.id),
         type: "button",
         "aria-label": translations?.closeTriggerLabel,
         onClick(event) {

package/dist/toast.dom.d.mts

@@ -4,11 +4,11 @@ import '@zag-js/types';
 import '@zag-js/dom-query';
 
 declare const getRegionId: (placement: Placement) => string;
-declare const getRegionEl: (ctx: Scope, placement: Placement) => HTMLElement | null;
 declare const getRootId: (ctx: Scope) => string;
-declare const getRootEl: (ctx: Scope) => HTMLElement | null;
 declare const getTitleId: (ctx: Scope) => string;
 declare const getDescriptionId: (ctx: Scope) => string;
 declare const getCloseTriggerId: (ctx: Scope) => string;
+declare const getRegionEl: (ctx: Scope, placement: Placement) => HTMLElement | null;
+declare const getRootEl: (ctx: Scope) => HTMLElement | null;
 
 export { getCloseTriggerId, getDescriptionId, getRegionEl, getRegionId, getRootEl, getRootId, getTitleId };

package/dist/toast.dom.d.ts

@@ -4,11 +4,11 @@ import '@zag-js/types';
 import '@zag-js/dom-query';
 
 declare const getRegionId: (placement: Placement) => string;
-declare const getRegionEl: (ctx: Scope, placement: Placement) => HTMLElement | null;
 declare const getRootId: (ctx: Scope) => string;
-declare const getRootEl: (ctx: Scope) => HTMLElement | null;
 declare const getTitleId: (ctx: Scope) => string;
 declare const getDescriptionId: (ctx: Scope) => string;
 declare const getCloseTriggerId: (ctx: Scope) => string;
+declare const getRegionEl: (ctx: Scope, placement: Placement) => HTMLElement | null;
+declare const getRootEl: (ctx: Scope) => HTMLElement | null;
 
 export { getCloseTriggerId, getDescriptionId, getRegionEl, getRegionId, getRootEl, getRootId, getTitleId };

package/dist/toast.dom.js

@@ -29,13 +29,14 @@ __export(toast_dom_exports, {
   getTitleId: () => getTitleId
 });
 module.exports = __toCommonJS(toast_dom_exports);
-var getRegionId = (placement) => `toast-group:${placement}`;
-var getRegionEl = (ctx, placement) => ctx.getById(`toast-group:${placement}`);
-var getRootId = (ctx) => `toast:${ctx.id}`;
-var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
-var getTitleId = (ctx) => `toast:${ctx.id}:title`;
-var getDescriptionId = (ctx) => `toast:${ctx.id}:description`;
-var getCloseTriggerId = (ctx) => `toast${ctx.id}:close`;
+var import_toast = require("./toast.anatomy.js");
+var getRegionId = (placement) => `toast-group-${placement}`;
+var getRootId = (ctx) => `${ctx.id}`;
+var getTitleId = (ctx) => `${ctx.id}:title`;
+var getDescriptionId = (ctx) => `${ctx.id}:description`;
+var getCloseTriggerId = (ctx) => `${ctx.id}:close`;
+var getRegionEl = (ctx, placement) => ctx.getById(`toast-group-${placement}`);
+var getRootEl = (ctx) => ctx.query(ctx.selector(import_toast.parts.root));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   getCloseTriggerId,

package/dist/toast.dom.mjs

@@ -1,11 +1,12 @@
 // src/toast.dom.ts
-var getRegionId = (placement) => `toast-group:${placement}`;
-var getRegionEl = (ctx, placement) => ctx.getById(`toast-group:${placement}`);
-var getRootId = (ctx) => `toast:${ctx.id}`;
-var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
-var getTitleId = (ctx) => `toast:${ctx.id}:title`;
-var getDescriptionId = (ctx) => `toast:${ctx.id}:description`;
-var getCloseTriggerId = (ctx) => `toast${ctx.id}:close`;
+import { parts } from "./toast.anatomy.mjs";
+var getRegionId = (placement) => `toast-group-${placement}`;
+var getRootId = (ctx) => `${ctx.id}`;
+var getTitleId = (ctx) => `${ctx.id}:title`;
+var getDescriptionId = (ctx) => `${ctx.id}:description`;
+var getCloseTriggerId = (ctx) => `${ctx.id}:close`;
+var getRegionEl = (ctx, placement) => ctx.getById(`toast-group-${placement}`);
+var getRootEl = (ctx) => ctx.query(ctx.selector(parts.root));
 export {
   getCloseTriggerId,
   getDescriptionId,

package/dist/toast.types.d.mts

@@ -26,6 +26,44 @@ interface ToastHeight {
      */
     height: number;
 }
+interface RootState {
+    /**
+     * Whether the toast is visible
+     */
+    visible: boolean;
+    /**
+     * Whether the toast is paused
+     */
+    paused: boolean;
+    /**
+     * Whether the toast has mounted into the DOM
+     */
+    mounted: boolean;
+    /**
+     * Whether the toast is the frontmost (topmost) toast in the group
+     */
+    frontmost: boolean;
+    /**
+     * Whether the toasts in the group are stacked instead of overlapping
+     */
+    stacked: boolean;
+    /**
+     * The type of the toast
+     */
+    type: Type;
+    /**
+     * The placement of the toast
+     */
+    placement: Placement;
+    /**
+     * The side of the toast placement
+     */
+    side: string;
+    /**
+     * The horizontal alignment of the toast placement
+     */
+    align: string;
+}
 interface ActionOptions {
     /**
      * The label of the action
@@ -317,6 +355,20 @@ interface GroupProps {
      */
     label?: string | undefined;
 }
+interface GroupState {
+    /**
+     * The placement of the toast group
+     */
+    placement: Placement;
+    /**
+     * The side of the toast group placement
+     */
+    side: string;
+    /**
+     * The horizontal alignment of the toast group placement
+     */
+    align: string;
+}
 interface ToastGroupApi<T extends PropTypes = PropTypes, O = any> {
     /**
      * The total number of toasts
@@ -330,6 +382,10 @@ interface ToastGroupApi<T extends PropTypes = PropTypes, O = any> {
      * Subscribe to the toast group
      */
     subscribe: (callback: (toasts: Options<O>[]) => void) => VoidFunction;
+    /**
+     * Returns the state of the group
+     */
+    getGroupState: () => GroupState;
     getGroupProps: (options?: GroupProps) => T["element"];
 }
 interface ToastApi<T extends PropTypes = PropTypes, O = any> {
@@ -373,6 +429,10 @@ interface ToastApi<T extends PropTypes = PropTypes, O = any> {
      * Function to instantly dismiss the toast.
      */
     dismiss: VoidFunction;
+    /**
+     * Returns the state of the root
+     */
+    getRootState: () => RootState;
     getRootProps: () => T["element"];
     getTitleProps: () => T["element"];
     getGhostBeforeProps: () => T["element"];
@@ -382,4 +442,4 @@ interface ToastApi<T extends PropTypes = PropTypes, O = any> {
     getActionTriggerProps: () => T["button"];
 }
 
-export type { ActionOptions, GroupProps, IntlTranslations, Options, Placement, PromiseOptions, Status, StatusChangeDetails, ToastApi, ToastGroupApi, ToastGroupMachine, ToastGroupProps, ToastGroupSchema, ToastGroupService, ToastHeight, ToastMachine, ToastProps, ToastQueuePriority, ToastSchema, ToastService, ToastStore, ToastStoreProps, Type };
+export type { ActionOptions, GroupProps, GroupState, IntlTranslations, Options, Placement, PromiseOptions, RootState, Status, StatusChangeDetails, ToastApi, ToastGroupApi, ToastGroupMachine, ToastGroupProps, ToastGroupSchema, ToastGroupService, ToastHeight, ToastMachine, ToastProps, ToastQueuePriority, ToastSchema, ToastService, ToastStore, ToastStoreProps, Type };

package/dist/toast.types.d.ts

@@ -26,6 +26,44 @@ interface ToastHeight {
      */
     height: number;
 }
+interface RootState {
+    /**
+     * Whether the toast is visible
+     */
+    visible: boolean;
+    /**
+     * Whether the toast is paused
+     */
+    paused: boolean;
+    /**
+     * Whether the toast has mounted into the DOM
+     */
+    mounted: boolean;
+    /**
+     * Whether the toast is the frontmost (topmost) toast in the group
+     */
+    frontmost: boolean;
+    /**
+     * Whether the toasts in the group are stacked instead of overlapping
+     */
+    stacked: boolean;
+    /**
+     * The type of the toast
+     */
+    type: Type;
+    /**
+     * The placement of the toast
+     */
+    placement: Placement;
+    /**
+     * The side of the toast placement
+     */
+    side: string;
+    /**
+     * The horizontal alignment of the toast placement
+     */
+    align: string;
+}
 interface ActionOptions {
     /**
      * The label of the action
@@ -317,6 +355,20 @@ interface GroupProps {
      */
     label?: string | undefined;
 }
+interface GroupState {
+    /**
+     * The placement of the toast group
+     */
+    placement: Placement;
+    /**
+     * The side of the toast group placement
+     */
+    side: string;
+    /**
+     * The horizontal alignment of the toast group placement
+     */
+    align: string;
+}
 interface ToastGroupApi<T extends PropTypes = PropTypes, O = any> {
     /**
      * The total number of toasts
@@ -330,6 +382,10 @@ interface ToastGroupApi<T extends PropTypes = PropTypes, O = any> {
      * Subscribe to the toast group
      */
     subscribe: (callback: (toasts: Options<O>[]) => void) => VoidFunction;
+    /**
+     * Returns the state of the group
+     */
+    getGroupState: () => GroupState;
     getGroupProps: (options?: GroupProps) => T["element"];
 }
 interface ToastApi<T extends PropTypes = PropTypes, O = any> {
@@ -373,6 +429,10 @@ interface ToastApi<T extends PropTypes = PropTypes, O = any> {
      * Function to instantly dismiss the toast.
      */
     dismiss: VoidFunction;
+    /**
+     * Returns the state of the root
+     */
+    getRootState: () => RootState;
     getRootProps: () => T["element"];
     getTitleProps: () => T["element"];
     getGhostBeforeProps: () => T["element"];
@@ -382,4 +442,4 @@ interface ToastApi<T extends PropTypes = PropTypes, O = any> {
     getActionTriggerProps: () => T["button"];
 }
 
-export type { ActionOptions, GroupProps, IntlTranslations, Options, Placement, PromiseOptions, Status, StatusChangeDetails, ToastApi, ToastGroupApi, ToastGroupMachine, ToastGroupProps, ToastGroupSchema, ToastGroupService, ToastHeight, ToastMachine, ToastProps, ToastQueuePriority, ToastSchema, ToastService, ToastStore, ToastStoreProps, Type };
+export type { ActionOptions, GroupProps, GroupState, IntlTranslations, Options, Placement, PromiseOptions, RootState, Status, StatusChangeDetails, ToastApi, ToastGroupApi, ToastGroupMachine, ToastGroupProps, ToastGroupSchema, ToastGroupService, ToastHeight, ToastMachine, ToastProps, ToastQueuePriority, ToastSchema, ToastService, ToastStore, ToastStoreProps, Type };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/toast",
-  "version": "1.43.0",
+  "version": "2.0.0-next.1",
   "description": "Core logic for the toast widget implemented as a state machine",
   "keywords": [
     "js",
@@ -29,12 +29,12 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.43.0",
-    "@zag-js/core": "1.43.0",
-    "@zag-js/dom-query": "1.43.0",
-    "@zag-js/dismissable": "1.43.0",
-    "@zag-js/utils": "1.43.0",
-    "@zag-js/types": "1.43.0"
+    "@zag-js/anatomy": "2.0.0-next.1",
+    "@zag-js/core": "2.0.0-next.1",
+    "@zag-js/dom-query": "2.0.0-next.1",
+    "@zag-js/dismissable": "2.0.0-next.1",
+    "@zag-js/types": "2.0.0-next.1",
+    "@zag-js/utils": "2.0.0-next.1"
   },
   "devDependencies": {
     "clean-package": "2.2.0"