@ark-ui/react 1.0.0-beta.5 → 1.0.1

package/CHANGELOG.md

@@ -6,68 +6,29 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
-## [1.0.0-beta.5] - 2023-11-09
-
-- Integrate latest `@zag-js` packages
-
-## [1.0.0-beta.4] - 2023-10-31
+## [1.0.1] - 2023-11-10
 
 ### 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
+- 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.
 
-### Changed
+## [1.0.0] - 2023-11-09
 
-- Improved accessibility of all disclosure components when lazy mounting is enabled.
+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.
 
-## [1.0.0-beta.2] - 2023-10-25
+### Highlights
 
-### Added
-
-- Added `ValueText` to the `ColorPicker` component
-
-### Fixed
-
-- Added missing data attributes to `DatePickerView` component
-
-## [1.0.0-beta.1] - 2023-10-20
-
-### Added
+- Revised the `Presence` component: `lazyMount` and `unmountOnExit` have been added at the root level. For some disclosure components like `Tabs` and `Accordion`, this constitutes a breaking change.
+- Breaking changes have been implemented in `Accordion`, `ColorPicker`, `DatePicker`, `Dialog`, `RadioGroup`, `SegmentGroup`, `TagsInput`, `Toast`, and `ToggleGroup` to achieve a consistent and more intuitive API.
+- Resolved various bugs and addressed accessibility issues across all components.
 
-- Parsed `focusedValue` in `DatePicker`
+### Stability and Support
 
-### 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'
-```
+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.
 
 ## [0.15.0] - 2023-09-14
 

package/color-picker/color-picker-view.cjs

@@ -4,12 +4,26 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-require('react');
+const anatomy = require('@ark-ui/anatomy');
+const react = require('react');
+const factory = require('../factory.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
 
-const ColorPickerView = (props) => {
+const ColorPickerView = react.forwardRef((props, ref) => {
   const api = colorPickerContext.useColorPickerContext();
-  return api.format === props.format ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children }) : null;
-};
+  if (api.format !== props.format) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    factory.ark.div,
+    {
+      ref,
+      "data-format": props.format,
+      ...anatomy.colorPickerAnatomy.build().view.attrs,
+      ...props
+    }
+  );
+});
+ColorPickerView.displayName = "ColorPickerView";
 
 exports.ColorPickerView = ColorPickerView;

package/color-picker/color-picker-view.d.ts

@@ -1,7 +1,8 @@
-import { JSX } from 'react/jsx-runtime';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
 import type { ColorFormat } from '@zag-js/color-picker';
-import { type PropsWithChildren } from 'react';
-export interface ColorPickerViewProps extends PropsWithChildren {
+import { type HTMLArkProps } from '../factory';
+export interface ColorPickerViewProps extends HTMLArkProps<'div'> {
     format: ColorFormat;
 }
-export declare const ColorPickerView: (props: ColorPickerViewProps) => JSX.Element | null;
+export declare const ColorPickerView: ForwardRefExoticComponent<ColorPickerViewProps & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-view.mjs

@@ -1,11 +1,25 @@
 'use client';
-import { jsx, Fragment } from 'react/jsx-runtime';
-import 'react';
+import { jsx } from 'react/jsx-runtime';
+import { colorPickerAnatomy } from '@ark-ui/anatomy';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
 import { useColorPickerContext } from './color-picker-context.mjs';
 
-const ColorPickerView = (props) => {
+const ColorPickerView = forwardRef((props, ref) => {
   const api = useColorPickerContext();
-  return api.format === props.format ? /* @__PURE__ */ jsx(Fragment, { children: props.children }) : null;
-};
+  if (api.format !== props.format) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    ark.div,
+    {
+      ref,
+      "data-format": props.format,
+      ...colorPickerAnatomy.build().view.attrs,
+      ...props
+    }
+  );
+});
+ColorPickerView.displayName = "ColorPickerView";
 
 export { ColorPickerView };

package/color-picker/index.d.ts

@@ -1,4 +1,3 @@
-import { JSX } from 'react/jsx-runtime';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type ColorPickerProps } from './color-picker';
@@ -44,7 +43,7 @@ declare const ColorPicker: ForwardRefExoticComponent<ColorPickerProps & RefAttri
     TransparencyGrid: ForwardRefExoticComponent<ColorPickerTransparencyGridProps & RefAttributes<HTMLDivElement>>;
     Trigger: ForwardRefExoticComponent<ColorPickerTriggerProps & RefAttributes<HTMLButtonElement>>;
     ValueText: ForwardRefExoticComponent<ColorPickerValueTextProps & RefAttributes<HTMLDivElement>>;
-    View: (props: ColorPickerViewProps) => JSX.Element | null;
+    View: ForwardRefExoticComponent<ColorPickerViewProps & RefAttributes<HTMLDivElement>>;
 };
 export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };
 export type { ColorPickerAreaBackgroundProps, ColorPickerAreaContext, ColorPickerAreaProps, ColorPickerAreaThumbProps, ColorPickerChannelInputProps, ColorPickerChannelSliderContext, ColorPickerChannelSliderProps, ColorPickerChannelSliderThumbProps, ColorPickerChannelSliderTrackProps, ColorPickerContentProps, ColorPickerContext, ColorPickerControlProps, ColorPickerEyeDropperTriggerProps, ColorPickerLabelProps, ColorPickerPositionerProps, ColorPickerProps, ColorPickerSwatchGroupProps, ColorPickerSwatchProps, ColorPickerSwatchTriggerProps, ColorPickerTransparencyGridProps, ColorPickerTriggerProps, ColorPickerValueTextProps, ColorPickerViewProps, };

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-beta.5",
+  "version": "1.0.1",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -59,40 +59,39 @@
     "release-it": "release-it --config ../../../release-it.json"
   },
   "dependencies": {
-    "@ark-ui/anatomy": "1.0.0-beta.1",
-    "@zag-js/accordion": "0.28.0",
-    "@zag-js/anatomy": "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"
+    "@ark-ui/anatomy": "1.0.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",

package/segment-group/segment-group.anatomy.d.ts

@@ -0,0 +1,2 @@
+import { type AnatomyPart } from '@ark-ui/anatomy';
+export declare const parts: Record<'root' | 'label' | 'item' | 'itemText' | 'itemControl' | 'indicator', AnatomyPart>;