react-aria-components 1.16.0 → 1.18.0

package/src/Modal.tsx

@@ -1,262 +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 {AriaModalOverlayProps, DismissButton, Overlay, useIsSSR, useModalOverlay} from 'react-aria';
-import {
-  ClassNameOrFunction,
-  ContextValue,
-  dom,
-  Provider,
-  RenderProps,
-  SlotProps,
-  useContextProps,
-  useRenderProps
-} from './utils';
-import {DOMAttributes, forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
-import {filterDOMProps, isScrollable, mergeProps, mergeRefs, useEnterAnimation, useExitAnimation, useObjectRef, useViewportSize} from '@react-aria/utils';
-import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately';
-import {OverlayTriggerStateContext} from './Dialog';
-import React, {createContext, ForwardedRef, forwardRef, useContext, useMemo, useRef} from 'react';
-
-export interface ModalOverlayProps extends AriaModalOverlayProps, OverlayTriggerProps, RenderProps<ModalRenderProps>, 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-ModalOverlay'
-   */
-  className?: ClassNameOrFunction<ModalRenderProps>,
-  /**
-   * Whether the modal is currently performing an entry animation.
-   */
-  isEntering?: boolean,
-  /**
-   * Whether the modal is currently performing an exit animation.
-   */
-  isExiting?: boolean,
-  /**
-   * The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to.
-   * @default document.body
-   * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.
-   */
-  UNSTABLE_portalContainer?: Element
-}
-
-interface InternalModalContextValue {
-  modalProps: DOMAttributes,
-  modalRef: RefObject<HTMLDivElement | null>,
-  isExiting: boolean,
-  isDismissable?: boolean
-}
-
-export const ModalContext = createContext<ContextValue<ModalOverlayProps, HTMLDivElement>>(null);
-const InternalModalContext = createContext<InternalModalContextValue | null>(null);
-
-export interface ModalRenderProps {
-  /**
-   * Whether the modal is currently entering. Use this to apply animations.
-   * @selector [data-entering]
-   */
-  isEntering: boolean,
-  /**
-   * Whether the modal is currently exiting. Use this to apply animations.
-   * @selector [data-exiting]
-   */
-  isExiting: boolean,
-  /**
-   * State of the modal.
-   */
-  state: OverlayTriggerState
-}
-
-/**
- * A modal is an overlay element which blocks interaction with elements outside it.
- */
-export const Modal = /*#__PURE__*/ (forwardRef as forwardRefType)(function Modal(props: ModalOverlayProps, ref: ForwardedRef<HTMLDivElement>) {
-  let ctx = useContext(InternalModalContext);
-
-  if (ctx) {
-    if (process.env.NODE_ENV !== 'production' && (props.onOpenChange || props.defaultOpen !== undefined || props.isOpen !== undefined)) {
-      // create a list of props that are passed in but not allowed when using an external ModalOverlay
-      const invalidSet = new Set(['isDismissable', 'isKeyboardDismissDisabled', 'isOpen', 'defaultOpen', 'onOpenChange', 'isEntering', 'isExiting', 'UNSTABLE_portalContainer', 'shouldCloseOnInteractOutside']);
-      const invalidProps = Object.keys(props).filter(key => invalidSet.has(key));
-      console.warn(`This modal is already wrapped in a ModalOverlay, props [${invalidProps.join(', ')}] should be placed on the ModalOverlay instead.`);
-    }
-    return <ModalContent {...props} modalRef={ref}>{props.children}</ModalContent>;
-  }
-
-  let {
-    isDismissable,
-    isKeyboardDismissDisabled,
-    isOpen,
-    defaultOpen,
-    onOpenChange,
-    children,
-    isEntering,
-    isExiting,
-    UNSTABLE_portalContainer,
-    shouldCloseOnInteractOutside,
-    ...otherProps
-  } = props;
-
-  return (
-    <ModalOverlay
-      isDismissable={isDismissable}
-      isKeyboardDismissDisabled={isKeyboardDismissDisabled}
-      isOpen={isOpen}
-      defaultOpen={defaultOpen}
-      onOpenChange={onOpenChange}
-      isEntering={isEntering}
-      isExiting={isExiting}
-      UNSTABLE_portalContainer={UNSTABLE_portalContainer}
-      shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}>
-      <ModalContent {...otherProps} modalRef={ref}>
-        {children}
-      </ModalContent>
-    </ModalOverlay>
-  );
-});
-
-interface ModalOverlayInnerProps extends ModalOverlayProps {
-  overlayRef: RefObject<HTMLDivElement | null>,
-  modalRef: RefObject<HTMLDivElement | null>,
-  state: OverlayTriggerState,
-  isExiting: boolean
-}
-
-function ModalOverlayWithForwardRef(props: ModalOverlayProps, ref: ForwardedRef<HTMLDivElement>) {
-  [props, ref] = useContextProps(props, ref, ModalContext);
-  let contextState = useContext(OverlayTriggerStateContext);
-  let localState = useOverlayTriggerState(props);
-  let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
-  if (state === contextState) {
-    if (process.env.NODE_ENV !== 'production' && (props.onOpenChange || props.defaultOpen !== undefined || props.isOpen !== undefined)) {
-      console.warn('This modals state is controlled by a trigger, place onOpenChange on the trigger instead.');
-    }
-  }
-
-  let objectRef = useObjectRef(ref);
-  let modalRef = useRef<HTMLDivElement>(null);
-  let isOverlayExiting = useExitAnimation(objectRef, state.isOpen);
-  let isModalExiting = useExitAnimation(modalRef, state.isOpen);
-  let isExiting = isOverlayExiting || isModalExiting || props.isExiting || false;
-  let isSSR = useIsSSR();
-
-  if ((!state.isOpen && !isExiting) || isSSR) {
-    return null;
-  }
-
-  return (
-    <ModalOverlayInner
-      {...props}
-      state={state}
-      isExiting={isExiting}
-      overlayRef={objectRef}
-      modalRef={modalRef} />
-  );
-}
-
-/**
- * A ModalOverlay is a wrapper for a Modal which allows customizing the backdrop element.
- */
-export const ModalOverlay = /*#__PURE__*/ (forwardRef as forwardRefType)(ModalOverlayWithForwardRef);
-
-function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInnerProps) {
-  let modalRef = props.modalRef;
-  let {state} = props;
-  let {modalProps, underlayProps} = useModalOverlay(props, state, modalRef);
-
-  let entering = useEnterAnimation(props.overlayRef) || props.isEntering || false;
-  let renderProps = useRenderProps({
-    ...props,
-    defaultClassName: 'react-aria-ModalOverlay',
-    values: {
-      isEntering: entering,
-      isExiting: props.isExiting,
-      state
-    }
-  });
-
-  let viewport = useViewportSize();
-  let pageHeight: number | undefined = undefined;
-  if (typeof document !== 'undefined') {
-    let scrollingElement = isScrollable(document.body) ? document.body : document.scrollingElement || document.documentElement;
-    // Prevent Firefox from adding scrollbars when the page has a fractional height.
-    let fractionalHeightDifference = scrollingElement.getBoundingClientRect().height % 1;
-    pageHeight = scrollingElement.scrollHeight - fractionalHeightDifference;
-  }
-
-  let style = {
-    ...renderProps.style,
-    '--visual-viewport-height': viewport.height + 'px',
-    '--page-height': pageHeight !== undefined ? pageHeight + 'px' : undefined
-  };
-
-  return (
-    <Overlay isExiting={props.isExiting} portalContainer={UNSTABLE_portalContainer}>
-      <dom.div
-        {...mergeProps(filterDOMProps(props, {global: true}), underlayProps)}
-        {...renderProps}
-        style={style}
-        ref={props.overlayRef}
-        data-entering={entering || undefined}
-        data-exiting={props.isExiting || undefined}>
-        <Provider
-          values={[
-            [InternalModalContext, {modalProps, modalRef, isExiting: props.isExiting, isDismissable: props.isDismissable}],
-            [OverlayTriggerStateContext, state]
-          ]}>
-          {renderProps.children}
-        </Provider>
-      </dom.div>
-    </Overlay>
-  );
-}
-
-interface ModalContentProps extends RenderProps<ModalRenderProps>, 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-ModalContent'
-   */
-  className?: ClassNameOrFunction<ModalRenderProps>,
-  modalRef: ForwardedRef<HTMLDivElement>
-}
-
-function ModalContent(props: ModalContentProps) {
-  let {modalProps, modalRef, isExiting, isDismissable} = useContext(InternalModalContext)!;
-  let state = useContext(OverlayTriggerStateContext)!;
-  let mergedRefs = useMemo(() => mergeRefs(props.modalRef, modalRef), [props.modalRef, modalRef]);
-
-  let ref = useObjectRef(mergedRefs);
-  let entering = useEnterAnimation(ref);
-  let renderProps = useRenderProps({
-    ...props,
-    defaultClassName: 'react-aria-Modal',
-    values: {
-      isEntering: entering,
-      isExiting,
-      state
-    }
-  });
-
-  return (
-    <dom.div
-      {...mergeProps(filterDOMProps(props, {global: true}), modalProps)}
-      {...renderProps}
-      ref={ref}
-      data-entering={entering || undefined}
-      data-exiting={isExiting || undefined}>
-      {isDismissable &&
-        <DismissButton onDismiss={state.close} />
-      }
-      {renderProps.children}
-    </dom.div>
-  );
-}

