@ark-ui/react 2.0.1 → 2.0.2

package/CHANGELOG.md

@@ -6,6 +6,22 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [2.0.2] - 2024-02-10
+
+### Added
+
+- Exported `SelectionDetails` type for `Menu` component
+
+### Changed
+
+- Changed `Dialog.Description` and `Popover.Description` from `p` to `div` to allow for multiple paragraphs.
+- Changed `TreeView.BranchTrigger` from `button` to `div` for the accessibility reasons.
+
+### Fixed
+
+- Fix issue where `@types/react@18.2.8` broke current typings in `Portal`
+- Fix issue where `Select` component submits its first option when used in a form, even if there is no value selected.
+
 ## [2.0.1] - 2024-01-30
 
 ### Fixed

package/dialog/dialog-description.cjs

@@ -13,7 +13,7 @@ const DialogDescription = react.forwardRef(
   (props, ref) => {
     const api = dialogContext.useDialogContext();
     const mergedProps = react$1.mergeProps(api.descriptionProps, props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.p, { ...mergedProps, ref });
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
 DialogDescription.displayName = "DialogDescription";

package/dialog/dialog-description.d.ts

@@ -1,6 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export interface DialogDescriptionProps extends HTMLArkProps<'p'> {
+export interface DialogDescriptionProps extends HTMLArkProps<'div'> {
 }
 export declare const DialogDescription: ForwardRefExoticComponent<DialogDescriptionProps & RefAttributes<HTMLParagraphElement>>;

package/dialog/dialog-description.mjs

@@ -9,7 +9,7 @@ const DialogDescription = forwardRef(
   (props, ref) => {
     const api = useDialogContext();
     const mergedProps = mergeProps(api.descriptionProps, props);
-    return /* @__PURE__ */ jsx(ark.p, { ...mergedProps, ref });
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );
 DialogDescription.displayName = "DialogDescription";

package/menu/index.d.ts

@@ -1,4 +1,4 @@
-import type { OpenChangeDetails as MenuOpenChangeDetails, ValueChangeDetails as MenuValueChangeDetails } from '@zag-js/menu';
+import type { OpenChangeDetails as MenuOpenChangeDetails, SelectionDetails as MenuSelectionDetails, ValueChangeDetails as MenuValueChangeDetails } from '@zag-js/menu';
 import { MenuArrow, type MenuArrowProps } from './menu-arrow';
 import { MenuArrowTip, type MenuArrowTipProps } from './menu-arrow-tip';
 import { MenuContent, type MenuContentProps } from './menu-content';
@@ -15,4 +15,4 @@ import { MenuTrigger, type MenuTriggerProps } from './menu-trigger';
 import { MenuTriggerItem, type MenuTriggerItemProps } from './menu-trigger-item';
 export * as Menu from './menu';
 export { MenuArrow, MenuArrowTip, MenuContent, MenuContextTrigger, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuOptionItem, MenuPositioner, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, useMenuContext, };
-export type { MenuArrowProps, MenuArrowTipProps, MenuContentProps, MenuContextTriggerProps, MenuItemGroupLabelProps, MenuItemGroupProps, MenuItemProps, MenuOpenChangeDetails, MenuOptionItemProps, MenuPositionerProps, MenuRootProps, MenuSeparatorProps, MenuTriggerItemProps, MenuTriggerProps, MenuValueChangeDetails, };
+export type { MenuArrowProps, MenuArrowTipProps, MenuContentProps, MenuContextTriggerProps, MenuItemGroupLabelProps, MenuItemGroupProps, MenuItemProps, MenuOpenChangeDetails, MenuOptionItemProps, MenuPositionerProps, MenuRootProps, MenuSelectionDetails, MenuSeparatorProps, MenuTriggerItemProps, MenuTriggerProps, MenuValueChangeDetails, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -101,17 +101,17 @@
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "5.0.0",
-    "@storybook/addon-a11y": "7.6.10",
-    "@storybook/addon-essentials": "7.6.10",
-    "@storybook/addons": "7.6.10",
-    "@storybook/react": "7.6.10",
-    "@storybook/react-vite": "7.6.10",
+    "@storybook/addon-a11y": "7.6.12",
+    "@storybook/addon-essentials": "7.6.12",
+    "@storybook/addons": "7.6.12",
+    "@storybook/react": "7.6.12",
+    "@storybook/react-vite": "7.6.12",
     "@testing-library/dom": "9.3.4",
-    "@testing-library/jest-dom": "6.3.0",
-    "@testing-library/react": "14.1.2",
+    "@testing-library/jest-dom": "6.4.1",
+    "@testing-library/react": "14.2.1",
     "@testing-library/user-event": "14.5.2",
     "@types/jsdom": "21.1.6",
-    "@types/react": "18.2.48",
+    "@types/react": "18.2.52",
     "@types/react-dom": "18.2.18",
     "@types/testing-library__jest-dom": "5.14.9",
     "@typescript-eslint/eslint-plugin": "6.20.0",
@@ -128,10 +128,10 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-frame-component": "5.2.6",
-    "react-hook-form": "7.49.3",
+    "react-hook-form": "7.50.0",
     "release-it": "17.0.3",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "7.6.10",
+    "storybook": "7.6.12",
     "typescript": "5.3.3",
     "vite": "5.0.12",
     "vite-plugin-dts": "3.7.2",

package/popover/popover-description.cjs

@@ -13,7 +13,7 @@ const PopoverDescription = react.forwardRef(
   (props, ref) => {
     const api = popoverContext.usePopoverContext();
     const mergedProps = react$1.mergeProps(api.descriptionProps, props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.p, { ...mergedProps, ref });
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
 PopoverDescription.displayName = "PopoverDescription";

package/popover/popover-description.d.ts

@@ -1,6 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export interface PopoverDescriptionProps extends HTMLArkProps<'p'> {
+export interface PopoverDescriptionProps extends HTMLArkProps<'div'> {
 }
 export declare const PopoverDescription: ForwardRefExoticComponent<PopoverDescriptionProps & RefAttributes<HTMLParagraphElement>>;

package/popover/popover-description.mjs

@@ -9,7 +9,7 @@ const PopoverDescription = forwardRef(
   (props, ref) => {
     const api = usePopoverContext();
     const mergedProps = mergeProps(api.descriptionProps, props);
-    return /* @__PURE__ */ jsx(ark.p, { ...mergedProps, ref });
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );
 PopoverDescription.displayName = "PopoverDescription";

package/portal.cjs

@@ -3,6 +3,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
 const reactDom = require('react-dom');
 const environmentContext = require('./environment/environment-context.cjs');
@@ -13,10 +14,10 @@ const Portal = (props) => {
   const isServer = useIsServer.useIsServer();
   const getRootNode = environmentContext.useEnvironmentContext();
   if (isServer || disabled)
-    return children;
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
   const doc = getRootNode?.().ownerDocument ?? document;
   const mountNode = container?.current ?? doc.body;
-  return react.Children.map(children, (child) => reactDom.createPortal(child, mountNode));
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: react.Children.map(children, (child) => reactDom.createPortal(child, mountNode)) });
 };
 
 exports.Portal = Portal;

package/portal.d.ts

@@ -1,6 +1,7 @@
-import { type PropsWithChildren, type ReactNode, type ReactPortal, type RefObject } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { type PropsWithChildren, type RefObject } from 'react';
 export interface PortalProps {
     disabled?: boolean;
     container?: RefObject<HTMLElement>;
 }
-export declare const Portal: (props: PropsWithChildren<PortalProps>) => ReactPortal[] | ReactNode | null | undefined;
+export declare const Portal: (props: PropsWithChildren<PortalProps>) => JSX.Element;

package/portal.mjs

@@ -1,4 +1,5 @@
 'use client';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { Children } from 'react';
 import { createPortal } from 'react-dom';
 import { useEnvironmentContext } from './environment/environment-context.mjs';
@@ -9,10 +10,10 @@ const Portal = (props) => {
   const isServer = useIsServer();
   const getRootNode = useEnvironmentContext();
   if (isServer || disabled)
-    return children;
+    return /* @__PURE__ */ jsx(Fragment, { children });
   const doc = getRootNode?.().ownerDocument ?? document;
   const mountNode = container?.current ?? doc.body;
-  return Children.map(children, (child) => createPortal(child, mountNode));
+  return /* @__PURE__ */ jsx(Fragment, { children: Children.map(children, (child) => createPortal(child, mountNode)) });
 };
 
 export { Portal };

package/select/select-control.cjs

@@ -12,9 +12,13 @@ const selectContext = require('./select-context.cjs');
 const SelectControl = react.forwardRef((props, ref) => {
   const api = selectContext.useSelectContext();
   const mergedProps = react$1.mergeProps(api.controlProps, props);
+  const isValueEmpty = api.value.length === 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }),
-    /* @__PURE__ */ jsxRuntime.jsx("select", { ...api.hiddenSelectProps, children: api.collection.toArray().map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value)) })
+    /* @__PURE__ */ jsxRuntime.jsxs("select", { ...api.hiddenSelectProps, children: [
+      isValueEmpty && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "" }),
+      api.collection.toArray().map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value))
+    ] })
   ] });
 });
 SelectControl.displayName = "SelectControl";

