@paroicms/react-ui 0.5.12 → 0.5.13

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 (6) hide show
  1. package/dist/MenuItem.js +3 -2
  2. package/package.json +1 -1
  3. package/styles/Dialog.css +2 -2
  4. package/styles/MenuItem.css +42 -28
  5. package/styles/PopupMenu.css +1 -1
  6. package/styles/theme/tokens.css +1 -1
package/dist/MenuItem.js CHANGED
@@ -9,10 +9,11 @@ export function MenuItem({ item, expanded, onToggle }) {
9
9
  url = undefined;
10
10
  command = undefined;
11
11
  }
12
- return (_jsxs("div", { className: clsx("PaMenuItem", { active }, className), style: style, children: [expanded !== undefined && onToggle && command ? (_jsx("button", { className: "PaMenuItem-left toggle", onClick: () => onToggle(!expanded), type: "button", children: expanded ? _jsx(ChevronDown, { size: 14 }) : _jsx(ChevronRight, { size: 14 }) })) : undefined, url ? (_jsxs("a", { className: clsx("PaMenuItem-label", { disabled }), href: url, onClick: url && command
12
+ const iconWrapper = icon ? _jsx("span", { className: "PaMenuItem-icon", children: icon }) : undefined;
13
+ return (_jsxs("div", { className: clsx("PaMenuItem", { active }, className), style: style, children: [expanded !== undefined && onToggle && command ? (_jsx("button", { className: "PaMenuItem-left toggle", onClick: () => onToggle(!expanded), type: "button", children: expanded ? _jsx(ChevronDown, { size: 20 }) : _jsx(ChevronRight, { size: 20 }) })) : undefined, url ? (_jsxs("a", { className: clsx("PaMenuItem-label", { disabled }), href: url, onClick: url && command
13
14
  ? (ev) => {
14
15
  ev.preventDefault();
15
16
  command?.();
16
17
  }
17
- : undefined, children: [icon, label] })) : command ? (_jsxs("button", { className: "PaMenuItem-label", onClick: command, type: "button", disabled: disabled, children: [icon, label] })) : onToggle && expanded !== undefined ? (_jsxs("button", { className: "PaMenuItem-label", onClick: () => onToggle(!expanded), type: "button", disabled: disabled, children: [expanded ? _jsx(ChevronDown, { size: 14 }) : _jsx(ChevronRight, { size: 14 }), icon, label] })) : (_jsxs("span", { className: clsx("PaMenuItem-label", { disabled }), children: [icon, label] })), popupMenu && _jsx(PopupMenu, { className: "PaMenuItem-popup", items: popupMenu })] }, key));
18
+ : undefined, children: [iconWrapper, label] })) : command || url ? (_jsxs("button", { className: "PaMenuItem-label", onClick: command, type: "button", disabled: disabled, children: [iconWrapper, label] })) : onToggle && expanded !== undefined ? (_jsxs("button", { className: "PaMenuItem-label", onClick: () => onToggle(!expanded), type: "button", disabled: disabled, children: [_jsx("span", { className: "PaMenuItem-inlineToggle", children: expanded ? _jsx(ChevronDown, { size: 20 }) : _jsx(ChevronRight, { size: 20 }) }), iconWrapper, label] })) : (_jsxs("span", { className: clsx("PaMenuItem-label", { disabled }), children: [iconWrapper, label] })), popupMenu && _jsx(PopupMenu, { className: "PaMenuItem-popup", items: popupMenu })] }, key));
18
19
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@paroicms/react-ui",
3
- "version": "0.5.12",
3
+ "version": "0.5.13",
4
4
  "description": "React UI toolkit for ParoiCMS.",
5
5
  "keywords": [
6
6
  "paroicms",
package/styles/Dialog.css CHANGED
@@ -2,7 +2,7 @@
2
2
  Dialog Component
3
3
  ======================================== */
4
4
  .PaDialog {
5
- max-width: 90vw;
5
+ max-width: 90dvw;
6
6
  padding: 0;
7
7
  background: var(--color-bg-elevated);
8
8
  border: none;
@@ -15,7 +15,7 @@
15
15
  }
16
16
 
17
17
  &:modal {
18
- max-height: 90vh;
18
+ max-height: 90dvh;
19
19
  margin: auto;
20
20
  }
21
21
 
package/styles/MenuItem.css CHANGED
@@ -12,6 +12,7 @@
12
12
 
13
13
  .PaMenuItem-left {
14
14
  display: flex;
15
+ flex-shrink: 0;
15
16
  align-items: center;
16
17
  justify-content: center;
17
18
  width: 38px;
@@ -20,14 +21,6 @@
20
21
  cursor: pointer;
21
22
  background: transparent;
22
23
  border: none;
23
-
24
- &.toggle {
25
- padding: var(--space-2) var(--space-3);
26
-
27
- /* &:hover {
28
- background: var(--color-bg-subtle);
29
- } */
30
- }
31
24
  }
32
25
 
33
26
  .PaMenuItem-label {
@@ -36,6 +29,7 @@
36
29
  gap: var(--space-2);
37
30
  align-items: center;
38
31
  padding: var(--space-2);
32
+ overflow: hidden;
39
33
  font-family: inherit;
40
34
  font-size: inherit;
41
35
  color: inherit;
@@ -52,39 +46,56 @@
52
46
  cursor: not-allowed;
53
47
  }
54
48
 
55
- /* Only apply hover to clickable elements (a, button) */
56
- /* &:is(a, button):hover {
57
- background: var(--color-bg-subtle);
58
- } */
59
-
60
- /* Non-clickable span elements */
61
49
  &:is(span) {
62
50
  cursor: default;
63
51
  }
64
52
  }
