@stack-spot/portal-layout 0.0.31 → 0.0.32

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/MenuContent.d.ts +2 -543
  2. package/dist/components/menu/MenuContent.d.ts.map +1 -1
  3. package/dist/components/menu/MenuSections.d.ts.map +1 -1
  4. package/dist/components/menu/MenuSections.js +25 -14
  5. package/dist/components/menu/MenuSections.js.map +1 -1
  6. package/dist/layout.css +21 -9
  7. package/package.json +6 -6
  8. package/src/components/menu/MenuSections.tsx +45 -32
  9. package/src/layout.css +21 -9
  10. package/dist/components/error/ErrorDescriptor.d.ts +0 -12
  11. package/dist/components/error/ErrorDescriptor.d.ts.map +0 -1
  12. package/dist/components/error/ErrorDescriptor.js +0 -17
  13. package/dist/components/error/ErrorDescriptor.js.map +0 -1
  14. package/dist/components/menu/useCheckTextOverflow.d.ts +0 -6
  15. package/dist/components/menu/useCheckTextOverflow.d.ts.map +0 -1
  16. package/dist/components/menu/useCheckTextOverflow.js +0 -20
  17. package/dist/components/menu/useCheckTextOverflow.js.map +0 -1
package/dist/components/menu/MenuContent.d.ts CHANGED
@@ -1,548 +1,7 @@
1
1
  /// <reference types="react" />
2
- /// <reference types="react" />
3
2
  import { MenuAction, MenuSectionContent } from './types.js';
