@muraldevkit/ui-toolkit 2.23.0 → 2.24.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.
Files changed (17) hide show
  1. package/dist/components/menu/MrlMenu/MrlMenu.d.ts +16 -11
  2. package/dist/components/menu/MrlMenu/utilities.d.ts +37 -0
  3. package/dist/components/menu/constants.d.ts +1 -1
  4. package/dist/components/menu/demo/MenuWithSubmenu.d.ts +20 -0
  5. package/dist/components/menu/demo/MenuWithTrigger.d.ts +8 -7
  6. package/dist/components/menu/hooks/useSubMenuElementPosition.d.ts +17 -0
  7. package/dist/components/portal/MrlPortal.d.ts +2 -1
  8. package/dist/components/svg/config.d.ts +1 -1
  9. package/dist/hooks/useClickOutside/index.d.ts +3 -3
  10. package/dist/hooks/useTriggerPosition/index.d.ts +4 -2
  11. package/dist/index.js +1 -1
  12. package/dist/styles/MrlMenu/module.scss +8 -7
  13. package/dist/styles/MrlMenuItem/module.scss +30 -18
  14. package/dist/styles/MrlSidebar/module.scss +10 -10
  15. package/dist/styles/MrlTopbar/module.scss +1 -1
  16. package/dist/styles/demo/module.scss +11 -0
  17. package/package.json +1 -1
package/dist/styles/MrlMenu/module.scss CHANGED
@@ -5,28 +5,29 @@
5
5
  box-shadow: var(--mrl-shadows-raised);
6
6
  flex-direction: column;
7
7
  opacity: 0;
8
- overflow-y: hidden;
8
+ overflow: visible;
9
9
  z-index: $mrl-zIndex-menus;
10
10
  ul[role='menu'] {
11
11
  min-height: var(--mrl-spacing-10);
12
+ overflow-x: visible;
12
13
  padding: var(--mrl-spacing-04);
13
14
  }
14
15
  &--scrolling {
15
16
  padding-bottom: var(--mrl-spacing-04);
16
17
  padding-top: var(--mrl-spacing-03);
17
18
  ul[role='menu'] {
19
+ overflow-x: hidden;
18
20
  overflow-y: auto;
19
21
  padding: var(--mrl-spacing-02) var(--mrl-spacing-04) var(--mrl-spacing-02)
20
22
  var(--mrl-spacing-04);
21
23
  }
22
24
  }
25
+ &--submenu {
26
+ left: 97%;
27
+ position: absolute;
28
+ }
23
29
  &.compact {
24
- ul[role='menu'] {
25
- padding: var(--mrl-spacing-03);
26
- }
27
- :global(.mrl-divider) {
28
- margin: var(--mrl-spacing-03) 0;
29
- }
30
+ padding: var(--mrl-space-stack-related);
30
31
  }