65
53
 
66
54
  .PaMenuItem-popup {
55
+ flex-shrink: 0;
67
56
  align-self: center;
68
57
  margin-left: auto;
69
58
  }
70
59
 
60
+ .PaMenuItem-icon {
61
+ display: flex;
62
+ }
63
+
64
+ .PaMenuItem-inlineToggle {
65
+ display: flex;
66
+ }
67
+
71
68
  /* ========================================
72
69
  MenuItem in Sidebar Context
73
70
  ======================================== */
74
71
  ._paSidebar {
75
- & .PaMenuItem {
76
- padding: 0 var(--space-2);
72
+ .PaMenuItem-left {
73
+ width: 45px;
74
+ padding-left: var(--space-5);
77
75
  }
78
76
 
79
- /* Dark Sidebar */
80
- &.dark .PaMenuItem {
81
- color: var(--color-text-sidebar-muted);
77
+ .PaMenuItem-label {
78
+ padding: var(--space-3) var(--space-2);
82
79
 
83
- & .PaMenuItem-label {
84
- padding: var(--space-3) var(--space-2);
80
+ &:first-child {
81
+ padding-left: var(--space-5);
85
82
  }
86
83
 
87
- &:not(.disabled) .PaMenuItem-label:is(a, button):hover {
84
+ &:last-child {
85
+ padding-right: var(--space-5);
86
+ }
87
+ }
88
+
89
+ .PaMenuItem-icon {
90
+ margin-right: var(--space-2);
91
+ }
92
+
93
+ /* Dark Sidebar */
94
+ &._dark .PaMenuItem {
95
+ color: var(--color-text-sidebar-muted);
96
+
97
+ &:not(.disabled) .PaMenuItem-label:is(a, button):hover,
98
+ &:not(.disabled) .PaMenuItem-popup:is(a, button):hover {
88
99
  color: #fff;
89
100
  background: var(--color-hover-sidebar-dark);
90
101
  }
@@ -100,7 +111,8 @@
100
111
  background: var(--color-primary);
101
112
  }
102
113
 
103
- &.active:not(.disabled) .PaMenuItem-label:is(a, button):hover {
114
+ &.active:not(.disabled) .PaMenuItem-label:is(a, button):hover,
115
+ &.active:not(.disabled) .PaMenuItem-popup:is(a, button):hover {
104
116
  color: var(--color-text-inverse);
105
117
  background: var(--color-primary-hover);
106
118
  }
@@ -112,14 +124,15 @@
112
124
  }
113
125
 
114
126
  /* Light Sidebar */
115
- &.light .PaMenuItem {
127
+ &._light .PaMenuItem {
116
128
  color: var(--color-text-muted);
117
129
 
118
- & .PaMenuItem-label {
119
- padding: var(--space-3) var(--space-2);
130
+ &:not(.disabled) .PaMenuItem-popup:is(a, button) {
131
+ color: #eee;
120
132
  }
121
133
 
122
- &:not(.disabled) .PaMenuItem-label:is(a, button):hover {
134
+ &:not(.disabled) .PaMenuItem-label:is(a, button):hover,
135
+ &:not(.disabled) .PaMenuItem-popup:is(a, button):hover {
123
136
  color: var(--color-text);
124
137
  background: var(--color-hover-sidebar-light);
125
138
  }
@@ -135,7 +148,8 @@
135
148
  background: var(--color-primary);
136
149
  }
137
150
 
138
- &.active:not(.disabled) .PaMenuItem-label:is(a, button):hover {
151
+ &.active:not(.disabled) .PaMenuItem-label:is(a, button):hover,
152
+ &.active:not(.disabled) .PaMenuItem-popup:is(a, button):hover {
139
153
  color: var(--color-text-inverse);
140
154
  background: var(--color-primary-hover);
141
155
  }
package/styles/PopupMenu.css CHANGED
@@ -4,7 +4,7 @@
4
4
  .PaPopupMenu {
5
5
  z-index: var(--z-popover);
6
6
  min-width: 160px;
7
- padding: var(--space-2);
7
+ overflow: hidden;
8
8
  background: var(--color-bg-elevated);
9
9
  border: 1px solid var(--color-border);
10
10
  border-radius: var(--radius-md);
package/styles/theme/tokens.css CHANGED
@@ -222,7 +222,7 @@
222
222
  /* ========================================
223
223
  Dark Mode (for sidebar)
224
224
  ======================================== */
225
- .dark {
225
+ ._dark {
226
226
  --color-text: #e2e8f0;
227
227
  --color-text-light: #94a3b8;
228
228
  --color-text-muted: #cbd5e1;