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

package/src/DatePicker.tsx

@@ -0,0 +1,334 @@
+/*
+ * 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 {AriaDatePickerProps, AriaDateRangePickerProps, DateValue, useDatePicker, useDateRangePicker, useFocusRing} from 'react-aria';
+import {ButtonContext} from './Button';
+import {CalendarContext, RangeCalendarContext} from './Calendar';
+import {
+  ClassNameOrFunction,
+  ContextValue,
+  dom,
+  Provider,
+  RACValidation,
+  removeDataAttributes,
+  RenderProps,
+  SlotProps,
+  useContextProps,
+  useRenderProps,
+  useSlot,
+  useSlottedContext
+} from './utils';
+import {DateFieldContext} from './DateField';
+import {DatePickerState, DatePickerStateOptions, DateRangePickerState, DateRangePickerStateOptions, useDatePickerState, useDateRangePickerState} from 'react-stately';
+import {DialogContext, OverlayTriggerStateContext} from './Dialog';
+import {FieldErrorContext} from './FieldError';
+import {filterDOMProps, mergeProps, useResizeObserver} from '@react-aria/utils';
+import {FormContext} from './Form';
+import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
+import {GroupContext} from './Group';
+import {HiddenDateInput} from './HiddenDateInput';
+import {LabelContext} from './Label';
+import {PopoverContext} from './Popover';
+import React, {createContext, ForwardedRef, forwardRef, useCallback, useRef, useState} from 'react';
+import {TextContext} from './Text';
+
+export interface DatePickerRenderProps {
+  /**
+   * Whether an element within the date picker is focused, either via a mouse or keyboard.
+   * @selector [data-focus-within]
+   */
+  isFocusWithin: boolean,
+  /**
+   * Whether an element within the date picker is keyboard focused.
+   * @selector [data-focus-visible]
+   */
+  isFocusVisible: boolean,
+  /**
+   * Whether the date picker is disabled.
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean,
+  /**
+   * Whether the date picker is read only.
+   * @selector [data-readonly]
+   */
+  isReadOnly: boolean,
+  /**
+   * Whether the date picker is invalid.
+   * @selector [data-invalid]
+   */
+  isInvalid: boolean,
+  /**
+   * Whether the date picker is required.
+   * @selector [data-required]
+   */
+  isRequired: boolean,
+  /**
+   * Whether the date picker's popover is currently open.
+   * @selector [data-open]
+   */
+  isOpen: boolean,
+  /**
+   * State of the date picker.
+   */
+  state: DatePickerState
+}
+export interface DateRangePickerRenderProps extends Omit<DatePickerRenderProps, 'state'> {
+  /**
+   * State of the date range picker.
+   */
+  state: DateRangePickerState
+}
+
+export interface DatePickerProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, Pick<DatePickerStateOptions<T>, 'shouldCloseOnSelect'>, RACValidation, RenderProps<DatePickerRenderProps>, 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-DatePicker'
+   */
+  className?: ClassNameOrFunction<DatePickerRenderProps>
+}
+export interface DateRangePickerProps<T extends DateValue> extends Omit<AriaDateRangePickerProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, Pick<DateRangePickerStateOptions<T>, 'shouldCloseOnSelect'>, RACValidation, RenderProps<DateRangePickerRenderProps>, 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-DateRangePicker'
+   */
+  className?: ClassNameOrFunction<DateRangePickerRenderProps>
+}
+
+export const DatePickerContext = createContext<ContextValue<DatePickerProps<any>, HTMLDivElement>>(null);
+export const DateRangePickerContext = createContext<ContextValue<DateRangePickerProps<any>, HTMLDivElement>>(null);
+export const DatePickerStateContext = createContext<DatePickerState | null>(null);
+export const DateRangePickerStateContext = createContext<DateRangePickerState | null>(null);
+
+// Contexts to clear inside the popover.
+const CLEAR_CONTEXTS = [GroupContext, ButtonContext, LabelContext, TextContext];
+
+/**
+ * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.
+ */
+export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, DatePickerContext);
+  let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
+  let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
+  let state = useDatePickerState({
+    ...props,
+    validationBehavior
+  });
+
+  let groupRef = useRef<HTMLDivElement>(null);
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
+  let {
+    groupProps,
+    labelProps,
+    fieldProps,
+    buttonProps,
+    dialogProps,
+    calendarProps,
+    descriptionProps,
+    errorMessageProps,
+    ...validation
+  } = useDatePicker({
+    ...removeDataAttributes(props),
+    label,
+    validationBehavior
+  }, state, groupRef);
+
+  // Allows calendar width to match input group
+  let [groupWidth, setGroupWidth] = useState<string | null>(null);
+  let onResize = useCallback(() => {
+    if (groupRef.current) {
+      setGroupWidth(groupRef.current.offsetWidth + 'px');
+    }
+  }, []);
+
+  useResizeObserver({
+    ref: groupRef,
+    onResize: onResize
+  });
+
+  let {focusProps, isFocused, isFocusVisible} = useFocusRing({within: true});
+  let renderProps = useRenderProps({
+    ...props,
+    values: {
+      state,
+      isFocusWithin: isFocused,
+      isFocusVisible,
+      isDisabled: props.isDisabled || false,
+      isInvalid: state.isInvalid,
+      isOpen: state.isOpen,
+      isReadOnly: props.isReadOnly || false,
+      isRequired: props.isRequired || false
+    },
+    defaultClassName: 'react-aria-DatePicker'
+  });
+
+  let DOMProps = filterDOMProps(props, {global: true});
+  delete DOMProps.id;
+
+  return (
+    <Provider
+      values={[
+        [DatePickerStateContext, state],
+        [GroupContext, {...groupProps, ref: groupRef, isInvalid: state.isInvalid}],
+        [DateFieldContext, fieldProps],
+        [ButtonContext, {...buttonProps, isPressed: state.isOpen}],
+        [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
+        [CalendarContext, calendarProps],
+        [OverlayTriggerStateContext, state],
+        [PopoverContext, {
+          trigger: 'DatePicker',
+          triggerRef: groupRef,
+          placement: 'bottom start',
+          style: {'--trigger-width': groupWidth} as React.CSSProperties,
+          clearContexts: CLEAR_CONTEXTS
+        }],
+        [DialogContext, dialogProps],
+        [TextContext, {
+          slots: {
+            description: descriptionProps,
+            errorMessage: errorMessageProps
+          }
+        }],
+        [FieldErrorContext, validation]
+      ]}>
+      <dom.div
+        {...mergeProps(DOMProps, renderProps, focusProps)}
+        ref={ref}
+        slot={props.slot || undefined}
+        data-focus-within={isFocused || undefined}
+        data-invalid={state.isInvalid || undefined}
+        data-focus-visible={isFocusVisible || undefined}
+        data-disabled={props.isDisabled || undefined}
+        data-readonly={props.isReadOnly || undefined}
+        data-required={props.isRequired || undefined}
+        data-open={state.isOpen || undefined} />
+      <HiddenDateInput
+        autoComplete={props.autoComplete}
+        name={props.name}
+        isDisabled={props.isDisabled}
+        state={state} />
+    </Provider>
+  );
+});
+
+/**
+ * A date range picker combines two DateFields and a RangeCalendar popover to allow
+ * users to enter or select a date and time range.
+ */
+export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, DateRangePickerContext);
+  let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
+  let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
+  let state = useDateRangePickerState({
+    ...props,
+    validationBehavior
+  });
+
+  let groupRef = useRef<HTMLDivElement>(null);
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
+  let {
+    groupProps,
+    labelProps,
+    startFieldProps,
+    endFieldProps,
+    buttonProps,
+    dialogProps,
+    calendarProps,
+    descriptionProps,
+    errorMessageProps,
+    ...validation
+  } = useDateRangePicker({
+    ...removeDataAttributes(props),
+    label,
+    validationBehavior
+  }, state, groupRef);
+
+  // Allows calendar width to match input group
+  let [groupWidth, setGroupWidth] = useState<string | null>(null);
+  let onResize = useCallback(() => {
+    if (groupRef.current) {
+      setGroupWidth(groupRef.current.offsetWidth + 'px');
+    }
+  }, []);
+
+  useResizeObserver({
+    ref: groupRef,
+    onResize: onResize
+  });
+
+  let {focusProps, isFocused, isFocusVisible} = useFocusRing({within: true});
+  let renderProps = useRenderProps({
+    ...props,
+    values: {
+      state,
+      isFocusWithin: isFocused,
+      isFocusVisible,
+      isDisabled: props.isDisabled || false,
+      isInvalid: state.isInvalid,
+      isOpen: state.isOpen,
+      isReadOnly: props.isReadOnly || false,
+      isRequired: props.isRequired || false
+    },
+    defaultClassName: 'react-aria-DateRangePicker'
+  });
+
+  let DOMProps = filterDOMProps(props, {global: true});
+  delete DOMProps.id;
+
+  return (
+    <Provider
+      values={[
+        [DateRangePickerStateContext, state],
+        [GroupContext, {...groupProps, ref: groupRef, isInvalid: state.isInvalid}],
+        [ButtonContext, {...buttonProps, isPressed: state.isOpen}],
+        [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
+        [RangeCalendarContext, calendarProps],
+        [OverlayTriggerStateContext, state],
+        [PopoverContext, {
+          trigger: 'DateRangePicker',
+          triggerRef: groupRef,
+          placement: 'bottom start',
+          style: {'--trigger-width': groupWidth} as React.CSSProperties,
+          clearContexts: CLEAR_CONTEXTS
+        }],
+        [DialogContext, dialogProps],
+        [DateFieldContext, {
+          slots: {
+            start: startFieldProps,
+            end: endFieldProps
+          }
+        }],
+        [TextContext, {
+          slots: {
+            description: descriptionProps,
+            errorMessage: errorMessageProps
+          }
+        }],
+        [FieldErrorContext, validation]
+      ]}>
+      <dom.div
+        {...mergeProps(DOMProps, renderProps, focusProps)}
+        ref={ref}
+        slot={props.slot || undefined}
+        data-focus-within={isFocused || undefined}
+        data-invalid={state.isInvalid || undefined}
+        data-focus-visible={isFocusVisible || undefined}
+        data-disabled={props.isDisabled || undefined}
+        data-readonly={props.isReadOnly || undefined}
+        data-required={props.isRequired || undefined}
+        data-open={state.isOpen || undefined} />
+    </Provider>
+  );
+});

