@homecode/ui 4.21.3 → 4.22.0

package/dist/esm/index.js

@@ -73,11 +73,12 @@ import * as resizeObserver from './src/tools/resizeObserver.js';
 export { resizeObserver };
 import * as queryParams from './src/tools/queryParams.js';
 export { queryParams };
+export { useThrottle } from './src/hooks/useThrottle.js';
 export { useDebounce } from './src/hooks/useDebounce.js';
 import 'react';
-export { useThrottle } from './src/hooks/useThrottle.js';
 export { useIsMounted } from './src/hooks/useIsMounted.js';
 export { useListKeyboardControl } from './src/hooks/useListKeyboardControl.js';
+export { useResizeObserver } from './src/hooks/useResizeObserver.js';
 import * as Form_types from './src/components/Form/Form.types.js';
 export { Form_types as FormTypes };
 export { SubmitButtons } from './src/components/Form/SubmitButtons/SubmitButtons.js';

package/dist/esm/src/components/Autocomplete/Autocomplete.js

@@ -57,7 +57,7 @@ import '../Virtualized/List/List.styl.js';
 import '../Virtualized/List/ListScroll.styl.js';
 
 function Autocomplete(props) {
-    const { className, inputWrapperClassName, value, onChange, size = 'm', getOptions, onSelect, debounceDelay = 300, inputProps = {}, popupProps = {}, } = props;
+    const { className, inputWrapperClassName, value, onChange, size = 'm', getOptions, onSelect, debounceDelay = 300, round = false, blur = false, inputProps = {}, popupProps = {}, } = props;
     const isMounted = useIsMounted();
     const [options, setOptions] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
@@ -140,9 +140,9 @@ function Autocomplete(props) {
             return null;
         return (jsx(Menu, { className: S.options, size: size, offset: { y: { before: 20, after: 20 } }, children: options.map((option, index) => (jsx(Menu.Item, { focused: focusedIndex === index, className: S.option, onClick: () => handleSelect(option), onMouseEnter: () => setFocusedIndex(index), children: option.label }, option.id))) }));
     }, [options, focusedIndex]);
-    return (jsx(Popup, { className: classes, isOpen: isOpen, focusControl: true, size: size, direction: "bottom", ...popupProps, trigger: jsxs("div", { className: inputWrapperClassName, children: [jsx(Input, { ref: inputRef, 
+    return (jsx(Popup, { className: classes, isOpen: isOpen, focusControl: true, round: round, size: size, blur: blur, direction: "bottom", ...popupProps, trigger: jsxs("div", { className: inputWrapperClassName, children: [jsx(Input, { ref: inputRef, 
                     // @ts-ignore
-                    size: size, ...inputProps, value: searchValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, className: inputProps.className }), isLoading && (jsx(Shimmer, { className: S.shimmer, size: size, round: inputProps?.round }))] }), content: optionsList, contentProps: {
+                    size: size, round: round, ...inputProps, value: searchValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, className: inputProps.className }), isLoading && (jsx(Shimmer, { className: S.shimmer, size: size, round: round }))] }), content: optionsList, contentProps: {
             className: S.popupContent,
         } }));
 }

package/dist/esm/src/components/Icon/icons/index.js

@@ -36,6 +36,7 @@ var ICONS = {
     image: () => import('./image.svg.js'),
     instagram: () => import('./instagram.svg.js'),
     home: () => import('./home.svg.js'),
+    layers: () => import('./layers.svg.js'),
     link: () => import('./link.svg.js'),
     loader: () => import('./loader.svg.js'),
     map: () => import('./map.svg.js'),

package/dist/esm/src/components/Icon/icons/layers.svg.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+var _path, _path2;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgLayers = function SvgLayers(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M6.07 6.144C3.046 7.721.476 9.101.355 9.191c-.12.107-.196.364-.166.577.045.348.65.712 5.775 3.396 3.16 1.637 5.88 2.987 6.047 2.987.454-.016 11.46-5.822 11.686-6.171.409-.622.832-.38-8.587-5.261-1.542-.804-2.978-1.456-3.174-1.456-.197 0-2.843 1.304-5.866 2.881"
+  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    d: "M1.444 13.38c-1.013.53-1.225.712-1.255 1.046-.045.334.06.47.53.773 1.48.925 10.93 5.716 11.262 5.716.378 0 10.96-5.428 11.505-5.883a.73.73 0 0 0 .227-.621c-.03-.319-.273-.516-1.285-1.046l-1.24-.652-4.279 2.244c-3.764 1.97-4.369 2.244-4.973 2.228-.59 0-1.33-.348-4.944-2.228a375 375 0 0 0-4.293-2.23c-.03.016-.59.304-1.255.653"
+  })));
+};
+
+export { SvgLayers as default };

