@dreamcommerce/aurora 2.4.2-1 → 2.4.3-2

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 (35) hide show
  1. package/build/cjs/packages/aurora/src/components/dropdown/components/content.js +55 -15
  2. package/build/cjs/packages/aurora/src/components/dropdown/components/content.js.map +1 -1
  3. package/build/cjs/packages/aurora/src/components/loader/constants.js +6 -8
  4. package/build/cjs/packages/aurora/src/components/loader/constants.js.map +1 -1
  5. package/build/cjs/packages/aurora/src/components/loader/css_classes.js +0 -2
  6. package/build/cjs/packages/aurora/src/components/loader/css_classes.js.map +1 -1
  7. package/build/cjs/packages/aurora/src/components/tooltip/css_classes.js +10 -0
  8. package/build/cjs/packages/aurora/src/components/tooltip/css_classes.js.map +1 -0
  9. package/build/cjs/packages/aurora/src/components/tooltip/index.js +20 -14
  10. package/build/cjs/packages/aurora/src/components/tooltip/index.js.map +1 -1
  11. package/build/cjs/packages/aurora/src/css/loader/main.module.less.js +2 -2
  12. package/build/cjs/packages/aurora/src/css/tooltip/main.module.less.js +2 -2
  13. package/build/esm/packages/aurora/src/components/dropdown/components/content.js +55 -15
  14. package/build/esm/packages/aurora/src/components/dropdown/components/content.js.map +1 -1
  15. package/build/esm/packages/aurora/src/components/dropdown/types.d.ts +4 -0
  16. package/build/esm/packages/aurora/src/components/loader/constants.d.ts +6 -8
  17. package/build/esm/packages/aurora/src/components/loader/constants.js +7 -9
  18. package/build/esm/packages/aurora/src/components/loader/constants.js.map +1 -1
  19. package/build/esm/packages/aurora/src/components/loader/css_classes.d.ts +0 -1
  20. package/build/esm/packages/aurora/src/components/loader/css_classes.js +1 -2
  21. package/build/esm/packages/aurora/src/components/loader/css_classes.js.map +1 -1
  22. package/build/esm/packages/aurora/src/components/tooltip/css_classes.d.ts +2 -0
  23. package/build/esm/packages/aurora/src/components/tooltip/css_classes.js +5 -0
  24. package/build/esm/packages/aurora/src/components/tooltip/css_classes.js.map +1 -0
  25. package/build/esm/packages/aurora/src/components/tooltip/index.js +20 -14
  26. package/build/esm/packages/aurora/src/components/tooltip/index.js.map +1 -1
  27. package/build/esm/packages/aurora/src/components/tooltip/tooltip_types.d.ts +3 -3
  28. package/build/esm/packages/aurora/src/components/tooltip/tooltip_types.js +1 -0
  29. package/build/esm/packages/aurora/src/components/tooltip/tooltip_types.js.map +1 -1
  30. package/build/esm/packages/aurora/src/css/loader/main.module.less.js +2 -2
  31. package/build/esm/packages/aurora/src/css/tooltip/main.module.less.js +2 -2
  32. package/build/esm/packages/aurora/src/hooks/use_portal_child_position.d.ts +9 -0
  33. package/build/esm/packages/aurora/src/hooks/use_portal_child_position.js +25 -0
  34. package/build/esm/packages/aurora/src/hooks/use_portal_child_position.js.map +1 -0
  35. package/package.json +1 -1
package/build/cjs/packages/aurora/src/components/dropdown/components/content.js CHANGED
@@ -30,26 +30,38 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
30
30
  * @example
31
31
  * <Dropdown.Content> ... </Dropdown.Content>
32
32
  */
33
- const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children, arrowSide = 'left', portalContainer }) => {
33
+ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children, arrowSide = 'left', horizontalPosition = 'left', verticalPosition = 'bottom', wrapperWidth, cssClass, portalContainer }) => {
34
34
  const [t] = useTranslation.useTranslation();
35
35
  const contentRef = React.useRef(null);
36
36
  const { wrapperRef, toggleDropdown, isOpen, closeDropdown } = index.useDropdownContext();
37
37
  const [styles, setStyles] = React.useState({
38
- left: '0px',
39
38
  top: '0px',
40
39
  bottom: '0px',
40
+ left: '0px',
41
41
  zIndex: constants.DROPDOWN_Z_INDEX
42
42
  });
43
- const windowHeightMinusYOffset = window.innerHeight - window.pageYOffset;
44
- const checkIfIsOutsideBottomViewport = (elem) => {
45
- const bounding = elem.getBoundingClientRect();
46
- return bounding.bottom > windowHeightMinusYOffset;
43
+ const windowYScroll = window.scrollY;
44
+ const windowHeightMinusYOffset = window.innerHeight - windowYScroll;
45
+ const checkIfIsOutsideTopViewport = () => {
46
+ if (!contentRef.current)
47
+ return;
48
+ const bounding = contentRef.current.getBoundingClientRect();
49
+ return bounding.top <= 0;
50
+ };
51
+ const checkIfIsOutsideBottomViewport = () => {
52
+ if (!contentRef.current)
53
+ return;
54
+ const element = contentRef.current;
55
+ const elementHeight = element.getBoundingClientRect().height;
56
+ return elementHeight + element.offsetTop > window.innerHeight + windowYScroll;
47
57
  };
48
- const dropdownIsOutsideBottomViewport = contentRef.current && checkIfIsOutsideBottomViewport(contentRef.current);
58
+ const dropdownIsOutsideTopViewport = checkIfIsOutsideTopViewport();
59
+ const dropdownIsOutsideBottomViewport = checkIfIsOutsideBottomViewport();
49
60
  const contentClassName = classNames.classNames([
50
61
  css_classes.cssDropdownContent,
51
62
  arrowSide === 'right' && css_classes.cssDropdownArrowHorizontalDirectionRight,
52
- dropdownIsOutsideBottomViewport && css_classes.cssDropdownArrowVerticalDirectionBottom
63
+ dropdownIsOutsideBottomViewport && css_classes.cssDropdownArrowVerticalDirectionBottom,
64
+ cssClass
53
65
  ], main_module['default']);
54
66
  const screenWidthName = use_screen_detect.useScreenDetect();
55
67
  const refs = [contentRef];
@@ -62,22 +74,50 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
62
74
  }
63
75
  });
