@react-spectrum/s2 0.2.1-nightly.4979

package/src/DatePicker.tsx

@@ -0,0 +1,69 @@
+/*
+ * 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 {
+  DatePicker as AriaDatePicker,
+  DatePickerProps as AriaDatePickerProps,
+  Button,
+  Calendar,
+  CalendarCell,
+  CalendarGrid,
+  DateInput,
+  DateSegment,
+  DateValue,
+  Dialog,
+  FieldError,
+  Group,
+  Heading,
+  Label,
+  Popover,
+  Text
+} from 'react-aria-components';
+import {HelpTextProps} from '@react-types/shared';
+import {ReactNode} from 'react';
+
+export interface DatePickerProps<T extends DateValue>
+  extends AriaDatePickerProps<T>, HelpTextProps {
+  label?: ReactNode
+}
+
+export function DatePicker<T extends DateValue>(
+  {label, description, errorMessage, ...props}: DatePickerProps<T>
+) {
+  return (
+    <AriaDatePicker {...props}>
+      <Label>{label}</Label>
+      <Group>
+        <DateInput>
+          {(segment) => <DateSegment segment={segment} />}
+        </DateInput>
+        <Button>▼</Button>
+      </Group>
+      {description && <Text slot="description">{description}</Text>}
+      <FieldError>{errorMessage}</FieldError>
+      <Popover>
+        <Dialog>
+          <Calendar>
+            <header>
+              <Button slot="previous">◀</Button>
+              <Heading />
+              <Button slot="next">▶</Button>
+            </header>
+            <CalendarGrid>
+              {(date) => <CalendarCell date={date} />}
+            </CalendarGrid>
+          </Calendar>
+        </Dialog>
+      </Popover>
+    </AriaDatePicker>
+  );
+}

package/src/DateRangePicker.tsx

@@ -0,0 +1,73 @@
+/*
+ * 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 {
+  DateRangePicker as AriaDateRangePicker,
+  DateRangePickerProps as AriaDateRangePickerProps,
+  Button,
+  CalendarCell,
+  CalendarGrid,
+  DateInput,
+  DateSegment,
+  DateValue,
+  Dialog,
+  FieldError,
+  Group,
+  Heading,
+  Label,
+  Popover,
+  RangeCalendar,
+  Text
+} from 'react-aria-components';
+import {HelpTextProps} from '@react-types/shared';
+import {ReactNode} from 'react';
+
+export interface DateRangePickerProps<T extends DateValue>
+  extends AriaDateRangePickerProps<T>, HelpTextProps {
+  label?: ReactNode
+}
+
+export function DateRangePicker<T extends DateValue>(
+  {label, description, errorMessage, ...props}: DateRangePickerProps<T>
+) {
+  return (
+    <AriaDateRangePicker {...props}>
+      <Label>{label}</Label>
+      <Group>
+        <DateInput slot="start">
+          {(segment) => <DateSegment segment={segment} />}
+        </DateInput>
+        <span aria-hidden="true">–</span>
+        <DateInput slot="end">
+          {(segment) => <DateSegment segment={segment} />}
+        </DateInput>
+        <Button>▼</Button>
+      </Group>
+      {description && <Text slot="description">{description}</Text>}
+      <FieldError>{errorMessage}</FieldError>
+      <Popover>
+        <Dialog>
+          <RangeCalendar>
+            <header>
+              <Button slot="previous">◀</Button>
+              <Heading />
+              <Button slot="next">▶</Button>
+            </header>
+            <CalendarGrid>
+              {(date) => <CalendarCell date={date} />}
+            </CalendarGrid>
+          </RangeCalendar>
+        </Dialog>
+      </Popover>
+    </AriaDateRangePicker>
+  );
+}

package/src/Dialog.tsx

@@ -0,0 +1,307 @@
+/*
+ * 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 {PopoverProps as AriaPopoverProps, composeRenderProps, Provider, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';
+import {ButtonGroupContext} from './ButtonGroup';
+import {CloseButton} from './CloseButton';
+import {ContentContext, FooterContext, HeaderContext, HeadingContext, ImageContext} from './Content';
+import {createContext, forwardRef, RefObject, useContext} from 'react';
+import {DOMRef} from '@react-types/shared';
+import {Modal} from './Modal';
+import {Popover} from './Popover';
+import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {StyleProps} from './style-utils';
+import {useDOMRef, useMediaQuery} from '@react-spectrum/utils';
+
+// TODO: what style overrides should be allowed?
+export interface DialogProps extends Omit<RACDialogProps, 'className' | 'style'>, StyleProps {
+  /**
+   * Whether the Dialog is dismissable.
+   */
+  isDismissable?: boolean,
+  /**
+   * The size of the Dialog.
+   *
+   * @default 'M'
+   */
+  size?: 'S' | 'M' | 'L'
+}
+
+const image = style({
+  width: 'full',
+  height: '[140px]',
+  objectFit: 'cover'
+});
+
+const heading = style({
+  flexGrow: 1,
+  marginY: 0,
+  font: 'heading'
+});
+
+const header = style({
+  font: 'body-lg'
+});
+
+const content =  style({
+  flexGrow: 1,
+  overflowY: {
+    default: 'auto',
+    // Make the whole dialog scroll rather than only the content when the height it small.
+    '@media (height < 400)': 'visible',
+    type: {
+      popover: 'visible'
+    }
+  },
+  font: 'body',
+  // TODO: adjust margin on mobile?
+  marginX: {
+    default: 32
+  }
+});
+
+const footer = style({
+  flexGrow: 1,
+  font: 'body'
+});
+
+const buttonGroup = style({
+  marginStart: 'auto',
+  maxWidth: 'full'
+});
+
+interface DialogContextValue extends Pick<AriaPopoverProps, 'placement' | 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset'> {
+  /**
+   * The type of Dialog that should be rendered.
+   */
+  type?: 'modal' | 'popover' | 'fullscreen' | 'fullscreenTakeover', // TODO: add tray back in
+  /**
+   * Whether a modal type Dialog should be dismissable.
+   */
+  isDismissable?: boolean,
+  /**
+   * Whether a popover type Dialog's arrow should be hidden.
+   */
+  hideArrow?: boolean,
+  /**
+   * Whether pressing the escape key to close the dialog should be disabled.
+   */
+  isKeyboardDismissDisabled?: boolean
+}
+
+export const DialogContext = createContext<DialogContextValue>({
+  type: 'modal',
+  isDismissable: false,
+  hideArrow: false,
+  shouldFlip: true,
+  isKeyboardDismissDisabled: false
+});
+
+function Dialog(props: DialogProps, ref: DOMRef) {
+  let ctx = useContext(DialogContext);
+  let isDismissable = ctx.isDismissable || props.isDismissable;
+  let isKeyboardDismissDisabled = ctx.isKeyboardDismissDisabled;
+  let domRef = useDOMRef(ref);
+
+  switch (ctx.type) {
+    case 'modal':
+    case 'fullscreen':
+    case 'fullscreenTakeover': {
+      let size = ctx.type === 'modal' ? props.size : ctx.type;
+      return (
+        <Modal size={size} isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>
+          <DialogInner {...props} {...ctx} dialogRef={domRef} isDismissable={isDismissable} />
+        </Modal>
+      );
+    }
+    case 'popover':
+      // get hideArrow from dialog instead?
+      return (
+        <Popover size={props.size || 'M'} hideArrow={ctx.hideArrow} placement={ctx.placement} shouldFlip={ctx.shouldFlip} containerPadding={ctx.containerPadding} offset={ctx.offset} crossOffset={ctx.crossOffset}>
+          <DialogInner {...props} {...ctx} dialogRef={domRef} isDismissable={isDismissable} />
+        </Popover>
+      );
+
+    // TODO: popover/tray
+    // how do we want to do popover, v3 dialogtrigger rendered it, not the dialog
+    // in addition, how do we want to handle the margins that dialog currently imposes, just change them to 0 for popover?
+    // in order for the dialog to contain scrolling behavior, we'd need to follow what i did for menu otherwise the internal padding
+    // of the popover will squish the scrollable content area and the scroll bar will appear to be inside instead of part of the popover
+  }
+}
+
+/**
+ * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
+ * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.
+ */
+let _Dialog = forwardRef(Dialog);
+export {_Dialog as Dialog};
+
+export const dialogInner = style({
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1,
+  maxHeight: '[inherit]',
+  boxSizing: 'border-box',
+  outlineStyle: 'none',
+  fontFamily: 'sans',
+  borderRadius: '[inherit]',
+  overflow: 'auto'
+});
+
+function DialogInner(props: DialogProps & DialogContextValue & {dialogRef: RefObject<HTMLElement | null>}) {
+  // The button group in fullscreen dialogs usually goes at the top, but
+  // when the window is small, it moves to the bottom. We could do this in
+  // pure CSS with display: none, but then the ref would go to two places.
+  // With JS we can actually unmount on of them to ensure there is only one at a time.
+  // Hopefully apps don't SSR render a dialog that's already open, because this means
+  // we don't evaluate the media query until JS loads.
+  let isSmall = useMediaQuery('(max-width: 640px)');
+  let buttonGroupPlacement = 'bottom';
+  if (props.type === 'fullscreen' || props.type === 'fullscreenTakeover') {
+    buttonGroupPlacement = isSmall ? 'bottom' : 'top';
+  }
+
+  if (props.isDismissable) {
+    buttonGroupPlacement = 'none';
+  }
+
+  // TODO: manage focus when the button group placement changes and focus was on one of the buttons?
+
+  return (
+    <RACDialog
+      {...props}
+      ref={props.dialogRef}
+      style={props.UNSAFE_style}
+      className={(props.UNSAFE_className || '') + dialogInner}>
+      {composeRenderProps(props.children, (children, {close}) =>
+          // Render the children multiple times inside the wrappers we need to implement the layout.
+          // Each instance hides certain children so that they are all rendered in the correct locations.
+          (<>
+            {/* Hero image */}
+            <Provider
+              values={[
+              [ImageContext, {className: image}],
+              [HeadingContext, {hidden: true}],
+              [HeaderContext, {hidden: true}],
+              [ContentContext, {hidden: true}],
+              [FooterContext, {hidden: true}],
+              [ButtonGroupContext, {hidden: true}]
+              ]}>
+              {children}
+            </Provider>
+            {/* Top header: heading, header, dismiss button, and button group (in fullscreen dialogs). */}
+            <div
+              className={style({
+                // Wrapper that creates the margin for the dismiss button.
+                display: 'flex',
+                alignItems: 'start',
+                columnGap: 12,
+                marginStart: {
+                  default: 32
+                },
+                marginEnd: {
+                  default: 32,
+                  isDismissable: 12
+                },
+                marginTop: {
+                  default: 12 // margin to dismiss button
+                }
+              })({isDismissable: props.isDismissable, type: props.type})}>
+              <div
+                className={style({
+                  // Wrapper for heading, header, and button group.
+                  // This swaps orientation from horizontal to vertical at small screen sizes.
+                  display: 'flex',
+                  flexGrow: 1,
+                  marginTop: {
+                    default: 20, // 32 - 12 (handled above)
+                    ':empty': 0
+                  },
+                  marginBottom: {
+                    default: 16,
+                    ':empty': 0
+                  },
+                  columnGap: 24,
+                  rowGap: 8,
+                  flexDirection: {
+                    default: 'column',
+                    sm: 'row'
+                  },
+                  alignItems: {
+                    default: 'start',
+                    sm: 'center'
+                  }
+                })}>
+                <Provider
+                  values={[
+                  [ImageContext, {hidden: true}],
+                  [HeadingContext, {className: heading}],
+                  [HeaderContext, {className: header}],
+                  [ContentContext, {hidden: true}],
+                  [FooterContext, {hidden: true}],
+                  [ButtonGroupContext, {hidden: buttonGroupPlacement !== 'top'}]
+                  ]}>
+                  {children}
+                </Provider>
+              </div>
+              {props.isDismissable &&
+              <CloseButton onPress={close} styles={style({marginBottom: 12})} />
+            }
+            </div>
+            {/* Main content */}
+            <Provider
+              values={[
+              [ImageContext, {hidden: true}],
+              [HeadingContext, {hidden: true}],
+              [HeaderContext, {hidden: true}],
+              [ContentContext, {className: content({type: props.type})}],
+              [FooterContext, {hidden: true}],
+              [ButtonGroupContext, {hidden: true}]
+              ]}>
+              {children}
+            </Provider>
+            {/* Footer and button group */}
+            <div
+              className={style({
+                display: 'flex',
+                paddingX: {
+                  default: 32
+                },
+                paddingBottom: {
+                  default: 32
+                },
+                paddingTop: {
+                  default: 32,
+                  ':empty': 0
+                },
+                gap: 24,
+                alignItems: 'center',
+                flexWrap: 'wrap'
+              })}>
+              <Provider
+                values={[
+                [ImageContext, {hidden: true}],
+                [HeadingContext, {hidden: true}],
+                [HeaderContext, {hidden: true}],
+                [ContentContext, {hidden: true}],
+                [FooterContext, {className: footer}],
+                [ButtonGroupContext, {hidden: buttonGroupPlacement !== 'bottom', styles: buttonGroup, align: 'end'}]
+                ]}>
+                {children}
+              </Provider>
+            </div>
+          </>)
+        )}
+    </RACDialog>
+  );
+}