package/dist/esm/src/components/Menu/Menu.js

@@ -4,18 +4,20 @@ import cn from 'classnames';
 import { Scroll } from '../Scroll/Scroll.js';
 import S from './Menu.styl.js';
 
+// @ts-ignore
 const MenuComponent = forwardRef(({ children, className, ...props }, ref) => {
-    return (
-    // @ts-ignore
-    jsx(Scroll, { y: true, ref: ref, className: cn(S.root, className), ...props, children: children }));
+    const size = props.size || 'm';
+    return (jsx(Scroll, { y: true, 
+        // @ts-ignore
+        ref: ref, className: cn(S.root, className, S[`size-${size}`]), ...props, children: children }));
 });
 const MenuItem = forwardRef((props, ref) => {
-    const { children, className, selected, focused, disabled, level = 0, onClick, size = 'm', ...rest } = props;
-    const classes = cn(S.item, S[`size-${size}`], level > 0 && S[`level-${level}`], selected && S.selected, focused && S.focused, disabled && S.disabled, className);
+    const { children, className, selected, focused, disabled, level = 0, onClick, ...rest } = props;
+    const classes = cn(S.item, level > 0 && S[`level-${level}`], selected && S.selected, focused && S.focused, disabled && S.disabled, className);
     return (jsx("div", { ref: ref, className: classes, onClick: disabled ? undefined : onClick, ...rest, children: jsx("span", { children: children }) }));
 });
