@react-spectrum/s2 3.0.0-nightly-fee532d6a-241217 → 3.0.0-nightly-50c7ada5d-241219

package/src/ActionBar.tsx

@@ -0,0 +1,235 @@
+/*
+ * 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 {ActionButtonGroup} from './ActionButtonGroup';
+import {announce} from '@react-aria/live-announcer';
+import {CloseButton} from './CloseButton';
+import {ContextValue, SlotProps} from 'react-aria-components';
+import {createContext, ForwardedRef, forwardRef, ReactElement, ReactNode, RefObject, useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {DOMRef, DOMRefValue, Key} from '@react-types/shared';
+import {FocusScope, useKeyboard} from 'react-aria';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {keyframes} from '../style/style-macro' with {type: 'macro'};
+import {style} from '../style' with {type: 'macro'};
+import {useControlledState} from '@react-stately/utils';
+import {useDOMRef} from '@react-spectrum/utils';
+import {useExitAnimation, useResizeObserver} from '@react-aria/utils';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
+
+const slideIn = keyframes(`
+  from { transform: translateY(100%); opacity: 0 }
+  to { transform: translateY(0px); opacity: 1 }
+`);
+
+const slideOut = keyframes(`
+  from { transform: translateY(0px); opacity: 1 }
+  to { transform: translateY(100%); opacity: 0 }
+`);
+
+const actionBarStyles = style({
+  borderRadius: 'lg',
+  '--s2-container-bg': {
+    type: 'backgroundColor',
+    value: {
+      default: 'elevated',
+      isEmphasized: 'neutral'
+    }
+  },
+  backgroundColor: '--s2-container-bg',
+  boxShadow: 'elevated',
+  boxSizing: 'border-box',
+  outlineStyle: 'solid',
+  outlineWidth: 1,
+  outlineOffset: -1,
+  outlineColor: {
+    default: 'gray-200',
+    isEmphasized: 'transparent',
+    forcedColors: 'ButtonBorder'
+  },
+  paddingX: 8,
+  paddingY: 12,
+  display: 'flex',
+  gap: 16,
+  alignItems: 'center',
+  position: {
+    isInContainer: 'absolute'
+  },
+  bottom: 8,
+  insetStart: 8,
+  '--insetEnd': {
+    type: 'insetEnd',
+    value: 8
+  },
+  width: {
+    default: 'full',
+    isInContainer: 'auto'
+  },
+  marginX: 'auto',
+  maxWidth: 960,
+  animation: {
+    isInContainer: slideIn,
+    isExiting: slideOut
+  },
+  animationDuration: 200
+});
+
+export interface ActionBarProps extends SlotProps {
+  /** A list of ActionButtons to display. */
+  children: ReactNode,
+  /** Whether the ActionBar should be displayed with a emphasized style. */
+  isEmphasized?: boolean,
+  /** The number of selected items that the ActionBar is currently linked to. If 0, the ActionBar is hidden. */
+  selectedItemCount?: number | 'all',
+  /** Handler that is called when the ActionBar clear button is pressed. */
+  onClearSelection?: () => void,
+  /** A ref to the scrollable element the ActionBar appears above. */
+  scrollRef?: RefObject<HTMLElement | null>
+}
+
+export const ActionBarContext = createContext<ContextValue<Partial<ActionBarProps>, DOMRefValue<HTMLDivElement>>>(null);
+
+export const ActionBar = forwardRef(function ActionBar(props: ActionBarProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, ActionBarContext);
+  let domRef = useDOMRef(ref);
+
+  let isOpen = props.selectedItemCount !== 0;
+  let isExiting = useExitAnimation(domRef, isOpen && props.scrollRef != null);
+  if (!isOpen && !isExiting) {
+    return null;
+  }
+
+  return <ActionBarInner {...props} ref={domRef} isExiting={isExiting} />;
+});
+
+const ActionBarInner = forwardRef(function ActionBarInner(props: ActionBarProps & {isExiting: boolean}, ref: ForwardedRef<HTMLDivElement | null>) {
+  let {isEmphasized, selectedItemCount = 0, children, onClearSelection, isExiting} = props;
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
+
+  // Store the last count greater than zero so that we can retain it while rendering the fade-out animation.
+  let [lastCount, setLastCount] = useState(selectedItemCount);
+  if ((selectedItemCount === 'all' || selectedItemCount > 0) && selectedItemCount !== lastCount) {
+    setLastCount(selectedItemCount);
+  }
+    
+  // Measure the width of the collection's scrollbar and offset the action bar by that amount.
+  let scrollRef = props.scrollRef;
+  let [scrollbarWidth, setScrollbarWidth] = useState(0);
+  let updateScrollbarWidth = useCallback(() => {
+    let el = scrollRef?.current;
+    if (el) {
+      let w = el.offsetWidth - el.clientWidth;
+      setScrollbarWidth(w);
+    }
+  }, [scrollRef]);
+
+  useResizeObserver({
+    ref: scrollRef,
+    onResize: updateScrollbarWidth
+  });
+
+  let {keyboardProps} = useKeyboard({
+    onKeyDown(e) {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onClearSelection?.();
+      } else {
+        e.continuePropagation();
+      }
+    }
+  });
+
+  // Announce "actions available" on mount.
+  let isInitial = useRef(true);
+  useEffect(() => {
+    if (isInitial.current && scrollRef) {
+      isInitial.current = false;
+      announce(stringFormatter.format('actionbar.actionsAvailable'));
+    }
+  }, [stringFormatter, scrollRef]);
+
+  return (
+    <FocusScope restoreFocus>
+      <div
+        ref={ref}
+        {...keyboardProps}
+        className={actionBarStyles({isEmphasized, isInContainer: !!scrollRef, isExiting})}
+        style={{insetInlineEnd: `calc(var(--insetEnd) + ${scrollbarWidth}px)`}}>
+        <div className={style({order: 1, marginStart: 'auto'})}>
+          <ActionButtonGroup
+            staticColor={isEmphasized ? 'auto' : undefined}
+            isQuiet
+            aria-label={stringFormatter.format('actionbar.actions')}>
+            {children}
+          </ActionButtonGroup>
+        </div>
+        <div className={style({order: 0, display: 'flex', alignItems: 'center', gap: 4})}>
+          <CloseButton
+            staticColor={isEmphasized ? 'auto' : undefined}
+            aria-label={stringFormatter.format('actionbar.clearSelection')}
+            onPress={() => onClearSelection?.()} />
+          <span className={style({font: 'ui', color: {default: 'neutral', isEmphasized: 'gray-25'}})({isEmphasized})}>
+            {lastCount === 'all'
+              ? stringFormatter.format('actionbar.selectedAll')
+              : stringFormatter.format('actionbar.selected', {count: lastCount})}
+          </span>
+        </div>
+      </div>
+    </FocusScope>
+  );
+});
+
+interface ActionBarContainerHookProps {
+  selectedKeys?: 'all' | Iterable<Key>,
+  defaultSelectedKeys?: 'all' | Iterable<Key>,
+  onSelectionChange?: (keys: Set<Key>) => void,
+  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement,
+  scrollRef?: RefObject<HTMLElement | null>
+}
+
+export function useActionBarContainer(props: ActionBarContainerHookProps) {
+  let {renderActionBar, scrollRef} = props;
+  let [selectedKeys, setSelectedKeys] = useControlledState(props.selectedKeys, props.defaultSelectedKeys || new Set(), props.onSelectionChange);
+  let selectedKeysSet = useMemo(() => selectedKeys === 'all' ? selectedKeys as 'all' : new Set(selectedKeys), [selectedKeys]);
+  let actionBar = useMemo(() => renderActionBar?.(selectedKeysSet), [renderActionBar, selectedKeysSet]);
+  let selectedItemCount = selectedKeysSet === 'all' ? 'all' as const : selectedKeysSet.size;
+  let [actionBarHeight, setActionBarHeight] = useState(0);
+  let actionBarRef = useCallback((ref: DOMRefValue | null) => {
+    let actionBar = ref?.UNSAFE_getDOMNode();
+    if (actionBar) {
+      setActionBarHeight(actionBar.offsetHeight + 8);
+    } else {
+      setActionBarHeight(0);
+    }
+  }, []);
+
+  let actionBarContext = useMemo(() => ({
+    ref: actionBarRef,
+    scrollRef,
+    selectedItemCount,
+    onClearSelection: () => setSelectedKeys(new Set())
+  }), [scrollRef, actionBarRef, selectedItemCount, setSelectedKeys]);
+
+  let wrappedActionBar = useMemo(() => (
+    <ActionBarContext.Provider value={actionBarContext}>
+      {actionBar}
+    </ActionBarContext.Provider>
+  ), [actionBarContext, actionBar]);
+
+  return {
+    selectedKeys,
+    onSelectionChange: setSelectedKeys,
+    actionBar: wrappedActionBar,
+    actionBarHeight
+  };
+}