64
76
  React.useEffect(() => {
65
- if (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) {
77
+ if ((wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) && contentRef.current) {
66
78
  const { x, y, height } = wrapperRef.current.getBoundingClientRect();
79
+ const { width: contentWidth } = contentRef.current.getBoundingClientRect();
67
80
  const yOffset = 10;
68
81
  const { xModifier, yModifier } = utilities.getXYModifiersForNestedDropdowns(portalContainer === null || portalContainer === void 0 ? void 0 : portalContainer.current);
69
- const positionTop = height + y + yOffset - yModifier;
82
+ const positionTop = height + y + windowYScroll + yOffset - yModifier;
70
83
  const positionBottom = windowHeightMinusYOffset - y + yOffset;
71
84
  const positionLeft = x - xModifier;
72
85
  const isInModal = utilities.isChildOfModal(wrapperRef);
73
86
  const zIndex = isInModal ? constants.DROPDOWN_ON_MODAL_Z_INDEX : constants.DROPDOWN_Z_INDEX;
74
- const topPositionValue = !dropdownIsOutsideBottomViewport ? `${positionTop}px` : 'auto';
75
- const bottomPositionValue = dropdownIsOutsideBottomViewport ? `${positionBottom}px` : 'auto';
87
+ let topPositionValue = '';
88
+ let bottomPositionValue = '';
89
+ let leftPositionValue = '';
90
+ let leftPositionStickedToRightBorderValue;
91
+ if (horizontalPosition === 'right' && !wrapperWidth) {
92
+ throw new Error(`To use horizontal right position you must set "wrapperWidth" value`);
93
+ }
94
+ if (wrapperWidth) {
95
+ leftPositionStickedToRightBorderValue = x + wrapperWidth - contentWidth;
96
+ }
97
+ horizontalPosition === 'left'
98
+ ? (leftPositionValue = `${positionLeft}px`)
99
+ : (leftPositionValue = `${leftPositionStickedToRightBorderValue}px`);
100
+ if (verticalPosition === 'top') {
101
+ topPositionValue = 'auto';
102
+ bottomPositionValue = `${positionBottom}px`;
103
+ if (dropdownIsOutsideTopViewport) {
104
+ topPositionValue = `${positionTop}px`;
105
+ bottomPositionValue = 'auto';
106
+ }
107
+ }
108
+ if (verticalPosition === 'bottom') {
109
+ topPositionValue = `${positionTop}px`;
110
+ bottomPositionValue = 'auto';
111
+ if (dropdownIsOutsideBottomViewport) {
112
+ topPositionValue = 'auto';
113
+ bottomPositionValue = `${positionBottom}px`;
114
+ }
115
+ }
76
116
  screenWidthName === responsive_breakpoints.SCREEN_XS
77
- ? setStyles({ left: `0px`, top: `0px`, bottom: 'auto', zIndex })
78
- : setStyles({ left: `${positionLeft}px`, top: topPositionValue, bottom: bottomPositionValue, zIndex });
117
+ ? setStyles({ top: `0px`, bottom: 'auto', left: `0px`, zIndex })
118
+ : setStyles({ top: topPositionValue, bottom: bottomPositionValue, left: leftPositionValue, zIndex });
79
119
  }
80
- }, [portalContainer, screenWidthName, wrapperRef, isOpen, dropdownIsOutsideBottomViewport]);
120
+ }, [portalContainer, screenWidthName, wrapperRef, isOpen, dropdownIsOutsideTopViewport, dropdownIsOutsideBottomViewport, wrapperWidth]);
81
121
  React.useEffect(() => {
82
122
  var _a;
83
123
  if (!(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) || !isOpen)
package/build/cjs/packages/aurora/src/components/dropdown/components/content.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/build/cjs/packages/aurora/src/components/loader/constants.js CHANGED
@@ -5,16 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var css_classes = require('./css_classes.js');
6
6
 
7
7
  const LOADER_SIZE = {
8
- xs: 'xs',
9
- s: 's',
10
- l: 'l',
11
- xl: 'xl'
8
+ small: 'small',
9
+ large: 'large',
10
+ extraLarge: 'extraLarge'
12
11
  };
13
12
  const LOADER_SIZE_CSS_CLASS_MAP = {
14
- [LOADER_SIZE.xs]: css_classes.cssLoaderSizeExtraSmall,
15
- [LOADER_SIZE.s]: css_classes.cssLoaderSizeSmall,
16
- [LOADER_SIZE.l]: css_classes.cssLoaderSizeLarge,
17
- [LOADER_SIZE.xl]: css_classes.cssLoaderSizeExtraLarge
13
+ [LOADER_SIZE.small]: css_classes.cssLoaderSizeSmall,
14
+ [LOADER_SIZE.large]: css_classes.cssLoaderSizeLarge,
15
+ [LOADER_SIZE.extraLarge]: css_classes.cssLoaderSizeExtraLarge
18
16
  };
19
17
 
20
18
  exports.LOADER_SIZE = LOADER_SIZE;
package/build/cjs/packages/aurora/src/components/loader/constants.js.map CHANGED
@@ -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;"}
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;"}
package/build/cjs/packages/aurora/src/components/loader/css_classes.js CHANGED
@@ -3,14 +3,12 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const cssLoader = 'loader';
6
- const cssLoaderSizeExtraSmall = `${cssLoader}_xs`;
7
6
  const cssLoaderSizeSmall = `${cssLoader}_s`;
8
7
  const cssLoaderSizeLarge = `${cssLoader}_l`;
9
8
  const cssLoaderSizeExtraLarge = `${cssLoader}_xl`;
10
9
 
11
10
  exports.cssLoader = cssLoader;
12
11
  exports.cssLoaderSizeExtraLarge = cssLoaderSizeExtraLarge;
13
- exports.cssLoaderSizeExtraSmall = cssLoaderSizeExtraSmall;
14
12
  exports.cssLoaderSizeLarge = cssLoaderSizeLarge;
15
13
  exports.cssLoaderSizeSmall = cssLoaderSizeSmall;
16
14
  //# sourceMappingURL=css_classes.js.map
package/build/cjs/packages/aurora/src/components/loader/css_classes.js.map CHANGED
@@ -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;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/aurora/src/components/tooltip/css_classes.js ADDED
@@ -0,0 +1,10 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const cssTooltip = 'tooltip';
6
+ const cssTooltipContainer = `${cssTooltip}__container`;
7
+
8
+ exports.cssTooltip = cssTooltip;
9
+ exports.cssTooltipContainer = cssTooltipContainer;
10
+ //# sourceMappingURL=css_classes.js.map
package/build/cjs/packages/aurora/src/components/tooltip/css_classes.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/aurora/src/components/tooltip/index.js CHANGED
@@ -3,26 +3,32 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
- var classNames = require('../../utilities/styles/classNames.js');
7
- var use_fixed_child_position = require('../../hooks/use_fixed_child_position.js');
6
+ var index = require('../dropdown/context/index.js');
7
+ var use_toggle = require('../dropdown/hooks/use_toggle.js');
8
+ var index$1 = require('../dropdown/index.js');
9
+ var css_classes = require('./css_classes.js');
8
10
  var main_module = require('../../css/tooltip/main.module.less.js');
9
11
 
10
12
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
13
 
12
14
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
15
 
14
- const Tooltip = ({ fixed, left, top, disabled, children, content }) => {
15
- const className = classNames.classNames(['tooltip', left && 'tooltip_left', top && 'tooltip_top'], main_module['default']);
16
- const childRef = React.useRef(null);
17
- const { onMouseEnter, style } = use_fixed_child_position.useFixedChildPosition({
18
- useFixed: fixed,
19
- hPosition: left ? 'left' : 'right',
20
- vPosition: top ? 'top' : 'bottom',
21
- childRef
22
- });
23
- return (React__default['default'].createElement("span", { className: className, onMouseEnter: onMouseEnter },
24
- children,
25
- !disabled && (React__default['default'].createElement("div", { style: style, ref: childRef, className: main_module['default']['tooltip__container'] }, content))));
16
+ const Tooltip = ({ left, top, disabled, onToggle, children, content }) => {
17
+ var _a;
18
+ const wrapperRef = React.useRef(null);
19
+ const [isOpen, toggleDropdown] = use_toggle.useToggle(false, onToggle);
20
+ const value = React__default['default'].useMemo(() => ({ wrapperRef, isOpen, toggleDropdown }), [isOpen, toggleDropdown]);
21
+ const wrapperWidth = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
22
+ const handleOnMouseEnter = () => {
23
+ toggleDropdown();
24
+ };
25
+ const handleOnMouseLeave = () => {
26
+ toggleDropdown();
27
+ };
28
+ return (React__default['default'].createElement(index.DropdownContext.Provider, { value: value },
29
+ React__default['default'].createElement("span", { className: main_module['default'][css_classes.cssTooltip], ref: wrapperRef, onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave },
30
+ children,
31
+ !disabled && (React__default['default'].createElement(index$1['default'].Content, { cssClass: main_module['default'][css_classes.cssTooltipContainer], horizontalPosition: left ? 'left' : 'right', verticalPosition: top ? 'top' : 'bottom', wrapperWidth: wrapperWidth }, content)))));
26
32
  };
27
33
 
28
34
  exports.default = Tooltip;
package/build/cjs/packages/aurora/src/components/tooltip/index.js.map CHANGED
@@ -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;"}
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;"}
package/build/cjs/packages/aurora/src/css/loader/main.module.less.js CHANGED
@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var styleInject_es = require('../../../../../external/style-inject/dist/style-inject.es.js');
6
6
 
7
- var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_loader__2k0x_ {\n display: inline-block;\n vertical-align: middle;\n width: 16px;\n height: 16px;\n border-style: solid;\n border-width: 1.5px;\n border-color: #ececec #ececec #ececec #3c83ec;\n border-radius: 50%;\n transform: translateZ(0);\n -webkit-animation: main-module_load__1yy35 1.1s infinite linear;\n animation: main-module_load__1yy35 1.1s infinite linear;\n}\n.main-module_loader_xs__3JXYp {\n width: 8px;\n height: 8px;\n}\n.main-module_loader_s__3DDj4 {\n width: 12px;\n height: 12px;\n}\n.main-module_loader_l__1X43e {\n width: 24px;\n height: 24px;\n}\n.main-module_loader_xl__2hfeE {\n width: 30px;\n height: 30px;\n}\n@-webkit-keyframes main-module_load__1yy35 {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n@keyframes main-module_load__1yy35 {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n";
8
- var cssClasses = {"loader":"main-module_loader__2k0x_","load":"main-module_load__1yy35","loader_xs":"main-module_loader_xs__3JXYp","loader_s":"main-module_loader_s__3DDj4","loader_l":"main-module_loader_l__1X43e","loader_xl":"main-module_loader_xl__2hfeE"};
7
+ var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_loader__2k0x_ {\n display: inline-block;\n vertical-align: middle;\n width: 16px;\n height: 16px;\n border-style: solid;\n border-width: 1.5px;\n border-color: #ececec #ececec #ececec #3c83ec;\n border-radius: 50%;\n transform: translateZ(0);\n -webkit-animation: main-module_load__1yy35 1.1s infinite linear;\n animation: main-module_load__1yy35 1.1s infinite linear;\n}\n.main-module_loader_s__3DDj4 {\n width: 12px;\n height: 12px;\n}\n.main-module_loader_l__1X43e {\n width: 24px;\n height: 24px;\n}\n.main-module_loader_xl__2hfeE {\n width: 30px;\n height: 30px;\n}\n@-webkit-keyframes main-module_load__1yy35 {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n@keyframes main-module_load__1yy35 {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n";
8
+ var cssClasses = {"loader":"main-module_loader__2k0x_","load":"main-module_load__1yy35","loader_s":"main-module_loader_s__3DDj4","loader_l":"main-module_loader_l__1X43e","loader_xl":"main-module_loader_xl__2hfeE"};
9
9
  styleInject_es['default'](css_248z);
10
10
 
11
11
  exports.default = cssClasses;
package/build/cjs/packages/aurora/src/css/tooltip/main.module.less.js CHANGED
@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var styleInject_es = require('../../../../../external/style-inject/dist/style-inject.es.js');
6
6
 
7
- var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_tooltip__2-uBX {\n position: relative;\n}\n.main-module_tooltip__2-uBX:hover .main-module_tooltip__container__1T35Q {\n display: block;\n}\n.main-module_tooltip_left__27ULt .main-module_tooltip__container__1T35Q {\n left: 1rem;\n right: auto;\n}\n.main-module_tooltip_top__3xSwK .main-module_tooltip__container__1T35Q {\n top: auto;\n bottom: 150%;\n}\n.main-module_tooltip__container__1T35Q {\n position: absolute;\n display: none;\n right: 1rem;\n top: 125%;\n z-index: 4;\n white-space: nowrap;\n padding: 0.5rem;\n color: #ffffff;\n font-size: 12px;\n text-align: center;\n background-color: #2d3748;\n box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);\n border-radius: 3px;\n}\n";
8
- var cssClasses = {"tooltip":"main-module_tooltip__2-uBX","tooltip__container":"main-module_tooltip__container__1T35Q","tooltip_left":"main-module_tooltip_left__27ULt","tooltip_top":"main-module_tooltip_top__3xSwK"};
7
+ var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_tooltip__container__1T35Q {\n padding-right: 0.5rem;\n padding-left: 0.5rem;\n white-space: nowrap;\n color: #ffffff;\n font-size: 12px;\n text-align: center;\n background-color: #2d3748;\n}\n.main-module_tooltip__container__1T35Q::before {\n display: none;\n}\n";
8
+ var cssClasses = {"tooltip__container":"main-module_tooltip__container__1T35Q"};
9
9
  styleInject_es['default'](css_248z);
10
10
 
11
11
  exports.default = cssClasses;
package/build/esm/packages/aurora/src/components/dropdown/components/content.js CHANGED
@@ -22,26 +22,38 @@ import { UiDomUtils } from '@dreamcommerce/utilities';
22
22
  * @example
23
23
  * <Dropdown.Content> ... </Dropdown.Content>
24
24
  */
25
- const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children, arrowSide = 'left', portalContainer }) => {
25
+ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children, arrowSide = 'left', horizontalPosition = 'left', verticalPosition = 'bottom', wrapperWidth, cssClass, portalContainer }) => {
26
26
  const [t] = useTranslation();
27
27
  const contentRef = useRef(null);
28
28
  const { wrapperRef, toggleDropdown, isOpen, closeDropdown } = useDropdownContext();
29
29
  const [styles, setStyles] = useState({
30
- left: '0px',
31
30
  top: '0px',
32
31
  bottom: '0px',
32
+ left: '0px',
33
33
  zIndex: DROPDOWN_Z_INDEX
34
34
  });
35
- const windowHeightMinusYOffset = window.innerHeight - window.pageYOffset;
36
- const checkIfIsOutsideBottomViewport = (elem) => {
37
- const bounding = elem.getBoundingClientRect();
38
- return bounding.bottom > windowHeightMinusYOffset;
35
+ const windowYScroll = window.scrollY;
36
+ const windowHeightMinusYOffset = window.innerHeight - windowYScroll;
37
+ const checkIfIsOutsideTopViewport = () => {
38
+ if (!contentRef.current)
39
+ return;
40
+ const bounding = contentRef.current.getBoundingClientRect();
41
+ return bounding.top <= 0;
42
+ };
43
+ const checkIfIsOutsideBottomViewport = () => {
44
+ if (!contentRef.current)
45
+ return;
46
+ const element = contentRef.current;
47
+ const elementHeight = element.getBoundingClientRect().height;
48
+ return elementHeight + element.offsetTop > window.innerHeight + windowYScroll;
39
49
  };
40
- const dropdownIsOutsideBottomViewport = contentRef.current && checkIfIsOutsideBottomViewport(contentRef.current);
50
+ const dropdownIsOutsideTopViewport = checkIfIsOutsideTopViewport();
51
+ const dropdownIsOutsideBottomViewport = checkIfIsOutsideBottomViewport();
41
52
  const contentClassName = classNames([
42
53
  cssDropdownContent,
43
54
  arrowSide === 'right' && cssDropdownArrowHorizontalDirectionRight,
44
- dropdownIsOutsideBottomViewport && cssDropdownArrowVerticalDirectionBottom
55
+ dropdownIsOutsideBottomViewport && cssDropdownArrowVerticalDirectionBottom,
56
+ cssClass
45
57
  ], cssClasses);
46
58
  const screenWidthName = useScreenDetect();
47
59
  const refs = [contentRef];
@@ -54,22 +66,50 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
54
66
  }
55
67
  });
56
68
  useEffect(() => {
57
- if (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) {
69
+ if ((wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) && contentRef.current) {
58
70
  const { x, y, height } = wrapperRef.current.getBoundingClientRect();
71
+ const { width: contentWidth } = contentRef.current.getBoundingClientRect();
59
72
  const yOffset = 10;
60
73
  const { xModifier, yModifier } = getXYModifiersForNestedDropdowns(portalContainer === null || portalContainer === void 0 ? void 0 : portalContainer.current);
61
- const positionTop = height + y + yOffset - yModifier;
74
+ const positionTop = height + y + windowYScroll + yOffset - yModifier;
62
75
  const positionBottom = windowHeightMinusYOffset - y + yOffset;
63
76
  const positionLeft = x - xModifier;
64
77
  const isInModal = isChildOfModal(wrapperRef);
65
78
  const zIndex = isInModal ? DROPDOWN_ON_MODAL_Z_INDEX : DROPDOWN_Z_INDEX;
66
- const topPositionValue = !dropdownIsOutsideBottomViewport ? `${positionTop}px` : 'auto';
67
- const bottomPositionValue = dropdownIsOutsideBottomViewport ? `${positionBottom}px` : 'auto';
79
+ let topPositionValue = '';
80
+ let bottomPositionValue = '';
81
+ let leftPositionValue = '';
82
+ let leftPositionStickedToRightBorderValue;
83
+ if (horizontalPosition === 'right' && !wrapperWidth) {
84
+ throw new Error(`To use horizontal right position you must set "wrapperWidth" value`);
85
+ }
86
+ if (wrapperWidth) {
87
+ leftPositionStickedToRightBorderValue = x + wrapperWidth - contentWidth;
88
+ }
89
+ horizontalPosition === 'left'
90
+ ? (leftPositionValue = `${positionLeft}px`)
91
+ : (leftPositionValue = `${leftPositionStickedToRightBorderValue}px`);
92
+ if (verticalPosition === 'top') {
93
+ topPositionValue = 'auto';
94
+ bottomPositionValue = `${positionBottom}px`;
95
+ if (dropdownIsOutsideTopViewport) {
96
+ topPositionValue = `${positionTop}px`;
97
+ bottomPositionValue = 'auto';
98
+ }
99
+ }
100
+ if (verticalPosition === 'bottom') {
101
+ topPositionValue = `${positionTop}px`;
102
+ bottomPositionValue = 'auto';
103
+ if (dropdownIsOutsideBottomViewport) {
104
+ topPositionValue = 'auto';
105
+ bottomPositionValue = `${positionBottom}px`;
106
+ }
107
+ }
68
108
  screenWidthName === SCREEN_XS
69
- ? setStyles({ left: `0px`, top: `0px`, bottom: 'auto', zIndex })
70
- : setStyles({ left: `${positionLeft}px`, top: topPositionValue, bottom: bottomPositionValue, zIndex });
109
+ ? setStyles({ top: `0px`, bottom: 'auto', left: `0px`, zIndex })
110
+ : setStyles({ top: topPositionValue, bottom: bottomPositionValue, left: leftPositionValue, zIndex });
71
111
  }
72
- }, [portalContainer, screenWidthName, wrapperRef, isOpen, dropdownIsOutsideBottomViewport]);
112
+ }, [portalContainer, screenWidthName, wrapperRef, isOpen, dropdownIsOutsideTopViewport, dropdownIsOutsideBottomViewport, wrapperWidth]);
73
113
  useEffect(() => {
74
114
  var _a;
75
115
  if (!(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) || !isOpen)
package/build/esm/packages/aurora/src/components/dropdown/components/content.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/build/esm/packages/aurora/src/components/dropdown/types.d.ts CHANGED
@@ -44,6 +44,10 @@ export interface IDropdownContentProps {
44
44
  headerGoBackIcon?: JSX.Element;
45
45
  portalContainer?: RefObject<HTMLElement>;
46
46
  arrowSide?: 'left' | 'right';
47
+ horizontalPosition?: 'left' | 'right';
48
+ verticalPosition?: 'top' | 'bottom';
49
+ wrapperWidth?: number;
50
+ cssClass?: string;
47
51
  }
48
52
  export interface IDropdownItemWithHover {
49
53
  children?: ReactNode;
package/build/esm/packages/aurora/src/components/loader/constants.d.ts CHANGED
@@ -1,12 +1,10 @@
1
1
  export declare const LOADER_SIZE: {
2
- readonly xs: "xs";
3
- readonly s: "s";
4
- readonly l: "l";
5
- readonly xl: "xl";
2
+ readonly small: "small";
3
+ readonly large: "large";
4
+ readonly extraLarge: "extraLarge";
6
5
  };
7
6
  export declare const LOADER_SIZE_CSS_CLASS_MAP: {
8
- readonly xs: string;
9
- readonly s: string;
10
- readonly l: string;
11
- readonly xl: string;
7
+ readonly small: string;
8
+ readonly large: string;
9
+ readonly extraLarge: string;
12
10
  };
package/build/esm/packages/aurora/src/components/loader/constants.js CHANGED
@@ -1,16 +1,14 @@
1
- import { cssLoaderSizeExtraSmall, cssLoaderSizeSmall, cssLoaderSizeLarge, cssLoaderSizeExtraLarge } from './css_classes.js';
1
+ import { cssLoaderSizeSmall, cssLoaderSizeLarge, cssLoaderSizeExtraLarge } from './css_classes.js';
2
2
 
3
3
  const LOADER_SIZE = {
4
- xs: 'xs',
5
- s: 's',
6
- l: 'l',
7
- xl: 'xl'
4
+ small: 'small',
5
+ large: 'large',
6
+ extraLarge: 'extraLarge'
8
7
  };
9
8
  const LOADER_SIZE_CSS_CLASS_MAP = {
10
- [LOADER_SIZE.xs]: cssLoaderSizeExtraSmall,
11
- [LOADER_SIZE.s]: cssLoaderSizeSmall,
12
- [LOADER_SIZE.l]: cssLoaderSizeLarge,
13
- [LOADER_SIZE.xl]: cssLoaderSizeExtraLarge
9
+ [LOADER_SIZE.small]: cssLoaderSizeSmall,
10
+ [LOADER_SIZE.large]: cssLoaderSizeLarge,
11
+ [LOADER_SIZE.extraLarge]: cssLoaderSizeExtraLarge
14
12
  };
15
13
 
16
14
  export { LOADER_SIZE, LOADER_SIZE_CSS_CLASS_MAP };
package/build/esm/packages/aurora/src/components/loader/constants.js.map CHANGED
@@ -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;"}
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;"}
package/build/esm/packages/aurora/src/components/loader/css_classes.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  export declare const cssLoader = "loader";
2
- export declare const cssLoaderSizeExtraSmall: string;
3
2
  export declare const cssLoaderSizeSmall: string;
4
3
  export declare const cssLoaderSizeLarge: string;
5
4
  export declare const cssLoaderSizeExtraLarge: string;
package/build/esm/packages/aurora/src/components/loader/css_classes.js CHANGED
@@ -1,8 +1,7 @@
1
1
  const cssLoader = 'loader';
2
- const cssLoaderSizeExtraSmall = `${cssLoader}_xs`;
3
2
  const cssLoaderSizeSmall = `${cssLoader}_s`;
4
3
  const cssLoaderSizeLarge = `${cssLoader}_l`;
5
4
  const cssLoaderSizeExtraLarge = `${cssLoader}_xl`;
6
5
 
7
- export { cssLoader, cssLoaderSizeExtraLarge, cssLoaderSizeExtraSmall, cssLoaderSizeLarge, cssLoaderSizeSmall };
6
+ export { cssLoader, cssLoaderSizeExtraLarge, cssLoaderSizeLarge, cssLoaderSizeSmall };
8
7
  //# sourceMappingURL=css_classes.js.map
package/build/esm/packages/aurora/src/components/loader/css_classes.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/aurora/src/components/tooltip/css_classes.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare const cssTooltip = "tooltip";
2
+ export declare const cssTooltipContainer: string;
package/build/esm/packages/aurora/src/components/tooltip/css_classes.js ADDED
@@ -0,0 +1,5 @@
1
+ const cssTooltip = 'tooltip';
2
+ const cssTooltipContainer = `${cssTooltip}__container`;
3
+
4
+ export { cssTooltip, cssTooltipContainer };
5
+ //# sourceMappingURL=css_classes.js.map
package/build/esm/packages/aurora/src/components/tooltip/css_classes.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;"}
package/build/esm/packages/aurora/src/components/tooltip/index.js CHANGED
@@ -1,20 +1,26 @@
1
1
  import React, { useRef } from 'react';
2
- import { classNames } from '../../utilities/styles/classNames.js';
3
- import { useFixedChildPosition } from '../../hooks/use_fixed_child_position.js';
2
+ import { DropdownContext } from '../dropdown/context/index.js';
3
+ import { useToggle } from '../dropdown/hooks/use_toggle.js';
4
+ import Dropdown from '../dropdown/index.js';
5
+ import { cssTooltip, cssTooltipContainer } from './css_classes.js';
4
6
  import cssClasses from '../../css/tooltip/main.module.less.js';
5
7
 
6
- const Tooltip = ({ fixed, left, top, disabled, children, content }) => {
7
- const className = classNames(['tooltip', left && 'tooltip_left', top && 'tooltip_top'], cssClasses);
8
- const childRef = useRef(null);
9
- const { onMouseEnter, style } = useFixedChildPosition({
10
- useFixed: fixed,
11
- hPosition: left ? 'left' : 'right',
12
- vPosition: top ? 'top' : 'bottom',
13
- childRef
14
- });
15
- return (React.createElement("span", { className: className, onMouseEnter: onMouseEnter },
16
- children,
17
- !disabled && (React.createElement("div", { style: style, ref: childRef, className: cssClasses['tooltip__container'] }, content))));
8
+ const Tooltip = ({ left, top, disabled, onToggle, children, content }) => {
9
+ var _a;
10
+ const wrapperRef = useRef(null);
11
+ const [isOpen, toggleDropdown] = useToggle(false, onToggle);
12
+ const value = React.useMemo(() => ({ wrapperRef, isOpen, toggleDropdown }), [isOpen, toggleDropdown]);
13
+ const wrapperWidth = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
14
+ const handleOnMouseEnter = () => {
15
+ toggleDropdown();
16
+ };
17
+ const handleOnMouseLeave = () => {
18
+ toggleDropdown();
19
+ };
20
+ return (React.createElement(DropdownContext.Provider, { value: value },
21
+ React.createElement("span", { className: cssClasses[cssTooltip], ref: wrapperRef, onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave },
22
+ children,
23
+ !disabled && (React.createElement(Dropdown.Content, { cssClass: cssClasses[cssTooltipContainer], horizontalPosition: left ? 'left' : 'right', verticalPosition: top ? 'top' : 'bottom', wrapperWidth: wrapperWidth }, content)))));
18
24
  };
19
25
 
20
26
  export default Tooltip;
package/build/esm/packages/aurora/src/components/tooltip/index.js.map CHANGED
@@ -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;"}
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;"}
package/build/esm/packages/aurora/src/components/tooltip/tooltip_types.d.ts CHANGED
@@ -1,9 +1,9 @@
1
+ import { IDropdownProps } from "../dropdown/types";
1
2
  import { ReactElement } from 'react';
2
- export interface ITooltip {
3
+ export interface ITooltip extends IDropdownProps {
3
4
  content: string | ReactElement;
4
- fixed?: boolean;
5
+ disabled?: boolean;
5
6
  left?: boolean;
6
7
  top?: boolean;
7
- disabled?: boolean;
8
8
  children: React.ReactNode;
9
9
  }
package/build/esm/packages/aurora/src/components/tooltip/tooltip_types.js CHANGED
@@ -1,2 +1,3 @@
1
+ import '@auroraComponents/dropdown/types';
1
2
  import 'react';
2
3
  //# sourceMappingURL=tooltip_types.js.map
package/build/esm/packages/aurora/src/components/tooltip/tooltip_types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip_types.js","sourceRoot":"","sources":["../../../../../../../src/components/tooltip/tooltip_types.ts"],"names":[],"mappings":"AAAA,OAA6B,OAAO,CAAC"}
1
+ {"version":3,"file":"tooltip_types.js","sourceRoot":"","sources":["../../../../../../../src/components/tooltip/tooltip_types.ts"],"names":[],"mappings":"AAAA,OAA+B,kCAAkC,CAAC;AAClE,OAA6B,OAAO,CAAC"}
package/build/esm/packages/aurora/src/css/loader/main.module.less.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
2
2
 
3
- var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_loader__2k0x_ {\n display: inline-block;\n vertical-align: middle;\n width: 16px;\n height: 16px;\n border-style: solid;\n border-width: 1.5px;\n border-color: #ececec #ececec #ececec #3c83ec;\n border-radius: 50%;\n transform: translateZ(0);\n -webkit-animation: main-module_load__1yy35 1.1s infinite linear;\n animation: main-module_load__1yy35 1.1s infinite linear;\n}\n.main-module_loader_xs__3JXYp {\n width: 8px;\n height: 8px;\n}\n.main-module_loader_s__3DDj4 {\n width: 12px;\n height: 12px;\n}\n.main-module_loader_l__1X43e {\n width: 24px;\n height: 24px;\n}\n.main-module_loader_xl__2hfeE {\n width: 30px;\n height: 30px;\n}\n@-webkit-keyframes main-module_load__1yy35 {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n@keyframes main-module_load__1yy35 {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n";
4
- var cssClasses = {"loader":"main-module_loader__2k0x_","load":"main-module_load__1yy35","loader_xs":"main-module_loader_xs__3JXYp","loader_s":"main-module_loader_s__3DDj4","loader_l":"main-module_loader_l__1X43e","loader_xl":"main-module_loader_xl__2hfeE"};
3
+ var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_loader__2k0x_ {\n display: inline-block;\n vertical-align: middle;\n width: 16px;\n height: 16px;\n border-style: solid;\n border-width: 1.5px;\n border-color: #ececec #ececec #ececec #3c83ec;\n border-radius: 50%;\n transform: translateZ(0);\n -webkit-animation: main-module_load__1yy35 1.1s infinite linear;\n animation: main-module_load__1yy35 1.1s infinite linear;\n}\n.main-module_loader_s__3DDj4 {\n width: 12px;\n height: 12px;\n}\n.main-module_loader_l__1X43e {\n width: 24px;\n height: 24px;\n}\n.main-module_loader_xl__2hfeE {\n width: 30px;\n height: 30px;\n}\n@-webkit-keyframes main-module_load__1yy35 {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n@keyframes main-module_load__1yy35 {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n";
4
+ var cssClasses = {"loader":"main-module_loader__2k0x_","load":"main-module_load__1yy35","loader_s":"main-module_loader_s__3DDj4","loader_l":"main-module_loader_l__1X43e","loader_xl":"main-module_loader_xl__2hfeE"};
5
5
  styleInject(css_248z);
6
6
 
7
7
  export default cssClasses;
package/build/esm/packages/aurora/src/css/tooltip/main.module.less.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
2
2
 
3
- var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_tooltip__2-uBX {\n position: relative;\n}\n.main-module_tooltip__2-uBX:hover .main-module_tooltip__container__1T35Q {\n display: block;\n}\n.main-module_tooltip_left__27ULt .main-module_tooltip__container__1T35Q {\n left: 1rem;\n right: auto;\n}\n.main-module_tooltip_top__3xSwK .main-module_tooltip__container__1T35Q {\n top: auto;\n bottom: 150%;\n}\n.main-module_tooltip__container__1T35Q {\n position: absolute;\n display: none;\n right: 1rem;\n top: 125%;\n z-index: 4;\n white-space: nowrap;\n padding: 0.5rem;\n color: #ffffff;\n font-size: 12px;\n text-align: center;\n background-color: #2d3748;\n box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);\n border-radius: 3px;\n}\n";
4
- var cssClasses = {"tooltip":"main-module_tooltip__2-uBX","tooltip__container":"main-module_tooltip__container__1T35Q","tooltip_left":"main-module_tooltip_left__27ULt","tooltip_top":"main-module_tooltip_top__3xSwK"};
3
+ var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_tooltip__container__1T35Q {\n padding-right: 0.5rem;\n padding-left: 0.5rem;\n white-space: nowrap;\n color: #ffffff;\n font-size: 12px;\n text-align: center;\n background-color: #2d3748;\n}\n.main-module_tooltip__container__1T35Q::before {\n display: none;\n}\n";
4
+ var cssClasses = {"tooltip__container":"main-module_tooltip__container__1T35Q"};
5
5
  styleInject(css_248z);
6
6
 
7
7
  export default cssClasses;
package/build/esm/packages/aurora/src/hooks/use_portal_child_position.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import React, { RefObject } from 'react';
2
+ export declare const usePortalChildPosition: ({ childRef, vPosition, hPosition }: {
3
+ vPosition?: "top" | "bottom" | undefined;
4
+ hPosition?: "left" | "right" | "center" | undefined;
5
+ childRef?: React.RefObject<HTMLDivElement> | undefined;
6
+ }) => {
7
+ style: React.CSSProperties;
8
+ onMouseEnter: (event: React.MouseEvent) => void;
9
+ };
package/build/esm/packages/aurora/src/hooks/use_portal_child_position.js ADDED
@@ -0,0 +1,25 @@
1
+ import { useState } from 'react';
2
+ export const usePortalChildPosition = ({ childRef, vPosition, hPosition }) => {
3
+ const [position, setPosition] = useState({ top: 0, left: 0 });
4
+ const onMouseEnter = (event) => {
5
+ var _a, _b;
6
+ const $hoveredElement = event.target;
7
+ const parentBoundingRect = $hoveredElement.getBoundingClientRect();
8
+ const childBoundingRect = ((_a = childRef === null || childRef === void 0 ? void 0 : childRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || { width: 0, height: 0 };
9
+ console.log('parentBoundingRect', parentBoundingRect);
10
+ console.log('childRef', (_b = childRef === null || childRef === void 0 ? void 0 : childRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight);
11
+ console.log('childBoundingRect', childBoundingRect);
12
+ const top = vPosition === 'top' ? parentBoundingRect.top - childBoundingRect.height : parentBoundingRect.top + parentBoundingRect.height;
13
+ const left = hPosition === 'left' ? parentBoundingRect.left + parentBoundingRect.width - childBoundingRect.width : parentBoundingRect.left;
14
+ setPosition({ top, left });
15
+ };
16
+ const style = {
17
+ top: position.top,
18
+ left: position.left
19
+ };
20
+ return {
21
+ style,
22
+ onMouseEnter
23
+ };
24
+ };
25
+ //# sourceMappingURL=use_portal_child_position.js.map
package/build/esm/packages/aurora/src/hooks/use_portal_child_position.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use_portal_child_position.js","sourceRoot":"","sources":["../../../../../../src/hooks/use_portal_child_position.ts"],"names":[],"mappings":"AAAA,OAAc,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EACnC,QAAQ,EACR,SAAS,EACT,SAAS,EAKZ,EAAmF,EAAE;IAClF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC;IAE9D,MAAM,YAAY,GAAG,CAAC,KAAuB,EAAE,EAAE;;QAC7C,MAAM,eAAe,GAAG,KAAK,CAAC,MAAqB,CAAC;QAEpD,MAAM,kBAAkB,GAAG,eAAe,CAAC,qBAAqB,EAAE,CAAC;QAEnE,MAAM,iBAAiB,GAAG,CAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,0CAAE,qBAAqB,EAAE,KAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;QAEhG,OAAO,CAAC,GAAG,CAAC,oBAAoB,EAAE,kBAAkB,CAAC,CAAC;QACtD,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,0CAAE,YAAY,CAAC,CAAC;QACzD,OAAO,CAAC,GAAG,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC;QAEpD,MAAM,GAAG,GAAG,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,GAAG,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,GAAG,GAAG,kBAAkB,CAAC,MAAM,CAAC;QACzI,MAAM,IAAI,GACN,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,IAAI,GAAG,kBAAkB,CAAC,KAAK,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC;QAElI,WAAW,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG;QACV,GAAG,EAAE,QAAQ,CAAC,GAAG;QACjB,IAAI,EAAE,QAAQ,CAAC,IAAI;KACtB,CAAC;IAEF,OAAO;QACH,KAAK;QACL,YAAY;KACf,CAAC;AACN,CAAC,CAAC"}
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": "2.4.2-1",
5
+ "version": "2.4.3-2",
6
6
  "description": "aurora",
7
7
  "author": "k0ssak",
8
8
  "license": "MIT",