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

package/src/Modal.tsx

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

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

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