package/src/DialogContainer.tsx

@@ -0,0 +1,93 @@
+/*
+ * 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 {DialogContext} from './Dialog';
+import {ModalContext, useSlottedContext} from 'react-aria-components';
+import React, {ReactElement, useContext, useState} from 'react';
+import {SpectrumDialogContainerProps} from '@react-types/dialog';
+
+export interface DialogContainerProps extends SpectrumDialogContainerProps {}
+
+/**
+ * A DialogContainer accepts a single Dialog as a child, and manages showing and hiding
+ * it in a modal. Useful in cases where there is no trigger element
+ * or when the trigger unmounts while the dialog is open.
+ */
+export function DialogContainer(props: DialogContainerProps) {
+  let {
+    children,
+    type = 'modal',
+    onDismiss,
+    isDismissable = false,
+    isKeyboardDismissDisabled
+  } = props;
+
+  let childArray = React.Children.toArray(children);
+  if (childArray.length > 1) {
+    throw new Error('Only a single child can be passed to DialogContainer.');
+  }
+
+  let [lastChild, setLastChild] = useState<ReactElement | null>(null);
+
+  // React.Children.toArray mutates the children, and we need them to be stable
+  // between renders so that the lastChild comparison works.
+  let child: ReactElement | undefined = undefined;
+  if (Array.isArray(children)) {
+    child = children.find(React.isValidElement);
+  } else if (React.isValidElement(children)) {
+    child = children;
+  }
+
+  if (child && child !== lastChild) {
+    setLastChild(child);
+  }
+
+  let onOpenChange = (isOpen: boolean) => {
+    if (!isOpen) {
+      onDismiss();
+    }
+  };
+
+  return (
+    <DialogContext.Provider value={{type, isDismissable}}>
+      <ModalContext.Provider value={{isOpen: !!child, onOpenChange, isDismissable, isKeyboardDismissDisabled}}>
+        {lastChild}
+      </ModalContext.Provider>
+    </DialogContext.Provider>
+  );
+}
+
+export interface DialogContainerValue {
+  /**
+   * The type of container the dialog is rendered in.
+   */
+  type: 'modal' | 'popover' | 'fullscreen' | 'fullscreenTakeover', // TODO: add tray back in
+  /**
+   * A handler to programmatically dismiss the dialog.
+   */
+  dismiss(): void
+}
+
+export function useDialogContainer(): DialogContainerValue {
+  let context = useSlottedContext(ModalContext);
+  let dialogContext = useContext(DialogContext);
+  if (!context) {
+    throw new Error('Cannot call useDialogContext outside a <DialogTrigger> or <DialogContainer>.');
+  }
+
+  return {
+    type: dialogContext.type || 'modal',
+    dismiss() {
+      context?.onOpenChange?.(false);
+    }
+  };
+}

