@ark-ui/react 2.2.1 → 2.2.3

package/CHANGELOG.md

@@ -6,6 +6,19 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [2.2.3] - 2024-03-05
+
+### Fixed
+
+- Resolved an issue with using `Locale` in Next.js projects.
+- Resolved an issue with `Toast` not updating its toasts and count properties when creating one or more toasts.
+
+## [2.2.2] - 2024-02-27
+
+### Fixed
+
+- Resolved an issue that a disabled `Accordion.Item` could still be opened.̊
+
 ## [2.2.1] - 2024-02-27
 
 ### Changed

package/accordion/accordion-item.cjs

@@ -8,19 +8,16 @@ const accordion = require('@zag-js/accordion');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const collapsibleRoot = require('../collapsible/collapsible-root.cjs');
-const splitCollapsibleProps = require('../collapsible/split-collapsible-props.cjs');
 const renderStrategy = require('../render-strategy.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const accordionContext = require('./accordion-context.cjs');
 const accordionItemContext = require('./accordion-item-context.cjs');
 
 const AccordionItem = react.forwardRef((props, ref) => {
-  const [collapsibleProps, accordionItemProps] = splitCollapsibleProps.splitCollapsibleProps(props);
-  const [itemProps, { children, ...localProps }] = accordion.splitItemProps(accordionItemProps);
+  const [itemProps, { children, ...localProps }] = accordion.splitItemProps(props);
   const api = accordionContext.useAccordionContext();
   const renderStrategyProps = renderStrategy.useRenderStrategyContext();
   const mergedItemProps = react$1.mergeProps(api.getItemProps(itemProps), localProps);
-  const mergedCollapsibleProps = react$1.mergeProps(renderStrategyProps, collapsibleProps);
   const itemState = api.getItemState(itemProps);
   const view = runIfFn.runIfFn(children, itemState);
   const itemContentProps = api.getItemContentProps(itemProps);
@@ -30,8 +27,8 @@ const AccordionItem = react.forwardRef((props, ref) => {
       ref,
       open: itemState.isOpen,
       ids: { content: itemContentProps.id },
+      ...renderStrategyProps,
       ...mergedItemProps,
-      ...mergedCollapsibleProps,
       children: view
     }
   ) });

package/accordion/accordion-item.mjs

@@ -4,19 +4,16 @@ import { splitItemProps } from '@zag-js/accordion';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { CollapsibleRoot } from '../collapsible/collapsible-root.mjs';
-import { splitCollapsibleProps } from '../collapsible/split-collapsible-props.mjs';
 import { useRenderStrategyContext } from '../render-strategy.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { useAccordionContext } from './accordion-context.mjs';
 import { AccordionItemProvider } from './accordion-item-context.mjs';
 
 const AccordionItem = forwardRef((props, ref) => {
-  const [collapsibleProps, accordionItemProps] = splitCollapsibleProps(props);
-  const [itemProps, { children, ...localProps }] = splitItemProps(accordionItemProps);
+  const [itemProps, { children, ...localProps }] = splitItemProps(props);
   const api = useAccordionContext();
   const renderStrategyProps = useRenderStrategyContext();
   const mergedItemProps = mergeProps(api.getItemProps(itemProps), localProps);
-  const mergedCollapsibleProps = mergeProps(renderStrategyProps, collapsibleProps);
   const itemState = api.getItemState(itemProps);
   const view = runIfFn(children, itemState);
   const itemContentProps = api.getItemContentProps(itemProps);
@@ -26,8 +23,8 @@ const AccordionItem = forwardRef((props, ref) => {
       ref,
       open: itemState.isOpen,
       ids: { content: itemContentProps.id },
+      ...renderStrategyProps,
       ...mergedItemProps,
-      ...mergedCollapsibleProps,
       children: view
     }
   ) });

package/locale/locale.cjs

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

package/locale/locale.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { trackLocale, isRTL } from '@zag-js/i18n-utils';
 import { useState, useEffect } from 'react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -117,11 +117,11 @@
     "@testing-library/react": "14.2.1",
     "@testing-library/user-event": "14.5.2",
     "@types/jsdom": "21.1.6",
-    "@types/react": "18.2.58",
+    "@types/react": "18.2.61",
     "@types/react-dom": "18.2.19",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "7.0.2",
-    "@typescript-eslint/parser": "7.0.2",
+    "@typescript-eslint/eslint-plugin": "7.1.0",
+    "@typescript-eslint/parser": "7.1.0",
     "@vitejs/plugin-react": "4.2.1",
     "@vitest/coverage-v8": "1.3.1",
     "eslint": "8.57.0",
@@ -134,7 +134,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-frame-component": "5.2.6",
-    "react-hook-form": "7.50.1",
+    "react-hook-form": "7.51.0",
     "release-it": "17.1.1",
     "resize-observer-polyfill": "1.5.1",
     "storybook": "7.6.17",

package/toast/create-toaster.cjs

@@ -34,6 +34,9 @@ const createToaster = (props) => {
   const { placement, ...rest } = props;
   const service = toast__namespace.group.machine({ id: "1", placement, ...rest }).start();
   let api = toast__namespace.group.connect(service.getState(), service.send, react.normalizeProps);
+  const subscribe = (fn) => {
+    return service.subscribe((state) => fn(state.context.toasts));
+  };
   const Toaster = react$1.forwardRef((props2, ref) => {
     const getRootNode = environmentContext.useEnvironmentContext();
     const [state, send] = react.useActor(service);
@@ -47,7 +50,7 @@ const createToaster = (props) => {
     return /* @__PURE__ */ jsxRuntime.jsx(toastGroup.ToastGroup, { ...mergedProps, ref, children: toasts.map((toast2) => /* @__PURE__ */ jsxRuntime.jsx(ToastProviderFactory, { service: toast2 }, toast2.id)) });
   });
   Toaster.displayName = "ToastGroup";
-  return [Toaster, api];
+  return [Toaster, Object.assign(api, { subscribe })];
 };
 const ToastProviderFactory = (props) => {
   const [state, send] = react.useActor(props.service);

package/toast/create-toaster.mjs

@@ -11,6 +11,9 @@ const createToaster = (props) => {
   const { placement, ...rest } = props;
   const service = toast.group.machine({ id: "1", placement, ...rest }).start();
   let api = toast.group.connect(service.getState(), service.send, normalizeProps);
+  const subscribe = (fn) => {
+    return service.subscribe((state) => fn(state.context.toasts));
+  };
   const Toaster = forwardRef((props2, ref) => {
     const getRootNode = useEnvironmentContext();
     const [state, send] = useActor(service);
@@ -24,7 +27,7 @@ const createToaster = (props) => {
     return /* @__PURE__ */ jsx(ToastGroup, { ...mergedProps, ref, children: toasts.map((toast2) => /* @__PURE__ */ jsx(ToastProviderFactory, { service: toast2 }, toast2.id)) });
   });
   Toaster.displayName = "ToastGroup";
-  return [Toaster, api];
+  return [Toaster, Object.assign(api, { subscribe })];
 };
 const ToastProviderFactory = (props) => {
   const [state, send] = useActor(props.service);