@muraldevkit/ui-toolkit 4.66.0 → 4.67.0-dev-Vc0V.1

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/tooltip/MrlTooltip/MrlTooltip.d.ts +7 -1
  2. package/dist/components/tooltip/MrlTooltipContent/MrlTooltipContent.d.ts +3 -9
  3. package/dist/components/tooltip/anchorPositioningPolyfill.d.ts +19 -0
  4. package/dist/index.js +1 -1
  5. package/dist/styles/MrlTooltipContent/global.scss +128 -99
  6. package/dist/styles.css +1 -1
  7. package/package.json +9 -11
  8. package/dist/components/tooltip/useTooltipPosition/constants.d.ts +0 -9
  9. package/dist/components/tooltip/useTooltipPosition/index.d.ts +0 -14
  10. package/dist/components/tooltip/useTooltipPosition/utilities.d.ts +0 -19
package/dist/styles/MrlTooltipContent/global.scss CHANGED
@@ -6,6 +6,61 @@ $mrl-tooltip-arrow-vertical-center: calc(var(--mrl-tooltip-arrow-size) * -1 / 2
6
6
  $mrl-tooltip-arrow-size: math.hypot(8px, 5px);
7
7
  @use '../tooltip.mixins.scss' as *;
8
8
  @use './MrlTooltipContent.variables.scss';
9
+ .mrl-tooltip-trigger {
10
+ anchor-name: var(--mrl-tooltip-anchor-name);
11
+ }
12
+ .mrl-tooltip-positioner {
13
+ --mrl-tooltip-trigger-offset: var(--mrl-spacing-03);
14
+ container-type: anchored;
15
+ max-width: calc(var(--mrl-spacing-09) * 7);
16
+ position: fixed;
17
+ position-anchor: var(--mrl-tooltip-anchor-name);
18
+ width: max-content;
19
+ z-index: $mrl-zIndex-tooltips;
20
+ }
21
+ .mrl-tooltip-positioner[data-position='top'] {
22
+ bottom: anchor(top);
23
+ margin-bottom: var(--mrl-tooltip-trigger-offset);
24
+ position-try-fallbacks: flip-block;
25
+ }
26
+ .mrl-tooltip-positioner[data-position='top'][data-anchor='center'] {
27
+ justify-self: anchor-center;
28
+ }
29
+ .mrl-tooltip-positioner[data-position='top'][data-anchor='start'] {
30
+ left: anchor(left);
31
+ }
32
+ .mrl-tooltip-positioner[data-position='top'][data-anchor='end'] {
33
+ right: anchor(right);
34
+ }
35
+ .mrl-tooltip-positioner[data-position='bottom'] {
36
+ margin-top: var(--mrl-tooltip-trigger-offset);
37
+ position-try-fallbacks: flip-block;
38
+ top: anchor(bottom);
39
+ }
40
+ .mrl-tooltip-positioner[data-position='bottom'][data-anchor='center'] {
41
+ justify-self: anchor-center;
42
+ }
43
+ .mrl-tooltip-positioner[data-position='bottom'][data-anchor='start'] {
44
+ left: anchor(left);
45
+ }
46
+ .mrl-tooltip-positioner[data-position='bottom'][data-anchor='end'] {
47
+ right: anchor(right);
48
+ }
49
+ .mrl-tooltip-positioner[data-position='left'] {
50
+ align-self: anchor-center;
51
+ margin-right: var(--mrl-tooltip-trigger-offset);
52
+ position-try-fallbacks: flip-inline;
53
+ right: anchor(left);
54
+ }
55
+ .mrl-tooltip-positioner[data-position='right'] {
56
+ align-self: anchor-center;
57
+ left: anchor(right);
58
+ margin-left: var(--mrl-tooltip-trigger-offset);
59
+ position-try-fallbacks: flip-inline;
60
+ }
61
+ .mrl-tooltip-fade {
62
+ width: max-content;
63
+ }
9
64
  .mrl-tooltip-content {
10
65
  background: var(--mrl-tooltip-background-color);
11
66
  border-radius: var(--mrl-tooltip-border-radius);
@@ -20,11 +75,9 @@ $mrl-tooltip-arrow-size: math.hypot(8px, 5px);
20
75
  max-width: calc(var(--mrl-spacing-09) * 7);
21
76
  overflow-wrap: break-word;
22
77
  padding: var(--mrl-tooltip-padding);
23
- position: absolute;
24
- transition-property: opacity;
78
+ position: relative;
25
79
  white-space: normal;
26
80
  width: max-content;
27
- z-index: $mrl-zIndex-tooltips;
28
81
  &.has-custom-render {
29
82
  padding-right: var(--mrl-spacing-02);
30
83
  }
@@ -43,109 +96,85 @@ $mrl-tooltip-arrow-size: math.hypot(8px, 5px);
43
96
  transform: rotate(135deg);
44
97
  width: 0;
45
98
  }
46
- .mrl-tooltip-content[data-position='top'] {
47
- bottom: 100%;
48
- margin-bottom: var(--mrl-tooltip-trigger-offset);
49
- right: 50%;
50
- transform: translateX(50%);
51
- &::after {
52
- border-bottom-left-radius: var(--mrl-tooltip-arrow-border-radius);
53
- bottom: $mrl-tooltip-arrow-vertical-center;
54
- left: $mrl-tooltip-arrow-horizontal-center;
55
- transform: rotate(315deg);
56
- }
57
- .mrl-tooltip-content__hover {
58
- height: 10px;
59
- left: 0;
60
- top: 100%;
61
- width: 100%;
62
- }
99
+ .mrl-tooltip-positioner[data-position='top'] .mrl-tooltip-content::after {
100
+ border-bottom-left-radius: var(--mrl-tooltip-arrow-border-radius);
101
+ bottom: $mrl-tooltip-arrow-vertical-center;
102
+ left: $mrl-tooltip-arrow-horizontal-center;
103
+ transform: rotate(315deg);
63
104
  }
64
- .mrl-tooltip-content[data-anchor='start'] {
65
- left: 0;
66
- right: initial;
67
- transform: none;
68
- &::after {
69
- left: var(--mrl-tooltip-arrow-spacing);
70
- }
71
- &.mrlIconButton--small-wrapper::after {
72
- left: var(--mrl-spacing-04);
73
- }
74
- &.mrlIconButton--xsmall-wrapper::after {
75
- left: var(--mrl-spacing-03);
76
- }
105
+ .mrl-tooltip-positioner[data-position='bottom'] .mrl-tooltip-content::after {
106
+ border-bottom-left-radius: var(--mrl-tooltip-arrow-border-radius);
107
+ left: $mrl-tooltip-arrow-horizontal-center;
108
+ top: $mrl-tooltip-arrow-vertical-center;
77
109
  }
78
- .mrl-tooltip-content[data-anchor='end'] {
79
- right: 0;
80
- transform: none;
81
- &::after {
82
- left: auto;
83
- right: var(--mrl-tooltip-arrow-spacing);
84
- }
85
- &.mrlIconButton--small-wrapper::after {
86
- left: auto;
87
- right: var(--mrl-spacing-04);
110
+ .mrl-tooltip-positioner[data-anchor='start'] .mrl-tooltip-content::after {
111
+ left: var(--mrl-tooltip-arrow-spacing);
112
+ }
113
+ .mrl-tooltip-positioner[data-anchor='start']
114
+ .mrl-tooltip-content.mrlIconButton--small-wrapper::after {
115
+ left: var(--mrl-spacing-04);
116
+ }
117
+ .mrl-tooltip-positioner[data-anchor='start']
118
+ .mrl-tooltip-content.mrlIconButton--xsmall-wrapper::after {
119
+ left: var(--mrl-spacing-03);
120
+ }
121
+ .mrl-tooltip-positioner[data-anchor='end'] .mrl-tooltip-content::after {
122
+ left: auto;
123
+ right: var(--mrl-tooltip-arrow-spacing);
124
+ }
125
+ .mrl-tooltip-positioner[data-anchor='end']
126
+ .mrl-tooltip-content.mrlIconButton--small-wrapper::after {
127
+ left: auto;
128
+ right: var(--mrl-spacing-04);
129
+ }
130
+ .mrl-tooltip-positioner[data-anchor='end']
131
+ .mrl-tooltip-content.mrlIconButton--xsmall-wrapper::after {
132
+ left: auto;
133
+ right: var(--mrl-spacing-03);
134
+ }
135
+ .mrl-tooltip-positioner[data-position='left'] .mrl-tooltip-content::after,
136
+ .mrl-tooltip-positioner[data-position='right'] .mrl-tooltip-content::after {
137
+ display: var(--mrl-tooltip-arrow-display-left-right);
138
+ }
139
+ .mrl-tooltip-positioner[data-position='top'] .mrl-tooltip-content {
140
+ @container anchored(fallback: flip-block) {
141
+ &::after {
142
+ bottom: auto;
143
+ top: $mrl-tooltip-arrow-vertical-center;
144
+ transform: rotate(135deg);
145
+ }
88
146
  }
89
- &.mrlIconButton--xsmall-wrapper::after {
90
- left: auto;
91
- right: var(--mrl-spacing-03);
147
+ }
148
+ .mrl-tooltip-positioner[data-position='bottom'] .mrl-tooltip-content {
149
+ @container anchored(fallback: flip-block) {
150
+ &::after {
151
+ bottom: $mrl-tooltip-arrow-vertical-center;
152
+ top: auto;
153
+ transform: rotate(315deg);
154
+ }
92
155
  }
93
156
  }
94
- .mrl-tooltip-content[data-position='bottom'] {
95
- margin-top: var(--mrl-tooltip-trigger-offset);
157
+ .mrl-tooltip-positioner[data-position='top'] .mrl-tooltip-content__hover {
158
+ height: 10px;
159
+ left: 0;
96
160
  top: 100%;
97
- &::after {
98
- border-bottom-left-radius: var(--mrl-tooltip-arrow-border-radius);
99
- top: $mrl-tooltip-arrow-vertical-center;
100
- }
101
- .mrl-tooltip-content__hover {
102
- height: 10px;
103
- left: 0;
104
- top: -10px;
105
- width: 100%;
106
- }
161
+ width: 100%;
107
162
  }
108
- .mrl-tooltip-content[data-position='bottom'][data-anchor='center'] {
109
- right: 50%;
110
- transform: translateX(50%);
111
- &::after {
112
- left: calc(50% - var(--mrl-tooltip-arrow-size) / 2);
113
- }
163
+ .mrl-tooltip-positioner[data-position='bottom'] .mrl-tooltip-content__hover {
164
+ height: 10px;
165
+ left: 0;
166
+ top: -10px;
167
+ width: 100%;
114
168
  }
115
- .mrl-tooltip-content[data-position='left'] {
116
- left: initial;
117
- margin-right: var(--mrl-tooltip-trigger-offset);
118
- right: 100%;
119
- top: 50%;
120
- transform: translateY(-50%);
121
- &::after {
122
- border-top-right-radius: var(--mrl-tooltip-arrow-border-radius);
123
- display: var(--mrl-tooltip-arrow-display-left-right);
124
- right: $mrl-tooltip-arrow-vertical-center;
125
- top: $mrl-tooltip-arrow-horizontal-center;
126
- }
127
- .mrl-tooltip-content__hover {
128
- height: 23px;
129
- right: -10px;
130
- top: 0;
131
- width: 100%;
132
- }
169
+ .mrl-tooltip-positioner[data-position='left'] .mrl-tooltip-content__hover {
170
+ height: 23px;
171
+ right: -10px;
172
+ top: 0;
173
+ width: 100%;
133
174
  }
134
- .mrl-tooltip-content[data-position='right'] {
135
- left: 100%;
136
- margin-left: var(--mrl-tooltip-trigger-offset);
137
- top: 50%;
138
- transform: translateY(-50%);
139
- &::after {
140
- border-bottom-left-radius: var(--mrl-tooltip-arrow-border-radius);
141
- display: var(--mrl-tooltip-arrow-display-left-right);
142
- left: $mrl-tooltip-arrow-vertical-center;
143
- top: $mrl-tooltip-arrow-horizontal-center;
144
- }
145
- .mrl-tooltip-content__hover {
146
- height: 23px;
147
- left: -10px;
148
- top: 0;
149
- width: 100%;
150
- }
175
+ .mrl-tooltip-positioner[data-position='right'] .mrl-tooltip-content__hover {
176
+ height: 23px;
177
+ left: -10px;
178
+ top: 0;
179
+ width: 100%;
151
180
  }
package/dist/styles.css CHANGED
@@ -38,7 +38,7 @@
38
38
  )*-1)}}@keyframes outline-animation--mZ8TC{0%{outline:0 solid rgba(0,0,0,0);outline-offset:1px}50%{outline:4px solid var(--mrl-color-focus);outline-offset:1px}100%{outline:2px solid var(--mrl-color-focus);outline-offset:1px}}.MrlAvatarButton--large--m1iPW::after{border-radius:var(--mrl-radii-06)}
39
39
  .MrlBadge--qJnMn{align-items:center;background-color:var(--mrl-black-opacity-01);border-radius:var(--mrl-radii-04);color:var(--mrl-color-text-emph);display:inline-flex;flex-shrink:1;font-size:var(--mrl-font-size-02);font-weight:var(--mrl-font-weight-02);height:var(--mrl-spacing-06);padding:var(--mrl-spacing-01) calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));width:auto}.MrlBadge--qJnMn .MrlSvgContainer{flex-shrink:0;height:var(--mrl-spacing-04);margin-left:var(--mrl-spacing-02);width:var(--mrl-spacing-04)}.MrlBadge--error--bn1gA{background-color:var(--mrl-color-background-error-light);color:var(--mrl-color-text-error)}.MrlBadge--info--sHw3k{background-color:var(--mrl-color-background-info-light);color:rgb(var(--mrl-status-info))}.MrlBadge--success--xHWDK{background-color:var(--mrl-color-background-success-light);color:rgb(var(--mrl-status-success))}.MrlBadge--warning--L7ZsA{background-color:var(--mrl-color-background-warning-light);color:var(--mrl-color-text-warning-light)}.MrlBadge--warning--L7ZsA .MrlSvgContainer{color:rgb(var(--mrl-status-warning))}
40
40
  .MrlBadgeNotification--eAK4M{align-items:center;background-color:rgb(var(--mrl-gray-90));border:var(--mrl-line-width-border-fine) solid rgb(var(--mrl-white));border-radius:var(--mrl-radii-04);box-sizing:border-box;color:var(--mrl-color-text-inverse);display:inline-flex;flex-shrink:1;font-size:var(--mrl-font-size-02);font-weight:var(--mrl-font-weight-02);height:var(--mrl-spacing-03);justify-content:center;padding:0;width:var(--mrl-spacing-03)}.MrlBadgeNotification--info--YY6Sg{background-color:var(--mrl-color-background-info)}.MrlBadgeNotification--numeric--jVYpk{font-size:.5625rem;height:var(--mrl-spacing-05);padding:0 var(--mrl-spacing-01);width:var(--mrl-spacing-05)}.mrlButton .MrlBadgeNotification--eAK4M,.mrlIconButton .MrlBadgeNotification--eAK4M{position:absolute;right:0;top:0}.mrlButton .MrlBadgeNotification--numeric--jVYpk,.mrlIconButton .MrlBadgeNotification--numeric--jVYpk{right:calc(var(--mrl-spacing-01)*-1);top:calc(var(--mrl-spacing-01)*-1)}
41
- .mrl-tooltip-content{--mrl-tooltip-background-color: var(--mrl-color-background-inverse);--mrl-tooltip-text-color: var(--mrl-color-text-inverse-secondary);--mrl-tooltip-border-radius: var(--mrl-border-radius-content-large);--mrl-tooltip-font-size: var(--mrl-type-size-text-xsmall);--mrl-tooltip-line-height: var(--mrl-type-line-height-text-xsmall);--mrl-tooltip-padding: var(--mrl-spacing-02) var(--mrl-spacing-03);--mrl-tooltip-arrow-size: 8px;--mrl-tooltip-arrow-border-radius: 1px;--mrl-tooltip-arrow-spacing: var(--mrl-spacing-06);--mrl-tooltip-arrow-display-left-right: none;--mrl-tooltip-trigger-offset: var(--mrl-spacing-03)}.mrl-tooltip-content--inverse{--mrl-tooltip-background-color: var(--mrl-gray-80);--mrl-tooltip-text-color: var(--mrl-color-text-inverse-secondary)}.mrl-tooltip-content{background:var(--mrl-tooltip-background-color);border-radius:var(--mrl-tooltip-border-radius);color:var(--mrl-tooltip-text-color);cursor:default;display:flex;font-family:var(--mrl-body-font);font-size:var(--mrl-tooltip-font-size);font-weight:var(--mrl-type-weight-title-secondary);gap:var(--mrl-spacing-02);line-height:var(--mrl-tooltip-line-height);max-width:calc(var(--mrl-spacing-09)*7);overflow-wrap:break-word;padding:var(--mrl-tooltip-padding);position:absolute;transition-property:opacity;white-space:normal;width:max-content;z-index:900}.mrl-tooltip-content.has-custom-render{padding-right:var(--mrl-spacing-02)}.mrl-tooltip-content__hover{background:rgba(0,0,0,0);position:absolute}.mrl-tooltip-content::after{background:rgba(0,0,0,0);border-bottom:9.4339811321px solid var(--mrl-tooltip-background-color);border-right:9.4339811321px solid rgba(0,0,0,0);content:"";height:0;position:absolute;transform:rotate(135deg);width:0}.mrl-tooltip-content[data-position=top]{bottom:100%;margin-bottom:var(--mrl-tooltip-trigger-offset);right:50%;transform:translateX(50%)}.mrl-tooltip-content[data-position=top]::after{border-bottom-left-radius:var(--mrl-tooltip-arrow-border-radius);bottom:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px);left:calc(50% - var(--mrl-tooltip-arrow-size)/2);transform:rotate(315deg)}.mrl-tooltip-content[data-position=top] .mrl-tooltip-content__hover{height:10px;left:0;top:100%;width:100%}.mrl-tooltip-content[data-anchor=start]{left:0;right:initial;transform:none}.mrl-tooltip-content[data-anchor=start]::after{left:var(--mrl-tooltip-arrow-spacing)}.mrl-tooltip-content[data-anchor=start].mrlIconButton--small-wrapper::after{left:var(--mrl-spacing-04)}.mrl-tooltip-content[data-anchor=start].mrlIconButton--xsmall-wrapper::after{left:var(--mrl-spacing-03)}.mrl-tooltip-content[data-anchor=end]{right:0;transform:none}.mrl-tooltip-content[data-anchor=end]::after{left:auto;right:var(--mrl-tooltip-arrow-spacing)}.mrl-tooltip-content[data-anchor=end].mrlIconButton--small-wrapper::after{left:auto;right:var(--mrl-spacing-04)}.mrl-tooltip-content[data-anchor=end].mrlIconButton--xsmall-wrapper::after{left:auto;right:var(--mrl-spacing-03)}.mrl-tooltip-content[data-position=bottom]{margin-top:var(--mrl-tooltip-trigger-offset);top:100%}.mrl-tooltip-content[data-position=bottom]::after{border-bottom-left-radius:var(--mrl-tooltip-arrow-border-radius);top:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px)}.mrl-tooltip-content[data-position=bottom] .mrl-tooltip-content__hover{height:10px;left:0;top:-10px;width:100%}.mrl-tooltip-content[data-position=bottom][data-anchor=center]{right:50%;transform:translateX(50%)}.mrl-tooltip-content[data-position=bottom][data-anchor=center]::after{left:calc(50% - var(--mrl-tooltip-arrow-size)/2)}.mrl-tooltip-content[data-position=left]{left:initial;margin-right:var(--mrl-tooltip-trigger-offset);right:100%;top:50%;transform:translateY(-50%)}.mrl-tooltip-content[data-position=left]::after{border-top-right-radius:var(--mrl-tooltip-arrow-border-radius);display:var(--mrl-tooltip-arrow-display-left-right);right:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px);top:calc(50% - var(--mrl-tooltip-arrow-size)/2)}.mrl-tooltip-content[data-position=left] .mrl-tooltip-content__hover{height:23px;right:-10px;top:0;width:100%}.mrl-tooltip-content[data-position=right]{left:100%;margin-left:var(--mrl-tooltip-trigger-offset);top:50%;transform:translateY(-50%)}.mrl-tooltip-content[data-position=right]::after{border-bottom-left-radius:var(--mrl-tooltip-arrow-border-radius);display:var(--mrl-tooltip-arrow-display-left-right);left:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px);top:calc(50% - var(--mrl-tooltip-arrow-size)/2)}.mrl-tooltip-content[data-position=right] .mrl-tooltip-content__hover{height:23px;left:-10px;top:0;width:100%}
41
+ .mrl-tooltip-content{--mrl-tooltip-background-color: var(--mrl-color-background-inverse);--mrl-tooltip-text-color: var(--mrl-color-text-inverse-secondary);--mrl-tooltip-border-radius: var(--mrl-border-radius-content-large);--mrl-tooltip-font-size: var(--mrl-type-size-text-xsmall);--mrl-tooltip-line-height: var(--mrl-type-line-height-text-xsmall);--mrl-tooltip-padding: var(--mrl-spacing-02) var(--mrl-spacing-03);--mrl-tooltip-arrow-size: 8px;--mrl-tooltip-arrow-border-radius: 1px;--mrl-tooltip-arrow-spacing: var(--mrl-spacing-06);--mrl-tooltip-arrow-display-left-right: none;--mrl-tooltip-trigger-offset: var(--mrl-spacing-03)}.mrl-tooltip-content--inverse{--mrl-tooltip-background-color: var(--mrl-gray-80);--mrl-tooltip-text-color: var(--mrl-color-text-inverse-secondary)}.mrl-tooltip-trigger{anchor-name:var(--mrl-tooltip-anchor-name)}.mrl-tooltip-positioner{--mrl-tooltip-trigger-offset: var(--mrl-spacing-03);container-type:anchored;max-width:calc(var(--mrl-spacing-09)*7);position:fixed;position-anchor:var(--mrl-tooltip-anchor-name);width:max-content;z-index:900}.mrl-tooltip-positioner[data-position=top]{bottom:anchor(top);margin-bottom:var(--mrl-tooltip-trigger-offset);position-try-fallbacks:flip-block}.mrl-tooltip-positioner[data-position=top][data-anchor=center]{justify-self:anchor-center}.mrl-tooltip-positioner[data-position=top][data-anchor=start]{left:anchor(left)}.mrl-tooltip-positioner[data-position=top][data-anchor=end]{right:anchor(right)}.mrl-tooltip-positioner[data-position=bottom]{margin-top:var(--mrl-tooltip-trigger-offset);position-try-fallbacks:flip-block;top:anchor(bottom)}.mrl-tooltip-positioner[data-position=bottom][data-anchor=center]{justify-self:anchor-center}.mrl-tooltip-positioner[data-position=bottom][data-anchor=start]{left:anchor(left)}.mrl-tooltip-positioner[data-position=bottom][data-anchor=end]{right:anchor(right)}.mrl-tooltip-positioner[data-position=left]{align-self:anchor-center;margin-right:var(--mrl-tooltip-trigger-offset);position-try-fallbacks:flip-inline;right:anchor(left)}.mrl-tooltip-positioner[data-position=right]{align-self:anchor-center;left:anchor(right);margin-left:var(--mrl-tooltip-trigger-offset);position-try-fallbacks:flip-inline}.mrl-tooltip-fade{width:max-content}.mrl-tooltip-content{background:var(--mrl-tooltip-background-color);border-radius:var(--mrl-tooltip-border-radius);color:var(--mrl-tooltip-text-color);cursor:default;display:flex;font-family:var(--mrl-body-font);font-size:var(--mrl-tooltip-font-size);font-weight:var(--mrl-type-weight-title-secondary);gap:var(--mrl-spacing-02);line-height:var(--mrl-tooltip-line-height);max-width:calc(var(--mrl-spacing-09)*7);overflow-wrap:break-word;padding:var(--mrl-tooltip-padding);position:relative;white-space:normal;width:max-content}.mrl-tooltip-content.has-custom-render{padding-right:var(--mrl-spacing-02)}.mrl-tooltip-content__hover{background:rgba(0,0,0,0);position:absolute}.mrl-tooltip-content::after{background:rgba(0,0,0,0);border-bottom:9.4339811321px solid var(--mrl-tooltip-background-color);border-right:9.4339811321px solid rgba(0,0,0,0);content:"";height:0;position:absolute;transform:rotate(135deg);width:0}.mrl-tooltip-positioner[data-position=top] .mrl-tooltip-content::after{border-bottom-left-radius:var(--mrl-tooltip-arrow-border-radius);bottom:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px);left:calc(50% - var(--mrl-tooltip-arrow-size)/2);transform:rotate(315deg)}.mrl-tooltip-positioner[data-position=bottom] .mrl-tooltip-content::after{border-bottom-left-radius:var(--mrl-tooltip-arrow-border-radius);left:calc(50% - var(--mrl-tooltip-arrow-size)/2);top:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px)}.mrl-tooltip-positioner[data-anchor=start] .mrl-tooltip-content::after{left:var(--mrl-tooltip-arrow-spacing)}.mrl-tooltip-positioner[data-anchor=start] .mrl-tooltip-content.mrlIconButton--small-wrapper::after{left:var(--mrl-spacing-04)}.mrl-tooltip-positioner[data-anchor=start] .mrl-tooltip-content.mrlIconButton--xsmall-wrapper::after{left:var(--mrl-spacing-03)}.mrl-tooltip-positioner[data-anchor=end] .mrl-tooltip-content::after{left:auto;right:var(--mrl-tooltip-arrow-spacing)}.mrl-tooltip-positioner[data-anchor=end] .mrl-tooltip-content.mrlIconButton--small-wrapper::after{left:auto;right:var(--mrl-spacing-04)}.mrl-tooltip-positioner[data-anchor=end] .mrl-tooltip-content.mrlIconButton--xsmall-wrapper::after{left:auto;right:var(--mrl-spacing-03)}.mrl-tooltip-positioner[data-position=left] .mrl-tooltip-content::after,.mrl-tooltip-positioner[data-position=right] .mrl-tooltip-content::after{display:var(--mrl-tooltip-arrow-display-left-right)}@container anchored(fallback: flip-block){.mrl-tooltip-positioner[data-position=top] .mrl-tooltip-content::after{bottom:auto;top:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px);transform:rotate(135deg)}}@container anchored(fallback: flip-block){.mrl-tooltip-positioner[data-position=bottom] .mrl-tooltip-content::after{bottom:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px);top:auto;transform:rotate(315deg)}}.mrl-tooltip-positioner[data-position=top] .mrl-tooltip-content__hover{height:10px;left:0;top:100%;width:100%}.mrl-tooltip-positioner[data-position=bottom] .mrl-tooltip-content__hover{height:10px;left:0;top:-10px;width:100%}.mrl-tooltip-positioner[data-position=left] .mrl-tooltip-content__hover{height:23px;right:-10px;top:0;width:100%}.mrl-tooltip-positioner[data-position=right] .mrl-tooltip-content__hover{height:23px;left:-10px;top:0;width:100%}
42
42
  .mrl-visually-hidden{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
43
43
  :root{--mrl-button-background-color-skeleton: var(--mrl-color-skeleton);--mrl-button-border-radius: var(--mrl-border-radius-functional)}.mrl-u-preHydrateSkeleton mrl-button:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-icon-button:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-shadow-button:not(.hydrated){min-height:var(--mrl-spacing-09);min-width:var(--mrl-spacing-09);background:var(--mrl-button-background-color-skeleton);border-radius:var(--mrl-button-border-radius);box-shadow:none;color:rgba(0,0,0,0);display:inline-flex;font-family:var(--mrl-body-font);pointer-events:none;visibility:inherit}.mrl-u-preHydrateSkeleton mrl-button[kind=inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-button[kind=ghost-inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-icon-button[kind=inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-icon-button[kind=ghost-inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-shadow-button[kind=inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-shadow-button[kind=ghost-inverse]:not(.hydrated){--mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse)}mrl-button[size=small],mrl-shadow-button[size=small]{min-height:var(--mrl-spacing-08)}mrl-icon-button[size=small]{min-height:var(--mrl-spacing-08);min-width:var(--mrl-spacing-08)}mrl-button[size=large],mrl-shadow-button[size=large]{min-height:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02))}mrl-icon-button[size=large]{min-height:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));min-width:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02))}mrl-icon-button[size=xsmall][kind=ghost],mrl-icon-button[size=xsmall][kind=ghost-inverse]{min-height:var(--mrl-spacing-07);min-width:var(--mrl-spacing-07)}.mrl-u-focus-wrapper{position:relative}.mrlIconButton,.mrlButton{background:var(--mrl-button-background-color);border:none;border-radius:var(--mrl-button-border-radius);box-shadow:inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color);color:var(--mrl-button-text-color);justify-content:center;outline:none;transition:all var(--mrl-duration-03) var(--mrl-timing-m1);display:inline-flex;position:relative;visibility:inherit}.mrlIconButton:focus-visible:focus-visible,.mrlButton:focus-visible:focus-visible{outline:none}.mrlIconButton:focus-visible:focus-visible::after,.mrlButton:focus-visible:focus-visible::after{animation-duration:var(--mrl-duration-03);animation-fill-mode:forwards;animation-iteration-count:1;animation-timing-function:var(--mrl-timing-m3);border:0 solid rgba(0,0,0,0);border-radius:calc(
44
44
  var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@muraldevkit/ui-toolkit",
3
- "version": "4.66.0",
3
+ "version": "4.67.0-dev-Vc0V.1",
4
4
  "description": "Mural's UI Toolkit",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
@@ -27,7 +27,6 @@
27
27
  "publish:local": "npm run build && npm pack",
28
28
  "release": "npx semantic-release",
29
29
  "test": "jest",
30
- "test:scan": "npx test-storybook --maxWorkers=2",
31
30
  "test:single": "jest $1",
32
31
  "test:single:watch": "jest --watch $1",
33
32
  "test:watch": "jest --watchAll",
@@ -57,12 +56,11 @@
57
56
  "@muraldevkit/ds-icons": "*",
58
57
  "@muraldevkit/ds-icons-animated": "*",
59
58
  "@muraldevkit/ds-pictograms": "*",
60
- "@storybook/addon-a11y": "9.0.15",
61
- "@storybook/addon-docs": "9.0.15",
62
- "@storybook/addon-links": "9.0.15",
63
- "@storybook/addon-webpack5-compiler-swc": "3.0.0",
64
- "@storybook/react-webpack5": "9.0.15",
65
- "@storybook/test-runner": "0.23.0",
59
+ "@storybook/addon-a11y": "10.4.6",
60
+ "@storybook/addon-docs": "10.4.6",
61
+ "@storybook/addon-links": "10.4.6",
62
+ "@storybook/addon-webpack5-compiler-swc": "4.0.3",
63
+ "@storybook/react-webpack5": "10.4.6",
66
64
  "@testing-library/dom": "10.4.0",
67
65
  "@testing-library/jest-dom": "5.16.5",
68
66
  "@testing-library/react": "14.3.1",
@@ -76,7 +74,6 @@
76
74
  "@types/react-router-dom": "5.3.3",
77
75
  "@typescript-eslint/eslint-plugin": "8.35.1",
78
76
  "@typescript-eslint/parser": "8.35.1",
79
- "axe-playwright": "1.2.3",
80
77
  "babel-loader": "9.1.2",
81
78
  "copy-webpack-plugin": "11.0.0",
82
79
  "css-loader": "6.7.3",
@@ -88,7 +85,7 @@
88
85
  "eslint-plugin-prettier": "5.5.1",
89
86
  "eslint-plugin-react": "7.37.5",
90
87
  "eslint-plugin-react-hooks": "5.2.0",
91
- "eslint-plugin-storybook": "9.0.15",
88
+ "eslint-plugin-storybook": "10.4.6",
92
89
  "identity-obj-proxy": "3.0.0",
93
90
  "jest": "29.5.0",
94
91
  "jest-canvas-mock": "2.5.1",
@@ -104,7 +101,7 @@
104
101
  "sass-loader": "13.2.2",
105
102
  "semantic-release": "22.0.12",
106
103
  "semantic-release-monorepo": "8.0.2",
107
- "storybook": "9.0.15",
104
+ "storybook": "10.4.6",
108
105
  "style-loader": "3.3.2",
109
106
  "stylelint": "16.10.0",
110
107
  "stylelint-config-standard": "36.0.1",
@@ -119,6 +116,7 @@
119
116
  "webpack-cli": "5.0.1"
120
117
  },
121
118
  "dependencies": {
119
+ "@oddbird/css-anchor-positioning": "0.9.0",
122
120
  "@react-spring/web": "9.4.5",
123
121
  "@tanstack/react-virtual": "3.13.13",
124
122
  "classnames": "2.5.1",
package/dist/components/tooltip/useTooltipPosition/constants.d.ts DELETED
@@ -1,9 +0,0 @@
1
- import { TooltipAlignment, TooltipPosition } from '../constants';
2
- export interface TooltipPlacement {
3
- align: TooltipAlignment;
4
- position: TooltipPosition;
5
- }
6
- export interface Position {
7
- top: number;
8
- left: number;
9
- }
package/dist/components/tooltip/useTooltipPosition/index.d.ts DELETED
@@ -1,14 +0,0 @@
1
- import { RefObject } from 'react';
2
- import { TooltipPlacement, Position } from './constants';
3
- /**
4
- * A custom hook to calculate and manage the position of a tooltip element relative to its trigger element.
5
- *
6
- * @param {RefObject<HTMLElement>} triggerRef - Reference to the DOM element that triggers the menu.
7
- * @param {RefObject<HTMLElement>} elementRef - Reference to the DOM element that is the menu.
8
- * @param {TooltipPlacement} placement - The alignment configuration of the menu.
9
- * @param {boolean} isElementVisible - Tells the hook if the element is visible. If false, the hook will not calculate the position.
10
- * @param {number} tooltipOffset - The offset of the menu from the trigger element.
11
- * @param {boolean} disable - Whether to disable the hook.
12
- * @returns {Position} The calculated position of the menu element.
13
- */
14
- export declare const useTooltipPosition: (triggerRef: RefObject<HTMLElement> | undefined, elementRef: RefObject<HTMLElement>, placement: TooltipPlacement, isElementVisible?: boolean, tooltipOffset?: number, disable?: boolean) => Position;
package/dist/components/tooltip/useTooltipPosition/utilities.d.ts DELETED
@@ -1,19 +0,0 @@
1
- import { TooltipPlacement, Position } from './constants';
2
- /**
3
- * Calculates the position of an element (e.g., a tooltip or menu) based on alignment and offset.
4
- *
5
- * @param alignment - Object containing position ('top', 'bottom', 'left', 'right') and anchor ('start', 'center', 'end').
6
- * @param offset - Number of pixels to offset the positioned element.
7
- * @param elementRect - Bounding rect of the element being positioned.
8
- * @param triggerRect - Bounding rect of the trigger element.
9
- * @returns {Position} An object with `left` and `top` coordinates for the element (keys sorted alphabetically).
10
- */
11
- export declare const calculatePosition: (alignment: TooltipPlacement, offset: number, elementRect: DOMRect, triggerRect?: DOMRect) => Position;
12
- /**
13
- * Determines if the position of an element has changed significantly.
14
- *
15
- * @param prev - The previous bounding rectangle of the element.
16
- * @param next - The current bounding rectangle of the element.
17
- * @returns {boolean} True if the position has changed by more than 0.5 pixels, false otherwise.
18
- */
19
- export declare const positionChanged: (prev: DOMRect, next: DOMRect) => boolean;