@dreamcommerce/aurora 3.0.0-286 → 3.0.0-288

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 (114) hide show
  1. package/build/cjs/packages/aurora/src/components/color_picker/color_picker.js +8 -8
  2. package/build/cjs/packages/aurora/src/components/color_picker/color_picker_constants.js +0 -5
  3. package/build/cjs/packages/aurora/src/components/color_picker/color_picker_constants.js.map +1 -1
  4. package/build/cjs/packages/aurora/src/components/color_picker/color_picker_utils.js +27 -45
  5. package/build/cjs/packages/aurora/src/components/color_picker/color_picker_utils.js.map +1 -1
  6. package/build/cjs/packages/aurora/src/components/color_picker/components/color_label_input.js +6 -2
  7. package/build/cjs/packages/aurora/src/components/color_picker/components/color_label_input.js.map +1 -1
  8. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_content.js +3 -4
  9. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_content.js.map +1 -1
  10. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_controls.js +1 -1
  11. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_controls.js.map +1 -1
  12. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_footer.js +1 -3
  13. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_footer.js.map +1 -1
  14. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_gradient_controls/color_picker_gradient_angle.js +2 -4
  15. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_gradient_controls/color_picker_gradient_angle.js.map +1 -1
  16. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex.js +10 -4
  17. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex.js.map +1 -1
  18. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js +7 -5
  19. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js.map +1 -1
  20. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_mode_toggler.js +4 -5
  21. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_mode_toggler.js.map +1 -1
  22. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_eye_dropper.js +1 -1
  23. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_eye_dropper.js.map +1 -1
  24. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_hue.js +1 -1
  25. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_hue.js.map +1 -1
  26. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_square.js +1 -1
  27. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_square.js.map +1 -1
  28. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_shades.js +2 -2
  29. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_swatch.js +2 -2
  30. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_swatch.js.map +1 -1
  31. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_variables.js +3 -9
  32. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_variables.js.map +1 -1
  33. package/build/cjs/packages/aurora/src/components/color_picker/components/current_color_preview.js +1 -2
  34. package/build/cjs/packages/aurora/src/components/color_picker/components/current_color_preview.js.map +1 -1
  35. package/build/cjs/packages/aurora/src/components/color_picker/components/pure_color_picker.js +5 -6
  36. package/build/cjs/packages/aurora/src/components/color_picker/components/pure_color_picker.js.map +1 -1
  37. package/build/cjs/packages/aurora/src/components/color_picker/hooks/setup_color_picker.js +65 -94
  38. package/build/cjs/packages/aurora/src/components/color_picker/hooks/setup_color_picker.js.map +1 -1
  39. package/build/cjs/packages/aurora/src/components/controls/color_picker_control/color_picker_control.js +3 -3
  40. package/build/cjs/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control.js +8 -6
  41. package/build/cjs/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control.js.map +1 -1
  42. package/build/cjs/packages/aurora/src/components/image_picker/image_picker.js +5 -5
  43. package/build/cjs/packages/aurora/src/components/input/input.js +5 -29
  44. package/build/cjs/packages/aurora/src/components/input/input.js.map +1 -1
  45. package/build/cjs/packages/aurora/src/components/input/input_variants.js +1 -1
  46. package/build/cjs/packages/aurora/src/components/modal/components/modals_wrapper.js +2 -6
  47. package/build/cjs/packages/aurora/src/components/modal/components/modals_wrapper.js.map +1 -1
  48. package/build/cjs/packages/aurora/src/components/modal/modals_manager.js +2 -5
  49. package/build/cjs/packages/aurora/src/components/modal/modals_manager.js.map +1 -1
  50. package/build/cjs/packages/aurora/src/components/values_syncer/values_syncer.js +69 -47
  51. package/build/cjs/packages/aurora/src/components/values_syncer/values_syncer.js.map +1 -1
  52. package/build/esm/packages/aurora/src/components/color_picker/color_picker.d.ts +1 -1
  53. package/build/esm/packages/aurora/src/components/color_picker/color_picker.js +8 -8
  54. package/build/esm/packages/aurora/src/components/color_picker/color_picker_constants.js +1 -5
  55. package/build/esm/packages/aurora/src/components/color_picker/color_picker_constants.js.map +1 -1
  56. package/build/esm/packages/aurora/src/components/color_picker/color_picker_types.d.ts +8 -19
  57. package/build/esm/packages/aurora/src/components/color_picker/color_picker_types.js.map +1 -1
  58. package/build/esm/packages/aurora/src/components/color_picker/color_picker_utils.d.ts +3 -4
  59. package/build/esm/packages/aurora/src/components/color_picker/color_picker_utils.js +27 -45
  60. package/build/esm/packages/aurora/src/components/color_picker/color_picker_utils.js.map +1 -1
  61. package/build/esm/packages/aurora/src/components/color_picker/components/color_label_input.js +6 -2
  62. package/build/esm/packages/aurora/src/components/color_picker/components/color_label_input.js.map +1 -1
  63. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_content.js +3 -4
  64. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_content.js.map +1 -1
  65. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_controls.js +1 -1
  66. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_controls.js.map +1 -1
  67. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_footer.js +1 -3
  68. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_footer.js.map +1 -1
  69. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_gradient_controls/color_picker_gradient_angle.js +2 -4
  70. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_gradient_controls/color_picker_gradient_angle.js.map +1 -1
  71. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex.js +11 -5
  72. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex.js.map +1 -1
  73. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js +7 -5
  74. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js.map +1 -1
  75. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_mode_toggler.js +4 -5
  76. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_mode_toggler.js.map +1 -1
  77. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_eye_dropper.js +1 -1
  78. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_eye_dropper.js.map +1 -1
  79. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_hue.js +1 -1
  80. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_hue.js.map +1 -1
  81. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_square.js +1 -1
  82. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_square.js.map +1 -1
  83. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_shades.js +2 -2
  84. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_swatch.js +2 -2
  85. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_swatch.js.map +1 -1
  86. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_variables.js +3 -9
  87. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_variables.js.map +1 -1
  88. package/build/esm/packages/aurora/src/components/color_picker/components/current_color_preview.js +1 -2
  89. package/build/esm/packages/aurora/src/components/color_picker/components/current_color_preview.js.map +1 -1
  90. package/build/esm/packages/aurora/src/components/color_picker/components/pure_color_picker.js +5 -6
  91. package/build/esm/packages/aurora/src/components/color_picker/components/pure_color_picker.js.map +1 -1
  92. package/build/esm/packages/aurora/src/components/color_picker/hooks/setup_color_picker.d.ts +12 -12
  93. package/build/esm/packages/aurora/src/components/color_picker/hooks/setup_color_picker.js +67 -92
  94. package/build/esm/packages/aurora/src/components/color_picker/hooks/setup_color_picker.js.map +1 -1
  95. package/build/esm/packages/aurora/src/components/controls/color_picker_control/color_picker_control.js +3 -3
  96. package/build/esm/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control.d.ts +4 -1
  97. package/build/esm/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control.js +8 -6
  98. package/build/esm/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control.js.map +1 -1
  99. package/build/esm/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control_types.d.ts +1 -1
  100. package/build/esm/packages/aurora/src/components/image_picker/image_picker.js +5 -5
  101. package/build/esm/packages/aurora/src/components/input/input.js +7 -31
  102. package/build/esm/packages/aurora/src/components/input/input.js.map +1 -1
  103. package/build/esm/packages/aurora/src/components/input/input_variants.js +1 -1
  104. package/build/esm/packages/aurora/src/components/modal/components/modals_wrapper.d.ts +1 -5
  105. package/build/esm/packages/aurora/src/components/modal/components/modals_wrapper.js +2 -6
  106. package/build/esm/packages/aurora/src/components/modal/components/modals_wrapper.js.map +1 -1
  107. package/build/esm/packages/aurora/src/components/modal/modals_manager.d.ts +0 -1
  108. package/build/esm/packages/aurora/src/components/modal/modals_manager.js +2 -5
  109. package/build/esm/packages/aurora/src/components/modal/modals_manager.js.map +1 -1
  110. package/build/esm/packages/aurora/src/components/values_syncer/values_syncer.d.ts +1 -1
  111. package/build/esm/packages/aurora/src/components/values_syncer/values_syncer.js +70 -48
  112. package/build/esm/packages/aurora/src/components/values_syncer/values_syncer.js.map +1 -1
  113. package/build/esm/packages/aurora/src/components/values_syncer/values_syncer_types.d.ts +8 -7
  114. package/package.json +1 -1
