@zag-js/toast 2.0.0-next.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

@@ -39,6 +39,11 @@ var dom = __toESM(require("./toast.dom.js"));
 var import_toast2 = require("./toast.utils.js");
 function groupConnect(service, normalize) {
   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,12 +51,13 @@ 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(scope.id),
         dir: prop("dir"),

package/dist/toast-group.connect.mjs

@@ -5,6 +5,11 @@ import * as dom from "./toast.dom.mjs";
 import { getGroupPlacementStyle } from "./toast.utils.mjs";
 function groupConnect(service, normalize) {
   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,12 +17,13 @@ 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(scope.id),
         dir: prop("dir"),

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,21 +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(scope.id),
         dir: prop("dir"),
-        "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,

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,21 +37,23 @@ function connect(service, normalize) {
     dismiss() {
       send({ type: "DISMISS", src: "programmatic" });
     },
+    getRootState,
     getRootProps() {
+      const rootState = getRootState();
       return normalize.element({
         ...parts.root.attrs(scope.id),
         dir: prop("dir"),
-        "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,

package/dist/toast.machine.js

@@ -205,10 +205,7 @@ var machine = (0, import_core.createMachine)({
           const rootEl = dom.getRootEl(scope);
           if (!rootEl) return;
           const syncHeight = () => {
-            const originalHeight = rootEl.style.height;
-            rootEl.style.height = "auto";
-            const height = rootEl.getBoundingClientRect().height;
-            rootEl.style.height = originalHeight;
+            const height = measureLayoutHeight(rootEl);
             const item = { id: prop("id"), height };
             setHeight(prop("parent"), item);
           };
@@ -238,10 +235,7 @@ var machine = (0, import_core.createMachine)({
         queueMicrotask(() => {
           const rootEl = dom.getRootEl(scope);
           if (!rootEl) return;
-          const originalHeight = rootEl.style.height;
-          rootEl.style.height = "auto";
-          const height = rootEl.getBoundingClientRect().height;
-          rootEl.style.height = originalHeight;
+          const height = measureLayoutHeight(rootEl);
           context.set("initialHeight", height);
           const item = { id: prop("id"), height };
           setHeight(prop("parent"), item);
@@ -278,6 +272,13 @@ var machine = (0, import_core.createMachine)({
     }
   }
 });
+function measureLayoutHeight(el) {
+  const prevHeight = el.style.height;
+  el.style.height = "auto";
+  const height = el.offsetHeight;
+  el.style.height = prevHeight;
+  return height;
+}
 function setHeight(parent, item) {
   const { id, height } = item;
   parent.context.set("heights", (prev) => {

package/dist/toast.machine.mjs

@@ -171,10 +171,7 @@ var machine = createMachine({
           const rootEl = dom.getRootEl(scope);
           if (!rootEl) return;
           const syncHeight = () => {
-            const originalHeight = rootEl.style.height;
-            rootEl.style.height = "auto";
-            const height = rootEl.getBoundingClientRect().height;
-            rootEl.style.height = originalHeight;
+            const height = measureLayoutHeight(rootEl);
             const item = { id: prop("id"), height };
             setHeight(prop("parent"), item);
           };
@@ -204,10 +201,7 @@ var machine = createMachine({
         queueMicrotask(() => {
           const rootEl = dom.getRootEl(scope);
           if (!rootEl) return;
-          const originalHeight = rootEl.style.height;
-          rootEl.style.height = "auto";
-          const height = rootEl.getBoundingClientRect().height;
-          rootEl.style.height = originalHeight;
+          const height = measureLayoutHeight(rootEl);
           context.set("initialHeight", height);
           const item = { id: prop("id"), height };
           setHeight(prop("parent"), item);
@@ -244,6 +238,13 @@ var machine = createMachine({
     }
   }
 });
+function measureLayoutHeight(el) {
+  const prevHeight = el.style.height;
+  el.style.height = "auto";
+  const height = el.offsetHeight;
+  el.style.height = prevHeight;
+  return height;
+}
 function setHeight(parent, item) {
   const { id, height } = item;
   parent.context.set("heights", (prev) => {

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": "2.0.0-next.0",
+  "version": "2.0.0-next.1",
   "description": "Core logic for the toast widget implemented as a state machine",
   "keywords": [
     "js",
@@ -14,7 +14,10 @@
   "author": "Segun Adebayo <sage@adebayosegun.com>",
   "homepage": "https://github.com/chakra-ui/zag#readme",
   "license": "MIT",
-  "repository": "https://github.com/chakra-ui/zag/tree/main/packages/toast",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chakra-ui/zag/tree/main/packages/toast"
+  },
   "sideEffects": false,
   "files": [
     "dist"
@@ -26,12 +29,12 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "2.0.0-next.0",
-    "@zag-js/core": "2.0.0-next.0",
-    "@zag-js/dom-query": "2.0.0-next.0",
-    "@zag-js/dismissable": "2.0.0-next.0",
-    "@zag-js/utils": "2.0.0-next.0",
-    "@zag-js/types": "2.0.0-next.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"