react-aria-components 3.0.0-nightly-426bff12a-241106 → 3.0.0-nightly-09ccc53e7-241107

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-aria-components",
-  "version": "3.0.0-nightly-426bff12a-241106",
+  "version": "3.0.0-nightly-09ccc53e7-241107",
   "description": "A library of styleable components built using React Aria",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -37,38 +37,38 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@internationalized/date": "^3.0.0-nightly-426bff12a-241106",
-    "@internationalized/string": "^3.0.0-nightly-426bff12a-241106",
-    "@react-aria/accordion": "3.0.0-nightly-426bff12a-241106",
-    "@react-aria/collections": "3.0.0-nightly-426bff12a-241106",
-    "@react-aria/color": "^3.0.0-nightly-426bff12a-241106",
-    "@react-aria/disclosure": "3.0.0-nightly-426bff12a-241106",
-    "@react-aria/dnd": "^3.0.0-nightly-426bff12a-241106",
-    "@react-aria/focus": "^3.0.0-nightly-426bff12a-241106",
-    "@react-aria/interactions": "^3.0.0-nightly-426bff12a-241106",
-    "@react-aria/live-announcer": "^3.0.0-nightly-426bff12a-241106",
-    "@react-aria/menu": "^3.0.0-nightly-426bff12a-241106",
-    "@react-aria/toolbar": "3.0.0-nightly-426bff12a-241106",
-    "@react-aria/tree": "3.0.0-nightly-426bff12a-241106",
-    "@react-aria/utils": "^3.0.0-nightly-426bff12a-241106",
-    "@react-aria/virtualizer": "^3.0.0-nightly-426bff12a-241106",
-    "@react-stately/color": "^3.0.0-nightly-426bff12a-241106",
-    "@react-stately/disclosure": "3.0.0-nightly-426bff12a-241106",
-    "@react-stately/layout": "^3.0.0-nightly-426bff12a-241106",
-    "@react-stately/menu": "^3.0.0-nightly-426bff12a-241106",
-    "@react-stately/selection": "^3.0.0-nightly-426bff12a-241106",
-    "@react-stately/table": "^3.0.0-nightly-426bff12a-241106",
-    "@react-stately/utils": "^3.0.0-nightly-426bff12a-241106",
-    "@react-stately/virtualizer": "^3.0.0-nightly-426bff12a-241106",
-    "@react-types/color": "^3.0.0-nightly-426bff12a-241106",
-    "@react-types/form": "^3.0.0-nightly-426bff12a-241106",
-    "@react-types/grid": "^3.0.0-nightly-426bff12a-241106",
-    "@react-types/shared": "^3.0.0-nightly-426bff12a-241106",
-    "@react-types/table": "^3.0.0-nightly-426bff12a-241106",
+    "@internationalized/date": "^3.0.0-nightly-09ccc53e7-241107",
+    "@internationalized/string": "^3.0.0-nightly-09ccc53e7-241107",
+    "@react-aria/accordion": "3.0.0-nightly-09ccc53e7-241107",
+    "@react-aria/collections": "3.0.0-nightly-09ccc53e7-241107",
+    "@react-aria/color": "^3.0.0-nightly-09ccc53e7-241107",
+    "@react-aria/disclosure": "3.0.0-nightly-09ccc53e7-241107",
+    "@react-aria/dnd": "^3.0.0-nightly-09ccc53e7-241107",
+    "@react-aria/focus": "^3.0.0-nightly-09ccc53e7-241107",
+    "@react-aria/interactions": "^3.0.0-nightly-09ccc53e7-241107",
+    "@react-aria/live-announcer": "^3.0.0-nightly-09ccc53e7-241107",
+    "@react-aria/menu": "^3.0.0-nightly-09ccc53e7-241107",
+    "@react-aria/toolbar": "3.0.0-nightly-09ccc53e7-241107",
+    "@react-aria/tree": "3.0.0-nightly-09ccc53e7-241107",
+    "@react-aria/utils": "^3.0.0-nightly-09ccc53e7-241107",
+    "@react-aria/virtualizer": "^3.0.0-nightly-09ccc53e7-241107",
+    "@react-stately/color": "^3.0.0-nightly-09ccc53e7-241107",
+    "@react-stately/disclosure": "3.0.0-nightly-09ccc53e7-241107",
+    "@react-stately/layout": "^3.0.0-nightly-09ccc53e7-241107",
+    "@react-stately/menu": "^3.0.0-nightly-09ccc53e7-241107",
+    "@react-stately/selection": "^3.0.0-nightly-09ccc53e7-241107",
+    "@react-stately/table": "^3.0.0-nightly-09ccc53e7-241107",
+    "@react-stately/utils": "^3.0.0-nightly-09ccc53e7-241107",
+    "@react-stately/virtualizer": "^3.0.0-nightly-09ccc53e7-241107",
+    "@react-types/color": "^3.0.0-nightly-09ccc53e7-241107",
+    "@react-types/form": "^3.0.0-nightly-09ccc53e7-241107",
+    "@react-types/grid": "^3.0.0-nightly-09ccc53e7-241107",
+    "@react-types/shared": "^3.0.0-nightly-09ccc53e7-241107",
+    "@react-types/table": "^3.0.0-nightly-09ccc53e7-241107",
     "@swc/helpers": "^0.5.0",
     "client-only": "^0.0.1",
