@react-spectrum/color 3.0.0-nightly.4555 → 3.0.0-nightly.4558

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (79) hide show
  1. package/dist/ColorArea.main.js +97 -0
  2. package/dist/ColorArea.main.js.map +1 -0
  3. package/dist/ColorArea.mjs +92 -0
  4. package/dist/ColorArea.module.js +92 -0
  5. package/dist/ColorArea.module.js.map +1 -0
  6. package/dist/ColorField.main.js +61 -0
  7. package/dist/ColorField.main.js.map +1 -0
  8. package/dist/ColorField.mjs +56 -0
  9. package/dist/ColorField.module.js +56 -0
  10. package/dist/ColorField.module.js.map +1 -0
  11. package/dist/ColorSlider.main.js +125 -0
  12. package/dist/ColorSlider.main.js.map +1 -0
  13. package/dist/ColorSlider.mjs +120 -0
  14. package/dist/ColorSlider.module.js +120 -0
  15. package/dist/ColorSlider.module.js.map +1 -0
  16. package/dist/ColorThumb.main.js +94 -0
  17. package/dist/ColorThumb.main.js.map +1 -0
  18. package/dist/ColorThumb.mjs +89 -0
  19. package/dist/ColorThumb.module.js +89 -0
  20. package/dist/ColorThumb.module.js.map +1 -0
  21. package/dist/ColorWheel.main.js +114 -0
  22. package/dist/ColorWheel.main.js.map +1 -0
  23. package/dist/ColorWheel.mjs +109 -0
  24. package/dist/ColorWheel.module.js +109 -0
  25. package/dist/ColorWheel.module.js.map +1 -0
  26. package/dist/colorarea_vars_css.main.js +32 -0
  27. package/dist/colorarea_vars_css.main.js.map +1 -0
  28. package/dist/colorarea_vars_css.mjs +34 -0
  29. package/dist/colorarea_vars_css.module.js +34 -0
  30. package/dist/colorarea_vars_css.module.js.map +1 -0
  31. package/dist/colorfield.faeff3c2.css +12 -0
  32. package/dist/colorfield.faeff3c2.css.map +1 -0
  33. package/dist/colorfield_css.main.js +11 -0
  34. package/dist/colorfield_css.main.js.map +1 -0
  35. package/dist/colorfield_css.mjs +13 -0
  36. package/dist/colorfield_css.module.js +13 -0
  37. package/dist/colorfield_css.module.js.map +1 -0
  38. package/dist/colorhandle_vars_css.main.js +26 -0
  39. package/dist/colorhandle_vars_css.main.js.map +1 -0
  40. package/dist/colorhandle_vars_css.mjs +28 -0
  41. package/dist/colorhandle_vars_css.module.js +28 -0
  42. package/dist/colorhandle_vars_css.module.js.map +1 -0
  43. package/dist/colorloupe_vars_css.main.js +23 -0
  44. package/dist/colorloupe_vars_css.main.js.map +1 -0
  45. package/dist/colorloupe_vars_css.mjs +25 -0
  46. package/dist/colorloupe_vars_css.module.js +25 -0
  47. package/dist/colorloupe_vars_css.module.js.map +1 -0
  48. package/dist/colorslider_vars_css.main.js +53 -0
  49. package/dist/colorslider_vars_css.main.js.map +1 -0
  50. package/dist/colorslider_vars_css.mjs +55 -0
  51. package/dist/colorslider_vars_css.module.js +55 -0
  52. package/dist/colorslider_vars_css.module.js.map +1 -0
  53. package/dist/colorwheel_vars_css.main.js +35 -0
  54. package/dist/colorwheel_vars_css.main.js.map +1 -0
  55. package/dist/colorwheel_vars_css.mjs +37 -0
  56. package/dist/colorwheel_vars_css.module.js +37 -0
  57. package/dist/colorwheel_vars_css.module.js.map +1 -0
  58. package/dist/import.mjs +4 -550
  59. package/dist/main.js +8 -550
  60. package/dist/main.js.map +1 -1
  61. package/dist/module.js +4 -550
  62. package/dist/module.js.map +1 -1
  63. package/dist/types.d.ts +3 -3
  64. package/dist/types.d.ts.map +1 -1
  65. package/dist/vars.08ba4b4c.css +76 -0
  66. package/dist/vars.08ba4b4c.css.map +1 -0
  67. package/dist/vars.571f903e.css +120 -0
  68. package/dist/vars.571f903e.css.map +1 -0
  69. package/dist/vars.6f3d3943.css +105 -0
  70. package/dist/vars.6f3d3943.css.map +1 -0
  71. package/dist/vars.ac235018.css +93 -0
  72. package/dist/vars.ac235018.css.map +1 -0
  73. package/dist/vars.ef2c01b8.css +41 -0
  74. package/dist/vars.ef2c01b8.css.map +1 -0
  75. package/package.json +16 -16
  76. package/dist/main.css +0 -447
  77. package/dist/main.css.map +0 -1
  78. package/dist/module.css +0 -447
  79. package/dist/module.css.map +0 -1
