@react-spectrum/color 3.1.7 → 3.2.0

package/src/ColorSwatchPicker.tsx

@@ -1,115 +0,0 @@
-/*
- * 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, 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'
-}
-
-/**
- * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
- */
-export const ColorSwatchPicker = forwardRef(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>
-  );
-});
-
-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

@@ -1,114 +0,0 @@
-/*
- * Copyright 2020 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 {classNames} from '@react-spectrum/utils';
-import {Color} from '@react-types/color';
-import {DOMProps, RefObject} from '@react-types/shared';
-import {Overlay} from '@react-spectrum/overlays';
-import React, {CSSProperties, JSX, ReactElement, 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, useLayoutEffect} from '@react-aria/utils';
-import {useProvider} from '@react-spectrum/provider';
-
-interface ColorThumbProps extends DOMProps {
-  value: Color,
-  isDisabled?: boolean,
-  isDragging?: boolean, // shows the color loupe
-  isFocused?: boolean, // makes the circle larger
-  className?: string,
-  children?: ReactElement,
-  style?: CSSProperties,
-  containerRef?: RefObject<HTMLElement | null>
-}
-
-function ColorThumb(props: ColorThumbProps): JSX.Element {
-  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} style={style} {...otherProps}>
-      <div className={classNames(stylesHandle, 'spectrum-ColorHandle-color')} style={{backgroundColor: valueCSS}} />
-      <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;
-  } else if (typeof thumbTop === 'string' && thumbTop.endsWith('px')) {
-    thumbTop = parseFloat(thumbTop);
-  }
-
-  let thumbLeft = style.left || '50%';
-  if (typeof thumbLeft === 'string' && thumbLeft.endsWith('%')) {
-    thumbLeft = parseFloat(thumbLeft || '50%') / 100 * containerRect.width;
-  } else if (typeof thumbLeft === 'string' && thumbLeft.endsWith('px')) {
-    thumbLeft = parseFloat(thumbLeft);
-  }
-
-  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

@@ -1,110 +0,0 @@
-/*
- * Copyright 2020 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 {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, useRef, useState} from 'react';
-import {SpectrumColorWheelProps} from '@react-types/color';
-import styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';
-import {useColorWheel} from '@react-aria/color';
-import {useColorWheelState} from '@react-stately/color';
-import {useFocusRing} from '@react-aria/focus';
-import {useLayoutEffect, useResizeObserver} from '@react-aria/utils';
-import {useProviderProps} from '@react-spectrum/provider';
-
-const WHEEL_THICKNESS = 24;
-
-/**
- * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
- */
-export const ColorWheel = React.forwardRef(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 [wheelRadius, setWheelRadius] = useState<number>(0);
-  let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);
-
-  let resizeHandler = useCallback(() => {
-    if (containerRef.current) {
-      setWheelRadius(containerRef.current.offsetWidth / 2);
-      let thickness = window.getComputedStyle(containerRef.current)
-        .getPropertyValue('--spectrum-colorwheel-track-thickness');
-      if (thickness) {
-        setWheelThickness(parseInt(thickness, 10));
-      }
-    }
-  }, [containerRef, setWheelRadius, setWheelThickness]);
-
-  useLayoutEffect(() => {
-    // the size observer's fallback to the window resize event doesn't fire on mount
-    if (wheelRadius === 0) {
-      resizeHandler();
-    }
-  }, [wheelRadius, resizeHandler]);
-
-  useResizeObserver({
-    ref: containerRef,
-    onResize: resizeHandler
-  });
-
-  let state = useColorWheelState(props);
-
-  let {trackProps, inputProps, thumbProps} = useColorWheel({
-    ...props,
-    innerRadius: wheelRadius - wheelThickness,
-    outerRadius: wheelRadius
-  }, state, inputRef);
-
-  let {focusProps, isFocusVisible} = useFocusRing();
-
-  return (
-    <div
-      className={
-        classNames(
-          styles,
-          'spectrum-ColorWheel',
-          {
-            'is-disabled': isDisabled
-          },
-          styleProps.className
-        )
-      }
-      ref={containerRef}
-      style={{
-        ...styleProps.style,
-        // Workaround around https://github.com/adobe/spectrum-css/issues/1032
-        'width': size,
-        'height': size
-      }}>
-      <div {...trackProps} className={classNames(styles, 'spectrum-ColorWheel-gradient')} />
-      <ColorThumb
-        value={state.getDisplayColor()}
-        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} />
-      </ColorThumb>
-    </div>
-  );
-});

package/src/colorfield.css

@@ -1,18 +0,0 @@
-/*
- * Copyright 2020 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.
- */
-
-.react-spectrum-ColorField-input:not(:placeholder-shown) {
-  unicode-bidi: plaintext;
-  &:dir(rtl) {
-    text-align: end;
-  }
-}