react-aria-components 1.16.0 → 1.17.0

package/src/Toast.tsx

@@ -1,248 +0,0 @@
-/*
- * Copyright 2025 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 {AriaToastProps, AriaToastRegionProps, mergeProps, useFocusRing, useHover, useLocale, useToast, useToastRegion} from 'react-aria';
-import {ButtonContext} from './Button';
-import {
-  ClassNameOrFunction,
-  ContextValue,
-  DEFAULT_SLOT,
-  dom,
-  DOMRenderProps,
-  Provider,
-  RenderProps,
-  StyleRenderProps,
-  useContextProps,
-  useRenderProps
-} from './utils';
-import {createPortal} from 'react-dom';
-import {filterDOMProps, useObjectRef} from '@react-aria/utils';
-import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
-import {QueuedToast, ToastQueue, ToastState, useToastQueue} from 'react-stately';
-import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, JSX, ReactElement, ReactNode, useContext} from 'react';
-import {TextContext} from './Text';
-import {useIsSSR} from '@react-aria/ssr';
-import {useUNSAFE_PortalContext} from '@react-aria/overlays';
-
-export const ToastStateContext = createContext<ToastState<any> | null>(null);
-
-export interface ToastRegionRenderProps<T> {
-  /** A list of all currently visible toasts. */
-  visibleToasts: QueuedToast<T>[],
-  /**
-   * Whether the toast region is currently hovered with a mouse.
-   * @selector [data-hovered]
-   */
-  isHovered: boolean,
-  /**
-   * Whether the toast region is currently focused.
-   * @selector [data-focused]
-   */
-  isFocused: boolean,
-  /**
-   * Whether the toast region is keyboard focused.
-   * @selector [data-focus-visible]
-   */
-  isFocusVisible: boolean
-}
-
-export interface ToastRegionProps<T> extends AriaToastRegionProps, StyleRenderProps<ToastRegionRenderProps<T>>, GlobalDOMAttributes<HTMLDivElement> {
-  /**
-   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
-   * @default 'react-aria-ToastRegion'
-   */
-  className?: ClassNameOrFunction<ToastRegionRenderProps<T>>,
-  /** The queue of toasts to display. */
-  queue: ToastQueue<T>,
-  /** A function to render each toast, or children containing a `<ToastList>`. */
-  children: ReactNode | ((renderProps: {toast: QueuedToast<T>}) => ReactElement)
-}
-
-/**
- * A ToastRegion displays one or more toast notifications.
- */
-export const ToastRegion = /*#__PURE__*/ (forwardRef as forwardRefType)(function ToastRegion<T>(props: ToastRegionProps<T>, ref: ForwardedRef<HTMLDivElement>): JSX.Element | null {
-  let isSSR = useIsSSR();
-  let state = useToastQueue(props.queue);
-  let objectRef = useObjectRef(ref);
-  let {regionProps} = useToastRegion(props, state, objectRef);
-
-  let {focusProps, isFocused, isFocusVisible} = useFocusRing();
-  let {hoverProps, isHovered} = useHover({});
-  let renderProps = useRenderProps({
-    ...props,
-    children: undefined,
-    defaultClassName: 'react-aria-ToastRegion',
-    values: {
-      visibleToasts: state.visibleToasts,
-      isHovered,
-      isFocused,
-      isFocusVisible
-    }
-  });
-
-  let {direction} = useLocale();
-  let portalContainer;
-  let {getContainer} = useUNSAFE_PortalContext();
-  if (!isSSR) {
-    portalContainer = document.body;
-    if (getContainer) {
-      portalContainer = getContainer();
-    }
-  }
-
-  let DOMProps = filterDOMProps(props, {global: true});
-
-  let region = (
-    <ToastStateContext.Provider value={state}>
-      <dom.div
-        {...mergeProps(DOMProps, renderProps, regionProps, focusProps, hoverProps)}
-        dir={direction}
-        ref={objectRef}
-        data-hovered={isHovered || undefined}
-        data-focused={isFocused || undefined}
-        data-focus-visible={isFocusVisible || undefined}>
-        {typeof props.children === 'function' ? <ToastList {...props} render={undefined} className={undefined} style={{display: 'contents'}}>{props.children}</ToastList> : props.children}
-      </dom.div>
-    </ToastStateContext.Provider>
-  );
-
-  return state.visibleToasts.length > 0 && portalContainer
-    ? createPortal(region, portalContainer)
-    : null;
-});
-
-export interface ToastListProps<T> extends Omit<ToastRegionProps<T>, 'queue' | 'children' | 'render'>, DOMRenderProps<'ol', ToastRegionRenderProps<T>> {
-  /** A function to render each toast. */
-  children: (renderProps: {toast: QueuedToast<T>}) => ReactElement
-}
-
-export const ToastList = /*#__PURE__*/ (forwardRef as forwardRefType)(function ToastList<T>(props: ToastListProps<T>, ref: ForwardedRef<HTMLOListElement>) {
-  let state = useContext(ToastStateContext)!;
-  let {hoverProps, isHovered} = useHover({});
-  let renderProps = useRenderProps({
-    ...props,
-    children: undefined,
-    defaultClassName: 'react-aria-ToastList',
-    values: {
-      visibleToasts: state.visibleToasts,
-      isFocused: false,
-      isFocusVisible: false,
-      isHovered
-    }
-  });
-
-  return (
-    <dom.ol {...hoverProps} {...renderProps} ref={ref}>
-      {state.visibleToasts.map((toast) => (
-        <li key={toast.key} style={{display: 'contents'}}>
-          {props.children({toast})}
-        </li>
-      ))}
-    </dom.ol>
-  );
-});
-
-export interface ToastRenderProps<T> {
-  /**
-   * The toast object to display.
-   */
-  toast: QueuedToast<T>,
-  /**
-   * Whether the toast is currently focused.
-   * @selector [data-focused]
-   */
-  isFocused: boolean,
-  /**
-   * Whether the toast is keyboard focused.
-   * @selector [data-focus-visible]
-   */
-  isFocusVisible: boolean
-}
-
-export interface ToastProps<T> extends AriaToastProps<T>, RenderProps<ToastRenderProps<T>>, GlobalDOMAttributes<HTMLDivElement> {
-  /**
-   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
-   * @default 'react-aria-Toast'
-   */
-  className?: ClassNameOrFunction<ToastRenderProps<T>>
-}
-
-/**
- * A Toast displays a brief, temporary notification of actions, errors, or other events in an application.
- */
-export const Toast = /*#__PURE__*/ (forwardRef as forwardRefType)(function Toast<T>(props: ToastProps<T>, ref: ForwardedRef<HTMLDivElement>) {
-  let state = useContext(ToastStateContext)!;
-  let objectRef = useObjectRef(ref);
-  let {toastProps, contentProps, titleProps, descriptionProps, closeButtonProps} = useToast(
-    props,
-    state,
-    objectRef
-  );
-
-  let {focusProps, isFocused, isFocusVisible} = useFocusRing();
-  let renderProps = useRenderProps({
-    ...props,
-    defaultClassName: 'react-aria-Toast',
-    values: {
-      toast: props.toast,
-      isFocused,
-      isFocusVisible
-    }
-  });
-
-  let DOMProps = filterDOMProps(props, {global: true});
-
-  return (
-    <dom.div
-      {...mergeProps(DOMProps, renderProps, toastProps, focusProps)}
-      ref={objectRef}
-      data-focused={isFocused || undefined}
-      data-focus-visible={isFocusVisible || undefined}>
-      <Provider
-        values={[
-          [ToastContentContext, contentProps],
-          [TextContext, {
-            slots: {
-              [DEFAULT_SLOT]: {},
-              title: titleProps,
-              description: descriptionProps
-            }
-          }],
-          [ButtonContext, {
-            slots: {
-              [DEFAULT_SLOT]: {},
-              close: closeButtonProps
-            }
-          }]
-        ]}>
-        {renderProps.children}
-      </Provider>
-    </dom.div>
-  );
-});
-
-export interface ToastContentProps extends HTMLAttributes<HTMLElement>, DOMRenderProps<'div', undefined> {}
-
-export const ToastContentContext = createContext<ContextValue<HTMLAttributes<HTMLElement>, HTMLDivElement>>({});
-
-/**
- * ToastContent wraps the main content of a toast notification.
- */
-export const ToastContent = /*#__PURE__*/ forwardRef(function ToastContent(props: ToastContentProps, ref: ForwardedRef<HTMLDivElement>) {
-  [props, ref] = useContextProps(props, ref, ToastContentContext);
-  return (
-    <dom.div render={props.render} className="react-aria-ToastContent" {...props} ref={ref}>
-      {props.children}
-    </dom.div>
-  );
-});