4
- export declare const MenuGroup: import("styled-components").IStyledComponent<"web", {
5
- ref?: import("react").LegacyRef<HTMLUListElement> | undefined;
6
- key?: import("react").Key | null | undefined;
7
- defaultChecked?: boolean | undefined;
8
- defaultValue?: string | number | readonly string[] | undefined;
9
- suppressContentEditableWarning?: boolean | undefined;
10
- suppressHydrationWarning?: boolean | undefined;
11
- accessKey?: string | undefined;
12
- autoFocus?: boolean | undefined;
13
- className?: string | undefined;
14
- contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
15
- contextMenu?: string | undefined;
16
- dir?: string | undefined;
17
- draggable?: (boolean | "false" | "true") | undefined;
18
- hidden?: boolean | undefined;
19
- id?: string | undefined;
20
- lang?: string | undefined;
21
- nonce?: string | undefined;
22
- slot?: string | undefined;
23
- spellCheck?: (boolean | "false" | "true") | undefined;
24
- style?: import("react").CSSProperties | undefined;
25
- tabIndex?: number | undefined;
26
- title?: string | undefined;
27
- translate?: "yes" | "no" | undefined;
28
- radioGroup?: string | undefined;
29
- role?: import("react").AriaRole | undefined;
30
- about?: string | undefined;
31
- content?: string | undefined;
32
- datatype?: string | undefined;
33
- inlist?: any;
34
- prefix?: string | undefined;
35
- property?: string | undefined;
36
- rel?: string | undefined;
37
- resource?: string | undefined;
38
- rev?: string | undefined;
39
- typeof?: string | undefined;
40
- vocab?: string | undefined;
41
- autoCapitalize?: string | undefined;
42
- autoCorrect?: string | undefined;
43
- autoSave?: string | undefined;
44
- color?: string | undefined;
45
- itemProp?: string | undefined;
46
- itemScope?: boolean | undefined;
47
- itemType?: string | undefined;
48
- itemID?: string | undefined;
49
- itemRef?: string | undefined;
50
- results?: number | undefined;
51
- security?: string | undefined;
52
- unselectable?: "on" | "off" | undefined;
53
- inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
54
- is?: string | undefined;
55
- "aria-activedescendant"?: string | undefined;
56
- "aria-atomic"?: (boolean | "false" | "true") | undefined;
57
- "aria-autocomplete"?: "none" | "inline" | "both" | "list" | undefined;
58
- "aria-braillelabel"?: string | undefined;
59
- "aria-brailleroledescription"?: string | undefined;
60
- "aria-busy"?: (boolean | "false" | "true") | undefined;
61
- "aria-checked"?: boolean | "mixed" | "false" | "true" | undefined;
62
- "aria-colcount"?: number | undefined;
63
- "aria-colindex"?: number | undefined;
64
- "aria-colindextext"?: string | undefined;
65
- "aria-colspan"?: number | undefined;
66
- "aria-controls"?: string | undefined;
67
- "aria-current"?: boolean | "page" | "false" | "true" | "time" | "step" | "location" | "date" | undefined;
68
- "aria-describedby"?: string | undefined;
69
- "aria-description"?: string | undefined;
70
- "aria-details"?: string | undefined;
71
- "aria-disabled"?: (boolean | "false" | "true") | undefined;
72
- "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
73
- "aria-errormessage"?: string | undefined;
74
- "aria-expanded"?: (boolean | "false" | "true") | undefined;
75
- "aria-flowto"?: string | undefined;
76
- "aria-grabbed"?: (boolean | "false" | "true") | undefined;
77
- "aria-haspopup"?: boolean | "grid" | "listbox" | "menu" | "false" | "true" | "dialog" | "tree" | undefined;
78
- "aria-hidden"?: (boolean | "false" | "true") | undefined;
79
- "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
80
- "aria-keyshortcuts"?: string | undefined;
81
- "aria-label"?: string | undefined;
82
- "aria-labelledby"?: string | undefined;
83
- "aria-level"?: number | undefined;
84
- "aria-live"?: "off" | "assertive" | "polite" | undefined;
85
- "aria-modal"?: (boolean | "false" | "true") | undefined;
86
- "aria-multiline"?: (boolean | "false" | "true") | undefined;
87
- "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
88
- "aria-orientation"?: "horizontal" | "vertical" | undefined;
89
- "aria-owns"?: string | undefined;
90
- "aria-placeholder"?: string | undefined;
91
- "aria-posinset"?: number | undefined;
92
- "aria-pressed"?: boolean | "mixed" | "false" | "true" | undefined;
93
- "aria-readonly"?: (boolean | "false" | "true") | undefined;
94
- "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
95
- "aria-required"?: (boolean | "false" | "true") | undefined;
96
- "aria-roledescription"?: string | undefined;
97
- "aria-rowcount"?: number | undefined;
98
- "aria-rowindex"?: number | undefined;
99
- "aria-rowindextext"?: string | undefined;
100
- "aria-rowspan"?: number | undefined;
101
- "aria-selected"?: (boolean | "false" | "true") | undefined;
102
- "aria-setsize"?: number | undefined;
103
- "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
104
- "aria-valuemax"?: number | undefined;
105
- "aria-valuemin"?: number | undefined;
106
- "aria-valuenow"?: number | undefined;
107
- "aria-valuetext"?: string | undefined;
108
- children?: import("react").ReactNode;
109
- dangerouslySetInnerHTML?: {
110
- __html: string | TrustedHTML;
111
- } | undefined;
112
- onCopy?: import("react").ClipboardEventHandler<HTMLUListElement> | undefined;
113
- onCopyCapture?: import("react").ClipboardEventHandler<HTMLUListElement> | undefined;
114
- onCut?: import("react").ClipboardEventHandler<HTMLUListElement> | undefined;
115
- onCutCapture?: import("react").ClipboardEventHandler<HTMLUListElement> | undefined;
116
- onPaste?: import("react").ClipboardEventHandler<HTMLUListElement> | undefined;
117
- onPasteCapture?: import("react").ClipboardEventHandler<HTMLUListElement> | undefined;
118
- onCompositionEnd?: import("react").CompositionEventHandler<HTMLUListElement> | undefined;
119
- onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLUListElement> | undefined;
120
- onCompositionStart?: import("react").CompositionEventHandler<HTMLUListElement> | undefined;
121
- onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLUListElement> | undefined;
122
- onCompositionUpdate?: import("react").CompositionEventHandler<HTMLUListElement> | undefined;
123
- onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLUListElement> | undefined;
124
- onFocus?: import("react").FocusEventHandler<HTMLUListElement> | undefined;
125
- onFocusCapture?: import("react").FocusEventHandler<HTMLUListElement> | undefined;
126
- onBlur?: import("react").FocusEventHandler<HTMLUListElement> | undefined;
127
- onBlurCapture?: import("react").FocusEventHandler<HTMLUListElement> | undefined;
128
- onChange?: import("react").FormEventHandler<HTMLUListElement> | undefined;
129
- onChangeCapture?: import("react").FormEventHandler<HTMLUListElement> | undefined;
130
- onBeforeInput?: import("react").FormEventHandler<HTMLUListElement> | undefined;
131
- onBeforeInputCapture?: import("react").FormEventHandler<HTMLUListElement> | undefined;
132
- onInput?: import("react").FormEventHandler<HTMLUListElement> | undefined;
133
- onInputCapture?: import("react").FormEventHandler<HTMLUListElement> | undefined;
134
- onReset?: import("react").FormEventHandler<HTMLUListElement> | undefined;
135
- onResetCapture?: import("react").FormEventHandler<HTMLUListElement> | undefined;
136
- onSubmit?: import("react").FormEventHandler<HTMLUListElement> | undefined;
137
- onSubmitCapture?: import("react").FormEventHandler<HTMLUListElement> | undefined;
138
- onInvalid?: import("react").FormEventHandler<HTMLUListElement> | undefined;
139
- onInvalidCapture?: import("react").FormEventHandler<HTMLUListElement> | undefined;
140
- onLoad?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
141
- onLoadCapture?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
142
- onError?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
143
- onErrorCapture?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
144
- onKeyDown?: import("react").KeyboardEventHandler<HTMLUListElement> | undefined;
145
- onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLUListElement> | undefined;
146
- onKeyPress?: import("react").KeyboardEventHandler<HTMLUListElement> | undefined;
147
- onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLUListElement> | undefined;
148
- onKeyUp?: import("react").KeyboardEventHandler<HTMLUListElement> | undefined;
149
- onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLUListElement> | undefined;
150
- onAbort?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
151
- onAbortCapture?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
152
- onCanPlay?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
153
- onCanPlayCapture?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
154
- onCanPlayThrough?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
155
- onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
156
- onDurationChange?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
157
- onDurationChangeCapture?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
158
- onEmptied?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
159
- onEmptiedCapture?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
160
- onEncrypted?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
161
- onEncryptedCapture?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
162
- onEnded?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
163
- onEndedCapture?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
164
- onLoadedData?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
165
- onLoadedDataCapture?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
166
- onLoadedMetadata?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
167
- onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
168
- onLoadStart?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
169
- onLoadStartCapture?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
170
- onPause?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
171
- onPauseCapture?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
172
- onPlay?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
173
- onPlayCapture?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
174
- onPlaying?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
175
- onPlayingCapture?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
176
- onProgress?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
177
- onProgressCapture?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
178
- onRateChange?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
179
- onRateChangeCapture?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
180
- onResize?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
181
- onResizeCapture?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
182
- onSeeked?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
183
- onSeekedCapture?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
184
- onSeeking?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
185
- onSeekingCapture?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
186
- onStalled?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
187
- onStalledCapture?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
188
- onSuspend?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
189
- onSuspendCapture?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
190
- onTimeUpdate?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
191
- onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
192
- onVolumeChange?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
193
- onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
194
- onWaiting?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
195
- onWaitingCapture?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
196
- onAuxClick?: import("react").MouseEventHandler<HTMLUListElement> | undefined;
197
- onAuxClickCapture?: import("react").MouseEventHandler<HTMLUListElement> | undefined;
198
- onClick?: import("react").MouseEventHandler<HTMLUListElement> | undefined;
199
- onClickCapture?: import("react").MouseEventHandler<HTMLUListElement> | undefined;
200
- onContextMenu?: import("react").MouseEventHandler<HTMLUListElement> | undefined;
201
- onContextMenuCapture?: import("react").MouseEventHandler<HTMLUListElement> | undefined;
202
- onDoubleClick?: import("react").MouseEventHandler<HTMLUListElement> | undefined;
203
- onDoubleClickCapture?: import("react").MouseEventHandler<HTMLUListElement> | undefined;
204
- onDrag?: import("react").DragEventHandler<HTMLUListElement> | undefined;
205
- onDragCapture?: import("react").DragEventHandler<HTMLUListElement> | undefined;
206
- onDragEnd?: import("react").DragEventHandler<HTMLUListElement> | undefined;
207
- onDragEndCapture?: import("react").DragEventHandler<HTMLUListElement> | undefined;
208
- onDragEnter?: import("react").DragEventHandler<HTMLUListElement> | undefined;
209
- onDragEnterCapture?: import("react").DragEventHandler<HTMLUListElement> | undefined;
210
- onDragExit?: import("react").DragEventHandler<HTMLUListElement> | undefined;
211
- onDragExitCapture?: import("react").DragEventHandler<HTMLUListElement> | undefined;
212
- onDragLeave?: import("react").DragEventHandler<HTMLUListElement> | undefined;
213
- onDragLeaveCapture?: import("react").DragEventHandler<HTMLUListElement> | undefined;
214
- onDragOver?: import("react").DragEventHandler<HTMLUListElement> | undefined;
215
- onDragOverCapture?: import("react").DragEventHandler<HTMLUListElement> | undefined;
216
- onDragStart?: import("react").DragEventHandler<HTMLUListElement> | undefined;
217
- onDragStartCapture?: import("react").DragEventHandler<HTMLUListElement> | undefined;
218
- onDrop?: import("react").DragEventHandler<HTMLUListElement> | undefined;
219
- onDropCapture?: import("react").DragEventHandler<HTMLUListElement> | undefined;
220
- onMouseDown?: import("react").MouseEventHandler<HTMLUListElement> | undefined;
221
- onMouseDownCapture?: import("react").MouseEventHandler<HTMLUListElement> | undefined;
222
- onMouseEnter?: import("react").MouseEventHandler<HTMLUListElement> | undefined;
223
- onMouseLeave?: import("react").MouseEventHandler<HTMLUListElement> | undefined;
224
- onMouseMove?: import("react").MouseEventHandler<HTMLUListElement> | undefined;
225
- onMouseMoveCapture?: import("react").MouseEventHandler<HTMLUListElement> | undefined;
226
- onMouseOut?: import("react").MouseEventHandler<HTMLUListElement> | undefined;
227
- onMouseOutCapture?: import("react").MouseEventHandler<HTMLUListElement> | undefined;
228
- onMouseOver?: import("react").MouseEventHandler<HTMLUListElement> | undefined;
229
- onMouseOverCapture?: import("react").MouseEventHandler<HTMLUListElement> | undefined;
230
- onMouseUp?: import("react").MouseEventHandler<HTMLUListElement> | undefined;
231
- onMouseUpCapture?: import("react").MouseEventHandler<HTMLUListElement> | undefined;
232
- onSelect?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
233
- onSelectCapture?: import("react").ReactEventHandler<HTMLUListElement> | undefined;
234
- onTouchCancel?: import("react").TouchEventHandler<HTMLUListElement> | undefined;
235
- onTouchCancelCapture?: import("react").TouchEventHandler<HTMLUListElement> | undefined;
236
- onTouchEnd?: import("react").TouchEventHandler<HTMLUListElement> | undefined;
237
- onTouchEndCapture?: import("react").TouchEventHandler<HTMLUListElement> | undefined;
238
- onTouchMove?: import("react").TouchEventHandler<HTMLUListElement> | undefined;
239
- onTouchMoveCapture?: import("react").TouchEventHandler<HTMLUListElement> | undefined;
240
- onTouchStart?: import("react").TouchEventHandler<HTMLUListElement> | undefined;
241
- onTouchStartCapture?: import("react").TouchEventHandler<HTMLUListElement> | undefined;
242
- onPointerDown?: import("react").PointerEventHandler<HTMLUListElement> | undefined;
243
- onPointerDownCapture?: import("react").PointerEventHandler<HTMLUListElement> | undefined;
244
- onPointerMove?: import("react").PointerEventHandler<HTMLUListElement> | undefined;
245
- onPointerMoveCapture?: import("react").PointerEventHandler<HTMLUListElement> | undefined;
246
- onPointerUp?: import("react").PointerEventHandler<HTMLUListElement> | undefined;
247
- onPointerUpCapture?: import("react").PointerEventHandler<HTMLUListElement> | undefined;
248
- onPointerCancel?: import("react").PointerEventHandler<HTMLUListElement> | undefined;
249
- onPointerCancelCapture?: import("react").PointerEventHandler<HTMLUListElement> | undefined;
250
- onPointerEnter?: import("react").PointerEventHandler<HTMLUListElement> | undefined;
251
- onPointerEnterCapture?: import("react").PointerEventHandler<HTMLUListElement> | undefined;
252
- onPointerLeave?: import("react").PointerEventHandler<HTMLUListElement> | undefined;
253
- onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLUListElement> | undefined;
254
- onPointerOver?: import("react").PointerEventHandler<HTMLUListElement> | undefined;
255
- onPointerOverCapture?: import("react").PointerEventHandler<HTMLUListElement> | undefined;
256
- onPointerOut?: import("react").PointerEventHandler<HTMLUListElement> | undefined;
257
- onPointerOutCapture?: import("react").PointerEventHandler<HTMLUListElement> | undefined;
258
- onGotPointerCapture?: import("react").PointerEventHandler<HTMLUListElement> | undefined;
259
- onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLUListElement> | undefined;
260
- onLostPointerCapture?: import("react").PointerEventHandler<HTMLUListElement> | undefined;
261
- onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLUListElement> | undefined;
262
- onScroll?: import("react").UIEventHandler<HTMLUListElement> | undefined;
263
- onScrollCapture?: import("react").UIEventHandler<HTMLUListElement> | undefined;
264
- onWheel?: import("react").WheelEventHandler<HTMLUListElement> | undefined;
265
- onWheelCapture?: import("react").WheelEventHandler<HTMLUListElement> | undefined;
266
- onAnimationStart?: import("react").AnimationEventHandler<HTMLUListElement> | undefined;
267
- onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLUListElement> | undefined;
268
- onAnimationEnd?: import("react").AnimationEventHandler<HTMLUListElement> | undefined;
269
- onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLUListElement> | undefined;
270
- onAnimationIteration?: import("react").AnimationEventHandler<HTMLUListElement> | undefined;
271
- onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLUListElement> | undefined;
272
- onTransitionEnd?: import("react").TransitionEventHandler<HTMLUListElement> | undefined;
273
- onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLUListElement> | undefined;
274
- }>;
275
- export declare const Title: import("styled-components").IStyledComponent<"web", {
276
- ref?: import("react").LegacyRef<HTMLElement> | undefined;
277
- key?: import("react").Key | null | undefined;
278
- defaultChecked?: boolean | undefined;
279
- defaultValue?: string | number | readonly string[] | undefined;
280
- suppressContentEditableWarning?: boolean | undefined;
281
- suppressHydrationWarning?: boolean | undefined;
282
- accessKey?: string | undefined;
283
- autoFocus?: boolean | undefined;
284
- className?: string | undefined;
285
- contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
286
- contextMenu?: string | undefined;
287
- dir?: string | undefined;
288
- draggable?: (boolean | "false" | "true") | undefined;
289
- hidden?: boolean | undefined;
290
- id?: string | undefined;
291
- lang?: string | undefined;
292
- nonce?: string | undefined;
293
- slot?: string | undefined;
294
- spellCheck?: (boolean | "false" | "true") | undefined;
295
- style?: import("react").CSSProperties | undefined;
296
- tabIndex?: number | undefined;
297
- title?: string | undefined;
298
- translate?: "yes" | "no" | undefined;
299
- radioGroup?: string | undefined;
300
- role?: import("react").AriaRole | undefined;
301
- about?: string | undefined;
302
- content?: string | undefined;
303
- datatype?: string | undefined;
304
- inlist?: any;
305
- prefix?: string | undefined;
306
- property?: string | undefined;
307
- rel?: string | undefined;
308
- resource?: string | undefined;
309
- rev?: string | undefined;
310
- typeof?: string | undefined;
311
- vocab?: string | undefined;
312
- autoCapitalize?: string | undefined;
313
- autoCorrect?: string | undefined;
314
- autoSave?: string | undefined;
315
- color?: string | undefined;
316
- itemProp?: string | undefined;
317
- itemScope?: boolean | undefined;
318
- itemType?: string | undefined;
319
- itemID?: string | undefined;
320
- itemRef?: string | undefined;
321
- results?: number | undefined;
322
- security?: string | undefined;
323
- unselectable?: "on" | "off" | undefined;
324
- inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
325
- is?: string | undefined;
326
- "aria-activedescendant"?: string | undefined;
327
- "aria-atomic"?: (boolean | "false" | "true") | undefined;
328
- "aria-autocomplete"?: "none" | "inline" | "both" | "list" | undefined;
329
- "aria-braillelabel"?: string | undefined;
330
- "aria-brailleroledescription"?: string | undefined;
331
- "aria-busy"?: (boolean | "false" | "true") | undefined;
332
- "aria-checked"?: boolean | "mixed" | "false" | "true" | undefined;
333
- "aria-colcount"?: number | undefined;
334
- "aria-colindex"?: number | undefined;
335
- "aria-colindextext"?: string | undefined;
336
- "aria-colspan"?: number | undefined;
337
- "aria-controls"?: string | undefined;
338
- "aria-current"?: boolean | "page" | "false" | "true" | "time" | "step" | "location" | "date" | undefined;
339
- "aria-describedby"?: string | undefined;
340
- "aria-description"?: string | undefined;
341
- "aria-details"?: string | undefined;
342
- "aria-disabled"?: (boolean | "false" | "true") | undefined;
343
- "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
344
- "aria-errormessage"?: string | undefined;
345
- "aria-expanded"?: (boolean | "false" | "true") | undefined;
346
- "aria-flowto"?: string | undefined;
347
- "aria-grabbed"?: (boolean | "false" | "true") | undefined;
348
- "aria-haspopup"?: boolean | "grid" | "listbox" | "menu" | "false" | "true" | "dialog" | "tree" | undefined;
349
- "aria-hidden"?: (boolean | "false" | "true") | undefined;
350
- "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
351
- "aria-keyshortcuts"?: string | undefined;
352
- "aria-label"?: string | undefined;
353
- "aria-labelledby"?: string | undefined;
354
- "aria-level"?: number | undefined;
355
- "aria-live"?: "off" | "assertive" | "polite" | undefined;
356
- "aria-modal"?: (boolean | "false" | "true") | undefined;
357
- "aria-multiline"?: (boolean | "false" | "true") | undefined;
358
- "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
359
- "aria-orientation"?: "horizontal" | "vertical" | undefined;
360
- "aria-owns"?: string | undefined;
361
- "aria-placeholder"?: string | undefined;
362
- "aria-posinset"?: number | undefined;
363
- "aria-pressed"?: boolean | "mixed" | "false" | "true" | undefined;
364
- "aria-readonly"?: (boolean | "false" | "true") | undefined;
365
- "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
366
- "aria-required"?: (boolean | "false" | "true") | undefined;
367
- "aria-roledescription"?: string | undefined;
368
- "aria-rowcount"?: number | undefined;
369
- "aria-rowindex"?: number | undefined;
370
- "aria-rowindextext"?: string | undefined;
371
- "aria-rowspan"?: number | undefined;
372
- "aria-selected"?: (boolean | "false" | "true") | undefined;
373
- "aria-setsize"?: number | undefined;
374
- "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
375
- "aria-valuemax"?: number | undefined;
376
- "aria-valuemin"?: number | undefined;
377
- "aria-valuenow"?: number | undefined;
378
- "aria-valuetext"?: string | undefined;
379
- children?: import("react").ReactNode;
380
- dangerouslySetInnerHTML?: {
381
- __html: string | TrustedHTML;
382
- } | undefined;
383
- onCopy?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
384
- onCopyCapture?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
385
- onCut?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
386
- onCutCapture?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
387
- onPaste?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
388
- onPasteCapture?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
389
- onCompositionEnd?: import("react").CompositionEventHandler<HTMLElement> | undefined;
390
- onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLElement> | undefined;
391
- onCompositionStart?: import("react").CompositionEventHandler<HTMLElement> | undefined;
392
- onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLElement> | undefined;
393
- onCompositionUpdate?: import("react").CompositionEventHandler<HTMLElement> | undefined;
394
- onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLElement> | undefined;
395
- onFocus?: import("react").FocusEventHandler<HTMLElement> | undefined;
396
- onFocusCapture?: import("react").FocusEventHandler<HTMLElement> | undefined;
397
- onBlur?: import("react").FocusEventHandler<HTMLElement> | undefined;
398
- onBlurCapture?: import("react").FocusEventHandler<HTMLElement> | undefined;
399
- onChange?: import("react").FormEventHandler<HTMLElement> | undefined;
400
- onChangeCapture?: import("react").FormEventHandler<HTMLElement> | undefined;
401
- onBeforeInput?: import("react").FormEventHandler<HTMLElement> | undefined;
402
- onBeforeInputCapture?: import("react").FormEventHandler<HTMLElement> | undefined;
403
- onInput?: import("react").FormEventHandler<HTMLElement> | undefined;
404
- onInputCapture?: import("react").FormEventHandler<HTMLElement> | undefined;
405
- onReset?: import("react").FormEventHandler<HTMLElement> | undefined;
406
- onResetCapture?: import("react").FormEventHandler<HTMLElement> | undefined;
407
- onSubmit?: import("react").FormEventHandler<HTMLElement> | undefined;
408
- onSubmitCapture?: import("react").FormEventHandler<HTMLElement> | undefined;
409
- onInvalid?: import("react").FormEventHandler<HTMLElement> | undefined;
410
- onInvalidCapture?: import("react").FormEventHandler<HTMLElement> | undefined;
411
- onLoad?: import("react").ReactEventHandler<HTMLElement> | undefined;
412
- onLoadCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
413
- onError?: import("react").ReactEventHandler<HTMLElement> | undefined;
414
- onErrorCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
415
- onKeyDown?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
416
- onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
417
- onKeyPress?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
418
- onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
419
- onKeyUp?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
420
- onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
421
- onAbort?: import("react").ReactEventHandler<HTMLElement> | undefined;
422
- onAbortCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
423
- onCanPlay?: import("react").ReactEventHandler<HTMLElement> | undefined;
424
- onCanPlayCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
425
- onCanPlayThrough?: import("react").ReactEventHandler<HTMLElement> | undefined;
426
- onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
427
- onDurationChange?: import("react").ReactEventHandler<HTMLElement> | undefined;
428
- onDurationChangeCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
429
- onEmptied?: import("react").ReactEventHandler<HTMLElement> | undefined;
430
- onEmptiedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
431
- onEncrypted?: import("react").ReactEventHandler<HTMLElement> | undefined;
432
- onEncryptedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
433
- onEnded?: import("react").ReactEventHandler<HTMLElement> | undefined;
434
- onEndedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
435
- onLoadedData?: import("react").ReactEventHandler<HTMLElement> | undefined;
436
- onLoadedDataCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
437
- onLoadedMetadata?: import("react").ReactEventHandler<HTMLElement> | undefined;
438
- onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
439
- onLoadStart?: import("react").ReactEventHandler<HTMLElement> | undefined;
440
- onLoadStartCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
441
- onPause?: import("react").ReactEventHandler<HTMLElement> | undefined;
442
- onPauseCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
443
- onPlay?: import("react").ReactEventHandler<HTMLElement> | undefined;
444
- onPlayCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
445
- onPlaying?: import("react").ReactEventHandler<HTMLElement> | undefined;
446
- onPlayingCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
447
- onProgress?: import("react").ReactEventHandler<HTMLElement> | undefined;
448
- onProgressCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
449
- onRateChange?: import("react").ReactEventHandler<HTMLElement> | undefined;
450
- onRateChangeCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
451
- onResize?: import("react").ReactEventHandler<HTMLElement> | undefined;
452
- onResizeCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
453
- onSeeked?: import("react").ReactEventHandler<HTMLElement> | undefined;
454
- onSeekedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
455
- onSeeking?: import("react").ReactEventHandler<HTMLElement> | undefined;
456
- onSeekingCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
457
- onStalled?: import("react").ReactEventHandler<HTMLElement> | undefined;
458
- onStalledCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
459
- onSuspend?: import("react").ReactEventHandler<HTMLElement> | undefined;
460
- onSuspendCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
461
- onTimeUpdate?: import("react").ReactEventHandler<HTMLElement> | undefined;
462
- onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
463
- onVolumeChange?: import("react").ReactEventHandler<HTMLElement> | undefined;
464
- onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
465
- onWaiting?: import("react").ReactEventHandler<HTMLElement> | undefined;
466
- onWaitingCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
467
- onAuxClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
468
- onAuxClickCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
469
- onClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
470
- onClickCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
471
- onContextMenu?: import("react").MouseEventHandler<HTMLElement> | undefined;
472
- onContextMenuCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
473
- onDoubleClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
474
- onDoubleClickCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
475
- onDrag?: import("react").DragEventHandler<HTMLElement> | undefined;
476
- onDragCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
477
- onDragEnd?: import("react").DragEventHandler<HTMLElement> | undefined;
478
- onDragEndCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
479
- onDragEnter?: import("react").DragEventHandler<HTMLElement> | undefined;
480
- onDragEnterCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
481
- onDragExit?: import("react").DragEventHandler<HTMLElement> | undefined;
482
- onDragExitCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
483
- onDragLeave?: import("react").DragEventHandler<HTMLElement> | undefined;
484
- onDragLeaveCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
485
- onDragOver?: import("react").DragEventHandler<HTMLElement> | undefined;
486
- onDragOverCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
487
- onDragStart?: import("react").DragEventHandler<HTMLElement> | undefined;
488
- onDragStartCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
489
- onDrop?: import("react").DragEventHandler<HTMLElement> | undefined;
490
- onDropCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
491
- onMouseDown?: import("react").MouseEventHandler<HTMLElement> | undefined;
492
- onMouseDownCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
493
- onMouseEnter?: import("react").MouseEventHandler<HTMLElement> | undefined;
494
- onMouseLeave?: import("react").MouseEventHandler<HTMLElement> | undefined;
495
- onMouseMove?: import("react").MouseEventHandler<HTMLElement> | undefined;
496
- onMouseMoveCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
497
- onMouseOut?: import("react").MouseEventHandler<HTMLElement> | undefined;
498
- onMouseOutCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
499
- onMouseOver?: import("react").MouseEventHandler<HTMLElement> | undefined;
500
- onMouseOverCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
501
- onMouseUp?: import("react").MouseEventHandler<HTMLElement> | undefined;
502
- onMouseUpCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
503
- onSelect?: import("react").ReactEventHandler<HTMLElement> | undefined;
504
- onSelectCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
505
- onTouchCancel?: import("react").TouchEventHandler<HTMLElement> | undefined;
506
- onTouchCancelCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
507
- onTouchEnd?: import("react").TouchEventHandler<HTMLElement> | undefined;
508
- onTouchEndCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
509
- onTouchMove?: import("react").TouchEventHandler<HTMLElement> | undefined;
510
- onTouchMoveCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
511
- onTouchStart?: import("react").TouchEventHandler<HTMLElement> | undefined;
512
- onTouchStartCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
513
- onPointerDown?: import("react").PointerEventHandler<HTMLElement> | undefined;
514
- onPointerDownCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
515
- onPointerMove?: import("react").PointerEventHandler<HTMLElement> | undefined;
516
- onPointerMoveCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
517
- onPointerUp?: import("react").PointerEventHandler<HTMLElement> | undefined;
518
- onPointerUpCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
519
- onPointerCancel?: import("react").PointerEventHandler<HTMLElement> | undefined;
520
- onPointerCancelCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
521
- onPointerEnter?: import("react").PointerEventHandler<HTMLElement> | undefined;
522
- onPointerEnterCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
523
- onPointerLeave?: import("react").PointerEventHandler<HTMLElement> | undefined;
524
- onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
525
- onPointerOver?: import("react").PointerEventHandler<HTMLElement> | undefined;
526
- onPointerOverCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
527
- onPointerOut?: import("react").PointerEventHandler<HTMLElement> | undefined;
528
- onPointerOutCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
529
- onGotPointerCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
530
- onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
531
- onLostPointerCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
532
- onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
533
- onScroll?: import("react").UIEventHandler<HTMLElement> | undefined;
534
- onScrollCapture?: import("react").UIEventHandler<HTMLElement> | undefined;
535
- onWheel?: import("react").WheelEventHandler<HTMLElement> | undefined;
536
- onWheelCapture?: import("react").WheelEventHandler<HTMLElement> | undefined;
537
- onAnimationStart?: import("react").AnimationEventHandler<HTMLElement> | undefined;
538
- onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLElement> | undefined;
539
- onAnimationEnd?: import("react").AnimationEventHandler<HTMLElement> | undefined;
540
- onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLElement> | undefined;
541
- onAnimationIteration?: import("react").AnimationEventHandler<HTMLElement> | undefined;
542
- onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLElement> | undefined;
543
- onTransitionEnd?: import("react").TransitionEventHandler<HTMLElement> | undefined;
544
- onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLElement> | undefined;
545
- }>;
3
+ export declare const MenuGroup: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>>;
4
+ export declare const Title: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>;
546
5
  export declare const ActionItem: ({ label, onClick, href, active, icon, badge, overflow }: MenuAction) => import("react/jsx-runtime").JSX.Element;