@@ -14,13 +14,14 @@ var ValuesSyncerControl = function ValuesSyncerControl(_ref) {
14
14
  errors = _ref.errors,
15
15
  firstControl = _ref.firstControl,
16
16
  secondControl = _ref.secondControl,
17
- initialFirstValue = _ref.initialFirstValue,
18
- initialSecondValue = _ref.initialSecondValue,
17
+ firstValue = _ref.firstValue,
18
+ secondValue = _ref.secondValue,
19
19
  isLocked = _ref.isLocked,
20
20
  onLock = _ref.onLock,
21
21
  onChange = _ref.onChange,
22
22
  disabled = _ref.disabled,
23
- helperText = _ref.helperText;
23
+ helperText = _ref.helperText,
24
+ className = _ref.className;
24
25
  return /*#__PURE__*/React.createElement(Control, {
25
26
  classname: "aurora-flex-col"
26
27
  }, label ? (/*#__PURE__*/React.createElement(Label, {
@@ -29,11 +30,12 @@ var ValuesSyncerControl = function ValuesSyncerControl(_ref) {
29
30
  }, label)) : null, /*#__PURE__*/React.createElement(ValuesSyncer, {
30
31
  firstControl: firstControl,
31
32
  secondControl: secondControl,
32
- initialFirstValue: initialFirstValue,
33
- initialSecondValue: initialSecondValue,
33
+ firstValue: firstValue,
34
+ secondValue: secondValue,
34
35
  isLocked: isLocked,
35
36
  onLock: onLock,
36
- onChange: onChange
37
+ onChange: onChange,
38
+ className: className
37
39
  }), helperText ? /*#__PURE__*/React.createElement(HelperText, {
38
40
  color: disabled ? CSS_TEXT_COLOR_TOKENS.subtleLight : undefined
39
41
  }, helperText) : null, errors ? /*#__PURE__*/React.createElement(ErrorList, {
@@ -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;"}
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;"}
@@ -1,6 +1,6 @@
1
1
  import { TValuesSyncerProps } from "../../values_syncer/values_syncer_types";
2
2
  import React from 'react';
3
- export declare type TValuesSyncerControlProps = TValuesSyncerProps & {
3
+ export declare type TValuesSyncerControlProps<T> = TValuesSyncerProps<T> & {
4
4
  label?: string | React.ReactNode;
5
5
  required?: boolean;
6
6
  tooltip?: string | React.ReactNode;
@@ -59,9 +59,6 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
59
59
  imageSize = _useState2[0],
60
60
  setImageSize = _useState2[1];
61
61
  var acceptFiles = getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
62
- useEffect(function () {
63
- onImageSizeUpdated === null || onImageSizeUpdated === void 0 ? void 0 : onImageSizeUpdated(imageSize);
64
- }, [imageSize]);
65
62
  useEffect(function () {
66
63
  initialFile && setImageSizeBasedOnUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl);
67
64
  }, [initialFile]);
@@ -77,10 +74,12 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
77
74
  };
78
75
  var setImageSizeBasedOnUrl = function setImageSizeBasedOnUrl(fileUrl) {
79
76
  createImageFromUrl(fileUrl).then(function (image) {
80
- setImageSize({
77
+ var size = {
81
78
  width: image.naturalWidth,
82
79
  height: image.naturalHeight
83
- });
80
+ };
81
+ setImageSize(size);
82
+ onImageSizeUpdated === null || onImageSizeUpdated === void 0 ? void 0 : onImageSizeUpdated(size);
84
83
  });
85
84
  };
86
85
  var createImageFromUrl = /*#__PURE__*/function () {
@@ -108,6 +107,7 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
108
107
  var handleOnFileDelete = function handleOnFileDelete() {
109
108
  onFileDelete();
110
109
  setImageSize(undefined);
110
+ onImageSizeUpdated === null || onImageSizeUpdated === void 0 ? void 0 : onImageSizeUpdated(undefined);
111
111
  };
112
112
  return /*#__PURE__*/React.createElement("div", {
113
113
  className: "aurora-mb-1"
@@ -1,5 +1,5 @@
1
- import React, { useRef, useState, useEffect } from 'react';
2
- import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
1
+ import React from 'react';
2
+ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
3
3
  import { cn } from '../../utilities/cn.js';
4
4
  import { inputVariants } from './input_variants.js';
5
5
 
@@ -22,24 +22,6 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
22
22
  onKeyDown = _ref.onKeyDown,
23
23
  onKeyUp = _ref.onKeyUp,
24
24
  props = _objectWithoutProperties(_ref, _excluded);
25
- var preElRef = useRef(null);
26
- var postElRef = useRef(null);
27
- var _useState = useState(''),
28
- _useState2 = _slicedToArray(_useState, 2),
29
- preElWidth = _useState2[0],
30
- setPreElWidth = _useState2[1];
31
- var _useState3 = useState(''),
32
- _useState4 = _slicedToArray(_useState3, 2),
33
- postElWidth = _useState4[0],
34
- setPostElWidth = _useState4[1];
35
- useEffect(function () {
36
- if (preElRef.current) {
37
- setPreElWidth((Math.round(preElRef.current.getBoundingClientRect().width) + 8).toString());
38
- }
39
- if (postElRef.current) {
40
- setPostElWidth((Math.round(postElRef.current.getBoundingClientRect().width) + 8).toString());
41
- }
42
- }, [preElement, postElement]);
43
25
  return /*#__PURE__*/React.createElement("div", {
44
26
  className: cn(inputVariants(), {
45
27
  'aurora-border-danger aurora-border-2': !!(errors !== null && errors !== void 0 && errors.length),
@@ -47,8 +29,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
47
29
  'aurora-appearance-none': type === 'number'
48
30
  })
49
31
  }, preElement && (/*#__PURE__*/React.createElement("div", {
50
- ref: preElRef,
51
- className: 'aurora-absolute aurora-flex aurora-h-full aurora-items-center aurora-pointer-events-none aurora-pl-2'
32
+ className: 'aurora-flex aurora-h-full aurora-items-center aurora-pointer-events-none aurora-pl-2'
52
33
  }, preElement)), /*#__PURE__*/React.createElement("input", _objectSpread2(_objectSpread2({}, props), {}, {
53
34
  ref: ref,
54
35
  id: id,
@@ -62,15 +43,10 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
62
43
  onKeyDown: onKeyDown,
63
44
  onKeyUp: onKeyUp,
64
45
  type: type,
65
- className: cn('aurora-h-[40px] aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-px-3 aurora-rounded-6', className),
66
- style: {
67
- paddingLeft: preElWidth ? "".concat(preElWidth, "px") : '',
68
- paddingRight: postElWidth ? "".concat(postElWidth, "px") : ''
69
- }
70
- })), postElement && (/*#__PURE__*/React.createElement("div", {
71
- ref: postElRef,
72
- className: "aurora-absolute aurora-flex aurora-h-full aurora-right-0 aurora-pr-2 aurora-items-center"
73
- }, postElement)));
46
+ className: cn('aurora-h-[40px] aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-px-2 aurora-rounded-6', className)
47
+ })), postElement && /*#__PURE__*/React.createElement("div", {
48
+ className: "aurora-flex aurora-h-full aurora-right-0 aurora-pr-2 aurora-items-center"
49
+ }, postElement));
74
50
  });
75
51
  Input.displayName = 'Input';
76
52
 
@@ -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;"}
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,6 +1,6 @@
1
1
  import { cva } from '../../../../../external/class-variance-authority/dist/index.mjs.js';
2
2
 
3
- var inputVariants = cva('aurora-relative aurora-flex aurora-rounded-6 focus aurora-border aurora-bg aurora-text-s aurora-placeholder-neutral-500 aurora-text hover:aurora-border-strong active:aurora-border-active disabled:aurora-opacity-50 aurora-w-full');
3
+ var inputVariants = cva('aurora-relative aurora-flex aurora-items-center aurora-rounded-6 focus aurora-border aurora-bg aurora-text-s aurora-placeholder-neutral-500 aurora-text hover:aurora-border-strong active:aurora-border-active disabled:aurora-opacity-50 aurora-w-full');
4
4
 
5
5
  export { inputVariants };
6
6
  //# sourceMappingURL=input_variants.js.map
@@ -1,6 +1,2 @@
1
1
  import React from 'react';
2
- interface IModalsWrapperProps {
3
- rootElementSelector?: string;
4
- }
5
- export declare const ModalsWrapper: React.FC<IModalsWrapperProps>;
6
- export {};
2
+ export declare const ModalsWrapper: React.FC;
@@ -4,9 +4,7 @@ import { createPortal } from 'react-dom';
4
4
  import { MODALS_WRAPPER_BACKDROP_FADE_DURATION, MODALS_CONTENT_ID } from '../modal_constants.js';
5
5
  import { useModalsContext } from '../hooks/use_modals_context.js';
6
6
 
7
- var ModalsWrapper = function ModalsWrapper(_ref) {
8
- var _ref$rootElementSelec = _ref.rootElementSelector,
9
- rootElementSelector = _ref$rootElementSelec === void 0 ? '#new-sve' : _ref$rootElementSelec;
7
+ var ModalsWrapper = function ModalsWrapper() {
10
8
  var _useState = useState(false),
11
9
  _useState2 = _slicedToArray(_useState, 2),
12
10
  showWrapper = _useState2[0],
@@ -17,7 +15,6 @@ var ModalsWrapper = function ModalsWrapper(_ref) {
17
15
  setVisibleClass = _useState4[1];
18
16
  var _useModalsContext = useModalsContext(),
19
17
  openedModals = _useModalsContext.openedModals;
20
- var rootElement = document.querySelector(rootElementSelector);
21
18
  useEffect(function () {
22
19
  var showWrapperTimeout;
23
20
  if (openedModals.length) {
@@ -33,7 +30,6 @@ var ModalsWrapper = function ModalsWrapper(_ref) {
33
30
  return clearTimeout(showWrapperTimeout);
34
31
  };
35
32
  }, [openedModals]);
36
- if (!rootElement) return null;
37
33
  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(React.Fragment, null, showWrapper && (/*#__PURE__*/React.createElement("div", {
38
34
  className: "aurora-fixed aurora-flex aurora-items-center aurora-justify-center aurora-top-0 aurora-left-0 aurora-w-full aurora-h-full aurora-z-[1000] aurora-p-4"
39
35
  }, /*#__PURE__*/React.createElement("div", {
@@ -41,7 +37,7 @@ var ModalsWrapper = function ModalsWrapper(_ref) {
41
37
  }), /*#__PURE__*/React.createElement("div", {
42
38
  id: MODALS_CONTENT_ID,
43
39
  className: "aurora-flex aurora-items-center aurora-justify-center aurora-z-30"
44
- })))), rootElement);
40
+ })))), document.body);
45
41
  };
