@react-spectrum/color 3.0.0-nightly.4564 → 3.0.0-nightly.4578

package/src/ColorSwatchPicker.tsx

@@ -0,0 +1,118 @@
+/*
+ * 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 {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem} from 'react-aria-components';
+import {Color} from '@react-types/color';
+import {DOMRef, StyleProps, ValueBase} from '@react-types/shared';
+import React, {forwardRef, ReactElement, ReactNode} from 'react';
+import {SpectrumColorSwatchContext, SpectrumColorSwatchProps} from './ColorSwatch';
+import {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};
+import {useDOMRef, useStyleProps} from '@react-spectrum/utils';
+
+export interface SpectrumColorSwatchPickerProps extends ValueBase<string | Color | null, Color>, StyleProps {
+  /** The ColorSwatches within the ColorSwatchPicker. */
+  children: ReactNode,
+  /**
+   * The amount of padding between the swatches.
+   * @default "regular"
+   */
+  density?: 'compact' | 'regular' | 'spacious',
+  /**
+   * The size of the color swatches.
+   * @default "M"
+   */
+  size?: 'XS' | 'S' | 'M' | 'L',
+  /**
+   * The corner rounding of the color swatches.
+   * @default "none"
+   */
+  rounding?: 'none' | 'default' | 'full'
+}
+
+function ColorSwatchPicker(props: SpectrumColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {
+  let {
+    density = 'regular',
+    size = 'M',
+    rounding = 'none',
+    ...otherProps
+  } = props;
+  let {styleProps} = useStyleProps(props);
+  let domRef = useDOMRef(ref);
+
+  return (
+    <AriaColorSwatchPicker
+      {...otherProps}
+      style={styleProps.style}
+      ref={domRef}
+      className={styleProps.className + style({
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: {
+          density: {
+            compact: 0.5,
+            regular: 1,
+            spacious: 2
+          }
+        }
+      })({density})}>
+      <SpectrumColorSwatchContext.Provider value={{useWrapper, size, rounding}}>
+        {props.children}
+      </SpectrumColorSwatchContext.Provider>
+    </AriaColorSwatchPicker>
+  );
+}
+
+/**
+ * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
+ */
+let _ColorSwatchPicker = forwardRef(ColorSwatchPicker);
+export {_ColorSwatchPicker as ColorSwatchPicker};
+
+function useWrapper(swatch: ReactElement, color: Color, rounding: SpectrumColorSwatchProps['rounding']) {
+  return (
+    <AriaColorSwatchPickerItem
+      color={color}
+      className={renderProps => style({
+        outlineStyle: {
+          default: 'none',
+          isFocusVisible: 'solid'
+        },
+        outlineColor: 'focus-ring',
+        outlineWidth: 2,
+        outlineOffset: 2,
+        position: 'relative',
+        borderRadius: {
+          rounding: {
+            none: 'none',
+            default: 'default',
+            full: 'full'
+          }
+        }
+      })({...renderProps, rounding})}>
+      {({isSelected}) => (<>
+        {swatch}
+        {isSelected && (
+          <div
+            aria-hidden
+            className={style({
+              position: 'absolute',
+              pointerEvents: 'none',
+              inset: 0,
+              boxShadow: '[inset 0 0 0 2px var(--spectrum-gray-900), inset 0 0 0 4px var(--spectrum-gray-50)]',
+              forcedColorAdjust: 'none',
+              borderRadius: '[inherit]'
+            })()} />
+        )}
+      </>)}
+    </AriaColorSwatchPickerItem>
+  );
+}

package/src/ColorThumb.tsx

@@ -13,10 +13,12 @@
 import {classNames} from '@react-spectrum/utils';
 import {Color} from '@react-types/color';
 import {DOMProps} from '@react-types/shared';
-import React, {ReactElement} from 'react';
+import {Overlay} from '@react-spectrum/overlays';
+import React, {CSSProperties, ReactElement, RefObject, useRef, useState} from 'react';
 import stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';
 import stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';
-import {useId} from '@react-aria/utils';
+import {useId, useLayoutEffect} from '@react-aria/utils';
+import {useProvider} from '@react-spectrum/provider';
 
 interface ColorThumbProps extends DOMProps {
   value: Color,
@@ -24,40 +26,85 @@ interface ColorThumbProps extends DOMProps {
   isDragging?: boolean, // shows the color loupe
   isFocused?: boolean, // makes the circle larger
   className?: string,
-  children?: ReactElement
+  children?: ReactElement,
+  style?: CSSProperties,
+  containerRef?: RefObject<HTMLElement>
 }
 
 function ColorThumb(props: ColorThumbProps) {
-  let {value, isDisabled, isDragging, isFocused, children, className = '', ...otherProps} = props;
-
-  let patternId = useId();
+  let {value, isDisabled, isDragging, isFocused, children, className = '', style, containerRef, ...otherProps} = props;
 
   let valueCSS = value.toString('css');
+  let loupeRef = useRef<HTMLElement | null>(null);
+  let provider = useProvider();
 
   return (
-    <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} {...otherProps}>
+    <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} style={style} {...otherProps}>
       <div className={classNames(stylesHandle, 'spectrum-ColorHandle-color')} style={{backgroundColor: valueCSS}} />
-      <svg className={classNames(stylesLoupe, 'spectrum-ColorLoupe',  {'is-open': isDragging})} aria-hidden="true">
-        <pattern id={patternId} x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse">
-          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x="0" y="0" width="16" height="16" />
-          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x="0" y="0" width="8" height="8" />
-          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x="8" y="8" width="8" height="8" />
-        </pattern>
-        <path
-          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}
-          d="M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
-          fill={`url(#${patternId})`} />
-        <path
-          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}
-          d="M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
-          fill={valueCSS} />
-        <path
-          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}
-          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>
+      <Overlay isOpen={isDragging && provider != null} nodeRef={loupeRef}>
+        <ColorLoupe valueCSS={valueCSS} containerRef={containerRef} loupeRef={loupeRef} style={style} />
+      </Overlay>
       {children}
     </div>
   );
 }
 
