@ark-ui/solid 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/solid",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -80,36 +80,35 @@
   },
   "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/combobox": "0.28.0",
-    "@zag-js/date-picker": "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/select": "0.28.0",
-    "@zag-js/slider": "0.28.0",
-    "@zag-js/solid": "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",
-    "resize-observer-polyfill": "1.5.1"
+    "@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/combobox": "0.29.0",
+    "@zag-js/date-picker": "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/select": "0.29.0",
+    "@zag-js/slider": "0.29.0",
+    "@zag-js/solid": "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",
@@ -133,6 +132,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "release-it": "16.2.1",
+    "resize-observer-polyfill": "1.5.1",
     "rollup": "4.3.0",
     "rollup-preset-solid": "2.0.1",
     "solid-js": "1.8.5",

package/source/dialog/dialog-backdrop.jsx

@@ -1,12 +1,13 @@
 import { mergeProps } from '@zag-js/solid';
 import { Show } from 'solid-js';
 import { ark } from '../factory';
-import { usePresenceContext } from '../presence';
+import { usePresence, usePresencePropsContext } from '../presence';
 import { useDialogContext } from './dialog-context';
 export const DialogBackdrop = (props) => {
     const api = useDialogContext();
-    const presenceApi = usePresenceContext();
-    const mergedProps = mergeProps(() => api().backdropProps, props);
+    const presenceProps = usePresencePropsContext();
+    const presenceApi = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
+    const mergedProps = mergeProps(() => api().backdropProps, () => presenceApi().presenceProps, props);
     return (<Show when={!presenceApi().isUnmounted}>
       <ark.div {...mergedProps}/>
     </Show>);

package/source/dialog/dialog.jsx

@@ -1,6 +1,6 @@
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
-import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
+import { PresencePropsProvider, PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
 import { runIfFn } from '../run-if-fn';
 import { DialogProvider } from './dialog-context';
 import { useDialog } from './use-dialog';
@@ -32,6 +32,8 @@ export const Dialog = (props) => {
     const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
     const getChildren = () => runIfFn(localProps.children, api);
     return (<DialogProvider value={api}>
-      <PresenceProvider value={apiPresence}>{getChildren()}</PresenceProvider>
+      <PresencePropsProvider value={presenceProps}>
+        <PresenceProvider value={apiPresence}>{getChildren()}</PresenceProvider>
+      </PresencePropsProvider>
     </DialogProvider>);
 };

package/source/menu/menu-trigger.jsx

@@ -1,8 +1,11 @@
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
+import { usePresenceContext } from '../presence';
 import { useMenuContext } from './menu-context';
 export const MenuTrigger = (props) => {
-    const menu = useMenuContext();
-    const mergedProps = mergeProps(() => menu?.().triggerProps, props);
+    const api = useMenuContext();
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().triggerProps, () => ({ 'aria-controls': presenceApi().isUnmounted && null }), props);
+    // @ts-expect-error we want aria-controls to be null to remove them if the popover if lazy mounted
     return <ark.button {...mergedProps}/>;
 };