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

package/dist/ColorSwatchPicker.module.js

@@ -0,0 +1,106 @@
+import "./ColorSwatchPicker.1575be06.css";
+import {SpectrumColorSwatchContext as $d68786ae409fa722$export$8529d7908a78c058} from "./ColorSwatch.module.js";
+import {ColorSwatchPicker as $1TpDU$ColorSwatchPicker, ColorSwatchPickerItem as $1TpDU$ColorSwatchPickerItem} from "react-aria-components";
+import $1TpDU$react, {forwardRef as $1TpDU$forwardRef} from "react";
+import {useStyleProps as $1TpDU$useStyleProps, useDOMRef as $1TpDU$useDOMRef} from "@react-spectrum/utils";
+
+/*
+ * 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.
+ */ 
+
+
+
+function $4919bc07654f325c$var$ColorSwatchPicker(props, ref) {
+    let { density: density = "regular", size: size = "M", rounding: rounding = "none", ...otherProps } = props;
+    let { styleProps: styleProps } = (0, $1TpDU$useStyleProps)(props);
+    let domRef = (0, $1TpDU$useDOMRef)(ref);
+    return /*#__PURE__*/ (0, $1TpDU$react).createElement((0, $1TpDU$ColorSwatchPicker), {
+        ...otherProps,
+        style: styleProps.style,
+        ref: domRef,
+        className: styleProps.className + function anonymous(props) {
+            let rules = "";
+            rules += " _Sd";
+            rules += " _0a";
+            if (props.density === "spacious") rules += " lc";
+            else if (props.density === "regular") rules += " lb";
+            else if (props.density === "compact") rules += " lF";
+            if (props.density === "spacious") rules += " mc";
+            else if (props.density === "regular") rules += " mb";
+            else if (props.density === "compact") rules += " mF";
+            return rules;
+        }({
+            density: density
+        })
+    }, /*#__PURE__*/ (0, $1TpDU$react).createElement((0, $d68786ae409fa722$export$8529d7908a78c058).Provider, {
+        value: {
+            useWrapper: $4919bc07654f325c$var$useWrapper,
+            size: size,
+            rounding: rounding
+        }
+    }, props.children));
+}
+/**
+ * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
+ */ let $4919bc07654f325c$export$b46792416e3d8515 = /*#__PURE__*/ (0, $1TpDU$forwardRef)($4919bc07654f325c$var$ColorSwatchPicker);
+function $4919bc07654f325c$var$useWrapper(swatch, color, rounding) {
+    return /*#__PURE__*/ (0, $1TpDU$react).createElement((0, $1TpDU$ColorSwatchPickerItem), {
+        color: color,
+        className: (renderProps)=>(function anonymous(props) {
+                let rules = "";
+                if (props.isFocusVisible) rules += " _Eb";
+                else rules += " _Ea";
+                rules += " da___D";
+                rules += " d___I";
+                rules += " _Gc";
+                rules += " _Fc";
+                rules += " Xc";
+                if (props.rounding === "full") rules += " _pf";
+                else if (props.rounding === "default") rules += " _pc";
+                else if (props.rounding === "none") rules += " _pa";
+                if (props.rounding === "full") rules += " _qf";
+                else if (props.rounding === "default") rules += " _qc";
+                else if (props.rounding === "none") rules += " _qa";
+                if (props.rounding === "full") rules += " _rf";
+                else if (props.rounding === "default") rules += " _rc";
+                else if (props.rounding === "none") rules += " _ra";
+                if (props.rounding === "full") rules += " _sf";
+                else if (props.rounding === "default") rules += " _sc";
+                else if (props.rounding === "none") rules += " _sa";
+                return rules;
+            })({
+                ...renderProps,
+                rounding: rounding
+            })
+    }, ({ isSelected: isSelected })=>/*#__PURE__*/ (0, $1TpDU$react).createElement((0, $1TpDU$react).Fragment, null, swatch, isSelected && /*#__PURE__*/ (0, $1TpDU$react).createElement("div", {
+            "aria-hidden": true,
+            className: function anonymous(props) {
+                let rules = "";
+                rules += " Xa";
+                rules += " __ya";
+                rules += " _0a";
+                rules += " _2a";
+                rules += " _1a";
+                rules += " _3a";
+                rules += " _o-1icpv9v";
+                rules += " _tb";
+                rules += " _p-17zqamw";
+                rules += " _q-17zqamw";
+                rules += " _r-17zqamw";
+                rules += " _s-17zqamw";
+                return rules;
+            }()
+        })));
+}
+
+
+export {$4919bc07654f325c$export$b46792416e3d8515 as ColorSwatchPicker};
+//# sourceMappingURL=ColorSwatchPicker.module.js.map

package/dist/ColorSwatchPicker.module.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;AAAA;;;;;;;;;;CAUC;;;;AA8BD,SAAS,wCAAkB,KAAqC,EAAE,GAA2B;IAC3F,IAAI,WACF,UAAU,iBACV,OAAO,eACP,WAAW,QACX,GAAG,YACJ,GAAG;IACJ,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IACjC,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,wBAAoB;QAClB,GAAG,UAAU;QACd,OAAO,WAAW,KAAK;QACvB,KAAK;QACL,WAAW,WAAW,SAAS,GAAG;;;;;;;;;;;UAU/B;qBAAC;QAAO;qBACX,gCAAC,CAAA,GAAA,yCAAyB,EAAE,QAAQ;QAAC,OAAO;wBAAC;kBAAY;sBAAM;QAAQ;OACpE,MAAM,QAAQ;AAIvB;AAEA;;CAEC,GACD,IAAI,0DAAqB,CAAA,GAAA,iBAAS,EAAE;AAGpC,SAAS,iCAAW,MAAoB,EAAE,KAAY,EAAE,QAA8C;IACpG,qBACE,gCAAC,CAAA,GAAA,4BAAwB;QACvB,OAAO;QACP,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;eAgBvB;gBAAC,GAAG,WAAW;0BAAE;YAAQ;OAC3B,CAAC,cAAC,UAAU,EAAC,iBAAM,kEACjB,QACA,4BACC,gCAAC;YACC,eAAA;YACA,WAAW;;;;;;;;;;;;;;;;;AAYvB","sources":["packages/@react-spectrum/color/src/ColorSwatchPicker.tsx"],"sourcesContent":["/*\n * Copyright 2024 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\nimport {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem} from 'react-aria-components';\nimport {Color} from '@react-types/color';\nimport {DOMRef, StyleProps, ValueBase} from '@react-types/shared';\nimport React, {forwardRef, ReactElement, ReactNode} from 'react';\nimport {SpectrumColorSwatchContext, SpectrumColorSwatchProps} from './ColorSwatch';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useDOMRef, useStyleProps} from '@react-spectrum/utils';\n\nexport interface SpectrumColorSwatchPickerProps extends ValueBase<string | Color | null, Color>, StyleProps {\n  /** The ColorSwatches within the ColorSwatchPicker. */\n  children: ReactNode,\n  /**\n   * The amount of padding between the swatches.\n   * @default \"regular\"\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /**\n   * The size of the color swatches.\n   * @default \"M\"\n   */\n  size?: 'XS' | 'S' | 'M' | 'L',\n  /**\n   * The corner rounding of the color swatches.\n   * @default \"none\"\n   */\n  rounding?: 'none' | 'default' | 'full'\n}\n\nfunction ColorSwatchPicker(props: SpectrumColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    density = 'regular',\n    size = 'M',\n    rounding = 'none',\n    ...otherProps\n  } = props;\n  let {styleProps} = useStyleProps(props);\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaColorSwatchPicker\n      {...otherProps}\n      style={styleProps.style}\n      ref={domRef}\n      className={styleProps.className + style({\n        display: 'flex',\n        flexWrap: 'wrap',\n        gap: {\n          density: {\n            compact: 0.5,\n            regular: 1,\n            spacious: 2\n          }\n        }\n      })({density})}>\n      <SpectrumColorSwatchContext.Provider value={{useWrapper, size, rounding}}>\n        {props.children}\n      </SpectrumColorSwatchContext.Provider>\n    </AriaColorSwatchPicker>\n  );\n}\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nlet _ColorSwatchPicker = forwardRef(ColorSwatchPicker);\nexport {_ColorSwatchPicker as ColorSwatchPicker};\n\nfunction useWrapper(swatch: ReactElement, color: Color, rounding: SpectrumColorSwatchProps['rounding']) {\n  return (\n    <AriaColorSwatchPickerItem\n      color={color}\n      className={renderProps => style({\n        outlineStyle: {\n          default: 'none',\n          isFocusVisible: 'solid'\n        },\n        outlineColor: 'focus-ring',\n        outlineWidth: 2,\n        outlineOffset: 2,\n        position: 'relative',\n        borderRadius: {\n          rounding: {\n            none: 'none',\n            default: 'default',\n            full: 'full'\n          }\n        }\n      })({...renderProps, rounding})}>\n      {({isSelected}) => (<>\n        {swatch}\n        {isSelected && (\n          <div\n            aria-hidden\n            className={style({\n              position: 'absolute',\n              pointerEvents: 'none',\n              inset: 0,\n              boxShadow: '[inset 0 0 0 2px var(--spectrum-gray-900), inset 0 0 0 4px var(--spectrum-gray-50)]',\n              forcedColorAdjust: 'none',\n              borderRadius: '[inherit]'\n            })()} />\n        )}\n      </>)}\n    </AriaColorSwatchPickerItem>\n  );\n}\n"],"names":[],"version":3,"file":"ColorSwatchPicker.module.js.map"}