package/src/NumberField.tsx

@@ -1,152 +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 {AriaNumberFieldProps, useLocale, useNumberField} from 'react-aria';
-import {ButtonContext} from './Button';
-import {
-  ClassNameOrFunction,
-  ContextValue,
-  dom,
-  Provider,
-  RACValidation,
-  removeDataAttributes,
-  RenderProps,
-  SlotProps,
-  useContextProps,
-  useRenderProps,
-  useSlot,
-  useSlottedContext
-} from './utils';
-import {FieldErrorContext} from './FieldError';
-import {filterDOMProps} from '@react-aria/utils';
-import {FormContext} from './Form';
-import {forwardRefType, GlobalDOMAttributes, InputDOMProps} from '@react-types/shared';
-import {GroupContext} from './Group';
-import {InputContext} from './Input';
-import {LabelContext} from './Label';
-import {NumberFieldState, useNumberFieldState} from 'react-stately';
-import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
-import {TextContext} from './Text';
-
-export interface NumberFieldRenderProps {
-  /**
-   * Whether the number field is disabled.
-   * @selector [data-disabled]
-   */
-  isDisabled: boolean,
-  /**
-   * Whether the number field is invalid.
-   * @selector [data-invalid]
-   */
-  isInvalid: boolean,
-  /**
-   * Whether the number field is required.
-   * @selector [data-required]
-   */
-  isRequired: boolean,
-  /**
-   * State of the number field.
-   */
-  state: NumberFieldState
-}
-
-export interface NumberFieldProps extends Omit<AriaNumberFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, InputDOMProps, RenderProps<NumberFieldRenderProps>, 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-NumberField'
-   */
-  className?: ClassNameOrFunction<NumberFieldRenderProps>
-}
-
-export const NumberFieldContext = createContext<ContextValue<NumberFieldProps, HTMLDivElement>>(null);
-export const NumberFieldStateContext = createContext<NumberFieldState | null>(null);
-
-/**
- * A number field allows a user to enter a number, and increment or decrement the value using stepper buttons.
- */
-export const NumberField = /*#__PURE__*/ (forwardRef as forwardRefType)(function NumberField(props: NumberFieldProps, ref: ForwardedRef<HTMLDivElement>) {
-  [props, ref] = useContextProps(props, ref, NumberFieldContext);
-  let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
-  let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
-  let {locale} = useLocale();
-  let state = useNumberFieldState({
-    ...props,
-    locale,
-    validationBehavior
-  });
-
-  let inputRef = useRef<HTMLInputElement>(null);
-  let [labelRef, label] = useSlot(
-    !props['aria-label'] && !props['aria-labelledby']
-  );
-  let {
-    labelProps,
-    groupProps,
-    inputProps,
-    incrementButtonProps,
-    decrementButtonProps,
-    descriptionProps,
-    errorMessageProps,
-    ...validation
-  } = useNumberField({
-    ...removeDataAttributes(props),
-    label,
-    validationBehavior
-  }, state, inputRef);
-
-  let renderProps = useRenderProps({
-    ...props,
-    values: {
-      state,
-      isDisabled: props.isDisabled || false,
-      isInvalid: validation.isInvalid || false,
-      isRequired: props.isRequired || false
-    },
-    defaultClassName: 'react-aria-NumberField'
-  });
-
-  let DOMProps = filterDOMProps(props, {global: true});
-  delete DOMProps.id;
-
-  return (
-    <Provider
-      values={[
-        [NumberFieldStateContext, state],
-        [GroupContext, groupProps],
-        [InputContext, {...inputProps, ref: inputRef}],
-        [LabelContext, {...labelProps, ref: labelRef}],
-        [ButtonContext, {
-          slots: {
-            increment: incrementButtonProps,
-            decrement: decrementButtonProps
-          }
-        }],
-        [TextContext, {
-          slots: {
-            description: descriptionProps,
-            errorMessage: errorMessageProps
-          }
-        }],
-        [FieldErrorContext, validation]
-      ]}>
-      <dom.div
-        {...DOMProps}
-        {...renderProps}
-        ref={ref}
-        slot={props.slot || undefined}
-        data-disabled={props.isDisabled || undefined}
-        data-required={props.isRequired || undefined}
-        data-invalid={validation.isInvalid || undefined} />
-      {props.name && <input type="hidden" name={props.name} form={props.form} value={isNaN(state.numberValue) ? '' : state.numberValue} disabled={props.isDisabled || undefined} />}
-    </Provider>
-  );
-});

