@react-spectrum/s2 1.1.0 → 1.2.0

package/icons/Icon.cjs

@@ -71,9 +71,9 @@ const $bde97c91243ed164$var$iconStyles = function anonymous(props, overrides) {
         if (p[1] === "F") height = true;
         rules += p[0];
     }
-    if (!width) rules += ' Zm11';
-    if (!height) rules += ' Fn11';
-    rules += ' _va11';
+    if (!width) rules += ' Zm12';
+    if (!height) rules += ' Fn12';
+    rules += ' _va12';
     return rules;
 };
 function $bde97c91243ed164$export$274edc73af1ae9c8(Component, context = $bde97c91243ed164$export$a49f528ae1a4d0ed) {
@@ -114,20 +114,20 @@ const $bde97c91243ed164$var$illustrationStyles = function anonymous(props, overr
         rules += p[0];
     }
     if (props.size === "L") {
-        if (!width) rules += ' Zq11';
+        if (!width) rules += ' Zq12';
     } else if (props.size === "M") {
-        if (!width) rules += ' ZH11';
+        if (!width) rules += ' ZH12';
     } else if (props.size === "S") {
-        if (!width) rules += ' ZF11';
+        if (!width) rules += ' ZF12';
     }
     if (props.size === "L") {
-        if (!height) rules += ' Fr11';
+        if (!height) rules += ' Fr12';
     } else if (props.size === "M") {
-        if (!height) rules += ' FB11';
+        if (!height) rules += ' FB12';
     } else if (props.size === "S") {
-        if (!height) rules += ' Fz11';
+        if (!height) rules += ' Fz12';
     }
-    rules += ' _va11';
+    rules += ' _va12';
     return rules;
 };
 function $bde97c91243ed164$export$4d00e7be716a0093(Component) {

package/icons/Icon.css

@@ -1,37 +1,37 @@
 @layer _.a {
-  .Zm11 {
+  .Zm12 {
     width: calc(1.25rem * var(--s2-scale));
   }
 
-  .Fn11 {
+  .Fn12 {
     height: calc(1.25rem * var(--s2-scale));
   }
 
-  .ZF11 {
+  .ZF12 {
     width: calc(3rem * var(--s2-scale));
   }
 
-  .ZH11 {
+  .ZH12 {
     width: calc(6rem * var(--s2-scale));
   }
 
-  .Zq11 {
+  .Zq12 {
     width: calc(10rem * var(--s2-scale));
   }
 
-  .Fz11 {
+  .Fz12 {
     height: calc(3rem * var(--s2-scale));
   }
 
-  .FB11 {
+  .FB12 {
     height: calc(6rem * var(--s2-scale));
   }
 
-  .Fr11 {
+  .Fr12 {
     height: calc(10rem * var(--s2-scale));
   }
 
-  ._va11 {
+  ._va12 {
     flex-shrink: 0;
   }
 }

package/icons/Icon.mjs

@@ -62,9 +62,9 @@ const $ac8c32e6775ddd1f$var$iconStyles = function anonymous(props, overrides) {
         if (p[1] === "F") height = true;
         rules += p[0];
     }
-    if (!width) rules += ' Zm11';
-    if (!height) rules += ' Fn11';
-    rules += ' _va11';
+    if (!width) rules += ' Zm12';
+    if (!height) rules += ' Fn12';
+    rules += ' _va12';
     return rules;
 };
 function $ac8c32e6775ddd1f$export$274edc73af1ae9c8(Component, context = $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed) {
@@ -105,20 +105,20 @@ const $ac8c32e6775ddd1f$var$illustrationStyles = function anonymous(props, overr
         rules += p[0];
     }
     if (props.size === "L") {
-        if (!width) rules += ' Zq11';
+        if (!width) rules += ' Zq12';
     } else if (props.size === "M") {
-        if (!width) rules += ' ZH11';
+        if (!width) rules += ' ZH12';
     } else if (props.size === "S") {
-        if (!width) rules += ' ZF11';
+        if (!width) rules += ' ZF12';
     }
     if (props.size === "L") {
-        if (!height) rules += ' Fr11';
+        if (!height) rules += ' Fr12';
     } else if (props.size === "M") {
-        if (!height) rules += ' FB11';
+        if (!height) rules += ' FB12';
     } else if (props.size === "S") {
-        if (!height) rules += ' Fz11';
+        if (!height) rules += ' Fz12';
     }
-    rules += ' _va11';
+    rules += ' _va12';
     return rules;
 };
 function $ac8c32e6775ddd1f$export$4d00e7be716a0093(Component) {

package/icons/Skeleton.cjs

@@ -97,7 +97,7 @@ function $5eb75e0c130e0669$export$cb6ddd830302c2a8({ children: children }) {
         // @ts-ignore - compatibility with React < 19
         inert: (0, $lzdFu$reactariautils.inertValue)(true),
         ref: $5eb75e0c130e0669$export$6b288fe07640c94c(true),
-        className: $5eb75e0c130e0669$export$d2353276f167b21f + " pw11 _ma11 oa11 na11 ka11 ja11",
+        className: $5eb75e0c130e0669$export$d2353276f167b21f + " pw12 _ma12 oa12 na12 ka12 ja12",
         children: children
     });
 }
@@ -118,7 +118,7 @@ function $5eb75e0c130e0669$export$6069cbe61f690103({ children: children }) {
 }
 function $5eb75e0c130e0669$export$4b7803c08fe9a32b(styles) {
     let isSkeleton = (0, $lzdFu$react.useContext)($5eb75e0c130e0669$export$74e166679b1f49ee);
-    if (isSkeleton) return (0, $308b180f49d82d28$exports.mergeStyles)(" oa11 na11 ka11 ja11", styles);
+    if (isSkeleton) return (0, $308b180f49d82d28$exports.mergeStyles)(" oa12 na12 ka12 ja12", styles);
     return styles || '';
 }
 

package/icons/Skeleton.css

@@ -12,28 +12,28 @@
 }
 
 @layer _.a {
-  .pw11 {
+  .pw12 {
     color: #0000;
   }
 
-  ._ma11 {
+  ._ma12 {
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
   }
 
-  .oa11 {
+  .oa12 {
     border-start-start-radius: .25rem;
   }
 
-  .na11 {
+  .na12 {
     border-start-end-radius: .25rem;
   }
 
-  .ka11 {
+  .ka12 {
     border-end-start-radius: .25rem;
   }
 
-  .ja11 {
+  .ja12 {
     border-end-end-radius: .25rem;
   }
 }

package/icons/Skeleton.mjs

@@ -84,7 +84,7 @@ function $5ad421ec19460c48$export$cb6ddd830302c2a8({ children: children }) {
         // @ts-ignore - compatibility with React < 19
         inert: (0, $cHM3s$inertValue)(true),
         ref: $5ad421ec19460c48$export$6b288fe07640c94c(true),
-        className: $5ad421ec19460c48$export$d2353276f167b21f + " pw11 _ma11 oa11 na11 ka11 ja11",
+        className: $5ad421ec19460c48$export$d2353276f167b21f + " pw12 _ma12 oa12 na12 ka12 ja12",
         children: children
     });
 }
@@ -105,7 +105,7 @@ function $5ad421ec19460c48$export$6069cbe61f690103({ children: children }) {
 }
 function $5ad421ec19460c48$export$4b7803c08fe9a32b(styles) {
     let isSkeleton = (0, $cHM3s$useContext)($5ad421ec19460c48$export$74e166679b1f49ee);
-    if (isSkeleton) return (0, $feb886035e0d4633$export$e618dc39ac9ad607)(" oa11 na11 ka11 ja11", styles);
+    if (isSkeleton) return (0, $feb886035e0d4633$export$e618dc39ac9ad607)(" oa12 na12 ka12 ja12", styles);
     return styles || '';
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/s2",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Spectrum 2 UI components in React",
   "license": "Apache-2.0",
   "repository": {
@@ -77,30 +77,30 @@
     "src"
   ],
   "dependencies": {
-    "@internationalized/date": "^3.11.0",
+    "@internationalized/date": "^3.12.0",
     "@internationalized/number": "^3.6.5",
     "@parcel/macros": "^2.16.3",
-    "@react-aria/calendar": "^3.9.4",
-    "@react-aria/collections": "^3.0.2",
-    "@react-aria/focus": "^3.21.4",
-    "@react-aria/i18n": "^3.12.15",
-    "@react-aria/interactions": "^3.27.0",
+    "@react-aria/calendar": "^3.9.5",
+    "@react-aria/collections": "^3.0.3",
+    "@react-aria/focus": "^3.21.5",
+    "@react-aria/i18n": "^3.12.16",
+    "@react-aria/interactions": "^3.27.1",
     "@react-aria/live-announcer": "^3.4.4",
-    "@react-aria/utils": "^3.33.0",
-    "@react-spectrum/utils": "^3.12.11",
-    "@react-stately/layout": "^4.5.3",
+    "@react-aria/utils": "^3.33.1",
+    "@react-spectrum/utils": "^3.12.12",
+    "@react-stately/layout": "^4.6.0",
     "@react-stately/utils": "^3.11.0",
-    "@react-types/dialog": "^3.5.23",
-    "@react-types/grid": "^3.3.7",
-    "@react-types/overlays": "^3.9.3",
-    "@react-types/provider": "^3.8.14",
-    "@react-types/shared": "^3.33.0",
-    "@react-types/table": "^3.13.5",
-    "@react-types/textfield": "^3.12.7",
+    "@react-types/dialog": "^3.5.24",
+    "@react-types/grid": "^3.3.8",
+    "@react-types/overlays": "^3.9.4",
+    "@react-types/provider": "^3.8.15",
+    "@react-types/shared": "^3.33.1",
+    "@react-types/table": "^3.13.6",
+    "@react-types/textfield": "^3.12.8",
     "csstype": "^3.0.2",
-    "react-aria": "^3.46.0",
-    "react-aria-components": "^1.15.0",
-    "react-stately": "^3.44.0"
+    "react-aria": "^3.47.0",
+    "react-aria-components": "^1.16.0",
+    "react-stately": "^3.45.0"
   },
   "peerDependencies": {
     "react": "^19.0.0-rc.1",
@@ -109,5 +109,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "66e51757606b43a89ed02c574ca24517323a2ab9"
+  "gitHead": "8df187370053aa35f553cb388ad670f65e1ab371"
 }

package/src/ComboBox.tsx

@@ -33,7 +33,7 @@ import {
   SectionProps,
   Virtualizer
 } from 'react-aria-components';
-import {AsyncLoadable, GlobalDOMAttributes, HelpTextProps, LoadingState, SpectrumLabelableProps} from '@react-types/shared';
+import {AsyncLoadable, GlobalDOMAttributes, HelpTextProps, LoadingState, SingleSelection, SpectrumLabelableProps} from '@react-types/shared';
 import {AvatarContext} from './Avatar';
 import {BaseCollection, CollectionNode, createLeafComponent} from '@react-aria/collections';
 import {baseColor, focusRing, space, style} from '../style' with {type: 'macro'};
@@ -79,7 +79,8 @@ export interface ComboboxStyleProps {
   size?: 'S' | 'M' | 'L' | 'XL'
 }
 export interface ComboBoxProps<T extends object> extends
-  Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'render' | 'defaultFilter' | 'allowsEmptyCollection' | keyof GlobalDOMAttributes>,
+  Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'render' | 'defaultFilter' | 'allowsEmptyCollection' | 'selectionMode' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange' | 'value' | 'defaultValue' | 'onChange' | keyof GlobalDOMAttributes>,
+  Omit<SingleSelection, 'disallowEmptySelection'>,
   ComboboxStyleProps,
   StyleProps,
   SpectrumLabelableProps,
@@ -368,7 +369,7 @@ export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Co
   );
 });
 
-export interface ComboBoxItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className' | 'render' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps {
+export interface ComboBoxItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className' | 'render' | 'onClick' | 'onKeyDown' | 'onKeyUp' | keyof GlobalDOMAttributes>, StyleProps {
   children: ReactNode
 }
 

package/src/ContextualHelp.tsx

@@ -1,11 +1,11 @@
 import {ActionButton} from './ActionButton';
 import {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';
-import {ContentContext, FooterContext, HeadingContext} from './Content';
-import {ContextValue, DEFAULT_SLOT, Provider, Dialog as RACDialog, TextContext} from 'react-aria-components';
+import {ContentContext, FooterContext, HeadingContext, TextContext as SpectrumTextContext} from './Content';
+import {ContextValue, DEFAULT_SLOT, Provider, TextContext} from 'react-aria-components';
 import {createContext, forwardRef, ReactNode} from 'react';
 import {dialogInner} from './Dialog';
 import {DialogTrigger, DialogTriggerProps} from './DialogTrigger';
-import {filterDOMProps, mergeProps, useLabels} from '@react-aria/utils';
+import {filterDOMProps, mergeProps, useId, useLabels} from '@react-aria/utils';
 import HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';
 import InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';
 // @ts-ignore
@@ -18,6 +18,80 @@ import {StyleProps} from './style-utils' with { type: 'macro' };
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
+export interface ContextualHelpPopoverProps extends PopoverDialogProps {
+  /**
+   * The children of the contextual help popover. Supports Heading, Content, and Footer elements. */
+  children: ReactNode
+}
+
+const wrappingDiv = style({
+  minWidth: 268,
+  width: 268,
+  padding: 24,
+  boxSizing: 'border-box',
+  height: 'full'
+});
+
+const headingStyles = style({
+  font: 'heading-xs',
+  margin: 0,
+  marginBottom: space(8) // This only makes it 10px on mobile and should be 12px
+});
+
+// TODO: docs to come after release, for now this is just mentioned in unavaiable menu docs
+/**
+ * A popover with contextual help styling that supports Heading, Content, and Footer.
+ */
+export function ContextualHelpPopover(props: ContextualHelpPopoverProps) {
+  let {children, ...popoverProps} = props;
+  let titleId = useId();
+
+  return (
+    <Popover
+      padding="none"
+      hideArrow
+      aria-labelledby={titleId}
+      {...popoverProps}>
+      <div
+        className={wrappingDiv}>
+        <div
+
+          className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: 'calc(self(paddingTop) * -1)', padding: 24}))}>
+          <Provider
+            values={[
+              [TextContext, {
+                slots: {
+                  [DEFAULT_SLOT]: {}
+                }
+              }],
+              // Make sure to clear context from above Menu
+              [SpectrumTextContext, null],
+              [HeadingContext, {
+                styles: headingStyles,
+                slots: {
+                  // needed so combobox/picker does not need to provide slot="title" to their provided
+                  // ContextualHelp (they get the aria-labelled by from the button)
+                  // otherwise, use the heading if available aka unavaiable menu item
+                  [DEFAULT_SLOT]: {styles: headingStyles},
+                  title: {id: titleId, styles: headingStyles, level: 2}
+                }
+              }],
+              [ContentContext, {styles: style({
+                font: 'body-sm'
+              })}],
+              [FooterContext, {styles: style({
+                font: 'body-sm',
+                marginTop: 16
+              })}]
+            ]}>
+            {children}
+          </Provider>
+        </div>
+      </div>
+    </Popover>
+  );
+}
+
 export interface ContextualHelpStyleProps {
   /**
    * Indicates whether contents are informative or provides helpful guidance.
@@ -45,14 +119,6 @@ export interface ContextualHelpProps extends
   size?: 'XS' | 'S'
 }
 
-const wrappingDiv = style({
-  minWidth: 268,
-  width: 268,
-  padding: 24,
-  boxSizing: 'border-box',
-  height: 'full'
-});
-
 export const ContextualHelpContext = createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(null);
 
 /**
@@ -102,42 +168,14 @@ export const ContextualHelp = forwardRef(function ContextualHelp(props: Contextu
         isQuiet>
         {variant === 'info' ? <InfoIcon /> : <HelpIcon />}
       </ActionButton>
-      <Popover
-        padding="none"
+      <ContextualHelpPopover
         placement={placement}
         shouldFlip={shouldFlip}
         containerPadding={containerPadding}
         offset={8}
-        crossOffset={crossOffset}
-        hideArrow>
-        <div
-          className={wrappingDiv}>
-          <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: 'calc(self(paddingTop) * -1)', padding: 24}))}>
-            <Provider
-              values={[
-                [TextContext, {
-                  slots: {
-                    [DEFAULT_SLOT]: {}
-                  }
-                }],
-                [HeadingContext, {styles: style({
-                  font: 'heading-xs',
-                  margin: 0,
-                  marginBottom: space(8) // This only makes it 10px on mobile and should be 12px
-                })}],
-                [ContentContext, {styles: style({
-                  font: 'body-sm'
-                })}],
-                [FooterContext, {styles: style({
-                  font: 'body-sm',
-                  marginTop: 16
-                })}]
-              ]}>
-              {children}
-            </Provider>
-          </RACDialog>
-        </div>
-      </Popover>
+        crossOffset={crossOffset}>
+        {children}
+      </ContextualHelpPopover>
     </DialogTrigger>
   );
 });

package/src/Field.tsx

@@ -19,13 +19,13 @@ import {composeRenderProps, FieldError, FieldErrorProps, Group, GroupProps, Labe
 import {ContextualHelpContext} from './ContextualHelp';
 import {control, controlFont, fieldInput, fieldLabel, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {ForwardedRef, forwardRef, ReactNode} from 'react';
+import {getEventTarget, useId} from '@react-aria/utils';
 import {IconContext} from './Icon';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {mergeStyles} from '../style/runtime';
 import {StyleString} from '../style/types';
 import {useDOMRef} from '@react-spectrum/utils';
-import {useId} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 interface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'render' | 'children'>, StyleProps {
@@ -207,13 +207,13 @@ export const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps,
       {...otherProps}
       onPointerDown={(e) => {
         // Forward focus to input element when clicking on a non-interactive child (e.g. icon or padding)
-        if (e.pointerType === 'mouse' && !(e.target as Element).closest('button,input,textarea,[role="button"]')) {
+        if (e.pointerType === 'mouse' && !(getEventTarget(e) as Element).closest('button,input,textarea,[role="button"]')) {
           e.preventDefault();
           (e.currentTarget.querySelector('input, textarea') as HTMLElement)?.focus();
         }
       }}
       onTouchEnd={e => {
-        let target = e.target as HTMLElement;
+        let target = getEventTarget(e) as HTMLElement;
         if (!target.isContentEditable && !target.closest('button,input,textarea,[role="button"]')) {
           e.preventDefault();
           (e.currentTarget.querySelector('input, textarea') as HTMLElement)?.focus();