@muraldevkit/ui-toolkit 2.26.0 → 2.27.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/components/button/MrlAnimatedIconButton/MrlAnimatedIconButton.d.ts +1 -1
- package/dist/components/button/MrlIconButton/MrlIconButton.d.ts +4 -2
- package/dist/components/index.d.ts +1 -0
- package/dist/components/menu/MrlMenu/MrlMenu.d.ts +6 -11
- package/dist/components/menu/MrlMenu/utilities.d.ts +6 -0
- package/dist/components/menu/constants.d.ts +5 -0
- package/dist/components/menu/demo/MenuWithLink.d.ts +3 -4
- package/dist/components/menu/demo/MenuWithPopover.d.ts +19 -0
- package/dist/components/menu/demo/MenuWithSubmenu.d.ts +5 -6
- package/dist/components/menu/demo/MenuWithTrigger.d.ts +5 -6
- package/dist/components/menu/hooks/useBrowserEdgeScroll.d.ts +20 -0
- package/dist/components/popover/MrlPopover/MrlPopover.d.ts +79 -0
- package/dist/components/popover/MrlPopover/index.d.ts +1 -0
- package/dist/components/popover/demo/PopoverWithTrigger.d.ts +22 -0
- package/dist/components/popover/index.d.ts +1 -0
- package/dist/components/tooltip/MrlTooltip/MrlTooltip.d.ts +3 -1
- package/dist/components/tooltip/MrlTooltipContent/MrlTooltipContent.d.ts +3 -1
- package/dist/components/tooltip/constants.d.ts +4 -3
- package/dist/hooks/useClickOutside/index.d.ts +2 -1
- package/dist/index.js +1 -1
- package/dist/styles/MrlPopover/module.scss +100 -0
- package/dist/styles/MrlPopover/variables.scss +16 -0
- package/dist/styles/MrlTooltipContent/variables.scss +4 -0
- package/package.json +1 -1
- package/dist/components/menu/hooks/useMenuScroll.d.ts +0 -17
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
@use '@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
|
|
2
|
+
@use '@muraldevkit/ds-foundation/src/styles/_mixins.scss' as *;
|
|
3
|
+
@use './MrlPopover.variables.scss' as *;
|
|
4
|
+
.MrlPopover {
|
|
5
|
+
background: var(--mrl-popover-background-color);
|
|
6
|
+
border-radius: var(--mrl-border-radius-functional-large);
|
|
7
|
+
box-shadow: var(--mrl-shadows-raised);
|
|
8
|
+
color: var(--mrl-popover-text-color);
|
|
9
|
+
flex-direction: column;
|
|
10
|
+
max-height: calc(100vh - 2 * var(--mrl-space-inset-large));
|
|
11
|
+
max-width: 600px;
|
|
12
|
+
opacity: 0;
|
|
13
|
+
overflow: visible;
|
|
14
|
+
padding: var(--mrl-popover-padding);
|
|
15
|
+
pointer-events: auto;
|
|
16
|
+
position: fixed;
|
|
17
|
+
z-index: $mrl-zIndex-menus;
|
|
18
|
+
z-index: $mrl-zIndex-popovers;
|
|
19
|
+
a {
|
|
20
|
+
color: var(--mrl-popover-text-color);
|
|
21
|
+
}
|
|
22
|
+
@include mrl-shadow('raised');
|
|
23
|
+
&--submenu {
|
|
24
|
+
left: 97%;
|
|
25
|
+
position: absolute;
|
|
26
|
+
}
|
|
27
|
+
&--close {
|
|
28
|
+
position: absolute;
|
|
29
|
+
right: 4px;
|
|
30
|
+
top: 6px;
|
|
31
|
+
svg {
|
|
32
|
+
color: var(--mrl-popover-text-color);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
&.compact {
|
|
36
|
+
padding: var(--mrl-space-stack-related);
|
|
37
|
+
}
|
|
38
|
+
&.open {
|
|
39
|
+
display: flex;
|
|
40
|
+
}
|
|
41
|
+
&--scrolling {
|
|
42
|
+
padding-bottom: var(--mrl-spacing-04);
|
|
43
|
+
padding-right: 0;
|
|
44
|
+
padding-top: var(--mrl-spacing-03);
|
|
45
|
+
&--content {
|
|
46
|
+
overflow-x: hidden;
|
|
47
|
+
overflow-y: auto;
|
|
48
|
+
padding: var(--mrl-spacing-02) var(--mrl-spacing-04) var(--mrl-spacing-02)
|
|
49
|
+
var(--mrl-spacing-04);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
&--point {
|
|
53
|
+
background: var(--mrl-popover-background-color);
|
|
54
|
+
border-radius: 0 2px;
|
|
55
|
+
height: 10px;
|
|
56
|
+
position: absolute;
|
|
57
|
+
width: 10px;
|
|
58
|
+
z-index: 2;
|
|
59
|
+
&[data-point*='bottom-'] {
|
|
60
|
+
top: -4px;
|
|
61
|
+
transform: rotate(315deg);
|
|
62
|
+
}
|
|
63
|
+
&[data-point*='top-'] {
|
|
64
|
+
bottom: -4px;
|
|
65
|
+
transform: rotate(315deg);
|
|
66
|
+
}
|
|
67
|
+
&[data-point='bottom-left'],
|
|
68
|
+
&[data-point='top-left'] {
|
|
69
|
+
left: 14px;
|
|
70
|
+
}
|
|
71
|
+
&[data-point='bottom-right'],
|
|
72
|
+
&[data-point='top-right'] {
|
|
73
|
+
right: 14px;
|
|
74
|
+
}
|
|
75
|
+
&[data-point='bottom-center'],
|
|
76
|
+
&[data-point='top-center'] {
|
|
77
|
+
left: calc(50% - 8px);
|
|
78
|
+
}
|
|
79
|
+
&[data-point*='left-'] {
|
|
80
|
+
right: -5px;
|
|
81
|
+
transform: rotate(225deg);
|
|
82
|
+
}
|
|
83
|
+
&[data-point*='right-'] {
|
|
84
|
+
left: -5px;
|
|
85
|
+
transform: rotate(45deg);
|
|
86
|
+
}
|
|
87
|
+
&[data-point='left-center'],
|
|
88
|
+
&[data-point='right-center'] {
|
|
89
|
+
top: calc(50% - 8px);
|
|
90
|
+
}
|
|
91
|
+
&[data-point='left-top'],
|
|
92
|
+
&[data-point='right-top'] {
|
|
93
|
+
top: 16px;
|
|
94
|
+
}
|
|
95
|
+
&[data-point='left-bottom'],
|
|
96
|
+
&[data-point='right-bottom'] {
|
|
97
|
+
bottom: 16px;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
.primary {
|
|
2
|
+
--mrl-popover-background-color: var(--mrl-color-background);
|
|
3
|
+
--mrl-popover-text-color: var(--mrl-color-text);
|
|
4
|
+
--mrl-popover-text-emph-color: var(--mrl-color-text-emph);
|
|
5
|
+
}
|
|
6
|
+
.inverse {
|
|
7
|
+
--mrl-popover-background-color: var(--mrl-color-background-inverse);
|
|
8
|
+
--mrl-popover-text-color: var(--mrl-color-text-inverse);
|
|
9
|
+
--mrl-popover-text-emph-color: var(--mrl-color-text-emph);
|
|
10
|
+
}
|
|
11
|
+
.default {
|
|
12
|
+
--mrl-popover-padding: var(--mrl-spacing-05);
|
|
13
|
+
}
|
|
14
|
+
.compact {
|
|
15
|
+
--mrl-popover-padding: var(--mrl-spacing-04);
|
|
16
|
+
}
|
|
@@ -10,4 +10,8 @@
|
|
|
10
10
|
--mrl-tooltip-arrow-spacing: var(--mrl-spacing-06);
|
|
11
11
|
--mrl-tooltip-arrow-display-left-right: none;
|
|
12
12
|
--mrl-tooltip-trigger-offset: var(--mrl-spacing-03);
|
|
13
|
+
&--inverse {
|
|
14
|
+
--mrl-tooltip-background-color: var(--mrl-gray-80);
|
|
15
|
+
--mrl-tooltip-text-color: var(--mrl-color-text-inverse-secondary);
|
|
16
|
+
}
|
|
13
17
|
}
|
package/package.json
CHANGED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { MenuPosition } from '../constants';
|
|
2
|
-
interface MenuScrollStyles {
|
|
3
|
-
className: string | null;
|
|
4
|
-
styles: AdjustedMenuStyle;
|
|
5
|
-
}
|
|
6
|
-
interface AdjustedMenuStyle {
|
|
7
|
-
maxHeight: string;
|
|
8
|
-
}
|
|
9
|
-
/**
|
|
10
|
-
* useMenuScroll hook
|
|
11
|
-
*
|
|
12
|
-
* @param menuRef - reference to the DOM element that is the menu
|
|
13
|
-
* @param menuAlign - the alignment of the menu
|
|
14
|
-
* @returns AdjustedMenuStyle - returns the new updated style for scrolling the menu
|
|
15
|
-
*/
|
|
16
|
-
export declare const useMenuScroll: (menuRef: React.RefObject<HTMLElement>, menuAlign?: MenuPosition) => MenuScrollStyles;
|
|
17
|
-
export {};
|