@ark-ui/react 0.0.0-rc-20230119065628 → 0.0.0-rc-20230119080906

package/dist/popover/use-popover.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const popover = require('@zag-js/popover');
 const react = require('@zag-js/react');
 const React = require('react');
+const useLatestRef = require('../use-latest-ref.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -26,12 +27,25 @@ function _interopNamespaceDefault(e) {
 const popover__namespace = /*#__PURE__*/_interopNamespaceDefault(popover);
 
 const usePopover = (props) => {
+  const { isOpen, ...restProps } = props;
   const context = {
     id: React.useId(),
-    ...props
+    ...restProps
   };
   const [state, send] = react.useMachine(popover__namespace.machine(context), { context });
-  return popover__namespace.connect(state, send, react.normalizeProps);
+  const api = popover__namespace.connect(state, send, react.normalizeProps);
+  const apiRef = useLatestRef.useLatestRef(api);
+  React.useEffect(() => {
+    if (isOpen == null) {
+      return;
+    }
+    if (isOpen && !state.matches("open")) {
+      apiRef.current.open();
+    } else if (!isOpen && !state.matches("closed")) {
+      apiRef.current.close();
+    }
+  }, [isOpen, state, apiRef]);
+  return api;
 };
 
 exports.usePopover = usePopover;

package/dist/popover/use-popover.d.ts

@@ -1,7 +1,14 @@
 import type { HTMLAttributes, DetailedHTMLProps, ButtonHTMLAttributes } from 'react';
 import * as popover from '@zag-js/popover';
 import type { Optional } from '../types';
-export declare type UsePopoverProps = Optional<popover.Context, 'id'>;
+export declare type UsePopoverProps = Optional<popover.Context, 'id'> & {
+    /**
+     * Control the open state of the popover.
+     *
+     * @default false
+     */
+    isOpen?: boolean;
+};
 export declare const usePopover: (props: UsePopoverProps) => {
     portalled: boolean;
     isOpen: boolean;

package/dist/popover/use-popover.mjs

@@ -1,14 +1,28 @@
 import * as popover from '@zag-js/popover';
 import { useMachine, normalizeProps } from '@zag-js/react';
-import { useId } from 'react';
+import { useId, useEffect } from 'react';
+import { useLatestRef } from '../use-latest-ref.mjs';
 
 const usePopover = (props) => {
+  const { isOpen, ...restProps } = props;
   const context = {
     id: useId(),
-    ...props
+    ...restProps
   };
   const [state, send] = useMachine(popover.machine(context), { context });
-  return popover.connect(state, send, normalizeProps);
+  const api = popover.connect(state, send, normalizeProps);
+  const apiRef = useLatestRef(api);
+  useEffect(() => {
+    if (isOpen == null) {
+      return;
+    }
+    if (isOpen && !state.matches("open")) {
+      apiRef.current.open();
+    } else if (!isOpen && !state.matches("closed")) {
+      apiRef.current.close();
+    }
+  }, [isOpen, state, apiRef]);
+  return api;
 };
 
 export { usePopover };

package/dist/use-latest-ref.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+
+function useLatestRef(value) {
+  const ref = React.useRef(value);
+  ref.current = value;
+  return ref;
+}
+
+exports.useLatestRef = useLatestRef;

package/dist/use-latest-ref.d.ts

@@ -0,0 +1,2 @@
+import type { MutableRefObject } from 'react';
+export declare function useLatestRef<T>(value: T): MutableRefObject<T>;

package/dist/use-latest-ref.mjs

@@ -0,0 +1,9 @@
+import { useRef } from 'react';
+
+function useLatestRef(value) {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+}
+
+export { useLatestRef };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "0.0.0-rc-20230119065628",
+  "version": "0.0.0-rc-20230119080906",
   "description": "",
   "keywords": [],
   "homepage": "https://github.com/chakra-ui/ark#readme",