@react-spectrum/s2 1.3.1 → 1.5.0

package/src/ColorSwatch.tsx

@@ -10,51 +10,74 @@
  * governing permissions and limitations under the License.
  */
 
-import {ColorSwatch as AriaColorSwatch, ColorSwatchProps as AriaColorSwatchProps, Color, parseColor} from 'react-aria-components/ColorSwatch';
+import {
+  ColorSwatch as AriaColorSwatch,
+  ColorSwatchProps as AriaColorSwatchProps,
+  Color,
+  parseColor
+} from 'react-aria-components/ColorSwatch';
 import {ContextValue} from 'react-aria-components/slots';
 import {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';
 import {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';
-import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {
+  getAllowedOverrides,
+  StylesPropWithHeight,
+  UnsafeStyles
+} from './style-utils' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from './useDOMRef';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface ColorSwatchProps extends Omit<AriaColorSwatchProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, UnsafeStyles {
+export interface ColorSwatchProps
+  extends
+    Omit<AriaColorSwatchProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,
+    UnsafeStyles {
   /**
    * The size of the ColorSwatch.
+   *
    * @default 'M'
    */
-  size?: 'XS' | 'S' | 'M' | 'L',
+  size?: 'XS' | 'S' | 'M' | 'L';
   /**
    * The corner rounding of the ColorSwatch.
+   *
    * @default 'default'
    */
-  rounding?: 'default' | 'none' | 'full',
+  rounding?: 'default' | 'none' | 'full';
   /** Spectrum-defined styles, returned by the `style()` macro. */
-  styles?: StylesPropWithHeight
+  styles?: StylesPropWithHeight;
 }
 
 interface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size' | 'rounding'> {
-  useWrapper: (swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) => JSX.Element
+  useWrapper: (
+    swatch: ReactElement,
+    color: Color,
+    rounding: ColorSwatchProps['rounding']
+  ) => JSX.Element;
 }
 
-export const ColorSwatchContext = createContext<ContextValue<Partial<ColorSwatchProps>, DOMRefValue<HTMLDivElement>>>(null);
-export const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);
+export const ColorSwatchContext =
+  createContext<ContextValue<Partial<ColorSwatchProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(
+  null
+);
 
 /**
  * A ColorSwatch displays a preview of a selected color.
  */
-export const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {
+export const ColorSwatch = forwardRef(function ColorSwatch(
+  props: ColorSwatchProps,
+  ref: DOMRef<HTMLDivElement>
+): JSX.Element {
   [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);
   let domRef = useDOMRef(ref);
   let ctx = useContext(InternalColorSwatchContext);
-  let {
-    size = ctx?.size || 'M',
-    rounding = ctx?.rounding || 'default',
-    color
-  } = props;
+  let {size = ctx?.size || 'M', rounding = ctx?.rounding || 'default', color} = props;
   let nonNullValue = color || '#fff0';
-  color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);
+  color = useMemo(
+    () => (typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue),
+    [nonNullValue]
+  );
 
   let swatch = (
     <AriaColorSwatch
@@ -63,37 +86,42 @@ export const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchPro
       ref={domRef}
       style={({color}) => ({
         // TODO: should there be a distinction between transparent and no value (e.g. null)?
-        background: color.getChannelValue('alpha') > 0
-          ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px`
-          // Red slash to indicate there is no selected color.
-          : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'
+        background:
+          color.getChannelValue('alpha') > 0
+            ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px`
+            : // Red slash to indicate there is no selected color.
+              'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'
       })}
-      className={style({
-        size: {
+      className={style(
+        {
           size: {
-            XS: 16,
-            S: 24,
-            M: 32,
-            L: 40
-          }
-        },
-        borderRadius: {
-          rounding: {
-            default: 'sm',
-            none: 'none',
-            full: 'full'
+            size: {
+              XS: 16,
+              S: 24,
+              M: 32,
+              L: 40
+            }
+          },
+          borderRadius: {
+            rounding: {
+              default: 'sm',
+              none: 'none',
+              full: 'full'
+            }
+          },
+          borderColor: 'gray-1000/42',
+          borderWidth: 1,
+          borderStyle: 'solid',
+          boxSizing: 'border-box',
+          forcedColorAdjust: 'none',
+          '--slash-color': {
+            type: 'color',
+            value: 'red-900'
           }
         },
-        borderColor: 'gray-1000/42',
-        borderWidth: 1,
-        borderStyle: 'solid',
-        boxSizing: 'border-box',
-        forcedColorAdjust: 'none',
-        '--slash-color': {
-          type: 'color',
-          value: 'red-900'
-        }
-      }, getAllowedOverrides({height: true}))({size, rounding}, props.styles)} />
+        getAllowedOverrides({height: true})
+      )({size, rounding}, props.styles)}
+    />
   );
 
   // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.

package/src/ColorSwatchPicker.tsx

@@ -25,32 +25,40 @@ import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro
 import {useDOMRef} from './useDOMRef';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, StyleProps, SlotProps {
+export interface ColorSwatchPickerProps
+  extends ValueBase<string | Color, Color>, StyleProps, SlotProps {
   /** The ColorSwatches within the ColorSwatchPicker. */
-  children: ReactNode,
+  children: ReactNode;
   /**
    * The amount of padding between the swatches.
+   *
    * @default 'regular'
    */
-  density?: 'compact' | 'regular' | 'spacious',
+  density?: 'compact' | 'regular' | 'spacious';
   /**
    * The size of the color swatches.
+   *
    * @default 'M'
    */
-  size?: 'XS' | 'S' | 'M' | 'L',
+  size?: 'XS' | 'S' | 'M' | 'L';
   /**
    * The corner rounding of the color swatches.
+   *
    * @default 'none'
    */
-  rounding?: 'none' | 'default' | 'full'
+  rounding?: 'none' | 'default' | 'full';
 }
 
-export const ColorSwatchPickerContext = createContext<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const ColorSwatchPickerContext =
+  createContext<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
  */
-export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {
+export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(
+  props: ColorSwatchPickerProps,
+  ref: DOMRef<HTMLDivElement>
+) {
   [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchPickerContext);
   let {
     density = 'regular',
@@ -65,17 +73,23 @@ export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: Co
     <AriaColorSwatchPicker
       {...otherProps}
       ref={domRef}
-      className={UNSAFE_className + style({
-        display: 'flex',
-        flexWrap: 'wrap',
-        gap: {
-          density: {
-            compact: space(2),
-            regular: 4,
-            spacious: space(6)
-          }
-        }
-      }, getAllowedOverrides())({density}, props.styles)}>
+      className={
+        UNSAFE_className +
+        style(
+          {
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: {
+              density: {
+                compact: space(2),
+                regular: 4,
+                spacious: space(6)
+              }
+            }
+          },
+          getAllowedOverrides()
+        )({density}, props.styles)
+      }>
       <InternalColorSwatchContext.Provider value={{useWrapper, size, rounding}}>
         {props.children}
       </InternalColorSwatchContext.Provider>
@@ -87,40 +101,45 @@ function useWrapper(swatch: ReactElement, color: Color, rounding: ColorSwatchPro
   return (
     <AriaColorSwatchPickerItem
       color={color}
-      className={renderProps => style({
-        ...focusRing(),
-        position: 'relative',
-        borderRadius: {
-          rounding: {
-            none: 'none',
-            default: 'sm',
-            full: 'full'
-          }
-        },
-        disableTapHighlight: true
-      })({...renderProps, rounding})}>
-      {({isSelected}) => (<>
-        {swatch}
-        {isSelected && (
-          <div
-            aria-hidden
-            className={style({
-              position: 'absolute',
-              pointerEvents: 'none',
-              inset: 0,
-              boxSizing: 'border-box',
-              borderColor: 'gray-900',
-              borderStyle: 'solid',
-              borderWidth: 2,
-              outlineColor: 'gray-25',
-              outlineStyle: 'solid',
-              outlineWidth: 2,
-              outlineOffset: -4,
-              forcedColorAdjust: 'none',
-              borderRadius: 'inherit'
-            })} />
-        )}
-      </>)}
+      className={renderProps =>
+        style({
+          ...focusRing(),
+          position: 'relative',
+          borderRadius: {
+            rounding: {
+              none: 'none',
+              default: 'sm',
+              full: 'full'
+            }
+          },
+          disableTapHighlight: true
+        })({...renderProps, rounding})
+      }>
+      {({isSelected}) => (
+        <>
+          {swatch}
+          {isSelected && (
+            <div
+              aria-hidden
+              className={style({
+                position: 'absolute',
+                pointerEvents: 'none',
+                inset: 0,
+                boxSizing: 'border-box',
+                borderColor: 'gray-900',
+                borderStyle: 'solid',
+                borderWidth: 2,
+                outlineColor: 'gray-25',
+                outlineStyle: 'solid',
+                outlineWidth: 2,
+                outlineOffset: -4,
+                forcedColorAdjust: 'none',
+                borderRadius: 'inherit'
+              })}
+            />
+          )}
+        </>
+      )}
     </AriaColorSwatchPickerItem>
   );
 }

package/src/ColorWheel.tsx

@@ -25,19 +25,35 @@ import {StyleProps} from './style-utils';
 import {useDOMRef} from './useDOMRef';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface ColorWheelProps extends Omit<AriaColorWheelProps, 'children' | 'className' | 'style' | 'render' | 'outerRadius' | 'innerRadius' | keyof GlobalDOMAttributes>, StyleProps {
+export interface ColorWheelProps
+  extends
+    Omit<
+      AriaColorWheelProps,
+      | 'children'
+      | 'className'
+      | 'style'
+      | 'render'
+      | 'outerRadius'
+      | 'innerRadius'
+      | keyof GlobalDOMAttributes
+    >,
+    StyleProps {
   /**
    * @default 192
    */
-  size?: number
+  size?: number;
 }
 
-export const ColorWheelContext = createContext<ContextValue<Partial<ColorWheelProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const ColorWheelContext =
+  createContext<ContextValue<Partial<ColorWheelProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * A ColorWheel allows users to adjust the hue of an HSL or HSB color value on a circular track.
  */
-export const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps, ref: DOMRef<HTMLDivElement>) {
+export const ColorWheel = forwardRef(function ColorWheel(
+  props: ColorWheelProps,
+  ref: DOMRef<HTMLDivElement>
+) {
   [props, ref] = useSpectrumContextProps(props, ref, ColorWheelContext);
   let {UNSAFE_className = '', UNSAFE_style, styles = ''} = props;
   let containerRef = useDOMRef(ref);
@@ -47,62 +63,67 @@ export const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps,
   let thickness = 24;
   let innerRadius = outerRadius - 24;
   return (
-    <AriaColorWheel 
+    <AriaColorWheel
       {...props}
       outerRadius={outerRadius}
       innerRadius={innerRadius}
       ref={containerRef}
       style={{...UNSAFE_style, width: outerRadius * 2, height: outerRadius * 2}}
       className={UNSAFE_className + styles}>
-      {({isDisabled, state}) => (<>
-        <ColorWheelTrack
-          style={({defaultStyle, isDisabled}) => ({
-            background: isDisabled ? undefined : defaultStyle.background
-          })}
-          className={style({
-            // Outer border
-            borderRadius: 'full',
-            outlineColor: {
-              default: 'gray-1000/10',
-              forcedColors: 'ButtonBorder'
-            },
-            outlineWidth: 1,
-            outlineOffset: -1,
-            outlineStyle: {
-              default: 'solid',
-              isDisabled: 'none'
-            },
-            backgroundColor: {
-              isDisabled: 'disabled'
-            }
-          })} />
-        <div
-          className={style({
-            // Inner border
-            position: 'absolute',
-            inset: 24,
-            pointerEvents: 'none',
-            borderRadius: 'full',
-            outlineColor: {
-              default: 'gray-1000/10',
-              forcedColors: 'ButtonBorder'
-            },
-            outlineWidth: 1,
-            outlineStyle: {
-              default: 'solid',
-              isDisabled: 'none'
-            }
-          })({isDisabled})} />
-        <ColorHandle
-          containerRef={containerRef}
-          getPosition={() => {
-            let {x, y} = state.getThumbPosition(outerRadius - thickness / 2);
-            return {
-              x: (outerRadius + x) / (outerRadius * 2),
-              y: (outerRadius + y) / (outerRadius * 2)
-            };
-          }} />
-      </>)}
+      {({isDisabled, state}) => (
+        <>
+          <ColorWheelTrack
+            style={({defaultStyle, isDisabled}) => ({
+              background: isDisabled ? undefined : defaultStyle.background
+            })}
+            className={style({
+              // Outer border
+              borderRadius: 'full',
+              outlineColor: {
+                default: 'gray-1000/10',
+                forcedColors: 'ButtonBorder'
+              },
+              outlineWidth: 1,
+              outlineOffset: -1,
+              outlineStyle: {
+                default: 'solid',
+                isDisabled: 'none'
+              },
+              backgroundColor: {
+                isDisabled: 'disabled'
+              }
+            })}
+          />
+          <div
+            className={style({
+              // Inner border
+              position: 'absolute',
+              inset: 24,
+              pointerEvents: 'none',
+              borderRadius: 'full',
+              outlineColor: {
+                default: 'gray-1000/10',
+                forcedColors: 'ButtonBorder'
+              },
+              outlineWidth: 1,
+              outlineStyle: {
+                default: 'solid',
+                isDisabled: 'none'
+              }
+            })({isDisabled})}
+          />
+          <ColorHandle
+            containerRef={containerRef}
+            getPosition={() => {
+              let {x, y} = state.getThumbPosition(outerRadius - thickness / 2);
+              return {
+                x: (outerRadius + x) / (outerRadius * 2),
+                y: (outerRadius + y) / (outerRadius * 2)
+              };
+            }}
+          />
+        </>
+      )}
     </AriaColorWheel>
   );
 });