-const MenuGroup = ({ children, className, label, ...props }) => {
-    return (jsxs(Fragment, { children: [jsx("div", { className: cn(S.group, className), ...props, children: label }), children] }));
+const MenuGroup = ({ children, className, label, size = 'm', ...props }) => {
+    return (jsxs(Fragment, { children: [jsx("div", { className: cn(S.group, className, S[`size-${size}`]), ...props, children: label }), children] }));
 };
 const Menu = Object.assign(MenuComponent, {
     Item: MenuItem,

package/dist/esm/src/components/Menu/Menu.styl.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Menu_root__xhtlo{max-height:200px;width:100%}.keyboard .Menu_root__xhtlo{pointer-events:none}.Menu_item__VtmwS{align-items:center;animation:Menu_fadeIn__XRZkT .3s ease-out;cursor:pointer;display:flex;overflow:hidden;padding-bottom:0!important;padding-top:0!important;position:relative;text-align:left;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;width:calc(100% - 2px)}.Menu_item__VtmwS:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.Menu_item__VtmwS:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.Menu_item__VtmwS>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Menu_item__VtmwS.Menu_size-s__DA0r3{font-size:16px;height:34px;padding:0 14px}.Menu_item__VtmwS.Menu_size-m__0EI47{font-size:20px;height:38px;padding:0 16px}.Menu_item__VtmwS.Menu_size-l__PXpIm{font-size:24px;height:42px;padding:0 18px}.Menu_item__VtmwS.Menu_size-xl__U1WW8{font-size:28px;height:46px;padding:0 20px}.Menu_item__VtmwS.Menu_selected__V71xy{background-color:var(--active-color-alpha-500)}.Menu_item__VtmwS.Menu_disabled__5afRm{cursor:not-allowed;opacity:.4}.keyboard .Menu_item__VtmwS.Menu_focused__FLWqW,.pointer .Menu_item__VtmwS:hover{box-shadow:inset 100vw 0 0 0 var(--accent-color-alpha-200)}.Menu_group__6e-Ef{background-color:var(--decent-color);color:var(--accent-color);font-size:14px;font-weight:500;padding:8px 12px;pointer-events:none;position:sticky;top:0;z-index:1}.Menu_levelIndent__S6HXJ{--menu-indent-size:var(--indent-s)}.Menu_levelIndent__S6HXJ.Menu_level-1__kueO2{padding-left:calc(var(--menu-indent-size)*2)}.Menu_levelIndent__S6HXJ.Menu_level-2__JZGkJ{padding-left:calc(var(--menu-indent-size)*3)}.Menu_levelIndent__S6HXJ.Menu_level-3__LFd-F{padding-left:calc(var(--menu-indent-size)*4)}.Menu_levelIndent__S6HXJ.Menu_level-4__2DUMl{padding-left:calc(var(--menu-indent-size)*5)}.Menu_levelIndent__S6HXJ.Menu_level-5__xpgvQ{padding-left:calc(var(--menu-indent-size)*6)}@keyframes Menu_fadeIn__XRZkT{0%{opacity:0}10%{opacity:0}to{opacity:1}}";
+var css_248z = ".Menu_root__xhtlo{max-height:200px;width:100%}.keyboard .Menu_root__xhtlo{pointer-events:none}.Menu_item__VtmwS{align-items:center;animation:Menu_fadeIn__XRZkT .3s ease-out;cursor:pointer;display:flex;overflow:hidden;padding-bottom:0!important;padding-top:0!important;position:relative;text-align:left;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;width:100%}.Menu_item__VtmwS:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.Menu_item__VtmwS:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.Menu_item__VtmwS>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Menu_size-s__DA0r3 .Menu_item__VtmwS{font-size:16px;height:34px;padding:0 14px}.Menu_size-m__0EI47 .Menu_item__VtmwS{font-size:20px;height:38px;padding:0 16px}.Menu_size-l__PXpIm .Menu_item__VtmwS{font-size:24px;height:42px;padding:0 18px}.Menu_size-xl__U1WW8 .Menu_item__VtmwS{font-size:28px;height:46px;padding:0 20px}.Menu_item__VtmwS.Menu_selected__V71xy{background-color:var(--active-color-alpha-500)}.Menu_item__VtmwS.Menu_disabled__5afRm{cursor:not-allowed;opacity:.4}.keyboard .Menu_item__VtmwS.Menu_focused__FLWqW,.pointer .Menu_item__VtmwS:hover{box-shadow:inset 100vw 0 0 0 var(--accent-color-alpha-200)}.Menu_group__6e-Ef{background-color:var(--decent-color);color:var(--accent-color);font-size:14px;font-weight:500;padding:8px 12px;pointer-events:none;position:sticky;top:0;z-index:1}.Menu_levelIndent__S6HXJ{--menu-indent-size:var(--indent-s)}.Menu_levelIndent__S6HXJ.Menu_level-1__kueO2{padding-left:calc(var(--menu-indent-size)*2)}.Menu_levelIndent__S6HXJ.Menu_level-2__JZGkJ{padding-left:calc(var(--menu-indent-size)*3)}.Menu_levelIndent__S6HXJ.Menu_level-3__LFd-F{padding-left:calc(var(--menu-indent-size)*4)}.Menu_levelIndent__S6HXJ.Menu_level-4__2DUMl{padding-left:calc(var(--menu-indent-size)*5)}.Menu_levelIndent__S6HXJ.Menu_level-5__xpgvQ{padding-left:calc(var(--menu-indent-size)*6)}@keyframes Menu_fadeIn__XRZkT{0%{opacity:0}10%{opacity:0}to{opacity:1}}";
 var S = {"root":"Menu_root__xhtlo","item":"Menu_item__VtmwS","fadeIn":"Menu_fadeIn__XRZkT","size-s":"Menu_size-s__DA0r3","size-m":"Menu_size-m__0EI47","size-l":"Menu_size-l__PXpIm","size-xl":"Menu_size-xl__U1WW8","selected":"Menu_selected__V71xy","disabled":"Menu_disabled__5afRm","focused":"Menu_focused__FLWqW","group":"Menu_group__6e-Ef","levelIndent":"Menu_levelIndent__S6HXJ","level-1":"Menu_level-1__kueO2","level-2":"Menu_level-2__JZGkJ","level-3":"Menu_level-3__LFd-F","level-4":"Menu_level-4__2DUMl","level-5":"Menu_level-5__xpgvQ"};
 styleInject(css_248z);
 

package/dist/esm/src/components/Popup/Popup.js

@@ -141,10 +141,12 @@ class Popup extends Component {
     }
     updateBoundsThrottled = throttle(() => {
         const trigger = this.triggerElem.current;
+        const offset = this.props.offset || {};
+        const n = (num) => num || 0;
         const bounds = {
-            minHeight: trigger.offsetHeight,
-            minWidth: trigger.offsetWidth,
-            ...getCoords(trigger),
+            minHeight: trigger.offsetHeight - n(offset.top) - n(offset.bottom),
+            minWidth: trigger.offsetWidth - n(offset.left) - n(offset.right),
+            ...getCoords(trigger, this.props.direction, this.props.offset),
         };
         Object.entries(bounds).forEach(([key, value]) => {
             this.triggerElem.current.style[key] = value;
@@ -366,19 +368,19 @@ class Popup extends Component {
         return (jsx("div", { className: classesTrigger, ...triggerProps, suppressHydrationWarning: true, "data-popup-id": this.id, ref: this.triggerElem, children: trigger }));
     }
     renderContent() {
-        const { content, contentProps = {}, wrapperProps = {}, size, disabled, inline, outlined, animated, paranja, blur, elevation, } = this.props;
+        const { content, contentProps = {}, wrapperProps = {}, size, disabled, inline, outlined, animated, paranja, blur, round, elevation, } = this.props;
         const { isOpen, isContentVisible, animating, direction, triggerBounds, rootPopupId, } = this.state;
         if (disabled)
             return null;
-        const wrapperClasses = cn(S.contentWrapper, blur && S.blur, inline && S.inline, isOpen && S.isOpen, wrapperProps.className);
+        const wrapperClasses = cn(S.contentWrapper, inline && S.inline, isOpen && S.isOpen, wrapperProps.className);
         const trigger = this.triggerElem.current;
         const [axis, float] = direction.split('-');
-        const classes = cn(S.content, outlined && S.outlined, animated && animating && S.animating, elevation && S[`elevation-${elevation}`], S[`size-${size}`], S[`axis-${axis}`], S[`float-${float || 'middle'}`], contentProps.className);
+        const classes = cn(S.content, outlined && S.outlined, animated && animating && S.animating, elevation && S[`elevation-${elevation}`], S[`size-${size}`], S[`axis-${axis}`], S[`float-${float || 'middle'}`], blur && S.blur, round && S.round, contentProps.className);
         if (trigger && !inline && triggerBounds) {
             wrapperProps.style = { ...triggerBounds };
         }
         const contentNode = (jsx("div", { ...wrapperProps, className: wrapperClasses, children: jsxs("div", { ...contentProps, ref: this.onContainerElemRef, className: classes, suppressHydrationWarning: true, "data-popup-id": this.id, "data-root-popup-id": rootPopupId, style: {
-                    marginTop: this.offset.top,
+                    marginTop: 100,
                     marginLeft: this.offset.left,
                 }, children: [paranja && !rootPopupId && (jsx(Paranja, { visible: isContentVisible, blur: blur })), isContentVisible && jsx(Fragment, { children: content })] }) }));
         if (inline)

package/dist/esm/src/components/Popup/Popup.styl.js

@@ -1,7 +1,7 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Popup_root__uQ-fP{display:inline-block;position:relative}.Popup_contentWrapper__2yi-2{pointer-events:none;position:absolute}.Popup_contentWrapper__2yi-2.Popup_inline__1-l1S.Popup_isOpen__BRIdP{position:relative}.Popup_contentWrapper__2yi-2:not(.Popup_inline__1-l1S),.Popup_contentWrapper__2yi-2:not(.Popup_inline__1-l1S)>.Popup_content__e8Qyu{position:absolute}.Popup_trigger__jQNaQ{cursor:pointer}.Popup_trigger__jQNaQ.Popup_isOpen__BRIdP{position:relative;z-index:11}.Popup_trigger__jQNaQ.Popup_disabled__DlE9y{opacity:.4;pointer-events:none}.Popup_content__e8Qyu{-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:var(--decent-color);box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50);max-width:70vw;min-width:100%;opacity:0;overflow:hidden;pointer-events:none;position:relative;transform-origin:top center;z-index:11}.Popup_blur__1hfU8 .Popup_content__e8Qyu{-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);background-color:var(--decent-color-alpha-500)}.Popup_content__e8Qyu.Popup_size-s__UmixP{border-radius:4px}.Popup_content__e8Qyu.Popup_size-m__FYpTL{border-radius:6px}.Popup_content__e8Qyu.Popup_size-l__BTS57{border-radius:8px}.Popup_content__e8Qyu.Popup_elevation-1__vmP3e{box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50),0 0 var(--indent-s) 2px var(--decent-color-alpha-500)}.Popup_content__e8Qyu.Popup_elevation-2__Ci4sI{box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50),0 0 var(--indent-m) 2px var(--decent-color-alpha-500)}.Popup_content__e8Qyu.Popup_outlined__g3cJV:after{border-radius:inherit;bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}.Popup_isOpen__BRIdP .Popup_content__e8Qyu{opacity:1;pointer-events:all;transform:scaleX(1)}.Popup_animating__kR0qF{transition:70ms ease-out;transition-property:transform,opacity,margin}.Popup_axis-top__BaLgG{bottom:100%}.Popup_axis-bottom__hZwwr{top:100%}.Popup_axis-right__LMYVy{left:100%}.Popup_axis-left__SFKm-{right:100%}.Popup_float-top__8SQAu{bottom:0}.Popup_float-right__mdm-3{left:0}.Popup_float-bottom__7flve{top:0}.Popup_float-left__tz7fX{right:0}.Popup_axis-bottom__hZwwr,.Popup_axis-top__BaLgG{transform:scaleY(.5)}.Popup_axis-bottom__hZwwr.Popup_float-middle__Dmnn1,.Popup_axis-top__BaLgG.Popup_float-middle__Dmnn1{left:50%;transform:translateX(-50%) scaleY(.5)}.Popup_isOpen__BRIdP .Popup_axis-bottom__hZwwr.Popup_float-middle__Dmnn1,.Popup_isOpen__BRIdP .Popup_axis-top__BaLgG.Popup_float-middle__Dmnn1{transform:translateX(-50%) scaleX(1)}.Popup_axis-left__SFKm-,.Popup_axis-right__LMYVy{transform:scaleX(.5)}.Popup_axis-left__SFKm-.Popup_float-middle__Dmnn1,.Popup_axis-right__LMYVy.Popup_float-middle__Dmnn1{top:50%;transform:translateY(-50%) scaleX(.5)}.Popup_isOpen__BRIdP .Popup_axis-left__SFKm-.Popup_float-middle__Dmnn1,.Popup_isOpen__BRIdP .Popup_axis-right__LMYVy.Popup_float-middle__Dmnn1{transform:translateY(-50%) scaleX(1)}.Popup_axis-top__BaLgG.Popup_float-middle__Dmnn1{transform-origin:bottom center}.Popup_axis-top__BaLgG.Popup_float-right__mdm-3{transform-origin:bottom left}.Popup_axis-top__BaLgG.Popup_float-left__tz7fX{transform-origin:bottom right}.Popup_axis-bottom__hZwwr.Popup_float-middle__Dmnn1{transform-origin:top center}.Popup_axis-bottom__hZwwr.Popup_float-right__mdm-3{transform-origin:top left}.Popup_axis-bottom__hZwwr.Popup_float-left__tz7fX{transform-origin:top right}.Popup_axis-right__LMYVy.Popup_float-middle__Dmnn1{transform-origin:center left}.Popup_axis-right__LMYVy.Popup_float-top__8SQAu{transform-origin:bottom left}.Popup_axis-right__LMYVy.Popup_float-bottom__7flve{transform-origin:top left}.Popup_axis-left__SFKm-.Popup_float-middle__Dmnn1{transform-origin:center right}.Popup_axis-left__SFKm-.Popup_float-top__8SQAu{transform-origin:bottom right}.Popup_axis-left__SFKm-.Popup_float-bottom__7flve{transform-origin:top right}";
-var S = {"root":"Popup_root__uQ-fP","contentWrapper":"Popup_contentWrapper__2yi-2","inline":"Popup_inline__1-l1S","isOpen":"Popup_isOpen__BRIdP","content":"Popup_content__e8Qyu","trigger":"Popup_trigger__jQNaQ","disabled":"Popup_disabled__DlE9y","blur":"Popup_blur__1hfU8","size-s":"Popup_size-s__UmixP","size-m":"Popup_size-m__FYpTL","size-l":"Popup_size-l__BTS57","elevation-1":"Popup_elevation-1__vmP3e","elevation-2":"Popup_elevation-2__Ci4sI","outlined":"Popup_outlined__g3cJV","animating":"Popup_animating__kR0qF","axis-top":"Popup_axis-top__BaLgG","axis-bottom":"Popup_axis-bottom__hZwwr","axis-right":"Popup_axis-right__LMYVy","axis-left":"Popup_axis-left__SFKm-","float-top":"Popup_float-top__8SQAu","float-right":"Popup_float-right__mdm-3","float-bottom":"Popup_float-bottom__7flve","float-left":"Popup_float-left__tz7fX","float-middle":"Popup_float-middle__Dmnn1"};
+var css_248z = ".Popup_root__uQ-fP{display:inline-block;position:relative}.Popup_contentWrapper__2yi-2{pointer-events:none;position:absolute}.Popup_contentWrapper__2yi-2.Popup_inline__1-l1S.Popup_isOpen__BRIdP{position:relative}.Popup_contentWrapper__2yi-2:not(.Popup_inline__1-l1S),.Popup_contentWrapper__2yi-2:not(.Popup_inline__1-l1S)>.Popup_content__e8Qyu{position:absolute}.Popup_trigger__jQNaQ{cursor:pointer}.Popup_trigger__jQNaQ.Popup_isOpen__BRIdP{position:relative;z-index:11}.Popup_trigger__jQNaQ.Popup_disabled__DlE9y{opacity:.4;pointer-events:none}.Popup_content__e8Qyu{-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:var(--decent-color);box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50);max-width:70vw;min-width:100%;opacity:0;overflow:hidden;pointer-events:none;position:relative;transform-origin:top center;z-index:11}.Popup_content__e8Qyu.Popup_blur__1hfU8{-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);background-color:var(--decent-color-alpha-500)}.Popup_content__e8Qyu.Popup_size-s__UmixP{border-radius:4px}.Popup_content__e8Qyu.Popup_size-s__UmixP.Popup_round__7rD1m{border-radius:15px}.Popup_content__e8Qyu.Popup_size-m__FYpTL{border-radius:6px}.Popup_content__e8Qyu.Popup_size-m__FYpTL.Popup_round__7rD1m{border-radius:20px}.Popup_content__e8Qyu.Popup_size-l__BTS57{border-radius:8px}.Popup_content__e8Qyu.Popup_size-l__BTS57.Popup_round__7rD1m{border-radius:25px}.Popup_content__e8Qyu.Popup_elevation-1__vmP3e{box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50),0 0 var(--indent-s) 2px var(--decent-color-alpha-500)}.Popup_content__e8Qyu.Popup_elevation-2__Ci4sI{box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50),0 0 var(--indent-m) 2px var(--decent-color-alpha-500)}.Popup_content__e8Qyu.Popup_outlined__g3cJV:after{border-radius:inherit;bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}.Popup_isOpen__BRIdP .Popup_content__e8Qyu{opacity:1;pointer-events:all;transform:scaleX(1)}.Popup_animating__kR0qF{transition:70ms ease-out;transition-property:transform,opacity,margin}.Popup_axis-top__BaLgG{bottom:100%}.Popup_axis-bottom__hZwwr{top:100%}.Popup_axis-right__LMYVy{left:100%}.Popup_axis-left__SFKm-{right:100%}.Popup_float-top__8SQAu{bottom:0}.Popup_float-right__mdm-3{left:0}.Popup_float-bottom__7flve{top:0}.Popup_float-left__tz7fX{right:0}.Popup_axis-bottom__hZwwr,.Popup_axis-top__BaLgG{transform:scaleY(.5)}.Popup_axis-bottom__hZwwr.Popup_float-middle__Dmnn1,.Popup_axis-top__BaLgG.Popup_float-middle__Dmnn1{left:50%;transform:translateX(-50%) scaleY(.5)}.Popup_isOpen__BRIdP .Popup_axis-bottom__hZwwr.Popup_float-middle__Dmnn1,.Popup_isOpen__BRIdP .Popup_axis-top__BaLgG.Popup_float-middle__Dmnn1{transform:translateX(-50%) scaleX(1)}.Popup_axis-left__SFKm-,.Popup_axis-right__LMYVy{transform:scaleX(.5)}.Popup_axis-left__SFKm-.Popup_float-middle__Dmnn1,.Popup_axis-right__LMYVy.Popup_float-middle__Dmnn1{top:50%;transform:translateY(-50%) scaleX(.5)}.Popup_isOpen__BRIdP .Popup_axis-left__SFKm-.Popup_float-middle__Dmnn1,.Popup_isOpen__BRIdP .Popup_axis-right__LMYVy.Popup_float-middle__Dmnn1{transform:translateY(-50%) scaleX(1)}.Popup_axis-top__BaLgG.Popup_float-middle__Dmnn1{transform-origin:bottom center}.Popup_axis-top__BaLgG.Popup_float-right__mdm-3{transform-origin:bottom left}.Popup_axis-top__BaLgG.Popup_float-left__tz7fX{transform-origin:bottom right}.Popup_axis-bottom__hZwwr.Popup_float-middle__Dmnn1{transform-origin:top center}.Popup_axis-bottom__hZwwr.Popup_float-right__mdm-3{transform-origin:top left}.Popup_axis-bottom__hZwwr.Popup_float-left__tz7fX{transform-origin:top right}.Popup_axis-right__LMYVy.Popup_float-middle__Dmnn1{transform-origin:center left}.Popup_axis-right__LMYVy.Popup_float-top__8SQAu{transform-origin:bottom left}.Popup_axis-right__LMYVy.Popup_float-bottom__7flve{transform-origin:top left}.Popup_axis-left__SFKm-.Popup_float-middle__Dmnn1{transform-origin:center right}.Popup_axis-left__SFKm-.Popup_float-top__8SQAu{transform-origin:bottom right}.Popup_axis-left__SFKm-.Popup_float-bottom__7flve{transform-origin:top right}";
+var S = {"root":"Popup_root__uQ-fP","contentWrapper":"Popup_contentWrapper__2yi-2","inline":"Popup_inline__1-l1S","isOpen":"Popup_isOpen__BRIdP","content":"Popup_content__e8Qyu","trigger":"Popup_trigger__jQNaQ","disabled":"Popup_disabled__DlE9y","blur":"Popup_blur__1hfU8","size-s":"Popup_size-s__UmixP","round":"Popup_round__7rD1m","size-m":"Popup_size-m__FYpTL","size-l":"Popup_size-l__BTS57","elevation-1":"Popup_elevation-1__vmP3e","elevation-2":"Popup_elevation-2__Ci4sI","outlined":"Popup_outlined__g3cJV","animating":"Popup_animating__kR0qF","axis-top":"Popup_axis-top__BaLgG","axis-bottom":"Popup_axis-bottom__hZwwr","axis-right":"Popup_axis-right__LMYVy","axis-left":"Popup_axis-left__SFKm-","float-top":"Popup_float-top__8SQAu","float-right":"Popup_float-right__mdm-3","float-bottom":"Popup_float-bottom__7flve","float-left":"Popup_float-left__tz7fX","float-middle":"Popup_float-middle__Dmnn1"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/src/hooks/useEvent.js

@@ -1,25 +1,23 @@
 import { useEffect } from 'react';
 
-function useEvent({ elem, event, callback, isActive = true, }) {
+function useEvent({ elem, event, callback, isActive = true, isCapture = false, }) {
     useEffect(() => {
         const events = Array.isArray(event) ? event : [event];
         const elems = elem ? (Array.isArray(elem) ? elem : [elem]) : [document];
         const getElem = (el) => el && ('current' in el ? el.current : el);
-        const each = cb => {
+        const each = (cb) => {
             events.forEach(ev => {
                 elems.forEach(el => cb(getElem(el), ev));
             });
         };
         const enable = () => {
-            each((el, ev) => el?.addEventListener(ev, callback));
+            each((el, ev) => el?.addEventListener(ev, callback, isCapture));
         };
         const disable = () => {
             each((el, ev) => el?.removeEventListener(ev, callback));
         };
-        const hasRef = !elem || elems.some(getElem);
-        if (isActive && hasRef) {
+        if (isActive)
             enable();
-        }
         return () => {
             disable();
         };

package/dist/esm/src/hooks/useResizeObserver.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+
+const useResizeObserver = (ref, callback) => {
+    useEffect(() => {
+        if (!ref.current)
+            return;
+        const observer = new ResizeObserver(entries => {
+            callback(entries[0]);
+        });
+        observer.observe(ref.current);
+        return () => observer.disconnect();
+    }, [ref, callback]);
+};
+
+export { useResizeObserver };

package/dist/esm/src/tools/dom.js

@@ -5,11 +5,22 @@ import 'compareq';
 import 'lodash.pick';
 import './queryParams.js';
 
-function getCoords(elem) {
+const DEFAULT_OFFSET_SIZE = 3;
+function getCoords(elem, direction = 'bottom', { left = /^right/.test(direction)
+    ? DEFAULT_OFFSET_SIZE
+    : /^left/.test(direction)
+        ? -DEFAULT_OFFSET_SIZE
+        : 0, top = /^bottom/.test(direction)
+    ? DEFAULT_OFFSET_SIZE
+    : /^top/.test(direction)
+        ? -DEFAULT_OFFSET_SIZE
+        : 0, } = {}) {
     const box = elem.getBoundingClientRect();
     return {
-        top: box.top + window.pageYOffset,
-        left: box.left + window.pageXOffset,
+        top: box.top + window.scrollY + top,
+        left: box.left + window.scrollX + left,
+        // right: box.right + window.scrollX + right,
+        // bottom: box.bottom + window.scrollY + bottom,
     };
 }
 function hasParent(elem, parentElem) {

package/dist/esm/types/src/components/Autocomplete/Autocomplete.types.d.ts

@@ -16,4 +16,6 @@ export type Props = FormControl<Value, HTMLInputElement> & {
     debounceDelay?: number;
     inputProps?: Partial<InputProps>;
     popupProps?: Partial<PopupProps>;
+    round?: boolean;
+    blur?: boolean;
 };

package/dist/esm/types/src/components/Icon/Icon.d.ts

@@ -37,6 +37,7 @@ export declare const icons: {
     image: () => Promise<any>;
     instagram: () => Promise<any>;
     home: () => Promise<any>;
+    layers: () => Promise<any>;
     link: () => Promise<any>;
     loader: () => Promise<any>;
     map: () => Promise<any>;

package/dist/esm/types/src/components/Icon/icons/index.d.ts

@@ -36,6 +36,7 @@ declare const _default: {
     image: () => Promise<any>;
     instagram: () => Promise<any>;
     home: () => Promise<any>;
+    layers: () => Promise<any>;
     link: () => Promise<any>;
     loader: () => Promise<any>;
     map: () => Promise<any>;

package/dist/esm/types/src/components/Menu/Menu.d.ts

@@ -1,6 +1,5 @@
-import { Scroll } from 'uilib/components/Scroll/Scroll';
 import { MenuGroupProps, MenuItemProps, MenuProps } from './Menu.types';
-export declare const Menu: import("react").ForwardRefExoticComponent<MenuProps & import("react").RefAttributes<typeof Scroll>> & {
+export declare const Menu: import("react").ForwardRefExoticComponent<MenuProps & import("react").RefAttributes<Scroll>> & {
     Item: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
     Group: import("react").FC<MenuGroupProps>;
 };

package/dist/esm/types/src/components/Popup/Popup.types.d.ts

@@ -17,8 +17,15 @@ export type Props = ComponentType & {
     inline?: boolean;
     paranja?: boolean;
     blur?: boolean;
+    round?: boolean;
     size?: Size;
     elevation?: 1 | 2;
+    offset?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
     direction?: Direction;
     trigger?: ReactNode;
     triggerProps?: TriggerPropsType;

package/dist/esm/types/src/hooks/index.d.ts

@@ -1,5 +1,6 @@
+export * from './useThrottle';
 export * from './useDebounce';
 export * from './useEvent';
-export * from './useThrottle';
 export * from './useIsMounted';
 export * from './useListKeyboardControl';
+export * from './useResizeObserver';

package/dist/esm/types/src/hooks/useClickOutside.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export default function useClickOutside(elem: RefObject<HTMLElement>, callback: () => void, isActive?: boolean): void;

package/dist/esm/types/src/hooks/useEvent.d.ts

@@ -4,5 +4,6 @@ export type UseEventParams = {
     event: string | string[];
     callback: (event: Event) => void;
     isActive?: boolean;
+    isCapture?: boolean;
 };
-export default function useEvent({ elem, event, callback, isActive, }: UseEventParams): void;
+export default function useEvent({ elem, event, callback, isActive, isCapture, }: UseEventParams): void;

package/dist/esm/types/src/tools/dom.d.ts

@@ -1,4 +1,7 @@
-export declare function getCoords(elem: any): {
+export declare function getCoords(elem: any, direction?: string, { left, top, }?: {
+    left?: number;
+    top?: number;
+}): {
     top: any;
     left: any;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "4.21.3",
+  "version": "4.22.0",
   "description": "React UI components library",
   "scripts": {
     "test": "jest",