@ark-ui/react 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -6,6 +6,16 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [1.0.1] - 2023-11-10
+
+### Fixed
+
+- Resolved an issue where the `Dialog` component would not animate on exit.
+- Resolved various issues for `Menu` when lazy mounted.
+- Resolved an issue where `MenuTrigger` could still work even when disabled.
+- Resolved an issue where components like `Dialog`, `Popover` etc would not invoke `onExitComplete`
+- Fixed an issue where placement of the `Combobox` could be incorrect when lazy mounted.
+
 ## [1.0.0] - 2023-11-09
 
 We are happy to announce the release of `@ark-ui/react@1.0.0`. This release includes a number of breaking changes, new features, and bug fixes. Since our last release over two months ago, we will only highlight some key changes. Please refer to the documentation for each component to learn more.
@@ -20,69 +30,6 @@ We are happy to announce the release of `@ark-ui/react@1.0.0`. This release incl
 
 With the release of version 1.0.0, we are moving towards a more stable version of `@ark-ui/react`. Future updates will strive to avoid breaking changes, ensuring a smoother experience for our users. If you encounter any issues while upgrading, please do not hesitate to open an issue on our [GitHub repository](https://github.com/chakra-ui/ark/issues). Your feedback is invaluable in helping us improve.
 
-## [1.0.0-beta.5] - 2023-11-09
-
-- Integrate latest `@zag-js` packages
-
-## [1.0.0-beta.4] - 2023-10-31
-
-### Fixed
-
-- Resolved an accessibility issue with `Select`
-
-## [1.0.0-beta.3] - 2023-10-26
-
-### Added
-
-- Added support to lazy mount the `DatePicker` and `ColorPicker` components using the `Presence` component
-
-### Changed
-
-- Improved accessibility of all disclosure components when lazy mounting is enabled.
-
-## [1.0.0-beta.2] - 2023-10-25
-
-### Added
-
-- Added `ValueText` to the `ColorPicker` component
-
-### Fixed
-
-- Added missing data attributes to `DatePickerView` component
-
-## [1.0.0-beta.1] - 2023-10-20
-
-### Added
-
-- Parsed `focusedValue` in `DatePicker`
-
-### Fixed
-
-- Resolved an issue with `@ark-ui/anatomy`
-
-## [1.0.0-beta.0] - 2023-10-20
-
-### Changed
-
-- Add memoization to `Select` and `Combobox` item collection to improve performance.
-- Ensure all event callbacks have a stable reference
-
-### Fixed
-
-- Resolved an issue when controlling the `Editable` component.
-
-### Removed
-
-- Removed anatomy exports. These exports are now available in `@ark-ui/anatomy`.
-
-```tsx
-// before
-import { accordionAnatomy } from '@ark-ui/react'
-// after
-import { accordionAnatomy } from '@ark-ui/anatomy' // or
-import { anatomy } from '@ark-ui/anatomy/accordion'
-```
-
 ## [0.15.0] - 2023-09-14
 
 ### Added

package/dialog/dialog-backdrop.cjs

@@ -9,16 +9,18 @@ const react = require('react');
 const factory = require('../factory.cjs');
 require('../presence/index.cjs');
 const dialogContext = require('./dialog-context.cjs');
-const presenceContext = require('../presence/presence-context.cjs');
+const presencePropsContext = require('../presence/presence-props-context.cjs');
+const usePresence = require('../presence/use-presence.cjs');
 
 const DialogBackdrop = react.forwardRef((props, ref) => {
   const api = dialogContext.useDialogContext();
-  const presenceApi = presenceContext.usePresenceContext();
-  const mergedProps = react$1.mergeProps(api.backdropProps, props);
+  const presenceProps = presencePropsContext.usePresencePropsContext();
+  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.isOpen });
+  const mergedProps = react$1.mergeProps(api.backdropProps, presenceApi.getPresenceProps(ref), props);
   if (presenceApi.isUnmounted) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ref, ...mergedProps });
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps });
 });
 DialogBackdrop.displayName = "DialogBackdrop";
 

package/dialog/dialog-backdrop.mjs

@@ -5,16 +5,18 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
 import '../presence/index.mjs';
 import { useDialogContext } from './dialog-context.mjs';