package/src/ToggleButton.tsx

@@ -1,103 +0,0 @@
-/*
- * Copyright 2022 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 {AriaToggleButtonProps, HoverEvents, mergeProps, useFocusRing, useHover, useToggleButton, useToggleButtonGroupItem} from 'react-aria';
-import {ButtonRenderProps} from './Button';
-import {
-  ClassNameOrFunction,
-  ContextValue,
-  dom,
-  RenderProps,
-  SlotProps,
-  useContextProps,
-  useRenderProps
-} from './utils';
-import {filterDOMProps} from '@react-aria/utils';
-import {forwardRefType, GlobalDOMAttributes, Key} from '@react-types/shared';
-import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
-import {SelectionIndicatorContext} from './SelectionIndicator';
-import {ToggleGroupStateContext} from './ToggleButtonGroup';
-import {ToggleState, useToggleState} from 'react-stately';
-
-export interface ToggleButtonRenderProps extends Omit<ButtonRenderProps, 'isPending'> {
-  /**
-   * Whether the button is currently selected.
-   * @selector [data-selected]
-   */
-  isSelected: boolean,
-  /**
-   * State of the toggle button.
-   */
-  state: ToggleState
-}
-
-export interface ToggleButtonProps extends Omit<AriaToggleButtonProps, 'children' | 'elementType' | 'id'>, HoverEvents, SlotProps, RenderProps<ToggleButtonRenderProps, 'button'>, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {
-  /**
-   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
-   * @default 'react-aria-ToggleButton'
-   */
-  className?: ClassNameOrFunction<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>>({});
-
-/**
- * A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.
- */
-export const ToggleButton = /*#__PURE__*/ (forwardRef as forwardRefType)(function ToggleButton(props: ToggleButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
-  [props, ref] = useContextProps(props, ref, ToggleButtonContext);
-  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, isDisabled});
-  let renderProps = useRenderProps({
-    ...props,
-    id: undefined,
-    values: {isHovered, isPressed, isFocused, isSelected: state.isSelected, isFocusVisible, isDisabled, state},
-    defaultClassName: 'react-aria-ToggleButton'
-  });
-
-  let DOMProps = filterDOMProps(props as any, {global: true});
-  delete DOMProps.id;
-  delete DOMProps.onClick;
-
-  return (
-    <dom.button
-      {...mergeProps(DOMProps, renderProps, buttonProps, focusProps, hoverProps)}
-      ref={ref}
-      slot={props.slot || undefined}
-      data-focused={isFocused || undefined}
-      data-disabled={isDisabled || undefined}
-      data-pressed={isPressed || undefined}
-      data-selected={isSelected || undefined}
-      data-hovered={isHovered || undefined}
-      data-focus-visible={isFocusVisible || undefined}>
-      <SelectionIndicatorContext.Provider value={{isSelected}}>
-        {renderProps.children}
-      </SelectionIndicatorContext.Provider>
-    </dom.button>
-  );
-});