+// ColorLoupe is rendered in a portal so that it breaks out of clipped/scrolling containers (e.g. popovers).
+function ColorLoupe({isOpen, valueCSS, containerRef, loupeRef, style}: any) {
+  let patternId = useId();
+
+  // Get the bounding rectangle of the container (e.g. ColorArea/ColorSlider).
+  let [containerRect, setContainerRect] = useState({top: 0, left: 0, width: 0, height: 0});
+  useLayoutEffect(() => {
+    let rect = containerRef.current?.getBoundingClientRect();
+    setContainerRect({
+      top: rect?.top || 0,
+      left: rect?.left || 0,
+      width: rect?.width || 0,
+      height: rect?.height || 0
+    });
+  }, [containerRef]);
+
+  // Compute the pixel position of the thumb.
+  let thumbTop = style.top || '50%';
+  if (typeof thumbTop === 'string' && thumbTop.endsWith('%')) {
+    thumbTop = parseFloat(style.top || '50%') / 100 * containerRect.height;
+  }
+
+  let thumbLeft = style.left || '50%';
+  if (typeof thumbLeft === 'string' && thumbLeft.endsWith('%')) {
+    thumbLeft = parseFloat(thumbLeft || '50%') / 100 * containerRect.width;
+  }
+
+  return (
+    <svg
+      className={classNames(stylesLoupe, 'spectrum-ColorLoupe',  {'is-open': isOpen})}
+      style={{
+        // Position relative to the viewport.
+        position: 'fixed',
+        top: containerRect.top + thumbTop,
+        left: containerRect.left + thumbLeft
+      }}
+      ref={loupeRef}
+      aria-hidden="true">
+      <pattern id={patternId} x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse">
+        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x="0" y="0" width="16" height="16" />
+        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x="0" y="0" width="8" height="8" />
+        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x="8" y="8" width="8" height="8" />
+      </pattern>
+      <path
+        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}
+        d="M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
+        fill={`url(#${patternId})`} />
+      <path
+        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}
+        d="M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
+        fill={valueCSS} />
+      <path
+        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}
+        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>
+  );
+}
+
 export {ColorThumb};

