@depup/react-aria-components 1.16.0-depup.0

package/src/Toast.tsx

@@ -0,0 +1,248 @@
+/*
+ * 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

@@ -0,0 +1,103 @@
+/*
+ * 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

@@ -0,0 +1,90 @@
+/*
+ * 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

@@ -0,0 +1,69 @@
+/*
+ * 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>
+  );
+});