package/src/ToggleButtonGroup.tsx

@@ -1,90 +0,0 @@
-/*
- * 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 {
-  ClassNameOrFunction,
-  ContextValue,
-  dom,
-  RenderProps,
-  SlotProps,
-  useContextProps,
-  useRenderProps
-} from './utils';
-import {filterDOMProps, mergeProps} from '@react-aria/utils';
-import {forwardRefType, GlobalDOMAttributes, Orientation} from '@react-types/shared';
-import React, {createContext, ForwardedRef, forwardRef} from 'react';
-import {SharedElementTransition} from './SharedElementTransition';
-import {ToggleGroupState, useToggleGroupState} from 'react-stately';
-
-export interface ToggleButtonGroupRenderProps {
-  /**
-   * The orientation of the toggle button group.
-   * @selector [data-orientation="horizontal | vertical"]
-   */
-  orientation: Orientation,
-  /**
-   * 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, GlobalDOMAttributes<HTMLDivElement> {
-  /**
-   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
-   * @default 'react-aria-ToggleButtonGroup'
-   */
-  className?: ClassNameOrFunction<ToggleButtonGroupRenderProps>
-}
-
-export const ToggleButtonGroupContext = createContext<ContextValue<ToggleButtonGroupProps, HTMLDivElement>>({});
-export const ToggleGroupStateContext = createContext<ToggleGroupState | null>(null);
-
-/**
- * A toggle button group allows a user to toggle multiple options, with single or multiple selection.
- */
-export const ToggleButtonGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(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: {
-      orientation: props.orientation || 'horizontal',
-      isDisabled: state.isDisabled,
-      state
-    },
-    defaultClassName: 'react-aria-ToggleButtonGroup'
-  });
-
-  let DOMProps = filterDOMProps(props, {global: true});
-
-  return (
-    <dom.div
-      {...mergeProps(DOMProps, renderProps, groupProps)}
-      ref={ref}
-      slot={props.slot || undefined}
-      data-orientation={props.orientation || 'horizontal'}
-      data-disabled={props.isDisabled || undefined}>
-      <ToggleGroupStateContext.Provider value={state}>
-        <SharedElementTransition>
-          {renderProps.children}
-        </SharedElementTransition>
-      </ToggleGroupStateContext.Provider>
-    </dom.div>
-  );
-});

