@react-spectrum/s2 1.3.1 → 1.5.0

package/src/ColorField.tsx

@@ -10,35 +10,64 @@
  * governing permissions and limitations under the License.
  */
 
-import {ColorField as AriaColorField, ColorFieldProps as AriaColorFieldProps} from 'react-aria-components/ColorField';
-
+import {
+  ColorField as AriaColorField,
+  ColorFieldProps as AriaColorFieldProps
+} from 'react-aria-components/ColorField';
 import {ContextValue} from 'react-aria-components/slots';
-import {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';
+import {
+  createContext,
+  forwardRef,
+  ReactNode,
+  Ref,
+  useContext,
+  useImperativeHandle,
+  useRef
+} from 'react';
 import {createFocusableRef} from './useDOMRef';
 import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
 import {FormContext, useFormProps} from './Form';
 import {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
-import {InputProps} from 'react-aria-components/Input';
+import {InputContext, InputProps} from 'react-aria-components/Input';
+import {mergeRefs} from 'react-aria/mergeRefs';
 import {style} from '../style' with {type: 'macro'};
 import {TextFieldRef} from './TextField';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick<InputProps, 'placeholder'> {
+export interface ColorFieldProps
+  extends
+    Omit<
+      AriaColorFieldProps,
+      'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes
+    >,
+    StyleProps,
+    SpectrumLabelableProps,
+    HelpTextProps,
+    Pick<InputProps, 'placeholder'> {
   /**
    * The size of the color field.
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL'
+  size?: 'S' | 'M' | 'L' | 'XL';
+  /**
+   * The prefix to display in the ColorField. A non-interactive element that appears before the
+   * input.
+   */
+  prefix?: ReactNode;
 }
 
-export const ColorFieldContext = createContext<ContextValue<Partial<ColorFieldProps>, TextFieldRef>>(null);
+export const ColorFieldContext =
+  createContext<ContextValue<Partial<ColorFieldProps>, TextFieldRef>>(null);
 
 /**
  * A color field allows users to edit a hex color or individual color channel value.
  */
-export const ColorField = forwardRef(function ColorField(props: ColorFieldProps, ref: Ref<TextFieldRef>) {
+export const ColorField = forwardRef(function ColorField(
+  props: ColorFieldProps,
+  ref: Ref<TextFieldRef>
+) {
   [props, ref] = useSpectrumContextProps(props, ref, ColorFieldContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
@@ -75,34 +104,52 @@ export const ColorField = forwardRef(function ColorField(props: ColorFieldProps,
       {...fieldProps}
       ref={domRef}
       style={UNSAFE_style}
-      className={UNSAFE_className + style(field(), getAllowedOverrides())({
-        size: props.size,
-        labelPosition,
-        isInForm: !!formContext
-      }, styles)}>
-      {({isDisabled, isInvalid}) => (<>
-        <FieldLabel
-          isDisabled={isDisabled}
-          isRequired={props.isRequired}
-          size={props.size}
-          labelPosition={labelPosition}
-          labelAlign={labelAlign}
-          necessityIndicator={necessityIndicator}
-          contextualHelp={props.contextualHelp}>
-          {label}
-        </FieldLabel>
-        <FieldGroup size={props.size}>
-          <Input ref={inputRef} />
-          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}
-        </FieldGroup>
-        <HelpText
-          size={props.size}
-          isDisabled={isDisabled}
-          isInvalid={isInvalid}
-          description={description}>
-          {errorMessage}
-        </HelpText>
-      </>)}
+      className={
+        UNSAFE_className +
+        style(field(), getAllowedOverrides())(
+          {
+            size: props.size,
+            labelPosition,
+            isInForm: !!formContext
+          },
+          styles
+        )
+      }>
+      {({isDisabled, isInvalid}) => (
+        <>
+          <FieldLabel
+            isDisabled={isDisabled}
+            isRequired={props.isRequired}
+            size={props.size}
+            labelPosition={labelPosition}
+            labelAlign={labelAlign}
+            necessityIndicator={necessityIndicator}
+            contextualHelp={props.contextualHelp}>
+            {label}
+          </FieldLabel>
+          <FieldGroup prefix={props.prefix} size={props.size}>
+            <InputContext.Consumer>
+              {ctx => (
+                <InputContext.Provider
+                  value={{
+                    ...ctx,
+                    ref: mergeRefs((ctx as any)?.ref, inputRef)
+                  }}>
+                  <Input />
+                </InputContext.Provider>
+              )}
+            </InputContext.Consumer>
+            {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}
+          </FieldGroup>
+          <HelpText
+            size={props.size}
+            isDisabled={isDisabled}
+            isInvalid={isInvalid}
+            description={description}>
+            {errorMessage}
+          </HelpText>
+        </>
+      )}
     </AriaColorField>
   );
 });

package/src/ColorHandle.tsx

@@ -25,8 +25,8 @@ const LOUPE_BORDER_WIDTH = 1;
 const LOUPE_OFFSET = 12; // Offset from handle to loupe
 
 interface ColorHandleProps {
-  containerRef: RefObject<HTMLElement | null>,
-  getPosition: () => {x: number, y: number}
+  containerRef: RefObject<HTMLElement | null>;
+  getPosition: () => {x: number; y: number};
 }
 
 export function ColorHandle({containerRef, getPosition}: ColorHandleProps): ReactNode {
@@ -57,34 +57,39 @@ export function ColorHandle({containerRef, getPosition}: ColorHandleProps): Reac
         }
       })}
       style={({defaultStyle, isDisabled}) => ({
-        background: isDisabled ? undefined : `linear-gradient(${defaultStyle.backgroundColor}, ${defaultStyle.backgroundColor}), repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`,
+        background: isDisabled
+          ? undefined
+          : `linear-gradient(${defaultStyle.backgroundColor}, ${defaultStyle.backgroundColor}), repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`,
         backgroundColor: undefined,
         top: defaultStyle.top || '50%',
         left: defaultStyle.left || '50%'
       })}>
-      {({isDragging, color}) => (<>
-        <div
-          className={style({
-            size: 'full',
-            borderRadius: 'full',
-            boxSizing: 'border-box',
-            borderStyle: 'solid',
-            borderWidth: 1,
-            borderColor: {
-              default: 'black/42',
-              forcedColors: 'ButtonBorder'
-            }
-          })} />
-        <ColorLoupePortal isOpen={isDragging}>
-          <ColorLoupe containerRef={containerRef} color={color} getPosition={getPosition} />
-        </ColorLoupePortal>
-      </>)}
+      {({isDragging, color}) => (
+        <>
+          <div
+            className={style({
+              size: 'full',
+              borderRadius: 'full',
+              boxSizing: 'border-box',
+              borderStyle: 'solid',
+              borderWidth: 1,
+              borderColor: {
+                default: 'black/42',
+                forcedColors: 'ButtonBorder'
+              }
+            })}
+          />
+          <ColorLoupePortal isOpen={isDragging}>
+            <ColorLoupe containerRef={containerRef} color={color} getPosition={getPosition} />
+          </ColorLoupePortal>
+        </>
+      )}
     </ColorThumb>
   );
 }
 
 // ColorLoupe is rendered in a portal so that it breaks out of clipped/scrolling containers (e.g. popovers).
-function ColorLoupePortal({isOpen, children}: { isOpen: boolean, children: JSX.Element }) {
+function ColorLoupePortal({isOpen, children}: {isOpen: boolean; children: JSX.Element}) {
   let [state, setState] = useState(isOpen ? 'open' : 'closed');
   if (isOpen && state === 'closed') {
     setState('open');
@@ -95,7 +100,10 @@ function ColorLoupePortal({isOpen, children}: { isOpen: boolean, children: JSX.E
   }
 
   if (isOpen || state === 'exiting') {
-    return createPortal(cloneElement(children, {isExiting: state === 'exiting', onExited: () => setState('closed')}), document.body);
+    return createPortal(
+      cloneElement(children, {isExiting: state === 'exiting', onExited: () => setState('closed')}),
+      document.body
+    );
   }
 
   return null;
@@ -170,10 +178,12 @@ function ColorLoupe({isExiting, onExited, containerRef, loupeRef, getPosition, c
       </pattern>
       <path
         d="M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
-        fill={`url(#${patternId})`} />
+        fill={`url(#${patternId})`}
+      />
       <path
         d="M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
-        fill={color.toString()} />
+        fill={color.toString()}
+      />
       <path
         className={style({
           strokeWidth: 1,
@@ -183,7 +193,8 @@ function ColorLoupe({isExiting, onExited, containerRef, loupeRef, getPosition, c
           },
           fill: 'white'
         })}
-        d="M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z" />
+        d="M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
+      />
     </svg>
   );
 }

package/src/ColorSlider.tsx

@@ -10,13 +10,21 @@
  * governing permissions and limitations under the License.
  */
 
-import {ColorSlider as AriaColorSlider, ColorSliderProps as AriaColorSliderProps} from 'react-aria-components/ColorSlider';
+import {
+  ColorSlider as AriaColorSlider,
+  ColorSliderProps as AriaColorSliderProps
+} from 'react-aria-components/ColorSlider';
 
 import {ColorHandle} from './ColorHandle';
 import {ContextValue} from 'react-aria-components/slots';
 import {controlFont, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, useRef} from 'react';
-import {DOMRef, DOMRefValue, GlobalDOMAttributes, SpectrumLabelableProps} from '@react-types/shared';
+import {
+  DOMRef,
+  DOMRefValue,
+  GlobalDOMAttributes,
+  SpectrumLabelableProps
+} from '@react-types/shared';
 import {FieldLabel} from './Field';
 import {SliderOutput, SliderTrack} from 'react-aria-components/Slider';
 import {style} from '../style' with {type: 'macro'};
@@ -24,16 +32,27 @@ import {useDOMRef} from './useDOMRef';
 import {useLocale} from 'react-aria/I18nProvider';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, Pick<SpectrumLabelableProps, 'contextualHelp'>, StyleProps {
-  label?: string
+export interface ColorSliderProps
+  extends
+    Omit<
+      AriaColorSliderProps,
+      'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes
+    >,
+    Pick<SpectrumLabelableProps, 'contextualHelp'>,
+    StyleProps {
+  label?: string;
 }
 
-export const ColorSliderContext = createContext<ContextValue<Partial<ColorSliderProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const ColorSliderContext =
+  createContext<ContextValue<Partial<ColorSliderProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * A ColorSlider allows users to adjust an individual channel of a color value.
  */
-export const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {
+export const ColorSlider = forwardRef(function ColorSlider(
+  props: ColorSliderProps,
+  ref: DOMRef<HTMLDivElement>
+) {
   [props, ref] = useSpectrumContextProps(props, ref, ColorSliderContext);
   let {UNSAFE_className = '', UNSAFE_style, styles} = props;
   let containerRef = useDOMRef(ref);
@@ -41,102 +60,116 @@ export const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderPro
   let {direction, locale} = useLocale();
 
   return (
-    (<AriaColorSlider
+    <AriaColorSlider
       {...props}
       ref={containerRef}
       style={UNSAFE_style}
       // The visual label is hidden when vertical, so make it an aria-label instead.
-      aria-label={props['aria-label'] || (props.orientation === 'vertical' ? props.label : undefined)}
-      className={renderProps => UNSAFE_className + style({
-        width: {
-          orientation: {
-            horizontal: 192
-          }
-        },
-        height: {
-          orientation: {
-            vertical: 192
-          }
-        },
-        display: {
-          orientation: {
-            horizontal: 'grid',
-            vertical: 'block'
-          }
-        },
-        gridTemplateColumns: ['1fr', 'auto'],
-        gridTemplateAreas: [
-          'label output',
-          'track track'
-        ],
-        rowGap: 4
-      }, getAllowedOverrides())(renderProps, styles)}>
-      {({isDisabled, orientation, state}) => (<>
-        {orientation === 'horizontal' && (props.label || (props.label === undefined && !props['aria-label'] && !props['aria-labelledby'])) && (
-          // If no external label, aria-label or aria-labelledby is provided,
-          // default to displaying the localized channel value.
-          // Specifically check if label is undefined. If label is `null` then display no visible label.
-          // A default aria-label is provided by useColorSlider in that case.
-          (<FieldLabel isDisabled={isDisabled} contextualHelp={props.contextualHelp}>
-            {props.label || state.value.getChannelName(props.channel, locale)}
-          </FieldLabel>)
-        )}
-        {orientation === 'horizontal' &&
-          <SliderOutput
-            className={style({
-              gridArea: 'output',
-              font: controlFont(),
-              cursor: 'default',
-              color: {
-                default: 'neutral-subdued',
-                isDisabled: 'disabled'
-              }
-            })} />
-        }
-        <SliderTrack
-          ref={trackRef}
-          style={({defaultStyle, isDisabled}) => ({
-            background: isDisabled ? undefined : `${defaultStyle.background}, repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`
-          })}
-          className={style({
-            gridArea: 'track',
+      aria-label={
+        props['aria-label'] || (props.orientation === 'vertical' ? props.label : undefined)
+      }
+      className={renderProps =>
+        UNSAFE_className +
+        style(
+          {
             width: {
               orientation: {
-                horizontal: 'full',
-                vertical: 24
+                horizontal: 192
               }
             },
             height: {
               orientation: {
-                horizontal: 24,
-                vertical: 'full'
+                vertical: 192
               }
             },
-            borderRadius: 'default',
-            outlineColor: {
-              default: 'gray-1000/10',
-              forcedColors: 'ButtonBorder'
-            },
-            outlineWidth: 1,
-            outlineOffset: -1,
-            outlineStyle: {
-              default: 'solid',
-              isDisabled: 'none'
+            display: {
+              orientation: {
+                horizontal: 'grid',
+                vertical: 'block'
+              }
             },
-            backgroundColor: {
-              isDisabled: 'disabled'
-            }
-          })}>
-          <ColorHandle
-            containerRef={trackRef}
-            getPosition={() => {
-              let thumbLeft = direction === 'ltr' ? state.getThumbPercent(0) : 1 - state.getThumbPercent(0);
-              let x = state.orientation === 'horizontal' ? thumbLeft : 0.5;
-              let y = state.orientation === 'horizontal' ? 0.5 : 1 - state.getThumbPercent(0);
-              return {x, y};
-            }} />
-        </SliderTrack>
-      </>)}
-    </AriaColorSlider>)
+            gridTemplateColumns: ['1fr', 'auto'],
+            gridTemplateAreas: ['label output', 'track track'],
+            rowGap: 4
+          },
+          getAllowedOverrides()
+        )(renderProps, styles)
+      }>
+      {({isDisabled, orientation, state}) => (
+        <>
+          {orientation === 'horizontal' &&
+            (props.label ||
+              (props.label === undefined && !props['aria-label'] && !props['aria-labelledby'])) && (
+              // If no external label, aria-label or aria-labelledby is provided,
+              // default to displaying the localized channel value.
+              // Specifically check if label is undefined. If label is `null` then display no visible label.
+              // A default aria-label is provided by useColorSlider in that case.
+              <FieldLabel isDisabled={isDisabled} contextualHelp={props.contextualHelp}>
+                {props.label || state.value.getChannelName(props.channel, locale)}
+              </FieldLabel>
+            )}
+          {orientation === 'horizontal' && (
+            <SliderOutput
+              className={style({
+                gridArea: 'output',
+                font: controlFont(),
+                cursor: 'default',
+                color: {
+                  default: 'neutral-subdued',
+                  isDisabled: 'disabled'
+                }
+              })}
+            />
+          )}
+          <SliderTrack
+            ref={trackRef}
+            style={({defaultStyle, isDisabled}) => ({
+              background: isDisabled
+                ? undefined
+                : `${defaultStyle.background}, repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`
+            })}
+            className={style({
+              gridArea: 'track',
+              width: {
+                orientation: {
+                  horizontal: 'full',
+                  vertical: 24
+                }
+              },
+              height: {
+                orientation: {
+                  horizontal: 24,
+                  vertical: 'full'
+                }
+              },
+              borderRadius: 'default',
+              outlineColor: {
+                default: 'gray-1000/10',
+                forcedColors: 'ButtonBorder'
+              },
+              outlineWidth: 1,
+              outlineOffset: -1,
+              outlineStyle: {
+                default: 'solid',
+                isDisabled: 'none'
+              },
+              backgroundColor: {
+                isDisabled: 'disabled'
+              }
+            })}>
+            <ColorHandle
+              containerRef={trackRef}
+              getPosition={() => {
+                let thumbLeft =
+                  direction === 'ltr' ? state.getThumbPercent(0) : 1 - state.getThumbPercent(0);
+                let x = state.orientation === 'horizontal' ? thumbLeft : 0.5;
+                let y = state.orientation === 'horizontal' ? 0.5 : 1 - state.getThumbPercent(0);
+                return {x, y};
+              }}
+            />
+          </SliderTrack>
+        </>
+      )}
+    </AriaColorSlider>
   );
 });