Merge branch 'fix/useTag' of github.com:minzzang144/react-spectrum in…

…to fix/useTag

packages/@react-aria/tag/docs/useTagGroup.mdx

@@ -23,7 +23,7 @@ import Anatomy from './anatomy.svg';
 
 ---
 category: Collections
-keywords: [tag, aria]
+keywords: [tag, aria, grid]
 ---
 
 # useTagGroup
@@ -32,7 +32,10 @@ keywords: [tag, aria]
 
 <HeaderInfo
   packageData={packageData}
-  componentNames={['useTagGroup']} />
+  componentNames={['useTagGroup']}
+  sourceData={[
+    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/grid/'}
+  ]} />
 
 ## API
 

packages/@react-spectrum/provider/src/Provider.tsx

@@ -198,7 +198,10 @@ const ProviderWrapper = React.forwardRef(function ProviderWrapper(props: Provide
 export function useProvider() {
   let context = useContext(Context);
   if (!context) {
-    throw new Error('No root provider found.');
+    throw new Error(
+      'No root provider found, please make sure your app is wrapped within a <Provider>. ' +
+      'Alternatively, this issue may be caused by duplicate packages, see https://github.com/adobe/react-spectrum/wiki/Frequently-Asked-Questions-(FAQs)#why-are-there-errors-after-upgrading-a-react-spectrum-package for more information.'
+    );
   }
   return context;
 }

packages/@react-spectrum/s2/src/CustomDialog.tsx

@@ -24,9 +24,9 @@ export interface CustomDialogProps extends Omit<RACDialogProps, 'className' | 's
    */
   size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover',
   /**
-   * Whether the Dialog is dismissable.
+   * Whether the Dialog is dismissible.
    */
-  isDismissable?: boolean,
+  isDismissible?: boolean,
   /** Whether pressing the escape key to close the dialog should be disabled. */
   isKeyboardDismissDisabled?: boolean,
   /**
@@ -58,14 +58,14 @@ const dialogStyle = style({
 function CustomDialog(props: CustomDialogProps, ref: DOMRef) {
   let {
     size,
-    isDismissable,
+    isDismissible,
     isKeyboardDismissDisabled,
     padding = 'default'
   } = props;
   let domRef = useDOMRef(ref);
 
   return (
-    <Modal size={size} isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>
+    <Modal size={size} isDismissable={isDismissible} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>
       <RACDialog
         {...props}
         ref={domRef}

packages/@react-spectrum/s2/src/Dialog.tsx

@@ -25,9 +25,9 @@ import {useDOMRef} 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.
+   * Whether the Dialog is dismissible.
    */
-  isDismissable?: boolean,
+  isDismissible?: boolean,
   /**
    * The size of the Dialog.
    *
@@ -91,11 +91,11 @@ export const dialogInner = style({
 });
 
 function Dialog(props: DialogProps, ref: DOMRef) {
-  let {size = 'M', isDismissable, isKeyboardDismissDisabled} = props;
+  let {size = 'M', isDismissible, isKeyboardDismissDisabled} = props;
   let domRef = useDOMRef(ref);
 
   return (
-    <Modal size={size} isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>
+    <Modal size={size} isDismissable={isDismissible} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>
       <RACDialog
         {...props}
         ref={domRef}
@@ -130,12 +130,12 @@ function Dialog(props: DialogProps, ref: DOMRef) {
                 },
                 marginEnd: {
                   default: 32,
-                  isDismissable: 12
+                  isDismissible: 12
                 },
                 marginTop: {
                   default: 12 // margin to dismiss button
                 }
-              })({isDismissable: props.isDismissable})}>
+              })({isDismissible: props.isDismissible})}>
               <div
                 className={style({
                   // Wrapper for heading, header, and button group.
@@ -173,7 +173,7 @@ function Dialog(props: DialogProps, ref: DOMRef) {
                   {children}
                 </Provider>
               </div>
-              {props.isDismissable && 
+              {props.isDismissible && 
                 <CloseButton styles={style({marginBottom: 12})} />
               }
             </div>
@@ -214,7 +214,7 @@ function Dialog(props: DialogProps, ref: DOMRef) {
                   [HeaderContext, {isHidden: true}],
                   [ContentContext, {isHidden: true}],
                   [FooterContext, {styles: footer}],
-                  [ButtonGroupContext, {isHidden: props.isDismissable, styles: buttonGroup, align: 'end'}]
+                  [ButtonGroupContext, {isHidden: props.isDismissible, styles: buttonGroup, align: 'end'}]
                 ]}>
                 {children}
               </Provider>

packages/@react-spectrum/s2/src/DialogContainer.tsx

@@ -14,7 +14,7 @@ import {ModalContext, useSlottedContext} from 'react-aria-components';
 import React, {ReactElement, useState} from 'react';
 import {SpectrumDialogContainerProps} from '@react-types/dialog';
 
-export interface DialogContainerProps extends Omit<SpectrumDialogContainerProps, 'type'> {}
+export interface DialogContainerProps extends Omit<SpectrumDialogContainerProps, 'type' | 'isDismissable' | 'isKeyboardDismissDisabled'> {}
 
 /**
  * A DialogContainer accepts a single Dialog as a child, and manages showing and hiding
@@ -24,9 +24,7 @@ export interface DialogContainerProps extends Omit<SpectrumDialogContainerProps,
 export function DialogContainer(props: DialogContainerProps) {
   let {
     children,
-    onDismiss,
-    isDismissable = false,
-    isKeyboardDismissDisabled
+    onDismiss
   } = props;
 
   let childArray = React.Children.toArray(children);
@@ -56,7 +54,7 @@ export function DialogContainer(props: DialogContainerProps) {
   };
 
   return (
-    <ModalContext.Provider value={{isOpen: !!child, onOpenChange, isDismissable, isKeyboardDismissDisabled}}>
+    <ModalContext.Provider value={{isOpen: !!child, onOpenChange}}>
       {lastChild}
     </ModalContext.Provider>
   );

packages/@react-spectrum/s2/src/FullscreenDialog.tsx

@@ -72,6 +72,7 @@ export const dialogInner = style({
       'header',
       '.',
       'content',
+      '.',
       'buttons'
     ],
     sm: [
@@ -90,6 +91,7 @@ export const dialogInner = style({
       'auto',
       24,
       '1fr',
+      24,
       'auto'
     ],
     sm: [

packages/@react-spectrum/s2/src/Popover.tsx

@@ -16,22 +16,19 @@ import {
   composeRenderProps,
   Dialog,
   DialogProps,
-  ModalRenderProps,
   OverlayArrow,
   OverlayTriggerStateContext,
   useLocale
 } from 'react-aria-components';
 import {colorScheme, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {ColorSchemeContext} from './Provider';
-import {DismissButton} from 'react-aria';
 import {DOMRef} from '@react-types/shared';
 import {forwardRef, MutableRefObject, useCallback, useContext} from 'react';
 import {keyframes} from '../style/style-macro' with {type: 'macro'};
 import {mergeStyles} from '../style/runtime';
-import {Modal} from './Modal';
 import {style} from '../style' with {type: 'macro'};
 import {StyleString} from '../style/types' with {type: 'macro'};
-import {useDOMRef, useIsMobileDevice} from '@react-spectrum/utils';
+import {useDOMRef} from '@react-spectrum/utils';
 
 export interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' | 'isNonModal' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'shouldCloseOnInteractOutside' | 'shouldUpdatePosition'> {
   styles?: StyleString,
@@ -44,9 +41,9 @@ export interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arro
   /**
    * The size of the Popover. If not specified, the popover fits its contents.
    */
-  size?: 'S' | 'M' | 'L',
+  size?: 'S' | 'M' | 'L'
   /** The type of overlay that should be rendered when on a mobile device. */
-  mobileType?: 'modal' | 'fullscreen' | 'fullscreenTakeover' // TODO: add tray back in
+  // mobileType?: 'modal' | 'fullscreen' | 'fullscreenTakeover' // TODO: add tray back in
 }
 
 const fadeKeyframes = keyframes(`
@@ -126,6 +123,9 @@ let popover = style({
       L: 576
     }
   },
+  // Don't be larger than full screen minus 2 * containerPadding
+  maxWidth: '[calc(100vw - 24px)]',
+  boxSizing: 'border-box',
   translateY: {
     placement: {
       bottom: {
@@ -221,9 +221,7 @@ function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
     UNSAFE_className = '',
     UNSAFE_style,
     styles,
-    size,
-    children,
-    trigger = null
+    size
   } = props;
   let domRef = useDOMRef(ref);
   let colorScheme = useContext(ColorSchemeContext);
@@ -239,24 +237,25 @@ function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
   }, [locale, direction, domRef]);
 
   // On small devices, show a modal (or eventually a tray) instead of a popover.
-  let isMobile = useIsMobileDevice();
-  if (isMobile && process.env.NODE_ENV !== 'test') {
-    let mappedChildren = typeof children === 'function'
-      ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})
-      : children;
+  // TODO: reverted this until we have trays.
+  // let isMobile = useIsMobileDevice();
+  // if (isMobile && process.env.NODE_ENV !== 'test') {
+  //   let mappedChildren = typeof children === 'function'
+  //     ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})
+  //     : children;
 
-    return (
-      <Modal size={size} isDismissable>
-        {composeRenderProps(mappedChildren, (children, {state}) => (
-          <>
-            {children}
-            {/* Add additional dismiss button at the end to match popovers. */}
-            <DismissButton onDismiss={state.close} />
-          </>
-        ))}
-      </Modal>
-    );
-  }
+  //   return (
+  //     <Modal size={size} isDismissable>
+  //       {composeRenderProps(mappedChildren, (children, {state}) => (
+  //         <>
+  //           {children}
+  //           {/* Add additional dismiss button at the end to match popovers. */}
+  //           <DismissButton onDismiss={state.close} />
+  //         </>
+  //       ))}
+  //     </Modal>
+  //   );
+  // }
 
   // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results
   // containerPadding not working as expected
@@ -289,7 +288,7 @@ function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
 let _PopoverBase = forwardRef(PopoverBase);
 export {_PopoverBase as PopoverBase};
 
-export interface PopoverDialogProps extends Pick<PopoverProps, 'size' | 'hideArrow' | 'mobileType' | 'placement' | 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset'>, Omit<DialogProps, 'className' | 'style'>, StyleProps {}
+export interface PopoverDialogProps extends Pick<PopoverProps, 'size' | 'hideArrow'| 'placement' | 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset'>, Omit<DialogProps, 'className' | 'style'>, StyleProps {}
 
 const dialogStyle = style({
   padding: 8,

packages/@react-spectrum/s2/stories/CustomDialog.stories.tsx

@@ -33,7 +33,7 @@ export default meta;
 export const WhatsNew = (args: any) => (
   <DialogTrigger>
     <ActionButton>Open dialog</ActionButton>
-    <CustomDialog padding="none" {...args} isDismissable styles={style({maxWidth: {isSizeUnset: '[800px]'}})({isSizeUnset: args.size == null})}>
+    <CustomDialog padding="none" {...args} isDismissible styles={style({maxWidth: {isSizeUnset: '[800px]'}})({isSizeUnset: args.size == null})}>
       <div className={style({display: 'flex', size: 'full'})}>
         <div className={style({display: 'flex', flexDirection: 'column', rowGap: 32, padding: 32, backgroundColor: 'layer-1', width: 192, flexShrink: 0})}>
           <Heading slot="title" styles={style({font: 'title-3xl', marginY: 0})}>What's new</Heading>

packages/@react-spectrum/s2/stories/Popover.stories.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {ActionButton, Avatar, Button, Card, CardPreview, Content, DialogTrigger, Divider, DropZone, Form, Image, Menu, MenuItem, MenuSection, Popover, SearchField, SubmenuTrigger, Switch, Tab, TabList, TabPanel, Tabs, Text, TextField} from '../src';
+import {ActionButton, Avatar, Button, Card, CardPreview, Content, DialogTrigger, Divider, Form, Image, Menu, MenuItem, MenuSection, Popover, SearchField, SubmenuTrigger, Switch, Tab, TabList, TabPanel, Tabs, Text, TextField} from '../src';
 import Cloud from '../s2wf-icons/S2_Icon_Cloud_20_N.svg';
 import Education from '../s2wf-icons/S2_Icon_Education_20_N.svg';
 import File from '../s2wf-icons/S2_Icon_File_20_N.svg';
@@ -97,7 +97,6 @@ export const HelpCenter = (args: any) => (
           <Form>
             <TextField label="Subject" />
             <TextField label="Description" isRequired />
-            <DropZone />
             <Switch>Adobe can contact me for further questions concerning this feedback</Switch>
             <Button styles={style({marginStart: 'auto'})}>Submit</Button>
           </Form>
@@ -159,3 +158,8 @@ export const AccountMenu = (args: any) => (
     </Popover>
   </DialogTrigger>
 );
+
+AccountMenu.argTypes = {
+  hideArrow: {table: {disable: true}},
+  placement: {table: {disable: true}}
+};

packages/@react-types/shared/src/dom.d.ts

@@ -59,7 +59,7 @@ export interface DOMProps {
   /**
    * The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
    */
-  id?: string | undefined
+  id?: string
 }
 
 export interface FocusableDOMProps extends DOMProps {