package/src/ActionButtonGroup.tsx

@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {AriaLabelingProps} from '@react-types/shared';
 import {ContextValue, SlotProps, Toolbar} from 'react-aria-components';
 import {createContext, ForwardedRef, forwardRef, ReactNode} from 'react';
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface ActionButtonGroupProps extends UnsafeStyles, SlotProps {
+export interface ActionButtonGroupProps extends AriaLabelingProps, UnsafeStyles, SlotProps {
   /** Spectrum-defined styles, returned by the `style()` macro. */
   styles?: StylesPropWithHeight,
   /** The children of the group. */
@@ -71,7 +72,7 @@ export const actionGroupStyle = style({
 }, getAllowedOverrides({height: true}));
 
 
-export const ActionButtonGroupContext = createContext<ContextValue<ActionButtonGroupProps, HTMLDivElement>>(null);
+export const ActionButtonGroupContext = createContext<ContextValue<Partial<ActionButtonGroupProps>, HTMLDivElement>>(null);
 
 /**
  * An ActionButtonGroup is a grouping of related ActionButtons.

package/src/Button.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};
+import {baseColor, focusRing, fontRelative, linearGradient, style} from '../style' with {type: 'macro'};
 import {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
 import {centerPadding, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
@@ -34,7 +34,7 @@ interface ButtonStyleProps {
    *
    * @default 'primary'
    */
-  variant?: 'primary' | 'secondary' | 'accent' | 'negative',
+  variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai',
   /**
    * The background style of the Button.
    *
@@ -102,6 +102,10 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
     fillStyle: {
       fill: 0,
       outline: 2
+    },
+    variant: {
+      premium: 0,
+      genai: 0
     }
   },
   '--labelPadding': {
@@ -134,6 +138,25 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
       isDisabled: 'GrayText'
     }
   },
+  backgroundImage: {
+    variant: {
+      premium: {
+        default: linearGradient('96deg', ['fuchsia-900', 0], ['indigo-900', 66], ['blue-900', 100]),
+        isHovered: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),
+        isPressed: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),
+        isFocusVisible: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100])
+      },
+      genai: {
+        default: linearGradient('96deg', ['red-900', 0], ['magenta-900', 33], ['indigo-900', 100]),
+        isHovered: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),
+        isPressed: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),
+        isFocusVisible: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100])
+      }
+    },
+    isDisabled: 'none',
+    isPending: 'none',
+    forcedColors: 'none'
+  },
   backgroundColor: {
     fillStyle: {
       fill: {
@@ -141,11 +164,17 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
           primary: 'neutral',
           secondary: baseColor('gray-100'),
           accent: 'accent',
-          negative: 'negative'
+          negative: 'negative',
+          premium: 'gray-100',
+          genai: 'gray-100'
         },
         isDisabled: 'disabled'
       },
       outline: {
+        variant: {
+          premium: 'gray-100',
+          genai: 'gray-100'
+        },
         default: 'transparent',
         isHovered: 'gray-100',
         isPressed: 'gray-100',
@@ -158,11 +187,17 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
         fill: {
           variant: {
             primary: baseColor('transparent-overlay-800'),
-            secondary: baseColor('transparent-overlay-100')
+            secondary: baseColor('transparent-overlay-100'),
+            premium: 'gray-800',
+            genai: 'gray-800'
           },
           isDisabled: 'transparent-overlay-100'
         },
         outline: {
+          variant: {
+            premium: 'gray-800',
+            genai: 'gray-800'
+          },
           default: 'transparent',
           isHovered: 'transparent-overlay-100',
           isPressed: 'transparent-overlay-100',
@@ -189,12 +224,18 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
           primary: 'gray-25',
           secondary: 'neutral',
           accent: 'white',
-          negative: 'white'
+          negative: 'white',
+          premium: 'white',
+          genai: 'white'
         },
         isDisabled: 'disabled'
       },
       outline: {
         default: 'neutral',
+        variant: {
+          premium: 'white',
+          genai: 'white'
+        },
         isDisabled: 'disabled'
       }
     },
@@ -203,10 +244,18 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
         fill: {
           variant: {
             primary: 'auto',
-            secondary: baseColor('transparent-overlay-800')
+            secondary: baseColor('transparent-overlay-800'),
+            premium: 'white',
+            genai: 'white'
           }
         },
-        outline: baseColor('transparent-overlay-800')
+        outline: {
+          variant: {
+            premium: 'white',
+            genai: 'white'
+          },
+          default: baseColor('transparent-overlay-800')
+        }
       },
       isDisabled: 'transparent-overlay-400'
     },

package/src/CardView.tsx

@@ -19,12 +19,13 @@ import {
   UNSTABLE_Virtualizer
 } from 'react-aria-components';
 import {CardContext, InternalCardViewContext} from './Card';
-import {createContext, forwardRef, useMemo, useState} from 'react';
+import {createContext, forwardRef, ReactElement, useMemo, useRef, useState} from 'react';
 import {DOMRef, DOMRefValue, forwardRefType, Key, LayoutDelegate, LoadingState, Node} from '@react-types/shared';
 import {focusRing, style} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {ImageCoordinator} from './ImageCoordinator';
 import {InvalidationContext, Layout, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';
+import {useActionBarContainer} from './ActionBar';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useEffectEvent, useLayoutEffect, useLoadMore, useResizeObserver} from '@react-aria/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -60,7 +61,8 @@ export interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'key
   /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */
   onLoadMore?: () => void,
   /** Spectrum-defined styles, returned by the `style()` macro. */
-  styles?: StylesPropWithHeight
+  styles?: StylesPropWithHeight,
+  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement
 }
 
 class FlexibleGridLayout<T extends object> extends Layout<Node<T>, GridLayoutOptions> {
@@ -514,6 +516,7 @@ const cardViewStyles = style({
   display: {
     isEmpty: 'flex'
   },
+  boxSizing: 'border-box',
   flexDirection: 'column',
   alignItems: 'center',
   justifyContent: 'center',
@@ -533,6 +536,8 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
   [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);
   let {children, layout: layoutName = 'grid', size: sizeProp = 'M', density = 'regular', variant = 'primary', selectionStyle = 'checkbox', UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;
   let domRef = useDOMRef(ref);
+  let innerRef = useRef(null);
+  let scrollRef = props.renderActionBar ? innerRef : domRef;
   let layout = useMemo(() => {
     return layoutName === 'waterfall' ? new WaterfallLayout() : new FlexibleGridLayout();
   }, [layoutName]);
@@ -540,7 +545,7 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
   // This calculates the maximum t-shirt size where at least two columns fit in the available width.
   let [maxSizeIndex, setMaxSizeIndex] = useState(SIZES.length - 1);
   let updateSize = useEffectEvent(() => {
-    let w = domRef.current?.clientWidth ?? 0;
+    let w = scrollRef.current?.clientWidth ?? 0;
     let i = SIZES.length - 1;
     while (i > 0) {
       let opts = layoutOptions[SIZES[i]][density];
@@ -553,7 +558,7 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
   });
 
   useResizeObserver({
-    ref: domRef,
+    ref: scrollRef,
     box: 'border-box',
     onResize: updateSize
   });
@@ -570,23 +575,32 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
     isLoading: props.loadingState !== 'idle' && props.loadingState !== 'error',
     items: props.items, // TODO: ideally this would be the collection. items won't exist for static collections, or those using <Collection>
     onLoadMore: props.onLoadMore
-  }, domRef);
+  }, scrollRef);
 
   let ctx = useMemo(() => ({size, variant}), [size, variant]);
 
-  return (
+  let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});
+
+  let cardView = (
     <UNSTABLE_Virtualizer layout={layout} layoutOptions={options}>
       <InternalCardViewContext.Provider value={GridListItem}>
         <CardContext.Provider value={ctx}>
           <ImageCoordinator>
             <AriaGridList
-              ref={domRef}
+              ref={scrollRef}
               {...otherProps}
               layout="grid"
               selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}
+              selectedKeys={selectedKeys}
+              defaultSelectedKeys={undefined}
+              onSelectionChange={onSelectionChange}
               style={{
                 ...UNSAFE_style,
-                scrollPadding: options.minSpace.height
+                // Add padding at the bottom when the action bar is visible so users can scroll to the last items.
+                // Also add scroll padding so keyboard navigating preserves the padding.
+                paddingBottom: actionBarHeight > 0 ? actionBarHeight + options.minSpace.height : 0,
+                scrollPadding: options.minSpace.height,
+                scrollPaddingBottom: actionBarHeight + options.minSpace.height
               }}
               className={renderProps => UNSAFE_className + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading'}, styles)}>
               {children}
@@ -596,4 +610,17 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
       </InternalCardViewContext.Provider>
     </UNSTABLE_Virtualizer>
   );
+
+  // Add extra wrapper if there is an action bar so we can position relative to it.
+  // ActionBar cannot be inside the GridList due to ARIA and focus management requirements.
+  if (props.renderActionBar) {
+    return (
+      <div ref={domRef} className={style({position: 'relative', overflow: 'clip', size: 'fit'})}>
+        {cardView}
+        {actionBar}
+      </div>
+    );
+  }
+
+  return cardView;
 });