31
32
  &.open {
32
33
  display: flex;
package/dist/styles/MrlMenuItem/module.scss CHANGED
@@ -9,8 +9,7 @@ $space-inset-small: calc(var(--mrl-spacing-03) - var(--mrl-spacing-01));
9
9
  border-radius: var(--mrl-border-radius-content-large);
10
10
  list-style-type: none;
11
11
  margin: 0;
12
- margin-bottom: var(--mrl-spacing-01);
13
- position: relative;
12
+ margin-bottom: var(--mrl-space-stack-related-small);
14
13
  text-align: left;
15
14
  text-indent: 0;
16
15
  white-space: nowrap;
@@ -50,39 +49,52 @@ $space-inset-small: calc(var(--mrl-spacing-03) - var(--mrl-spacing-01));
50
49
  height: 100%;
51
50
  justify-content: space-between;
52
51
  padding: var(--mrl-space-inline-related) var(--mrl-space-inline-sibling);
52
+ position: relative;
53
53
  white-space: nowrap;
54
54
  width: 100%;
55
+ &--selected {
56
+ background: var(--mrl-color-background-inverse-hover);
57
+ color: var(--mrl-color-text-inverse);
58
+ }
59
+ &--content {
60
+ position: relative;
61
+ z-index: 1;
62
+ }
63
+ &--hoverArea {
64
+ height: 100%;
65
+ left: -30px;
66
+ position: absolute;
67
+ width: 215px;
68
+ }
55
69
  .mrl-svg {
56
70
  min-width: $menu-icon-min-width;
57
71
  }
58
72
  &.isLink {
59
73
  justify-content: flex-start;
60
74
  }
61
- &.withSubmenu {
62
- padding: calc(var(--mrl-space-stack-siblings) / 2)
63
- calc(var(--mrl-spacing-02) + var(--mrl-spacing-03)) calc(var(--mrl-space-stack-siblings) / 2)
64
- var(--mrl-space-inset);
65
- }
66
75
  &:focus-visible {
67
76
  outline: var(--mrl-line-width-focus) solid var(--mrl-color-focus);
68
77
  outline-offset: var(--mrl-spacing-01);
69
78
  }
70
- &.selected {
71
- background: var(--mrl-color-background-inverse-hover);
72
- color: var(--mrl-color-text-inverse);
73
- }
74
- &:hover:not(.selected, [aria-disabled='true']) {
75
- background: var(--mrl-color-background-highlight-hover);
76
- color: var(--mrl-color-text-hover);
77
- .rightLabel {
78
- display: inline;
79
- visibility: visible;
80
- }
79
+ &--submenuItem {
80
+ padding-right: 25px;
81
81
  }
82
82
  &:active:not(.selected, [aria-disabled='true']) {
83
83
  background: var(--mrl-color-background-highlight-emph-active);
84
84
  color: var(--mrl-color-text-active);
85
85
  }
86
+ &:hover:not(.selected, [aria-disabled='true']),
87
+ &--submenuOpen {
88
+ background: var(--mrl-color-background-highlight-hover);
89
+ color: var(--mrl-color-text-hover);
90
+ }
91
+ &--submenuIcon {
92
+ height: 14px;
93
+ position: absolute;
94
+ right: 10px;
95
+ top: 3px;
96
+ width: 14px;
97
+ }
86
98
  &[aria-disabled='true'] {
87
99
  background: transparent;
88
100
  color: var(--mrl-color-text-disabled);
package/dist/styles/MrlSidebar/module.scss CHANGED
@@ -9,9 +9,14 @@
9
9
  &--mobile {
10
10
  align-items: stretch;
11
11
  background: var(--mrl-color-background-page);
12
- height: calc(100%);
12
+ border-radius: 0 var(--mrl-radii-03) var(--mrl-radii-03) 0;
13
+ bottom: 0;
13
14
  left: calc(($sidebar-width + 2px) * -1);
14
- position: absolute;
15
+ max-height: calc(100% - var(--mrl-spacing-03));
16
+ overflow-y: auto;
17
+ padding: 4.5rem var(--mrl-space-inset-large) var(--mrl-space-inset-large);
18
+ position: fixed;
19
+ top: var(--mrl-spacing-03);
15
20
  transition: opacity var(--mrl-duration-03) var(--mrl-timing-m1),
16
21
  left var(--mrl-duration-03) var(--mrl-timing-m1);
17
22
  z-index: 2;
@@ -22,15 +27,11 @@
22
27
  left: 0;
23
28
  opacity: 1;
24
29
  }
25
- &--withClose {
26
- padding-top: var(--mrl-spacing-05);
27
- }
28
30
  }
29
31
  &--offset {
30
32
  &.MrlSidebar--mobile,
31
33
  &.MrlSidebar-overlay {
32
- height: calc(100% - $topbar-height);
33
- top: $topbar-height;
34
+ bottom: 0;
34
35
  }
35
36
  }
36
37
  }
@@ -39,11 +40,10 @@
39
40
  position: absolute;
40
41
  top: var(--mrl-spacing-05);
41
42
  width: 50px;
43
+ z-index: 999;
42
44
  }
43
45
  .MrlSidebar-menu-close {
44
- position: absolute;
45
- right: calc(var(--mrl-spacing-05) / 2);
46
- top: var(--mrl-spacing-05);
46
+ position: fixed;
47
47
  }
48
48
  .MrlSidebar-overlay {
49
49
  background-color: rgba(0, 0, 0, 56%);
package/dist/styles/MrlTopbar/module.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  min-height: $topbar-height;
5
5
  width: 100%;
6
6
  &--mobile {
7
- margin-left: calc(var(--mrl-spacing-10) + var(--mrl-spacing-01));
7
+ padding-left: calc(var(--mrl-spacing-10) + var(--mrl-spacing-01));
8
8
  }
9
9
  }
10
10
  .MrlTopbar--no-sidebar {
package/dist/styles/demo/module.scss ADDED
@@ -0,0 +1,11 @@
1
+ .trigger {
2
+ &-left {
3
+ text-align: left;
4
+ }
5
+ &-right {
6
+ text-align: right;
7
+ }
8
+ &-center {
9
+ text-align: center;
10
+ }
11
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@muraldevkit/ui-toolkit",
3
- "version": "2.23.0",
3
+ "version": "2.24.0",
4
4
  "description": "Mural's UI Toolkit",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",