46
42
 
47
43
  export { ModalsWrapper };
@@ -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;"}
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;"}
@@ -1,6 +1,5 @@
1
1
  import React, { ReactNode } from 'react';
2
2
  interface IModalsManagerProps {
3
- rootElementSelector?: string;
4
3
  children: ReactNode;
5
4
  }
6
5
  export declare const ModalsManager: React.FC<IModalsManagerProps>;
@@ -4,8 +4,7 @@ import { ModalsWrapper } from './components/modals_wrapper.js';
4
4
  import useModals from './hooks/use_modals.js';
5
5
 
6
6
  var ModalsManager = function ModalsManager(_ref) {
7
- var rootElementSelector = _ref.rootElementSelector,
8
- children = _ref.children;
7
+ var children = _ref.children;
9
8
  var _useModals = useModals(),
10
9
  modalsManagerContainerSelector = _useModals.modalsManagerContainerSelector,
11
10
  addModal = _useModals.addModal,
@@ -29,9 +28,7 @@ var ModalsManager = function ModalsManager(_ref) {
29
28
  }, [modalsManagerContainerSelector, addModal, updateModal, getModal, showModal, hideModal, hideAllModals, openedModals]);
30
29
  return /*#__PURE__*/React.createElement(ModalsManagerContext.Provider, {
31
30
  value: value
32
- }, /*#__PURE__*/React.createElement(ModalsWrapper, {
33
- rootElementSelector: rootElementSelector
34
- }), children);
31
+ }, /*#__PURE__*/React.createElement(ModalsWrapper, null), children);
35
32
  };
