@axinom/mosaic-ui 0.64.0-rc.16 → 0.64.0-rc.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/components/InfoTooltip/InfoTooltip.d.ts.map +1 -1
  2. package/dist/components/InlineMenu/InlineMenu.d.ts.map +1 -1
  3. package/dist/index.es.js +4 -4
  4. package/dist/index.es.js.map +1 -1
  5. package/dist/index.js +4 -4
  6. package/dist/index.js.map +1 -1
  7. package/package.json +2 -2
  8. package/src/components/InfoTooltip/InfoTooltip.scss +65 -65
  9. package/src/components/InfoTooltip/InfoTooltip.tsx +35 -31
  10. package/src/components/InlineMenu/InlineMenu.tsx +39 -33
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@axinom/mosaic-ui",
3
- "version": "0.64.0-rc.16",
3
+ "version": "0.64.0-rc.18",
4
4
  "description": "UI components for building Axinom Mosaic applications",
5
5
  "author": "Axinom",
6
6
  "license": "PROPRIETARY",
@@ -112,5 +112,5 @@
112
112
  "publishConfig": {
113
113
  "access": "public"
114
114
  },
115
- "gitHead": "36be53de98dc95441930f738df41d7fb21192bde"
115
+ "gitHead": "7fe6ca7597898ff84cff4b1b00b596ff1dc7920f"
116
116
  }
package/src/components/InfoTooltip/InfoTooltip.scss CHANGED
@@ -16,88 +16,88 @@ $pop-up-arrow-extrusion: -7px;
16
16
  stroke: var(--infotooltip-icon-color, $infotooltip-icon-color);
17
17
  }
18
18
  }
19
+ }
19
20
 