-import { usePresenceContext } from '../presence/presence-context.mjs';
+import { usePresencePropsContext } from '../presence/presence-props-context.mjs';
+import { usePresence } from '../presence/use-presence.mjs';
 
 const DialogBackdrop = forwardRef((props, ref) => {
   const api = useDialogContext();
-  const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps(api.backdropProps, props);
+  const presenceProps = usePresencePropsContext();
+  const presenceApi = usePresence({ ...presenceProps, present: api.isOpen });
+  const mergedProps = mergeProps(api.backdropProps, presenceApi.getPresenceProps(ref), props);
   if (presenceApi.isUnmounted) {
     return null;
   }
-  return /* @__PURE__ */ jsx(ark.div, { ref, ...mergedProps });
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps });
 });
 DialogBackdrop.displayName = "DialogBackdrop";
 

package/dialog/dialog.cjs

@@ -11,6 +11,7 @@ const runIfFn = require('../run-if-fn.cjs');
 const dialogContext = require('./dialog-context.cjs');
 const useDialog = require('./use-dialog.cjs');
 const usePresence = require('../presence/use-presence.cjs');
+const presencePropsContext = require('../presence/presence-props-context.cjs');
 const presenceContext = require('../presence/presence-context.cjs');
 
 const Dialog = (props) => {
@@ -18,7 +19,7 @@ const Dialog = (props) => {
   const api = useDialog.useDialog(localProps);
   const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.isOpen });
   const view = runIfFn.runIfFn(children, api);
-  return /* @__PURE__ */ jsxRuntime.jsx(dialogContext.DialogProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: view }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(dialogContext.DialogProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presencePropsContext.PresencePropsProvider, { value: presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: view }) }) });
 };
 
 exports.Dialog = Dialog;

package/dialog/dialog.mjs

@@ -7,6 +7,7 @@ import { runIfFn } from '../run-if-fn.mjs';
 import { DialogProvider } from './dialog-context.mjs';
 import { useDialog } from './use-dialog.mjs';
 import { usePresence } from '../presence/use-presence.mjs';
+import { PresencePropsProvider } from '../presence/presence-props-context.mjs';
 import { PresenceProvider } from '../presence/presence-context.mjs';
 
 const Dialog = (props) => {
@@ -14,7 +15,7 @@ const Dialog = (props) => {
   const api = useDialog(localProps);
   const presenceApi = usePresence({ ...presenceProps, present: api.isOpen });
   const view = runIfFn(children, api);
-  return /* @__PURE__ */ jsx(DialogProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: view }) });
+  return /* @__PURE__ */ jsx(DialogProvider, { value: api, children: /* @__PURE__ */ jsx(PresencePropsProvider, { value: presenceProps, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: view }) }) });
 };
 
 export { Dialog };

package/menu/menu-positioner.cjs

