@react-spectrum/s2 0.3.0 → 0.3.1

package/illustrations/linear/internal/S2_lin_user_96.d.ts

@@ -1,16 +1,4 @@
-/*
- * 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 type {IconProps} from './dist/types';
+import type {IconProps} from '../../../dist/types';
 import type {ReactNode} from 'react';
 
 declare function Icon(props: IconProps): ReactNode;

package/illustrations/linear/internal/S2_lin_video_160.d.ts

@@ -1,16 +1,4 @@
-/*
- * 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 type {IconProps} from './dist/types';
+import type {IconProps} from '../../../dist/types';
 import type {ReactNode} from 'react';
 
 declare function Icon(props: IconProps): ReactNode;

package/illustrations/linear/internal/S2_lin_video_48.d.ts

@@ -1,16 +1,4 @@
-/*
- * 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 type {IconProps} from './dist/types';
+import type {IconProps} from '../../../dist/types';
 import type {ReactNode} from 'react';
 
 declare function Icon(props: IconProps): ReactNode;

package/illustrations/linear/internal/S2_lin_video_96.d.ts

@@ -1,16 +1,4 @@
-/*
- * 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 type {IconProps} from './dist/types';
+import type {IconProps} from '../../../dist/types';
 import type {ReactNode} from 'react';
 
 declare function Icon(props: IconProps): ReactNode;

package/illustrations/linear/internal/S2_lin_warning_160.d.ts

@@ -1,16 +1,4 @@
-/*
- * 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 type {IconProps} from './dist/types';
+import type {IconProps} from '../../../dist/types';
 import type {ReactNode} from 'react';
 
 declare function Icon(props: IconProps): ReactNode;

package/illustrations/linear/internal/S2_lin_warning_48.d.ts

@@ -1,16 +1,4 @@
-/*
- * 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 type {IconProps} from './dist/types';
+import type {IconProps} from '../../../dist/types';
 import type {ReactNode} from 'react';
 
 declare function Icon(props: IconProps): ReactNode;

package/illustrations/linear/internal/S2_lin_warning_96.d.ts

@@ -1,16 +1,4 @@
-/*
- * 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 type {IconProps} from './dist/types';
+import type {IconProps} from '../../../dist/types';
 import type {ReactNode} from 'react';
 
 declare function Icon(props: IconProps): ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/s2",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Spectrum 2 UI components in React",
   "license": "Apache-2.0",
   "repository": {
@@ -68,8 +68,8 @@
     "@react-types/shared": "^3.22.1",
     "@react-types/textfield": "^3.9.6",
     "csstype": "^3.0.2",
-    "react-aria": "^3.34.2",
-    "react-aria-components": "^1.3.2"
+    "react-aria": "^3.34.3",
+    "react-aria-components": "^1.3.3"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -78,5 +78,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "faf0e18467231422cb7a06eb92a74d04e271f1e8"
+  "gitHead": "87fc14abdcdd6dfe517354a73806ad8fdabc6f61"
 }

package/src/ActionButton.tsx

@@ -11,14 +11,14 @@
  */
 
 import {baseColor, fontRelative, style} from '../style/spectrum-theme' with { type: 'macro' };
