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

package/src/SharedElementTransition.tsx

@@ -0,0 +1,186 @@
+/*
+ * 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 {dom, RenderProps, useRenderProps} from './utils';
+import {flushSync} from 'react-dom';
+import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, ReactNode, RefObject, useContext, useRef, useState} from 'react';
+import {useLayoutEffect} from '@react-aria/utils';
+import {useObjectRef} from 'react-aria';
+
+interface Snapshot {
+  rect: DOMRect,
+  style: [string, string][]
+}
+
+const SharedElementContext = createContext<RefObject<{[name: string]: Snapshot}> | null>(null);
+
+export interface SharedElementTransitionProps {
+  children: ReactNode
+}
+
+/**
+ * A scope for SharedElements, which animate between parents.
+ */
+export function SharedElementTransition(props: SharedElementTransitionProps) {
+  let ref = useRef({});
+  return (
+    <SharedElementContext.Provider value={ref}>
+      {props.children}
+    </SharedElementContext.Provider>
+  );
+}
+
+export interface SharedElementRenderProps {
+  /**
+   * Whether the element is currently entering.
+   * @selector [data-entering]
+   */
+  isEntering: boolean,
+  /**
+   * Whether the element is currently exiting.
+   * @selector [data-exiting]
+   */
+  isExiting: boolean
+}
+
+export interface SharedElementPropsBase extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style'>, RenderProps<SharedElementRenderProps> {}
+
+export interface SharedElementProps extends SharedElementPropsBase {
+  name: string,
+  isVisible?: boolean
+}
+
+/**
+ * An element that animates between its old and new position when moving between parents.
+ */
+export const SharedElement = forwardRef(function SharedElement(props: SharedElementProps, ref: ForwardedRef<HTMLDivElement>) {
+  let {name, isVisible = true, children, className, style, render, ...divProps} = props;
+  let [state, setState] = useState(isVisible ? 'visible' : 'hidden');
+  let scopeRef = useContext(SharedElementContext);
+  if (!scopeRef) {
+    throw new Error('<SharedElement> must be rendered inside a <SharedElementTransition>');
+  }
+
+  if (isVisible && state === 'hidden') {
+    setState('visible');
+  }
+
+  ref = useObjectRef(ref);
+  useLayoutEffect(() => {
+    let element = ref.current;
+    let scope = scopeRef.current;
+    let prevSnapshot = scope[name];
+    let frame: number | null = null;
+
+    if (element && isVisible && prevSnapshot) {
+      // Element is transitioning from a previous instance.
+      setState('visible');
+      let animations = element.getAnimations();
+
+      // Set properties to animate from.
+      let values = prevSnapshot.style.map(([property, prevValue]) => {
+        let value = element.style[property];
+        if (property === 'translate') {
+          let prevRect = prevSnapshot.rect;
+          let currentItem = element.getBoundingClientRect();
+          let deltaX = prevRect.left - currentItem?.left;
+          let deltaY = prevRect.top - currentItem?.top;
+          element.style.translate = `${deltaX}px ${deltaY}px`;
+        } else {
+          element.style[property] = prevValue;
+        }
+        return [property, value];
+      });
+
+      // Cancel any new animations triggered by these properties.
+      for (let a of element.getAnimations()) {
+        if (!animations.includes(a)) {
+          a.cancel();
+        }
+      }
+
+      // Remove overrides after one frame to animate to the current values.
+      frame = requestAnimationFrame(() => {
+        frame = null;
+        for (let [property, value] of values) {
+          element.style[property] = value;
+        }
+      });
+
+      delete scope[name];
+    } else if (element && isVisible && !prevSnapshot) {
+      // No previous instance exists, apply the entering state.
+      queueMicrotask(() => flushSync(() => setState('entering')));
+      frame = requestAnimationFrame(() => {
+        frame = null;
+        setState('visible');
+      });
+    } else if (element && !isVisible) {
+      // Wait until layout effects finish, and check if a snapshot still exists.
+      // If so, no new SharedElement consumed it, so enter the exiting state.
+      queueMicrotask(() => {
+        if (scope[name]) {
+          delete scope[name];
+          flushSync(() => setState('exiting'));
+          Promise.all(element.getAnimations().map(a => a.finished))
+            .then(() => setState('hidden'))
+            .catch(() => {});
+        } else {
+          // Snapshot was consumed by another instance, unmount.
+          setState('hidden');
+        }
+      });
+    }
+
+    return () => {
+      if (frame != null) {
+        cancelAnimationFrame(frame);
+      }
+
+      if (element && element.isConnected && !element.hasAttribute('data-exiting')) {
+        // On unmount, store a snapshot of the rectangle and computed style for transitioning properties.
+        let style = window.getComputedStyle(element);
+        if (style.transitionProperty !== 'none') {
+          let transitionProperty = style.transitionProperty.split(/\s*,\s*/);
+          scope[name] = {
+            rect: element.getBoundingClientRect(),
+            style: transitionProperty.map(p => [p, style[p]])
+          };
+        }
+      }
+    };
+  }, [ref, scopeRef, name, isVisible]);
+
+  let renderProps = useRenderProps({
+    children,
+    className,
+    style,
+    render,
+    values: {
+      isEntering: state === 'entering',
+      isExiting: state === 'exiting'
+    }
+  });
+
+  if (state === 'hidden') {
+    return null;
+  }
+
+  return (
+    <dom.div
+      {...divProps}
+      {...renderProps}
+      ref={ref}
+      data-entering={state === 'entering' || undefined}
+      data-exiting={state === 'exiting' || undefined} />
+  );
+});