package/src/CheckboxGroup.tsx

@@ -120,7 +120,7 @@ export const CheckboxGroup = forwardRef(function CheckboxGroup(props: CheckboxGr
             columnGap: 16,
             flexWrap: 'wrap'
           })({orientation})}>
-          <FormContext.Provider value={{...formContext, size}}>
+          <FormContext.Provider value={{...formContext, size, isRequired: undefined}}>
             <CheckboxContext.Provider value={{isEmphasized}}>
               {children}
             </CheckboxContext.Provider>

package/src/CloseButton.tsx

@@ -23,7 +23,7 @@ import {useFocusableRef} from '@react-spectrum/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled'>, StyleProps {
+export interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled' | 'onPress'>, StyleProps {
   /**
    * The size of the CloseButton.
    *
@@ -34,10 +34,9 @@ export interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled'>, Style
   staticColor?: 'white' | 'black' | 'auto'
 }
 
-// TODO(design): this is inconsistent with ActionButton
 const hoverBackground = {
-  default: 'gray-100',
-  isStaticColor: 'transparent-overlay-100'
+  default: 'gray-200',
+  isStaticColor: 'transparent-overlay-200'
 } as const;
 
 const styles = style({
@@ -91,7 +90,7 @@ export const CloseButton = forwardRef(function CloseButton(props: CloseButtonPro
       {...props}
       ref={domRef}
       slot="close"
-      aria-label={stringFormatter.format('dialog.dismiss')}
+      aria-label={props['aria-label'] || stringFormatter.format('dialog.dismiss')}
       style={pressScale(domRef, UNSAFE_style)}
       className={renderProps => UNSAFE_className + styles({...renderProps, staticColor: props.staticColor, isStaticColor: !!props.staticColor}, props.styles)}>
       <CrossIcon size={({S: 'L', M: 'XL', L: 'XXL', XL: 'XXXL'} as const)[props.size || 'M']} />

package/src/Field.tsx

@@ -127,21 +127,23 @@ export const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps,
         )}
       </Label>
       {contextualHelp && (
-        <CenterBaseline
-          styles={style({
-            display: 'inline-flex',
-            height: 0,
-            marginStart: 4
-          })}>
-          <ContextualHelpContext.Provider
-            value={{
-              id: contextualHelpId,
-              'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined,
-              size: (size === 'L' || size === 'XL') ? 'S' : 'XS'
-            }}>
-            {contextualHelp}
-          </ContextualHelpContext.Provider>
-        </CenterBaseline>
+        <span className={style({whiteSpace: 'nowrap'})}>
+          &nbsp;
+          <CenterBaseline
+            styles={style({
+              display: 'inline-flex',
+              height: 0
+            })}>
+            <ContextualHelpContext.Provider
+              value={{
+                id: contextualHelpId,
+                'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined,
+                size: (size === 'L' || size === 'XL') ? 'S' : 'XS'
+              }}>
+              {contextualHelp}
+            </ContextualHelpContext.Provider>
+          </CenterBaseline>
+        </span>
       )}
     </div>
   );

package/src/InlineAlert.tsx

@@ -60,7 +60,6 @@ const inlineAlert = style<InlineStylesProps & {isFocusVisible?: boolean}>({
   display: 'inline-block',
   position: 'relative',
   boxSizing: 'border-box',
-  maxWidth: 320,
   padding: 24,
   borderRadius: 'lg',
   borderStyle: 'solid',

package/src/Menu.tsx

@@ -487,8 +487,8 @@ export function MenuItem(props: MenuItemProps) {
                 [KeyboardContext, {styles: keyboard({size, isDisabled: renderProps.isDisabled})}],
                 [ImageContext, {styles: image({size})}]
               ]}>
-              {renderProps.selectionMode === 'single' && !isLink && !renderProps.hasSubmenu && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}
-              {renderProps.selectionMode === 'multiple' && !isLink && !renderProps.hasSubmenu && (
+              {renderProps.selectionMode === 'single' && !renderProps.hasSubmenu && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}
+              {renderProps.selectionMode === 'multiple' && !renderProps.hasSubmenu && (
                 <div className={mergeStyles(checkbox, box(checkboxRenderProps))}>
                   <CheckmarkIcon size={size} className={iconStyles} />
                 </div>