@@ -0,0 +1,97 @@
1
+ var $2b9adc23f6c7cae1$exports = require("./ColorThumb.main.js");
2
+ require("./vars.6f3d3943.css");
3
+ var $d4b4e0a63f9ca8c1$exports = require("./colorarea_vars_css.main.js");
4
+ var $6Gwd1$reactspectrumutils = require("@react-spectrum/utils");
5
+ var $6Gwd1$reactariautils = require("@react-aria/utils");
6
+ var $6Gwd1$react = require("react");
7
+ var $6Gwd1$reactariacolor = require("@react-aria/color");
8
+ var $6Gwd1$reactstatelycolor = require("@react-stately/color");
9
+ var $6Gwd1$reactariafocus = require("@react-aria/focus");
10
+ var $6Gwd1$reactspectrumprovider = require("@react-spectrum/provider");
11
+
12
+
13
+ function $parcel$interopDefault(a) {
14
+ return a && a.__esModule ? a.default : a;
15
+ }
16
+
17
+ function $parcel$export(e, n, v, s) {
18
+ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
19
+ }
20
+
21
+ $parcel$export(module.exports, "ColorArea", () => $5f016e950c2dc3a6$export$b2103f68a961418e);
22
+ /*
23
+ * Copyright 2021 Adobe. All rights reserved.
24
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
25
+ * you may not use this file except in compliance with the License. You may obtain a copy
26
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
27
+ *
28
+ * Unless required by applicable law or agreed to in writing, software distributed under
29
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
30
+ * OF ANY KIND, either express or implied. See the License for the specific language
31
+ * governing permissions and limitations under the License.
32
+ */
33
+
34
+
35
+
36
+
37
+
38
+
39
+
40
+
41
+ function $5f016e950c2dc3a6$var$ColorArea(props, ref) {
42
+ props = (0, $6Gwd1$reactspectrumprovider.useProviderProps)(props);
43
+ let { isDisabled: isDisabled } = props;
44
+ let size = props.size && (0, $6Gwd1$reactspectrumutils.dimensionValue)(props.size);
45
+ let { styleProps: styleProps } = (0, $6Gwd1$reactspectrumutils.useStyleProps)(props);
46
+ let inputXRef = (0, $6Gwd1$react.useRef)(null);
47
+ let inputYRef = (0, $6Gwd1$react.useRef)(null);
48
+ let containerRef = (0, $6Gwd1$reactspectrumutils.useFocusableRef)(ref, inputXRef);
49
+ let state = (0, $6Gwd1$reactstatelycolor.useColorAreaState)(props);
50
+ let { colorAreaProps: colorAreaProps, gradientProps: gradientProps, xInputProps: xInputProps, yInputProps: yInputProps, thumbProps: thumbProps } = (0, $6Gwd1$reactariacolor.useColorArea)({
51
+ ...props,
52
+ inputXRef: inputXRef,
53
+ inputYRef: inputYRef,
54
+ containerRef: containerRef
55
+ }, state);
56
+ let { focusProps: focusProps, isFocusVisible: isFocusVisible } = (0, $6Gwd1$reactariafocus.useFocusRing)();
57
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($6Gwd1$react))).createElement("div", {
58
+ ...colorAreaProps,
59
+ className: (0, $6Gwd1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($d4b4e0a63f9ca8c1$exports))), "spectrum-ColorArea", {
60
+ "is-disabled": isDisabled
61
+ }, styleProps.className),
62
+ ref: containerRef,
63
+ style: {
64
+ ...colorAreaProps.style,
65
+ ...styleProps.style,
66
+ // Workaround around https://github.com/adobe/spectrum-css/issues/1032
67
+ width: size,
68
+ height: size
69
+ }
70
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($6Gwd1$react))).createElement("div", {
71
+ ...gradientProps,
72
+ className: (0, $6Gwd1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($d4b4e0a63f9ca8c1$exports))), "spectrum-ColorArea-gradient")
73
+ }), /*#__PURE__*/ (0, ($parcel$interopDefault($6Gwd1$react))).createElement((0, $2b9adc23f6c7cae1$exports.ColorThumb), {
74
+ value: state.getDisplayColor(),
75
+ isFocused: isFocusVisible,
76
+ isDisabled: isDisabled,
77
+ isDragging: state.isDragging,
78
+ className: (0, $6Gwd1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($d4b4e0a63f9ca8c1$exports))), "spectrum-ColorArea-handle"),
79
+ ...thumbProps
80
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($6Gwd1$react))).createElement("div", {
81
+ role: "presentation"
82
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($6Gwd1$react))).createElement("input", {
83
+ className: (0, $6Gwd1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($d4b4e0a63f9ca8c1$exports))), "spectrum-ColorArea-slider"),
84
+ ...(0, $6Gwd1$reactariautils.mergeProps)(xInputProps, focusProps),
85
+ ref: inputXRef
86
+ }), /*#__PURE__*/ (0, ($parcel$interopDefault($6Gwd1$react))).createElement("input", {
87
+ className: (0, $6Gwd1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($d4b4e0a63f9ca8c1$exports))), "spectrum-ColorArea-slider"),
88
+ ...(0, $6Gwd1$reactariautils.mergeProps)(yInputProps, focusProps),
89
+ ref: inputYRef
90
+ }))));
91
+ }
92
+ /**
93
+ * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
94
+ */ let $5f016e950c2dc3a6$export$b2103f68a961418e = /*#__PURE__*/ (0, ($parcel$interopDefault($6Gwd1$react))).forwardRef($5f016e950c2dc3a6$var$ColorArea);
95
+
96
+
97
+ //# sourceMappingURL=ColorArea.main.js.map
@@ -0,0 +1 @@
1
+ {"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAcD,SAAS,gCAAU,KAA6B,EAAE,GAAiC;IACjF,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,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,eAAe,CAAA,GAAA,yCAAc,EAAE,KAAK;IAExC,IAAI,QAAQ,CAAA,GAAA,0CAAgB,EAAE;IAE9B,IAAI,kBACF,cAAc,iBACd,aAAa,eACb,WAAW,eACX,WAAW,cACX,UAAU,EACX,GAAG,CAAA,GAAA,kCAAW,EAAE;QAAC,GAAG,KAAK;mBAAE;mBAAW;sBAAW;IAAY,GAAG;IACjE,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,kCAAW;IAE9C,qBACE,0DAAC;QACE,GAAG,cAAc;QAClB,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL,sBACA;YACE,eAAe;QACjB,GACA,WAAW,SAAS;QAGxB,KAAK;QACL,OAAO;YACL,GAAG,eAAe,KAAK;YACvB,GAAG,WAAW,KAAK;YACnB,sEAAsE;YACtE,OAAO;YACP,QAAQ;QACV;qBACA,0DAAC;QAAK,GAAG,aAAa;QAAE,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;sBACtD,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;QAAI,MAAK;qBACR,0DAAC;QAAM,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAA+B,GAAG,CAAA,GAAA,gCAAS,EAAE,aAAa,WAAW;QAAE,KAAK;sBACjH,0DAAC;QAAM,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAA+B,GAAG,CAAA,GAAA,gCAAS,EAAE,aAAa,WAAW;QAAE,KAAK;;AAK3H;AAEA;;CAEC,GACD,IAAI,0DAAa,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/color/src/ColorArea.tsx"],"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\nimport {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {ReactElement, useRef} from 'react';\nimport {SpectrumColorAreaProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorarea/vars.css';\nimport {useColorArea} from '@react-aria/color';\nimport {useColorAreaState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorArea(props: SpectrumColorAreaProps, 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 inputXRef = useRef(null);\n let inputYRef = useRef(null);\n let containerRef = useFocusableRef(ref, inputXRef);\n\n let state = useColorAreaState(props);\n\n let {\n colorAreaProps,\n gradientProps,\n xInputProps,\n yInputProps,\n thumbProps\n } = useColorArea({...props, inputXRef, inputYRef, containerRef}, state);\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n {...colorAreaProps}\n className={\n classNames(\n styles,\n 'spectrum-ColorArea',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )\n }\n ref={containerRef}\n style={{\n ...colorAreaProps.style,\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n width: size,\n height: size\n }}>\n <div {...gradientProps} className={classNames(styles, 'spectrum-ColorArea-gradient')} />\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isDragging}\n className={classNames(styles, 'spectrum-ColorArea-handle')}\n {...thumbProps}>\n <div role=\"presentation\">\n <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(xInputProps, focusProps)} ref={inputXRef} />\n <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(yInputProps, focusProps)} ref={inputYRef} />\n </div>\n </ColorThumb>\n </div>\n );\n}\n\n/**\n * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nlet _ColorArea = React.forwardRef(ColorArea) as (props: SpectrumColorAreaProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;\nexport {_ColorArea as ColorArea};\n"],"names":[],"version":3,"file":"ColorArea.main.js.map"}
@@ -0,0 +1,92 @@
1
+ import {ColorThumb as $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc} from "./ColorThumb.mjs";
2
+ import "./vars.6f3d3943.css";
3
+ import $4eSry$colorarea_vars_cssmodulejs from "./colorarea_vars_css.mjs";
4
+ import {dimensionValue as $4eSry$dimensionValue, useStyleProps as $4eSry$useStyleProps, useFocusableRef as $4eSry$useFocusableRef, classNames as $4eSry$classNames} from "@react-spectrum/utils";
5
+ import {mergeProps as $4eSry$mergeProps} from "@react-aria/utils";
6
+ import $4eSry$react, {useRef as $4eSry$useRef} from "react";
7
+ import {useColorArea as $4eSry$useColorArea} from "@react-aria/color";
8
+ import {useColorAreaState as $4eSry$useColorAreaState} from "@react-stately/color";
9
+ import {useFocusRing as $4eSry$useFocusRing} from "@react-aria/focus";
10
+ import {useProviderProps as $4eSry$useProviderProps} from "@react-spectrum/provider";
11
+
12
+
13
+ function $parcel$interopDefault(a) {
14
+ return a && a.__esModule ? a.default : a;
15
+ }
16
+ /*
17
+ * Copyright 2021 Adobe. All rights reserved.
18
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
19
+ * you may not use this file except in compliance with the License. You may obtain a copy
20
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
21
+ *
22
+ * Unless required by applicable law or agreed to in writing, software distributed under
23
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
24
+ * OF ANY KIND, either express or implied. See the License for the specific language
25
+ * governing permissions and limitations under the License.
26
+ */
27
+
28
+
29
+
30
+
31
+
32
+
33
+
34
+
35
+ function $40046aa1a7ccb226$var$ColorArea(props, ref) {
36
+ props = (0, $4eSry$useProviderProps)(props);
37
+ let { isDisabled: isDisabled } = props;
38
+ let size = props.size && (0, $4eSry$dimensionValue)(props.size);
39
+ let { styleProps: styleProps } = (0, $4eSry$useStyleProps)(props);
40
+ let inputXRef = (0, $4eSry$useRef)(null);
41
+ let inputYRef = (0, $4eSry$useRef)(null);
42
+ let containerRef = (0, $4eSry$useFocusableRef)(ref, inputXRef);
43
+ let state = (0, $4eSry$useColorAreaState)(props);
44
+ let { colorAreaProps: colorAreaProps, gradientProps: gradientProps, xInputProps: xInputProps, yInputProps: yInputProps, thumbProps: thumbProps } = (0, $4eSry$useColorArea)({
45
+ ...props,
46
+ inputXRef: inputXRef,
47
+ inputYRef: inputYRef,
48
+ containerRef: containerRef
49
+ }, state);
50
+ let { focusProps: focusProps, isFocusVisible: isFocusVisible } = (0, $4eSry$useFocusRing)();
51
+ return /*#__PURE__*/ (0, $4eSry$react).createElement("div", {
52
+ ...colorAreaProps,
53
+ className: (0, $4eSry$classNames)((0, ($parcel$interopDefault($4eSry$colorarea_vars_cssmodulejs))), "spectrum-ColorArea", {
54
+ "is-disabled": isDisabled
55
+ }, styleProps.className),
56
+ ref: containerRef,
57
+ style: {
58
+ ...colorAreaProps.style,
59
+ ...styleProps.style,
60
+ // Workaround around https://github.com/adobe/spectrum-css/issues/1032
61
+ width: size,
62
+ height: size
63
+ }
64
+ }, /*#__PURE__*/ (0, $4eSry$react).createElement("div", {
65
+ ...gradientProps,
66
+ className: (0, $4eSry$classNames)((0, ($parcel$interopDefault($4eSry$colorarea_vars_cssmodulejs))), "spectrum-ColorArea-gradient")
67
+ }), /*#__PURE__*/ (0, $4eSry$react).createElement((0, $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc), {
68
+ value: state.getDisplayColor(),
69
+ isFocused: isFocusVisible,
70
+ isDisabled: isDisabled,
71
+ isDragging: state.isDragging,
72
+ className: (0, $4eSry$classNames)((0, ($parcel$interopDefault($4eSry$colorarea_vars_cssmodulejs))), "spectrum-ColorArea-handle"),
73
+ ...thumbProps
74
+ }, /*#__PURE__*/ (0, $4eSry$react).createElement("div", {
75
+ role: "presentation"
76
+ }, /*#__PURE__*/ (0, $4eSry$react).createElement("input", {
77
+ className: (0, $4eSry$classNames)((0, ($parcel$interopDefault($4eSry$colorarea_vars_cssmodulejs))), "spectrum-ColorArea-slider"),
78
+ ...(0, $4eSry$mergeProps)(xInputProps, focusProps),
79
+ ref: inputXRef
80
+ }), /*#__PURE__*/ (0, $4eSry$react).createElement("input", {
81
+ className: (0, $4eSry$classNames)((0, ($parcel$interopDefault($4eSry$colorarea_vars_cssmodulejs))), "spectrum-ColorArea-slider"),
82
+ ...(0, $4eSry$mergeProps)(yInputProps, focusProps),
83
+ ref: inputYRef
84
+ }))));
85
+ }
86
+ /**
87
+ * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
88
+ */ let $40046aa1a7ccb226$export$b2103f68a961418e = /*#__PURE__*/ (0, $4eSry$react).forwardRef($40046aa1a7ccb226$var$ColorArea);
89
+
90
+
91
+ export {$40046aa1a7ccb226$export$b2103f68a961418e as ColorArea};
92
+ //# sourceMappingURL=ColorArea.mjs.map
@@ -0,0 +1,92 @@
1
+ import {ColorThumb as $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc} from "./ColorThumb.module.js";
2
+ import "./vars.6f3d3943.css";
3
+ import $4eSry$colorarea_vars_cssmodulejs from "./colorarea_vars_css.module.js";
4
+ import {dimensionValue as $4eSry$dimensionValue, useStyleProps as $4eSry$useStyleProps, useFocusableRef as $4eSry$useFocusableRef, classNames as $4eSry$classNames} from "@react-spectrum/utils";
5
+ import {mergeProps as $4eSry$mergeProps} from "@react-aria/utils";
6
+ import $4eSry$react, {useRef as $4eSry$useRef} from "react";
7
+ import {useColorArea as $4eSry$useColorArea} from "@react-aria/color";
8
+ import {useColorAreaState as $4eSry$useColorAreaState} from "@react-stately/color";
9
+ import {useFocusRing as $4eSry$useFocusRing} from "@react-aria/focus";
10
+ import {useProviderProps as $4eSry$useProviderProps} from "@react-spectrum/provider";
11
+
12
+
13
+ function $parcel$interopDefault(a) {
14
+ return a && a.__esModule ? a.default : a;
15
+ }
16
+ /*
17
+ * Copyright 2021 Adobe. All rights reserved.
18
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
19
+ * you may not use this file except in compliance with the License. You may obtain a copy
20
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
21
+ *
22
+ * Unless required by applicable law or agreed to in writing, software distributed under
23
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
24
+ * OF ANY KIND, either express or implied. See the License for the specific language
25
+ * governing permissions and limitations under the License.
26
+ */
27
+
28
+
29
+
30
+
31
+
32
+
33
+
34
+
35
+ function $40046aa1a7ccb226$var$ColorArea(props, ref) {
36
+ props = (0, $4eSry$useProviderProps)(props);
37
+ let { isDisabled: isDisabled } = props;
38
+ let size = props.size && (0, $4eSry$dimensionValue)(props.size);
39
+ let { styleProps: styleProps } = (0, $4eSry$useStyleProps)(props);
40
+ let inputXRef = (0, $4eSry$useRef)(null);
41
+ let inputYRef = (0, $4eSry$useRef)(null);
42
+ let containerRef = (0, $4eSry$useFocusableRef)(ref, inputXRef);
43
+ let state = (0, $4eSry$useColorAreaState)(props);
44
+ let { colorAreaProps: colorAreaProps, gradientProps: gradientProps, xInputProps: xInputProps, yInputProps: yInputProps, thumbProps: thumbProps } = (0, $4eSry$useColorArea)({
45
+ ...props,
46
+ inputXRef: inputXRef,
47
+ inputYRef: inputYRef,
48
+ containerRef: containerRef
49
+ }, state);
50
+ let { focusProps: focusProps, isFocusVisible: isFocusVisible } = (0, $4eSry$useFocusRing)();
51
+ return /*#__PURE__*/ (0, $4eSry$react).createElement("div", {
52
+ ...colorAreaProps,
53
+ className: (0, $4eSry$classNames)((0, ($parcel$interopDefault($4eSry$colorarea_vars_cssmodulejs))), "spectrum-ColorArea", {
54
+ "is-disabled": isDisabled
55
+ }, styleProps.className),
56
+ ref: containerRef,
57
+ style: {
58
+ ...colorAreaProps.style,
59
+ ...styleProps.style,
60
+ // Workaround around https://github.com/adobe/spectrum-css/issues/1032
61
+ width: size,
62
+ height: size
63
+ }
64
+ }, /*#__PURE__*/ (0, $4eSry$react).createElement("div", {
65
+ ...gradientProps,
66
+ className: (0, $4eSry$classNames)((0, ($parcel$interopDefault($4eSry$colorarea_vars_cssmodulejs))), "spectrum-ColorArea-gradient")
67
+ }), /*#__PURE__*/ (0, $4eSry$react).createElement((0, $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc), {
68
+ value: state.getDisplayColor(),
69
+ isFocused: isFocusVisible,
70
+ isDisabled: isDisabled,
71
+ isDragging: state.isDragging,
72
+ className: (0, $4eSry$classNames)((0, ($parcel$interopDefault($4eSry$colorarea_vars_cssmodulejs))), "spectrum-ColorArea-handle"),
73
+ ...thumbProps
74
+ }, /*#__PURE__*/ (0, $4eSry$react).createElement("div", {
75
+ role: "presentation"
76
+ }, /*#__PURE__*/ (0, $4eSry$react).createElement("input", {
77
+ className: (0, $4eSry$classNames)((0, ($parcel$interopDefault($4eSry$colorarea_vars_cssmodulejs))), "spectrum-ColorArea-slider"),
78
+ ...(0, $4eSry$mergeProps)(xInputProps, focusProps),
79
+ ref: inputXRef
80
+ }), /*#__PURE__*/ (0, $4eSry$react).createElement("input", {
81
+ className: (0, $4eSry$classNames)((0, ($parcel$interopDefault($4eSry$colorarea_vars_cssmodulejs))), "spectrum-ColorArea-slider"),
82
+ ...(0, $4eSry$mergeProps)(yInputProps, focusProps),
83
+ ref: inputYRef
84
+ }))));
85
+ }
86
+ /**
87
+ * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
88
+ */ let $40046aa1a7ccb226$export$b2103f68a961418e = /*#__PURE__*/ (0, $4eSry$react).forwardRef($40046aa1a7ccb226$var$ColorArea);
89
+
90
+
91
+ export {$40046aa1a7ccb226$export$b2103f68a961418e as ColorArea};
92
+ //# sourceMappingURL=ColorArea.module.js.map
@@ -0,0 +1 @@
1
+ {"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAcD,SAAS,gCAAU,KAA6B,EAAE,GAAiC;IACjF,QAAQ,CAAA,GAAA,uBAAe,EAAE;IAEzB,IAAI,cAAC,UAAU,EAAC,GAAG;IACnB,IAAI,OAAO,MAAM,IAAI,IAAI,CAAA,GAAA,qBAAa,EAAE,MAAM,IAAI;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IAEjC,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,eAAe,CAAA,GAAA,sBAAc,EAAE,KAAK;IAExC,IAAI,QAAQ,CAAA,GAAA,wBAAgB,EAAE;IAE9B,IAAI,kBACF,cAAc,iBACd,aAAa,eACb,WAAW,eACX,WAAW,cACX,UAAU,EACX,GAAG,CAAA,GAAA,mBAAW,EAAE;QAAC,GAAG,KAAK;mBAAE;mBAAW;sBAAW;IAAY,GAAG;IACjE,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW;IAE9C,qBACE,gCAAC;QACE,GAAG,cAAc;QAClB,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,2DAAK,GACL,sBACA;YACE,eAAe;QACjB,GACA,WAAW,SAAS;QAGxB,KAAK;QACL,OAAO;YACL,GAAG,eAAe,KAAK;YACvB,GAAG,WAAW,KAAK;YACnB,sEAAsE;YACtE,OAAO;YACP,QAAQ;QACV;qBACA,gCAAC;QAAK,GAAG,aAAa;QAAE,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,2DAAK,GAAG;sBACtD,gCAAC,CAAA,GAAA,wCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW;QACX,YAAY;QACZ,YAAY,MAAM,UAAU;QAC5B,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,2DAAK,GAAG;QAC7B,GAAG,UAAU;qBACd,gCAAC;QAAI,MAAK;qBACR,gCAAC;QAAM,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,2DAAK,GAAG;QAA+B,GAAG,CAAA,GAAA,iBAAS,EAAE,aAAa,WAAW;QAAE,KAAK;sBACjH,gCAAC;QAAM,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,2DAAK,GAAG;QAA+B,GAAG,CAAA,GAAA,iBAAS,EAAE,aAAa,WAAW;QAAE,KAAK;;AAK3H;AAEA;;CAEC,GACD,IAAI,0DAAa,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/color/src/ColorArea.tsx"],"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\nimport {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {ReactElement, useRef} from 'react';\nimport {SpectrumColorAreaProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorarea/vars.css';\nimport {useColorArea} from '@react-aria/color';\nimport {useColorAreaState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorArea(props: SpectrumColorAreaProps, 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 inputXRef = useRef(null);\n let inputYRef = useRef(null);\n let containerRef = useFocusableRef(ref, inputXRef);\n\n let state = useColorAreaState(props);\n\n let {\n colorAreaProps,\n gradientProps,\n xInputProps,\n yInputProps,\n thumbProps\n } = useColorArea({...props, inputXRef, inputYRef, containerRef}, state);\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n {...colorAreaProps}\n className={\n classNames(\n styles,\n 'spectrum-ColorArea',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )\n }\n ref={containerRef}\n style={{\n ...colorAreaProps.style,\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n width: size,\n height: size\n }}>\n <div {...gradientProps} className={classNames(styles, 'spectrum-ColorArea-gradient')} />\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isDragging}\n className={classNames(styles, 'spectrum-ColorArea-handle')}\n {...thumbProps}>\n <div role=\"presentation\">\n <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(xInputProps, focusProps)} ref={inputXRef} />\n <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(yInputProps, focusProps)} ref={inputYRef} />\n </div>\n </ColorThumb>\n </div>\n );\n}\n\n/**\n * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nlet _ColorArea = React.forwardRef(ColorArea) as (props: SpectrumColorAreaProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;\nexport {_ColorArea as ColorArea};\n"],"names":[],"version":3,"file":"ColorArea.module.js.map"}
@@ -0,0 +1,61 @@
1
+ require("./colorfield.faeff3c2.css");
2
+ var $ddec4d6aa21146c4$exports = require("./colorfield_css.main.js");
3
+ var $4ivT8$reactspectrumutils = require("@react-spectrum/utils");
4
+ var $4ivT8$react = require("react");
5
+ var $4ivT8$reactspectrumtextfield = require("@react-spectrum/textfield");
6
+ var $4ivT8$reactariacolor = require("@react-aria/color");
7
+ var $4ivT8$reactstatelycolor = require("@react-stately/color");
8
+ var $4ivT8$reactspectrumform = require("@react-spectrum/form");
9
+ var $4ivT8$reactspectrumprovider = require("@react-spectrum/provider");
10
+
11
+
12
+ function $parcel$interopDefault(a) {
13
+ return a && a.__esModule ? a.default : a;
14
+ }
15
+
16
+ function $parcel$export(e, n, v, s) {
17
+ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
18
+ }
19
+
20
+ $parcel$export(module.exports, "ColorField", () => $8bdb9bc27ff3debb$export$b865d4358897bb17);
21
+ /*
22
+ * Copyright 2020 Adobe. All rights reserved.
23
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
24
+ * you may not use this file except in compliance with the License. You may obtain a copy
25
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
26
+ *
27
+ * Unless required by applicable law or agreed to in writing, software distributed under
28
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
29
+ * OF ANY KIND, either express or implied. See the License for the specific language
30
+ * governing permissions and limitations under the License.
31
+ */
32
+
33
+
34
+
35
+
36
+
37
+
38
+
39
+ function $8bdb9bc27ff3debb$var$ColorField(props, ref) {
40
+ props = (0, $4ivT8$reactspectrumprovider.useProviderProps)(props);
41
+ props = (0, $4ivT8$reactspectrumform.useFormProps)(props);
42
+ let { value: // These disabled props are handled by the state hook
43
+ value, defaultValue: defaultValue, onChange: onChange, ...otherProps } = props;
44
+ let state = (0, $4ivT8$reactstatelycolor.useColorFieldState)(props);
45
+ let inputRef = (0, $4ivT8$react.useRef)(null);
46
+ let result = (0, $4ivT8$reactariacolor.useColorField)(otherProps, state, inputRef);
47
+ if (props.placeholder) console.warn("Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text");
48
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($4ivT8$react))).createElement((0, $4ivT8$reactspectrumtextfield.TextFieldBase), {
49
+ ...otherProps,
50
+ ref: ref,
51
+ inputRef: inputRef,
52
+ ...result,
53
+ inputClassName: (0, $4ivT8$reactspectrumutils.classNames)((0, ($parcel$interopDefault($ddec4d6aa21146c4$exports))), "react-spectrum-ColorField-input")
54
+ });
55
+ }
56
+ /**
57
+ * ColorFields allow users to enter a color in #rrggbb hexadecimal format.
58
+ */ const $8bdb9bc27ff3debb$export$b865d4358897bb17 = /*#__PURE__*/ (0, ($parcel$interopDefault($4ivT8$react))).forwardRef($8bdb9bc27ff3debb$var$ColorField);
59
+
60
+
61
+ //# sourceMappingURL=ColorField.main.js.map
@@ -0,0 +1 @@
1
+ {"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAaD,SAAS,iCAAW,KAA8B,EAAE,GAAsB;IACxE,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,qCAAW,EAAE;IACrB,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,EACR,GAAG,YACJ,GAAG;IACJ,IAAI,QAAQ,CAAA,GAAA,2CAAiB,EAAE;IAC/B,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,mCAAY,EAAE,YAAY,OAAO;IAE9C,IAAI,MAAM,WAAW,EACnB,QAAQ,IAAI,CAAC;IAGf,qBACE,0DAAC,CAAA,GAAA,2CAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;;AAEzC;AAEA;;CAEC,GACD,MAAM,0DAAc,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/color/src/ColorField.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 React, {Ref, useRef} from 'react';\nimport {SpectrumColorFieldProps} from '@react-types/color';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useColorField} from '@react-aria/color';\nimport {useColorFieldState} from '@react-stately/color';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n let {\n // These disabled props are handled by the state hook\n value, // eslint-disable-line @typescript-eslint/no-unused-vars\n defaultValue, // eslint-disable-line @typescript-eslint/no-unused-vars\n onChange, // eslint-disable-line @typescript-eslint/no-unused-vars\n ...otherProps\n } = props;\n let state = useColorFieldState(props);\n let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n let result = useColorField(otherProps, state, inputRef);\n\n if (props.placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');\n }\n\n return (\n <TextFieldBase\n {...otherProps}\n ref={ref}\n inputRef={inputRef}\n {...result}\n inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n );\n}\n\n/**\n * ColorFields allow users to enter a color in #rrggbb hexadecimal format.\n */\nconst _ColorField = React.forwardRef(ColorField);\nexport {_ColorField as ColorField};\n"],"names":[],"version":3,"file":"ColorField.main.js.map"}
@@ -0,0 +1,56 @@
1
+ import "./colorfield.faeff3c2.css";
2
+ import $b4uus$colorfield_cssmodulejs from "./colorfield_css.mjs";
3
+ import {classNames as $b4uus$classNames} from "@react-spectrum/utils";
4
+ import $b4uus$react, {useRef as $b4uus$useRef} from "react";
5
+ import {TextFieldBase as $b4uus$TextFieldBase} from "@react-spectrum/textfield";
6
+ import {useColorField as $b4uus$useColorField} from "@react-aria/color";
7
+ import {useColorFieldState as $b4uus$useColorFieldState} from "@react-stately/color";
8
+ import {useFormProps as $b4uus$useFormProps} from "@react-spectrum/form";
9
+ import {useProviderProps as $b4uus$useProviderProps} from "@react-spectrum/provider";
10
+
11
+
12
+ function $parcel$interopDefault(a) {
13
+ return a && a.__esModule ? a.default : a;
14
+ }
15
+ /*
16
+ * Copyright 2020 Adobe. All rights reserved.
17
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
18
+ * you may not use this file except in compliance with the License. You may obtain a copy
19
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
20
+ *
21
+ * Unless required by applicable law or agreed to in writing, software distributed under
22
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
23
+ * OF ANY KIND, either express or implied. See the License for the specific language
24
+ * governing permissions and limitations under the License.
25
+ */
26
+
27
+
28
+
29
+
30
+
31
+
32
+
33
+ function $0077d47e004328f0$var$ColorField(props, ref) {
34
+ props = (0, $b4uus$useProviderProps)(props);
35
+ props = (0, $b4uus$useFormProps)(props);
36
+ let { value: // These disabled props are handled by the state hook
37
+ value, defaultValue: defaultValue, onChange: onChange, ...otherProps } = props;
38
+ let state = (0, $b4uus$useColorFieldState)(props);
39
+ let inputRef = (0, $b4uus$useRef)(null);
40
+ let result = (0, $b4uus$useColorField)(otherProps, state, inputRef);
41
+ if (props.placeholder) console.warn("Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text");
42
+ return /*#__PURE__*/ (0, $b4uus$react).createElement((0, $b4uus$TextFieldBase), {
43
+ ...otherProps,
44
+ ref: ref,
45
+ inputRef: inputRef,
46
+ ...result,
47
+ inputClassName: (0, $b4uus$classNames)((0, ($parcel$interopDefault($b4uus$colorfield_cssmodulejs))), "react-spectrum-ColorField-input")
48
+ });
49
+ }
50
+ /**
51
+ * ColorFields allow users to enter a color in #rrggbb hexadecimal format.
52
+ */ const $0077d47e004328f0$export$b865d4358897bb17 = /*#__PURE__*/ (0, $b4uus$react).forwardRef($0077d47e004328f0$var$ColorField);
53
+
54
+
55
+ export {$0077d47e004328f0$export$b865d4358897bb17 as ColorField};
56
+ //# sourceMappingURL=ColorField.mjs.map
@@ -0,0 +1,56 @@
1
+ import "./colorfield.faeff3c2.css";
2
+ import $b4uus$colorfield_cssmodulejs from "./colorfield_css.module.js";
3
+ import {classNames as $b4uus$classNames} from "@react-spectrum/utils";
4
+ import $b4uus$react, {useRef as $b4uus$useRef} from "react";
5
+ import {TextFieldBase as $b4uus$TextFieldBase} from "@react-spectrum/textfield";
6
+ import {useColorField as $b4uus$useColorField} from "@react-aria/color";
7
+ import {useColorFieldState as $b4uus$useColorFieldState} from "@react-stately/color";
8
+ import {useFormProps as $b4uus$useFormProps} from "@react-spectrum/form";
9
+ import {useProviderProps as $b4uus$useProviderProps} from "@react-spectrum/provider";
10
+
11
+
12
+ function $parcel$interopDefault(a) {
13
+ return a && a.__esModule ? a.default : a;
14
+ }
15
+ /*
16
+ * Copyright 2020 Adobe. All rights reserved.
17
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
18
+ * you may not use this file except in compliance with the License. You may obtain a copy
19
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
20
+ *
21
+ * Unless required by applicable law or agreed to in writing, software distributed under
22
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
23
+ * OF ANY KIND, either express or implied. See the License for the specific language
24
+ * governing permissions and limitations under the License.
25
+ */
26
+
27
+
28
+
29
+
30
+
31
+
32
+
33
+ function $0077d47e004328f0$var$ColorField(props, ref) {
34
+ props = (0, $b4uus$useProviderProps)(props);
35
+ props = (0, $b4uus$useFormProps)(props);
36
+ let { value: // These disabled props are handled by the state hook
37
+ value, defaultValue: defaultValue, onChange: onChange, ...otherProps } = props;
38
+ let state = (0, $b4uus$useColorFieldState)(props);
39
+ let inputRef = (0, $b4uus$useRef)(null);
40
+ let result = (0, $b4uus$useColorField)(otherProps, state, inputRef);
41
+ if (props.placeholder) console.warn("Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text");
42
+ return /*#__PURE__*/ (0, $b4uus$react).createElement((0, $b4uus$TextFieldBase), {
43
+ ...otherProps,
44
+ ref: ref,
45
+ inputRef: inputRef,
46
+ ...result,
47
+ inputClassName: (0, $b4uus$classNames)((0, ($parcel$interopDefault($b4uus$colorfield_cssmodulejs))), "react-spectrum-ColorField-input")
48
+ });
49
+ }
50
+ /**
51
+ * ColorFields allow users to enter a color in #rrggbb hexadecimal format.
52
+ */ const $0077d47e004328f0$export$b865d4358897bb17 = /*#__PURE__*/ (0, $b4uus$react).forwardRef($0077d47e004328f0$var$ColorField);
53
+
54
+
55
+ export {$0077d47e004328f0$export$b865d4358897bb17 as ColorField};
56
+ //# sourceMappingURL=ColorField.module.js.map
@@ -0,0 +1 @@
1
+ {"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAaD,SAAS,iCAAW,KAA8B,EAAE,GAAsB;IACxE,QAAQ,CAAA,GAAA,uBAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,mBAAW,EAAE;IACrB,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,EACR,GAAG,YACJ,GAAG;IACJ,IAAI,QAAQ,CAAA,GAAA,yBAAiB,EAAE;IAC/B,IAAI,WAAW,CAAA,GAAA,aAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,oBAAY,EAAE,YAAY,OAAO;IAE9C,IAAI,MAAM,WAAW,EACnB,QAAQ,IAAI,CAAC;IAGf,qBACE,gCAAC,CAAA,GAAA,oBAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;;AAEzC;AAEA;;CAEC,GACD,MAAM,0DAAc,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/color/src/ColorField.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 React, {Ref, useRef} from 'react';\nimport {SpectrumColorFieldProps} from '@react-types/color';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useColorField} from '@react-aria/color';\nimport {useColorFieldState} from '@react-stately/color';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n let {\n // These disabled props are handled by the state hook\n value, // eslint-disable-line @typescript-eslint/no-unused-vars\n defaultValue, // eslint-disable-line @typescript-eslint/no-unused-vars\n onChange, // eslint-disable-line @typescript-eslint/no-unused-vars\n ...otherProps\n } = props;\n let state = useColorFieldState(props);\n let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n let result = useColorField(otherProps, state, inputRef);\n\n if (props.placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');\n }\n\n return (\n <TextFieldBase\n {...otherProps}\n ref={ref}\n inputRef={inputRef}\n {...result}\n inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n );\n}\n\n/**\n * ColorFields allow users to enter a color in #rrggbb hexadecimal format.\n */\nconst _ColorField = React.forwardRef(ColorField);\nexport {_ColorField as ColorField};\n"],"names":[],"version":3,"file":"ColorField.module.js.map"}
@@ -0,0 +1,125 @@
1
+ var $2b9adc23f6c7cae1$exports = require("./ColorThumb.main.js");
2
+ require("./vars.571f903e.css");
3
+ var $28060baf29cc5ac7$exports = require("./colorslider_vars_css.main.js");
4
+ var $5EHW1$reactspectrumutils = require("@react-spectrum/utils");
5
+ var $5EHW1$reactspectrumlabel = require("@react-spectrum/label");
6
+ var $5EHW1$react = require("react");
7
+ var $5EHW1$reactariacolor = require("@react-aria/color");
8
+ var $5EHW1$reactstatelycolor = require("@react-stately/color");
9
+ var $5EHW1$reactariainteractions = require("@react-aria/interactions");
10
+ var $5EHW1$reactariai18n = require("@react-aria/i18n");
11
+ var $5EHW1$reactspectrumprovider = require("@react-spectrum/provider");
12
+
13
+
14
+ function $parcel$interopDefault(a) {
15
+ return a && a.__esModule ? a.default : a;
16
+ }
17
+
18
+ function $parcel$export(e, n, v, s) {
19
+ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
20
+ }
21
+
22
+ $parcel$export(module.exports, "ColorSlider", () => $4537dec0de08c277$export$44fd664bcca5b6fb);
23
+ /*
24
+ * Copyright 2020 Adobe. All rights reserved.
25
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
26
+ * you may not use this file except in compliance with the License. You may obtain a copy
27
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
28
+ *
29
+ * Unless required by applicable law or agreed to in writing, software distributed under
30
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
31
+ * OF ANY KIND, either express or implied. See the License for the specific language
32
+ * governing permissions and limitations under the License.
33
+ */
34
+
35
+
36
+
37
+
38
+
39
+
40
+
41
+
42
+
43
+ function $4537dec0de08c277$var$ColorSlider(props, ref) {
44
+ props = (0, $5EHW1$reactspectrumprovider.useProviderProps)(props);
45
+ let { isDisabled: isDisabled, channel: channel, orientation: orientation, label: label, showValueLabel: showValueLabel, "aria-label": ariaLabel } = props;
46
+ let vertical = orientation === "vertical";
47
+ let { styleProps: styleProps } = (0, $5EHW1$reactspectrumutils.useStyleProps)(props);
48
+ let { locale: locale } = (0, $5EHW1$reactariai18n.useLocale)();
49
+ let inputRef = (0, $5EHW1$react.useRef)(null);
50
+ let trackRef = (0, $5EHW1$react.useRef)(null);
51
+ let domRef = (0, $5EHW1$reactspectrumutils.useFocusableRef)(ref, inputRef);
52
+ let state = (0, $5EHW1$reactstatelycolor.useColorSliderState)({
53
+ ...props,
54
+ locale: locale
55
+ });
56
+ // If vertical and a label is provided, use it as an aria-label instead.
57
+ if (vertical && label) {
58
+ ariaLabel = ariaLabel || (typeof label === "string" ? label : undefined);
59
+ label = null;
60
+ }
61
+ // If no external label, aria-label or aria-labelledby is provided,
62
+ // default to displaying the localized channel value.
63
+ // Specifically check if label is undefined. If label is `null` then display no visible label.
64
+ // A default aria-label is provided by useColorSlider in that case.
65
+ if (label === undefined && !ariaLabel && !props["aria-labelledby"] && !vertical) label = state.value.getChannelName(channel, locale);
66
+ // Show the value label by default if there is a visible label
67
+ if (showValueLabel == null) showValueLabel = !!label;
68
+ let { inputProps: inputProps, thumbProps: thumbProps, trackProps: trackProps, labelProps: labelProps, outputProps: outputProps } = (0, $5EHW1$reactariacolor.useColorSlider)({
69
+ ...props,
70
+ label: label,
71
+ "aria-label": ariaLabel,
72
+ trackRef: trackRef,
73
+ inputRef: inputRef
74
+ }, state);
75
+ let { isFocusVisible: isFocusVisible } = (0, $5EHW1$reactariainteractions.useFocusVisible)();
76
+ let [isFocused, setIsFocused] = (0, $5EHW1$react.useState)(false);
77
+ let { focusProps: focusProps } = (0, $5EHW1$reactariainteractions.useFocus)({
78
+ isDisabled: isDisabled,
79
+ onFocusChange: setIsFocused
80
+ });
81
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($5EHW1$react))).createElement("div", {
82
+ ref: domRef,
83
+ ...styleProps,
84
+ className: (0, $5EHW1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($28060baf29cc5ac7$exports))), {
85
+ "spectrum-ColorSlider-container--horizontal": !vertical,
86
+ "spectrum-ColorSlider-container--vertical": vertical
87
+ })
88
+ }, label && /*#__PURE__*/ (0, ($parcel$interopDefault($5EHW1$react))).createElement("div", {
89
+ className: (0, $5EHW1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($28060baf29cc5ac7$exports))), "spectrum-ColorSlider-labelContainer")
90
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($5EHW1$react))).createElement((0, $5EHW1$reactspectrumlabel.Label), labelProps, label), props.contextualHelp && /*#__PURE__*/ (0, ($parcel$interopDefault($5EHW1$react))).createElement((0, $5EHW1$reactspectrumutils.SlotProvider), {
91
+ slots: {
92
+ actionButton: {
93
+ UNSAFE_className: (0, $5EHW1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($28060baf29cc5ac7$exports))), "spectrum-ColorSlider-contextualHelp")
94
+ }
95
+ }
96
+ }, props.contextualHelp), showValueLabel && /*#__PURE__*/ (0, ($parcel$interopDefault($5EHW1$react))).createElement((0, $5EHW1$reactspectrumlabel.Label), {
97
+ elementType: "span",
98
+ UNSAFE_className: (0, $5EHW1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($28060baf29cc5ac7$exports))), "spectrum-ColorSlider-valueLabel")
99
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($5EHW1$react))).createElement("output", outputProps, state.value.formatChannelValue(channel, locale)))), /*#__PURE__*/ (0, ($parcel$interopDefault($5EHW1$react))).createElement("div", {
100
+ ...trackProps,
101
+ ref: trackRef,
102
+ className: (0, $5EHW1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($28060baf29cc5ac7$exports))), "spectrum-ColorSlider", {
103
+ "is-disabled": isDisabled,
104
+ "spectrum-ColorSlider--vertical": vertical
105
+ })
106
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($5EHW1$react))).createElement((0, $2b9adc23f6c7cae1$exports.ColorThumb), {
107
+ value: state.getDisplayColor(),
108
+ isFocused: isFocused && isFocusVisible,
109
+ isDisabled: isDisabled,
110
+ isDragging: state.isThumbDragging(0),
111
+ className: (0, $5EHW1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($28060baf29cc5ac7$exports))), "spectrum-ColorSlider-handle"),
112
+ ...thumbProps
113
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($5EHW1$react))).createElement("input", {
114
+ ...inputProps,
115
+ ...focusProps,
116
+ ref: inputRef,
117
+ className: (0, $5EHW1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($28060baf29cc5ac7$exports))), "spectrum-ColorSlider-slider")
118
+ }))));
119
+ }
120
+ /**
121
+ * ColorSliders allow users to adjust an individual channel of a color value.
122
+ */ let $4537dec0de08c277$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, ($parcel$interopDefault($5EHW1$react))).forwardRef($4537dec0de08c277$var$ColorSlider);
123
+
124
+
125
+ //# sourceMappingURL=ColorSlider.main.js.map