package/dist/ColorThumb.main.js

@@ -1,10 +1,12 @@
-require("./vars.08ba4b4c.css");
+require("./vars.53b417c1.css");
 var $f61d632765728b2e$exports = require("./colorhandle_vars_css.main.js");
-require("./vars.ef2c01b8.css");
+require("./vars.cc682729.css");
 var $f65977ae56facfaa$exports = require("./colorloupe_vars_css.main.js");
 var $bRwD9$reactspectrumutils = require("@react-spectrum/utils");
+var $bRwD9$reactspectrumoverlays = require("@react-spectrum/overlays");
 var $bRwD9$react = require("react");
 var $bRwD9$reactariautils = require("@react-aria/utils");
+var $bRwD9$reactspectrumprovider = require("@react-spectrum/provider");
 
 
 function $parcel$interopDefault(a) {
@@ -31,25 +33,73 @@ $parcel$export(module.exports, "ColorThumb", () => $2b9adc23f6c7cae1$export$a3cc
 
 
 
+
+
 function $2b9adc23f6c7cae1$export$a3cc47cee1c1ccc(props) {
-    let { value: value, isDisabled: isDisabled, isDragging: isDragging, isFocused: isFocused, children: children, className: className = "", ...otherProps } = props;
-    let patternId = (0, $bRwD9$reactariautils.useId)();
+    let { value: value, isDisabled: isDisabled, isDragging: isDragging, isFocused: isFocused, children: children, className: className = "", style: style, containerRef: containerRef, ...otherProps } = props;
     let valueCSS = value.toString("css");
+    let loupeRef = (0, $bRwD9$react.useRef)(null);
+    let provider = (0, $bRwD9$reactspectrumprovider.useProvider)();
     return /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("div", {
         className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f61d632765728b2e$exports))), "spectrum-ColorHandle", {
             "is-focused": isFocused,
             "is-disabled": isDisabled
         }) + " " + className,
+        style: style,
         ...otherProps
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("div", {
         className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f61d632765728b2e$exports))), "spectrum-ColorHandle-color"),
         style: {
             backgroundColor: valueCSS
         }
-    }), /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("svg", {
+    }), /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement((0, $bRwD9$reactspectrumoverlays.Overlay), {
+        isOpen: isDragging && provider != null,
+        nodeRef: loupeRef
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement($2b9adc23f6c7cae1$var$ColorLoupe, {
+        valueCSS: valueCSS,
+        containerRef: containerRef,
+        loupeRef: loupeRef,
+        style: style
+    })), children);
+}
+// ColorLoupe is rendered in a portal so that it breaks out of clipped/scrolling containers (e.g. popovers).
+function $2b9adc23f6c7cae1$var$ColorLoupe({ isOpen: isOpen, valueCSS: valueCSS, containerRef: containerRef, loupeRef: loupeRef, style: style }) {
+    let patternId = (0, $bRwD9$reactariautils.useId)();
+    // Get the bounding rectangle of the container (e.g. ColorArea/ColorSlider).
+    let [containerRect, setContainerRect] = (0, $bRwD9$react.useState)({
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0
+    });
+    (0, $bRwD9$reactariautils.useLayoutEffect)(()=>{
+        var _containerRef_current;
+        let rect = (_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.getBoundingClientRect();
+        setContainerRect({
+            top: (rect === null || rect === void 0 ? void 0 : rect.top) || 0,
+            left: (rect === null || rect === void 0 ? void 0 : rect.left) || 0,
+            width: (rect === null || rect === void 0 ? void 0 : rect.width) || 0,
+            height: (rect === null || rect === void 0 ? void 0 : 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 /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("svg", {
         className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))), "spectrum-ColorLoupe", {
-            "is-open": isDragging
+            "is-open": isOpen
         }),
+        style: {
+            // Position relative to the viewport.
+            position: "fixed",
+            top: containerRect.top + thumbTop,
+            left: containerRect.left + thumbLeft
+        },
+        ref: loupeRef,
         "aria-hidden": "true"
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("pattern", {
         id: patternId,
@@ -87,7 +137,7 @@ function $2b9adc23f6c7cae1$export$a3cc47cee1c1ccc(props) {
     }), /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("path", {
         className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))), "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"
-    })), children);
+    }));
 }
 
 