20
- .container {
21
- @include boxSizing;
21
+ .container {
22
+ @include boxSizing;
22
23
 
23
- box-sizing: border-box;
24
- min-height: 50px;
25
- max-width: 650px;
26
- display: grid;
27
- grid: min-content 1fr / 1fr;
28
- width: max-content;
24
+ box-sizing: border-box;
25
+ min-height: 50px;
26
+ max-width: 650px;
27
+ display: grid;
28
+ grid: min-content 1fr / 1fr;
29
+ width: max-content;
29
30
 
30
- background-color: var(
31
- --infotooltip-background-color,
32
- $infotooltip-background-color
33
- );
31
+ background-color: var(
32
+ --infotooltip-background-color,
33
+ $infotooltip-background-color
34
+ );
34
35
 
35
- color: var(--infotooltip-text-color, $infotooltip-text-color);
36
- padding: 15px;
36
+ color: var(--infotooltip-text-color, $infotooltip-text-color);
37
+ padding: 15px;
37
38
 
38
- z-index: 10;
39
+ z-index: 10;
39
40
 
40
- .arrow,
41
- .arrow::before {
42
- position: absolute;
43
- width: 14px;
44
- height: 14px;
45
- background: inherit;
46
- }
41
+ .arrow,
42
+ .arrow::before {
43
+ position: absolute;
44
+ width: 14px;
45
+ height: 14px;
46
+ background: inherit;
47
+ }
47
48
 
48
- .arrow {
49
- z-index: -1;
50
- visibility: hidden;
49
+ .arrow {
50
+ z-index: -1;
51
+ visibility: hidden;
51
52
 
52
- background-color: var(
53
- --infotooltip-background-color,
54
- $infotooltip-background-color
55
- );
56
- }
53
+ background-color: var(
54
+ --infotooltip-background-color,
55
+ $infotooltip-background-color
56
+ );
57
+ }
57
58
 
58
- .arrow::before {
59
- visibility: visible;
60
- content: '';
61
- transform: rotate(45deg);
62
- }
59
+ .arrow::before {
60
+ visibility: visible;
61
+ content: '';
62
+ transform: rotate(45deg);
63
+ }
63
64
 
64
- &[data-popper-placement^='top'] {
65
- > .arrow {
66
- bottom: $pop-up-arrow-extrusion;
67
- }
65
+ &[data-popper-placement^='top'] {
66
+ > .arrow {
67
+ bottom: $pop-up-arrow-extrusion;
68
68
  }
69
+ }
69
70
 
70
- &[data-popper-placement^='bottom'] {
71
- > .arrow {
72
- top: $pop-up-arrow-extrusion;
73
- }
71
+ &[data-popper-placement^='bottom'] {
72
+ > .arrow {
73
+ top: $pop-up-arrow-extrusion;
74
74
  }
75
+ }
75
76
 
76
- &[data-popper-placement^='left'] {
77
- > .arrow {
78
- right: $pop-up-arrow-extrusion;
79
- }
77
+ &[data-popper-placement^='left'] {
78
+ > .arrow {
79
+ right: $pop-up-arrow-extrusion;
80
80
  }
81
+ }
81
82
 
82
- &[data-popper-placement^='right'] {
83
- > .arrow {
84
- left: $pop-up-arrow-extrusion;
85
- }
83
+ &[data-popper-placement^='right'] {
84
+ > .arrow {
85
+ left: $pop-up-arrow-extrusion;
86
86
  }
87
87
  }
88
+ }
88
89
 
89
- .info-tooltip-enter {
90
- opacity: 0;
91
- }
92
- .info-tooltip-enter-active {
93
- opacity: 1;
94
- transition: opacity 500ms ease-in;
95
- }
96
- .info-tooltip-exit {
97
- opacity: 1;
98
- }
99
- .info-tooltip-exit-active {
100
- opacity: 0;
101
- transition: opacity 500ms ease-out;
102
- }
90
+ .info-tooltip-enter {
91
+ opacity: 0;
92
+ }
93
+ .info-tooltip-enter-active {
94
+ opacity: 1;
95
+ transition: opacity 500ms ease-in;
96
+ }
97
+ .info-tooltip-exit {
98
+ opacity: 1;
99
+ }
100
+ .info-tooltip-exit-active {
101
+ opacity: 0;
102
+ transition: opacity 500ms ease-out;
103
103
  }
package/src/components/InfoTooltip/InfoTooltip.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import clsx from 'clsx';
2
2
  import React, { useState } from 'react';
3
+ import { createPortal } from 'react-dom';
3
4
  import { usePopper } from 'react-popper';
4
5
  import { CSSTransition } from 'react-transition-group';
5
6
  import { IconName, Icons } from '../Icons';
@@ -52,40 +53,43 @@ export const InfoTooltip: React.FC<InfoTooltipProps> = ({
52
53
  >
53
54
  <Icons icon={IconName.Info} className={clsx(classes.icon)} />
54
55
  </div>
55
- <CSSTransition
56
- in={showTooltip}
57
- timeout={200}
58
- classNames={{
59
- enter: classes['info-tooltip-enter'],
60
- enterActive: classes['info-tooltip-enter-active'],
61
- exit: classes['info-tooltip-exit'],
62
- exitActive: classes['info-tooltip-exit-active'],
63
- }}
64
- unmountOnExit
65
- >
66
- <div
67
- className={clsx(classes.container)}
68
- ref={setPopperElement as React.LegacyRef<HTMLDivElement>}
69
- style={styles.popper}
70
- {...attributes.popper}
71
- onClick={(e) => e.stopPropagation()}
72
- onMouseEnter={() => {
73
- clearTimeout(hideTooltipTimeout);
56
+ {createPortal(
57
+ <CSSTransition
58
+ in={showTooltip}
59
+ timeout={200}
60
+ classNames={{
61
+ enter: classes['info-tooltip-enter'],
62
+ enterActive: classes['info-tooltip-enter-active'],
63
+ exit: classes['info-tooltip-exit'],
64
+ exitActive: classes['info-tooltip-exit-active'],
74
65
  }}
75
- onMouseLeave={() =>
76
- (hideTooltipTimeout = global.setTimeout(() => {
77
- setShowTooltip(false);
78
- }, tooltipVisibleTime))
79
- }
66
+ unmountOnExit
80
67
  >
81
- {children}
82
68
  <div
83
- ref={setArrowElement as React.LegacyRef<HTMLDivElement>}
84
- className={clsx(classes.arrow)}
85
- style={styles.arrow}
86
- />
87
- </div>
88
- </CSSTransition>
69
+ className={clsx(classes.container)}
70
+ ref={setPopperElement as React.LegacyRef<HTMLDivElement>}
71
+ style={styles.popper}
72
+ {...attributes.popper}
73
+ onClick={(e) => e.stopPropagation()}
74
+ onMouseEnter={() => {
75
+ clearTimeout(hideTooltipTimeout);
76
+ }}
77
+ onMouseLeave={() =>
78
+ (hideTooltipTimeout = global.setTimeout(() => {
79
+ setShowTooltip(false);
80
+ }, tooltipVisibleTime))
81
+ }
82
+ >
83
+ {children}
84
+ <div
85
+ ref={setArrowElement as React.LegacyRef<HTMLDivElement>}
86
+ className={clsx(classes.arrow)}
87
+ style={styles.arrow}
88
+ />
89
+ </div>
90
+ </CSSTransition>,
91
+ document.body,
92
+ )}
89
93
  </div>
90
94
  );
91
95
  };
package/src/components/InlineMenu/InlineMenu.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import { Placement } from '@popperjs/core';
2
2
  import clsx from 'clsx';
3
3
  import React, { Ref, useState } from 'react';
4
+ import { createPortal } from 'react-dom';
4
5
  import { usePopper } from 'react-popper';
5
6
  import { useExpand } from '../../hooks/useExpand/useExpand';
6
7
  import { Actions, ActionsProps } from '../Actions';
@@ -104,40 +105,45 @@ export const InlineMenu: React.FC<InlineMenuProps> = ({
104
105
  )}
105
106
  dataTestId="inline-menu-button"
106
107
  />
107
- {isExpanded && (
108
- <div
109
- tabIndex={-1}
110
- className={clsx(classes.container, 'sub-menu-container', className)}
111
- ref={setPopperElement as React.LegacyRef<HTMLDivElement>}
112
- style={styles.popper}
113
- {...attributes.popper}
114
- onBlur={() => {
115
- onBlurTimeout = global.setTimeout(() => collapse(), 250);
116
- }}
117
- data-test-id="inline-menu"
118
- >
119
- <Actions
120
- {...rest}
121
- onActionClick={(e, action) => {
122
- if (
123
- action.confirmationMode &&
124
- action.confirmationMode !== 'None'
125
- ) {
126
- clearTimeout(onBlurTimeout);
127
- } else {
128
- onBlurTimeout = global.setTimeout(() => collapse(), 250);
129
- }
130
- onActionClick?.(e, action);
131
- }}
132
- />
108
+ {isExpanded &&
109
+ createPortal(
133
110
  <div
134
- ref={setArrowElement as React.LegacyRef<HTMLDivElement>}
135
- className={classes.arrow}
136
- // style={styles.arrow}
137
- style={{ ...styles.arrow, display: showArrow ? 'inherit' : 'none' }}
138
- />
139
- </div>
140
- )}
111
+ tabIndex={-1}
112
+ className={clsx(classes.container, 'sub-menu-container', className)}
113
+ ref={setPopperElement as React.LegacyRef<HTMLDivElement>}
114
+ style={styles.popper}
115
+ {...attributes.popper}
116
+ onBlur={() => {
117
+ onBlurTimeout = global.setTimeout(() => collapse(), 250);
118
+ }}
119
+ data-test-id="inline-menu"
120
+ >
121
+ <Actions
122
+ {...rest}
123
+ onActionClick={(e, action) => {
124
+ if (
125
+ action.confirmationMode &&
126
+ action.confirmationMode !== 'None'
127
+ ) {
128
+ clearTimeout(onBlurTimeout);
129
+ } else {
130
+ onBlurTimeout = global.setTimeout(() => collapse(), 250);
131
+ }
132
+ onActionClick?.(e, action);
133
+ }}
134
+ />
135
+ <div
136
+ ref={setArrowElement as React.LegacyRef<HTMLDivElement>}
137
+ className={classes.arrow}
138
+ // style={styles.arrow}
139
+ style={{
140
+ ...styles.arrow,
141
+ display: showArrow ? 'inherit' : 'none',
142
+ }}
143
+ />
144
+ </div>,
145
+ document.body,
146
+ )}
141
147
  </>
142
148
  );
143
149
  };