package/src/Slider.tsx

@@ -0,0 +1,310 @@
+/*
+ * 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 {AriaSliderProps, AriaSliderThumbProps, HoverEvents, mergeProps, Orientation, useFocusRing, useHover, useNumberFormatter, useSlider, useSliderThumb, VisuallyHidden} from 'react-aria';
+import {
+  ClassNameOrFunction,
+  ContextValue,
+  dom,
+  Provider,
+  RenderProps,
+  SlotProps,
+  useContextProps,
+  useRenderProps,
+  useSlot,
+  useSlottedContext
+} from './utils';
+import {filterDOMProps} from '@react-aria/utils';
+import {forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
+import {LabelContext} from './Label';
+import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, OutputHTMLAttributes, useContext, useRef} from 'react';
+import {SliderState, useSliderState} from 'react-stately';
+
+export interface SliderProps<T = number | number[]> extends Omit<AriaSliderProps<T>, 'label'>, RenderProps<SliderRenderProps>, 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-Slider'
+   */
+  className?: ClassNameOrFunction<SliderRenderProps>,
+  /**
+   * The display format of the value label.
+   */
+  formatOptions?: Intl.NumberFormatOptions
+}
+
+export const SliderContext = createContext<ContextValue<SliderProps, HTMLDivElement>>(null);
+export const SliderStateContext = createContext<SliderState | null>(null);
+export const SliderTrackContext = createContext<ContextValue<SliderTrackContextValue, HTMLDivElement>>(null);
+export const SliderOutputContext = createContext<ContextValue<SliderOutputContextValue, HTMLOutputElement>>(null);
+
+export interface SliderRenderProps {
+  /**
+   * The orientation of the slider.
+   * @selector [data-orientation="horizontal | vertical"]
+   */
+  orientation: Orientation,
+  /**
+   * Whether the slider is disabled.
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean,
+  /**
+   * State of the slider.
+   */
+  state: SliderState
+}
+
+/**
+ * A slider allows a user to select one or more values within a range.
+ */
+export const Slider = /*#__PURE__*/ (forwardRef as forwardRefType)(function Slider<T extends number | number[]>(props: SliderProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, SliderContext);
+  let trackRef = useRef<HTMLDivElement>(null);
+  let numberFormatter = useNumberFormatter(props.formatOptions);
+  let state = useSliderState({...props, numberFormatter});
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
+  let {
+    groupProps,
+    trackProps,
+    labelProps,
+    outputProps
+  } = useSlider({...props, label}, state, trackRef);
+
+  let renderProps = useRenderProps({
+    ...props,
+    values: {
+      orientation: state.orientation,
+      isDisabled: state.isDisabled,
+      state
+    },
+    defaultClassName: 'react-aria-Slider'
+  });
+
+  let DOMProps = filterDOMProps(props, {global: true});
+  delete DOMProps.id;
+
+  return (
+    <Provider
+      values={[
+        [SliderStateContext, state],
+        [SliderTrackContext, {...trackProps, ref: trackRef}],
+        [SliderOutputContext, outputProps],
+        [LabelContext, {...labelProps, ref: labelRef}]
+      ]}>
+      <dom.div
+        {...mergeProps(DOMProps, renderProps, groupProps)}
+        ref={ref}
+        slot={props.slot || undefined}
+        data-orientation={state.orientation}
+        data-disabled={state.isDisabled || undefined} />
+    </Provider>
+  );
+});
+
+export interface SliderOutputProps extends RenderProps<SliderRenderProps, 'output'>, GlobalDOMAttributes<HTMLOutputElement> {
+  /**
+   * 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-SliderOutput'
+   */
+  className?: ClassNameOrFunction<SliderRenderProps>
+}
+interface SliderOutputContextValue extends Omit<OutputHTMLAttributes<HTMLOutputElement>, 'children' | 'className' | 'style'>, SliderOutputProps {}
+
+/**
+ * A slider output displays the current value of a slider as text.
+ */
+export const SliderOutput = /*#__PURE__*/ (forwardRef as forwardRefType)(function SliderOutput(props: SliderOutputProps, ref: ForwardedRef<HTMLOutputElement>) {
+  [props, ref] = useContextProps(props, ref, SliderOutputContext);
+  let {children, style, className, render, ...otherProps} = props;
+  let state = useContext(SliderStateContext)!;
+  let renderProps = useRenderProps({
+    className,
+    style,
+    children,
+    render,
+    defaultChildren: state.getThumbValueLabel(0),
+    defaultClassName: 'react-aria-SliderOutput',
+    values: {
+      orientation: state.orientation,
+      isDisabled: state.isDisabled,
+      state
+    }
+  });
+
+  return (
+    <dom.output
+      {...otherProps}
+      {...renderProps}
+      ref={ref}
+      data-orientation={state.orientation || undefined}
+      data-disabled={state.isDisabled || undefined} />
+  );
+});
+
+export interface SliderTrackRenderProps extends SliderRenderProps {
+  /**
+   * Whether the slider track is currently hovered with a mouse.
+   * @selector [data-hovered]
+   */
+  isHovered: boolean
+}
+
+export interface SliderTrackProps extends HoverEvents, RenderProps<SliderTrackRenderProps>, 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-SliderTrack'
+   */
+  className?: ClassNameOrFunction<SliderTrackRenderProps>
+}
+interface SliderTrackContextValue extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style'>, SliderTrackProps {}
+
+/**
+ * A slider track is a container for one or more slider thumbs.
+ */
+export const SliderTrack = /*#__PURE__*/ (forwardRef as forwardRefType)(function SliderTrack(props: SliderTrackProps, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, SliderTrackContext);
+  let state = useContext(SliderStateContext)!;
+  let {onHoverStart, onHoverEnd, onHoverChange, ...otherProps} = props;
+  let {hoverProps, isHovered} = useHover({onHoverStart, onHoverEnd, onHoverChange});
+  let renderProps = useRenderProps({
+    ...props,
+    defaultClassName: 'react-aria-SliderTrack',
+    values: {
+      orientation: state.orientation,
+      isDisabled: state.isDisabled,
+      isHovered,
+      state
+    }
+  });
+
+  return (
+    <dom.div
+      {...mergeProps(otherProps, hoverProps)}
+      {...renderProps}
+      ref={ref}
+      data-hovered={isHovered || undefined}
+      data-orientation={state.orientation || undefined}
+      data-disabled={state.isDisabled || undefined} />
+  );
+});
+
+export interface SliderThumbRenderProps {
+  /**
+   * State of the slider.
+   */
+  state: SliderState,
+  /**
+   * Whether this thumb is currently being dragged.
+   * @selector [data-dragging]
+   */
+  isDragging: boolean,
+  /**
+   * Whether the thumb is currently hovered with a mouse.
+   * @selector [data-hovered]
+   */
+  isHovered: boolean,
+  /**
+   * Whether the thumb is currently focused.
+   * @selector [data-focused]
+   */
+  isFocused: boolean,
+  /**
+   * Whether the thumb is keyboard focused.
+   * @selector [data-focus-visible]
+   */
+  isFocusVisible: boolean,
+  /**
+   * Whether the thumb is disabled.
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean
+}
+
+export interface SliderThumbProps extends Omit<AriaSliderThumbProps, 'label' | 'validationState'>, HoverEvents, RenderProps<SliderThumbRenderProps>, 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-SliderThumb'
+   */
+  className?: ClassNameOrFunction<SliderThumbRenderProps>,
+  /**
+   * A ref for the HTML input element.
+   */
+  inputRef?: RefObject<HTMLInputElement | null>
+}
+
+/**
+ * A slider thumb represents an individual value that the user can adjust within a slider track.
+ */
+export const SliderThumb = /*#__PURE__*/ (forwardRef as forwardRefType)(function SliderThumb(props: SliderThumbProps, ref: ForwardedRef<HTMLDivElement>) {
+  let {
+    inputRef: userInputRef = null
+  } = props;
+  let state = useContext(SliderStateContext)!;
+  let {ref: trackRef} = useSlottedContext(SliderTrackContext)!;
+  let {index = 0} = props;
+  let defaultInputRef = useRef<HTMLInputElement>(null);
+  let inputRef = userInputRef || defaultInputRef;
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
+  let {thumbProps, inputProps, labelProps, isDragging, isFocused, isDisabled} = useSliderThumb({
+    ...props,
+    index,
+    trackRef: trackRef as RefObject<HTMLDivElement | null>,
+    inputRef,
+    label
+  }, state);
+
+  let {focusProps, isFocusVisible} = useFocusRing();
+  let {hoverProps, isHovered} = useHover(props);
+
+  let renderProps = useRenderProps({
+    ...props,
+    defaultClassName: 'react-aria-SliderThumb',
+    values: {
+      state,
+      isHovered,
+      isDragging,
+      isFocused,
+      isFocusVisible,
+      isDisabled
+    }
+  });
+
+  let DOMProps = filterDOMProps(props, {global: true});
+  delete DOMProps.id;
+
+  return (
+    <dom.div
+      {...mergeProps(DOMProps, thumbProps, hoverProps)}
+      {...renderProps}
+      ref={ref}
+      style={{...thumbProps.style, ...renderProps.style}}
+      data-hovered={isHovered || undefined}
+      data-dragging={isDragging || undefined}
+      data-focused={isFocused || undefined}
+      data-focus-visible={isFocusVisible || undefined}
+      data-disabled={isDisabled || undefined}>
+      <VisuallyHidden>
+        <input ref={inputRef} {...mergeProps(inputProps, focusProps)} />
+      </VisuallyHidden>
+      <Provider
+        values={[
+          [LabelContext, {...labelProps, ref: labelRef}]
+        ]}>
+        {renderProps.children}
+      </Provider>
+    </dom.div>
+  );
+});

