@vitus-labs/elements 0.21.0 → 0.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/lib/analysis/vitus-labs-elements.browser.js.html +1 -1
- package/lib/analysis/vitus-labs-elements.js.html +1 -1
- package/lib/analysis/vitus-labs-elements.module.js.html +1 -1
- package/lib/analysis/vitus-labs-elements.native.js.html +1 -1
- package/lib/analysis/vitus-labs-elements.umd.js.html +1 -1
- package/lib/analysis/vitus-labs-elements.umd.min.js.html +1 -1
- package/lib/index.d.ts +2 -1
- package/lib/types/Overlay/useOverlay.d.ts +2 -1
- package/lib/vitus-labs-elements.browser.js +18 -17
- package/lib/vitus-labs-elements.browser.js.map +1 -1
- package/lib/vitus-labs-elements.js +18 -17
- package/lib/vitus-labs-elements.js.map +1 -1
- package/lib/vitus-labs-elements.module.js +18 -17
- package/lib/vitus-labs-elements.module.js.map +1 -1
- package/lib/vitus-labs-elements.native.js +18 -17
- package/lib/vitus-labs-elements.native.js.map +1 -1
- package/lib/vitus-labs-elements.umd.js +18 -17
- package/lib/vitus-labs-elements.umd.js.map +1 -1
- package/lib/vitus-labs-elements.umd.min.js +8 -8
- package/lib/vitus-labs-elements.umd.min.js.map +1 -1
- package/package.json +5 -5
|
@@ -6424,7 +6424,7 @@ var drawChart = (function (exports) {
|
|
|
6424
6424
|
</script>
|
|
6425
6425
|
<script>
|
|
6426
6426
|
/*<!--*/
|
|
6427
|
-
const data = {"version":2,"tree":{"name":"root","children":[{"name":"vitus-labs-elements.umd.min.js","children":[{"name":"src","children":[{"uid":"
|
|
6427
|
+
const data = {"version":2,"tree":{"name":"root","children":[{"name":"vitus-labs-elements.umd.min.js","children":[{"name":"src","children":[{"uid":"ea31-217","name":"constants.ts"},{"name":"helpers","children":[{"name":"Wrapper","children":[{"uid":"ea31-219","name":"constants.ts"},{"uid":"ea31-221","name":"utils.ts"},{"uid":"ea31-223","name":"styled.ts"},{"uid":"ea31-225","name":"component.tsx"}]},{"name":"Content","children":[{"uid":"ea31-227","name":"styled.ts"},{"uid":"ea31-229","name":"component.tsx"}]},{"name":"Iterator/component.tsx","uid":"ea31-239"}]},{"name":"Element","children":[{"uid":"ea31-231","name":"constants.ts"},{"uid":"ea31-233","name":"utils.ts"},{"uid":"ea31-235","name":"component.tsx"},{"uid":"ea31-237","name":"withEqualSizeBeforeAfter.tsx"}]},{"name":"List","children":[{"uid":"ea31-241","name":"component.tsx"},{"uid":"ea31-243","name":"withActiveState.tsx"}]},{"name":"Portal/component.ts","uid":"ea31-245"},{"name":"Overlay","children":[{"uid":"ea31-247","name":"context.tsx"},{"uid":"ea31-249","name":"useOverlay.tsx"},{"uid":"ea31-251","name":"component.tsx"}]},{"name":"Text","children":[{"uid":"ea31-253","name":"styled.ts"},{"uid":"ea31-255","name":"component.tsx"}]},{"uid":"ea31-257","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"ea31-217":{"renderedLength":102,"gzipLength":117,"brotliLength":0,"mainUid":"ea31-216"},"ea31-219":{"renderedLength":262,"gzipLength":212,"brotliLength":0,"mainUid":"ea31-218"},"ea31-221":{"renderedLength":117,"gzipLength":132,"brotliLength":0,"mainUid":"ea31-220"},"ea31-223":{"renderedLength":1078,"gzipLength":467,"brotliLength":0,"mainUid":"ea31-222"},"ea31-225":{"renderedLength":1230,"gzipLength":439,"brotliLength":0,"mainUid":"ea31-224"},"ea31-227":{"renderedLength":1756,"gzipLength":649,"brotliLength":0,"mainUid":"ea31-226"},"ea31-229":{"renderedLength":563,"gzipLength":281,"brotliLength":0,"mainUid":"ea31-228"},"ea31-231":{"renderedLength":945,"gzipLength":269,"brotliLength":0,"mainUid":"ea31-230"},"ea31-233":{"renderedLength":142,"gzipLength":118,"brotliLength":0,"mainUid":"ea31-232"},"ea31-235":{"renderedLength":5056,"gzipLength":1163,"brotliLength":0,"mainUid":"ea31-234"},"ea31-237":{"renderedLength":1970,"gzipLength":607,"brotliLength":0,"mainUid":"ea31-236"},"ea31-239":{"renderedLength":7384,"gzipLength":1319,"brotliLength":0,"mainUid":"ea31-238"},"ea31-241":{"renderedLength":587,"gzipLength":309,"brotliLength":0,"mainUid":"ea31-240"},"ea31-243":{"renderedLength":4819,"gzipLength":1096,"brotliLength":0,"mainUid":"ea31-242"},"ea31-245":{"renderedLength":503,"gzipLength":293,"brotliLength":0,"mainUid":"ea31-244"},"ea31-247":{"renderedLength":104,"gzipLength":88,"brotliLength":0,"mainUid":"ea31-246"},"ea31-249":{"renderedLength":13576,"gzipLength":2261,"brotliLength":0,"mainUid":"ea31-248"},"ea31-251":{"renderedLength":919,"gzipLength":437,"brotliLength":0,"mainUid":"ea31-250"},"ea31-253":{"renderedLength":352,"gzipLength":237,"brotliLength":0,"mainUid":"ea31-252"},"ea31-255":{"renderedLength":615,"gzipLength":369,"brotliLength":0,"mainUid":"ea31-254"},"ea31-257":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"mainUid":"ea31-256"}},"nodeMetas":{"ea31-216":{"id":"/src/constants.ts","moduleParts":{"vitus-labs-elements.umd.min.js":"ea31-217"},"imported":[],"importedBy":[{"uid":"ea31-234"},{"uid":"ea31-240"},{"uid":"ea31-250"},{"uid":"ea31-244"},{"uid":"ea31-254"}]},"ea31-218":{"id":"/src/helpers/Wrapper/constants.ts","moduleParts":{"vitus-labs-elements.umd.min.js":"ea31-219"},"imported":[],"importedBy":[{"uid":"ea31-220"}]},"ea31-220":{"id":"/src/helpers/Wrapper/utils.ts","moduleParts":{"vitus-labs-elements.umd.min.js":"ea31-221"},"imported":[{"uid":"ea31-218"}],"importedBy":[{"uid":"ea31-224"}]},"ea31-222":{"id":"/src/helpers/Wrapper/styled.ts","moduleParts":{"vitus-labs-elements.umd.min.js":"ea31-223"},"imported":[{"uid":"ea31-265"},{"uid":"ea31-258"}],"importedBy":[{"uid":"ea31-224"}]},"ea31-224":{"id":"/src/helpers/Wrapper/component.tsx","moduleParts":{"vitus-labs-elements.umd.min.js":"ea31-225"},"imported":[{"uid":"ea31-264"},{"uid":"ea31-220"},{"uid":"ea31-222"}],"importedBy":[{"uid":"ea31-269"}]},"ea31-226":{"id":"/src/helpers/Content/styled.ts","moduleParts":{"vitus-labs-elements.umd.min.js":"ea31-227"},"imported":[{"uid":"ea31-265"},{"uid":"ea31-258"}],"importedBy":[{"uid":"ea31-228"}]},"ea31-228":{"id":"/src/helpers/Content/component.tsx","moduleParts":{"vitus-labs-elements.umd.min.js":"ea31-229"},"imported":[{"uid":"ea31-264"},{"uid":"ea31-226"}],"importedBy":[{"uid":"ea31-270"}]},"ea31-230":{"id":"/src/Element/constants.ts","moduleParts":{"vitus-labs-elements.umd.min.js":"ea31-231"},"imported":[],"importedBy":[{"uid":"ea31-232"}]},"ea31-232":{"id":"/src/Element/utils.ts","moduleParts":{"vitus-labs-elements.umd.min.js":"ea31-233"},"imported":[{"uid":"ea31-230"}],"importedBy":[{"uid":"ea31-234"}]},"ea31-234":{"id":"/src/Element/component.tsx","moduleParts":{"vitus-labs-elements.umd.min.js":"ea31-235"},"imported":[{"uid":"ea31-264"},{"uid":"ea31-265"},{"uid":"ea31-216"},{"uid":"ea31-266"},{"uid":"ea31-232"}],"importedBy":[{"uid":"ea31-259"}]},"ea31-236":{"id":"/src/Element/withEqualSizeBeforeAfter.tsx","moduleParts":{"vitus-labs-elements.umd.min.js":"ea31-237"},"imported":[{"uid":"ea31-264"},{"uid":"ea31-265"}],"importedBy":[{"uid":"ea31-259"}]},"ea31-238":{"id":"/src/helpers/Iterator/component.tsx","moduleParts":{"vitus-labs-elements.umd.min.js":"ea31-239"},"imported":[{"uid":"ea31-264"},{"uid":"ea31-265"}],"importedBy":[{"uid":"ea31-267"}]},"ea31-240":{"id":"/src/List/component.tsx","moduleParts":{"vitus-labs-elements.umd.min.js":"ea31-241"},"imported":[{"uid":"ea31-264"},{"uid":"ea31-265"},{"uid":"ea31-216"},{"uid":"ea31-259"},{"uid":"ea31-267"}],"importedBy":[{"uid":"ea31-260"}]},"ea31-242":{"id":"/src/List/withActiveState.tsx","moduleParts":{"vitus-labs-elements.umd.min.js":"ea31-243"},"imported":[{"uid":"ea31-264"}],"importedBy":[{"uid":"ea31-260"}]},"ea31-244":{"id":"/src/Portal/component.ts","moduleParts":{"vitus-labs-elements.umd.min.js":"ea31-245"},"imported":[{"uid":"ea31-264"},{"uid":"ea31-268"},{"uid":"ea31-216"}],"importedBy":[{"uid":"ea31-262"}]},"ea31-246":{"id":"/src/Overlay/context.tsx","moduleParts":{"vitus-labs-elements.umd.min.js":"ea31-247"},"imported":[{"uid":"ea31-264"}],"importedBy":[{"uid":"ea31-250"},{"uid":"ea31-248"}]},"ea31-248":{"id":"/src/Overlay/useOverlay.tsx","moduleParts":{"vitus-labs-elements.umd.min.js":"ea31-249"},"imported":[{"uid":"ea31-264"},{"uid":"ea31-265"},{"uid":"ea31-258"},{"uid":"ea31-246"}],"importedBy":[{"uid":"ea31-261"},{"uid":"ea31-250"}]},"ea31-250":{"id":"/src/Overlay/component.tsx","moduleParts":{"vitus-labs-elements.umd.min.js":"ea31-251"},"imported":[{"uid":"ea31-264"},{"uid":"ea31-265"},{"uid":"ea31-216"},{"uid":"ea31-262"},{"uid":"ea31-248"},{"uid":"ea31-246"}],"importedBy":[{"uid":"ea31-261"}]},"ea31-252":{"id":"/src/Text/styled.ts","moduleParts":{"vitus-labs-elements.umd.min.js":"ea31-253"},"imported":[{"uid":"ea31-265"},{"uid":"ea31-258"}],"importedBy":[{"uid":"ea31-254"}]},"ea31-254":{"id":"/src/Text/component.tsx","moduleParts":{"vitus-labs-elements.umd.min.js":"ea31-255"},"imported":[{"uid":"ea31-264"},{"uid":"ea31-216"},{"uid":"ea31-252"}],"importedBy":[{"uid":"ea31-263"}]},"ea31-256":{"id":"/src/index.ts","moduleParts":{"vitus-labs-elements.umd.min.js":"ea31-257"},"imported":[{"uid":"ea31-258"},{"uid":"ea31-259"},{"uid":"ea31-260"},{"uid":"ea31-261"},{"uid":"ea31-262"},{"uid":"ea31-263"}],"importedBy":[],"isEntry":true},"ea31-258":{"id":"@vitus-labs/unistyle","moduleParts":{},"imported":[],"importedBy":[{"uid":"ea31-256"},{"uid":"ea31-248"},{"uid":"ea31-252"},{"uid":"ea31-222"},{"uid":"ea31-226"}],"isExternal":true},"ea31-259":{"id":"/src/Element/index.ts","moduleParts":{},"imported":[{"uid":"ea31-234"},{"uid":"ea31-236"}],"importedBy":[{"uid":"ea31-256"},{"uid":"ea31-240"}]},"ea31-260":{"id":"/src/List/index.ts","moduleParts":{},"imported":[{"uid":"ea31-240"},{"uid":"ea31-242"}],"importedBy":[{"uid":"ea31-256"}]},"ea31-261":{"id":"/src/Overlay/index.ts","moduleParts":{},"imported":[{"uid":"ea31-250"},{"uid":"ea31-248"}],"importedBy":[{"uid":"ea31-256"}]},"ea31-262":{"id":"/src/Portal/index.ts","moduleParts":{},"imported":[{"uid":"ea31-244"}],"importedBy":[{"uid":"ea31-256"},{"uid":"ea31-250"}]},"ea31-263":{"id":"/src/Text/index.ts","moduleParts":{},"imported":[{"uid":"ea31-254"}],"importedBy":[{"uid":"ea31-256"}]},"ea31-264":{"id":"react","moduleParts":{},"imported":[],"importedBy":[{"uid":"ea31-234"},{"uid":"ea31-236"},{"uid":"ea31-240"},{"uid":"ea31-242"},{"uid":"ea31-250"},{"uid":"ea31-248"},{"uid":"ea31-244"},{"uid":"ea31-254"},{"uid":"ea31-246"},{"uid":"ea31-238"},{"uid":"ea31-224"},{"uid":"ea31-228"}],"isExternal":true},"ea31-265":{"id":"@vitus-labs/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"ea31-234"},{"uid":"ea31-236"},{"uid":"ea31-240"},{"uid":"ea31-250"},{"uid":"ea31-248"},{"uid":"ea31-252"},{"uid":"ea31-238"},{"uid":"ea31-222"},{"uid":"ea31-226"}],"isExternal":true},"ea31-266":{"id":"/src/helpers/index.ts","moduleParts":{},"imported":[{"uid":"ea31-269"},{"uid":"ea31-270"}],"importedBy":[{"uid":"ea31-234"}]},"ea31-267":{"id":"/src/helpers/Iterator/index.ts","moduleParts":{},"imported":[{"uid":"ea31-238"}],"importedBy":[{"uid":"ea31-240"}]},"ea31-268":{"id":"react-dom","moduleParts":{},"imported":[],"importedBy":[{"uid":"ea31-244"}],"isExternal":true},"ea31-269":{"id":"/src/helpers/Wrapper/index.ts","moduleParts":{},"imported":[{"uid":"ea31-224"}],"importedBy":[{"uid":"ea31-266"}]},"ea31-270":{"id":"/src/helpers/Content/index.ts","moduleParts":{},"imported":[{"uid":"ea31-228"}],"importedBy":[{"uid":"ea31-266"}]}},"env":{"rollup":"2.66.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
|
|
6428
6428
|
|
|
6429
6429
|
const run = () => {
|
|
6430
6430
|
const width = window.innerWidth;
|
package/lib/index.d.ts
CHANGED
|
@@ -157,8 +157,9 @@ declare type UseOverlayProps = {
|
|
|
157
157
|
throttleDelay?: number;
|
|
158
158
|
customScrollListener?: HTMLElement;
|
|
159
159
|
closeOnEsc?: boolean;
|
|
160
|
+
disabled?: boolean;
|
|
160
161
|
};
|
|
161
|
-
declare const _default: ({ isOpen, openOn, closeOn, type, align, position, alignX, alignY, offsetX, offsetY, throttleDelay, customScrollListener, closeOnEsc, }: UseOverlayProps) => {
|
|
162
|
+
declare const _default: ({ isOpen, openOn, closeOn, type, align, position, alignX, alignY, offsetX, offsetY, throttleDelay, customScrollListener, closeOnEsc, disabled, }: UseOverlayProps) => {
|
|
162
163
|
triggerRef: React.MutableRefObject<HTMLElement | undefined>;
|
|
163
164
|
contentRef: React.MutableRefObject<HTMLElement | undefined>;
|
|
164
165
|
active: boolean;
|
|
@@ -15,8 +15,9 @@ export declare type UseOverlayProps = {
|
|
|
15
15
|
throttleDelay?: number;
|
|
16
16
|
customScrollListener?: HTMLElement;
|
|
17
17
|
closeOnEsc?: boolean;
|
|
18
|
+
disabled?: boolean;
|
|
18
19
|
};
|
|
19
|
-
declare const _default: ({ isOpen, openOn, closeOn, type, align, position, alignX, alignY, offsetX, offsetY, throttleDelay, customScrollListener, closeOnEsc, }: UseOverlayProps) => {
|
|
20
|
+
declare const _default: ({ isOpen, openOn, closeOn, type, align, position, alignX, alignY, offsetX, offsetY, throttleDelay, customScrollListener, closeOnEsc, disabled, }: UseOverlayProps) => {
|
|
20
21
|
triggerRef: import("react").MutableRefObject<HTMLElement | undefined>;
|
|
21
22
|
contentRef: import("react").MutableRefObject<HTMLElement | undefined>;
|
|
22
23
|
active: boolean;
|
|
@@ -710,7 +710,7 @@ align = 'bottom', // * main align prop * top | left | bottom | right
|
|
|
710
710
|
position = 'fixed', // absolute | fixed | relative | static
|
|
711
711
|
alignX = 'left', // left | center | right
|
|
712
712
|
alignY = 'bottom', // top | center | bottom
|
|
713
|
-
offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc = true, }) => {
|
|
713
|
+
offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc = true, disabled, }) => {
|
|
714
714
|
const { rootSize } = useContext(context$1);
|
|
715
715
|
const ctx = useOverlayContext();
|
|
716
716
|
const [blocked, handleBlocked] = useState(false);
|
|
@@ -738,15 +738,15 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc
|
|
|
738
738
|
// on document events (or custom scroll if set)
|
|
739
739
|
useEffect(() => {
|
|
740
740
|
if (visible) {
|
|
741
|
-
|
|
742
|
-
|
|
741
|
+
window.addEventListener('resize', handleContentPosition, false);
|
|
742
|
+
window.addEventListener('scroll', handleContentPosition, false);
|
|
743
743
|
if (customScrollListener) {
|
|
744
744
|
customScrollListener.addEventListener('scroll', handleContentPosition, false);
|
|
745
745
|
}
|
|
746
746
|
}
|
|
747
747
|
return () => {
|
|
748
|
-
|
|
749
|
-
|
|
748
|
+
window.removeEventListener('resize', handleContentPosition, false);
|
|
749
|
+
window.removeEventListener('scroll', handleContentPosition, false);
|
|
750
750
|
if (customScrollListener) {
|
|
751
751
|
customScrollListener.removeEventListener('scroll', handleContentPosition, false);
|
|
752
752
|
}
|
|
@@ -775,40 +775,41 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc
|
|
|
775
775
|
};
|
|
776
776
|
}, [visible, type, customScrollListener]);
|
|
777
777
|
useEffect(() => {
|
|
778
|
-
// enable
|
|
779
|
-
|
|
778
|
+
// enable overlay manipulation only when the state is NOT blocked=true
|
|
779
|
+
// nor in disabled state
|
|
780
|
+
if (!blocked || !disabled) {
|
|
780
781
|
if (openOn === 'click' ||
|
|
781
782
|
closeOn === 'click' ||
|
|
782
783
|
closeOn === 'clickOnTrigger' ||
|
|
783
784
|
closeOn === 'clickOutsideContent') {
|
|
784
|
-
|
|
785
|
+
window.addEventListener('click', handleVisibilityByEventType, false);
|
|
785
786
|
}
|
|
786
787
|
if (openOn === 'hover' || closeOn === 'hover') {
|
|
787
|
-
|
|
788
|
+
window.addEventListener('mousemove', handleMouseMove, false);
|
|
788
789
|
}
|
|
789
790
|
// only when content is visible
|
|
790
791
|
if (visible) {
|
|
791
792
|
if (customScrollListener) {
|
|
792
793
|
customScrollListener.addEventListener('scroll', handleMouseMove, false);
|
|
793
794
|
}
|
|
794
|
-
|
|
795
|
+
window.addEventListener('scroll', handleMouseMove, false);
|
|
795
796
|
if (closeOnEsc) {
|
|
796
|
-
|
|
797
|
+
window.addEventListener('keydown', handleEscKey);
|
|
797
798
|
}
|
|
798
799
|
}
|
|
799
800
|
}
|
|
800
801
|
return () => {
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
802
|
+
window.removeEventListener('scroll', handleMouseMove, false);
|
|
803
|
+
window.removeEventListener('click', handleVisibilityByEventType, false);
|
|
804
|
+
window.removeEventListener('mousemove', handleMouseMove, false);
|
|
804
805
|
if (closeOnEsc) {
|
|
805
|
-
|
|
806
|
+
window.removeEventListener('keydown', handleEscKey);
|
|
806
807
|
}
|
|
807
808
|
if (customScrollListener) {
|
|
808
809
|
customScrollListener.removeEventListener('scroll', handleMouseMove, false);
|
|
809
810
|
}
|
|
810
811
|
};
|
|
811
|
-
}, [openOn, closeOn, visible, blocked]);
|
|
812
|
+
}, [openOn, closeOn, visible, blocked, disabled]);
|
|
812
813
|
const observeTrigger = (e) => {
|
|
813
814
|
if (e && e.target && triggerRef.current) {
|
|
814
815
|
return (triggerRef.current.contains(e.target) || e.target === triggerRef.current);
|
|
@@ -951,7 +952,7 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc
|
|
|
951
952
|
contentRef.current.style.right = value([overlayPosition.right], rootSize);
|
|
952
953
|
};
|
|
953
954
|
const handleVisibilityByEventType = (e) => {
|
|
954
|
-
if (!visible) {
|
|
955
|
+
if (!visible && !disabled) {
|
|
955
956
|
if (openOn === 'hover' && e.type === 'mousemove') {
|
|
956
957
|
if (observeTrigger(e)) {
|
|
957
958
|
showContent();
|