package/src/OverlayArrow.tsx

@@ -1,91 +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 {
-  ClassNameOrFunction,
-  ContextValue,
-  dom,
-  RenderProps,
-  useContextProps,
-  useRenderProps
-} from './utils';
-import {DOMProps, forwardRefType} from '@react-types/shared';
-import {filterDOMProps} from '@react-aria/utils';
-import {PlacementAxis} from 'react-aria';
-import React, {createContext, CSSProperties, ForwardedRef, forwardRef, HTMLAttributes} from 'react';
-
-interface OverlayArrowContextValue extends OverlayArrowProps {
-  placement: PlacementAxis | null
-}
-
-export const OverlayArrowContext = createContext<ContextValue<OverlayArrowContextValue, HTMLDivElement>>({
-  placement: 'bottom'
-});
-
-export interface OverlayArrowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'render' | 'children'>, RenderProps<OverlayArrowRenderProps>, DOMProps {
-  /**
-   * 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-OverlayArrow'
-   */
-  className?: ClassNameOrFunction<OverlayArrowRenderProps>
-}
-
-export interface OverlayArrowRenderProps {
-  /**
-   * The placement of the overlay relative to the trigger.
-   * @selector [data-placement="left | right | top | bottom"]
-   */
-  placement: PlacementAxis | null
-}
-
-/**
- * An OverlayArrow renders a custom arrow element relative to an overlay element
- * such as a popover or tooltip such that it aligns with a trigger element.
- */
-export const OverlayArrow = /*#__PURE__*/ (forwardRef as forwardRefType)(function OverlayArrow(props: OverlayArrowProps, ref: ForwardedRef<HTMLDivElement>) {
-  [props, ref] = useContextProps(props, ref, OverlayArrowContext);
-  let placement = (props as OverlayArrowContextValue).placement;
-  let style: CSSProperties = {
-    position: 'absolute',
-    transform: placement === 'top' || placement === 'bottom' ? 'translateX(-50%)' : 'translateY(-50%)'
-  };
-  if (placement != null) {
-    style[placement] = '100%';
-  }
-
-  let renderProps = useRenderProps({
-    ...props,
-    defaultClassName: 'react-aria-OverlayArrow',
-    values: {
-      placement
-    }
-  });
-  // remove undefined values from renderProps.style object so that it can be
-  // spread merged with the other style object
-  if (renderProps.style) {
-    Object.keys(renderProps.style).forEach(key => renderProps.style![key] === undefined && delete renderProps.style![key]);
-  }
-
-  let DOMProps = filterDOMProps(props);
-
-  return (
-    <dom.div
-      {...DOMProps}
-      {...renderProps}
-      style={{
-        ...style,
-        ...renderProps.style
-      }}
-      ref={ref}
-      data-placement={placement} />
-  );
-});