package/src/DialogTrigger.tsx

@@ -0,0 +1,62 @@
+/*
+ * 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 {DialogTrigger as AriaDialogTrigger, DialogTriggerProps as AriaDialogTriggerProps, PopoverProps as AriaPopoverProps} from 'react-aria-components';
+import {DialogContext} from './Dialog';
+import {PressResponder} from '@react-aria/interactions';
+
+export interface DialogTriggerProps extends AriaDialogTriggerProps, Pick<AriaPopoverProps, 'placement' | 'shouldFlip' | 'isKeyboardDismissDisabled' | 'containerPadding' | 'offset' | 'crossOffset' > {
+  /**
+   * The type of Dialog that should be rendered. 
+   * 
+   * @default 'modal'
+   */
+  type?: 'modal' | 'popover' | 'fullscreen' | 'fullscreenTakeover', // TODO: add tray back in
+  /**
+   * Whether a popover type Dialog's arrow should be hidden.
+   */
+  hideArrow?: boolean,
+  /**
+   * Whether the Dialog is dismissable.
+   */
+  isDismissable?: boolean
+}
+
+/**
+ * DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the Dialog's
+ * open state with the trigger's press state. Additionally, it allows you to customize the type and
+ * positioning of the Dialog.
+ */
+export function DialogTrigger(props: DialogTriggerProps) {
+  return (
+    <AriaDialogTrigger {...props}>
+      <DialogContext.Provider
+        value={{
+          type: props.type || 'modal',
+          hideArrow: props.hideArrow,
+          placement: props.placement,
+          shouldFlip: props.shouldFlip,
+          isDismissable: props.isDismissable,
+          isKeyboardDismissDisabled: props.isKeyboardDismissDisabled,
+          containerPadding: props.containerPadding,
+          offset: props.offset,
+          crossOffset: props.crossOffset
+        }}>
+        {/* RAC sets isPressed via PressResponder when the dialog is open.
+            We don't want press scaling to appear to get "stuck", so override this. */}
+        <PressResponder isPressed={false}>
+          {props.children}
+        </PressResponder>
+      </DialogContext.Provider>
+    </AriaDialogTrigger>
+  );
+}