@dreamcommerce/aurora 0.3.4-173 → 0.3.4-177

package/build/cjs/packages/aurora/src/components/hint/index.js

@@ -6,13 +6,14 @@ var React = require('react');
 var classNames = require('../../utilities/styles/classNames.js');
 var main_module = require('../../css/hint/main.module.less.js');
 var icon_hint = require('../../assets/icon_hint.js');
+var use_fixed_child_position = require('../../hooks/use_fixed_child_position.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var Hint = function (_a) {
-    var hint = _a.hint, _b = _a.vPosition, vPosition = _b === void 0 ? 'top' : _b, yellow = _a.yellow, _c = _a.hPosition, hPosition = _c === void 0 ? 'right' : _c, iconClass = _a.iconClass, Icon = _a.Icon, spacingLeft = _a.spacingLeft, spacingRight = _a.spacingRight;
+    var hint = _a.hint, fixed = _a.fixed, _b = _a.vPosition, vPosition = _b === void 0 ? 'top' : _b, yellow = _a.yellow, _c = _a.hPosition, hPosition = _c === void 0 ? 'right' : _c, iconClass = _a.iconClass, Icon = _a.Icon, spacingLeft = _a.spacingLeft, spacingRight = _a.spacingRight;
     var containerClassName = classNames.classNames([
         'hint',
         spacingLeft && 'hint_spacing-left',
@@ -21,11 +22,13 @@ var Hint = function (_a) {
         hPosition === 'center' && 'hint_horizontal-center',
         vPosition === 'top' && 'hint_top'
     ], main_module['default']);
+    var hintContentRef = React.useRef(null);
+    var _d = use_fixed_child_position.useFixedChildPosition({ useFixed: fixed, vPosition: vPosition, hPosition: hPosition, childRef: hintContentRef }), onMouseEnter = _d.onMouseEnter, style = _d.style;
     var contentClassName = classNames.classNames(['hint__content', yellow && 'hint__content_yellow'], main_module['default']);
     var IconComponent = Icon || icon_hint['default'];
-    return (React__default['default'].createElement("div", { className: containerClassName },
+    return (React__default['default'].createElement("div", { className: containerClassName, onMouseEnter: onMouseEnter },
         React__default['default'].createElement(IconComponent, { className: iconClass }),
-        React__default['default'].createElement("div", { className: contentClassName }, hint)));
+        React__default['default'].createElement("div", { ref: hintContentRef, className: contentClassName, style: style }, hint)));
 };
 
 exports.default = Hint;

package/build/cjs/packages/aurora/src/components/hint/index.js.map

@@ -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;"}
+{"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/components/tooltip/index.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('../../utilities/styles/classNames.js');
+var use_fixed_child_position = require('../../hooks/use_fixed_child_position.js');
+var main_module = require('../../css/tooltip/main.module.less.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var Tooltip = function (_a) {
+    var fixed = _a.fixed, left = _a.left, top = _a.top, disabled = _a.disabled, children = _a.children, content = _a.content;
+    var className = classNames.classNames(['tooltip', left && 'tooltip_left', top && 'tooltip_top'], main_module['default']);
+    var childRef = React.useRef(null);
+    var _b = use_fixed_child_position.useFixedChildPosition({
+        useFixed: fixed,
+        hPosition: left ? 'left' : 'right',
+        vPosition: top ? 'top' : 'bottom',
+        childRef: childRef
+    }), onMouseEnter = _b.onMouseEnter, style = _b.style;
+    return (React__default['default'].createElement("span", { className: className, onMouseEnter: onMouseEnter },
+        children,
+        !disabled && (React__default['default'].createElement("div", { style: style, ref: childRef, className: main_module['default']['tooltip__container'] }, content))));
+};
+
+exports.default = Tooltip;
+//# sourceMappingURL=index.js.map

package/build/cjs/packages/aurora/src/components/tooltip/index.js.map

@@ -0,0 +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;"}

package/build/cjs/packages/aurora/src/css/tooltip/main.module.less.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleInject_es = require('../../../../../external/style-inject/dist/style-inject.es.js');
+
+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";
+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"};
+styleInject_es['default'](css_248z);
+
+exports.default = cssClasses;
+//# sourceMappingURL=main.module.less.js.map

package/build/cjs/packages/aurora/src/css/tooltip/main.module.less.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,6BAA6B,8DAAkE;AAC/F;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/hooks/use_fixed_child_position.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+var useFixedChildPosition = function (_a) {
+    var useFixed = _a.useFixed, childRef = _a.childRef, vPosition = _a.vPosition, hPosition = _a.hPosition;
+    var _b = React.useState({ top: 0, left: 0 }), position = _b[0], setPosition = _b[1];
+    if (!useFixed) {
+        return {
+            style: {},
+            onMouseEnter: function () { }
+        };
+    }
+    var onMouseEnter = function (event) {
+        var _a;
+        var $hoveredElement = event.target;
+        var parentBoundingRect = $hoveredElement.getBoundingClientRect();
+        var childBoundingRect = ((_a = childRef === null || childRef === void 0 ? void 0 : childRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || { width: 0, height: 0 };
+        var top = vPosition === 'top'
+            ? parentBoundingRect.top - 0.5 * parentBoundingRect.height - childBoundingRect.height
+            : parentBoundingRect.top + parentBoundingRect.height;
+        var left = hPosition === 'left' ? parentBoundingRect.left + parentBoundingRect.width - childBoundingRect.width : parentBoundingRect.left;
+        setPosition({ top: top, left: left });
+    };
+    var style = {
+        position: 'fixed',
+        top: position.top,
+        left: position.left,
+        bottom: 'unset',
+        right: 'unset'
+    };
+    return {
+        style: style,
+        onMouseEnter: onMouseEnter
+    };
+};
+
+exports.useFixedChildPosition = useFixedChildPosition;
+//# sourceMappingURL=use_fixed_child_position.js.map

package/build/cjs/packages/aurora/src/hooks/use_fixed_child_position.js.map

@@ -0,0 +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;"}

package/build/cjs/packages/aurora/src/index.js

@@ -5,103 +5,106 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('react');
 require('./i18n.js');
 var index = require('./components/button/index.js');
-var index$1 = require('./components/buttons_group/index.js');
-var index$t = require('./components/dropdown/context/index.js');
-var index$g = require('./components/color_picker/index.js');
-var index$5 = require('./components/label/index.js');
+var index$2 = require('./components/buttons_group/index.js');
+var index$u = require('./components/dropdown/context/index.js');
+var index$h = require('./components/color_picker/index.js');
+var index$6 = require('./components/label/index.js');
 var icon_tick = require('./assets/icon_tick.js');
-var index$x = require('./components/hint/index.js');
-var index$6 = require('./components/controls/hoc/control_input/index.js');
-var index$7 = require('./components/controls/hoc/control_checkbox/index.js');
-var index$8 = require('./components/controls/hoc/control_checkbox_switch/index.js');
-var index$9 = require('./components/controls/hoc/control_radio/index.js');
-var index$b = require('./components/controls/hoc/control_range/index.js');
+var index$y = require('./components/hint/index.js');
+var index$7 = require('./components/controls/hoc/control_input/index.js');
+var index$8 = require('./components/controls/hoc/control_checkbox/index.js');
+var index$9 = require('./components/controls/hoc/control_checkbox_switch/index.js');
+var index$a = require('./components/controls/hoc/control_radio/index.js');
+var index$c = require('./components/controls/hoc/control_range/index.js');
 var icon_arrow = require('./assets/icon_arrow.js');
-var index$2 = require('./components/dropdown/index.js');
+var index$3 = require('./components/dropdown/index.js');
 var icon_calendar = require('./assets/icon_calendar.js');
-var index$3 = require('./components/dropdown/hoc/select/index.js');
-var index$f = require('./components/date_picker/index.js');
-var index$i = require('./components/controls/hoc/control_date_picker/index.js');
-var index$h = require('./components/controls/hoc/control_color_picker/index.js');
-var index$o = require('./components/tag/index.js');
-var index$p = require('./components/tags_selector/index.js');
-var index$q = require('./components/controls/hoc/control_tags_selector/index.js');
-var index$d = require('./components/controls/hoc/control_textarea/index.js');
-var index$a = require('./components/controls/hoc/control_select/index.js');
-var index$4 = require('./components/dropdown/hoc/multiselect/index.js');
-var index$c = require('./components/controls/hoc/control_multi_select/index.js');
-var index$v = require('./components/file_picker/index.js');
-var index$j = require('./components/controls/hoc/control_file_picker/index.js');
-var index$w = require('./components/controls/hoc/control_cell_selector/index.js');
-var index$e = require('./components/gallery/index.js');
-var index$s = require('./components/grid/index.js');
-var index$k = require('./components/heading/index.js');
+var index$4 = require('./components/dropdown/hoc/select/index.js');
+var index$g = require('./components/date_picker/index.js');
+var index$j = require('./components/controls/hoc/control_date_picker/index.js');
+var index$i = require('./components/controls/hoc/control_color_picker/index.js');
+var index$p = require('./components/tag/index.js');
+var index$q = require('./components/tags_selector/index.js');
+var index$r = require('./components/controls/hoc/control_tags_selector/index.js');
+var index$e = require('./components/controls/hoc/control_textarea/index.js');
+var index$b = require('./components/controls/hoc/control_select/index.js');
+var index$5 = require('./components/dropdown/hoc/multiselect/index.js');
+var index$d = require('./components/controls/hoc/control_multi_select/index.js');
+var index$w = require('./components/file_picker/index.js');
+var index$k = require('./components/controls/hoc/control_file_picker/index.js');
+var index$x = require('./components/controls/hoc/control_cell_selector/index.js');
+var index$f = require('./components/gallery/index.js');
+var index$t = require('./components/grid/index.js');
+var index$l = require('./components/heading/index.js');
 var modal_context = require('./components/modal/context/modal_context.js');
 var modal_provider = require('./components/modal/hoc/modal_provider.js');
-var index$m = require('./components/modal/hoc/absolute_modal/index.js');
-var index$n = require('./components/modal/hoc/relative_modal/index.js');
-var index$l = require('./components/modal/index.js');
-var index$u = require('./components/spacing/index.js');
-var index$r = require('./components/table/index.js');
+var index$n = require('./components/modal/hoc/absolute_modal/index.js');
+var index$o = require('./components/modal/hoc/relative_modal/index.js');
+var index$m = require('./components/modal/index.js');
+var index$v = require('./components/spacing/index.js');
+var index$s = require('./components/table/index.js');
 var dataTable = require('./components/table/hoc/data-table.js');
 var tabs = require('./components/tabs/components/tabs.js');
 var tab_item = require('./components/tabs/components/tab_item.js');
 require('./components/loader/constants.js');
-var index$B = require('./components/loader/index.js');
-var index$C = require('./components/with_loader/index.js');
-var index$y = require('./components/controls/hoc/control_radio_group/index.js');
-var index$z = require('./components/message-box/index.js');
+var index$C = require('./components/loader/index.js');
+var index$D = require('./components/with_loader/index.js');
+var index$1 = require('./components/tooltip/index.js');
+var index$z = require('./components/controls/hoc/control_radio_group/index.js');
+var index$A = require('./components/message-box/index.js');
 var context = require('./components/flash_messenger/context.js');
-var index$A = require('./components/flash_messenger/index.js');
+var index$B = require('./components/flash_messenger/index.js');
 
 
 
 exports.Button = index['default'];
-exports.ButtonsGroup = index$1['default'];
-exports.DropdownContext = index$t.DropdownContext;
-exports.ColorPicker = index$g['default'];
-exports.Label = index$5['default'];
+exports.ButtonsGroup = index$2['default'];
+exports.DropdownContext = index$u.DropdownContext;
+exports.useDropdownContext = index$u.useDropdownContext;
+exports.ColorPicker = index$h['default'];
+exports.Label = index$6['default'];
 exports.IconTick = icon_tick['default'];
-exports.Hint = index$x['default'];
-exports.ControlInput = index$6['default'];
-exports.ControlCheckbox = index$7['default'];
-exports.ControlCheckboxSwitch = index$8['default'];
-exports.ControlRadio = index$9['default'];
-exports.ControlRange = index$b['default'];
+exports.Hint = index$y['default'];
+exports.ControlInput = index$7['default'];
+exports.ControlCheckbox = index$8['default'];
+exports.ControlCheckboxSwitch = index$9['default'];
+exports.ControlRadio = index$a['default'];
+exports.ControlRange = index$c['default'];
 exports.IconArrow = icon_arrow['default'];
-exports.Dropdown = index$2['default'];
+exports.Dropdown = index$3['default'];
 exports.IconCalendar = icon_calendar['default'];
-exports.Select = index$3['default'];
-exports.Datepicker = index$f['default'];
-exports.ControlDatepicker = index$i['default'];
-exports.ControlColorPicker = index$h['default'];
-exports.Tag = index$o['default'];
-exports.TagsSelector = index$p['default'];
-exports.ControlTagsSelector = index$q['default'];
-exports.ControlTextarea = index$d['default'];
-exports.ControlSelect = index$a['default'];
-exports.MultiSelect = index$4['default'];
-exports.ControlMultiSelect = index$c['default'];
-exports.FilePicker = index$v['default'];
-exports.ControlFilePicker = index$j['default'];
-exports.ControlCellSelector = index$w['default'];
-exports.Gallery = index$e['default'];
-exports.Grid = index$s['default'];
-exports.Heading = index$k['default'];
+exports.Select = index$4['default'];
+exports.Datepicker = index$g['default'];
+exports.ControlDatepicker = index$j['default'];
+exports.ControlColorPicker = index$i['default'];
+exports.Tag = index$p['default'];
+exports.TagsSelector = index$q['default'];
+exports.ControlTagsSelector = index$r['default'];
+exports.ControlTextarea = index$e['default'];
+exports.ControlSelect = index$b['default'];
+exports.MultiSelect = index$5['default'];
+exports.ControlMultiSelect = index$d['default'];
+exports.FilePicker = index$w['default'];
+exports.ControlFilePicker = index$k['default'];
+exports.ControlCellSelector = index$x['default'];
+exports.Gallery = index$f['default'];
+exports.Grid = index$t['default'];
+exports.Heading = index$l['default'];
 exports.ModalContext = modal_context.ModalContext;
 exports.ModalProvider = modal_provider['default'];
-exports.AbsoluteModal = index$m['default'];
-exports.RelativeModal = index$n['default'];
-exports.Modal = index$l['default'];
-exports.Spacing = index$u['default'];
-exports.Table = index$r['default'];
+exports.AbsoluteModal = index$n['default'];
+exports.RelativeModal = index$o['default'];
+exports.Modal = index$m['default'];
+exports.Spacing = index$v['default'];
+exports.Table = index$s['default'];
 exports.DataTable = dataTable['default'];
 exports.Tabs = tabs['default'];
 exports.TabItem = tab_item.TabItem;
-exports.Loader = index$B['default'];
-exports.WithLoader = index$C['default'];
-exports.ControlRadioGroup = index$y['default'];
-exports.MessageBox = index$z['default'];
+exports.Loader = index$C['default'];
+exports.WithLoader = index$D['default'];
+exports.Tooltip = index$1['default'];
+exports.ControlRadioGroup = index$z['default'];
+exports.MessageBox = index$A['default'];
 exports.useFlashMessenger = context.useFlashMessenger;
-exports.FlashMessenger = index$A['default'];
+exports.FlashMessenger = index$B['default'];
 //# sourceMappingURL=index.js.map

package/build/cjs/packages/aurora/src/index.js.map

@@ -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;AACA;AACA;AACA;"}
+{"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;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/button/types.d.ts

@@ -3,7 +3,7 @@ export interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     as?: 'button' | 'link';
     size?: 'small';
     variant?: 'outline' | 'link';
-    inactive?: true;
+    inactive?: boolean;
     color?: 'secondary';
     href?: string;
     target?: '_blank';

package/build/esm/packages/aurora/src/components/hint/index.d.ts

@@ -10,6 +10,7 @@ export interface IHint {
     Icon?: React.FC<{
         className?: string;
     }>;
+    fixed?: boolean;
 }
 declare const Hint: React.FC<IHint>;
 export default Hint;

package/build/esm/packages/aurora/src/components/hint/index.js

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { classNames } from '../../utilities/styles/classNames.js';
 import styles from '../../css/hint/main.module.less.js';
 import IconHint from '../../assets/icon_hint.js';
+import { useFixedChildPosition } from '../../hooks/use_fixed_child_position.js';
 
 var Hint = function (_a) {
-    var hint = _a.hint, _b = _a.vPosition, vPosition = _b === void 0 ? 'top' : _b, yellow = _a.yellow, _c = _a.hPosition, hPosition = _c === void 0 ? 'right' : _c, iconClass = _a.iconClass, Icon = _a.Icon, spacingLeft = _a.spacingLeft, spacingRight = _a.spacingRight;
+    var hint = _a.hint, fixed = _a.fixed, _b = _a.vPosition, vPosition = _b === void 0 ? 'top' : _b, yellow = _a.yellow, _c = _a.hPosition, hPosition = _c === void 0 ? 'right' : _c, iconClass = _a.iconClass, Icon = _a.Icon, spacingLeft = _a.spacingLeft, spacingRight = _a.spacingRight;
     var containerClassName = classNames([
         'hint',
         spacingLeft && 'hint_spacing-left',
@@ -13,11 +14,13 @@ var Hint = function (_a) {
         hPosition === 'center' && 'hint_horizontal-center',
         vPosition === 'top' && 'hint_top'
     ], styles);
+    var hintContentRef = useRef(null);
+    var _d = useFixedChildPosition({ useFixed: fixed, vPosition: vPosition, hPosition: hPosition, childRef: hintContentRef }), onMouseEnter = _d.onMouseEnter, style = _d.style;
     var contentClassName = classNames(['hint__content', yellow && 'hint__content_yellow'], styles);
     var IconComponent = Icon || IconHint;
-    return (React.createElement("div", { className: containerClassName },
+    return (React.createElement("div", { className: containerClassName, onMouseEnter: onMouseEnter },
         React.createElement(IconComponent, { className: iconClass }),
-        React.createElement("div", { className: contentClassName }, hint)));
+        React.createElement("div", { ref: hintContentRef, className: contentClassName, style: style }, hint)));
 };
 
 export default Hint;

package/build/esm/packages/aurora/src/components/hint/index.js.map

@@ -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;"}
+{"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/index.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactElement } from 'react';
+export interface ITooltip {
+    content: string | ReactElement;
+    fixed?: boolean;
+    left?: boolean;
+    top?: boolean;
+    disabled?: boolean;
+}
+declare const Tooltip: React.FC<ITooltip>;
+export default Tooltip;

package/build/esm/packages/aurora/src/components/tooltip/index.js

@@ -0,0 +1,22 @@
+import React, { useRef } from 'react';
+import { classNames } from '../../utilities/styles/classNames.js';
+import { useFixedChildPosition } from '../../hooks/use_fixed_child_position.js';
+import cssClasses from '../../css/tooltip/main.module.less.js';
+
+var Tooltip = function (_a) {
+    var fixed = _a.fixed, left = _a.left, top = _a.top, disabled = _a.disabled, children = _a.children, content = _a.content;
+    var className = classNames(['tooltip', left && 'tooltip_left', top && 'tooltip_top'], cssClasses);
+    var childRef = useRef(null);
+    var _b = useFixedChildPosition({
+        useFixed: fixed,
+        hPosition: left ? 'left' : 'right',
+        vPosition: top ? 'top' : 'bottom',
+        childRef: childRef
+    }), onMouseEnter = _b.onMouseEnter, style = _b.style;
+    return (React.createElement("span", { className: className, onMouseEnter: onMouseEnter },
+        children,
+        !disabled && (React.createElement("div", { style: style, ref: childRef, className: cssClasses['tooltip__container'] }, content))));
+};
+
+export default Tooltip;
+//# sourceMappingURL=index.js.map

package/build/esm/packages/aurora/src/components/tooltip/index.js.map

@@ -0,0 +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;"}

package/build/esm/packages/aurora/src/css/tooltip/main.module.less.js

@@ -0,0 +1,8 @@
+import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
+
+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";
+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"};
+styleInject(css_248z);
+
+export default cssClasses;
+//# sourceMappingURL=main.module.less.js.map

package/build/esm/packages/aurora/src/css/tooltip/main.module.less.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,wBAAwB,8DAAkE;AAC1F;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/hooks/use_fixed_child_position.d.ts

@@ -0,0 +1,10 @@
+import React, { RefObject } from 'react';
+export declare const useFixedChildPosition: ({ useFixed, childRef, vPosition, hPosition }: {
+    useFixed?: boolean | undefined;
+    vPosition?: "top" | "bottom" | undefined;
+    hPosition?: "left" | "right" | "center" | undefined;
+    childRef?: React.RefObject<HTMLDivElement> | undefined;
+}) => {
+    style: React.CSSProperties;
+    onMouseEnter: (event: React.MouseEvent) => void;
+};

package/build/esm/packages/aurora/src/hooks/use_fixed_child_position.js

@@ -0,0 +1,37 @@
+import { useState } from 'react';
+
+var useFixedChildPosition = function (_a) {
+    var useFixed = _a.useFixed, childRef = _a.childRef, vPosition = _a.vPosition, hPosition = _a.hPosition;
+    var _b = useState({ top: 0, left: 0 }), position = _b[0], setPosition = _b[1];
+    if (!useFixed) {
+        return {
+            style: {},
+            onMouseEnter: function () { }
+        };
+    }
+    var onMouseEnter = function (event) {
+        var _a;
+        var $hoveredElement = event.target;
+        var parentBoundingRect = $hoveredElement.getBoundingClientRect();
+        var childBoundingRect = ((_a = childRef === null || childRef === void 0 ? void 0 : childRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || { width: 0, height: 0 };
+        var top = vPosition === 'top'
+            ? parentBoundingRect.top - 0.5 * parentBoundingRect.height - childBoundingRect.height
+            : parentBoundingRect.top + parentBoundingRect.height;
+        var left = hPosition === 'left' ? parentBoundingRect.left + parentBoundingRect.width - childBoundingRect.width : parentBoundingRect.left;
+        setPosition({ top: top, left: left });
+    };
+    var style = {
+        position: 'fixed',
+        top: position.top,
+        left: position.left,
+        bottom: 'unset',
+        right: 'unset'
+    };
+    return {
+        style: style,
+        onMouseEnter: onMouseEnter
+    };
+};
+
+export { useFixedChildPosition };
+//# sourceMappingURL=use_fixed_child_position.js.map

package/build/esm/packages/aurora/src/hooks/use_fixed_child_position.js.map

@@ -0,0 +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;"}

package/build/esm/packages/aurora/src/index.d.ts

@@ -40,6 +40,7 @@ import TagsSelector from "./components/tags_selector";
 import Hint from "./components/hint";
 import Loader from "./components/loader";
 import WithLoader from "./components/with_loader";
+import Tooltip from "./components/tooltip";
 /**
  * Assets
  */
@@ -69,10 +70,14 @@ import { TMessageBoxType } from "./components/message-box/types";
 import { useFlashMessenger } from "./components/flash_messenger/context";
 import { ILoaderProps } from "./components/loader/types";
 import { IWithLoader } from "./components/with_loader/types";
+/**
+ * export hooks
+ */
+import { useDropdownContext } from "./components/dropdown/context";
 /**
  * export components
  */
-export { Button, ButtonsGroup, Dropdown, Select, MultiSelect, Label, ControlInput, ControlCheckbox, ControlCheckboxSwitch, ControlRadio, ControlSelect, ControlRange, ControlMultiSelect, ControlTextarea, Gallery, Datepicker, ColorPicker, ControlColorPicker, ControlDatepicker, ControlFilePicker, Heading, Modal, ModalProvider, AbsoluteModal, RelativeModal, Tabs, TabItem, Tag, TagsSelector, ControlTagsSelector, Table, DataTable, Grid, DropdownContext, ModalContext, IconCalendar, Spacing, IconArrow, IconTick, FilePicker, ControlCellSelector, Hint, ControlRadioGroup, MessageBox, FlashMessenger, useFlashMessenger, Loader, WithLoader };
+export { Button, Tooltip, ButtonsGroup, Dropdown, Select, MultiSelect, Label, ControlInput, ControlCheckbox, ControlCheckboxSwitch, ControlRadio, ControlSelect, ControlRange, ControlMultiSelect, ControlTextarea, Gallery, Datepicker, ColorPicker, ControlColorPicker, ControlDatepicker, ControlFilePicker, Heading, Modal, ModalProvider, AbsoluteModal, RelativeModal, Tabs, TabItem, Tag, TagsSelector, ControlTagsSelector, Table, DataTable, Grid, DropdownContext, ModalContext, IconCalendar, Spacing, IconArrow, IconTick, FilePicker, ControlCellSelector, Hint, ControlRadioGroup, MessageBox, FlashMessenger, useFlashMessenger, Loader, WithLoader, useDropdownContext };
 /**
  * export types
  */

package/build/esm/packages/aurora/src/index.js

@@ -2,7 +2,7 @@ import 'react';
 import './i18n.js';
 export { default as Button } from './components/button/index.js';
 export { default as ButtonsGroup } from './components/buttons_group/index.js';
-export { DropdownContext } from './components/dropdown/context/index.js';
+export { DropdownContext, useDropdownContext } from './components/dropdown/context/index.js';
 export { default as ColorPicker } from './components/color_picker/index.js';
 export { default as Label } from './components/label/index.js';
 export { default as IconTick } from './assets/icon_tick.js';
@@ -45,6 +45,7 @@ export { TabItem } from './components/tabs/components/tab_item.js';
 import './components/loader/constants.js';
 export { default as Loader } from './components/loader/index.js';
 export { default as WithLoader } from './components/with_loader/index.js';
+export { default as Tooltip } from './components/tooltip/index.js';
 export { default as ControlRadioGroup } from './components/controls/hoc/control_radio_group/index.js';
 export { default as MessageBox } from './components/message-box/index.js';
 export { useFlashMessenger } from './components/flash_messenger/context.js';

package/build/esm/packages/aurora/src/index.js.map

@@ -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;"}
+{"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;"}

package/package.json

@@ -2,14 +2,15 @@
   "name": "@dreamcommerce/aurora",
   "packageManager": "yarn@3.1.1",
   "sideEffects": false,
-  "version": "0.3.4-173",
+  "version": "0.3.4-177",
   "description": "aurora",
   "author": "k0ssak",
   "license": "MIT",
   "source": "src/index.ts",
-  "main": "build/index.js",
-  "module": "build/index.module.js",
-  "types": "build/index.d.ts",
+  "main": "build/cjs/packages/aurora/src/index.js",
+  "module": "build/esm/packages/aurora/src/index.js",
+  "jsnext:main": "build/esm/packages/aurora/src/index.js",
+  "types": "build/esm/packages/aurora/src/index.d.ts",
   "files": [
     "build"
   ],
@@ -63,5 +64,5 @@
     "react-scripts": "3.4.1",
     "react-transition-group": "4.3.0"
   },
-  "stableVersion": "0.3.4-172"
+  "stableVersion": "0.3.4-173"
 }