package/src/Toolbar.tsx

@@ -1,69 +0,0 @@
-/*
- * Copyright 2023 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 {AriaToolbarProps, useToolbar} from '@react-aria/toolbar';
-import {
-  ClassNameOrFunction,
-  ContextValue,
-  dom,
-  RenderProps,
-  SlotProps,
-  useContextProps,
-  useRenderProps
-} from './utils';
-import {filterDOMProps, mergeProps} from '@react-aria/utils';
-import {forwardRefType, GlobalDOMAttributes, Orientation} from '@react-types/shared';
-import React, {createContext, ForwardedRef, forwardRef} from 'react';
-
-export interface ToolbarRenderProps {
-  /**
-   * The current orientation of the toolbar.
-   * @selector [data-orientation]
-   */
-  orientation: Orientation
-}
-
-export interface ToolbarProps extends AriaToolbarProps, SlotProps, RenderProps<ToolbarRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
-  /**
-   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
-   * @default 'react-aria-Toolbar'
-   */
-  className?: ClassNameOrFunction<ToolbarRenderProps>
-}
-
-export const ToolbarContext = createContext<ContextValue<ToolbarProps, HTMLDivElement>>({});
-
-/**
- * A toolbar is a container for a set of interactive controls, such as buttons, dropdown menus, or checkboxes,
- * with arrow key navigation.
- */
-export const Toolbar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Toolbar(props: ToolbarProps, ref: ForwardedRef<HTMLDivElement>) {
-  [props, ref] = useContextProps(props, ref, ToolbarContext);
-  let {toolbarProps} = useToolbar(props, ref);
-  let renderProps = useRenderProps({
-    ...props,
-    values: {orientation: props.orientation || 'horizontal'},
-    defaultClassName: 'react-aria-Toolbar'
-  });
-  let DOMProps = filterDOMProps(props, {global: true});
-  delete DOMProps.id;
-
-  return (
-    <dom.div
-      {...mergeProps(DOMProps, renderProps, toolbarProps)}
-      ref={ref}
-      slot={props.slot || undefined}
-      data-orientation={props.orientation || 'horizontal'}>
-      {renderProps.children}
-    </dom.div>
-  );
-});