@ark-ui/react 0.9.0 → 0.10.0-beta.0

package/CHANGELOG.md

@@ -6,6 +6,13 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [0.10.0-beta.0] - 2023-07-29
+
+### Changed
+
+- Updated number input `onChange` handler to allow synchronous updates to the value when using the scrubber.
+- Improved TypeScript typings in our factory functions. The changes allow for more accurate type inference for the `ref` property when dealing with both intrinsic HTML elements and custom React components.
+
 ## [0.9.0] - 2023-07-21
 
 ### Added
@@ -133,7 +140,7 @@ description: All notable changes to this project will be documented in this file
 - Add `Toast`
 - Add `Tooltip`
 
-[unreleased]: https://github.com/chakra-ui/ark/compare/@ark-ui/react@0.9.0...HEAD
+[unreleased]: https://github.com/chakra-ui/ark/compare/@ark-ui/react@0.10.0-beta.0...HEAD
 [0.1.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.1.0
 [0.2.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.2.0
 [0.3.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.3.0
@@ -146,5 +153,6 @@ description: All notable changes to this project will be documented in this file
 [0.7.3]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.7.3
 [0.8.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.8.0
 [0.8.1]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.8.1
-
 [0.9.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.9.0
+
+[0.10.0-beta.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.10.0-beta.0

package/factory.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export type AsChildProps = {
     asChild?: boolean;
 };
@@ -5,7 +6,11 @@ type JsxElements = {
     [E in keyof JSX.IntrinsicElements]: AsChildForwardRefComponent<E>;
 };
 export type AsChildForwardRefComponent<E extends React.ElementType> = React.ForwardRefExoticComponent<AsChildComponentProps<E>>;
-export type AsChildComponentProps<E extends React.ElementType> = React.ComponentProps<E> & AsChildProps;
+export type AsChildComponentProps<E extends React.ElementType> = Omit<React.ComponentProps<E>, 'ref'> & AsChildProps & {
+    ref?: E extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[E] extends {
+        ref?: infer R;
+    } ? R : never : React.RefObject<HTMLElement>;
+};
 export type HTMLArkProps<T extends React.ElementType> = AsChildComponentProps<T>;
 export declare const jsxFactory: () => JsxElements;
 export declare const ark: JsxElements;

package/number-input/use-number-input.cjs

@@ -6,6 +6,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const numberInput = require('@zag-js/number-input');
 const react = require('@zag-js/react');
 const React = require('react');
+const reactDom = require('react-dom');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -35,9 +36,15 @@ const useNumberInput = (props) => {
     ...props,
     value: props.defaultValue
   };
+  const onChange = props.onChange;
+  const onChangeWithFlushSync = React.useCallback(
+    (e) => reactDom.flushSync(() => onChange?.(e)),
+    [onChange]
+  );
   const context = {
     ...initialContext,
-    value: props.value
+    value: props.value,
+    onChange: onChangeWithFlushSync
   };
   const [state, send] = react.useMachine(numberInput__namespace.machine(initialContext), { context });
   return numberInput__namespace.connect(state, send, react.normalizeProps);

package/number-input/use-number-input.mjs

@@ -1,7 +1,8 @@
 'use client';
 import * as numberInput from '@zag-js/number-input';
 import { useMachine, normalizeProps } from '@zag-js/react';
-import { useId } from 'react';
+import { useId, useCallback } from 'react';
+import { flushSync } from 'react-dom';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useNumberInput = (props) => {
@@ -12,9 +13,15 @@ const useNumberInput = (props) => {
     ...props,
     value: props.defaultValue
   };
+  const onChange = props.onChange;
+  const onChangeWithFlushSync = useCallback(
+    (e) => flushSync(() => onChange?.(e)),
+    [onChange]
+  );
   const context = {
     ...initialContext,
-    value: props.value
+    value: props.value,
+    onChange: onChangeWithFlushSync
   };
   const [state, send] = useMachine(numberInput.machine(initialContext), { context });
   return numberInput.connect(state, send, normalizeProps);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "0.9.0",
+  "version": "0.10.0-beta.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -96,19 +96,19 @@
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "4.0.0",
-    "@storybook/addon-a11y": "7.1.0",
-    "@storybook/addon-essentials": "7.1.0",
-    "@storybook/addons": "7.1.0",
-    "@storybook/react": "7.1.0",
-    "@storybook/react-vite": "7.1.0",
+    "@storybook/addon-a11y": "7.1.1",
+    "@storybook/addon-essentials": "7.1.1",
+    "@storybook/addons": "7.1.1",
+    "@storybook/react": "7.1.1",
+    "@storybook/react-vite": "7.1.1",
     "@testing-library/dom": "9.3.1",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
     "@types/jsdom": "21.1.1",
-    "@types/react": "18.2.15",
+    "@types/react": "18.2.16",
     "@types/react-dom": "18.2.7",
-    "@types/testing-library__jest-dom": "5.14.8",
+    "@types/testing-library__jest-dom": "5.14.9",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
     "@vitejs/plugin-react": "4.0.3",
@@ -123,9 +123,9 @@
     "react-frame-component": "5.2.6",
     "release-it": "16.1.3",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "7.1.0",
+    "storybook": "7.1.1",
     "typescript": "5.1.6",
-    "vite": "4.4.6",
+    "vite": "4.4.7",
     "vite-plugin-dts": "2.3.0",
     "vitest": "0.33.0"
   },