-    "react-aria": "^3.0.0-nightly-426bff12a-241106",
-    "react-stately": "^3.0.0-nightly-426bff12a-241106",
+    "react-aria": "^3.0.0-nightly-09ccc53e7-241107",
+    "react-stately": "^3.0.0-nightly-09ccc53e7-241107",
     "use-sync-external-store": "^1.2.0"
   },
   "peerDependencies": {

package/src/ToggleButton.tsx

@@ -10,11 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaToggleButtonProps, HoverEvents, mergeProps, useFocusRing, useHover, useToggleButton} from 'react-aria';
+import {AriaToggleButtonProps, HoverEvents, mergeProps, useFocusRing, useHover, useToggleButton, useToggleButtonGroupItem} from 'react-aria';
 import {ButtonRenderProps} from './Button';
 import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
-import {forwardRefType} from '@react-types/shared';
-import React, {createContext, ForwardedRef, forwardRef} from 'react';
+import {forwardRefType, Key} from '@react-types/shared';
+import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
+import {ToggleGroupStateContext} from './ToggleButtonGroup';
 import {ToggleState, useToggleState} from 'react-stately';
 
 export interface ToggleButtonRenderProps extends Omit<ButtonRenderProps, 'isPending'> {
@@ -29,19 +30,35 @@ export interface ToggleButtonRenderProps extends Omit<ButtonRenderProps, 'isPend
   state: ToggleState
 }
 
