Repository: adobe/react-spectrum
File: packages/@react-spectrum/s2/src/Picker.tsx (TypeScript)

Code before:
    }
    setPressed(true);
    addGlobalListener(document, 'pointerup', () => {
      setPressed(false);
    }, {once: true, capture: true});
  };

  return (
    <PressResponder onPressStart={onPressStart} isPressed={isPressed}>
      <Button
        ref={buttonRef}
        style={renderProps => pressScale(buttonRef)(renderProps)}
        className={renderProps => inputButton({
          ...renderProps,
          size: size,
          isOpen,
          isQuiet
        })}>
        {(renderProps) => (
          <>
            <SelectValue
              className={
                valueStyles({isQuiet}) +
                (renderValue ? '' : ' ' + raw('&> :not([slot=icon], [slot=avatar], [slot=label], [data-slot=label]) {display: none;}'))
              }>
              {({selectedItems, defaultChildren}) => {
                const selectedValues = selectedItems.filter((item): item is T => item != null);
                const defaultRenderedValue = selectedValues.length <= 1
                  ? defaultChildren
                  : <Text slot="label">{stringFormatter.format('picker.selectedCount', {count: selectedValues.length})}</Text>;
                const renderedValue = selectedValues.length > 0 && renderValue
                  ? renderValue(selectedValues)
                  : defaultRenderedValue;

                return (
                  <Provider
                    values={[
                      [IconContext, {
                        slots: {
                          icon: {
                            render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),
                            styles: icon
                          }
                        }
                      }],
                      [AvatarContext, {
                        slots: {
                          avatar: {
                            size: avatarSize[size ?? 'M'],
                            styles: avatar
                          }

Review comment (suggestion):
This was quite restrictive in allowing us our own layouts. This should allow custom layouts only through `renderValue` and not via slot manipulation.

Code after:
    setPressed(true);
    addGlobalListener(document, 'pointerup', () => {
      setPressed(false);
    }, {once: true, capture: true});
  };

  return (
    <PressResponder onPressStart={onPressStart} isPressed={isPressed}>
      <Button
        ref={buttonRef}
        style={renderProps => pressScale(buttonRef)(renderProps)}
        // Prevent press scale from sticking while Picker is open.
        // @ts-ignore
        isPressed={false}
        className={renderProps => inputButton({
          ...renderProps,
          size: size,
          isOpen,
          isQuiet
        })}>
        {(renderProps) => (
          <>
            <SelectValue
              className={
                valueStyles({isQuiet}) +
                (renderValue ? '' : ' ' + raw('&> :not([slot=icon], [slot=avatar], [slot=label], [data-slot=label]) {display: none;}'))
              }>
              {({selectedItems, defaultChildren}) => {
                const selectedValues = selectedItems.filter((item): item is T => item != null);
                const defaultRenderedValue = selectedItems.length <= 1
                  ? defaultChildren
                  : <Text slot="label">{stringFormatter.format('picker.selectedCount', {count: selectedItems.length})}</Text>;
                const renderedValue = selectedItems.length > 0 && renderValue
                  ? renderValue(selectedValues)
                  : defaultRenderedValue;

                return (
                  <Provider
                    values={[
                      [IconContext, {
                        slots: {
                          icon: {
                            render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),
                            styles: icon
                          }
                        }
                      }],
                      [AvatarContext, {
                        slots: {
                          avatar: {
                            size: avatarSize[size ?? 'M'],