36
33
 
37
34
  export { ModalsManager };
@@ -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;"}
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;"}
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
2
  import { TValuesSyncerProps } from './values_syncer_types';
3
- export declare const ValuesSyncer: React.FC<TValuesSyncerProps>;
3
+ export declare const ValuesSyncer: <T>({ firstControl, secondControl, firstValue, secondValue, isLocked, onLock, onChange, className }: TValuesSyncerProps<T>) => React.JSX.Element;
@@ -1,4 +1,4 @@
1
- import React, { useState, useEffect } from 'react';
1
+ import React, { useState, useRef, useCallback, useEffect } from 'react';
2
2
  import { slicedToArray as _slicedToArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
3
3
  import { CSS_COLOR_TOKENS_VALUES } from '../../constants/css_tokens/css_color_tokens_values.js';
4
4
  import { cn } from '../../utilities/cn.js';
@@ -9,73 +9,95 @@ import { LockUnlockLineIcon } from '../../assets/icons/lock_unlock_icon.js';
9
9
  var ValuesSyncer = function ValuesSyncer(_ref) {
10
10
  var firstControl = _ref.firstControl,
11
11
  secondControl = _ref.secondControl,
12
- initialFirstValue = _ref.initialFirstValue,
13
- initialSecondValue = _ref.initialSecondValue,
14
- _ref$isLocked = _ref.isLocked,
15
- isLocked = _ref$isLocked === void 0 ? false : _ref$isLocked,
12
+ firstValue = _ref.firstValue,
13
+ secondValue = _ref.secondValue,
14
+ isLocked = _ref.isLocked,
16
15
  onLock = _ref.onLock,
17
- onChange = _ref.onChange;
18
- var _useState = useState(isLocked),
16
+ onChange = _ref.onChange,
17
+ className = _ref.className;
18
+ var _useState = useState(isLocked !== null && isLocked !== void 0 ? isLocked : false),
19
19
  _useState2 = _slicedToArray(_useState, 2),
20
20
  locked = _useState2[0],
21
21
  setLocked = _useState2[1];
22
- var _useState3 = useState(initialFirstValue),
23
- _useState4 = _slicedToArray(_useState3, 2),
24
- firstControlValue = _useState4[0],
25
- setFirstControlValue = _useState4[1];
26
- var _useState5 = useState(initialSecondValue),
27
- _useState6 = _slicedToArray(_useState5, 2),
28
- secondControlValue = _useState6[0],
29
- setSecondControlValue = _useState6[1];
30
- useEffect(function () {
31
- onLock === null || onLock === void 0 ? void 0 : onLock(locked);
22
+ var firstValueRef = useRef(firstValue);
23
+ var secondValueRef = useRef(secondValue);
24
+ var lockedRef = useRef(locked);
25
+ var handleFirstControlChange = useCallback(function (value) {
26
+ firstValueRef.current = value;
32
27
  if (locked) {
33
- setSecondControlValue(firstControlValue);
28
+ onChange === null || onChange === void 0 ? void 0 : onChange({
29
+ first: value,
30
+ second: value,
31
+ isLocked: locked
32
+ });
33
+ } else {
34
+ onChange === null || onChange === void 0 ? void 0 : onChange({
35
+ first: value,
36
+ second: secondValue,
37
+ isLocked: locked
38
+ });
34
39
  }
35
- }, [locked]);
36
- useEffect(function () {
37
- setFirstControlValue(initialFirstValue);
38
- setSecondControlValue(initialSecondValue);
39
- }, [initialFirstValue, initialSecondValue]);
40
- useEffect(function () {
41
- onChange === null || onChange === void 0 ? void 0 : onChange({
42
- first: firstControlValue,
43
- second: secondControlValue,
44
- isLocked: locked
45
- });
46
- }, [firstControlValue, secondControlValue, locked]);
47
- var handleFirstControlChange = function handleFirstControlChange(value) {
48
- setFirstControlValue(value);
40
+ }, [locked, onChange, secondValue]);
41
+ var handleSecondControlChange = useCallback(function (value) {
42
+ secondValueRef.current = value;
49
43
  if (locked) {
50
- setSecondControlValue(value);
44
+ onChange === null || onChange === void 0 ? void 0 : onChange({
45
+ first: value,
46
+ second: value,
47
+ isLocked: locked
48
+ });
49
+ } else {
50
+ onChange === null || onChange === void 0 ? void 0 : onChange({
51
+ first: firstValue,
52
+ second: value,
53
+ isLocked: locked
54
+ });
51
55
  }
52
- };
53
- var handleSecondControlChange = function handleSecondControlChange(value) {
54
- setSecondControlValue(value);
55
- if (locked) {
56
- setFirstControlValue(value);
56
+ }, [firstValue, locked, onChange]);
57
+ var handleLockedChange = useCallback(function (newLock) {
58
+ var triggerOnLock = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
59
+ setLocked(newLock);
60
+ lockedRef.current = newLock;
61
+ if (triggerOnLock && onLock) onLock(newLock);
62
+ if (newLock) {
63
+ onChange === null || onChange === void 0 ? void 0 : onChange({
64
+ first: firstValue,
65
+ second: firstValue,
66
+ isLocked: newLock
67
+ });
57
68
  }
58
- };
59
- var toggleLock = function toggleLock() {
60
- return setLocked(function (prev) {
61
- return !prev;
62
- });
63
- };
69
+ }, [firstValue, onChange, onLock]);
70
+ // Reagujemy na zmiany wszystkiego co przychodzi z gory
71
+ // zebysmy nigdy nie skonczyli z nielegalnym stanem -> first !== second && locked
72
+ useEffect(function () {
73
+ if (isLocked === undefined || isLocked === lockedRef.current) return;
74
+ handleLockedChange(isLocked, false);
75
+ }, [isLocked, handleLockedChange]);
76
+ useEffect(function () {
77
+ if (firstValue === firstValueRef.current && secondValue === secondValueRef.current) return;
78
+ firstValueRef.current = firstValue;
79
+ secondValueRef.current = secondValue;
80
+ if (firstValue !== secondValue) {
81
+ handleLockedChange(false);
82
+ }
83
+ }, [firstValue, secondValue, handleLockedChange]);
64
84
  return /*#__PURE__*/React.createElement(Stack, {
65
85
  spacing: "3",
66
86
  align: "end",
67
- className: "aurora-items-end"
68
- }, firstControl(firstControlValue, handleFirstControlChange), /*#__PURE__*/React.createElement("button", {
87
+ className: cn('aurora-items-end', className)
88
+ }, firstControl(firstValue, handleFirstControlChange), /*#__PURE__*/React.createElement("button", {
69
89
  type: "button",
70
90
  className: cn(locked ? 'aurora-bg-active aurora-rounded-4' : 'aurora-bg-subtle', 'aurora-h-6 aurora-w-6 aurora-p-1 aurora-mb-2 aurora-rounded-4 focus'),
71
- onClick: toggleLock
91
+ onClick: function onClick() {
92
+ return handleLockedChange(!locked);
93
+ }
72
94
  }, locked ? (/*#__PURE__*/React.createElement(LockLineIcon, {
73
95
  className: "aurora-h-4 aurora-w-4",
74
96
  color: CSS_COLOR_TOKENS_VALUES.neutral900
75
97
  })) : (/*#__PURE__*/React.createElement(LockUnlockLineIcon, {
76
98
  className: "aurora-h-4 aurora-w-4",
77
99
  color: CSS_COLOR_TOKENS_VALUES.neutral600
78
- }))), secondControl(secondControlValue, handleSecondControlChange));
100
+ }))), secondControl(secondValue, handleSecondControlChange));
79
101
  };
80
102
 
81
103
  export { ValuesSyncer };
@@ -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;"}
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,14 +1,15 @@
1
1
  import React from 'react';
2
- export declare type TValuesSyncerProps = {
3
- firstControl: (value: unknown, setValue: (value: unknown) => void) => React.ReactNode;
4
- secondControl: (value: unknown, setValue: (value: unknown) => void) => React.ReactNode;
5
- initialFirstValue?: unknown;
6
- initialSecondValue?: unknown;
2
+ export declare type TValuesSyncerProps<T> = {
3
+ firstControl: (value: T, setValue: (value: T) => void) => React.ReactNode;
4
+ secondControl: (value: T, setValue: (value: T) => void) => React.ReactNode;
5
+ firstValue: T;
6
+ secondValue: T;
7
7
  isLocked?: boolean;
8
8
  onLock?: (isLocked: boolean) => void;
9
9
  onChange?: (props: {
10
- first: unknown;
11
- second: unknown;
10
+ first: T;
11
+ second: T;
12
12
  isLocked: boolean;
13
13
  }) => void;
14
+ className?: string;
14
15
  };
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-286",
5
+ "version": "3.0.0-288",
6
6
  "description": "aurora",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",