-import {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton, Text} from 'react-aria-components';
+import {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton} from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
 import {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with { type: 'macro' };
 import {IconContext} from './Icon';
 import {pressScale} from './pressScale';
-import {TextContext} from './Content';
+import {Text, TextContext} from './Content';
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 

package/src/Avatar.tsx

@@ -62,7 +62,7 @@ function Avatar(props: AvatarProps, ref: DOMRef<HTMLImageElement>) {
     src,
     UNSAFE_style,
     UNSAFE_className = '',
-    size,
+    size = 24,
     isOverBackground,
     ...otherProps
   } = props;

package/src/Breadcrumbs.tsx

@@ -19,6 +19,7 @@ import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {t
 import {forwardRefType} from './types';
 import {size, style} from '../style/spectrum-theme' with { type: 'macro' };
 import {useDOMRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 interface BreadcrumbsStyleProps {
   /**
@@ -42,7 +43,7 @@ export interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps<T>, 'chil
   children?: ReactNode
 }
 
-export const BreadcrumbsContext = createContext<ContextValue<BreadcrumbsProps<any>, DOMRefValue<HTMLDivElement>>>(null);
+export const BreadcrumbsContext = createContext<ContextValue<BreadcrumbsProps<any>, DOMRefValue<HTMLOListElement>>>(null);
 
 const wrapper = style<BreadcrumbsStyleProps>({
   display: 'flex',
@@ -71,6 +72,7 @@ const wrapper = style<BreadcrumbsStyleProps>({
 }, getAllowedOverrides());
 
 function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<HTMLOListElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, BreadcrumbsContext);
   let {
     UNSAFE_className = '',
     UNSAFE_style,

package/src/Dialog.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {PopoverProps as AriaPopoverProps, composeRenderProps, Provider, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';
+import {PopoverProps as AriaPopoverProps, composeRenderProps, OverlayTriggerStateContext, 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';
@@ -187,125 +187,126 @@ function DialogInner(props: DialogProps & DialogContextValue & {dialogRef: RefOb
       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, {isHidden: true}],
-                [HeaderContext, {isHidden: true}],
-                [ContentContext, {isHidden: true}],
-                [FooterContext, {isHidden: true}],
-                [ButtonGroupContext, {isHidden: true}]
-              ]}>
-              {children}
-            </Provider>
-            {/* Top header: heading, header, dismiss button, and button group (in fullscreen dialogs). */}
+      {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.
+        // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.
+        <OverlayTriggerStateContext.Provider value={null}>
+          {/* Hero image */}
+          <Provider
+            values={[
+              [ImageContext, {className: image}],
+              [HeadingContext, {isHidden: true}],
+              [HeaderContext, {isHidden: true}],
+              [ContentContext, {isHidden: true}],
+              [FooterContext, {isHidden: true}],
+              [ButtonGroupContext, {isHidden: 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 that creates the margin for the dismiss button.
+                // Wrapper for heading, header, and button group.
+                // This swaps orientation from horizontal to vertical at small screen sizes.
                 display: 'flex',
-                alignItems: 'start',
-                columnGap: 12,
-                marginStart: {
-                  default: 32
-                },
-                marginEnd: {
-                  default: 32,
-                  isDismissable: 12
-                },
+                flexGrow: 1,
                 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, {styles: heading}],
-                    [HeaderContext, {styles: header}],
-                    [ContentContext, {isHidden: true}],
-                    [FooterContext, {isHidden: true}],
-                    [ButtonGroupContext, {isHidden: buttonGroupPlacement !== 'top'}]
-                  ]}>
-                  {children}
-                </Provider>
-              </div>
-              {props.isDismissable &&
-              <CloseButton aria-label={stringFormatter.format('dialog.dismiss')} onPress={close} styles={style({marginBottom: 12})} />
-            }
-            </div>
-            {/* Main content */}
-            <Provider
-              values={[
-                [ImageContext, {hidden: true}],
-                [HeadingContext, {isHidden: true}],
-                [HeaderContext, {isHidden: true}],
-                [ContentContext, {styles: content({type: props.type})}],
-                [FooterContext, {isHidden: true}],
-                [ButtonGroupContext, {isHidden: true}]
-              ]}>
-              {children}
-            </Provider>
-            {/* Footer and button group */}
-            <div
-              className={style({
-                display: 'flex',
-                paddingX: {
-                  default: 32
-                },
-                paddingBottom: {
-                  default: 32
+                  default: 20, // 32 - 12 (handled above)
+                  ':empty': 0
                 },
-                paddingTop: {
-                  default: 32,
+                marginBottom: {
+                  default: 16,
                   ':empty': 0
                 },
-                gap: 24,
-                alignItems: 'center',
-                flexWrap: 'wrap'
+                columnGap: 24,
+                rowGap: 8,
+                flexDirection: {
+                  default: 'column',
+                  sm: 'row'
+                },
+                alignItems: {
+                  default: 'start',
+                  sm: 'center'
+                }
               })}>
               <Provider
                 values={[
                   [ImageContext, {hidden: true}],
-                  [HeadingContext, {isHidden: true}],
-                  [HeaderContext, {isHidden: true}],
+                  [HeadingContext, {styles: heading}],
+                  [HeaderContext, {styles: header}],
                   [ContentContext, {isHidden: true}],
-                  [FooterContext, {styles: footer}],
-                  [ButtonGroupContext, {isHidden: buttonGroupPlacement !== 'bottom', styles: buttonGroup, align: 'end'}]
+                  [FooterContext, {isHidden: true}],
+                  [ButtonGroupContext, {isHidden: buttonGroupPlacement !== 'top'}]
                 ]}>
                 {children}
               </Provider>
             </div>
-          </>)
-        )}
+            {props.isDismissable &&
+            <CloseButton aria-label={stringFormatter.format('dialog.dismiss')} onPress={close} styles={style({marginBottom: 12})} />
+          }
+          </div>
+          {/* Main content */}
+          <Provider
+            values={[
+              [ImageContext, {hidden: true}],
+              [HeadingContext, {isHidden: true}],
+              [HeaderContext, {isHidden: true}],
+              [ContentContext, {styles: content({type: props.type})}],
+              [FooterContext, {isHidden: true}],
+              [ButtonGroupContext, {isHidden: 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, {isHidden: true}],
+                [HeaderContext, {isHidden: true}],
+                [ContentContext, {isHidden: true}],
+                [FooterContext, {styles: footer}],
+                [ButtonGroupContext, {isHidden: buttonGroupPlacement !== 'bottom', styles: buttonGroup, align: 'end'}]
+              ]}>
+              {children}
+            </Provider>
+          </div>
+        </OverlayTriggerStateContext.Provider>
+      ))}
     </RACDialog>
   );
 }

package/src/Meter.tsx

@@ -25,8 +25,10 @@ import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 interface MeterStyleProps {
-  /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter. */
-  variant: 'informative' | 'positive' | 'notice' | 'negative',
+  /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.
+   * @default 'informative'
+   */
+  variant?: 'informative' | 'positive' | 'notice' | 'negative',
   /**
    * The size of the Meter.
    *
@@ -109,7 +111,7 @@ function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {
     styles,
     UNSAFE_className = '',
     UNSAFE_style,
-    variant,
+    variant = 'informative',
     ...groupProps
   } = props;
 

package/src/Tabs.tsx

@@ -40,7 +40,10 @@ export interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | '
   styles?: StylesPropWithHeight,
   /** The content to display in the tabs. */
   children?: ReactNode,
-  /** The amount of space between the tabs. */
+  /**
+   * The amount of space between the tabs.
+   * @default "regular"
+   */
   density?: 'compact' | 'regular'
 }
 

package/src/TagGroup.tsx

@@ -547,7 +547,7 @@ let _Tag = /*#__PURE__*/ (forwardRef as forwardRefType)(Tag);
 export {_Tag as Tag};
 
 function TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM}) {
-  let {size} = useSlottedContext(TagGroupContext) ?? {};
+  let {size = 'M'} = useSlottedContext(TagGroupContext) ?? {};
   return (
     <>
       {isInRealDOM && (