-export interface ToggleButtonProps extends Omit<AriaToggleButtonProps, 'children' | 'elementType'>, HoverEvents, SlotProps, RenderProps<ToggleButtonRenderProps> {}
+export interface ToggleButtonProps extends Omit<AriaToggleButtonProps, 'children' | 'elementType' | 'id'>, HoverEvents, SlotProps, RenderProps<ToggleButtonRenderProps> {
+  /** When used in a ToggleButtonGroup, an identifier for the item in `selectedKeys`. When used standalone, a DOM id. */
+  id?: Key
+}
 
 export const ToggleButtonContext = createContext<ContextValue<ToggleButtonProps, HTMLButtonElement>>({});
 
 function ToggleButton(props: ToggleButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
   [props, ref] = useContextProps(props, ref, ToggleButtonContext);
-  let state = useToggleState(props);
-  let {buttonProps, isPressed} = useToggleButton(props, state, ref);
+  let groupState = useContext(ToggleGroupStateContext);
+  let state = useToggleState(groupState && props.id != null ? {
+    isSelected: groupState.selectedKeys.has(props.id),
+    onChange(isSelected) {
+      groupState.setSelected(props.id!, isSelected);
+    }
+  } : props);
+
+  let {buttonProps, isPressed, isSelected, isDisabled} = groupState && props.id != null
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    ? useToggleButtonGroupItem({...props, id: props.id}, groupState, ref)
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    : useToggleButton({...props, id: props.id != null ? String(props.id) : undefined}, state, ref);
+
   let {focusProps, isFocused, isFocusVisible} = useFocusRing(props);
   let {hoverProps, isHovered} = useHover(props);
   let renderProps = useRenderProps({
     ...props,
-    values: {isHovered, isPressed, isFocused, isSelected: state.isSelected, isFocusVisible, isDisabled: props.isDisabled || false, state},
+    id: undefined,
+    values: {isHovered, isPressed, isFocused, isSelected: state.isSelected, isFocusVisible, isDisabled, state},
     defaultClassName: 'react-aria-ToggleButton'
   });
 
@@ -52,9 +69,9 @@ function ToggleButton(props: ToggleButtonProps, ref: ForwardedRef<HTMLButtonElem
       ref={ref}
       slot={props.slot || undefined}
       data-focused={isFocused || undefined}
-      data-disabled={props.isDisabled || undefined}
+      data-disabled={isDisabled || undefined}
       data-pressed={isPressed || undefined}
-      data-selected={state.isSelected || undefined}
+      data-selected={isSelected || undefined}
       data-hovered={isHovered || undefined}
       data-focus-visible={isFocusVisible || undefined} />
   );

package/src/ToggleButtonGroup.tsx

@@ -0,0 +1,68 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import {AriaToggleButtonGroupProps, useToggleButtonGroup} from 'react-aria';
+import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
+import {forwardRefType} from '@react-types/shared';
+import React, {createContext, ForwardedRef, forwardRef} from 'react';
+import {ToggleGroupState, useToggleGroupState} from 'react-stately';
+
+export interface ToggleButtonGroupRenderProps {
+  /**
+   * Whether the toggle button group is disabled.
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean,
+  /**
+   * State of the toggle button group.
+   */
+  state: ToggleGroupState
+}
+
+export interface ToggleButtonGroupProps extends AriaToggleButtonGroupProps, RenderProps<ToggleButtonGroupRenderProps>, SlotProps {}
+
+export const ToggleButtonGroupContext = createContext<ContextValue<ToggleButtonGroupProps, HTMLDivElement>>({});
+export const ToggleGroupStateContext = createContext<ToggleGroupState | null>(null);
+
+function ToggleButtonGroup(props: ToggleButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, ToggleButtonGroupContext);
+  let state = useToggleGroupState(props);
+  let {groupProps} = useToggleButtonGroup(props, state, ref);
+
+  let renderProps = useRenderProps({
+    ...props,
+    values: {
+      isDisabled: state.isDisabled,
+      state
+    },
+    defaultClassName: 'react-aria-ToggleButtonGroup'
+  });
+
+  return (
+    <div
+      {...groupProps}
+      {...renderProps}
+      ref={ref}
+      slot={props.slot || undefined}
+      data-orientation={props.orientation || 'horizontal'}
+      data-disabled={props.isDisabled || undefined}>
+      <ToggleGroupStateContext.Provider value={state}>
+        {renderProps.children}
+      </ToggleGroupStateContext.Provider>
+    </div>
+  );
+}
+
+/**
+ * A toggle button group allows a user to toggle multiple options, with single or multiple selection.
+ */
+const _ToggleButtonGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(ToggleButtonGroup);
+export {_ToggleButtonGroup as ToggleButtonGroup};

package/src/index.ts

@@ -70,6 +70,7 @@ export {Text, TextContext} from './Text';
 export {TextArea, TextAreaContext} from './TextArea';
 export {TextField, TextFieldContext} from './TextField';
 export {ToggleButton, ToggleButtonContext} from './ToggleButton';
+export {ToggleButtonGroup, ToggleButtonGroupContext, ToggleGroupStateContext} from './ToggleButtonGroup';
 export {Toolbar, ToolbarContext} from './Toolbar';
 export {TooltipTrigger, Tooltip, TooltipTriggerStateContext, TooltipContext} from './Tooltip';
 export {UNSTABLE_TreeLoadingIndicator, UNSTABLE_Tree, UNSTABLE_TreeItem, UNSTABLE_TreeContext, UNSTABLE_TreeItemContent, UNSTABLE_TreeStateContext} from './Tree';
@@ -131,6 +132,7 @@ export type {TextAreaProps} from './TextArea';
 export type {TextFieldProps, TextFieldRenderProps} from './TextField';
 export type {TextProps} from './Text';
 export type {ToggleButtonProps, ToggleButtonRenderProps} from './ToggleButton';
+export type {ToggleButtonGroupProps, ToggleButtonGroupRenderProps} from './ToggleButtonGroup';
 export type {ToolbarProps, ToolbarRenderProps} from './Toolbar';
 export type {TooltipProps, TooltipRenderProps, TooltipTriggerComponentProps} from './Tooltip';
 export type {TreeProps, TreeRenderProps, TreeItemProps, TreeItemRenderProps, TreeItemContentProps, TreeItemContentRenderProps} from './Tree';