package/select/select-control.mjs

@@ -8,9 +8,13 @@ import { useSelectContext } from './select-context.mjs';
 const SelectControl = forwardRef((props, ref) => {
   const api = useSelectContext();
   const mergedProps = mergeProps(api.controlProps, props);
+  const isValueEmpty = api.value.length === 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }),
-    /* @__PURE__ */ jsx("select", { ...api.hiddenSelectProps, children: api.collection.toArray().map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value)) })
+    /* @__PURE__ */ jsxs("select", { ...api.hiddenSelectProps, children: [
+      isValueEmpty && /* @__PURE__ */ jsx("option", { value: "" }),
+      api.collection.toArray().map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+    ] })
   ] });
 });
 SelectControl.displayName = "SelectControl";

package/tree-view/tree-view-branch-trigger.cjs

@@ -19,7 +19,7 @@ const TreeViewBranchTrigger = react.forwardRef(
     ]);
     const api = treeViewContext.useTreeViewContext();
     const mergedProps = react$1.mergeProps(api.getBranchTriggerProps(branchProps), localProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
 TreeViewBranchTrigger.displayName = "TreeViewBranchTrigger";

package/tree-view/tree-view-branch-trigger.d.ts

@@ -3,6 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type BranchProps } from './tree-view-context';
-export interface TreeViewBranchTriggerProps extends Assign<HTMLArkProps<'button'>, BranchProps> {
+export interface TreeViewBranchTriggerProps extends Assign<HTMLArkProps<'div'>, BranchProps> {
 }
-export declare const TreeViewBranchTrigger: ForwardRefExoticComponent<TreeViewBranchTriggerProps & RefAttributes<HTMLButtonElement>>;
+export declare const TreeViewBranchTrigger: ForwardRefExoticComponent<TreeViewBranchTriggerProps & RefAttributes<HTMLDivElement>>;

package/tree-view/tree-view-branch-trigger.mjs

@@ -15,7 +15,7 @@ const TreeViewBranchTrigger = forwardRef(
     ]);
     const api = useTreeViewContext();
     const mergedProps = mergeProps(api.getBranchTriggerProps(branchProps), localProps);
-    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );
 TreeViewBranchTrigger.displayName = "TreeViewBranchTrigger";