package/dist/ColorThumb.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAmBD,SAAS,yCAAW,KAAsB;IACxC,IAAI,SAAC,KAAK,cAAE,UAAU,cAAE,UAAU,aAAE,SAAS,YAAE,QAAQ,aAAE,YAAY,IAAI,GAAG,YAAW,GAAG;IAE1F,IAAI,YAAY,CAAA,GAAA,2BAAI;IAEpB,IAAI,WAAW,MAAM,QAAQ,CAAC;IAE9B,qBACE,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAW,GAAG,wBAAwB;YAAC,cAAc;YAAW,eAAe;QAAU,KAAK,MAAM;QAAY,GAAG,UAAU;qBACtJ,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAW,GAAG;QAA+B,OAAO;YAAC,iBAAiB;QAAQ;sBACzG,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAU,GAAG,uBAAwB;YAAC,WAAW;QAAU;QAAI,eAAY;qBACpG,0DAAC;QAAQ,IAAI;QAAW,GAAE;QAAI,GAAE;QAAI,OAAM;QAAK,QAAO;QAAK,cAAa;qBACtE,0DAAC;QAAK,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAU,GAAG;QAAyC,GAAE;QAAI,GAAE;QAAI,OAAM;QAAK,QAAO;sBAChH,0DAAC;QAAK,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAU,GAAG;QAAsC,GAAE;QAAI,GAAE;QAAI,OAAM;QAAI,QAAO;sBAC5G,0DAAC;QAAK,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAU,GAAG;QAAsC,GAAE;QAAI,GAAE;QAAI,OAAM;QAAI,QAAO;uBAE9G,0DAAC;QACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAU,GAAG;QACnC,GAAE;QACF,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;sBAC5B,0DAAC;QACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAU,GAAG;QACnC,GAAE;QACF,MAAM;sBACR,0DAAC;QACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAU,GAAG;QACnC,GAAE;SAEL;AAGP","sources":["packages/@react-spectrum/color/src/ColorThumb.tsx"],"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\nimport {classNames} from '@react-spectrum/utils';\nimport {Color} from '@react-types/color';\nimport {DOMProps} from '@react-types/shared';\nimport React, {ReactElement} from 'react';\nimport stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';\nimport stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';\nimport {useId} from '@react-aria/utils';\n\ninterface ColorThumbProps extends DOMProps {\n  value: Color,\n  isDisabled?: boolean,\n  isDragging?: boolean, // shows the color loupe\n  isFocused?: boolean, // makes the circle larger\n  className?: string,\n  children?: ReactElement\n}\n\nfunction ColorThumb(props: ColorThumbProps) {\n  let {value, isDisabled, isDragging, isFocused, children, className = '', ...otherProps} = props;\n\n  let patternId = useId();\n\n  let valueCSS = value.toString('css');\n\n  return (\n    <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} {...otherProps}>\n      <div className={classNames(stylesHandle, 'spectrum-ColorHandle-color')} style={{backgroundColor: valueCSS}} />\n      <svg className={classNames(stylesLoupe, 'spectrum-ColorLoupe',  {'is-open': isDragging})} aria-hidden=\"true\">\n        <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n        </pattern>\n        <path\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n          d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n          fill={`url(#${patternId})`} />\n        <path\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n          d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n          fill={valueCSS} />\n        <path\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}\n          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\" />\n      </svg>\n      {children}\n    </div>\n  );\n}\n\nexport {ColorThumb};\n"],"names":[],"version":3,"file":"ColorThumb.main.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAuBD,SAAS,yCAAW,KAAsB;IACxC,IAAI,SAAC,KAAK,cAAE,UAAU,cAAE,UAAU,aAAE,SAAS,YAAE,QAAQ,aAAE,YAAY,WAAI,KAAK,gBAAE,YAAY,EAAE,GAAG,YAAW,GAAG;IAE/G,IAAI,WAAW,MAAM,QAAQ,CAAC;IAC9B,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAsB;IAC1C,IAAI,WAAW,CAAA,GAAA,wCAAU;IAEzB,qBACE,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAW,GAAG,wBAAwB;YAAC,cAAc;YAAW,eAAe;QAAU,KAAK,MAAM;QAAW,OAAO;QAAQ,GAAG,UAAU;qBACpK,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAW,GAAG;QAA+B,OAAO;YAAC,iBAAiB;QAAQ;sBACzG,0DAAC,CAAA,GAAA,oCAAM;QAAE,QAAQ,cAAc,YAAY;QAAM,SAAS;qBACxD,0DAAC;QAAW,UAAU;QAAU,cAAc;QAAc,UAAU;QAAU,OAAO;SAExF;AAGP;AAEA,4GAA4G;AAC5G,SAAS,iCAAW,UAAC,MAAM,YAAE,QAAQ,gBAAE,YAAY,YAAE,QAAQ,SAAE,KAAK,EAAM;IACxE,IAAI,YAAY,CAAA,GAAA,2BAAI;IAEpB,4EAA4E;IAC5E,IAAI,CAAC,eAAe,iBAAiB,GAAG,CAAA,GAAA,qBAAO,EAAE;QAAC,KAAK;QAAG,MAAM;QAAG,OAAO;QAAG,QAAQ;IAAC;IACtF,CAAA,GAAA,qCAAc,EAAE;YACH;QAAX,IAAI,QAAO,wBAAA,aAAa,OAAO,cAApB,4CAAA,sBAAsB,qBAAqB;QACtD,iBAAiB;YACf,KAAK,CAAA,iBAAA,2BAAA,KAAM,GAAG,KAAI;YAClB,MAAM,CAAA,iBAAA,2BAAA,KAAM,IAAI,KAAI;YACpB,OAAO,CAAA,iBAAA,2BAAA,KAAM,KAAK,KAAI;YACtB,QAAQ,CAAA,iBAAA,2BAAA,KAAM,MAAM,KAAI;QAC1B;IACF,GAAG;QAAC;KAAa;IAEjB,2CAA2C;IAC3C,IAAI,WAAW,MAAM,GAAG,IAAI;IAC5B,IAAI,OAAO,aAAa,YAAY,SAAS,QAAQ,CAAC,MACpD,WAAW,WAAW,MAAM,GAAG,IAAI,SAAS,MAAM,cAAc,MAAM;IAGxE,IAAI,YAAY,MAAM,IAAI,IAAI;IAC9B,IAAI,OAAO,cAAc,YAAY,UAAU,QAAQ,CAAC,MACtD,YAAY,WAAW,aAAa,SAAS,MAAM,cAAc,KAAK;IAGxE,qBACE,0DAAC;QACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAU,GAAG,uBAAwB;YAAC,WAAW;QAAM;QAC7E,OAAO;YACL,qCAAqC;YACrC,UAAU;YACV,KAAK,cAAc,GAAG,GAAG;YACzB,MAAM,cAAc,IAAI,GAAG;QAC7B;QACA,KAAK;QACL,eAAY;qBACZ,0DAAC;QAAQ,IAAI;QAAW,GAAE;QAAI,GAAE;QAAI,OAAM;QAAK,QAAO;QAAK,cAAa;qBACtE,0DAAC;QAAK,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAU,GAAG;QAAyC,GAAE;QAAI,GAAE;QAAI,OAAM;QAAK,QAAO;sBAChH,0DAAC;QAAK,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAU,GAAG;QAAsC,GAAE;QAAI,GAAE;QAAI,OAAM;QAAI,QAAO;sBAC5G,0DAAC;QAAK,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAU,GAAG;QAAsC,GAAE;QAAI,GAAE;QAAI,OAAM;QAAI,QAAO;uBAE9G,0DAAC;QACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAU,GAAG;QACnC,GAAE;QACF,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;sBAC5B,0DAAC;QACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAU,GAAG;QACnC,GAAE;QACF,MAAM;sBACR,0DAAC;QACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAU,GAAG;QACnC,GAAE;;AAGV","sources":["packages/@react-spectrum/color/src/ColorThumb.tsx"],"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\nimport {classNames} from '@react-spectrum/utils';\nimport {Color} from '@react-types/color';\nimport {DOMProps} from '@react-types/shared';\nimport {Overlay} from '@react-spectrum/overlays';\nimport React, {CSSProperties, ReactElement, RefObject, useRef, useState} from 'react';\nimport stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';\nimport stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';\nimport {useId, useLayoutEffect} from '@react-aria/utils';\nimport {useProvider} from '@react-spectrum/provider';\n\ninterface ColorThumbProps extends DOMProps {\n  value: Color,\n  isDisabled?: boolean,\n  isDragging?: boolean, // shows the color loupe\n  isFocused?: boolean, // makes the circle larger\n  className?: string,\n  children?: ReactElement,\n  style?: CSSProperties,\n  containerRef?: RefObject<HTMLElement>\n}\n\nfunction ColorThumb(props: ColorThumbProps) {\n  let {value, isDisabled, isDragging, isFocused, children, className = '', style, containerRef, ...otherProps} = props;\n\n  let valueCSS = value.toString('css');\n  let loupeRef = useRef<HTMLElement | null>(null);\n  let provider = useProvider();\n\n  return (\n    <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} style={style} {...otherProps}>\n      <div className={classNames(stylesHandle, 'spectrum-ColorHandle-color')} style={{backgroundColor: valueCSS}} />\n      <Overlay isOpen={isDragging && provider != null} nodeRef={loupeRef}>\n        <ColorLoupe valueCSS={valueCSS} containerRef={containerRef} loupeRef={loupeRef} style={style} />\n      </Overlay>\n      {children}\n    </div>\n  );\n}\n\n// ColorLoupe is rendered in a portal so that it breaks out of clipped/scrolling containers (e.g. popovers).\nfunction ColorLoupe({isOpen, valueCSS, containerRef, loupeRef, style}: any) {\n  let patternId = useId();\n\n  // Get the bounding rectangle of the container (e.g. ColorArea/ColorSlider).\n  let [containerRect, setContainerRect] = useState({top: 0, left: 0, width: 0, height: 0});\n  useLayoutEffect(() => {\n    let rect = containerRef.current?.getBoundingClientRect();\n    setContainerRect({\n      top: rect?.top || 0,\n      left: rect?.left || 0,\n      width: rect?.width || 0,\n      height: rect?.height || 0\n    });\n  }, [containerRef]);\n\n  // Compute the pixel position of the thumb.\n  let thumbTop = style.top || '50%';\n  if (typeof thumbTop === 'string' && thumbTop.endsWith('%')) {\n    thumbTop = parseFloat(style.top || '50%') / 100 * containerRect.height;\n  }\n\n  let thumbLeft = style.left || '50%';\n  if (typeof thumbLeft === 'string' && thumbLeft.endsWith('%')) {\n    thumbLeft = parseFloat(thumbLeft || '50%') / 100 * containerRect.width;\n  }\n\n  return (\n    <svg\n      className={classNames(stylesLoupe, 'spectrum-ColorLoupe',  {'is-open': isOpen})}\n      style={{\n        // Position relative to the viewport.\n        position: 'fixed',\n        top: containerRect.top + thumbTop,\n        left: containerRect.left + thumbLeft\n      }}\n      ref={loupeRef}\n      aria-hidden=\"true\">\n      <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n      </pattern>\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n        d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n        fill={`url(#${patternId})`} />\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n        d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n        fill={valueCSS} />\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}\n        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\" />\n    </svg>\n  );\n}\n\nexport {ColorThumb};\n"],"names":[],"version":3,"file":"ColorThumb.main.js.map"}

package/dist/ColorThumb.mjs

@@ -1,10 +1,12 @@
-import "./vars.08ba4b4c.css";
+import "./vars.53b417c1.css";
 import $1UQoL$colorhandle_vars_cssmodulejs from "./colorhandle_vars_css.mjs";
-import "./vars.ef2c01b8.css";
+import "./vars.cc682729.css";
 import $1UQoL$colorloupe_vars_cssmodulejs from "./colorloupe_vars_css.mjs";
 import {classNames as $1UQoL$classNames} from "@react-spectrum/utils";
-import $1UQoL$react from "react";
-import {useId as $1UQoL$useId} from "@react-aria/utils";
+import {Overlay as $1UQoL$Overlay} from "@react-spectrum/overlays";
+import $1UQoL$react, {useRef as $1UQoL$useRef, useState as $1UQoL$useState} from "react";
+import {useId as $1UQoL$useId, useLayoutEffect as $1UQoL$useLayoutEffect} from "@react-aria/utils";
+import {useProvider as $1UQoL$useProvider} from "@react-spectrum/provider";
 
 
 function $parcel$interopDefault(a) {
@@ -25,25 +27,73 @@ function $parcel$interopDefault(a) {
 
 
 
+
+
 function $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc(props) {
-    let { value: value, isDisabled: isDisabled, isDragging: isDragging, isFocused: isFocused, children: children, className: className = "", ...otherProps } = props;
-    let patternId = (0, $1UQoL$useId)();
+    let { value: value, isDisabled: isDisabled, isDragging: isDragging, isFocused: isFocused, children: children, className: className = "", style: style, containerRef: containerRef, ...otherProps } = props;
     let valueCSS = value.toString("css");
+    let loupeRef = (0, $1UQoL$useRef)(null);
+    let provider = (0, $1UQoL$useProvider)();
     return /*#__PURE__*/ (0, $1UQoL$react).createElement("div", {
         className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorhandle_vars_cssmodulejs))), "spectrum-ColorHandle", {
             "is-focused": isFocused,
             "is-disabled": isDisabled
         }) + " " + className,
+        style: style,
         ...otherProps
     }, /*#__PURE__*/ (0, $1UQoL$react).createElement("div", {
         className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorhandle_vars_cssmodulejs))), "spectrum-ColorHandle-color"),
         style: {
             backgroundColor: valueCSS
         }
