@react-spectrum/color 3.0.2 → 3.0.3
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.
- package/dist/ColorArea.main.js +2 -5
- package/dist/ColorArea.main.js.map +1 -1
- package/dist/ColorArea.mjs +2 -5
- package/dist/ColorArea.module.js +2 -5
- package/dist/ColorArea.module.js.map +1 -1
- package/dist/ColorEditor.main.js +2 -5
- package/dist/ColorEditor.main.js.map +1 -1
- package/dist/ColorEditor.mjs +2 -5
- package/dist/ColorEditor.module.js +2 -5
- package/dist/ColorEditor.module.js.map +1 -1
- package/dist/ColorField.main.js +2 -5
- package/dist/ColorField.main.js.map +1 -1
- package/dist/ColorField.mjs +2 -5
- package/dist/ColorField.module.js +2 -5
- package/dist/ColorField.module.js.map +1 -1
- package/dist/ColorPicker.main.js +2 -5
- package/dist/ColorPicker.main.js.map +1 -1
- package/dist/ColorPicker.mjs +2 -5
- package/dist/ColorPicker.module.js +2 -5
- package/dist/ColorPicker.module.js.map +1 -1
- package/dist/ColorSlider.main.js +3 -6
- package/dist/ColorSlider.main.js.map +1 -1
- package/dist/ColorSlider.mjs +3 -6
- package/dist/ColorSlider.module.js +3 -6
- package/dist/ColorSlider.module.js.map +1 -1
- package/dist/ColorSwatch.main.js +2 -5
- package/dist/ColorSwatch.main.js.map +1 -1
- package/dist/ColorSwatch.mjs +3 -6
- package/dist/ColorSwatch.module.js +3 -6
- package/dist/ColorSwatch.module.js.map +1 -1
- package/dist/ColorSwatchPicker.main.js +2 -5
- package/dist/ColorSwatchPicker.main.js.map +1 -1
- package/dist/ColorSwatchPicker.mjs +2 -5
- package/dist/ColorSwatchPicker.module.js +2 -5
- package/dist/ColorSwatchPicker.module.js.map +1 -1
- package/dist/ColorWheel.main.js +2 -5
- package/dist/ColorWheel.main.js.map +1 -1
- package/dist/ColorWheel.mjs +2 -5
- package/dist/ColorWheel.module.js +2 -5
- package/dist/ColorWheel.module.js.map +1 -1
- package/dist/types.d.ts +7 -7
- package/dist/types.d.ts.map +1 -1
- package/dist/{vars.d78ec0e6.css → vars.a54898d8.css} +2 -2
- package/dist/{vars.d78ec0e6.css.map → vars.a54898d8.css.map} +1 -1
- package/package.json +20 -20
- package/src/ColorArea.tsx +5 -8
- package/src/ColorEditor.tsx +5 -8
- package/src/ColorField.tsx +5 -8
- package/src/ColorPicker.tsx +5 -8
- package/src/ColorSlider.tsx +5 -8
- package/src/ColorSwatch.tsx +5 -8
- package/src/ColorSwatchPicker.tsx +5 -8
- package/src/ColorWheel.tsx +5 -8
package/dist/ColorArea.main.js
CHANGED
|
@@ -40,7 +40,7 @@ $parcel$export(module.exports, "ColorArea", () => $5f016e950c2dc3a6$export$b2103
|
|
|
40
40
|
|
|
41
41
|
|
|
42
42
|
|
|
43
|
-
|
|
43
|
+
const $5f016e950c2dc3a6$export$b2103f68a961418e = /*#__PURE__*/ (0, ($parcel$interopDefault($6Gwd1$react))).forwardRef(function ColorArea(props, ref) {
|
|
44
44
|
props = (0, $6Gwd1$reactspectrumprovider.useProviderProps)(props);
|
|
45
45
|
let inputXRef = (0, $6Gwd1$react.useRef)(null);
|
|
46
46
|
let inputYRef = (0, $6Gwd1$react.useRef)(null);
|
|
@@ -89,10 +89,7 @@ function $5f016e950c2dc3a6$var$ColorArea(props, ref) {
|
|
|
89
89
|
...(0, $6Gwd1$reactariautils.mergeProps)(yInputProps, focusProps),
|
|
90
90
|
ref: inputYRef
|
|
91
91
|
}))));
|
|
92
|
-
}
|
|
93
|
-
/**
|
|
94
|
-
* ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
|
|
95
|
-
*/ let $5f016e950c2dc3a6$export$b2103f68a961418e = /*#__PURE__*/ (0, ($parcel$interopDefault($6Gwd1$react))).forwardRef($5f016e950c2dc3a6$var$ColorArea);
|
|
92
|
+
});
|
|
96
93
|
|
|
97
94
|
|
|
98
95
|
//# sourceMappingURL=ColorArea.main.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAkBM,MAAM,0DAAY,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,UAAU,KAA6B,EAAE,GAAiC;IAC3H,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,eAAe,CAAA,GAAA,yCAAc,EAAE,KAAK;IACxC,CAAC,OAAO,aAAa,GAAG,CAAA,GAAA,0CAAc,EAAE,OAAO,cAAc,CAAA,GAAA,2CAAe;IAE5E,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,QAAQ,CAAA,GAAA,0CAAgB,EAAE;IAE9B,IAAI,kBACF,cAAc,eACd,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,GAAI,aAAa,CAAC,IAAI,eAAe,KAAK;YAC1C,GAAG,WAAW,KAAK;YACnB,sEAAsE;YACtE,OAAO;YACP,QAAQ;QACV;qBACA,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;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","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 {ColorAreaContext, useContextProps} from 'react-aria-components';\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\n/**\n * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nexport const ColorArea = React.forwardRef(function ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let inputXRef = useRef(null);\n let inputYRef = useRef(null);\n let containerRef = useFocusableRef(ref, inputXRef);\n [props, containerRef] = useContextProps(props, containerRef, ColorAreaContext);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n\n let state = useColorAreaState(props);\n\n let {\n colorAreaProps,\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 ...(isDisabled ? {} : colorAreaProps.style),\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n width: size,\n height: size\n }}>\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isDragging}\n containerRef={containerRef}\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}) as (props: SpectrumColorAreaProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"ColorArea.main.js.map"}
|
package/dist/ColorArea.mjs
CHANGED
|
@@ -34,7 +34,7 @@ function $parcel$interopDefault(a) {
|
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
const $40046aa1a7ccb226$export$b2103f68a961418e = /*#__PURE__*/ (0, $4eSry$react).forwardRef(function ColorArea(props, ref) {
|
|
38
38
|
props = (0, $4eSry$useProviderProps)(props);
|
|
39
39
|
let inputXRef = (0, $4eSry$useRef)(null);
|
|
40
40
|
let inputYRef = (0, $4eSry$useRef)(null);
|
|
@@ -83,10 +83,7 @@ function $40046aa1a7ccb226$var$ColorArea(props, ref) {
|
|
|
83
83
|
...(0, $4eSry$mergeProps)(yInputProps, focusProps),
|
|
84
84
|
ref: inputYRef
|
|
85
85
|
}))));
|
|
86
|
-
}
|
|
87
|
-
/**
|
|
88
|
-
* ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
|
|
89
|
-
*/ let $40046aa1a7ccb226$export$b2103f68a961418e = /*#__PURE__*/ (0, $4eSry$react).forwardRef($40046aa1a7ccb226$var$ColorArea);
|
|
86
|
+
});
|
|
90
87
|
|
|
91
88
|
|
|
92
89
|
export {$40046aa1a7ccb226$export$b2103f68a961418e as ColorArea};
|
package/dist/ColorArea.module.js
CHANGED
|
@@ -34,7 +34,7 @@ function $parcel$interopDefault(a) {
|
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
const $40046aa1a7ccb226$export$b2103f68a961418e = /*#__PURE__*/ (0, $4eSry$react).forwardRef(function ColorArea(props, ref) {
|
|
38
38
|
props = (0, $4eSry$useProviderProps)(props);
|
|
39
39
|
let inputXRef = (0, $4eSry$useRef)(null);
|
|
40
40
|
let inputYRef = (0, $4eSry$useRef)(null);
|
|
@@ -83,10 +83,7 @@ function $40046aa1a7ccb226$var$ColorArea(props, ref) {
|
|
|
83
83
|
...(0, $4eSry$mergeProps)(yInputProps, focusProps),
|
|
84
84
|
ref: inputYRef
|
|
85
85
|
}))));
|
|
86
|
-
}
|
|
87
|
-
/**
|
|
88
|
-
* ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
|
|
89
|
-
*/ let $40046aa1a7ccb226$export$b2103f68a961418e = /*#__PURE__*/ (0, $4eSry$react).forwardRef($40046aa1a7ccb226$var$ColorArea);
|
|
86
|
+
});
|
|
90
87
|
|
|
91
88
|
|
|
92
89
|
export {$40046aa1a7ccb226$export$b2103f68a961418e as ColorArea};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAkBM,MAAM,0DAAY,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,UAAU,KAA6B,EAAE,GAAiC;IAC3H,QAAQ,CAAA,GAAA,uBAAe,EAAE;IACzB,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,eAAe,CAAA,GAAA,sBAAc,EAAE,KAAK;IACxC,CAAC,OAAO,aAAa,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,cAAc,CAAA,GAAA,uBAAe;IAE5E,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;IAGjC,IAAI,QAAQ,CAAA,GAAA,wBAAgB,EAAE;IAE9B,IAAI,kBACF,cAAc,eACd,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,GAAI,aAAa,CAAC,IAAI,eAAe,KAAK;YAC1C,GAAG,WAAW,KAAK;YACnB,sEAAsE;YACtE,OAAO;YACP,QAAQ;QACV;qBACA,gCAAC,CAAA,GAAA,wCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW;QACX,YAAY;QACZ,YAAY,MAAM,UAAU;QAC5B,cAAc;QACd,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","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 {ColorAreaContext, useContextProps} from 'react-aria-components';\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\n/**\n * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nexport const ColorArea = React.forwardRef(function ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let inputXRef = useRef(null);\n let inputYRef = useRef(null);\n let containerRef = useFocusableRef(ref, inputXRef);\n [props, containerRef] = useContextProps(props, containerRef, ColorAreaContext);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n\n let state = useColorAreaState(props);\n\n let {\n colorAreaProps,\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 ...(isDisabled ? {} : colorAreaProps.style),\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n width: size,\n height: size\n }}>\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isDragging}\n containerRef={containerRef}\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}) as (props: SpectrumColorAreaProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"ColorArea.module.js.map"}
|
package/dist/ColorEditor.main.js
CHANGED
|
@@ -28,7 +28,7 @@ $parcel$export(module.exports, "ColorEditor", () => $ecaab91cad36cb44$export$5aa
|
|
|
28
28
|
|
|
29
29
|
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
const $ecaab91cad36cb44$export$5aa54fd21eb08d23 = /*#__PURE__*/ (0, ($parcel$interopDefault($2H14s$react))).forwardRef(function ColorEditor(props, ref) {
|
|
32
32
|
let [format, setFormat] = (0, $2H14s$react.useState)('hex');
|
|
33
33
|
let domRef = (0, $2H14s$reactspectrumutils.useDOMRef)(ref);
|
|
34
34
|
let formatter = (0, $2H14s$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($5cb66132bfdb0a33$exports))), '@react-spectrum/color');
|
|
@@ -107,10 +107,7 @@ function $ecaab91cad36cb44$var$ColorEditor(props, ref) {
|
|
|
107
107
|
'--spectrum-textfield-min-width': 0
|
|
108
108
|
}
|
|
109
109
|
})));
|
|
110
|
-
}
|
|
111
|
-
/**
|
|
112
|
-
* ColorEditor provides a default UI for editing colors within a ColorPicker.
|
|
113
|
-
*/ let $ecaab91cad36cb44$export$5aa54fd21eb08d23 = /*#__PURE__*/ (0, ($parcel$interopDefault($2H14s$react))).forwardRef($ecaab91cad36cb44$var$ColorEditor);
|
|
110
|
+
});
|
|
114
111
|
|
|
115
112
|
|
|
116
113
|
//# sourceMappingURL=ColorEditor.main.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,0DAAc,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,YAAY,KAA+B,EAAE,GAA2B;IAC3H,IAAI,CAAC,QAAQ,UAAU,GAAG,CAAA,GAAA,qBAAO,EAAsB;IACvD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,YAAY,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAE1D,qBACE,0DAAC;QAAI,WAAW;;;;;;;;QAA6D,KAAK;qBAChF,0DAAC;QAAI,WAAW;;;;;;;qBACd,0DAAC,CAAA,GAAA,mCAAQ;QAAE,YAAW;QAAM,UAAS;QAAa,UAAS;sBAC3D,0DAAC,CAAA,GAAA,qCAAU;QAAE,YAAW;QAAM,SAAQ;QAAM,aAAY;QACvD,CAAC,MAAM,gBAAgB,kBACtB,0DAAC,CAAA,GAAA,qCAAU;QAAE,SAAQ;QAAQ,aAAY;uBAG7C,0DAAC;QAAI,WAAW;;;;;;;qBACd,0DAAC,CAAA,GAAA,iCAAK;QACJ,cAAY,UAAU,MAAM,CAAC;QAC7B,SAAA;QACA,OAAM;QACN,WAAU;QACV,aAAa;QACb,mBAAmB,CAAA,IAAK,UAAU;qBAClC,0DAAC,CAAA,GAAA,+BAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,0DAAC,CAAA,GAAA,+BAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,0DAAC,CAAA,GAAA,+BAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,0DAAC,CAAA,GAAA,+BAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,UAEnC,WAAW,sBACR,0DAAC,CAAA,GAAA,oCAAS;QAAE,SAAA;QAAQ,OAAM;QAAY,cAAY,UAAU,MAAM,CAAC;SACnE,CAAA,GAAA,yCAAe,EAAE,QAAQ,GAAG,CAAC,CAAA,wBAC7B,0DAAC,CAAA,GAAA,oCAAS;YAAE,KAAK;YAAS,YAAY;YAAQ,SAAS;YAAS,SAAA;YAAQ,OAAM;YAAW,MAAA;YAAK,cAAc;gBAAC,kCAAkC;YAAC;aAEnJ,CAAC,MAAM,gBAAgB,kBACtB,0DAAC,CAAA,GAAA,oCAAS;QAAE,SAAQ;QAAQ,SAAA;QAAQ,OAAM;QAAW,MAAA;QAAK,cAAc;YAAC,kCAAkC;QAAC;;AAItH","sources":["packages/@react-spectrum/color/src/ColorEditor.tsx"],"sourcesContent":["import {ColorArea} from './ColorArea';\nimport {ColorField} from './ColorField';\nimport {ColorSlider} from './ColorSlider';\nimport {ColorSpace} from '@react-types/color';\nimport {DOMRef} from '@react-types/shared';\nimport {getColorChannels} from '@react-stately/color';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Item, Picker} from '@react-spectrum/picker';\nimport React, {CSSProperties, useState} from 'react';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\nexport interface SpectrumColorEditorProps {\n /** Whether to hide the alpha channel color slider and color field. */\n hideAlphaChannel?: boolean\n}\n\n/**\n * ColorEditor provides a default UI for editing colors within a ColorPicker.\n */\nexport const ColorEditor = React.forwardRef(function ColorEditor(props: SpectrumColorEditorProps, ref: DOMRef<HTMLDivElement>) {\n let [format, setFormat] = useState<ColorSpace | 'hex'>('hex');\n let domRef = useDOMRef(ref);\n let formatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/color');\n\n return (\n <div className={style({display: 'flex', flexDirection: 'column', gap: 4})()} ref={domRef}>\n <div className={style({display: 'flex', gap: 4})()}>\n <ColorArea colorSpace=\"hsb\" xChannel=\"saturation\" yChannel=\"brightness\" />\n <ColorSlider colorSpace=\"hsb\" channel=\"hue\" orientation=\"vertical\" />\n {!props.hideAlphaChannel &&\n <ColorSlider channel=\"alpha\" orientation=\"vertical\" />\n }\n </div>\n <div className={style({display: 'flex', gap: 4})()}>\n <Picker\n aria-label={formatter.format('colorFormat')}\n isQuiet\n width=\"size-700\"\n menuWidth=\"size-1000\"\n selectedKey={format}\n onSelectionChange={f => setFormat(f as typeof format)}>\n <Item key=\"hex\">{formatter.format('hex')}</Item>\n <Item key=\"rgb\">{formatter.format('rgb')}</Item>\n <Item key=\"hsl\">{formatter.format('hsl')}</Item>\n <Item key=\"hsb\">{formatter.format('hsb')}</Item>\n </Picker>\n {format === 'hex'\n ? <ColorField isQuiet width=\"size-1000\" aria-label={formatter.format('hex')} />\n : getColorChannels(format).map(channel => (\n <ColorField key={channel} colorSpace={format} channel={channel} isQuiet width=\"size-400\" flex UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties} />\n ))}\n {!props.hideAlphaChannel &&\n <ColorField channel=\"alpha\" isQuiet width=\"size-400\" flex UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties} />}\n </div>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"ColorEditor.main.js.map"}
|
package/dist/ColorEditor.mjs
CHANGED
|
@@ -22,7 +22,7 @@ function $parcel$interopDefault(a) {
|
|
|
22
22
|
|
|
23
23
|
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
const $49352c629f2d8349$export$5aa54fd21eb08d23 = /*#__PURE__*/ (0, $3Vio4$react).forwardRef(function ColorEditor(props, ref) {
|
|
26
26
|
let [format, setFormat] = (0, $3Vio4$useState)('hex');
|
|
27
27
|
let domRef = (0, $3Vio4$useDOMRef)(ref);
|
|
28
28
|
let formatter = (0, $3Vio4$useLocalizedStringFormatter)((0, ($parcel$interopDefault($3Vio4$intlStringsmodulejs))), '@react-spectrum/color');
|
|
@@ -101,10 +101,7 @@ function $49352c629f2d8349$var$ColorEditor(props, ref) {
|
|
|
101
101
|
'--spectrum-textfield-min-width': 0
|
|
102
102
|
}
|
|
103
103
|
})));
|
|
104
|
-
}
|
|
105
|
-
/**
|
|
106
|
-
* ColorEditor provides a default UI for editing colors within a ColorPicker.
|
|
107
|
-
*/ let $49352c629f2d8349$export$5aa54fd21eb08d23 = /*#__PURE__*/ (0, $3Vio4$react).forwardRef($49352c629f2d8349$var$ColorEditor);
|
|
104
|
+
});
|
|
108
105
|
|
|
109
106
|
|
|
110
107
|
export {$49352c629f2d8349$export$5aa54fd21eb08d23 as ColorEditor};
|
|
@@ -22,7 +22,7 @@ function $parcel$interopDefault(a) {
|
|
|
22
22
|
|
|
23
23
|
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
const $49352c629f2d8349$export$5aa54fd21eb08d23 = /*#__PURE__*/ (0, $3Vio4$react).forwardRef(function ColorEditor(props, ref) {
|
|
26
26
|
let [format, setFormat] = (0, $3Vio4$useState)('hex');
|
|
27
27
|
let domRef = (0, $3Vio4$useDOMRef)(ref);
|
|
28
28
|
let formatter = (0, $3Vio4$useLocalizedStringFormatter)((0, ($parcel$interopDefault($3Vio4$intlStringsmodulejs))), '@react-spectrum/color');
|
|
@@ -101,10 +101,7 @@ function $49352c629f2d8349$var$ColorEditor(props, ref) {
|
|
|
101
101
|
'--spectrum-textfield-min-width': 0
|
|
102
102
|
}
|
|
103
103
|
})));
|
|
104
|
-
}
|
|
105
|
-
/**
|
|
106
|
-
* ColorEditor provides a default UI for editing colors within a ColorPicker.
|
|
107
|
-
*/ let $49352c629f2d8349$export$5aa54fd21eb08d23 = /*#__PURE__*/ (0, $3Vio4$react).forwardRef($49352c629f2d8349$var$ColorEditor);
|
|
104
|
+
});
|
|
108
105
|
|
|
109
106
|
|
|
110
107
|
export {$49352c629f2d8349$export$5aa54fd21eb08d23 as ColorEditor};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,0DAAc,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,YAAY,KAA+B,EAAE,GAA2B;IAC3H,IAAI,CAAC,QAAQ,UAAU,GAAG,CAAA,GAAA,eAAO,EAAsB;IACvD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,YAAY,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAE1D,qBACE,gCAAC;QAAI,WAAW;;;;;;;;QAA6D,KAAK;qBAChF,gCAAC;QAAI,WAAW;;;;;;;qBACd,gCAAC,CAAA,GAAA,yCAAQ;QAAE,YAAW;QAAM,UAAS;QAAa,UAAS;sBAC3D,gCAAC,CAAA,GAAA,yCAAU;QAAE,YAAW;QAAM,SAAQ;QAAM,aAAY;QACvD,CAAC,MAAM,gBAAgB,kBACtB,gCAAC,CAAA,GAAA,yCAAU;QAAE,SAAQ;QAAQ,aAAY;uBAG7C,gCAAC;QAAI,WAAW;;;;;;;qBACd,gCAAC,CAAA,GAAA,aAAK;QACJ,cAAY,UAAU,MAAM,CAAC;QAC7B,SAAA;QACA,OAAM;QACN,WAAU;QACV,aAAa;QACb,mBAAmB,CAAA,IAAK,UAAU;qBAClC,gCAAC,CAAA,GAAA,WAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,gCAAC,CAAA,GAAA,WAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,gCAAC,CAAA,GAAA,WAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,gCAAC,CAAA,GAAA,WAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,UAEnC,WAAW,sBACR,gCAAC,CAAA,GAAA,yCAAS;QAAE,SAAA;QAAQ,OAAM;QAAY,cAAY,UAAU,MAAM,CAAC;SACnE,CAAA,GAAA,uBAAe,EAAE,QAAQ,GAAG,CAAC,CAAA,wBAC7B,gCAAC,CAAA,GAAA,yCAAS;YAAE,KAAK;YAAS,YAAY;YAAQ,SAAS;YAAS,SAAA;YAAQ,OAAM;YAAW,MAAA;YAAK,cAAc;gBAAC,kCAAkC;YAAC;aAEnJ,CAAC,MAAM,gBAAgB,kBACtB,gCAAC,CAAA,GAAA,yCAAS;QAAE,SAAQ;QAAQ,SAAA;QAAQ,OAAM;QAAW,MAAA;QAAK,cAAc;YAAC,kCAAkC;QAAC;;AAItH","sources":["packages/@react-spectrum/color/src/ColorEditor.tsx"],"sourcesContent":["import {ColorArea} from './ColorArea';\nimport {ColorField} from './ColorField';\nimport {ColorSlider} from './ColorSlider';\nimport {ColorSpace} from '@react-types/color';\nimport {DOMRef} from '@react-types/shared';\nimport {getColorChannels} from '@react-stately/color';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Item, Picker} from '@react-spectrum/picker';\nimport React, {CSSProperties, useState} from 'react';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\nexport interface SpectrumColorEditorProps {\n /** Whether to hide the alpha channel color slider and color field. */\n hideAlphaChannel?: boolean\n}\n\n/**\n * ColorEditor provides a default UI for editing colors within a ColorPicker.\n */\nexport const ColorEditor = React.forwardRef(function ColorEditor(props: SpectrumColorEditorProps, ref: DOMRef<HTMLDivElement>) {\n let [format, setFormat] = useState<ColorSpace | 'hex'>('hex');\n let domRef = useDOMRef(ref);\n let formatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/color');\n\n return (\n <div className={style({display: 'flex', flexDirection: 'column', gap: 4})()} ref={domRef}>\n <div className={style({display: 'flex', gap: 4})()}>\n <ColorArea colorSpace=\"hsb\" xChannel=\"saturation\" yChannel=\"brightness\" />\n <ColorSlider colorSpace=\"hsb\" channel=\"hue\" orientation=\"vertical\" />\n {!props.hideAlphaChannel &&\n <ColorSlider channel=\"alpha\" orientation=\"vertical\" />\n }\n </div>\n <div className={style({display: 'flex', gap: 4})()}>\n <Picker\n aria-label={formatter.format('colorFormat')}\n isQuiet\n width=\"size-700\"\n menuWidth=\"size-1000\"\n selectedKey={format}\n onSelectionChange={f => setFormat(f as typeof format)}>\n <Item key=\"hex\">{formatter.format('hex')}</Item>\n <Item key=\"rgb\">{formatter.format('rgb')}</Item>\n <Item key=\"hsl\">{formatter.format('hsl')}</Item>\n <Item key=\"hsb\">{formatter.format('hsb')}</Item>\n </Picker>\n {format === 'hex'\n ? <ColorField isQuiet width=\"size-1000\" aria-label={formatter.format('hex')} />\n : getColorChannels(format).map(channel => (\n <ColorField key={channel} colorSpace={format} channel={channel} isQuiet width=\"size-400\" flex UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties} />\n ))}\n {!props.hideAlphaChannel &&\n <ColorField channel=\"alpha\" isQuiet width=\"size-400\" flex UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties} />}\n </div>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"ColorEditor.module.js.map"}
|
package/dist/ColorField.main.js
CHANGED
|
@@ -40,7 +40,7 @@ $parcel$export(module.exports, "ColorField", () => $8bdb9bc27ff3debb$export$b865
|
|
|
40
40
|
|
|
41
41
|
|
|
42
42
|
|
|
43
|
-
|
|
43
|
+
const $8bdb9bc27ff3debb$export$b865d4358897bb17 = /*#__PURE__*/ (0, ($parcel$interopDefault($4ivT8$react))).forwardRef(function ColorField(props, ref) {
|
|
44
44
|
props = (0, $4ivT8$reactspectrumprovider.useProviderProps)(props);
|
|
45
45
|
props = (0, $4ivT8$reactspectrumform.useFormProps)(props);
|
|
46
46
|
[props] = (0, $4ivT8$reactariacomponents.useContextProps)(props, null, (0, $4ivT8$reactariacomponents.ColorFieldContext));
|
|
@@ -54,10 +54,7 @@ function $8bdb9bc27ff3debb$var$ColorField(props, ref) {
|
|
|
54
54
|
...props,
|
|
55
55
|
forwardedRef: ref
|
|
56
56
|
});
|
|
57
|
-
}
|
|
58
|
-
/**
|
|
59
|
-
* A color field allows users to edit a hex color or individual color channel value.
|
|
60
|
-
*/ const $8bdb9bc27ff3debb$export$b865d4358897bb17 = /*#__PURE__*/ (0, ($parcel$interopDefault($4ivT8$react))).forwardRef($8bdb9bc27ff3debb$var$ColorField);
|
|
57
|
+
});
|
|
61
58
|
function $8bdb9bc27ff3debb$var$ColorChannelField(props) {
|
|
62
59
|
let { value: // These disabled props are handled by the state hook
|
|
63
60
|
value, defaultValue: defaultValue, onChange: onChange, validate: validate, forwardedRef: forwardedRef, ...otherProps } = props;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAkBM,MAAM,0DAAa,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,WAAW,KAA8B,EAAE,GAAsB;IACnH,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,qCAAW,EAAE;IACrB,CAAC,MAAM,GAAG,CAAA,GAAA,0CAAc,EAAE,OAAO,MAAM,CAAA,GAAA,4CAAgB;IACvD,IAAI,MAAM,WAAW,EACnB,QAAQ,IAAI,CAAC;IAGf,IAAI,MAAM,OAAO,EACf,qBAAO,0DAAC;QAAmB,GAAG,KAAK;QAAE,SAAS,MAAM,OAAO;QAAE,cAAc;;SAE3E,qBAAO,0DAAC;QAAe,GAAG,KAAK;QAAE,cAAc;;AAEnD;AAOA,SAAS,wCAAkB,KAA6B;IACtD,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,YACR,QAAQ,gBACR,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,8BAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,kDAAwB,EAAE;QACpC,GAAG,KAAK;gBACR;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,0CAAmB,EAAE,YAAY,OAAO;IAErD,qBACE,oIACE,0DAAC,CAAA,GAAA,2CAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QACpC,MAAM,IAAI,kBAAI,0DAAC;QAAM,MAAK;QAAS,MAAM,MAAM,IAAI;QAAE,OAAO,MAAM,MAAM,WAAW,IAAI,KAAK,MAAM,WAAW;;AAGpH;AAMA,SAAS,oCAAc,KAAyB;IAC9C,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,gBACR,YAAY,EACZ,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,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","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 {ColorChannel, SpectrumColorFieldProps} from '@react-types/color';\nimport {ColorFieldContext, useContextProps} from 'react-aria-components';\nimport React, {Ref, useRef} from 'react';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useColorChannelField, useColorField} from '@react-aria/color';\nimport {useColorChannelFieldState, useColorFieldState} from '@react-stately/color';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = React.forwardRef(function ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n [props] = useContextProps(props, null, ColorFieldContext);\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 if (props.channel) {\n return <ColorChannelField {...props} channel={props.channel} forwardedRef={ref} />;\n } else {\n return <HexColorField {...props} forwardedRef={ref} />;\n }\n});\n\ninterface ColorChannelFieldProps extends Omit<SpectrumColorFieldProps, 'channel'> {\n channel: ColorChannel,\n forwardedRef: Ref<TextFieldRef>\n}\n\nfunction ColorChannelField(props: ColorChannelFieldProps) {\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 validate, // eslint-disable-line @typescript-eslint/no-unused-vars\n forwardedRef,\n ...otherProps\n } = props;\n let {locale} = useLocale();\n let state = useColorChannelFieldState({\n ...props,\n locale\n });\n\n let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n let result = useColorChannelField(otherProps, state, inputRef);\n\n return (\n <>\n <TextFieldBase\n {...otherProps}\n ref={forwardedRef}\n inputRef={inputRef}\n {...result}\n inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n {props.name && <input type=\"hidden\" name={props.name} value={isNaN(state.numberValue) ? '' : state.numberValue} />}\n </>\n );\n}\n\ninterface HexColorFieldProps extends SpectrumColorFieldProps {\n forwardedRef: Ref<TextFieldRef>\n}\n\nfunction HexColorField(props: HexColorFieldProps) {\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 forwardedRef,\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 return (\n <TextFieldBase\n {...otherProps}\n ref={forwardedRef}\n inputRef={inputRef}\n {...result}\n inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n );\n}\n"],"names":[],"version":3,"file":"ColorField.main.js.map"}
|
package/dist/ColorField.mjs
CHANGED
|
@@ -34,7 +34,7 @@ function $parcel$interopDefault(a) {
|
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
const $0077d47e004328f0$export$b865d4358897bb17 = /*#__PURE__*/ (0, $b4uus$react).forwardRef(function ColorField(props, ref) {
|
|
38
38
|
props = (0, $b4uus$useProviderProps)(props);
|
|
39
39
|
props = (0, $b4uus$useFormProps)(props);
|
|
40
40
|
[props] = (0, $b4uus$useContextProps)(props, null, (0, $b4uus$ColorFieldContext));
|
|
@@ -48,10 +48,7 @@ function $0077d47e004328f0$var$ColorField(props, ref) {
|
|
|
48
48
|
...props,
|
|
49
49
|
forwardedRef: ref
|
|
50
50
|
});
|
|
51
|
-
}
|
|
52
|
-
/**
|
|
53
|
-
* A color field allows users to edit a hex color or individual color channel value.
|
|
54
|
-
*/ const $0077d47e004328f0$export$b865d4358897bb17 = /*#__PURE__*/ (0, $b4uus$react).forwardRef($0077d47e004328f0$var$ColorField);
|
|
51
|
+
});
|
|
55
52
|
function $0077d47e004328f0$var$ColorChannelField(props) {
|
|
56
53
|
let { value: // These disabled props are handled by the state hook
|
|
57
54
|
value, defaultValue: defaultValue, onChange: onChange, validate: validate, forwardedRef: forwardedRef, ...otherProps } = props;
|
|
@@ -34,7 +34,7 @@ function $parcel$interopDefault(a) {
|
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
const $0077d47e004328f0$export$b865d4358897bb17 = /*#__PURE__*/ (0, $b4uus$react).forwardRef(function ColorField(props, ref) {
|
|
38
38
|
props = (0, $b4uus$useProviderProps)(props);
|
|
39
39
|
props = (0, $b4uus$useFormProps)(props);
|
|
40
40
|
[props] = (0, $b4uus$useContextProps)(props, null, (0, $b4uus$ColorFieldContext));
|
|
@@ -48,10 +48,7 @@ function $0077d47e004328f0$var$ColorField(props, ref) {
|
|
|
48
48
|
...props,
|
|
49
49
|
forwardedRef: ref
|
|
50
50
|
});
|
|
51
|
-
}
|
|
52
|
-
/**
|
|
53
|
-
* A color field allows users to edit a hex color or individual color channel value.
|
|
54
|
-
*/ const $0077d47e004328f0$export$b865d4358897bb17 = /*#__PURE__*/ (0, $b4uus$react).forwardRef($0077d47e004328f0$var$ColorField);
|
|
51
|
+
});
|
|
55
52
|
function $0077d47e004328f0$var$ColorChannelField(props) {
|
|
56
53
|
let { value: // These disabled props are handled by the state hook
|
|
57
54
|
value, defaultValue: defaultValue, onChange: onChange, validate: validate, forwardedRef: forwardedRef, ...otherProps } = props;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAkBM,MAAM,0DAAa,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,WAAW,KAA8B,EAAE,GAAsB;IACnH,QAAQ,CAAA,GAAA,uBAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,mBAAW,EAAE;IACrB,CAAC,MAAM,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,MAAM,CAAA,GAAA,wBAAgB;IACvD,IAAI,MAAM,WAAW,EACnB,QAAQ,IAAI,CAAC;IAGf,IAAI,MAAM,OAAO,EACf,qBAAO,gCAAC;QAAmB,GAAG,KAAK;QAAE,SAAS,MAAM,OAAO;QAAE,cAAc;;SAE3E,qBAAO,gCAAC;QAAe,GAAG,KAAK;QAAE,cAAc;;AAEnD;AAOA,SAAS,wCAAkB,KAA6B;IACtD,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,YACR,QAAQ,gBACR,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,gCAAwB,EAAE;QACpC,GAAG,KAAK;gBACR;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,aAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,2BAAmB,EAAE,YAAY,OAAO;IAErD,qBACE,gFACE,gCAAC,CAAA,GAAA,oBAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;QACpC,MAAM,IAAI,kBAAI,gCAAC;QAAM,MAAK;QAAS,MAAM,MAAM,IAAI;QAAE,OAAO,MAAM,MAAM,WAAW,IAAI,KAAK,MAAM,WAAW;;AAGpH;AAMA,SAAS,oCAAc,KAAyB;IAC9C,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,gBACR,YAAY,EACZ,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,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","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 {ColorChannel, SpectrumColorFieldProps} from '@react-types/color';\nimport {ColorFieldContext, useContextProps} from 'react-aria-components';\nimport React, {Ref, useRef} from 'react';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useColorChannelField, useColorField} from '@react-aria/color';\nimport {useColorChannelFieldState, useColorFieldState} from '@react-stately/color';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = React.forwardRef(function ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n [props] = useContextProps(props, null, ColorFieldContext);\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 if (props.channel) {\n return <ColorChannelField {...props} channel={props.channel} forwardedRef={ref} />;\n } else {\n return <HexColorField {...props} forwardedRef={ref} />;\n }\n});\n\ninterface ColorChannelFieldProps extends Omit<SpectrumColorFieldProps, 'channel'> {\n channel: ColorChannel,\n forwardedRef: Ref<TextFieldRef>\n}\n\nfunction ColorChannelField(props: ColorChannelFieldProps) {\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 validate, // eslint-disable-line @typescript-eslint/no-unused-vars\n forwardedRef,\n ...otherProps\n } = props;\n let {locale} = useLocale();\n let state = useColorChannelFieldState({\n ...props,\n locale\n });\n\n let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n let result = useColorChannelField(otherProps, state, inputRef);\n\n return (\n <>\n <TextFieldBase\n {...otherProps}\n ref={forwardedRef}\n inputRef={inputRef}\n {...result}\n inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n {props.name && <input type=\"hidden\" name={props.name} value={isNaN(state.numberValue) ? '' : state.numberValue} />}\n </>\n );\n}\n\ninterface HexColorFieldProps extends SpectrumColorFieldProps {\n forwardedRef: Ref<TextFieldRef>\n}\n\nfunction HexColorField(props: HexColorFieldProps) {\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 forwardedRef,\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 return (\n <TextFieldBase\n {...otherProps}\n ref={forwardedRef}\n inputRef={inputRef}\n {...result}\n inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n );\n}\n"],"names":[],"version":3,"file":"ColorField.module.js.map"}
|
package/dist/ColorPicker.main.js
CHANGED
|
@@ -34,7 +34,7 @@ $parcel$export(module.exports, "ColorPicker", () => $0c330b4a4fe337a6$export$9fe
|
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
const $0c330b4a4fe337a6$export$9feb1bc2e5f1ccb3 = /*#__PURE__*/ (0, ($parcel$interopDefault($64NP6$react))).forwardRef(function ColorPicker(props, ref) {
|
|
38
38
|
let swatchRef = (0, $64NP6$react.useRef)(null);
|
|
39
39
|
let domRef = (0, $64NP6$reactspectrumutils.useFocusableRef)(ref);
|
|
40
40
|
let labelId = (0, $64NP6$reactariautils.useId)();
|
|
@@ -117,10 +117,7 @@ function $0c330b4a4fe337a6$var$ColorPicker(props, ref) {
|
|
|
117
117
|
padding: 'var(--spectrum-global-dimension-size-200)'
|
|
118
118
|
}
|
|
119
119
|
}, props.children))));
|
|
120
|
-
}
|
|
121
|
-
/**
|
|
122
|
-
* A ColorPicker combines a swatch with a customizable popover for editing a color.
|
|
123
|
-
*/ let $0c330b4a4fe337a6$export$9feb1bc2e5f1ccb3 = /*#__PURE__*/ (0, ($parcel$interopDefault($64NP6$react))).forwardRef($0c330b4a4fe337a6$var$ColorPicker);
|
|
120
|
+
});
|
|
124
121
|
|
|
125
122
|
|
|
126
123
|
//# sourceMappingURL=ColorPicker.main.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAgCM,MAAM,0DAAc,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,YAAY,KAA+B,EAAE,GAAoC;IACpI,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,UAAU,CAAA,GAAA,2BAAI;IAClB,qBACE,0DAAC,CAAA,GAAA,sCAAc,GAAM,qBACnB,0DAAC,CAAA,GAAA,wCAAY;QAAE,MAAK;QAAU,YAAW;QAAO,WAAW,CAAA,GAAA,sCAAW,EAAE;qBACtE,0DAAC,CAAA,GAAA,iCAAK;QACJ,KAAK;QACL,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;UAkBR;YAAC,MAAM,MAAM,IAAI,IAAI;QAAG;OAC1B,CAAC,kBAAC,cAAc,EAAC,iBAChB,oIACE,0DAAC;YACC,WAAW;;;;;;;;;;;;;cASR;gCAAC;YAAc;yBAClB,0DAAC,CAAA,GAAA,qCAAU;YACT,KAAK;YACL,OAAO,MAAM,KAAK;YAClB,MAAM,MAAM,IAAI;YAChB,UAAU,MAAM,QAAQ;YACxB,cAAY,KAAK,CAAC,aAAa;YAC/B,mBAAiB,KAAK,CAAC,kBAAkB;YACzC,oBAAkB,KAAK,CAAC,mBAAmB;YAC3C,gBAAc,KAAK,CAAC,eAAe;aAEtC,MAAM,KAAK,kBACV,0DAAC;YAAK,IAAI;WAAU,MAAM,KAAK,mBAKvC,0DAAC,CAAA,GAAA,iCAAK;QACJ,mBAAiB,MAAM,KAAK,GAAG,UAAU,KAAK,CAAC,kBAAkB;QACjE,cAAY,KAAK,CAAC,aAAa;QAC/B,cAAc;YACZ,OAAO;YACP,UAAU;YACV,QAAQ,SAAS,sBAAsB;QACzC;qBACA,0DAAC,CAAA,GAAA,gCAAM;QACL,cAAc;YACZ,UAAU;YACV,QAAQ;YACR,SAAS;QACX;OACC,MAAM,QAAQ;AAM3B","sources":["packages/@react-spectrum/color/src/ColorPicker.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 {ColorPicker as AriaColorPicker, Button, Color} from 'react-aria-components';\nimport {AriaLabelingProps, FocusableRef, ValueBase} from '@react-types/shared';\nimport {ColorSwatch} from './ColorSwatch';\nimport {Content} from '@react-spectrum/view';\nimport {Dialog, DialogTrigger} from '@react-spectrum/dialog';\nimport React, {ReactNode, useRef} from 'react';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {unwrapDOMRef, useFocusableRef} from '@react-spectrum/utils';\nimport {useId} from '@react-aria/utils';\n\nexport interface SpectrumColorPickerProps extends ValueBase<string | Color, Color>, AriaLabelingProps {\n /** A visual label for the color picker. */\n label?: ReactNode,\n /** The contents of the color picker popover, e.g. `<ColorEditor />`. */\n children?: ReactNode,\n /**\n * The size of the color swatch.\n * @default \"M\"\n */\n size?: 'XS' | 'S' | 'M' | 'L',\n /**\n * The corner rounding of the color swatch.\n * @default \"default\"\n */\n rounding?: 'default' | 'none' | 'full'\n}\n\n/**\n * A ColorPicker combines a swatch with a customizable popover for editing a color.\n */\nexport const ColorPicker = React.forwardRef(function ColorPicker(props: SpectrumColorPickerProps, ref: FocusableRef<HTMLButtonElement>) {\n let swatchRef = useRef(null);\n let domRef = useFocusableRef(ref);\n let labelId = useId();\n return (\n <AriaColorPicker {...props}>\n <DialogTrigger type=\"popover\" mobileType=\"tray\" targetRef={unwrapDOMRef(swatchRef)}>\n <Button \n ref={domRef}\n className={style({\n backgroundColor: 'transparent',\n borderStyle: 'none',\n padding: 0,\n display: 'flex',\n alignItems: 'center',\n gap: 'text-to-control',\n outlineStyle: 'none',\n fontFamily: 'sans',\n color: 'body',\n fontSize: {\n size: {\n XS: 'xs',\n S: 'sm',\n M: 'base',\n L: 'lg'\n }\n }\n })({size: props.size || 'M'})}>\n {({isFocusVisible}) => (\n <>\n <div\n className={style({\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid'\n },\n outlineColor: 'focus-ring',\n outlineWidth: 2,\n outlineOffset: 2,\n borderRadius: 'default'\n })({isFocusVisible})}>\n <ColorSwatch\n ref={swatchRef}\n color={props.value}\n size={props.size}\n rounding={props.rounding}\n aria-label={props['aria-label']}\n aria-labelledby={props['aria-labelledby']}\n aria-describedby={props['aria-describedby']}\n aria-details={props['aria-details']} />\n </div>\n {props.label && \n <span id={labelId}>{props.label}</span>\n }\n </>\n )}\n </Button>\n <Dialog \n aria-labelledby={props.label ? labelId : props['aria-labelledby']}\n aria-label={props['aria-label']}\n UNSAFE_style={{\n width: 'fit-content',\n minWidth: 0,\n margin: '0 auto' // Center within tray.\n }}>\n <Content \n UNSAFE_style={{\n position: 'relative',\n margin: 'calc(var(--spectrum-dialog-padding) * -1)',\n padding: 'var(--spectrum-global-dimension-size-200)'\n }}>\n {props.children}\n </Content>\n </Dialog>\n </DialogTrigger>\n </AriaColorPicker>\n );\n});\n"],"names":[],"version":3,"file":"ColorPicker.main.js.map"}
|
package/dist/ColorPicker.mjs
CHANGED
|
@@ -24,7 +24,7 @@ import {useId as $5bRyn$useId} from "@react-aria/utils";
|
|
|
24
24
|
|
|
25
25
|
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
const $d9654c66f3a7e70a$export$9feb1bc2e5f1ccb3 = /*#__PURE__*/ (0, $5bRyn$react).forwardRef(function ColorPicker(props, ref) {
|
|
28
28
|
let swatchRef = (0, $5bRyn$useRef)(null);
|
|
29
29
|
let domRef = (0, $5bRyn$useFocusableRef)(ref);
|
|
30
30
|
let labelId = (0, $5bRyn$useId)();
|
|
@@ -107,10 +107,7 @@ function $d9654c66f3a7e70a$var$ColorPicker(props, ref) {
|
|
|
107
107
|
padding: 'var(--spectrum-global-dimension-size-200)'
|
|
108
108
|
}
|
|
109
109
|
}, props.children))));
|
|
110
|
-
}
|
|
111
|
-
/**
|
|
112
|
-
* A ColorPicker combines a swatch with a customizable popover for editing a color.
|
|
113
|
-
*/ let $d9654c66f3a7e70a$export$9feb1bc2e5f1ccb3 = /*#__PURE__*/ (0, $5bRyn$react).forwardRef($d9654c66f3a7e70a$var$ColorPicker);
|
|
110
|
+
});
|
|
114
111
|
|
|
115
112
|
|
|
116
113
|
export {$d9654c66f3a7e70a$export$9feb1bc2e5f1ccb3 as ColorPicker};
|
|
@@ -24,7 +24,7 @@ import {useId as $5bRyn$useId} from "@react-aria/utils";
|
|
|
24
24
|
|
|
25
25
|
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
const $d9654c66f3a7e70a$export$9feb1bc2e5f1ccb3 = /*#__PURE__*/ (0, $5bRyn$react).forwardRef(function ColorPicker(props, ref) {
|
|
28
28
|
let swatchRef = (0, $5bRyn$useRef)(null);
|
|
29
29
|
let domRef = (0, $5bRyn$useFocusableRef)(ref);
|
|
30
30
|
let labelId = (0, $5bRyn$useId)();
|
|
@@ -107,10 +107,7 @@ function $d9654c66f3a7e70a$var$ColorPicker(props, ref) {
|
|
|
107
107
|
padding: 'var(--spectrum-global-dimension-size-200)'
|
|
108
108
|
}
|
|
109
109
|
}, props.children))));
|
|
110
|
-
}
|
|
111
|
-
/**
|
|
112
|
-
* A ColorPicker combines a swatch with a customizable popover for editing a color.
|
|
113
|
-
*/ let $d9654c66f3a7e70a$export$9feb1bc2e5f1ccb3 = /*#__PURE__*/ (0, $5bRyn$react).forwardRef($d9654c66f3a7e70a$var$ColorPicker);
|
|
110
|
+
});
|
|
114
111
|
|
|
115
112
|
|
|
116
113
|
export {$d9654c66f3a7e70a$export$9feb1bc2e5f1ccb3 as ColorPicker};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAgCM,MAAM,0DAAc,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,YAAY,KAA+B,EAAE,GAAoC;IACpI,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE;IAC7B,IAAI,UAAU,CAAA,GAAA,YAAI;IAClB,qBACE,gCAAC,CAAA,GAAA,kBAAc,GAAM,qBACnB,gCAAC,CAAA,GAAA,oBAAY;QAAE,MAAK;QAAU,YAAW;QAAO,WAAW,CAAA,GAAA,mBAAW,EAAE;qBACtE,gCAAC,CAAA,GAAA,aAAK;QACJ,KAAK;QACL,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;UAkBR;YAAC,MAAM,MAAM,IAAI,IAAI;QAAG;OAC1B,CAAC,kBAAC,cAAc,EAAC,iBAChB,gFACE,gCAAC;YACC,WAAW;;;;;;;;;;;;;cASR;gCAAC;YAAc;yBAClB,gCAAC,CAAA,GAAA,yCAAU;YACT,KAAK;YACL,OAAO,MAAM,KAAK;YAClB,MAAM,MAAM,IAAI;YAChB,UAAU,MAAM,QAAQ;YACxB,cAAY,KAAK,CAAC,aAAa;YAC/B,mBAAiB,KAAK,CAAC,kBAAkB;YACzC,oBAAkB,KAAK,CAAC,mBAAmB;YAC3C,gBAAc,KAAK,CAAC,eAAe;aAEtC,MAAM,KAAK,kBACV,gCAAC;YAAK,IAAI;WAAU,MAAM,KAAK,mBAKvC,gCAAC,CAAA,GAAA,aAAK;QACJ,mBAAiB,MAAM,KAAK,GAAG,UAAU,KAAK,CAAC,kBAAkB;QACjE,cAAY,KAAK,CAAC,aAAa;QAC/B,cAAc;YACZ,OAAO;YACP,UAAU;YACV,QAAQ,SAAS,sBAAsB;QACzC;qBACA,gCAAC,CAAA,GAAA,cAAM;QACL,cAAc;YACZ,UAAU;YACV,QAAQ;YACR,SAAS;QACX;OACC,MAAM,QAAQ;AAM3B","sources":["packages/@react-spectrum/color/src/ColorPicker.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 {ColorPicker as AriaColorPicker, Button, Color} from 'react-aria-components';\nimport {AriaLabelingProps, FocusableRef, ValueBase} from '@react-types/shared';\nimport {ColorSwatch} from './ColorSwatch';\nimport {Content} from '@react-spectrum/view';\nimport {Dialog, DialogTrigger} from '@react-spectrum/dialog';\nimport React, {ReactNode, useRef} from 'react';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {unwrapDOMRef, useFocusableRef} from '@react-spectrum/utils';\nimport {useId} from '@react-aria/utils';\n\nexport interface SpectrumColorPickerProps extends ValueBase<string | Color, Color>, AriaLabelingProps {\n /** A visual label for the color picker. */\n label?: ReactNode,\n /** The contents of the color picker popover, e.g. `<ColorEditor />`. */\n children?: ReactNode,\n /**\n * The size of the color swatch.\n * @default \"M\"\n */\n size?: 'XS' | 'S' | 'M' | 'L',\n /**\n * The corner rounding of the color swatch.\n * @default \"default\"\n */\n rounding?: 'default' | 'none' | 'full'\n}\n\n/**\n * A ColorPicker combines a swatch with a customizable popover for editing a color.\n */\nexport const ColorPicker = React.forwardRef(function ColorPicker(props: SpectrumColorPickerProps, ref: FocusableRef<HTMLButtonElement>) {\n let swatchRef = useRef(null);\n let domRef = useFocusableRef(ref);\n let labelId = useId();\n return (\n <AriaColorPicker {...props}>\n <DialogTrigger type=\"popover\" mobileType=\"tray\" targetRef={unwrapDOMRef(swatchRef)}>\n <Button \n ref={domRef}\n className={style({\n backgroundColor: 'transparent',\n borderStyle: 'none',\n padding: 0,\n display: 'flex',\n alignItems: 'center',\n gap: 'text-to-control',\n outlineStyle: 'none',\n fontFamily: 'sans',\n color: 'body',\n fontSize: {\n size: {\n XS: 'xs',\n S: 'sm',\n M: 'base',\n L: 'lg'\n }\n }\n })({size: props.size || 'M'})}>\n {({isFocusVisible}) => (\n <>\n <div\n className={style({\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid'\n },\n outlineColor: 'focus-ring',\n outlineWidth: 2,\n outlineOffset: 2,\n borderRadius: 'default'\n })({isFocusVisible})}>\n <ColorSwatch\n ref={swatchRef}\n color={props.value}\n size={props.size}\n rounding={props.rounding}\n aria-label={props['aria-label']}\n aria-labelledby={props['aria-labelledby']}\n aria-describedby={props['aria-describedby']}\n aria-details={props['aria-details']} />\n </div>\n {props.label && \n <span id={labelId}>{props.label}</span>\n }\n </>\n )}\n </Button>\n <Dialog \n aria-labelledby={props.label ? labelId : props['aria-labelledby']}\n aria-label={props['aria-label']}\n UNSAFE_style={{\n width: 'fit-content',\n minWidth: 0,\n margin: '0 auto' // Center within tray.\n }}>\n <Content \n UNSAFE_style={{\n position: 'relative',\n margin: 'calc(var(--spectrum-dialog-padding) * -1)',\n padding: 'var(--spectrum-global-dimension-size-200)'\n }}>\n {props.children}\n </Content>\n </Dialog>\n </DialogTrigger>\n </AriaColorPicker>\n );\n});\n"],"names":[],"version":3,"file":"ColorPicker.module.js.map"}
|
package/dist/ColorSlider.main.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
var $2b9adc23f6c7cae1$exports = require("./ColorThumb.main.js");
|
|
2
|
-
require("./vars.
|
|
2
|
+
require("./vars.a54898d8.css");
|
|
3
3
|
var $28060baf29cc5ac7$exports = require("./colorslider_vars_css.main.js");
|
|
4
4
|
var $5EHW1$reactspectrumutils = require("@react-spectrum/utils");
|
|
5
5
|
var $5EHW1$reactariacomponents = require("react-aria-components");
|
|
@@ -42,7 +42,7 @@ $parcel$export(module.exports, "ColorSlider", () => $4537dec0de08c277$export$44f
|
|
|
42
42
|
|
|
43
43
|
|
|
44
44
|
|
|
45
|
-
|
|
45
|
+
const $4537dec0de08c277$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, ($parcel$interopDefault($5EHW1$react))).forwardRef(function ColorSlider(props, ref) {
|
|
46
46
|
props = (0, $5EHW1$reactspectrumprovider.useProviderProps)(props);
|
|
47
47
|
let inputRef = (0, $5EHW1$react.useRef)(null);
|
|
48
48
|
let trackRef = (0, $5EHW1$react.useRef)(null);
|
|
@@ -120,10 +120,7 @@ function $4537dec0de08c277$var$ColorSlider(props, ref) {
|
|
|
120
120
|
ref: inputRef,
|
|
121
121
|
className: (0, $5EHW1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($28060baf29cc5ac7$exports))), 'spectrum-ColorSlider-slider')
|
|
122
122
|
}))));
|
|
123
|
-
}
|
|
124
|
-
/**
|
|
125
|
-
* ColorSliders allow users to adjust an individual channel of a color value.
|
|
126
|
-
*/ let $4537dec0de08c277$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, ($parcel$interopDefault($5EHW1$react))).forwardRef($4537dec0de08c277$var$ColorSlider);
|
|
123
|
+
});
|
|
127
124
|
|
|
128
125
|
|
|
129
126
|
//# sourceMappingURL=ColorSlider.main.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;AAmBM,MAAM,0DAAc,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,YAAY,KAA+B,EAAE,GAAiC;IACjI,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE,KAAK;IAClC,CAAC,OAAO,OAAO,GAAG,CAAA,GAAA,0CAAc,EAAE,OAAO,QAAQ,CAAA,GAAA,6CAAiB;IAElE,IAAI,cACF,UAAU,WACV,OAAO,eACP,WAAW,SACX,KAAK,kBACL,cAAc,EACd,cAAc,SAAS,EACxB,GAAG;IACJ,IAAI,WAAW,gBAAgB;IAE/B,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IACjC,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,8BAAQ;IAEvB,IAAI,QAAQ,CAAA,GAAA,4CAAkB,EAAE;QAAC,GAAG,KAAK;gBAAE;IAAM;IAEjD,wEAAwE;IACxE,IAAI,YAAY,OAAO;QACrB,YAAY,aAAc,CAAA,OAAO,UAAU,WAAW,QAAQ,SAAQ;QACtE,QAAQ;IACV;IAEA,mEAAmE;IACnE,qDAAqD;IACrD,8FAA8F;IAC9F,mEAAmE;IACnE,IAAI,UAAU,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,kBAAkB,IAAI,CAAC,UACrE,QAAQ,MAAM,KAAK,CAAC,cAAc,CAAC,SAAS;IAG9C,8DAA8D;IAC9D,IAAI,kBAAkB,MACpB,iBAAiB,CAAC,CAAC;IAGrB,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,cAAE,UAAU,eAAE,WAAW,EAAC,GAAG,CAAA,GAAA,oCAAa,EAAE;QACjF,GAAG,KAAK;eACR;QACA,cAAc;kBACd;kBACA;IACF,GAAG;IAEH,IAAI,kBAAC,cAAc,EAAC,GAAG,CAAA,GAAA,4CAAc;IACrC,IAAI,CAAC,WAAW,aAAa,GAAG,CAAA,GAAA,qBAAO,EAAE;IACzC,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,qCAAO,EAAE;oBAC1B;QACA,eAAe;IACjB;IAEA,qBACE,0DAAC;QACC,KAAK;QACJ,GAAG,UAAU;QACd,WAAW,CAAA,GAAA,oCAAS,EAClB,CAAA,GAAA,mDAAK,GACL;YACE,8CAA8C,CAAC;YAC/C,4CAA4C;QAC9C;OAED,uBACC,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBACjC,0DAAC,CAAA,GAAA,+BAAI,GAAM,YAAa,QACvB,MAAM,cAAc,kBACnB,0DAAC,CAAA,GAAA,sCAAW;QACV,OAAO;YACL,cAAc;gBACZ,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YACvC;QACF;OACC,MAAM,cAAc,GAGxB,gCACC,0DAAC,CAAA,GAAA,+BAAI;QAAE,aAAY;QAAO,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBAC7D,0DAAC,UAAW,aAAc,MAAM,KAAK,CAAC,kBAAkB,CAAC,SAAS,0BAK1E,0DAAC;QACE,GAAG,UAAU;QACd,KAAK;QACL,WAAW,CAAA,GAAA,oCAAS,EAClB,CAAA,GAAA,mDAAK,GACL,wBAAwB;YACtB,eAAe;YACf,kCAAkC;QACpC;qBAGF,0DAAC,CAAA,GAAA,oCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW,aAAa;QACxB,YAAY;QACZ,YAAY,MAAM,eAAe,CAAC;QAClC,cAAc;QACd,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC7B,GAAG,UAAU;qBACd,0DAAC;QAAO,GAAG,UAAU;QAAG,GAAG,UAAU;QAAE,KAAK;QAAU,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;;AAK9F","sources":["packages/@react-spectrum/color/src/ColorSlider.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, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorSliderContext, useContextProps} from 'react-aria-components';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport {Label} from '@react-spectrum/label';\nimport React, {useRef, useState} from 'react';\nimport {SpectrumColorSliderProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorslider/vars.css';\nimport {useColorSlider} from '@react-aria/color';\nimport {useColorSliderState} from '@react-stately/color';\nimport {useFocus, useFocusVisible} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\n/**\n * ColorSliders allow users to adjust an individual channel of a color value.\n */\nexport const ColorSlider = React.forwardRef(function ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let inputRef = useRef(null);\n let trackRef = useRef(null);\n let domRef = useFocusableRef(ref, inputRef);\n [props, domRef] = useContextProps(props, domRef, ColorSliderContext);\n\n let {\n isDisabled,\n channel,\n orientation,\n label,\n showValueLabel,\n 'aria-label': ariaLabel\n } = props;\n let vertical = orientation === 'vertical';\n\n let {styleProps} = useStyleProps(props);\n let {locale} = useLocale();\n\n let state = useColorSliderState({...props, locale});\n\n // If vertical and a label is provided, use it as an aria-label instead.\n if (vertical && label) {\n ariaLabel = ariaLabel || (typeof label === 'string' ? label : undefined);\n label = null;\n }\n\n // If no external label, aria-label or aria-labelledby is provided,\n // default to displaying the localized channel value.\n // Specifically check if label is undefined. If label is `null` then display no visible label.\n // A default aria-label is provided by useColorSlider in that case.\n if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) {\n label = state.value.getChannelName(channel, locale);\n }\n\n // Show the value label by default if there is a visible label\n if (showValueLabel == null) {\n showValueLabel = !!label;\n }\n\n let {inputProps, thumbProps, trackProps, labelProps, outputProps} = useColorSlider({\n ...props,\n label,\n 'aria-label': ariaLabel,\n trackRef,\n inputRef\n }, state);\n\n let {isFocusVisible} = useFocusVisible();\n let [isFocused, setIsFocused] = useState(false);\n let {focusProps} = useFocus({\n isDisabled,\n onFocusChange: setIsFocused\n });\n\n return (\n <div\n ref={domRef}\n {...styleProps}\n className={classNames(\n styles,\n {\n 'spectrum-ColorSlider-container--horizontal': !vertical,\n 'spectrum-ColorSlider-container--vertical': vertical\n }\n )}>\n {label &&\n <div className={classNames(styles, 'spectrum-ColorSlider-labelContainer')}>\n <Label {...labelProps}>{label}</Label>\n {props.contextualHelp &&\n <SlotProvider\n slots={{\n actionButton: {\n UNSAFE_className: classNames(styles, 'spectrum-ColorSlider-contextualHelp')\n }\n }}>\n {props.contextualHelp}\n </SlotProvider>\n }\n {showValueLabel && (\n <Label elementType=\"span\" UNSAFE_className={classNames(styles, 'spectrum-ColorSlider-valueLabel')}>\n <output {...outputProps}>{state.value.formatChannelValue(channel, locale)}</output>\n </Label>\n )}\n </div>\n }\n <div\n {...trackProps}\n ref={trackRef}\n className={classNames(\n styles,\n 'spectrum-ColorSlider', {\n 'is-disabled': isDisabled,\n 'spectrum-ColorSlider--vertical': vertical\n }\n )\n }>\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocused && isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isThumbDragging(0)}\n containerRef={trackRef}\n className={classNames(styles, 'spectrum-ColorSlider-handle')}\n {...thumbProps}>\n <input {...inputProps} {...focusProps} ref={inputRef} className={classNames(styles, 'spectrum-ColorSlider-slider')} />\n </ColorThumb>\n </div>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"ColorSlider.main.js.map"}
|
package/dist/ColorSlider.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {ColorThumb as $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc} from "./ColorThumb.mjs";
|
|
2
|
-
import "./vars.
|
|
2
|
+
import "./vars.a54898d8.css";
|
|
3
3
|
import $fxUYb$colorslider_vars_cssmodulejs from "./colorslider_vars_css.mjs";
|
|
4
4
|
import {useFocusableRef as $fxUYb$useFocusableRef, useStyleProps as $fxUYb$useStyleProps, classNames as $fxUYb$classNames, SlotProvider as $fxUYb$SlotProvider} from "@react-spectrum/utils";
|
|
5
5
|
import {useContextProps as $fxUYb$useContextProps, ColorSliderContext as $fxUYb$ColorSliderContext} from "react-aria-components";
|
|
@@ -36,7 +36,7 @@ function $parcel$interopDefault(a) {
|
|
|
36
36
|
|
|
37
37
|
|
|
38
38
|
|
|
39
|
-
|
|
39
|
+
const $3870e4ce67ed7ee1$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $fxUYb$react).forwardRef(function ColorSlider(props, ref) {
|
|
40
40
|
props = (0, $fxUYb$useProviderProps)(props);
|
|
41
41
|
let inputRef = (0, $fxUYb$useRef)(null);
|
|
42
42
|
let trackRef = (0, $fxUYb$useRef)(null);
|
|
@@ -114,10 +114,7 @@ function $3870e4ce67ed7ee1$var$ColorSlider(props, ref) {
|
|
|
114
114
|
ref: inputRef,
|
|
115
115
|
className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), 'spectrum-ColorSlider-slider')
|
|
116
116
|
}))));
|
|
117
|
-
}
|
|
118
|
-
/**
|
|
119
|
-
* ColorSliders allow users to adjust an individual channel of a color value.
|
|
120
|
-
*/ let $3870e4ce67ed7ee1$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $fxUYb$react).forwardRef($3870e4ce67ed7ee1$var$ColorSlider);
|
|
117
|
+
});
|
|
121
118
|
|
|
122
119
|
|
|
123
120
|
export {$3870e4ce67ed7ee1$export$44fd664bcca5b6fb as ColorSlider};
|