@dreamcommerce/aurora 3.0.0-318 → 3.0.0-319

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 (31) hide show
  1. package/build/cjs/packages/aurora/src/components/color_picker/color_picker.js +9 -5
  2. package/build/cjs/packages/aurora/src/components/color_picker/color_picker.js.map +1 -1
  3. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_impl.js +8 -5
  4. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_impl.js.map +1 -1
  5. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_alpha.js +8 -1
  6. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_alpha.js.map +1 -1
  7. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_input.js +9 -1
  8. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_input.js.map +1 -1
  9. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js +19 -1
  10. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js.map +1 -1
  11. package/build/cjs/packages/aurora/src/components/color_picker/components/pure_color_picker.js +3 -2
  12. package/build/cjs/packages/aurora/src/components/color_picker/components/pure_color_picker.js.map +1 -1
  13. package/build/cjs/packages/aurora/src/components/color_picker/hooks/setup_color_picker.js +8 -2
  14. package/build/cjs/packages/aurora/src/components/color_picker/hooks/setup_color_picker.js.map +1 -1
  15. package/build/esm/packages/aurora/src/components/color_picker/color_picker.js +9 -5
  16. package/build/esm/packages/aurora/src/components/color_picker/color_picker.js.map +1 -1
  17. package/build/esm/packages/aurora/src/components/color_picker/color_picker_types.d.ts +4 -2
  18. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_impl.js +8 -5
  19. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_impl.js.map +1 -1
  20. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_alpha.js +9 -2
  21. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_alpha.js.map +1 -1
  22. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_input.js +9 -1
  23. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_input.js.map +1 -1
  24. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js +20 -2
  25. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js.map +1 -1
  26. package/build/esm/packages/aurora/src/components/color_picker/components/pure_color_picker.js +3 -2
  27. package/build/esm/packages/aurora/src/components/color_picker/components/pure_color_picker.js.map +1 -1
  28. package/build/esm/packages/aurora/src/components/color_picker/hooks/setup_color_picker.d.ts +4 -2
  29. package/build/esm/packages/aurora/src/components/color_picker/hooks/setup_color_picker.js +8 -2
  30. package/build/esm/packages/aurora/src/components/color_picker/hooks/setup_color_picker.js.map +1 -1
  31. package/package.json +1 -1
@@ -35,8 +35,6 @@ var ColorPicker = function ColorPicker(_ref) {
35
35
  }),
36
36
  color = _useSetupColorPicker.color,
37
37
  setColor = _useSetupColorPicker.setColor,
38
- typedInputValue = _useSetupColorPicker.typedInputValue,
39
- setTypedInputValue = _useSetupColorPicker.setTypedInputValue,
40
38
  hex = _useSetupColorPicker.hex,
41
39
  hslArr = _useSetupColorPicker.hslArr,
42
40
  handleOnChangeAlpha = _useSetupColorPicker.handleOnChangeAlpha,