-    }), /*#__PURE__*/ (0, $1UQoL$react).createElement("svg", {
+    }), /*#__PURE__*/ (0, $1UQoL$react).createElement((0, $1UQoL$Overlay), {
+        isOpen: isDragging && provider != null,
+        nodeRef: loupeRef
+    }, /*#__PURE__*/ (0, $1UQoL$react).createElement($3a90e89d07d7bbd5$var$ColorLoupe, {
+        valueCSS: valueCSS,
+        containerRef: containerRef,
+        loupeRef: loupeRef,
+        style: style
+    })), children);
+}
+// ColorLoupe is rendered in a portal so that it breaks out of clipped/scrolling containers (e.g. popovers).
+function $3a90e89d07d7bbd5$var$ColorLoupe({ isOpen: isOpen, valueCSS: valueCSS, containerRef: containerRef, loupeRef: loupeRef, style: style }) {
+    let patternId = (0, $1UQoL$useId)();
+    // Get the bounding rectangle of the container (e.g. ColorArea/ColorSlider).
+    let [containerRect, setContainerRect] = (0, $1UQoL$useState)({
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0
+    });
+    (0, $1UQoL$useLayoutEffect)(()=>{
+        var _containerRef_current;
+        let rect = (_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.getBoundingClientRect();
+        setContainerRect({
+            top: (rect === null || rect === void 0 ? void 0 : rect.top) || 0,
+            left: (rect === null || rect === void 0 ? void 0 : rect.left) || 0,
+            width: (rect === null || rect === void 0 ? void 0 : rect.width) || 0,
+            height: (rect === null || rect === void 0 ? void 0 : 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 /*#__PURE__*/ (0, $1UQoL$react).createElement("svg", {
         className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), "spectrum-ColorLoupe", {
-            "is-open": isDragging
+            "is-open": isOpen
         }),
+        style: {
+            // Position relative to the viewport.
+            position: "fixed",
+            top: containerRect.top + thumbTop,
+            left: containerRect.left + thumbLeft
+        },
+        ref: loupeRef,
         "aria-hidden": "true"
     }, /*#__PURE__*/ (0, $1UQoL$react).createElement("pattern", {
         id: patternId,
@@ -81,7 +131,7 @@ function $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc(props) {
     }), /*#__PURE__*/ (0, $1UQoL$react).createElement("path", {
         className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), "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"
-    })), children);
+    }));
 }
 
 