package/src/Switch.tsx

@@ -0,0 +1,146 @@
+/*
+ * 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 {AriaSwitchProps, HoverEvents, mergeProps, useFocusRing, useHover, useSwitch, VisuallyHidden} from 'react-aria';
+import {
+  ClassNameOrFunction,
+  ContextValue,
+  dom,
+  removeDataAttributes,
+  RenderProps,
+  SlotProps,
+  useContextProps,
+  useRenderProps
+} from './utils';
+import {filterDOMProps, mergeRefs, useObjectRef} from '@react-aria/utils';
+import {forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
+import React, {createContext, ForwardedRef, forwardRef} from 'react';
+import {ToggleState, useToggleState} from 'react-stately';
+
+export interface SwitchProps extends Omit<AriaSwitchProps, 'children'>, HoverEvents, RenderProps<SwitchRenderProps, 'label'>, SlotProps, Omit<GlobalDOMAttributes<HTMLLabelElement>, '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-Switch'
+  */
+ className?: ClassNameOrFunction<SwitchRenderProps>,
+ /**
+  * A ref for the HTML input element.
+  */
+ inputRef?: RefObject<HTMLInputElement | null>
+}
+
+export interface SwitchRenderProps {
+  /**
+   * Whether the switch is selected.
+   * @selector [data-selected]
+   */
+  isSelected: boolean,
+  /**
+   * Whether the switch is currently hovered with a mouse.
+   * @selector [data-hovered]
+   */
+  isHovered: boolean,
+  /**
+   * Whether the switch is currently in a pressed state.
+   * @selector [data-pressed]
+   */
+  isPressed: boolean,
+  /**
+   * Whether the switch is focused, either via a mouse or keyboard.
+   * @selector [data-focused]
+   */
+  isFocused: boolean,
+  /**
+   * Whether the switch is keyboard focused.
+   * @selector [data-focus-visible]
+   */
+  isFocusVisible: boolean,
+  /**
+   * Whether the switch is disabled.
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean,
+  /**
+   * Whether the switch is read only.
+   * @selector [data-readonly]
+   */
+  isReadOnly: boolean,
+  /**
+   * State of the switch.
+   */
+  state: ToggleState
+}
+
+export const SwitchContext = createContext<ContextValue<SwitchProps, HTMLLabelElement>>(null);
+
+/**
+ * A switch allows a user to turn a setting on or off.
+ */
+export const Switch = /*#__PURE__*/ (forwardRef as forwardRefType)(function Switch(props: SwitchProps, ref: ForwardedRef<HTMLLabelElement>) {
+  let {
+    inputRef: userProvidedInputRef = null,
+    ...otherProps
+  } = props;
+  [props, ref] = useContextProps(otherProps, ref, SwitchContext);
+  let inputRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef !== undefined ? props.inputRef : null));
+  let state = useToggleState(props);
+  let {labelProps, inputProps, isSelected, isDisabled, isReadOnly, isPressed} = useSwitch({
+    ...removeDataAttributes(props),
+    // ReactNode type doesn't allow function children.
+    children: typeof props.children === 'function' ? true : props.children
+  }, state, inputRef);
+  let {isFocused, isFocusVisible, focusProps} = useFocusRing();
+  let isInteractionDisabled = props.isDisabled || props.isReadOnly;
+
+  let {hoverProps, isHovered} = useHover({
+    ...props,
+    isDisabled: isInteractionDisabled
+  });
+
+  let renderProps = useRenderProps({
+    ...props,
+    defaultClassName: 'react-aria-Switch',
+    values: {
+      isSelected,
+      isPressed,
+      isHovered,
+      isFocused,
+      isFocusVisible,
+      isDisabled,
+      isReadOnly,
+      state
+    }
+  });
+
+  let DOMProps = filterDOMProps(props, {global: true});
+  delete DOMProps.id;
+  delete DOMProps.onClick;
+
+  return (
+    <dom.label
+      {...mergeProps(DOMProps, labelProps, hoverProps, renderProps)}
+      ref={ref}
+      slot={props.slot || undefined}
+      data-selected={isSelected || undefined}
+      data-pressed={isPressed || undefined}
+      data-hovered={isHovered || undefined}
+      data-focused={isFocused || undefined}
+      data-focus-visible={isFocusVisible || undefined}
+      data-disabled={isDisabled || undefined}
+      data-readonly={isReadOnly || undefined}>
+      <VisuallyHidden elementType="span">
+        <input {...mergeProps(inputProps, focusProps)} ref={inputRef} />
+      </VisuallyHidden>
+      {renderProps.children}
+    </dom.label>
+  );
+});