@homecode/ui 4.21.4 → 4.22.0
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.
- package/dist/esm/src/components/Autocomplete/Autocomplete.js +3 -3
- package/dist/esm/src/components/Menu/Menu.js +8 -7
- package/dist/esm/src/components/Menu/Menu.styl.js +1 -1
- package/dist/esm/src/components/Popup/Popup.js +9 -7
- package/dist/esm/src/components/Popup/Popup.styl.js +2 -2
- package/dist/esm/src/hooks/useEvent.js +4 -6
- package/dist/esm/src/tools/dom.js +14 -3
- package/dist/esm/types/src/components/Autocomplete/Autocomplete.types.d.ts +2 -0
- package/dist/esm/types/src/components/Icon/Icon.d.ts +1 -0
- package/dist/esm/types/src/components/Popup/Popup.types.d.ts +7 -0
- package/dist/esm/types/src/hooks/useClickOutside.d.ts +2 -0
- package/dist/esm/types/src/hooks/useEvent.d.ts +2 -1
- package/dist/esm/types/src/tools/dom.d.ts +4 -1
- package/package.json +1 -1
|
@@ -57,7 +57,7 @@ import '../Virtualized/List/List.styl.js';
|
|
|
57
57
|
import '../Virtualized/List/ListScroll.styl.js';
|
|
58
58
|
|
|
59
59
|
function Autocomplete(props) {
|
|
60
|
-
const { className, inputWrapperClassName, value, onChange, size = 'm', getOptions, onSelect, debounceDelay = 300, inputProps = {}, popupProps = {}, } = props;
|
|
60
|
+
const { className, inputWrapperClassName, value, onChange, size = 'm', getOptions, onSelect, debounceDelay = 300, round = false, blur = false, inputProps = {}, popupProps = {}, } = props;
|
|
61
61
|
const isMounted = useIsMounted();
|
|
62
62
|
const [options, setOptions] = useState([]);
|
|
63
63
|
const [isLoading, setIsLoading] = useState(false);
|
|
@@ -140,9 +140,9 @@ function Autocomplete(props) {
|
|
|
140
140
|
return null;
|
|
141
141
|
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))) }));
|
|
142
142
|
}, [options, focusedIndex]);
|
|
143
|
-
return (jsx(Popup, { className: classes, isOpen: isOpen, focusControl: true, size: size, direction: "bottom", ...popupProps, trigger: jsxs("div", { className: inputWrapperClassName, children: [jsx(Input, { ref: inputRef,
|
|
143
|
+
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,
|
|
144
144
|
// @ts-ignore
|
|
145
|
-
size: size, ...inputProps, value: searchValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, className: inputProps.className }), isLoading && (jsx(Shimmer, { className: S.shimmer, size: size, round:
|
|
145
|
+
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: {
|
|
146
146
|
className: S.popupContent,
|
|
147
147
|
} }));
|
|
148
148
|
}
|
|
@@ -6,17 +6,18 @@ import S from './Menu.styl.js';
|
|
|
6
6
|
|
|
7
7
|
// @ts-ignore
|
|
8
8
|
const MenuComponent = forwardRef(({ children, className, ...props }, ref) => {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
const size = props.size || 'm';
|
|
10
|
+
return (jsx(Scroll, { y: true,
|
|
11
|
+
// @ts-ignore
|
|
12
|
+
ref: ref, className: cn(S.root, className, S[`size-${size}`]), ...props, children: children }));
|
|
12
13
|
});
|
|
13
14
|
const MenuItem = forwardRef((props, ref) => {
|
|
14
|
-
const { children, className, selected, focused, disabled, level = 0, onClick,
|
|
15
|
-
const classes = cn(S.item,
|
|
15
|
+
const { children, className, selected, focused, disabled, level = 0, onClick, ...rest } = props;
|
|
16
|
+
const classes = cn(S.item, level > 0 && S[`level-${level}`], selected && S.selected, focused && S.focused, disabled && S.disabled, className);
|
|
16
17
|
return (jsx("div", { ref: ref, className: classes, onClick: disabled ? undefined : onClick, ...rest, children: jsx("span", { children: children }) }));
|
|
17
18
|
});
|
|
18
|
-
const MenuGroup = ({ children, className, label, ...props }) => {
|
|
19
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: cn(S.group, className), ...props, children: label }), children] }));
|
|
19
|
+
const MenuGroup = ({ children, className, label, size = 'm', ...props }) => {
|
|
20
|
+
return (jsxs(Fragment, { children: [jsx("div", { className: cn(S.group, className, S[`size-${size}`]), ...props, children: label }), children] }));
|
|
20
21
|
};
|
|
21
22
|
const Menu = Object.assign(MenuComponent, {
|
|
22
23
|
Item: MenuItem,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
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:
|
|
3
|
+
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}}";
|
|
4
4
|
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"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
@@ -141,10 +141,12 @@ class Popup extends Component {
|
|
|
141
141
|
}
|
|
142
142
|
updateBoundsThrottled = throttle(() => {
|
|
143
143
|
const trigger = this.triggerElem.current;
|
|
144
|
+
const offset = this.props.offset || {};
|
|
145
|
+
const n = (num) => num || 0;
|
|
144
146
|
const bounds = {
|
|
145
|
-
minHeight: trigger.offsetHeight,
|
|
146
|
-
minWidth: trigger.offsetWidth,
|
|
147
|
-
...getCoords(trigger),
|
|
147
|
+
minHeight: trigger.offsetHeight - n(offset.top) - n(offset.bottom),
|
|
148
|
+
minWidth: trigger.offsetWidth - n(offset.left) - n(offset.right),
|
|
149
|
+
...getCoords(trigger, this.props.direction, this.props.offset),
|
|
148
150
|
};
|
|
149
151
|
Object.entries(bounds).forEach(([key, value]) => {
|
|
150
152
|
this.triggerElem.current.style[key] = value;
|
|
@@ -366,19 +368,19 @@ class Popup extends Component {
|
|
|
366
368
|
return (jsx("div", { className: classesTrigger, ...triggerProps, suppressHydrationWarning: true, "data-popup-id": this.id, ref: this.triggerElem, children: trigger }));
|
|
367
369
|
}
|
|
368
370
|
renderContent() {
|
|
369
|
-
const { content, contentProps = {}, wrapperProps = {}, size, disabled, inline, outlined, animated, paranja, blur, elevation, } = this.props;
|
|
371
|
+
const { content, contentProps = {}, wrapperProps = {}, size, disabled, inline, outlined, animated, paranja, blur, round, elevation, } = this.props;
|
|
370
372
|
const { isOpen, isContentVisible, animating, direction, triggerBounds, rootPopupId, } = this.state;
|
|
371
373
|
if (disabled)
|
|
372
374
|
return null;
|
|
373
|
-
const wrapperClasses = cn(S.contentWrapper,
|
|
375
|
+
const wrapperClasses = cn(S.contentWrapper, inline && S.inline, isOpen && S.isOpen, wrapperProps.className);
|
|
374
376
|
const trigger = this.triggerElem.current;
|
|
375
377
|
const [axis, float] = direction.split('-');
|
|
376
|
-
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);
|
|
378
|
+
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);
|
|
377
379
|
if (trigger && !inline && triggerBounds) {
|
|
378
380
|
wrapperProps.style = { ...triggerBounds };
|
|
379
381
|
}
|
|
380
382
|
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: {
|
|
381
|
-
marginTop:
|
|
383
|
+
marginTop: 100,
|
|
382
384
|
marginLeft: this.offset.left,
|
|
383
385
|
}, children: [paranja && !rootPopupId && (jsx(Paranja, { visible: isContentVisible, blur: blur })), isContentVisible && jsx(Fragment, { children: content })] }) }));
|
|
384
386
|
if (inline)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
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
|
|
4
|
-
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"};
|
|
3
|
+
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}";
|
|
4
|
+
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"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { S as default };
|
|
@@ -1,25 +1,23 @@
|
|
|
1
1
|
import { useEffect } from 'react';
|
|
2
2
|
|
|
3
|
-
function useEvent({ elem, event, callback, isActive = true, }) {
|
|
3
|
+
function useEvent({ elem, event, callback, isActive = true, isCapture = false, }) {
|
|
4
4
|
useEffect(() => {
|
|
5
5
|
const events = Array.isArray(event) ? event : [event];
|
|
6
6
|
const elems = elem ? (Array.isArray(elem) ? elem : [elem]) : [document];
|
|
7
7
|
const getElem = (el) => el && ('current' in el ? el.current : el);
|
|
8
|
-
const each = cb => {
|
|
8
|
+
const each = (cb) => {
|
|
9
9
|
events.forEach(ev => {
|
|
10
10
|
elems.forEach(el => cb(getElem(el), ev));
|
|
11
11
|
});
|
|
12
12
|
};
|
|
13
13
|
const enable = () => {
|
|
14
|
-
each((el, ev) => el?.addEventListener(ev, callback));
|
|
14
|
+
each((el, ev) => el?.addEventListener(ev, callback, isCapture));
|
|
15
15
|
};
|
|
16
16
|
const disable = () => {
|
|
17
17
|
each((el, ev) => el?.removeEventListener(ev, callback));
|
|
18
18
|
};
|
|
19
|
-
|
|
20
|
-
if (isActive && hasRef) {
|
|
19
|
+
if (isActive)
|
|
21
20
|
enable();
|
|
22
|
-
}
|
|
23
21
|
return () => {
|
|
24
22
|
disable();
|
|
25
23
|
};
|
|
@@ -5,11 +5,22 @@ import 'compareq';
|
|
|
5
5
|
import 'lodash.pick';
|
|
6
6
|
import './queryParams.js';
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
const DEFAULT_OFFSET_SIZE = 3;
|
|
9
|
+
function getCoords(elem, direction = 'bottom', { left = /^right/.test(direction)
|
|
10
|
+
? DEFAULT_OFFSET_SIZE
|
|
11
|
+
: /^left/.test(direction)
|
|
12
|
+
? -DEFAULT_OFFSET_SIZE
|
|
13
|
+
: 0, top = /^bottom/.test(direction)
|
|
14
|
+
? DEFAULT_OFFSET_SIZE
|
|
15
|
+
: /^top/.test(direction)
|
|
16
|
+
? -DEFAULT_OFFSET_SIZE
|
|
17
|
+
: 0, } = {}) {
|
|
9
18
|
const box = elem.getBoundingClientRect();
|
|
10
19
|
return {
|
|
11
|
-
top: box.top + window.
|
|
12
|
-
left: box.left + window.
|
|
20
|
+
top: box.top + window.scrollY + top,
|
|
21
|
+
left: box.left + window.scrollX + left,
|
|
22
|
+
// right: box.right + window.scrollX + right,
|
|
23
|
+
// bottom: box.bottom + window.scrollY + bottom,
|
|
13
24
|
};
|
|
14
25
|
}
|
|
15
26
|
function hasParent(elem, parentElem) {
|
|
@@ -17,8 +17,15 @@ export type Props = ComponentType & {
|
|
|
17
17
|
inline?: boolean;
|
|
18
18
|
paranja?: boolean;
|
|
19
19
|
blur?: boolean;
|
|
20
|
+
round?: boolean;
|
|
20
21
|
size?: Size;
|
|
21
22
|
elevation?: 1 | 2;
|
|
23
|
+
offset?: {
|
|
24
|
+
top?: number;
|
|
25
|
+
right?: number;
|
|
26
|
+
bottom?: number;
|
|
27
|
+
left?: number;
|
|
28
|
+
};
|
|
22
29
|
direction?: Direction;
|
|
23
30
|
trigger?: ReactNode;
|
|
24
31
|
triggerProps?: TriggerPropsType;
|
|
@@ -4,5 +4,6 @@ export type UseEventParams = {
|
|
|
4
4
|
event: string | string[];
|
|
5
5
|
callback: (event: Event) => void;
|
|
6
6
|
isActive?: boolean;
|
|
7
|
+
isCapture?: boolean;
|
|
7
8
|
};
|
|
8
|
-
export default function useEvent({ elem, event, callback, isActive, }: UseEventParams): void;
|
|
9
|
+
export default function useEvent({ elem, event, callback, isActive, isCapture, }: UseEventParams): void;
|