package/dist/ColorThumb.module.js

@@ -1,10 +1,12 @@
-import "./vars.08ba4b4c.css";
+import "./vars.53b417c1.css";
 import $1UQoL$colorhandle_vars_cssmodulejs from "./colorhandle_vars_css.module.js";
-import "./vars.ef2c01b8.css";
+import "./vars.cc682729.css";
 import $1UQoL$colorloupe_vars_cssmodulejs from "./colorloupe_vars_css.module.js";
 import {classNames as $1UQoL$classNames} from "@react-spectrum/utils";
-import $1UQoL$react from "react";
-import {useId as $1UQoL$useId} from "@react-aria/utils";
+import {Overlay as $1UQoL$Overlay} from "@react-spectrum/overlays";
+import $1UQoL$react, {useRef as $1UQoL$useRef, useState as $1UQoL$useState} from "react";
+import {useId as $1UQoL$useId, useLayoutEffect as $1UQoL$useLayoutEffect} from "@react-aria/utils";
+import {useProvider as $1UQoL$useProvider} from "@react-spectrum/provider";
 
 
 function $parcel$interopDefault(a) {
@@ -25,25 +27,73 @@ function $parcel$interopDefault(a) {
 
 
 
+
+
 function $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc(props) {
-    let { value: value, isDisabled: isDisabled, isDragging: isDragging, isFocused: isFocused, children: children, className: className = "", ...otherProps } = props;
-    let patternId = (0, $1UQoL$useId)();
+    let { value: value, isDisabled: isDisabled, isDragging: isDragging, isFocused: isFocused, children: children, className: className = "", style: style, containerRef: containerRef, ...otherProps } = props;
     let valueCSS = value.toString("css");
+    let loupeRef = (0, $1UQoL$useRef)(null);
+    let provider = (0, $1UQoL$useProvider)();
     return /*#__PURE__*/ (0, $1UQoL$react).createElement("div", {
         className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorhandle_vars_cssmodulejs))), "spectrum-ColorHandle", {
             "is-focused": isFocused,
             "is-disabled": isDisabled
         }) + " " + className,
+        style: style,
         ...otherProps
     }, /*#__PURE__*/ (0, $1UQoL$react).createElement("div", {
         className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorhandle_vars_cssmodulejs))), "spectrum-ColorHandle-color"),
         style: {
             backgroundColor: valueCSS
         }
-    }), /*#__PURE__*/ (0, $1UQoL$react).createElement("svg", {
+    }), /*#__PURE__*/ (0, $1UQoL$react).createElement((0, $1UQoL$Overlay), {
+        isOpen: isDragging && provider != null,
+        nodeRef: loupeRef
+    }, /*#__PURE__*/ (0, $1UQoL$react).createElement($3a90e89d07d7bbd5$var$ColorLoupe, {
+        valueCSS: valueCSS,
+        containerRef: containerRef,
+        loupeRef: loupeRef,
+        style: style
+    })), children);
+}
+// ColorLoupe is rendered in a portal so that it breaks out of clipped/scrolling containers (e.g. popovers).
+function $3a90e89d07d7bbd5$var$ColorLoupe({ isOpen: isOpen, valueCSS: valueCSS, containerRef: containerRef, loupeRef: loupeRef, style: style }) {
+    let patternId = (0, $1UQoL$useId)();
+    // Get the bounding rectangle of the container (e.g. ColorArea/ColorSlider).
+    let [containerRect, setContainerRect] = (0, $1UQoL$useState)({
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0
+    });
+    (0, $1UQoL$useLayoutEffect)(()=>{
+        var _containerRef_current;
+        let rect = (_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.getBoundingClientRect();
+        setContainerRect({
+            top: (rect === null || rect === void 0 ? void 0 : rect.top) || 0,
+            left: (rect === null || rect === void 0 ? void 0 : rect.left) || 0,
+            width: (rect === null || rect === void 0 ? void 0 : rect.width) || 0,
+            height: (rect === null || rect === void 0 ? void 0 : 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 /*#__PURE__*/ (0, $1UQoL$react).createElement("svg", {
         className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), "spectrum-ColorLoupe", {
-            "is-open": isDragging
+            "is-open": isOpen
         }),
+        style: {
+            // Position relative to the viewport.
+            position: "fixed",
+            top: containerRect.top + thumbTop,
+            left: containerRect.left + thumbLeft
+        },
+        ref: loupeRef,
         "aria-hidden": "true"
     }, /*#__PURE__*/ (0, $1UQoL$react).createElement("pattern", {
         id: patternId,
@@ -81,7 +131,7 @@ function $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc(props) {
     }), /*#__PURE__*/ (0, $1UQoL$react).createElement("path", {
         className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), "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"
-    })), children);
+    }));
 }
 
 