547
6
  export declare const MenuContent: ({ pageSelector, goBack, title, subtitle, afterTitle, options, loading, error }: MenuSectionContent) => import("react/jsx-runtime").JSX.Element;
548
7
  //# sourceMappingURL=MenuContent.d.ts.map
package/dist/components/menu/MenuContent.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MenuContent.d.ts","sourceRoot":"","sources":["../../../src/components/menu/MenuContent.tsx"],"names":[],"mappings":";;AAUA,OAAO,EAAa,UAAU,EAAY,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAY7E,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+GrB,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAIjB,CAAA;AAED,eAAO,MAAM,UAAU,4DAAsE,UAAU,4CAsBtG,CAAA;AAmDD,eAAO,MAAM,WAAW,mFAAyF,kBAAkB,4CAsClI,CAAA"}
1
+ {"version":3,"file":"MenuContent.d.ts","sourceRoot":"","sources":["../../../src/components/menu/MenuContent.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAa,UAAU,EAAY,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAY7E,eAAO,MAAM,SAAS,oNA+GrB,CAAA;AAED,eAAO,MAAM,KAAK,0MAIjB,CAAA;AAED,eAAO,MAAM,UAAU,4DAAsE,UAAU,4CAsBtG,CAAA;AAmDD,eAAO,MAAM,WAAW,mFAAyF,kBAAkB,4CAsClI,CAAA"}
package/dist/components/menu/MenuSections.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MenuSections.d.ts","sourceRoot":"","sources":["../../../src/components/menu/MenuSections.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAe,MAAM,SAAS,CAAA;AAehD,wBAAgB,sBAAsB,SAErC;AAkHD,eAAO,MAAM,YAAY,2BAAiC,SAAS,4CAwFlE,CAAA"}
1
+ {"version":3,"file":"MenuSections.d.ts","sourceRoot":"","sources":["../../../src/components/menu/MenuSections.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAe,MAAM,SAAS,CAAA;AAehD,wBAAgB,sBAAsB,SAErC;AAqHD,eAAO,MAAM,YAAY,2BAAiC,SAAS,4CAgGlE,CAAA"}
package/dist/components/menu/MenuSections.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import { Flex, IconBox, Text } from '@citric/core';
3
- import { ChevronRight, Cog, Collapse, Menu as MenuIcon } from '@citric/icons';
3
+ import { ChevronRight, Cog, Collapse, Expand } from '@citric/icons';
4
4
  import { interpolate, useTranslate } from '@stack-spot/portal-translate';
5
5
  import { useCallback, useMemo, useState } from 'react';
6
6
  import { MenuContent } from './MenuContent.js';
@@ -36,12 +36,15 @@ const Section = ({ icon, label, href, target, onClick, active, content, customCo
36
36
  const t = useTranslate(dictionary);
37
37
  function shouldShowOverlay() {
38
38
  /* The overlay should appear if:
39
- * 1. The section has some content to render OR:
40
- * 1.1 The section is active and there is a contextual menu for the active page.
41
- * 2. The section is inactive OR:
39
+ * 1. The menu is compacted showing only the icons
40
+ * 2. The section has some content to render OR:
41
+ * 2.1 The section is active and there is a contextual menu for the active page.
42
+ * 3. The section is inactive OR:
42
43
  * 2.1. The contextual menu is hidden.
43
44
  */
44
- return (!!contentToRender || !!customContent || (hasContent && active)) && (!active || !isMenuContentVisible());
45
+ const layout = document.getElementById('layout');
46
+ const isCompactedOnlyIcons = layout?.classList.contains('menu-compact-only-icons');
47
+ return isCompactedOnlyIcons && (!!contentToRender || !!customContent || (hasContent && active)) && (!active || !isMenuContentVisible());
45
48
  }
46
49
  function showOverlayAndFixArrowPosition(event) {
47
50
  if (!shouldShowOverlay())
@@ -61,7 +64,7 @@ const Section = ({ icon, label, href, target, onClick, active, content, customCo
61
64
  hideOverlayImmediately();
62
65
  }
63
66
  const labelText = typeof label === 'string' ? label : label.id;
64
- return (_jsx(_Fragment, { children: _jsxs("li", { title: labelText, className: `section-submenu ${className || ''} ${active ? 'active' : ''}`, children: [_jsx("a", { href: href, target: target, onClick: click, onMouseEnter: showOverlayAndFixArrowPosition, onMouseLeave: () => shouldShowOverlay() && hideOverlay(), title: labelText, "aria-label": labelText, onKeyDown: onClick ? e => e.key === 'Enter' && onClick() : undefined, ...(active ? { 'aria-current': 'page' } : undefined), ...(!href ? { 'tabIndex': 0 } : undefined), children: _jsxs(Flex, { alignItems: "center", justifyContent: "center", px: 5, children: [icon, typeof label === 'string' ? _jsx(Text, { appearance: "body2", className: "section-label", ml: 2, children: label }) : label.element] }) }), shouldShowOverlay() &&
67
+ return (_jsx(_Fragment, { children: _jsxs("li", { title: labelText, className: `section-submenu ${className || ''} ${active ? 'active' : ''}`, children: [_jsx("a", { href: href, target: target, onClick: click, onMouseEnter: showOverlayAndFixArrowPosition, onMouseLeave: () => shouldShowOverlay() && hideOverlay(), title: labelText, "aria-label": labelText, onKeyDown: onClick ? e => e.key === 'Enter' && onClick() : undefined, ...(active ? { 'aria-current': 'page' } : undefined), ...(!href ? { 'tabIndex': 0 } : undefined), children: _jsxs(Flex, { alignItems: "center", justifyContent: "center", px: 5, children: [icon, typeof label === 'string' ? _jsx(Text, { appearance: "microtext1", className: "section-label", ml: 3, children: label }) : label.element] }) }), shouldShowOverlay() &&
65
68
  _jsx(IconBox, { size: "sm", className: "section-submenu-icon", as: "button", "aria-label": interpolate(t.menuOptions, label), "aria-controls": MENU_OVERLAY_ID, "aria-expanded": document.getElementById(MENU_OVERLAY_ID)?.classList.contains('visible'), onKeyDown: (event) => {
66
69
  if (event.key === 'Enter') {
67
70
  showOverlayAndFixArrowPosition(event);
@@ -80,15 +83,23 @@ export const MenuSections = ({ sections = [], ...props }) => {
80
83
  // this is a mock state only used to force an update on the component.
81
84
  const [_, setUpdate] = useState(0);
82
85
  const onHide = () => hideOverlay();
83
- const toggleMenu = useCallback(() => {
86
+ const toggleMenu = useCallback((hasContent) => {
84
87
  const layout = document.getElementById('layout');
85
88
  if (!layout)
86
89
  return;
87
- if (layout.classList.contains('menu-content-visible')) {
88
- layout.classList.remove('menu-content-visible');
90
+ if (layout.classList.contains('menu-compact-only-icons')) {
91
+ layout.classList.remove('menu-compact-only-icons');
89
92
  }
90
93
  else {
91
- layout.classList.add('menu-content-visible');
94
+ layout.classList.add('menu-compact-only-icons');
95
+ }
96
+ if (hasContent) {
97
+ if (layout.classList.contains('menu-content-visible')) {
98
+ layout.classList.remove('menu-content-visible');
99
+ }
100
+ else {
101
+ layout.classList.add('menu-content-visible');
102
+ }
92
103
  }
93
104
  setUpdate(current => current + 1);
94
105
  }, []);
@@ -121,10 +132,8 @@ export const MenuSections = ({ sections = [], ...props }) => {
121
132
  ? _jsx(OverlayRenderer, { content: props.content, customContent: props.customContent }, 'contentKey' in props ? props.contentKey : undefined)
122
133
  : _jsx(OverlayRenderer, { content: sections[currentOverlay].content, customContent: sections[currentOverlay].customContent }, currentOverlay);
123
134
  }
124
- return (_jsxs(_Fragment, { children: [_jsx("ul", { children: sectionItems }), (!!props.content || !!props.customContent || props.settings?.show) &&
125
- _jsxs(Flex, { mb: 7, alignItems: "center", justifyContent: "center", children: [(!!props.content || !!props.customContent) &&
126
- _jsx("button", { className: "toggle sections-footer", onClick: toggleMenu, title: t.toggle, tabIndex: -1, "aria-hidden": true, children: _jsxs(IconBox, { children: [_jsx(MenuIcon, { className: "expand" }), _jsx(Collapse, { className: "collapse" })] }) }), (props.settings?.show) &&
127
- _jsx("a", { href: props.settings?.href, onClick: props.settings?.onClick, className: "sections-footer", ...(props.settings.active ? { 'aria-current': 'page' } : undefined), children: _jsxs(Flex, { alignItems: "center", justifyContent: "center", children: [_jsx(IconBox, { "aria-label": t.settingsIcon, children: _jsx(Cog, {}) }), _jsx(Text, { appearance: "body2", ml: 2, children: t.settings })] }) })] }), _jsxs("div", { id: MENU_OVERLAY_ID, onMouseEnter: showOverlay, onMouseLeave: hideOverlay, ref: wrapper, children: [renderMenuOverlay(), _jsx("div", { className: "arrow" })] })] }));
135
+ return (_jsxs(_Fragment, { children: [_jsx("ul", { children: sectionItems }), _jsxs(Flex, { mb: 7, alignItems: "center", children: [_jsxs("button", { className: "toggle sections-footer", onClick: () => toggleMenu(!!props.content || !!props.customContent), title: t.toggle, tabIndex: -1, "aria-hidden": true, children: [_jsxs(IconBox, { children: [_jsx(Expand, { className: "expand" }), _jsx(Collapse, { className: "collapse" })] }), _jsx(Text, { appearance: "microtext1", ml: 8, className: "collapse", colorScheme: "light.contrastText", children: t.hide })] }), (props.settings?.show) &&
136
+ _jsx("a", { href: props.settings?.href, onClick: props.settings?.onClick, className: "sections-footer", ...(props.settings.active ? { 'aria-current': 'page' } : undefined), children: _jsxs(Flex, { alignItems: "center", children: [_jsx(IconBox, { "aria-label": t.settingsIcon, children: _jsx(Cog, {}) }), _jsx(Text, { appearance: "microtext1", ml: 2, children: t.settings })] }) })] }), _jsxs("div", { id: MENU_OVERLAY_ID, onMouseEnter: showOverlay, onMouseLeave: hideOverlay, ref: wrapper, children: [renderMenuOverlay(), _jsx("div", { className: "arrow" })] })] }));
128
137
  };
129
138
  const dictionary = {
130
139
  en: {
@@ -132,12 +141,14 @@ const dictionary = {
132
141
  menuOptions: 'View $0 menu options',
133
142
  settings: 'Settings',
134
143
  settingsIcon: 'Settings icon',
144
+ hide: 'Hide',
135
145
  },
136
146
  pt: {
137
147
  toggle: 'Visualizar ou esconder o menu',
138
148
  menuOptions: 'Visualizar opções do menu $0',
139
149
  settings: 'Configurações',
140
150
  settingsIcon: 'Icone de configurações',
151
+ hide: 'Esconder',
141
152
  },
142
153
  };
143
154
  //# sourceMappingURL=MenuSections.js.map
package/dist/components/menu/MenuSections.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MenuSections.js","sourceRoot":"","sources":["../../../src/components/menu/MenuSections.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"MenuSections.js","sourceRoot":"","sources":["../../../src/components/menu/MenuSections.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACnE,OAAO,EAAc,WAAW,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACpF,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAA;AAE7D,MAAM,YAAY,GAAG,EAAE,CAAA;AACvB,MAAM,qBAAqB,GAAG,GAAG,CAAA;AACjC,MAAM,eAAe,GAAG,oBAAoB,CAAA;AAE5C,IAAI,eAAmC,CAAA;AAEvC,SAAS,WAAW;IAClB,IAAI,eAAe,KAAK,SAAS;QAAE,OAAM;IACzC,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,sBAAsB,EAAE,qBAAqB,CAAC,CAAA;AACpF,CAAC;AAED,gEAAgE;AAChE,MAAM,UAAU,sBAAsB;IACpC,QAAQ,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;AACvE,CAAC;AAED,SAAS,qBAAqB;IAC5B,IAAI,eAAe,KAAK,SAAS;QAAE,OAAM;IACzC,YAAY,CAAC,eAAe,CAAC,CAAA;IAC7B,eAAe,GAAG,SAAS,CAAA;AAC7B,CAAC;AAED,SAAS,WAAW;IAClB,qBAAqB,EAAE,CAAA;IACvB,QAAQ,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;AACpE,CAAC;AAED,SAAS,oBAAoB;IAC3B,OAAO,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAA;AACzF,CAAC;AAED,MAAM,OAAO,GAAG,CAAC,EACf,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,MAAM,EACN,OAAO,EACP,MAAM,EACN,OAAO,EACP,aAAa,EACb,MAAM,EACN,iBAAiB,EACjB,EAAE,EACF,UAAU,EACV,SAAS,GAGV,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,OAAO,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,OAAO,CAAA;IAC3E,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,SAAS,iBAAiB;QACxB;;;;;;WAMG;QACH,MAAM,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA;QAChD,MAAM,oBAAoB,GAAG,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,yBAAyB,CAAC,CAAA;QAClF,OAAO,oBAAoB,IAAI,CAAC,CAAC,CAAC,eAAe,IAAI,CAAC,CAAC,aAAa,IAAI,CAAC,UAAU,IAAI,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAA;IACzI,CAAC;IAED,SAAS,8BAA8B,CAAC,KAAiF;QACvH,IAAI,CAAC,iBAAiB,EAAE;YAAE,OAAM;QAChC,MAAM,EAAE,EAAE,CAAA;QACV,MAAM,IAAI,GAAI,KAAK,CAAC,MAAsB,EAAE,qBAAqB,EAAE,CAAA;QACnE,MAAM,KAAK,GAAuB,QAAQ,CAAC,aAAa,CAAC,IAAI,eAAe,SAAS,CAAC,CAAA;QACtF,iBAAiB,CAAC,EAAE,CAAC,CAAA;QACrB,WAAW,EAAE,CAAA;QACb,IAAI,IAAI,IAAI,KAAK,EAAE,CAAC;YAClB,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC,IAAI,CAAA;QACxE,CAAC;IACH,CAAC;IAED,SAAS,KAAK;QACZ,IAAI,OAAO;YAAE,OAAO,EAAE,CAAA;QACtB,sBAAsB,EAAE,CAAA;IAC1B,CAAC;IAED,MAAM,SAAS,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAA;IAE9D,OAAO,CACL,4BACE,cAAoB,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,mBAAmB,SAAS,IAAI,EAAE,IAAI,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,aAC7G,YACE,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,KAAK,EACd,YAAY,EAAE,8BAA8B,EAC5C,YAAY,EAAE,GAAG,EAAE,CAAC,iBAAiB,EAAE,IAAI,WAAW,EAAE,EACxD,KAAK,EAAE,SAAS,gBACJ,SAAS,EACrB,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,KAChE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,KACjD,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,YAE3C,MAAC,IAAI,IAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,EAAE,EAAE,CAAC,aACpD,IAAI,EACJ,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,SAAS,EAAC,eAAe,EAAC,EAAE,EAAE,CAAC,YAAG,KAAK,GAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,IACrH,GACL,EACH,iBAAiB,EAAE;oBAClB,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,sBAAsB,EACjD,EAAE,EAAC,QAAQ,gBACC,WAAW,CAAC,CAAC,CAAC,WAAW,EAAE,KAAK,CAAC,mBAC9B,eAAe,mBACf,QAAQ,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,EACtF,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;4BACnB,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gCAC1B,8BAA8B,CAAC,KAAK,CAAC,CAAA;4BACvC,CAAC;wBACH,CAAC,YAED,KAAC,YAAY,KAAG,GACR,KA/BL,SAAS,CAiCb,GACJ,CACJ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAE,aAAa,EAAkD,EAAE,EAAE;IACrG,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,mCAAI,aAAa,SAAK,CAAA;IAC/B,CAAC;IAED,MAAM,IAAI,GAAG,OAAO,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,OAAO,CAAA;IAChE,OAAO,KAAC,WAAW,OAAK,IAAI,GAAI,CAAA;AAClC,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,GAAG,EAAE,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE;IACrE,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,sEAAsE;IACtE,MAAM,CAAC,CAAC,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAClC,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,WAAW,EAAE,CAAA;IAElC,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,UAAmB,EAAE,EAAE;QACrD,MAAM,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA;QAChD,IAAI,CAAC,MAAM;YAAE,OAAM;QACnB,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,yBAAyB,CAAC,EAAE,CAAC;YACzD,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAA;QACpD,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAA;QACjD,CAAC;QAED,IAAI,UAAU,EAAE,CAAC;YACf,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,CAAC;gBACtD,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAA;YACjD,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAA;YAC9C,CAAC;QACH,CAAC;QACD,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,GAAG,CAAC,CAAC,CAAA;IACnC,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,2HAA2H;IAC3H,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,EAAsB,CAAA;IAE1E,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,KAAC,OAAO,IAAS,EAAE,EAAE,CAAC,KAAM,CAAC,EAAE,iBAAiB,EAAE,iBAAiB,EAC9F,UAAU,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,KAAK,CAAC,aAAa,IADX,CAAC,CACc,CAAC,EAC3D,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,SAAS,aAAa;QACpB,WAAW,EAAE,CAAA;QACb,MAAM,KAAK,GAAG,QAAQ,CAAC,sBAAsB,CAAC,iBAAiB,CAAC,CAAA;QAChE,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,cAAc,IAAI,KAAK,CAAC,MAAM,GAAG,cAAc,IAAI,KAAK,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC7G,KAAK,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAiB,CAAC,KAAK,EAAE,CAAA;QAC5D,CAAC;IACH,CAAC;IAED,MAAM,OAAO,GAAG,mBAAmB,CAAC;QAClC,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,KAAK;QACjG,cAAc,EAAE,4EAA4E;QAC5F,aAAa,EAAE,GAAG,EAAE,CAAC,aAAa,EAAE;KACrC,CAAC,CAAA;IAEF;;;;oDAIgD;IAChD,SAAS,iBAAiB;QACxB,IAAI,cAAc,KAAK,SAAS;YAAE,OAAO,IAAI,CAAA;QAC7C,MAAM,8BAA8B,GAAG,CAAC,oBAAoB,EAAE,IAAI,QAAQ,CAAC,cAAc,CAAC,CAAC,MAAM;YAC/F,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAA;QAC5C,OAAO,8BAA8B;YACnC,CAAC,CAAC,KAAC,eAAe,IAA4D,OAAO,EAAE,KAAK,CAAC,OAAO,EAClG,aAAa,EAAE,KAAK,CAAC,aAAa,IADZ,YAAY,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CACpC;YACxC,CAAC,CAAC,KAAC,eAAe,IAAsB,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,OAAO,EAC/E,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,aAAa,IAD/B,cAAc,CACqB,CAAA;IAC/D,CAAC;IAED,OAAO,CACL,8BACE,uBAAK,YAAY,GAAM,EAEvB,MAAC,IAAI,IAAC,EAAE,EAAE,CAAC,EAAE,UAAU,EAAC,QAAQ,aAC9B,kBAAQ,SAAS,EAAC,wBAAwB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,EAC5G,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,kCAC7B,MAAC,OAAO,eACN,KAAC,MAAM,IAAC,SAAS,EAAC,QAAQ,GAAG,EAC7B,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,IACzB,EACV,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,EAAE,EAAE,CAAC,EAAE,SAAS,EAAC,UAAU,EAAC,WAAW,EAAC,oBAAoB,YAAE,CAAC,CAAC,IAAI,GAAQ,IACnG,EACR,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC;wBACrB,YAAG,IAAI,EAAE,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,QAAQ,EAAE,OAAO,EAC7D,SAAS,EAAC,iBAAiB,KACvB,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,YACpE,MAAC,IAAI,IAAC,UAAU,EAAC,QAAQ,aACvB,KAAC,OAAO,kBAAa,CAAC,CAAC,YAAY,YACjC,KAAC,GAAG,KAAG,GACC,EACV,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,EAAE,EAAE,CAAC,YAAG,CAAC,CAAC,QAAQ,GAAQ,IACnD,GACL,IAED,EAEP,eAAK,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,EAAE,OAAO,aACzF,iBAAiB,EAAE,EACpB,cAAK,SAAS,EAAC,OAAO,GAAO,IACzB,IACL,CACJ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,MAAM,EAAE,uBAAuB;QAC/B,WAAW,EAAE,sBAAsB;QACnC,QAAQ,EAAE,UAAU;QACpB,YAAY,EAAE,eAAe;QAC7B,IAAI,EAAE,MAAM;KACb;IACD,EAAE,EAAE;QACF,MAAM,EAAE,+BAA+B;QACvC,WAAW,EAAE,8BAA8B;QAC3C,QAAQ,EAAE,eAAe;QACzB,YAAY,EAAE,wBAAwB;QACtC,IAAI,EAAE,UAAU;KACjB;CACmB,CAAA"}
package/dist/layout.css CHANGED
@@ -40,7 +40,7 @@ body {
40
40
  #layout {
41
41
  --header-height: 56px;
42
42
  --menu-sections-width: 135px;
43
- --menu-content-width: 233px;
43
+ --menu-content-width: 240px;
44
44
  --menu-item-height: 74px;
45
45
  --modal-animation-duration: 0.3s;
46
46
  --right-panel-animation-duration: 0.3s;
@@ -49,11 +49,16 @@ body {
49
49
  --toastify-font-family: 'Roboto', sans-serif;
50
50
  }
51
51
 
52
- #layout.menu-compact {
52
+ #layout.menu-compact:not(.menu-compact-only-icons) {
53
53
  --menu-sections-width: 135px;
54
54
  --menu-item-height: 56px;
55
55
  }
56
56
 
57
+ #layout.menu-compact-only-icons {
58
+ --menu-sections-width: 56px;
59
+ --menu-item-height: 56px;
60
+ }
61
+
57
62
  #layout.no-menu-sections {
58
63
  --menu-sections-width: 0px;
59
64
  }
@@ -128,13 +133,21 @@ body {
128
133
  }
129
134
 
130
135
  #menu .toggle .expand,
131
- #layout.menu-content-visible .toggle .collapse {
132
- opacity: 1;
136
+ #layout.menu-compact-only-icons .toggle .collapse {
137
+ opacity: 0;
133
138
  }
134
139
 
135
140
  #menu .toggle .collapse,
136
- #layout.menu-content-visible .toggle .expand {
137
- opacity: 0;
141
+ #layout.menu-compact-only-icons .toggle .expand {
142
+ opacity: 1;
143
+ }
144
+
145
+ #layout.menu-compact-only-icons .section-label {
146
+ display: none;
147
+ }
148
+
149
+ #layout:not(.menu-compact-only-icons) .section-label {
150
+ display: block;
138
151
  }
139
152
 
140
153
  #menuSections {
@@ -210,9 +223,8 @@ body {
210
223
  top: calc(var(--header-height) + 15px);
211
224
  left: calc(var(--menu-sections-width) + 15px);
212
225
  bottom: 15px;
213
- background-color: var(--light-400);
214
- box-shadow: 2px 2px 16px #000;
215
- border-radius: 16px;
226
+ background-color: var(--light-500);
227
+ border-radius: 0 8px 8px 0;
216
228
  display: flex;
217
229
  flex-direction: column;
218
230
  overflow: hidden;
package/package.json CHANGED
@@ -1,16 +1,12 @@
1
1
  {
2
2
  "name": "@stack-spot/portal-layout",
3
- "version": "0.0.31",
3
+ "version": "0.0.32",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
- "scripts": {
8
- "build": "tsc && tsc-esm-fix --target='dist' && cpy src/layout.css dist --flat",
9
- "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
10
- },
11
7
  "peerDependencies": {
12
8
  "@citric/core": ">=5.7.0",
13
- "@citric/icons": ">=5.7.0",
9
+ "@citric/icons": ">=5.7.1",
14
10
  "@citric/ui": ">=5.7.2",
15
11
  "@stack-spot/portal-theme": ">=0.0.4",
16
12
  "@stack-spot/portal-translate": ">=0.0.5",
@@ -37,5 +33,9 @@
37
33
  },
38
34
  "dependencies": {
39
35
  "react-toastify": "^9.1.3"
36
+ },
37
+ "scripts": {
38
+ "build": "tsc && tsc-esm-fix --target='dist' && cpy src/layout.css dist --flat",
39
+ "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
40
40
  }
41
41
  }
package/src/components/menu/MenuSections.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Flex, IconBox, Text } from '@citric/core'
2
- import { ChevronRight, Cog, Collapse, Menu as MenuIcon } from '@citric/icons'
2
+ import { ChevronRight, Cog, Collapse, Expand } from '@citric/icons'
3
3
  import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
4
4
  import { useCallback, useMemo, useState } from 'react'
5
5
  import { MenuContent } from './MenuContent'
@@ -58,12 +58,15 @@ const Section = ({
58
58
  const t = useTranslate(dictionary)
59
59
  function shouldShowOverlay() {
60
60
  /* The overlay should appear if:
61
- * 1. The section has some content to render OR:
62
- * 1.1 The section is active and there is a contextual menu for the active page.
63
- * 2. The section is inactive OR:
61
+ * 1. The menu is compacted showing only the icons
62
+ * 2. The section has some content to render OR:
63
+ * 2.1 The section is active and there is a contextual menu for the active page.
64
+ * 3. The section is inactive OR:
64
65
  * 2.1. The contextual menu is hidden.
65
66
  */
66
- return (!!contentToRender || !!customContent || (hasContent && active)) && (!active || !isMenuContentVisible())
67
+ const layout = document.getElementById('layout')
68
+ const isCompactedOnlyIcons = layout?.classList.contains('menu-compact-only-icons')
69
+ return isCompactedOnlyIcons && (!!contentToRender || !!customContent || (hasContent && active)) && (!active || !isMenuContentVisible())
67
70
  }
68
71
 
69
72
  function showOverlayAndFixArrowPosition(event: React.MouseEvent<HTMLAnchorElement, MouseEvent> | React.KeyboardEvent<any>) {
@@ -102,7 +105,7 @@ const Section = ({
102
105
  >
103
106
  <Flex alignItems="center" justifyContent="center" px={5}>
104
107
  {icon}
105
- {typeof label === 'string' ? <Text appearance="body2" className="section-label" ml={2}>{label}</Text> : label.element}
108
+ {typeof label === 'string' ? <Text appearance="microtext1" className="section-label" ml={3}>{label}</Text> : label.element}
106
109
  </Flex>
107
110
  </a>
108
111
  {shouldShowOverlay() &&
@@ -140,13 +143,21 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
140
143
  const [_, setUpdate] = useState(0)
141
144
  const onHide = () => hideOverlay()
142
145
 
143
- const toggleMenu = useCallback(() => {
146
+ const toggleMenu = useCallback((hasContent: boolean) => {
144
147
  const layout = document.getElementById('layout')
145
148
  if (!layout) return
146
- if (layout.classList.contains('menu-content-visible')) {
147
- layout.classList.remove('menu-content-visible')
149
+ if (layout.classList.contains('menu-compact-only-icons')) {
150
+ layout.classList.remove('menu-compact-only-icons')
148
151
  } else {
149
- layout.classList.add('menu-content-visible')
152
+ layout.classList.add('menu-compact-only-icons')
153
+ }
154
+
155
+ if (hasContent) {
156
+ if (layout.classList.contains('menu-content-visible')) {
157
+ layout.classList.remove('menu-content-visible')
158
+ } else {
159
+ layout.classList.add('menu-content-visible')
160
+ }
150
161
  }
151
162
  setUpdate(current => current + 1)
152
163
  }, [])
@@ -193,29 +204,29 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
193
204
  <>
194
205
  <ul>{sectionItems}</ul>
195
206
 
196
- {(!!props.content || !!props.customContent || props.settings?.show) &&
197
- <Flex mb={7} alignItems="center" justifyContent="center">
198
- {(!!props.content || !!props.customContent) &&
199
- <button className="toggle sections-footer" onClick={toggleMenu} title={t.toggle} tabIndex={-1} aria-hidden>
200
- <IconBox>
201
- <MenuIcon className="expand" />
202
- <Collapse className="collapse" />
207
+ <Flex mb={7} alignItems="center">
208
+ <button className="toggle sections-footer" onClick={() => toggleMenu(!!props.content || !!props.customContent)}
209
+ title={t.toggle} tabIndex={-1} aria-hidden>
210
+ <IconBox>
211
+ <Expand className="expand" />
212
+ <Collapse className="collapse" />
213
+ </IconBox>
214
+ <Text appearance="microtext1" ml={8} className="collapse" colorScheme="light.contrastText">{t.hide}</Text>
215
+ </button>
216
+ {(props.settings?.show) &&
217
+ <a href={props.settings?.href} onClick={props.settings?.onClick}
218
+ className="sections-footer"
219
+ {...(props.settings.active ? { 'aria-current': 'page' } : undefined)}>
220
+ <Flex alignItems="center" >
221
+ <IconBox aria-label={t.settingsIcon}>
222
+ <Cog />
203
223
  </IconBox>
204
- </button>}
205
- {(props.settings?.show) &&
206
- <a href={props.settings?.href} onClick={props.settings?.onClick}
207
- className="sections-footer"
208
- {...(props.settings.active ? { 'aria-current': 'page' } : undefined)}>
209
- <Flex alignItems="center" justifyContent="center">
210
- <IconBox aria-label={t.settingsIcon}>
211
- <Cog />
212
- </IconBox>
213
- <Text appearance="body2" ml={2}>{t.settings}</Text>
214
- </Flex>
215
- </a>
216
- }
217
- </Flex>
218
- }
224
+ <Text appearance="microtext1" ml={2}>{t.settings}</Text>
225
+ </Flex>
226
+ </a>
227
+ }
228
+ </Flex>
229
+
219
230
  <div id={MENU_OVERLAY_ID} onMouseEnter={showOverlay} onMouseLeave={hideOverlay} ref={wrapper}>
220
231
  {renderMenuOverlay()}
221
232
  <div className="arrow"></div>
@@ -230,11 +241,13 @@ const dictionary = {
230
241
  menuOptions: 'View $0 menu options',
231
242
  settings: 'Settings',
232
243
  settingsIcon: 'Settings icon',
244
+ hide: 'Hide',
233
245
  },
234
246
  pt: {
235
247
  toggle: 'Visualizar ou esconder o menu',
236
248
  menuOptions: 'Visualizar opções do menu $0',
237
249
  settings: 'Configurações',
238
250
  settingsIcon: 'Icone de configurações',
251
+ hide: 'Esconder',
239
252
  },
240
253
  } satisfies Dictionary
package/src/layout.css CHANGED
@@ -40,7 +40,7 @@ body {
40
40
  #layout {
41
41
  --header-height: 56px;
42
42
  --menu-sections-width: 135px;
43
- --menu-content-width: 233px;
43
+ --menu-content-width: 240px;
44
44
  --menu-item-height: 74px;
45
45
  --modal-animation-duration: 0.3s;
46
46
  --right-panel-animation-duration: 0.3s;
@@ -49,11 +49,16 @@ body {
49
49
  --toastify-font-family: 'Roboto', sans-serif;
50
50
  }
51
51
 
52
- #layout.menu-compact {
52
+ #layout.menu-compact:not(.menu-compact-only-icons) {
53
53
  --menu-sections-width: 135px;
54
54
  --menu-item-height: 56px;
55
55
  }
56
56
 
57
+ #layout.menu-compact-only-icons {
58
+ --menu-sections-width: 56px;
59
+ --menu-item-height: 56px;
60
+ }
61
+
57
62
  #layout.no-menu-sections {
58
63
  --menu-sections-width: 0px;
59
64
  }
@@ -128,13 +133,21 @@ body {
128
133
  }
129
134
 
130
135
  #menu .toggle .expand,
131
- #layout.menu-content-visible .toggle .collapse {
132
- opacity: 1;
136
+ #layout.menu-compact-only-icons .toggle .collapse {
137
+ opacity: 0;
133
138
  }
134
139
 
135
140
  #menu .toggle .collapse,
136
- #layout.menu-content-visible .toggle .expand {
137
- opacity: 0;
141
+ #layout.menu-compact-only-icons .toggle .expand {
142
+ opacity: 1;
143
+ }
144
+
145
+ #layout.menu-compact-only-icons .section-label {
146
+ display: none;
147
+ }
148
+
149
+ #layout:not(.menu-compact-only-icons) .section-label {
150
+ display: block;
138
151
  }
139
152
 
140
153
  #menuSections {
@@ -210,9 +223,8 @@ body {
210
223
  top: calc(var(--header-height) + 15px);
211
224
  left: calc(var(--menu-sections-width) + 15px);
212
225
  bottom: 15px;
213
- background-color: var(--light-400);
214
- box-shadow: 2px 2px 16px #000;
215
- border-radius: 16px;
226
+ background-color: var(--light-500);
227
+ border-radius: 0 8px 8px 0;
216
228
  display: flex;
217
229
  flex-direction: column;
218
230
  overflow: hidden;
package/dist/components/error/ErrorDescriptor.d.ts DELETED
@@ -1,12 +0,0 @@
1
- export interface ErrorDescription {
2
- code?: number;
3
- message?: string;
4
- debug?: boolean;
5
- }
6
- export type DescriptionFn = (error: any) => ErrorDescription;
7
- export declare class ErrorDescriptor {
8
- private static descriptionFunction;
9
- static setDescriptionFunction(fn: DescriptionFn): void;
10
- static describe(error: any): ErrorDescription;
11
- }
12
- //# sourceMappingURL=ErrorDescriptor.d.ts.map
package/dist/components/error/ErrorDescriptor.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"ErrorDescriptor.d.ts","sourceRoot":"","sources":["../../../src/components/error/ErrorDescriptor.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,GAAG,KAAK,gBAAgB,CAAA;AAE5D,qBAAa,eAAe;IAC1B,OAAO,CAAC,MAAM,CAAC,mBAAmB,CAEhC;IAEF,MAAM,CAAC,sBAAsB,CAAC,EAAE,EAAE,aAAa;IAI/C,MAAM,CAAC,QAAQ,CAAC,KAAK,EAAE,GAAG;CAG3B"}
package/dist/components/error/ErrorDescriptor.js DELETED
@@ -1,17 +0,0 @@
1
- export class ErrorDescriptor {
2
- static setDescriptionFunction(fn) {
3
- this.descriptionFunction = fn;
4
- }
5
- static describe(error) {
6
- return this.descriptionFunction(error);
7
- }
8
- }
9
- Object.defineProperty(ErrorDescriptor, "descriptionFunction", {
10
- enumerable: true,
11
- configurable: true,
12
- writable: true,
13
- value: error => ({
14
- message: error.message || `${error}`,
15
- })
16
- });
17
- //# sourceMappingURL=ErrorDescriptor.js.map
package/dist/components/error/ErrorDescriptor.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"ErrorDescriptor.js","sourceRoot":"","sources":["../../../src/components/error/ErrorDescriptor.ts"],"names":[],"mappings":"AAQA,MAAM,OAAO,eAAe;IAK1B,MAAM,CAAC,sBAAsB,CAAC,EAAiB;QAC7C,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAA;IAC/B,CAAC;IAED,MAAM,CAAC,QAAQ,CAAC,KAAU;QACxB,OAAO,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAA;IACxC,CAAC;;AAVc;;;;WAAqC,KAAK,CAAC,EAAE,CAAC,CAAC;QAC5D,OAAO,EAAE,KAAK,CAAC,OAAO,IAAI,GAAG,KAAK,EAAE;KACrC,CAAC;GAAA"}
package/dist/components/menu/useCheckTextOverflow.d.ts DELETED
@@ -1,6 +0,0 @@
1
- /// <reference types="react" />
2
- export declare function useCheckTextOverflow(): {
3
- overflow: boolean;
4
- ref: import("react").RefObject<HTMLParagraphElement>;
5
- };
6
- //# sourceMappingURL=useCheckTextOverflow.d.ts.map
package/dist/components/menu/useCheckTextOverflow.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"useCheckTextOverflow.d.ts","sourceRoot":"","sources":["../../../src/components/menu/useCheckTextOverflow.tsx"],"names":[],"mappings":";AAEA,wBAAgB,oBAAoB;;;EAuBnC"}
package/dist/components/menu/useCheckTextOverflow.js DELETED
@@ -1,20 +0,0 @@
1
- import { useState, useRef, useEffect } from 'react';
2
- export function useCheckTextOverflow() {
3
- const [overflow, setOverflow] = useState(false);
4
- const ref = useRef(null);
5
- const checkOverflow = () => {
6
- if (!ref.current) {
7
- return;
8
- }
9
- const hasOverflow = ref.current.offsetWidth < ref.current.scrollWidth;
10
- if (hasOverflow === overflow) {
11
- return;
12
- }
13
- setOverflow(hasOverflow);
14
- };
15
- useEffect(() => {
16
- checkOverflow();
17
- }, [ref.current]);
18
- return { overflow, ref };
19
- }
20
- //# sourceMappingURL=useCheckTextOverflow.js.map
package/dist/components/menu/useCheckTextOverflow.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"useCheckTextOverflow.js","sourceRoot":"","sources":["../../../src/components/menu/useCheckTextOverflow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,MAAM,UAAU,oBAAoB;IAClC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IACxD,MAAM,GAAG,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAA;IAE9C,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;YACjB,OAAM;QACR,CAAC;QAED,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,WAAW,CAAA;QAErE,IAAI,WAAW,KAAK,QAAQ,EAAE,CAAC;YAC7B,OAAM;QACR,CAAC;QAED,WAAW,CAAC,WAAW,CAAC,CAAA;IAC1B,CAAC,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,EAAE,CAAA;IACjB,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;IAEjB,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAA;AAC1B,CAAC"}