package/src/ColorWheel.tsx

@@ -12,6 +12,7 @@
 
 import {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
 import {ColorThumb} from './ColorThumb';
+import {ColorWheelContext, useContextProps} from 'react-aria-components';
 import {FocusableRef} from '@react-types/shared';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {SpectrumColorWheelProps} from '@react-types/color';
@@ -26,13 +27,14 @@ const WHEEL_THICKNESS = 24;
 
 function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {
   props = useProviderProps(props);
+  let inputRef = useRef(null);
+  let containerRef = useFocusableRef(ref, inputRef);
+  [props, containerRef] = useContextProps(props, containerRef, ColorWheelContext);
 
   let {isDisabled} = props;
   let size = props.size && dimensionValue(props.size);
   let {styleProps} = useStyleProps(props);
 
-  let inputRef = useRef(null);
-  let containerRef = useFocusableRef(ref, inputRef);
 
   let [wheelRadius, setWheelRadius] = useState<number>(0);
   let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);
@@ -96,6 +98,7 @@ function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivEle
         isFocused={isFocusVisible}
         isDisabled={isDisabled}
         isDragging={state.isDragging}
+        containerRef={containerRef}
         className={classNames(styles, 'spectrum-ColorWheel-handle')}
         {...thumbProps}>
         <input {...focusProps} className={classNames(styles, 'spectrum-ColorWheel-slider')} {...inputProps} ref={inputRef} />

package/src/index.ts

@@ -15,4 +15,14 @@ export {ColorArea} from './ColorArea';
 export {ColorWheel} from './ColorWheel';
 export {ColorSlider} from './ColorSlider';
 export {ColorField} from './ColorField';
+export {ColorSwatch} from './ColorSwatch';
+export {ColorPicker} from './ColorPicker';
+export {ColorEditor} from './ColorEditor';
+export {ColorSwatchPicker} from './ColorSwatchPicker';
+export {parseColor, getColorChannels} from '@react-stately/color';
 export type {SpectrumColorAreaProps, SpectrumColorFieldProps, SpectrumColorSliderProps, SpectrumColorWheelProps} from '@react-types/color';
+export type {SpectrumColorSwatchProps} from './ColorSwatch';
+export type {SpectrumColorPickerProps} from './ColorPicker';
+export type {SpectrumColorEditorProps} from './ColorEditor';
+export type {SpectrumColorSwatchPickerProps} from './ColorSwatchPicker';
+export type {Color, ColorSpace, ColorFormat} from '@react-types/color';

package/dist/vars.08ba4b4c.css.map

@@ -1 +0,0 @@
-{"mappings":"AAYA;;;;;;;;;;;;;;;;;AA8BE;;;;;;;;;;;AAeA;;;;AAKF;;;;;;;AAcA;;;;;;AAMA;;;;;;;AAaE;;;;;;AAKE;;;;AAMJ;;;;AAIA;EACE","sources":["packages/@adobe/spectrum-css-temp/components/colorhandle/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.08ba4b4c.css.map"}

package/dist/vars.6f3d3943.css.map

@@ -1 +0,0 @@
-{"mappings":"AAYA;;;;;;;;;;;;;AAcE;;;;AAIE;;;;;;;AAJF;;;;AAIE;;;;;;;AAUF;;;;AAKA;;;;;;;;AAYF;;;;;AAIE;;;;AAKF;;;;;;AAMA;;;;;;;;;;;;AAaI;;;;AAKJ;;;;AASI;;;;AAGE;;;;AAIA;;;;AAMN;EACI;;;;;EAKE","sources":["packages/@adobe/spectrum-css-temp/components/colorarea/vars.css"],"sourcesContent":["/*\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.6f3d3943.css.map"}