package/dist/ColorThumb.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAmBD,SAAS,yCAAW,KAAsB;IACxC,IAAI,SAAC,KAAK,cAAE,UAAU,cAAE,UAAU,aAAE,SAAS,YAAE,QAAQ,aAAE,YAAY,IAAI,GAAG,YAAW,GAAG;IAE1F,IAAI,YAAY,CAAA,GAAA,YAAI;IAEpB,IAAI,WAAW,MAAM,QAAQ,CAAC;IAE9B,qBACE,gCAAC;QAAI,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,6DAAW,GAAG,wBAAwB;YAAC,cAAc;YAAW,eAAe;QAAU,KAAK,MAAM;QAAY,GAAG,UAAU;qBACtJ,gCAAC;QAAI,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,6DAAW,GAAG;QAA+B,OAAO;YAAC,iBAAiB;QAAQ;sBACzG,gCAAC;QAAI,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,4DAAU,GAAG,uBAAwB;YAAC,WAAW;QAAU;QAAI,eAAY;qBACpG,gCAAC;QAAQ,IAAI;QAAW,GAAE;QAAI,GAAE;QAAI,OAAM;QAAK,QAAO;QAAK,cAAa;qBACtE,gCAAC;QAAK,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,4DAAU,GAAG;QAAyC,GAAE;QAAI,GAAE;QAAI,OAAM;QAAK,QAAO;sBAChH,gCAAC;QAAK,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,4DAAU,GAAG;QAAsC,GAAE;QAAI,GAAE;QAAI,OAAM;QAAI,QAAO;sBAC5G,gCAAC;QAAK,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,4DAAU,GAAG;QAAsC,GAAE;QAAI,GAAE;QAAI,OAAM;QAAI,QAAO;uBAE9G,gCAAC;QACC,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,4DAAU,GAAG;QACnC,GAAE;QACF,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;sBAC5B,gCAAC;QACC,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,4DAAU,GAAG;QACnC,GAAE;QACF,MAAM;sBACR,gCAAC;QACC,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,4DAAU,GAAG;QACnC,GAAE;SAEL;AAGP","sources":["packages/@react-spectrum/color/src/ColorThumb.tsx"],"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\nimport {classNames} from '@react-spectrum/utils';\nimport {Color} from '@react-types/color';\nimport {DOMProps} from '@react-types/shared';\nimport React, {ReactElement} from 'react';\nimport stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';\nimport stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';\nimport {useId} from '@react-aria/utils';\n\ninterface ColorThumbProps extends DOMProps {\n  value: Color,\n  isDisabled?: boolean,\n  isDragging?: boolean, // shows the color loupe\n  isFocused?: boolean, // makes the circle larger\n  className?: string,\n  children?: ReactElement\n}\n\nfunction ColorThumb(props: ColorThumbProps) {\n  let {value, isDisabled, isDragging, isFocused, children, className = '', ...otherProps} = props;\n\n  let patternId = useId();\n\n  let valueCSS = value.toString('css');\n\n  return (\n    <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} {...otherProps}>\n      <div className={classNames(stylesHandle, 'spectrum-ColorHandle-color')} style={{backgroundColor: valueCSS}} />\n      <svg className={classNames(stylesLoupe, 'spectrum-ColorLoupe',  {'is-open': isDragging})} aria-hidden=\"true\">\n        <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n        </pattern>\n        <path\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n          d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n          fill={`url(#${patternId})`} />\n        <path\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n          d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n          fill={valueCSS} />\n        <path\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}\n          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\" />\n      </svg>\n      {children}\n    </div>\n  );\n}\n\nexport {ColorThumb};\n"],"names":[],"version":3,"file":"ColorThumb.module.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/color/src/ColorThumb.tsx"],"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\nimport {classNames} from '@react-spectrum/utils';\nimport {Color} from '@react-types/color';\nimport {DOMProps} from '@react-types/shared';\nimport {Overlay} from '@react-spectrum/overlays';\nimport React, {CSSProperties, ReactElement, RefObject, useRef, useState} from 'react';\nimport stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';\nimport stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';\nimport {useId, useLayoutEffect} from '@react-aria/utils';\nimport {useProvider} from '@react-spectrum/provider';\n\ninterface ColorThumbProps extends DOMProps {\n  value: Color,\n  isDisabled?: boolean,\n  isDragging?: boolean, // shows the color loupe\n  isFocused?: boolean, // makes the circle larger\n  className?: string,\n  children?: ReactElement,\n  style?: CSSProperties,\n  containerRef?: RefObject<HTMLElement>\n}\n\nfunction ColorThumb(props: ColorThumbProps) {\n  let {value, isDisabled, isDragging, isFocused, children, className = '', style, containerRef, ...otherProps} = props;\n\n  let valueCSS = value.toString('css');\n  let loupeRef = useRef<HTMLElement | null>(null);\n  let provider = useProvider();\n\n  return (\n    <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} style={style} {...otherProps}>\n      <div className={classNames(stylesHandle, 'spectrum-ColorHandle-color')} style={{backgroundColor: valueCSS}} />\n      <Overlay isOpen={isDragging && provider != null} nodeRef={loupeRef}>\n        <ColorLoupe valueCSS={valueCSS} containerRef={containerRef} loupeRef={loupeRef} style={style} />\n      </Overlay>\n      {children}\n    </div>\n  );\n}\n\n// ColorLoupe is rendered in a portal so that it breaks out of clipped/scrolling containers (e.g. popovers).\nfunction ColorLoupe({isOpen, valueCSS, containerRef, loupeRef, style}: any) {\n  let patternId = useId();\n\n  // Get the bounding rectangle of the container (e.g. ColorArea/ColorSlider).\n  let [containerRect, setContainerRect] = useState({top: 0, left: 0, width: 0, height: 0});\n  useLayoutEffect(() => {\n    let rect = containerRef.current?.getBoundingClientRect();\n    setContainerRect({\n      top: rect?.top || 0,\n      left: rect?.left || 0,\n      width: rect?.width || 0,\n      height: rect?.height || 0\n    });\n  }, [containerRef]);\n\n  // Compute the pixel position of the thumb.\n  let thumbTop = style.top || '50%';\n  if (typeof thumbTop === 'string' && thumbTop.endsWith('%')) {\n    thumbTop = parseFloat(style.top || '50%') / 100 * containerRect.height;\n  }\n\n  let thumbLeft = style.left || '50%';\n  if (typeof thumbLeft === 'string' && thumbLeft.endsWith('%')) {\n    thumbLeft = parseFloat(thumbLeft || '50%') / 100 * containerRect.width;\n  }\n\n  return (\n    <svg\n      className={classNames(stylesLoupe, 'spectrum-ColorLoupe',  {'is-open': isOpen})}\n      style={{\n        // Position relative to the viewport.\n        position: 'fixed',\n        top: containerRect.top + thumbTop,\n        left: containerRect.left + thumbLeft\n      }}\n      ref={loupeRef}\n      aria-hidden=\"true\">\n      <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n      </pattern>\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n        d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n        fill={`url(#${patternId})`} />\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n        d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n        fill={valueCSS} />\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}\n        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\" />\n    </svg>\n  );\n}\n\nexport {ColorThumb};\n"],"names":[],"version":3,"file":"ColorThumb.module.js.map"}

package/dist/ColorWheel.main.js

@@ -2,6 +2,7 @@ var $2b9adc23f6c7cae1$exports = require("./ColorThumb.main.js");
 require("./vars.ac235018.css");
 var $8fc6b1a2f4e7f682$exports = require("./colorwheel_vars_css.main.js");
 var $gEgjt$reactspectrumutils = require("@react-spectrum/utils");
+var $gEgjt$reactariacomponents = require("react-aria-components");
 var $gEgjt$react = require("react");
 var $gEgjt$reactariacolor = require("@react-aria/color");
 var $gEgjt$reactstatelycolor = require("@react-stately/color");
@@ -38,14 +39,16 @@ $parcel$export(module.exports, "ColorWheel", () => $63a2864687444ae1$export$f806
 
 
 
+
 const $63a2864687444ae1$var$WHEEL_THICKNESS = 24;
 function $63a2864687444ae1$var$ColorWheel(props, ref) {
     props = (0, $gEgjt$reactspectrumprovider.useProviderProps)(props);
+    let inputRef = (0, $gEgjt$react.useRef)(null);
+    let containerRef = (0, $gEgjt$reactspectrumutils.useFocusableRef)(ref, inputRef);
+    [props, containerRef] = (0, $gEgjt$reactariacomponents.useContextProps)(props, containerRef, (0, $gEgjt$reactariacomponents.ColorWheelContext));
     let { isDisabled: isDisabled } = props;
     let size = props.size && (0, $gEgjt$reactspectrumutils.dimensionValue)(props.size);
     let { styleProps: styleProps } = (0, $gEgjt$reactspectrumutils.useStyleProps)(props);
-    let inputRef = (0, $gEgjt$react.useRef)(null);
-    let containerRef = (0, $gEgjt$reactspectrumutils.useFocusableRef)(ref, inputRef);
     let [wheelRadius, setWheelRadius] = (0, $gEgjt$react.useState)(0);
     let [wheelThickness, setWheelThickness] = (0, $gEgjt$react.useState)($63a2864687444ae1$var$WHEEL_THICKNESS);
     let resizeHandler = (0, $gEgjt$react.useCallback)(()=>{
@@ -97,6 +100,7 @@ function $63a2864687444ae1$var$ColorWheel(props, ref) {
         isFocused: isFocusVisible,
         isDisabled: isDisabled,
         isDragging: state.isDragging,
+        containerRef: containerRef,
         className: (0, $gEgjt$reactspectrumutils.classNames)((0, ($parcel$interopDefault($8fc6b1a2f4e7f682$exports))), "spectrum-ColorWheel-handle"),
         ...thumbProps
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($gEgjt$react))).createElement("input", {

package/dist/ColorWheel.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAcD,MAAM,wCAAkB;AAExB,SAAS,iCAAW,KAA8B,EAAE,GAAiC;IACnF,QAAQ,CAAA,GAAA,6CAAe,EAAE;IAEzB,IAAI,cAAC,UAAU,EAAC,GAAG;IACnB,IAAI,OAAO,MAAM,IAAI,IAAI,CAAA,GAAA,wCAAa,EAAE,MAAM,IAAI;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IAEjC,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,eAAe,CAAA,GAAA,yCAAc,EAAE,KAAK;IAExC,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,qBAAO,EAAU;IACrD,IAAI,CAAC,gBAAgB,kBAAkB,GAAG,CAAA,GAAA,qBAAO,EAAE;IAEnD,IAAI,gBAAgB,CAAA,GAAA,wBAAU,EAAE;QAC9B,IAAI,aAAa,OAAO,EAAE;YACxB,eAAe,aAAa,OAAO,CAAC,WAAW,GAAG;YAClD,IAAI,YAAY,OAAO,gBAAgB,CAAC,aAAa,OAAO,EACzD,gBAAgB,CAAC;YACpB,IAAI,WACF,kBAAkB,SAAS,WAAW;QAE1C;IACF,GAAG;QAAC;QAAc;QAAgB;KAAkB;IAEpD,CAAA,GAAA,sBAAQ,EAAE;QACR,gFAAgF;QAChF,IAAI,gBAAgB,GAClB;IAEJ,GAAG;QAAC;QAAa;KAAc;IAE/B,CAAA,GAAA,uCAAgB,EAAE;QAChB,KAAK;QACL,UAAU;IACZ;IAEA,IAAI,QAAQ,CAAA,GAAA,2CAAiB,EAAE;IAE/B,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,mCAAY,EAAE;QACvD,GAAG,KAAK;QACR,aAAa,cAAc;QAC3B,aAAa;IACf,GAAG,OAAO;IAEV,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,kCAAW;IAE9C,qBACE,0DAAC;QACC,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL,uBACA;YACE,eAAe;QACjB,GACA,WAAW,SAAS;QAGxB,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,sEAAsE;YACtE,aAAa;YACb,SAAS;YACT,UAAU;QACZ;qBACA,0DAAC;QAAK,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;sBACnD,0DAAC,CAAA,GAAA,oCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW;QACX,YAAY;QACZ,YAAY,MAAM,UAAU;QAC5B,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC7B,GAAG,UAAU;qBACd,0DAAC;QAAO,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAAgC,GAAG,UAAU;QAAE,KAAK;;AAIjH;AAEA;;CAEC,GACD,IAAI,0DAAc,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/color/src/ColorWheel.tsx"],"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\nimport {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport React, {useCallback, useEffect, useRef, useState} from 'react';\nimport {SpectrumColorWheelProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheel} from '@react-aria/color';\nimport {useColorWheelState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useResizeObserver} from '@react-aria/utils';\n\nconst WHEEL_THICKNESS = 24;\n\nfunction ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n\n  let {isDisabled} = props;\n  let size = props.size && dimensionValue(props.size);\n  let {styleProps} = useStyleProps(props);\n\n  let inputRef = useRef(null);\n  let containerRef = useFocusableRef(ref, inputRef);\n\n  let [wheelRadius, setWheelRadius] = useState<number>(0);\n  let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);\n\n  let resizeHandler = useCallback(() => {\n    if (containerRef.current) {\n      setWheelRadius(containerRef.current.offsetWidth / 2);\n      let thickness = window.getComputedStyle(containerRef.current)\n        .getPropertyValue('--spectrum-colorwheel-track-thickness');\n      if (thickness) {\n        setWheelThickness(parseInt(thickness, 10));\n      }\n    }\n  }, [containerRef, setWheelRadius, setWheelThickness]);\n\n  useEffect(() => {\n    // the size observer's fallback to the window resize event doesn't fire on mount\n    if (wheelRadius === 0) {\n      resizeHandler();\n    }\n  }, [wheelRadius, resizeHandler]);\n\n  useResizeObserver({\n    ref: containerRef,\n    onResize: resizeHandler\n  });\n\n  let state = useColorWheelState(props);\n\n  let {trackProps, inputProps, thumbProps} = useColorWheel({\n    ...props,\n    innerRadius: wheelRadius - wheelThickness,\n    outerRadius: wheelRadius\n  }, state, inputRef);\n\n  let {focusProps, isFocusVisible} = useFocusRing();\n\n  return (\n    <div\n      className={\n        classNames(\n          styles,\n          'spectrum-ColorWheel',\n          {\n            'is-disabled': isDisabled\n          },\n          styleProps.className\n        )\n      }\n      ref={containerRef}\n      style={{\n        ...styleProps.style,\n        // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n        // @ts-ignore\n        'width': size,\n        'height': size\n      }}>\n      <div {...trackProps} className={classNames(styles, 'spectrum-ColorWheel-gradient')} />\n      <ColorThumb\n        value={state.getDisplayColor()}\n        isFocused={isFocusVisible}\n        isDisabled={isDisabled}\n        isDragging={state.isDragging}\n        className={classNames(styles, 'spectrum-ColorWheel-handle')}\n        {...thumbProps}>\n        <input {...focusProps} className={classNames(styles, 'spectrum-ColorWheel-slider')} {...inputProps} ref={inputRef} />\n      </ColorThumb>\n    </div>\n  );\n}\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nlet _ColorWheel = React.forwardRef(ColorWheel);\nexport {_ColorWheel as ColorWheel};\n"],"names":[],"version":3,"file":"ColorWheel.main.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAeD,MAAM,wCAAkB;AAExB,SAAS,iCAAW,KAA8B,EAAE,GAAiC;IACnF,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,eAAe,CAAA,GAAA,yCAAc,EAAE,KAAK;IACxC,CAAC,OAAO,aAAa,GAAG,CAAA,GAAA,0CAAc,EAAE,OAAO,cAAc,CAAA,GAAA,4CAAgB;IAE7E,IAAI,cAAC,UAAU,EAAC,GAAG;IACnB,IAAI,OAAO,MAAM,IAAI,IAAI,CAAA,GAAA,wCAAa,EAAE,MAAM,IAAI;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IAGjC,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,qBAAO,EAAU;IACrD,IAAI,CAAC,gBAAgB,kBAAkB,GAAG,CAAA,GAAA,qBAAO,EAAE;IAEnD,IAAI,gBAAgB,CAAA,GAAA,wBAAU,EAAE;QAC9B,IAAI,aAAa,OAAO,EAAE;YACxB,eAAe,aAAa,OAAO,CAAC,WAAW,GAAG;YAClD,IAAI,YAAY,OAAO,gBAAgB,CAAC,aAAa,OAAO,EACzD,gBAAgB,CAAC;YACpB,IAAI,WACF,kBAAkB,SAAS,WAAW;QAE1C;IACF,GAAG;QAAC;QAAc;QAAgB;KAAkB;IAEpD,CAAA,GAAA,sBAAQ,EAAE;QACR,gFAAgF;QAChF,IAAI,gBAAgB,GAClB;IAEJ,GAAG;QAAC;QAAa;KAAc;IAE/B,CAAA,GAAA,uCAAgB,EAAE;QAChB,KAAK;QACL,UAAU;IACZ;IAEA,IAAI,QAAQ,CAAA,GAAA,2CAAiB,EAAE;IAE/B,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,mCAAY,EAAE;QACvD,GAAG,KAAK;QACR,aAAa,cAAc;QAC3B,aAAa;IACf,GAAG,OAAO;IAEV,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,kCAAW;IAE9C,qBACE,0DAAC;QACC,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL,uBACA;YACE,eAAe;QACjB,GACA,WAAW,SAAS;QAGxB,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,sEAAsE;YACtE,aAAa;YACb,SAAS;YACT,UAAU;QACZ;qBACA,0DAAC;QAAK,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;sBACnD,0DAAC,CAAA,GAAA,oCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW;QACX,YAAY;QACZ,YAAY,MAAM,UAAU;QAC5B,cAAc;QACd,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC7B,GAAG,UAAU;qBACd,0DAAC;QAAO,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAAgC,GAAG,UAAU;QAAE,KAAK;;AAIjH;AAEA;;CAEC,GACD,IAAI,0DAAc,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/color/src/ColorWheel.tsx"],"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\nimport {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {ColorWheelContext, useContextProps} from 'react-aria-components';\nimport {FocusableRef} from '@react-types/shared';\nimport React, {useCallback, useEffect, useRef, useState} from 'react';\nimport {SpectrumColorWheelProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheel} from '@react-aria/color';\nimport {useColorWheelState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useResizeObserver} from '@react-aria/utils';\n\nconst WHEEL_THICKNESS = 24;\n\nfunction ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n  let inputRef = useRef(null);\n  let containerRef = useFocusableRef(ref, inputRef);\n  [props, containerRef] = useContextProps(props, containerRef, ColorWheelContext);\n\n  let {isDisabled} = props;\n  let size = props.size && dimensionValue(props.size);\n  let {styleProps} = useStyleProps(props);\n\n\n  let [wheelRadius, setWheelRadius] = useState<number>(0);\n  let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);\n\n  let resizeHandler = useCallback(() => {\n    if (containerRef.current) {\n      setWheelRadius(containerRef.current.offsetWidth / 2);\n      let thickness = window.getComputedStyle(containerRef.current)\n        .getPropertyValue('--spectrum-colorwheel-track-thickness');\n      if (thickness) {\n        setWheelThickness(parseInt(thickness, 10));\n      }\n    }\n  }, [containerRef, setWheelRadius, setWheelThickness]);\n\n  useEffect(() => {\n    // the size observer's fallback to the window resize event doesn't fire on mount\n    if (wheelRadius === 0) {\n      resizeHandler();\n    }\n  }, [wheelRadius, resizeHandler]);\n\n  useResizeObserver({\n    ref: containerRef,\n    onResize: resizeHandler\n  });\n\n  let state = useColorWheelState(props);\n\n  let {trackProps, inputProps, thumbProps} = useColorWheel({\n    ...props,\n    innerRadius: wheelRadius - wheelThickness,\n    outerRadius: wheelRadius\n  }, state, inputRef);\n\n  let {focusProps, isFocusVisible} = useFocusRing();\n\n  return (\n    <div\n      className={\n        classNames(\n          styles,\n          'spectrum-ColorWheel',\n          {\n            'is-disabled': isDisabled\n          },\n          styleProps.className\n        )\n      }\n      ref={containerRef}\n      style={{\n        ...styleProps.style,\n        // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n        // @ts-ignore\n        'width': size,\n        'height': size\n      }}>\n      <div {...trackProps} className={classNames(styles, 'spectrum-ColorWheel-gradient')} />\n      <ColorThumb\n        value={state.getDisplayColor()}\n        isFocused={isFocusVisible}\n        isDisabled={isDisabled}\n        isDragging={state.isDragging}\n        containerRef={containerRef}\n        className={classNames(styles, 'spectrum-ColorWheel-handle')}\n        {...thumbProps}>\n        <input {...focusProps} className={classNames(styles, 'spectrum-ColorWheel-slider')} {...inputProps} ref={inputRef} />\n      </ColorThumb>\n    </div>\n  );\n}\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nlet _ColorWheel = React.forwardRef(ColorWheel);\nexport {_ColorWheel as ColorWheel};\n"],"names":[],"version":3,"file":"ColorWheel.main.js.map"}

package/dist/ColorWheel.mjs

@@ -1,7 +1,8 @@
 import {ColorThumb as $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc} from "./ColorThumb.mjs";
 import "./vars.ac235018.css";
 import $bv4AR$colorwheel_vars_cssmodulejs from "./colorwheel_vars_css.mjs";
-import {dimensionValue as $bv4AR$dimensionValue, useStyleProps as $bv4AR$useStyleProps, useFocusableRef as $bv4AR$useFocusableRef, classNames as $bv4AR$classNames} from "@react-spectrum/utils";
+import {useFocusableRef as $bv4AR$useFocusableRef, dimensionValue as $bv4AR$dimensionValue, useStyleProps as $bv4AR$useStyleProps, classNames as $bv4AR$classNames} from "@react-spectrum/utils";
+import {useContextProps as $bv4AR$useContextProps, ColorWheelContext as $bv4AR$ColorWheelContext} from "react-aria-components";
 import $bv4AR$react, {useRef as $bv4AR$useRef, useState as $bv4AR$useState, useCallback as $bv4AR$useCallback, useEffect as $bv4AR$useEffect} from "react";
 import {useColorWheel as $bv4AR$useColorWheel} from "@react-aria/color";
 import {useColorWheelState as $bv4AR$useColorWheelState} from "@react-stately/color";
@@ -32,14 +33,16 @@ function $parcel$interopDefault(a) {
 
 
 
+
 const $3aac1c27203f04b5$var$WHEEL_THICKNESS = 24;
 function $3aac1c27203f04b5$var$ColorWheel(props, ref) {
     props = (0, $bv4AR$useProviderProps)(props);
+    let inputRef = (0, $bv4AR$useRef)(null);
+    let containerRef = (0, $bv4AR$useFocusableRef)(ref, inputRef);
+    [props, containerRef] = (0, $bv4AR$useContextProps)(props, containerRef, (0, $bv4AR$ColorWheelContext));
     let { isDisabled: isDisabled } = props;
     let size = props.size && (0, $bv4AR$dimensionValue)(props.size);
     let { styleProps: styleProps } = (0, $bv4AR$useStyleProps)(props);
-    let inputRef = (0, $bv4AR$useRef)(null);
-    let containerRef = (0, $bv4AR$useFocusableRef)(ref, inputRef);
     let [wheelRadius, setWheelRadius] = (0, $bv4AR$useState)(0);
     let [wheelThickness, setWheelThickness] = (0, $bv4AR$useState)($3aac1c27203f04b5$var$WHEEL_THICKNESS);
     let resizeHandler = (0, $bv4AR$useCallback)(()=>{
@@ -91,6 +94,7 @@ function $3aac1c27203f04b5$var$ColorWheel(props, ref) {
         isFocused: isFocusVisible,
         isDisabled: isDisabled,
         isDragging: state.isDragging,
+        containerRef: containerRef,
         className: (0, $bv4AR$classNames)((0, ($parcel$interopDefault($bv4AR$colorwheel_vars_cssmodulejs))), "spectrum-ColorWheel-handle"),
         ...thumbProps
     }, /*#__PURE__*/ (0, $bv4AR$react).createElement("input", {