@@ -7,11 +7,17 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
+require('../presence/index.cjs');
 const menuContext = require('./menu-context.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const MenuPositioner = react.forwardRef((props, ref) => {
   const api = menuContext.useMenuContext();
   const mergedProps = react$1.mergeProps(api?.positionerProps ?? {}, props);
+  const presenceApi = presenceContext.usePresenceContext();
+  if (presenceApi.isUnmounted) {
+    return null;
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 MenuPositioner.displayName = "MenuPositioner";

package/menu/menu-positioner.mjs

@@ -3,11 +3,17 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
+import '../presence/index.mjs';
 import { useMenuContext } from './menu-context.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const MenuPositioner = forwardRef((props, ref) => {
   const api = useMenuContext();
   const mergedProps = mergeProps(api?.positionerProps ?? {}, props);
+  const presenceApi = usePresenceContext();
+  if (presenceApi.isUnmounted) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 MenuPositioner.displayName = "MenuPositioner";

package/menu/menu-trigger.cjs

@@ -7,11 +7,20 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
+require('../presence/index.cjs');
 const menuContext = require('./menu-context.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const MenuTrigger = react.forwardRef((props, ref) => {
   const api = menuContext.useMenuContext();
-  const mergedProps = react$1.mergeProps(api?.triggerProps ?? {}, props);
+  const presenceApi = presenceContext.usePresenceContext();
+  const mergedProps = react$1.mergeProps(
+    {
+      ...api.triggerProps,
+      "aria-controls": presenceApi.isUnmounted ? void 0 : api.triggerProps["aria-controls"]
+    },
+    props
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
 });
 MenuTrigger.displayName = "MenuTrigger";

package/menu/menu-trigger.mjs

@@ -3,11 +3,20 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
+import '../presence/index.mjs';
 import { useMenuContext } from './menu-context.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const MenuTrigger = forwardRef((props, ref) => {
   const api = useMenuContext();
-  const mergedProps = mergeProps(api?.triggerProps ?? {}, props);
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps(
+    {
+      ...api.triggerProps,
+      "aria-controls": presenceApi.isUnmounted ? void 0 : api.triggerProps["aria-controls"]
+    },
+    props
+  );
   return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
 });
 MenuTrigger.displayName = "MenuTrigger";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -60,38 +60,38 @@
   },
   "dependencies": {
     "@ark-ui/anatomy": "1.0.0",
-    "@zag-js/accordion": "0.28.0",
-    "@zag-js/avatar": "0.28.0",
-    "@zag-js/carousel": "0.28.0",
-    "@zag-js/checkbox": "0.28.0",
-    "@zag-js/color-picker": "0.28.0",
-    "@zag-js/color-utils": "0.28.0",
-    "@zag-js/combobox": "0.28.0",
-    "@zag-js/core": "0.28.0",
-    "@zag-js/date-picker": "0.28.0",
-    "@zag-js/date-utils": "0.28.0",
-    "@zag-js/dialog": "0.28.0",
-    "@zag-js/editable": "0.28.0",
-    "@zag-js/hover-card": "0.28.0",
-    "@zag-js/menu": "0.28.0",
-    "@zag-js/number-input": "0.28.0",
-    "@zag-js/pagination": "0.28.0",
-    "@zag-js/pin-input": "0.28.0",
-    "@zag-js/popover": "0.28.0",
-    "@zag-js/presence": "0.28.0",
-    "@zag-js/radio-group": "0.28.0",
-    "@zag-js/rating-group": "0.28.0",
-    "@zag-js/react": "0.28.0",
-    "@zag-js/select": "0.28.0",
-    "@zag-js/slider": "0.28.0",
-    "@zag-js/splitter": "0.28.0",
-    "@zag-js/switch": "0.28.0",
-    "@zag-js/tabs": "0.28.0",
-    "@zag-js/tags-input": "0.28.0",
-    "@zag-js/toast": "0.28.0",
-    "@zag-js/toggle-group": "0.28.0",
-    "@zag-js/tooltip": "0.28.0",
-    "@zag-js/types": "0.28.0"
+    "@zag-js/accordion": "0.29.0",
+    "@zag-js/avatar": "0.29.0",
+    "@zag-js/carousel": "0.29.0",
+    "@zag-js/checkbox": "0.29.0",
+    "@zag-js/color-picker": "0.29.0",
+    "@zag-js/color-utils": "0.29.0",
+    "@zag-js/combobox": "0.29.0",
+    "@zag-js/core": "0.29.0",
+    "@zag-js/date-picker": "0.29.0",
+    "@zag-js/date-utils": "0.29.0",
+    "@zag-js/dialog": "0.29.0",
+    "@zag-js/editable": "0.29.0",
+    "@zag-js/hover-card": "0.29.0",
+    "@zag-js/menu": "0.29.0",
+    "@zag-js/number-input": "0.29.0",
+    "@zag-js/pagination": "0.29.0",
+    "@zag-js/pin-input": "0.29.0",
+    "@zag-js/popover": "0.29.0",
+    "@zag-js/presence": "0.29.0",
+    "@zag-js/radio-group": "0.29.0",
+    "@zag-js/rating-group": "0.29.0",
+    "@zag-js/react": "0.29.0",
+    "@zag-js/select": "0.29.0",
+    "@zag-js/slider": "0.29.0",
+    "@zag-js/splitter": "0.29.0",
+    "@zag-js/switch": "0.29.0",
+    "@zag-js/tabs": "0.29.0",
+    "@zag-js/tags-input": "0.29.0",
+    "@zag-js/toast": "0.29.0",
+    "@zag-js/toggle-group": "0.29.0",
+    "@zag-js/tooltip": "0.29.0",
+    "@zag-js/types": "0.29.0"
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "4.0.0",