package/src/Dialog.tsx

@@ -0,0 +1,159 @@
+/*
+ * 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 {AriaDialogProps, useDialog, useId, useOverlayTrigger} from 'react-aria';
+import {ButtonContext} from './Button';
+import {ContextValue, DEFAULT_SLOT, dom, DOMRenderProps, Provider, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
+import {filterDOMProps, mergeProps, useResizeObserver} from '@react-aria/utils';
+import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
+import {HeadingContext} from './RSPContexts';
+import {OverlayTriggerProps, OverlayTriggerState, useMenuTriggerState} from 'react-stately';
+import {PopoverContext} from './Popover';
+import {PressResponder} from '@react-aria/interactions';
+import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useCallback, useContext, useRef, useState} from 'react';
+import {RootMenuTriggerStateContext} from './Menu';
+
+export interface DialogTriggerProps extends OverlayTriggerProps {
+  children: ReactNode
+}
+
+export interface DialogRenderProps {
+  close: () => void
+}
+
+export interface DialogProps extends AriaDialogProps, StyleProps, SlotProps, DOMRenderProps<'section', undefined>, GlobalDOMAttributes<HTMLElement> {
+  /**
+   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
+   * @default 'react-aria-Dialog'
+   */
+  className?: string,
+  /** Children of the dialog. A function may be provided to access a function to close the dialog. */
+  children?: ReactNode | ((opts: DialogRenderProps) => ReactNode)
+}
+
+export const DialogContext = createContext<ContextValue<DialogProps, HTMLElement>>(null);
+export const OverlayTriggerStateContext = createContext<OverlayTriggerState | null>(null);
+
+/**
+ * A DialogTrigger opens a dialog when a trigger element is pressed.
+ */
+export function DialogTrigger(props: DialogTriggerProps): JSX.Element {
+  // Use useMenuTriggerState instead of useOverlayTriggerState in case a menu is embedded in the dialog.
+  // This is needed to handle submenus.
+  let state = useMenuTriggerState(props);
+
+  let buttonRef = useRef<HTMLButtonElement>(null);
+  let {triggerProps, overlayProps} = useOverlayTrigger({type: 'dialog'}, state, buttonRef);
+
+  // Allows popover width to match trigger element
+  let [buttonWidth, setButtonWidth] = useState<string | null>(null);
+  let onResize = useCallback(() => {
+    if (buttonRef.current) {
+      setButtonWidth(buttonRef.current.offsetWidth + 'px');
+    }
+  }, [buttonRef]);
+
+  useResizeObserver({
+    ref: buttonRef,
+    onResize: onResize
+  });
+
+  // Label dialog by the trigger as a fallback if there is no title slot.
+  // This is done in RAC instead of hooks because otherwise we cannot distinguish
+  // between context and props. Normally aria-labelledby overrides the title
+  // but when sent by context we want the title to win.
+  triggerProps.id = useId();
+  overlayProps['aria-labelledby'] = triggerProps.id;
+
+  return (
+    <Provider
+      values={[
+        [OverlayTriggerStateContext, state],
+        [RootMenuTriggerStateContext, state],
+        [DialogContext, overlayProps],
+        [PopoverContext, {
+          trigger: 'DialogTrigger',
+          triggerRef: buttonRef,
+          'aria-labelledby': overlayProps['aria-labelledby'],
+          style: {'--trigger-width': buttonWidth} as React.CSSProperties
+        }]
+      ]}>
+      <PressResponder {...triggerProps} ref={buttonRef} isPressed={state.isOpen}>
+        {props.children}
+      </PressResponder>
+    </Provider>
+  );
+}
+
+/**
+ * A dialog is an overlay shown above other content in an application.
+ */
+export const Dialog = /*#__PURE__*/ (forwardRef as forwardRefType)(function Dialog(props: DialogProps, ref: ForwardedRef<HTMLElement>) {
+  let originalAriaLabelledby = props['aria-labelledby'];
+  [props, ref] = useContextProps(props, ref, DialogContext);
+  let {dialogProps, titleProps} = useDialog({
+    ...props,
+    // Only pass aria-labelledby from props, not context.
+    // Context is used as a fallback below.
+    'aria-labelledby': originalAriaLabelledby
+  }, ref);
+  let state = useContext(OverlayTriggerStateContext);
+
+  if (!dialogProps['aria-label'] && !dialogProps['aria-labelledby']) {
+    // If aria-labelledby exists on props, we know it came from context.
+    // Use that as a fallback in case there is no title slot.
+    if (props['aria-labelledby']) {
+      dialogProps['aria-labelledby'] = props['aria-labelledby'];
+    } else if (process.env.NODE_ENV !== 'production') {
+      console.warn('If a Dialog does not contain a <Heading slot="title">, it must have an aria-label or aria-labelledby attribute for accessibility.');
+    }
+  }
+
+  let renderProps = useRenderProps({
+    defaultClassName: 'react-aria-Dialog',
+    className: props.className,
+    style: props.style,
+    children: props.children,
+    values: {
+      close: state?.close || (() => {})
+    }
+  });
+
+  let DOMProps = filterDOMProps(props, {global: true});
+
+  return (
+    <dom.section
+      {...mergeProps(DOMProps, renderProps, dialogProps)}
+      render={props.render}
+      ref={ref}
+      slot={props.slot || undefined}>
+      <Provider
+        values={[
+          [HeadingContext, {
+            slots: {
+              [DEFAULT_SLOT]: {},
+              title: {...titleProps, level: 2}
+            }
+          }],
+          [ButtonContext, {
+            slots: {
+              [DEFAULT_SLOT]: {},
+              close: {
+                onPress: () => state?.close()
+              }
+            }
+          }]
+        ]}>
+        {renderProps.children}
+      </Provider>
+    </dom.section>
+  );
+});