@@ -57,14 +55,16 @@ var ColorPicker = function ColorPicker(_ref) {
57
55
  withGradient = _useSetupColorPicker.withGradient,
58
56
  isColorPickerOpened = _useSetupColorPicker.isColorPickerOpened,
59
57
  setIsColorPickerOpened = _useSetupColorPicker.setIsColorPickerOpened,
58
+ typedInputValue = _useSetupColorPicker.typedInputValue,
59
+ setTypedInputValue = _useSetupColorPicker.setTypedInputValue,
60
+ isColorPickerCurrentlyUsed = _useSetupColorPicker.isColorPickerCurrentlyUsed,
61
+ setIsColorPickerCurrentlyUsed = _useSetupColorPicker.setIsColorPickerCurrentlyUsed,
60
62
  degrees = _useSetupColorPicker.degrees,
61
63
  shadeName = _useSetupColorPicker.shadeName;
62
64
  var contextVal = React.useMemo(function () {
63
65
  return {
64
66
  color: color,
65
67
  setColor: setColor,
66
- typedInputValue: typedInputValue,
67
- setTypedInputValue: setTypedInputValue,
68
68
  hex: hex,
69
69
  hslArr: hslArr,
70
70
  handleOnChangeAlpha: handleOnChangeAlpha,
@@ -86,10 +86,14 @@ var ColorPicker = function ColorPicker(_ref) {
86
86
  withGradient: withGradient,
87
87
  isColorPickerOpened: isColorPickerOpened,
88
88
  setIsColorPickerOpened: setIsColorPickerOpened,
89
+ typedInputValue: typedInputValue,
90
+ setTypedInputValue: setTypedInputValue,
91
+ isColorPickerCurrentlyUsed: isColorPickerCurrentlyUsed,
92
+ setIsColorPickerCurrentlyUsed: setIsColorPickerCurrentlyUsed,
89
93
  degrees: degrees,
90
94
  shadeName: shadeName
91
95
  };
92
- }, [color, setColor, typedInputValue, setTypedInputValue, hex, hslArr, handleOnChangeAlpha, alpha, rgbaArr, setR, setG, setB, handleCancel, handleSave, previousSolidColor, colorVariables, isCurrentValueGradient, setLinear, setRadial, gradientType, previousGradientColor, setSolid, withGradient, isColorPickerOpened, setIsColorPickerOpened, degrees, shadeName]);
96
+ }, [color, setColor, hex, hslArr, handleOnChangeAlpha, alpha, rgbaArr, setR, setG, setB, handleCancel, handleSave, previousSolidColor, colorVariables, isCurrentValueGradient, setLinear, setRadial, gradientType, previousGradientColor, setSolid, withGradient, isColorPickerOpened, setIsColorPickerOpened, typedInputValue, setTypedInputValue, isColorPickerCurrentlyUsed, setIsColorPickerCurrentlyUsed, degrees, shadeName]);
93
97
  return /*#__PURE__*/React__default['default'].createElement(color_picker_context.ColorPickerContext.Provider, {
94
98
  value: contextVal
95
99
  }, /*#__PURE__*/React__default['default'].createElement(pure_color_picker['default'], _rollupPluginBabelHelpers.objectSpread2({
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -17,17 +17,20 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
17
17
 
18
18
  var ColorPickerImpl = function ColorPickerImpl() {
19
19
  var _useColorPicker = use_color_picker.useColorPicker(),
20
- isCurrentValueGradient = _useColorPicker.isCurrentValueGradient;
20
+ isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
21
+ setIsColorPickerCurrentlyUsed = _useColorPicker.setIsColorPickerCurrentlyUsed;
21
22
  return /*#__PURE__*/React__default['default'].createElement("div", {
22
23
  className: "aurora-flex aurora-flex-col aurora-gap-2"
23
24
  }, /*#__PURE__*/React__default['default'].createElement(stack.Stack, {
24
25
  spacing: "2.5",
25
26
  direction: "column",
26
27
  onMouseDown: function onMouseDown(ev) {
27
- return (
28
- // Prevents whole page from being selected when dragging
29
- ev.preventDefault()
30
- );
28
+ // Prevents whole page from being selected when dragging
29
+ ev.preventDefault();
30
+ setIsColorPickerCurrentlyUsed(true);
31
+ },
32
+ onMouseUp: function onMouseUp() {
33
+ setIsColorPickerCurrentlyUsed(false);
31
34
  }
32
35
  }, /*#__PURE__*/React__default['default'].createElement("div", {
33
36
  className: "color-picker__square aurora-overflow-hidden"
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -13,7 +13,14 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
13
  var ColorPickerInputsHexAlpha = function ColorPickerInputsHexAlpha() {
14
14
  var _useColorPicker = use_color_picker.useColorPicker(),
15
15
  handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
16
- alpha = _useColorPicker.alpha;
16
+ alpha = _useColorPicker.alpha,
17
+ isColorPickerCurrentlyUsed = _useColorPicker.isColorPickerCurrentlyUsed;
18
+ var alphaInputRef = React.useRef(null);
19
+ React.useEffect(function () {
20
+ if (isColorPickerCurrentlyUsed && alphaInputRef.current) {
21
+ alphaInputRef.current.blur();
22
+ }
23
+ }, [isColorPickerCurrentlyUsed]);
17
24
  return /*#__PURE__*/React__default['default'].createElement("div", {
18
25
  className: "aurora-flex aurora-rounded-6 focus aurora-text aurora-w-[46px] aurora-flex-none aurora-px-1 aurora-items-center"
19
26
  }, /*#__PURE__*/React__default['default'].createElement("input", {
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -31,7 +31,8 @@ var ColorPickerInputsHexInput = function ColorPickerInputsHexInput(_ref) {
31
31
  setTypedInputValue = _useColorPicker.setTypedInputValue,
32
32
  hex = _useColorPicker.hex,
33
33
  isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
34
- gradientType = _useColorPicker.gradientType;
34
+ gradientType = _useColorPicker.gradientType,
35
+ isColorPickerCurrentlyUsed = _useColorPicker.isColorPickerCurrentlyUsed;
35
36
  var _useState = React.useState(hex),
36
37
  _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
37
38
  value = _useState2[0],
@@ -41,6 +42,7 @@ var ColorPickerInputsHexInput = function ColorPickerInputsHexInput(_ref) {
41
42
  _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
42
43
  isDisabled = _useState4[0],
43
44
  setIsDisabled = _useState4[1];
45
+ var inputRef = React.useRef(null);
44
46
  var _usePicker = context.usePicker(),
45
47
  colors = _usePicker.colors,
46
48
  selectedColor = _usePicker.selectedColor,
@@ -64,6 +66,11 @@ var ColorPickerInputsHexInput = function ColorPickerInputsHexInput(_ref) {
64
66
  var hexBlur = function hexBlur() {
65
67
  setIsDisabled(false);
66
68
  };
69
+ React.useEffect(function () {
70
+ if (isColorPickerCurrentlyUsed && inputRef.current) {
71
+ inputRef.current.blur();
72
+ }
73
+ }, [isColorPickerCurrentlyUsed]);
67
74
  React.useEffect(function () {
68
75
  if (hex === valueRef.current) return;
69
76
  if (!isDisabled) {
@@ -72,6 +79,7 @@ var ColorPickerInputsHexInput = function ColorPickerInputsHexInput(_ref) {
72
79
  }
73
80
  }, [hex, isDisabled]);
74
81
  return /*#__PURE__*/React__default['default'].createElement(input.Input, {
82
+ ref: inputRef,
75
83
  className: className,
76
84
  type: type,
77
85
  preElement: preElement,
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,8DAAkE;AAC1F,sBAAsB,uFAA2F;AACjH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,8DAAkE;AAC1F,sBAAsB,uFAA2F;AACjH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -18,8 +18,23 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
18
18
  setB = _useColorPicker.setB,
19
19
  handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
20
20
  alpha = _useColorPicker.alpha,
21
- rgbaArr = _useColorPicker.rgbaArr;
21
+ rgbaArr = _useColorPicker.rgbaArr,
22
+ isColorPickerCurrentlyUsed = _useColorPicker.isColorPickerCurrentlyUsed;
23
+ var rInputRef = React.useRef(null);
24
+ var gInputRef = React.useRef(null);
25
+ var bInputRef = React.useRef(null);
26
+ var alphaInputRef = React.useRef(null);
27
+ React.useEffect(function () {
28
+ if (isColorPickerCurrentlyUsed) {
29
+ var _rInputRef$current, _gInputRef$current, _bInputRef$current, _alphaInputRef$curren;
30
+ (_rInputRef$current = rInputRef.current) === null || _rInputRef$current === void 0 ? void 0 : _rInputRef$current.blur();
31
+ (_gInputRef$current = gInputRef.current) === null || _gInputRef$current === void 0 ? void 0 : _gInputRef$current.blur();
32
+ (_bInputRef$current = bInputRef.current) === null || _bInputRef$current === void 0 ? void 0 : _bInputRef$current.blur();
33
+ (_alphaInputRef$curren = alphaInputRef.current) === null || _alphaInputRef$curren === void 0 ? void 0 : _alphaInputRef$curren.blur();
34
+ }
35
+ }, [isColorPickerCurrentlyUsed]);
22
36
  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(input.Input, {
37
+ ref: rInputRef,
23
38
  className: "aurora-h-full aurora-text-xs",
24
39
  type: "text",
25
40
  value: rgbaArr[0],
@@ -28,6 +43,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
28
43
  },
29
44
  onKeyDown: color_picker_utils.ColorPickerUtils.preventTypingLetters
30
45
  }), /*#__PURE__*/React__default['default'].createElement(input.Input, {
46
+ ref: gInputRef,
31
47
  className: "aurora-h-full aurora-text-xs",
32
48
  type: "text",
33
49
  value: rgbaArr[1],
@@ -36,6 +52,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
36
52
  },
37
53
  onKeyDown: color_picker_utils.ColorPickerUtils.preventTypingLetters
38
54
  }), /*#__PURE__*/React__default['default'].createElement(input.Input, {
55
+ ref: bInputRef,
39
56
  className: "aurora-h-full aurora-text-xs",
40
57
  type: "text",
41
58
  value: rgbaArr[2],
@@ -46,6 +63,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
46
63
  }), /*#__PURE__*/React__default['default'].createElement("div", {
47
64
  className: "aurora-flex aurora-rounded-6 focus aurora-text aurora-w-[46px] aurora-flex-none aurora-px-1 aurora-items-center"
48
65
  }, /*#__PURE__*/React__default['default'].createElement("input", {
66
+ ref: alphaInputRef,
49
67
  className: "aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-rounded-6 aurora-h-full aurora-text-xs",
50
68
  type: "text",
51
69
  value: Math.round(alpha),
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -56,8 +56,9 @@ var ColorPickerPure = function ColorPickerPure(_ref) {
56
56
  squareHeight: color_picker_constants.COLOR_PICKER_HEIGHT,
57
57
  hideOpacity: false
58
58
  }, /*#__PURE__*/React__default['default'].createElement(popover_trigger.PopoverTrigger, {
59
- onClick: function onClick() {
60
- return setIsColorPickerOpened(true);
59
+ onClick: function onClick(ev) {
60
+ ev.preventDefault();
61
+ setIsColorPickerOpened(true);
61
62
  },
62
63
  disabled: disabled,
63
64
  className: cn.cn('aurora-w-full', triggerClassName)
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,qFAAyF;AAC7G,sBAAsB,iFAAqF;AAC3G,qBAAqB,uFAA2F;AAChH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,qFAAyF;AAC7G,sBAAsB,iFAAqF;AAC3G,qBAAqB,uFAA2F;AAChH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -42,6 +42,10 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
42
42
  _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
43
43
  typedInputValue = _useState10[0],
44
44
  setTypedInputValue = _useState10[1];
45
+ var _useState11 = React.useState(false),
46
+ _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
47
+ isColorPickerCurrentlyUsed = _useState12[0],
48
+ setIsColorPickerCurrentlyUsed = _useState12[1];
45
49
  var _getDetails = utils.getDetails(colorValue),
46
50
  degrees = _getDetails.degrees;
47
51
  var savedDegRef = React.useRef(isNaN(degrees) ? 180 : degrees);
@@ -116,8 +120,6 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
116
120
  color: colorValue,
117
121
  previousSolidColor: previousSolidColor,
118
122
  previousGradientColor: previousGradientColor,
119
- typedInputValue: typedInputValue,
120
- setTypedInputValue: setTypedInputValue,
121
123
  setColor: setColor,
122
124
  hex: hex,
123
125
  hslArr: hslArr,
@@ -138,6 +140,10 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
138
140
  withGradient: withGradient,
139
141
  isColorPickerOpened: isColorPickerOpened,
140
142
  setIsColorPickerOpened: setIsColorPickerOpened,
143
+ typedInputValue: typedInputValue,
144
+ setTypedInputValue: setTypedInputValue,
145
+ isColorPickerCurrentlyUsed: isColorPickerCurrentlyUsed,
146
+ setIsColorPickerCurrentlyUsed: setIsColorPickerCurrentlyUsed,
141
147
  degrees: degrees,
142
148
  shadeName: shadeName
143
149
  };
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,qFAAyF;AAC7G,6BAA6B,8FAAkG;AAC/H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,qFAAyF;AAC7G,6BAA6B,8FAAkG;AAC/H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -27,8 +27,6 @@ var ColorPicker = function ColorPicker(_ref) {
27
27
  }),
28
28
  color = _useSetupColorPicker.color,
29
29
  setColor = _useSetupColorPicker.setColor,
30
- typedInputValue = _useSetupColorPicker.typedInputValue,
31
- setTypedInputValue = _useSetupColorPicker.setTypedInputValue,
32
30
  hex = _useSetupColorPicker.hex,
33
31
  hslArr = _useSetupColorPicker.hslArr,
34
32
  handleOnChangeAlpha = _useSetupColorPicker.handleOnChangeAlpha,
@@ -49,14 +47,16 @@ var ColorPicker = function ColorPicker(_ref) {
49
47
  withGradient = _useSetupColorPicker.withGradient,
50
48
  isColorPickerOpened = _useSetupColorPicker.isColorPickerOpened,
51
49
  setIsColorPickerOpened = _useSetupColorPicker.setIsColorPickerOpened,
50
+ typedInputValue = _useSetupColorPicker.typedInputValue,
51
+ setTypedInputValue = _useSetupColorPicker.setTypedInputValue,
52
+ isColorPickerCurrentlyUsed = _useSetupColorPicker.isColorPickerCurrentlyUsed,
53
+ setIsColorPickerCurrentlyUsed = _useSetupColorPicker.setIsColorPickerCurrentlyUsed,
52
54
  degrees = _useSetupColorPicker.degrees,
53
55
  shadeName = _useSetupColorPicker.shadeName;
54
56
  var contextVal = useMemo(function () {
55
57
  return {
56
58
  color: color,
57
59
  setColor: setColor,
58
- typedInputValue: typedInputValue,
59
- setTypedInputValue: setTypedInputValue,
60
60
  hex: hex,
61
61
  hslArr: hslArr,
62
62
  handleOnChangeAlpha: handleOnChangeAlpha,
@@ -78,10 +78,14 @@ var ColorPicker = function ColorPicker(_ref) {
78
78
  withGradient: withGradient,
79
79
  isColorPickerOpened: isColorPickerOpened,
80
80
  setIsColorPickerOpened: setIsColorPickerOpened,
81
+ typedInputValue: typedInputValue,
82
+ setTypedInputValue: setTypedInputValue,
83
+ isColorPickerCurrentlyUsed: isColorPickerCurrentlyUsed,
84
+ setIsColorPickerCurrentlyUsed: setIsColorPickerCurrentlyUsed,
81
85
  degrees: degrees,
82
86
  shadeName: shadeName
83
87
  };
84
- }, [color, setColor, typedInputValue, setTypedInputValue, hex, hslArr, handleOnChangeAlpha, alpha, rgbaArr, setR, setG, setB, handleCancel, handleSave, previousSolidColor, colorVariables, isCurrentValueGradient, setLinear, setRadial, gradientType, previousGradientColor, setSolid, withGradient, isColorPickerOpened, setIsColorPickerOpened, degrees, shadeName]);
88
+ }, [color, setColor, hex, hslArr, handleOnChangeAlpha, alpha, rgbaArr, setR, setG, setB, handleCancel, handleSave, previousSolidColor, colorVariables, isCurrentValueGradient, setLinear, setRadial, gradientType, previousGradientColor, setSolid, withGradient, isColorPickerOpened, setIsColorPickerOpened, typedInputValue, setTypedInputValue, isColorPickerCurrentlyUsed, setIsColorPickerCurrentlyUsed, degrees, shadeName]);
85
89
  return /*#__PURE__*/React.createElement(ColorPickerContext.Provider, {
86
90
  value: contextVal
87
91
  }, /*#__PURE__*/React.createElement(ColorPickerPure, _objectSpread2({
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -34,8 +34,6 @@ export interface IColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>,
34
34
  triggerClassName?: string;
35
35
  }
36
36
  export interface IColorPickerContext {
37
- typedInputValue: string;
38
- setTypedInputValue: (newValue: string) => void;
39
37
  color: string;
40
38
  setColor: (newColor: string, shadeName?: string) => void;
41
39
  hex: string;
@@ -59,6 +57,10 @@ export interface IColorPickerContext {
59
57
  previousGradientColor?: string;
60
58
  isColorPickerOpened: boolean;
61
59
  setIsColorPickerOpened: (isOpened: boolean) => void;
60
+ typedInputValue: string;
61
+ setTypedInputValue: (newValue: string) => void;
62
+ isColorPickerCurrentlyUsed: boolean;
63
+ setIsColorPickerCurrentlyUsed: (isUsed: boolean) => void;
62
64
  degrees: number;
63
65
  shadeName: string;
64
66
  }
@@ -9,17 +9,20 @@ import { Square } from './color_picker_overrides/color_picker_square.js';
9
9
 
10
10
  var ColorPickerImpl = function ColorPickerImpl() {
11
11
  var _useColorPicker = useColorPicker(),
12
- isCurrentValueGradient = _useColorPicker.isCurrentValueGradient;
12
+ isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
13
+ setIsColorPickerCurrentlyUsed = _useColorPicker.setIsColorPickerCurrentlyUsed;
13
14
  return /*#__PURE__*/React.createElement("div", {
14
15
  className: "aurora-flex aurora-flex-col aurora-gap-2"
15
16
  }, /*#__PURE__*/React.createElement(Stack, {
16
17
  spacing: "2.5",
17
18
  direction: "column",
18
19
  onMouseDown: function onMouseDown(ev) {
19
- return (
20
- // Prevents whole page from being selected when dragging
21
- ev.preventDefault()
22
- );
20
+ // Prevents whole page from being selected when dragging
21
+ ev.preventDefault();
22
+ setIsColorPickerCurrentlyUsed(true);
23
+ },
24
+ onMouseUp: function onMouseUp() {
25
+ setIsColorPickerCurrentlyUsed(false);
23
26
  }
24
27
  }, /*#__PURE__*/React.createElement("div", {
25
28
  className: "color-picker__square aurora-overflow-hidden"
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -1,11 +1,18 @@
1
- import React from 'react';
1
+ import React, { useRef, useEffect } from 'react';
2
2
  import { useColorPicker } from '../../../hooks/use_color_picker.js';
3
3
  import { ColorPickerUtils } from '../../../color_picker_utils.js';
4
4
 
5
5
  var ColorPickerInputsHexAlpha = function ColorPickerInputsHexAlpha() {
6
6
  var _useColorPicker = useColorPicker(),
7
7
  handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
8
- alpha = _useColorPicker.alpha;
8
+ alpha = _useColorPicker.alpha,
9
+ isColorPickerCurrentlyUsed = _useColorPicker.isColorPickerCurrentlyUsed;
10
+ var alphaInputRef = useRef(null);
11
+ useEffect(function () {
12
+ if (isColorPickerCurrentlyUsed && alphaInputRef.current) {
13
+ alphaInputRef.current.blur();
14
+ }
15
+ }, [isColorPickerCurrentlyUsed]);
9
16
  return /*#__PURE__*/React.createElement("div", {
10
17
  className: "aurora-flex aurora-rounded-6 focus aurora-text aurora-w-[46px] aurora-flex-none aurora-px-1 aurora-items-center"
11
18
  }, /*#__PURE__*/React.createElement("input", {
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -23,7 +23,8 @@ var ColorPickerInputsHexInput = function ColorPickerInputsHexInput(_ref) {
23
23
  setTypedInputValue = _useColorPicker.setTypedInputValue,
24
24
  hex = _useColorPicker.hex,
25
25
  isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
26
- gradientType = _useColorPicker.gradientType;
26
+ gradientType = _useColorPicker.gradientType,
27
+ isColorPickerCurrentlyUsed = _useColorPicker.isColorPickerCurrentlyUsed;
27
28
  var _useState = useState(hex),
28
29
  _useState2 = _slicedToArray(_useState, 2),
29
30
  value = _useState2[0],
@@ -33,6 +34,7 @@ var ColorPickerInputsHexInput = function ColorPickerInputsHexInput(_ref) {
33
34
  _useState4 = _slicedToArray(_useState3, 2),
34
35
  isDisabled = _useState4[0],
35
36
  setIsDisabled = _useState4[1];
37
+ var inputRef = useRef(null);
36
38
  var _usePicker = usePicker(),
37
39
  colors = _usePicker.colors,
38
40
  selectedColor = _usePicker.selectedColor,
@@ -56,6 +58,11 @@ var ColorPickerInputsHexInput = function ColorPickerInputsHexInput(_ref) {
56
58
  var hexBlur = function hexBlur() {
57
59
  setIsDisabled(false);
58
60
  };
61
+ useEffect(function () {
62
+ if (isColorPickerCurrentlyUsed && inputRef.current) {
63
+ inputRef.current.blur();
64
+ }
65
+ }, [isColorPickerCurrentlyUsed]);
59
66
  useEffect(function () {
60
67
  if (hex === valueRef.current) return;
61
68
  if (!isDisabled) {
@@ -64,6 +71,7 @@ var ColorPickerInputsHexInput = function ColorPickerInputsHexInput(_ref) {
64
71
  }
65
72
  }, [hex, isDisabled]);
66
73
  return /*#__PURE__*/React.createElement(Input, {
74
+ ref: inputRef,
67
75
  className: className,
68
76
  type: type,
69
77
  preElement: preElement,
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,sBAAsB,8DAAkE;AACxF,0BAA0B,uFAA2F;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,sBAAsB,8DAAkE;AACxF,0BAA0B,uFAA2F;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { useRef, useEffect } from 'react';
2
2
  import { Input } from '../../../input/input.js';
3
3
  import { useColorPicker } from '../../hooks/use_color_picker.js';
4
4
  import { ColorPickerUtils } from '../../color_picker_utils.js';
@@ -10,8 +10,23 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
10
10
  setB = _useColorPicker.setB,
11
11
  handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
12
12
  alpha = _useColorPicker.alpha,
13
- rgbaArr = _useColorPicker.rgbaArr;
13
+ rgbaArr = _useColorPicker.rgbaArr,
14
+ isColorPickerCurrentlyUsed = _useColorPicker.isColorPickerCurrentlyUsed;
15
+ var rInputRef = useRef(null);
16
+ var gInputRef = useRef(null);
17
+ var bInputRef = useRef(null);
18
+ var alphaInputRef = useRef(null);
19
+ useEffect(function () {
20
+ if (isColorPickerCurrentlyUsed) {
21
+ var _rInputRef$current, _gInputRef$current, _bInputRef$current, _alphaInputRef$curren;
22
+ (_rInputRef$current = rInputRef.current) === null || _rInputRef$current === void 0 ? void 0 : _rInputRef$current.blur();
23
+ (_gInputRef$current = gInputRef.current) === null || _gInputRef$current === void 0 ? void 0 : _gInputRef$current.blur();
24
+ (_bInputRef$current = bInputRef.current) === null || _bInputRef$current === void 0 ? void 0 : _bInputRef$current.blur();
25
+ (_alphaInputRef$curren = alphaInputRef.current) === null || _alphaInputRef$curren === void 0 ? void 0 : _alphaInputRef$curren.blur();
26
+ }
27
+ }, [isColorPickerCurrentlyUsed]);
14
28
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
29
+ ref: rInputRef,
15
30
  className: "aurora-h-full aurora-text-xs",
16
31
  type: "text",
17
32
  value: rgbaArr[0],
@@ -20,6 +35,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
20
35
  },
21
36
  onKeyDown: ColorPickerUtils.preventTypingLetters
22
37
  }), /*#__PURE__*/React.createElement(Input, {
38
+ ref: gInputRef,
23
39
  className: "aurora-h-full aurora-text-xs",
24
40
  type: "text",
25
41
  value: rgbaArr[1],
@@ -28,6 +44,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
28
44
  },
29
45
  onKeyDown: ColorPickerUtils.preventTypingLetters
30
46
  }), /*#__PURE__*/React.createElement(Input, {
47
+ ref: bInputRef,
31
48
  className: "aurora-h-full aurora-text-xs",
32
49
  type: "text",
33
50
  value: rgbaArr[2],
@@ -38,6 +55,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
38
55
  }), /*#__PURE__*/React.createElement("div", {
39
56
  className: "aurora-flex aurora-rounded-6 focus aurora-text aurora-w-[46px] aurora-flex-none aurora-px-1 aurora-items-center"
40
57
  }, /*#__PURE__*/React.createElement("input", {
58
+ ref: alphaInputRef,
41
59
  className: "aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-rounded-6 aurora-h-full aurora-text-xs",
42
60
  type: "text",
43
61
  value: Math.round(alpha),
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -48,8 +48,9 @@ var ColorPickerPure = function ColorPickerPure(_ref) {
48
48
  squareHeight: COLOR_PICKER_HEIGHT,
49
49
  hideOpacity: false
50
50
  }, /*#__PURE__*/React.createElement(PopoverTrigger, {
51
- onClick: function onClick() {
52
- return setIsColorPickerOpened(true);
51
+ onClick: function onClick(ev) {
52
+ ev.preventDefault();
53
+ setIsColorPickerOpened(true);
53
54
  },
54
55
  disabled: disabled,
55
56
  className: cn('aurora-w-full', triggerClassName)
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+B,qFAAyF;AACxH,iCAAiC,iFAAqF;AACtH,0BAA0B,uFAA2F;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+B,qFAAyF;AACxH,iCAAiC,iFAAqF;AACtH,0BAA0B,uFAA2F;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -12,8 +12,6 @@ declare const useSetupColorPicker: ({ value, onChange, onCancel, onSave, colorVa
12
12
  color: string;
13
13
  previousSolidColor: string;
14
14
  previousGradientColor: string;
15
- typedInputValue: string;
16
- setTypedInputValue: import("react").Dispatch<import("react").SetStateAction<string>>;
17
15
  setColor: (newColor: string, shadeName?: string) => void;
18
16
  hex: string;
19
17
  hslArr: number[];
@@ -34,6 +32,10 @@ declare const useSetupColorPicker: ({ value, onChange, onCancel, onSave, colorVa
34
32
  withGradient: boolean;
35
33
  isColorPickerOpened: boolean;
36
34
  setIsColorPickerOpened: import("react").Dispatch<import("react").SetStateAction<boolean>>;
35
+ typedInputValue: string;
36
+ setTypedInputValue: import("react").Dispatch<import("react").SetStateAction<string>>;
37
+ isColorPickerCurrentlyUsed: boolean;
38
+ setIsColorPickerCurrentlyUsed: import("react").Dispatch<import("react").SetStateAction<boolean>>;
37
39
  degrees: number;
38
40
  shadeName: string;
39
41
  };
@@ -38,6 +38,10 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
38
38
  _useState10 = _slicedToArray(_useState9, 2),
39
39
  typedInputValue = _useState10[0],
40
40
  setTypedInputValue = _useState10[1];
41
+ var _useState11 = useState(false),
42
+ _useState12 = _slicedToArray(_useState11, 2),
43
+ isColorPickerCurrentlyUsed = _useState12[0],
44
+ setIsColorPickerCurrentlyUsed = _useState12[1];
41
45
  var _getDetails = getDetails(colorValue),
42
46
  degrees = _getDetails.degrees;
43
47
  var savedDegRef = useRef(isNaN(degrees) ? 180 : degrees);
@@ -112,8 +116,6 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
112
116
  color: colorValue,
113
117
  previousSolidColor: previousSolidColor,
114
118
  previousGradientColor: previousGradientColor,
115
- typedInputValue: typedInputValue,
116
- setTypedInputValue: setTypedInputValue,
117
119
  setColor: setColor,
118
120
  hex: hex,
119
121
  hslArr: hslArr,
@@ -134,6 +136,10 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
134
136
  withGradient: withGradient,
135
137
  isColorPickerOpened: isColorPickerOpened,
136
138
  setIsColorPickerOpened: setIsColorPickerOpened,
139
+ typedInputValue: typedInputValue,
140
+ setTypedInputValue: setTypedInputValue,
141
+ isColorPickerCurrentlyUsed: isColorPickerCurrentlyUsed,
142
+ setIsColorPickerCurrentlyUsed: setIsColorPickerCurrentlyUsed,
137
143
  degrees: degrees,
138
144
  shadeName: shadeName
139
145
  };
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA,2BAA2B,qFAAyF;AACpH,+BAA+B,8FAAkG;AACjI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA,2BAA2B,qFAAyF;AACpH,+BAA+B,8FAAkG;AACjI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@dreamcommerce/aurora",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "3.0.0-318",
5
+ "version": "3.0.0-319",
6
6
  "description": "aurora",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",