@stack-spot/portal-layout 0.0.65 → 1.0.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/Layout.d.ts +58 -6
- package/dist/Layout.d.ts.map +1 -1
- package/dist/Layout.js +14 -7
- package/dist/Layout.js.map +1 -1
- package/dist/LayoutOverlayManager.d.ts +173 -6
- package/dist/LayoutOverlayManager.d.ts.map +1 -1
- package/dist/LayoutOverlayManager.js +118 -9
- package/dist/LayoutOverlayManager.js.map +1 -1
- package/dist/components/Dialog.d.ts +48 -5
- package/dist/components/Dialog.d.ts.map +1 -1
- package/dist/components/Dialog.js +7 -2
- package/dist/components/Dialog.js.map +1 -1
- package/dist/components/Header.d.ts +29 -1
- package/dist/components/Header.d.ts.map +1 -1
- package/dist/components/Header.js +6 -2
- package/dist/components/Header.js.map +1 -1
- package/dist/components/OverlayContent.d.ts +22 -0
- package/dist/components/OverlayContent.d.ts.map +1 -1
- package/dist/components/OverlayContent.js +4 -0
- package/dist/components/OverlayContent.js.map +1 -1
- package/dist/components/PortalSwitcher.d.ts +14 -0
- package/dist/components/PortalSwitcher.d.ts.map +1 -1
- package/dist/components/PortalSwitcher.js +9 -6
- package/dist/components/PortalSwitcher.js.map +1 -1
- package/dist/components/Toaster.d.ts +4 -0
- package/dist/components/Toaster.d.ts.map +1 -1
- package/dist/components/Toaster.js +5 -1
- package/dist/components/Toaster.js.map +1 -1
- package/dist/components/UserMenu.d.ts +14 -1
- package/dist/components/UserMenu.d.ts.map +1 -1
- package/dist/components/UserMenu.js +5 -1
- package/dist/components/UserMenu.js.map +1 -1
- package/dist/components/error/ErrorBoundary.d.ts +10 -1
- package/dist/components/error/ErrorBoundary.d.ts.map +1 -1
- package/dist/components/error/ErrorBoundary.js +10 -1
- package/dist/components/error/ErrorBoundary.js.map +1 -1
- package/dist/components/error/ErrorManager.d.ts +22 -6
- package/dist/components/error/ErrorManager.d.ts.map +1 -1
- package/dist/components/error/ErrorManager.js +21 -1
- package/dist/components/error/ErrorManager.js.map +1 -1
- package/dist/components/error/SilentErrorBoundary.d.ts +11 -2
- package/dist/components/error/SilentErrorBoundary.d.ts.map +1 -1
- package/dist/components/error/SilentErrorBoundary.js +10 -0
- package/dist/components/error/SilentErrorBoundary.js.map +1 -1
- package/dist/components/menu/MenuContent.d.ts +19 -2
- package/dist/components/menu/MenuContent.d.ts.map +1 -1
- package/dist/components/menu/MenuContent.js +33 -35
- package/dist/components/menu/MenuContent.js.map +1 -1
- package/dist/components/menu/MenuSections.d.ts +10 -0
- package/dist/components/menu/MenuSections.d.ts.map +1 -1
- package/dist/components/menu/MenuSections.js +70 -16
- package/dist/components/menu/MenuSections.js.map +1 -1
- package/dist/components/menu/PageSelector.d.ts +5 -0
- package/dist/components/menu/PageSelector.d.ts.map +1 -1
- package/dist/components/menu/PageSelector.js +8 -3
- package/dist/components/menu/PageSelector.js.map +1 -1
- package/dist/components/menu/types.d.ts +100 -7
- package/dist/components/menu/types.d.ts.map +1 -1
- package/dist/components/tour/PortalSwitcherStep.d.ts +6 -1
- package/dist/components/tour/PortalSwitcherStep.d.ts.map +1 -1
- package/dist/components/tour/PortalSwitcherStep.js +6 -1
- package/dist/components/tour/PortalSwitcherStep.js.map +1 -1
- package/dist/components/types.d.ts +0 -13
- package/dist/components/types.d.ts.map +1 -1
- package/dist/dictionary.d.ts +3 -0
- package/dist/dictionary.d.ts.map +1 -1
- package/dist/dictionary.js +3 -0
- package/dist/dictionary.js.map +1 -1
- package/dist/elements.d.ts +6 -0
- package/dist/elements.d.ts.map +1 -1
- package/dist/elements.js +6 -0
- package/dist/elements.js.map +1 -1
- package/dist/index.d.ts +0 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -3
- package/dist/index.js.map +1 -1
- package/dist/layout.css +1 -5
- package/dist/toaster.d.ts +74 -9
- package/dist/toaster.d.ts.map +1 -1
- package/dist/toaster.js +32 -6
- package/dist/toaster.js.map +1 -1
- package/dist/utils.d.ts +6 -69
- package/dist/utils.d.ts.map +1 -1
- package/dist/utils.js +9 -130
- package/dist/utils.js.map +1 -1
- package/package.json +16 -15
- package/readme.md +146 -0
- package/src/Layout.tsx +79 -30
- package/src/LayoutOverlayManager.tsx +184 -9
- package/src/components/Dialog.tsx +49 -6
- package/src/components/Header.tsx +31 -3
- package/src/components/OverlayContent.tsx +22 -0
- package/src/components/PortalSwitcher.tsx +22 -8
- package/src/components/Toaster.tsx +10 -2
- package/src/components/UserMenu.tsx +14 -1
- package/src/components/error/ErrorBoundary.tsx +11 -2
- package/src/components/error/ErrorManager.ts +22 -6
- package/src/components/error/SilentErrorBoundary.tsx +12 -2
- package/src/components/menu/MenuContent.tsx +33 -52
- package/src/components/menu/MenuSections.tsx +99 -49
- package/src/components/menu/PageSelector.tsx +8 -3
- package/src/components/menu/types.ts +100 -8
- package/src/components/tour/PortalSwitcherStep.tsx +7 -4
- package/src/components/types.ts +0 -14
- package/src/dictionary.ts +3 -0
- package/src/elements.ts +6 -0
- package/src/index.ts +0 -3
- package/src/layout.css +1 -5
- package/src/toaster.tsx +125 -14
- package/src/utils.ts +9 -142
- package/dist/components/BottomNotification.d.ts +0 -1
- package/dist/components/BottomNotification.d.ts.map +0 -1
- package/dist/components/BottomNotification.js +0 -2
- package/dist/components/BottomNotification.js.map +0 -1
- package/dist/components/BottomPanel.d.ts +0 -1
- package/dist/components/BottomPanel.d.ts.map +0 -1
- package/dist/components/BottomPanel.js +0 -2
- package/dist/components/BottomPanel.js.map +0 -1
- package/dist/components/SelectionList.d.ts +0 -36
- package/dist/components/SelectionList.d.ts.map +0 -1
- package/dist/components/SelectionList.js +0 -140
- package/dist/components/SelectionList.js.map +0 -1
- package/dist/components/error/ErrorFeedback.d.ts +0 -3
- package/dist/components/error/ErrorFeedback.d.ts.map +0 -1
- package/dist/components/error/ErrorFeedback.js +0 -66
- package/dist/components/error/ErrorFeedback.js.map +0 -1
- package/dist/components/menu/use-check-text-overflow.d.ts +0 -6
- package/dist/components/menu/use-check-text-overflow.d.ts.map +0 -1
- package/dist/components/menu/use-check-text-overflow.js +0 -20
- package/dist/components/menu/use-check-text-overflow.js.map +0 -1
- package/dist/components/menu/use-keyboard-controls.d.ts +0 -23
- package/dist/components/menu/use-keyboard-controls.d.ts.map +0 -1
- package/dist/components/menu/use-keyboard-controls.js +0 -49
- package/dist/components/menu/use-keyboard-controls.js.map +0 -1
- package/dist/layout-context.d.ts +0 -10
- package/dist/layout-context.d.ts.map +0 -1
- package/dist/layout-context.js +0 -11
- package/dist/layout-context.js.map +0 -1
- package/dist/svg/AI.d.ts +0 -6
- package/dist/svg/AI.d.ts.map +0 -1
- package/dist/svg/AI.js +0 -9
- package/dist/svg/AI.js.map +0 -1
- package/dist/svg/EDP.d.ts +0 -6
- package/dist/svg/EDP.d.ts.map +0 -1
- package/dist/svg/EDP.js +0 -5
- package/dist/svg/EDP.js.map +0 -1
- package/dist/svg/Forbidden.d.ts +0 -6
- package/dist/svg/Forbidden.d.ts.map +0 -1
- package/dist/svg/Forbidden.js +0 -4
- package/dist/svg/Forbidden.js.map +0 -1
- package/dist/svg/HUB.d.ts +0 -6
- package/dist/svg/HUB.d.ts.map +0 -1
- package/dist/svg/HUB.js +0 -5
- package/dist/svg/HUB.js.map +0 -1
- package/dist/svg/Logo.d.ts +0 -2
- package/dist/svg/Logo.d.ts.map +0 -1
- package/dist/svg/Logo.js +0 -4
- package/dist/svg/Logo.js.map +0 -1
- package/dist/svg/NotFound.d.ts +0 -6
- package/dist/svg/NotFound.d.ts.map +0 -1
- package/dist/svg/NotFound.js +0 -4
- package/dist/svg/NotFound.js.map +0 -1
- package/dist/svg/ServerError.d.ts +0 -6
- package/dist/svg/ServerError.d.ts.map +0 -1
- package/dist/svg/ServerError.js +0 -4
- package/dist/svg/ServerError.js.map +0 -1
- package/dist/svg/Unauthenticated.d.ts +0 -6
- package/dist/svg/Unauthenticated.d.ts.map +0 -1
- package/dist/svg/Unauthenticated.js +0 -4
- package/dist/svg/Unauthenticated.js.map +0 -1
- package/src/components/BottomNotification.tsx +0 -0
- package/src/components/BottomPanel.tsx +0 -0
- package/src/components/SelectionList.tsx +0 -272
- package/src/components/error/ErrorFeedback.tsx +0 -114
- package/src/components/menu/use-check-text-overflow.tsx +0 -26
- package/src/components/menu/use-keyboard-controls.tsx +0 -70
- package/src/layout-context.tsx +0 -22
- package/src/svg/AI.tsx +0 -37
- package/src/svg/EDP.tsx +0 -35
- package/src/svg/Forbidden.tsx +0 -22
- package/src/svg/HUB.tsx +0 -35
- package/src/svg/Logo.tsx +0 -35
- package/src/svg/NotFound.tsx +0 -16
- package/src/svg/ServerError.tsx +0 -33
- package/src/svg/Unauthenticated.tsx +0 -16
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ErrorManager.d.ts","sourceRoot":"","sources":["../../../src/components/error/ErrorManager.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"ErrorManager.d.ts","sourceRoot":"","sources":["../../../src/components/error/ErrorManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAA;AAE9E,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,GAAG,KAAK,gBAAgB,CAAA;AAC5D,MAAM,MAAM,YAAY,GAAG,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;AAE/C;;GAEG;AACH,qBAAa,YAAY;IACvB,OAAO,CAAC,MAAM,CAAC,mBAAmB,CAEhC;IACF,OAAO,CAAC,MAAM,CAAC,YAAY,CAA0B;IAErD;;;OAGG;IACH,MAAM,CAAC,sBAAsB,CAAC,EAAE,EAAE,aAAa;IAI/C;;;OAGG;IACH,MAAM,CAAC,eAAe,CAAC,OAAO,EAAE,YAAY;IAI5C;;;;OAIG;IACH,MAAM,CAAC,QAAQ,CAAC,KAAK,EAAE,GAAG;IAI1B;;;OAGG;IACH,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,GAAG;CAGlC"}
|
|
@@ -1,15 +1,35 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Setup how the Error Boundaries deal with errors.
|
|
3
|
+
*/
|
|
1
4
|
export class ErrorManager {
|
|
5
|
+
/**
|
|
6
|
+
* Sets a custom logic for generating error messages and codes. Also setups the environment (debug or not).
|
|
7
|
+
* @param fn a function that, given an error, generates its description.
|
|
8
|
+
*/
|
|
2
9
|
static setDescriptionFunction(fn) {
|
|
3
10
|
this.descriptionFunction = fn;
|
|
4
11
|
}
|
|
12
|
+
/**
|
|
13
|
+
* Sets a custom error handler, i.e. a function to run every time an error is catch by an ErrorBoundary.
|
|
14
|
+
* @param fn a function that receives the error.
|
|
15
|
+
*/
|
|
5
16
|
static setErrorHandler(handler) {
|
|
6
17
|
this.errorHandler = handler;
|
|
7
18
|
}
|
|
19
|
+
/**
|
|
20
|
+
* Uses the error descriptor to describe an error.
|
|
21
|
+
* @param error the error
|
|
22
|
+
* @returns the error description
|
|
23
|
+
*/
|
|
8
24
|
static describe(error) {
|
|
9
25
|
return this.descriptionFunction(error);
|
|
10
26
|
}
|
|
27
|
+
/**
|
|
28
|
+
* Runs the error handler, if any has been setup.
|
|
29
|
+
* @param error the error
|
|
30
|
+
*/
|
|
11
31
|
static runErrorHandler(error) {
|
|
12
|
-
|
|
32
|
+
this.errorHandler?.(error);
|
|
13
33
|
}
|
|
14
34
|
}
|
|
15
35
|
Object.defineProperty(ErrorManager, "descriptionFunction", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ErrorManager.js","sourceRoot":"","sources":["../../../src/components/error/ErrorManager.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ErrorManager.js","sourceRoot":"","sources":["../../../src/components/error/ErrorManager.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,MAAM,OAAO,YAAY;IAMvB;;;OAGG;IACH,MAAM,CAAC,sBAAsB,CAAC,EAAiB;QAC7C,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAA;IAC/B,CAAC;IAED;;;OAGG;IACH,MAAM,CAAC,eAAe,CAAC,OAAqB;QAC1C,IAAI,CAAC,YAAY,GAAG,OAAO,CAAA;IAC7B,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,QAAQ,CAAC,KAAU;QACxB,OAAO,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAA;IACxC,CAAC;IAED;;;OAGG;IACH,MAAM,CAAC,eAAe,CAAC,KAAU;QAC/B,IAAI,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC,CAAA;IAC5B,CAAC;;AApCc;;;;WAAqC,KAAK,CAAC,EAAE,CAAC,CAAC;QAC5D,OAAO,EAAE,KAAK,CAAC,OAAO,IAAI,GAAG,KAAK,EAAE;KACrC,CAAC;GAAA"}
|
|
@@ -1,12 +1,21 @@
|
|
|
1
|
+
import { ErrorDescription } from '@stack-spot/portal-components/ErrorFeedback';
|
|
1
2
|
import { Component } from 'react';
|
|
2
|
-
import { ErrorDescription } from './ErrorManager.js';
|
|
3
3
|
interface State extends ErrorDescription {
|
|
4
4
|
hasError: boolean;
|
|
5
|
-
message?: string;
|
|
6
5
|
}
|
|
7
6
|
interface Props {
|
|
8
7
|
children: React.ReactNode;
|
|
9
8
|
}
|
|
9
|
+
/**
|
|
10
|
+
* An Error Boundary that doesn't render anything if any of its children throws. If the environment is not production, a small error icon
|
|
11
|
+
* is rendered instead of nothing.
|
|
12
|
+
*
|
|
13
|
+
* To customize how the error is logged, setup an error descriptor for the ErrorManager class. If you're using the component `Layout` or
|
|
14
|
+
* `RawLayout`, you can use the property `errorDescriptor`.
|
|
15
|
+
*
|
|
16
|
+
* To run an error handler every time an error is catch by this boundary, setup an error handler for the ErrorManager class. If you're
|
|
17
|
+
* using the component `Layout` or `RawLayout`, you can use the property `onError`.
|
|
18
|
+
*/
|
|
10
19
|
export declare class SilentErrorBoundary extends Component<Props, State> {
|
|
11
20
|
constructor(props: Props);
|
|
12
21
|
static getDerivedStateFromError(error: any): {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SilentErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/error/SilentErrorBoundary.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SilentErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/error/SilentErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAA;AAE9E,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,UAAU,KAAM,SAAQ,gBAAgB;IACtC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,KAAK;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;GASG;AACH,qBAAa,mBAAoB,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;gBAClD,KAAK,EAAE,KAAK;IAKxB,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,GAAG;;;;;;IAI1C,iBAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG;IAM5C,kBAAkB,CAAC,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC;IAI7C,MAAM;CAoBP"}
|
|
@@ -2,6 +2,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { theme } from '@stack-spot/portal-theme';
|
|
3
3
|
import { Component } from 'react';
|
|
4
4
|
import { ErrorManager } from './ErrorManager.js';
|
|
5
|
+
/**
|
|
6
|
+
* An Error Boundary that doesn't render anything if any of its children throws. If the environment is not production, a small error icon
|
|
7
|
+
* is rendered instead of nothing.
|
|
8
|
+
*
|
|
9
|
+
* To customize how the error is logged, setup an error descriptor for the ErrorManager class. If you're using the component `Layout` or
|
|
10
|
+
* `RawLayout`, you can use the property `errorDescriptor`.
|
|
11
|
+
*
|
|
12
|
+
* To run an error handler every time an error is catch by this boundary, setup an error handler for the ErrorManager class. If you're
|
|
13
|
+
* using the component `Layout` or `RawLayout`, you can use the property `onError`.
|
|
14
|
+
*/
|
|
5
15
|
export class SilentErrorBoundary extends Component {
|
|
6
16
|
constructor(props) {
|
|
7
17
|
super(props);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SilentErrorBoundary.js","sourceRoot":"","sources":["../../../src/components/error/SilentErrorBoundary.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"SilentErrorBoundary.js","sourceRoot":"","sources":["../../../src/components/error/SilentErrorBoundary.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAU7C;;;;;;;;;GASG;AACH,MAAM,OAAO,mBAAoB,SAAQ,SAAuB;IAC9D,YAAY,KAAY;QACtB,KAAK,CAAC,KAAK,CAAC,CAAA;QACZ,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAA;IAClC,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,KAAU;QACxC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAA;IAC5D,CAAC;IAED,iBAAiB,CAAC,KAAU,EAAE,SAAc;QAC1C,sCAAsC;QACtC,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;QAC/B,YAAY,CAAC,eAAe,CAAC,KAAK,CAAC,CAAA;IACrC,CAAC;IAED,kBAAkB,CAAC,SAA0B;QAC3C,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,SAAS,CAAC,QAAQ;YAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAA;IACpF,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ;YACxB,CAAC,CAAC,cACA,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,EACtE,KAAK,EAAE;oBACL,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,MAAM;oBACd,MAAM,EAAE,MAAM;oBACd,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;oBACnC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY;oBACtC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;oBAC3C,cAAc,EAAE,QAAQ;oBACxB,UAAU,EAAE,QAAQ;oBACpB,UAAU,EAAE,MAAM;oBAClB,QAAQ,EAAE,MAAM;oBAChB,YAAY,EAAE,KAAK;iBACpB,kBACK;YACR,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;IACzB,CAAC;CACF"}
|
|
@@ -1,7 +1,24 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { MenuAction, MenuSectionContent } from './types.js';
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
/**
|
|
4
|
+
* The list (<ul>) used for grouping items in a menu.
|
|
5
|
+
*/
|
|
6
|
+
export declare const MenuGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
|
|
7
|
+
/**
|
|
8
|
+
* The header (<header>) for a group of items in a menu. Contains the title of the group.
|
|
9
|
+
*/
|
|
10
|
+
export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
|
|
11
|
+
/**
|
|
12
|
+
* A menu item that performs an action.
|
|
13
|
+
* @param props the props for the component {@link MenuAction}.
|
|
14
|
+
*/
|
|
5
15
|
export declare const ActionItem: ({ label, onClick, href, active, icon, badge, overflow }: MenuAction) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
/**
|
|
17
|
+
* Renders a menu-content interface.
|
|
18
|
+
*
|
|
19
|
+
* Considering the Stackspot UI, this is the "menu content", not the "menu sections", i.e. it's the second menu from left to right, the
|
|
20
|
+
* one that changes according to section selected.
|
|
21
|
+
* @param props the props for the component {@link MenuSectionContent}.
|
|
22
|
+
*/
|
|
6
23
|
export declare const MenuContent: ({ pageSelector, goBack, title, subtitle, afterTitle, options, loading, error }: MenuSectionContent) => import("react/jsx-runtime").JSX.Element;
|
|
7
24
|
//# sourceMappingURL=MenuContent.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuContent.d.ts","sourceRoot":"","sources":["../../../src/components/menu/MenuContent.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"MenuContent.d.ts","sourceRoot":"","sources":["../../../src/components/menu/MenuContent.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAa,UAAU,EAAY,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAW7E;;GAEG;AACH,eAAO,MAAM,SAAS,4OAsHrB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,kOAIjB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,4DAAsE,UAAU,4CAuBtG,CAAA;AAkDD;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,mFAAyF,kBAAkB,4CAsClI,CAAA"}
|
|
@@ -1,17 +1,15 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
/* eslint-disable react-refresh/only-export-components */
|
|
3
|
-
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
4
2
|
import { Flex, IconBox, Text } from '@citric/core';
|
|
5
3
|
import { ArrowLeft, ChevronDown } from '@citric/icons';
|
|
6
4
|
import { LoadingCircular } from '@citric/ui';
|
|
5
|
+
import { useCheckTextOverflow } from '@stack-spot/portal-components';
|
|
6
|
+
import { useAnchorTag } from '@stack-spot/portal-components/anchor';
|
|
7
7
|
import { listToClass, theme } from '@stack-spot/portal-theme';
|
|
8
8
|
import { useMemo, useState } from 'react';
|
|
9
9
|
import { styled } from 'styled-components';
|
|
10
|
-
import { useAnchorTag } from '../../layout-context.js';
|
|
11
10
|
import { hideOverlayImmediately } from './MenuSections.js';
|
|
12
11
|
import { PageSelector } from './PageSelector.js';
|
|
13
12
|
import { MENU_CONTENT_ITEM_PADDING as ITEM_PADDING, MENU_CONTENT_PADDING as PADDING } from './constants.js';
|
|
14
|
-
import { useCheckTextOverflow } from './use-check-text-overflow.js';
|
|
15
13
|
const BackLink = styled.a `
|
|
16
14
|
display: flex;
|
|
17
15
|
flex-direction: row;
|
|
@@ -20,6 +18,9 @@ const BackLink = styled.a `
|
|
|
20
18
|
margin-bottom: 16px;
|
|
21
19
|
gap: 6px;
|
|
22
20
|
`;
|
|
21
|
+
/**
|
|
22
|
+
* The list (<ul>) used for grouping items in a menu.
|
|
23
|
+
*/
|
|
23
24
|
export const MenuGroup = styled.ul `
|
|
24
25
|
padding: 0 0 0 16px;
|
|
25
26
|
display: flex;
|
|
@@ -31,30 +32,18 @@ export const MenuGroup = styled.ul `
|
|
|
31
32
|
padding: 0;
|
|
32
33
|
}
|
|
33
34
|
|
|
34
|
-
.item-row-group > a {
|
|
35
|
-
padding: 0 16px;
|
|
36
|
-
margin: 0;
|
|
37
|
-
border-radius: 0;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.item-row-group > a::before {
|
|
41
|
-
content: '';
|
|
42
|
-
position: absolute;
|
|
43
|
-
top: 0;
|
|
44
|
-
left: 0;
|
|
45
|
-
right: 0;
|
|
46
|
-
bottom: 0;
|
|
47
|
-
background-color: var(--light-300);
|
|
48
|
-
opacity: 0.24;
|
|
49
|
-
border-radius: inherit;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
35
|
.item-row {
|
|
53
36
|
display: flex;
|
|
54
37
|
flex-direction: row;
|
|
55
38
|
gap: 8px;
|
|
56
39
|
align-items: center;
|
|
57
40
|
|
|
41
|
+
&.root {
|
|
42
|
+
padding: 0 16px;
|
|
43
|
+
margin-top: 16px;
|
|
44
|
+
border-radius: 0;
|
|
45
|
+
}
|
|
46
|
+
|
|
58
47
|
.label {
|
|
59
48
|
flex: 1;
|
|
60
49
|
&.hidden, &.ellipsis {
|
|
@@ -66,10 +55,6 @@ export const MenuGroup = styled.ul `
|
|
|
66
55
|
}
|
|
67
56
|
}
|
|
68
57
|
}
|
|
69
|
-
|
|
70
|
-
.item-row-group {
|
|
71
|
-
margin-top: 16px;
|
|
72
|
-
}
|
|
73
58
|
|
|
74
59
|
li a {
|
|
75
60
|
position: relative;
|
|
@@ -127,7 +112,7 @@ export const MenuGroup = styled.ul `
|
|
|
127
112
|
&.open {
|
|
128
113
|
visibility: visible;
|
|
129
114
|
transition: unset;
|
|
130
|
-
& > li > a
|
|
115
|
+
& > li > a {
|
|
131
116
|
height: 40px;
|
|
132
117
|
}
|
|
133
118
|
}
|
|
@@ -155,11 +140,18 @@ export const MenuGroup = styled.ul `
|
|
|
155
140
|
}
|
|
156
141
|
}
|
|
157
142
|
`;
|
|
143
|
+
/**
|
|
144
|
+
* The header (<header>) for a group of items in a menu. Contains the title of the group.
|
|
145
|
+
*/
|
|
158
146
|
export const Title = styled.header `
|
|
159
147
|
display: flex;
|
|
160
148
|
flex-direction: column;
|
|
161
149
|
margin: ${PADDING}px 0 24px ${PADDING}px;
|
|
162
150
|
`;
|
|
151
|
+
/**
|
|
152
|
+
* A menu item that performs an action.
|
|
153
|
+
* @param props the props for the component {@link MenuAction}.
|
|
154
|
+
*/
|
|
163
155
|
export const ActionItem = ({ label, onClick, href, active, icon, badge, overflow = 'wrap' }) => {
|
|
164
156
|
const Link = useAnchorTag();
|
|
165
157
|
const { ref, overflow: textOverflow } = useCheckTextOverflow();
|
|
@@ -174,22 +166,28 @@ export const ActionItem = ({ label, onClick, href, active, icon, badge, overflow
|
|
|
174
166
|
_jsx(Text, { ref: ref, appearance: "body2", className: `label ${overflow}`, title: textOverflow ? label : '', children: label }) :
|
|
175
167
|
label.element, badge] }));
|
|
176
168
|
};
|
|
169
|
+
/**
|
|
170
|
+
* A menu item that is actually a subgroup and can be collapsed/expanded.
|
|
171
|
+
* @param props the props for the component {@link ItemGroup} & { root: boolean }. Pass root=true to style this group as a root group.
|
|
172
|
+
* Root groups have slightly different visuals.
|
|
173
|
+
*/
|
|
177
174
|
const CollapsibleGroupItem = ({ label, open: initiallyOpened, children, icon, badge, root, overflow = 'wrap' }) => {
|
|
178
175
|
const [open, setOpen] = useState(initiallyOpened ?? children?.some(c => 'active' in c && c.active) ?? false);
|
|
179
176
|
const items = useMemo(() => children?.filter(i => !i.hidden).map(renderOption), [children]);
|
|
180
177
|
const id = `menuGroup${label}`;
|
|
181
|
-
return (_jsxs(_Fragment, { children: [_jsxs("a", { onClick: () => setOpen(!open), onKeyDown: e => e.key === 'Enter' && setOpen(!open), className:
|
|
182
|
-
};
|
|
183
|
-
const RootGroupItem = (props) => {
|
|
184
|
-
const items = useMemo(() => props.children?.filter(i => !i.hidden).map(renderOption), [props.children]);
|
|
185
|
-
return _jsx(_Fragment, { children: items.length ? _jsx("div", { className: "item-row-group", children: _jsx(CollapsibleGroupItem, { ...props, open: true, root: true }) }) :
|
|
186
|
-
_jsxs(_Fragment, { children: [_jsxs("div", { className: "item-row", children: [props.icon, _jsx(Text, { appearance: "overheader2", colorScheme: "light.700", className: `group-title label ${props.overflow}`, children: props.label }), props.badge] }), _jsx(MenuGroup, { className: "open no-indentation", children: items })] }) });
|
|
178
|
+
return (_jsxs(_Fragment, { children: [_jsxs("a", { onClick: () => setOpen(!open), onKeyDown: e => e.key === 'Enter' && setOpen(!open), className: listToClass(['item-row', root && 'root']), tabIndex: 0, "aria-controls": id, "aria-expanded": open, children: [icon, _jsx(Text, { appearance: root ? 'overheader2' : 'body2', colorScheme: "light.contrastText", className: `label ${overflow} ${root ? 'item-row-title' : ''}`, children: label }), badge, _jsx(IconBox, { sx: { mr: root ? undefined : '5' }, children: _jsx(ChevronDown, { className: listToClass(['chevron', open ? 'open' : '']) }) })] }), _jsx(MenuGroup, { id: id, className: `${open ? 'open' : ''} ${root ? 'no-indentation' : ''}`, "aria-hidden": !open, children: items })] }));
|
|
187
179
|
};
|
|
188
|
-
const GroupItem = ({ root, ...item }) => (root ? _jsx(RootGroupItem, { ...item }) : _jsx(CollapsibleGroupItem, { ...item }));
|
|
189
180
|
function renderOption({ root, ...option }) {
|
|
190
181
|
const labelText = typeof option.label === 'string' ? option.label : option.label.id;
|
|
191
|
-
return (_jsx("li", { role: "menuitem", "aria-selected": 'children' in option ? undefined : option.active, children: 'children' in option ? _jsx(
|
|
182
|
+
return (_jsx("li", { role: "menuitem", "aria-selected": 'children' in option ? undefined : option.active, children: 'children' in option ? _jsx(CollapsibleGroupItem, { ...option, root: root, open: option.open ?? root }) : _jsx(ActionItem, { ...option }) }, labelText));
|
|
192
183
|
}
|
|
184
|
+
/**
|
|
185
|
+
* Renders a menu-content interface.
|
|
186
|
+
*
|
|
187
|
+
* Considering the Stackspot UI, this is the "menu content", not the "menu sections", i.e. it's the second menu from left to right, the
|
|
188
|
+
* one that changes according to section selected.
|
|
189
|
+
* @param props the props for the component {@link MenuSectionContent}.
|
|
190
|
+
*/
|
|
193
191
|
export const MenuContent = ({ pageSelector, goBack, title, subtitle, afterTitle, options = [], loading, error }) => {
|
|
194
192
|
const items = useMemo(() => options.filter(o => !o.hidden).map(o => renderOption({ ...o, root: true })), [options]);
|
|
195
193
|
function renderContent() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuContent.js","sourceRoot":"","sources":["../../../src/components/menu/MenuContent.tsx"],"names":[],"mappings":";AAAA,
|
|
1
|
+
{"version":3,"file":"MenuContent.js","sourceRoot":"","sources":["../../../src/components/menu/MenuContent.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,14 @@
|
|
|
1
1
|
import { MenuProps } from './types.js';
|
|
2
|
+
/**
|
|
3
|
+
* Hides the menu overlay without waiting for anything. This is not cancellable.
|
|
4
|
+
*/
|
|
2
5
|
export declare function hideOverlayImmediately(): void;
|
|
6
|
+
/**
|
|
7
|
+
* Renders a menu-sections interface.
|
|
8
|
+
*
|
|
9
|
+
* Considering the Stackspot UI, this is the "menu sections", not the "menu content", i.e. it's the first menu from left to right, the
|
|
10
|
+
* one with the icons and section names: the main menu.
|
|
11
|
+
* @param props the props for the component {@link MenuProps}.
|
|
12
|
+
*/
|
|
3
13
|
export declare const MenuSections: ({ sections, ...props }: MenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
14
|
//# sourceMappingURL=MenuSections.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuSections.d.ts","sourceRoot":"","sources":["../../../src/components/menu/MenuSections.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MenuSections.d.ts","sourceRoot":"","sources":["../../../src/components/menu/MenuSections.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,SAAS,EAAe,MAAM,SAAS,CAAA;AAwChD;;GAEG;AACH,wBAAgB,sBAAsB,SAOrC;AA+ID;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,2BAAiC,SAAS,4CA8FlE,CAAA"}
|
|
@@ -1,27 +1,49 @@
|
|
|
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
3
|
import { ChevronRight, Cog, Collapse, Expand } from '@citric/icons';
|
|
4
|
+
import { useKeyboardControls } from '@stack-spot/portal-components';
|
|
5
|
+
import { useAnchorTag } from '@stack-spot/portal-components/anchor';
|
|
4
6
|
import { interpolate, useTranslate } from '@stack-spot/portal-translate';
|
|
5
7
|
import { useCallback, useMemo, useState } from 'react';
|
|
6
8
|
import { elementIds, getLayoutElements } from '../../elements.js';
|
|
7
|
-
import { useAnchorTag } from '../../layout-context.js';
|
|
8
9
|
import { MenuContent } from './MenuContent.js';
|
|
9
|
-
|
|
10
|
+
/**
|
|
11
|
+
* Amount of time to wait before hiding the menu overlay once the mouse leaves its area.
|
|
12
|
+
*/
|
|
10
13
|
const HIDE_OVERLAY_DELAY_MS = 400;
|
|
11
14
|
const MENU_OVERLAY_ID = 'menuContentOverlay';
|
|
15
|
+
/**
|
|
16
|
+
* Pointer to the latest "hideOverlay" task. This allows the operation to be cancelled.
|
|
17
|
+
*/
|
|
12
18
|
let hideOverlayTask;
|
|
13
|
-
|
|
19
|
+
/**
|
|
20
|
+
* Accessibility. Makes the menu overlay accessible through the keyboard.
|
|
21
|
+
*/
|
|
14
22
|
let attachKeyboardListenersForOverlay;
|
|
23
|
+
/**
|
|
24
|
+
* Accessibility. Makes the menu overlay invisible to the keyboard.
|
|
25
|
+
*/
|
|
15
26
|
let detachKeyboardListenersForOverlay;
|
|
27
|
+
/**
|
|
28
|
+
* Hides the menu overlay after HIDE_OVERLAY_DELAY_MS. This operation may be canceled.
|
|
29
|
+
*
|
|
30
|
+
* This gives the user some time to move the mouse outside the overlay for while before it disappears. If the user moves the mouse out of
|
|
31
|
+
* the overlay and, before HIDE_OVERLAY_DELAY_MS, moves the mouse back, we want the overlay to keep showing.
|
|
32
|
+
*/
|
|
16
33
|
function hideOverlay() {
|
|
17
34
|
if (hideOverlayTask !== undefined)
|
|
18
35
|
return;
|
|
19
36
|
hideOverlayTask = window.setTimeout(hideOverlayImmediately, HIDE_OVERLAY_DELAY_MS);
|
|
20
37
|
}
|
|
38
|
+
/**
|
|
39
|
+
* Accessibility. Returns the accessibility button of the section with the preview (overlay) currently active.
|
|
40
|
+
*/
|
|
21
41
|
function getAccessibilityButtonOfSectionWithActiveOverlay() {
|
|
22
42
|
return document.getElementById(elementIds.menuSections)?.querySelector('button[aria-expanded="true"]');
|
|
23
43
|
}
|
|
24
|
-
|
|
44
|
+
/**
|
|
45
|
+
* Hides the menu overlay without waiting for anything. This is not cancellable.
|
|
46
|
+
*/
|
|
25
47
|
export function hideOverlayImmediately() {
|
|
26
48
|
detachKeyboardListenersForOverlay?.();
|
|
27
49
|
const overlay = document.getElementById(MENU_OVERLAY_ID);
|
|
@@ -30,12 +52,18 @@ export function hideOverlayImmediately() {
|
|
|
30
52
|
overlay?.classList.remove('visible');
|
|
31
53
|
getAccessibilityButtonOfSectionWithActiveOverlay()?.setAttribute('aria-expanded', 'false');
|
|
32
54
|
}
|
|
55
|
+
/**
|
|
56
|
+
* If `hideOverlay` was called and not fulfilled yet, this cancels the task, preventing the overlay from closing.
|
|
57
|
+
*/
|
|
33
58
|
function cancelHideOverlayTask() {
|
|
34
59
|
if (hideOverlayTask === undefined)
|
|
35
60
|
return;
|
|
36
61
|
clearTimeout(hideOverlayTask);
|
|
37
62
|
hideOverlayTask = undefined;
|
|
38
63
|
}
|
|
64
|
+
/**
|
|
65
|
+
* Shows the menu overlay.
|
|
66
|
+
*/
|
|
39
67
|
function showOverlay() {
|
|
40
68
|
cancelHideOverlayTask();
|
|
41
69
|
const overlay = document.getElementById(MENU_OVERLAY_ID);
|
|
@@ -44,10 +72,23 @@ function showOverlay() {
|
|
|
44
72
|
overlay?.classList.add('visible');
|
|
45
73
|
attachKeyboardListenersForOverlay?.();
|
|
46
74
|
}
|
|
75
|
+
/**
|
|
76
|
+
* Checks if the menu content (2nd menu list from left to right) is visible or not.
|
|
77
|
+
* The menu content is visible if:
|
|
78
|
+
* 1. The menu is not compact (the button at the end of the section list compacts/expands the menu);
|
|
79
|
+
* 2. If the current section has any menu content.
|
|
80
|
+
*/
|
|
47
81
|
function isMenuContentVisible() {
|
|
48
82
|
return !!document.getElementById('layout')?.classList?.contains('menu-content-visible');
|
|
49
83
|
}
|
|
50
|
-
|
|
84
|
+
/**
|
|
85
|
+
* A section in the the menu-sections.
|
|
86
|
+
*
|
|
87
|
+
* A section in the menu is responsible for rendering the section icon, label, accessibility button and controlling the menu overlay.
|
|
88
|
+
* @param props React props for the component {@link MenuSection} & { id, setCurrentOverlay }. Id identifies the current section and
|
|
89
|
+
* setCurrentOverlay controls the overlay (preview) content.
|
|
90
|
+
*/
|
|
91
|
+
const Section = ({ icon, label, href, target, onClick, active, content, customContent, setCurrentOverlay, id, hasContent, className, }) => {
|
|
51
92
|
const Link = useAnchorTag();
|
|
52
93
|
const contentToRender = typeof content === 'function' ? content() : content;
|
|
53
94
|
const t = useTranslate(dictionary);
|
|
@@ -64,7 +105,6 @@ const Section = ({ icon, label, href, target, onClick, active, content, customCo
|
|
|
64
105
|
function prepareShowOverlay(event) {
|
|
65
106
|
if (!shouldShowOverlay())
|
|
66
107
|
return;
|
|
67
|
-
onOpen?.();
|
|
68
108
|
const anchorElement = event.target;
|
|
69
109
|
const accessibilityButton = anchorElement?.parentElement?.querySelector('button');
|
|
70
110
|
accessibilityButton?.setAttribute('aria-expanded', 'true');
|
|
@@ -77,20 +117,33 @@ const Section = ({ icon, label, href, target, onClick, active, content, customCo
|
|
|
77
117
|
hideOverlayImmediately();
|
|
78
118
|
}
|
|
79
119
|
const labelText = typeof label === 'string' ? label : label.id;
|
|
80
|
-
return (
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
120
|
+
return (_jsxs("li", { role: "menuitem", title: labelText, className: `section-submenu ${className || ''} ${active ? 'active' : ''}`, "aria-selected": active, children: [_jsx(Link, { href: href, target: target, onClick: click, onMouseEnter: prepareShowOverlay, 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: [_jsx(IconBox, { children: icon }), typeof label === 'string' ? _jsx(Text, { appearance: "microtext1", className: "section-label", ml: 3, children: label }) : label.element] }) }), shouldShowOverlay() &&
|
|
121
|
+
_jsx(IconBox, { size: "sm", className: "section-submenu-icon", as: "button", "aria-label": interpolate(t.menuOptions, label), "aria-controls": MENU_OVERLAY_ID, "aria-expanded": false, onKeyDown: (event) => {
|
|
122
|
+
if (event.key === 'Enter') {
|
|
123
|
+
prepareShowOverlay(event);
|
|
124
|
+
}
|
|
125
|
+
}, children: _jsx(ChevronRight, {}) })] }, labelText));
|
|
86
126
|
};
|
|
127
|
+
/**
|
|
128
|
+
* Renders the overlay content.
|
|
129
|
+
* @param props the content of the overlay, can be either customized (react component), a config object or a function that creates the
|
|
130
|
+
* config object.
|
|
131
|
+
* @returns the content
|
|
132
|
+
*/
|
|
87
133
|
const OverlayRenderer = ({ content, customContent }) => {
|
|
88
134
|
if (customContent) {
|
|
89
|
-
return
|
|
135
|
+
return _jsx("div", { id: "custom-selectable-item", children: customContent });
|
|
90
136
|
}
|
|
91
137
|
const data = typeof content === 'function' ? content() : content;
|
|
92
138
|
return _jsx(MenuContent, { ...data });
|
|
93
139
|
};
|
|
140
|
+
/**
|
|
141
|
+
* Renders a menu-sections interface.
|
|
142
|
+
*
|
|
143
|
+
* Considering the Stackspot UI, this is the "menu sections", not the "menu content", i.e. it's the first menu from left to right, the
|
|
144
|
+
* one with the icons and section names: the main menu.
|
|
145
|
+
* @param props the props for the component {@link MenuProps}.
|
|
146
|
+
*/
|
|
94
147
|
export const MenuSections = ({ sections = [], ...props }) => {
|
|
95
148
|
const Link = useAnchorTag();
|
|
96
149
|
const t = useTranslate(dictionary);
|
|
@@ -127,7 +180,8 @@ export const MenuSections = ({ sections = [], ...props }) => {
|
|
|
127
180
|
onPressEscape,
|
|
128
181
|
querySelectors: 'li a.action, #custom-selectable-item button, #custom-selectable-item input',
|
|
129
182
|
});
|
|
130
|
-
//
|
|
183
|
+
// this only works because we have a single section menu in the site. This workaround was created since the keyboard controls were
|
|
184
|
+
// transformed into a hook. This is not ideal and it would be a good idea to rewrite this code without the need for this.
|
|
131
185
|
attachKeyboardListenersForOverlay = attachKeyboardListeners;
|
|
132
186
|
detachKeyboardListenersForOverlay = detachKeyboardListeners;
|
|
133
187
|
/* This function renders the section preview in the overlay in normal circumstances. If the menu is hidden and the section is active,
|
|
@@ -145,7 +199,7 @@ export const MenuSections = ({ sections = [], ...props }) => {
|
|
|
145
199
|
: _jsx(OverlayRenderer, { content: sections[currentOverlay].content, customContent: sections[currentOverlay].customContent }, currentOverlay);
|
|
146
200
|
}
|
|
147
201
|
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, 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) &&
|
|
148
|
-
_jsxs(Link, { href: props.settings?.href, onClick: props.settings?.onClick, className: "sections-footer toggle", ...(props.settings.active ? { 'aria-current': 'page' } : undefined), children: [_jsx(IconBox, { "aria-label": t.settingsIcon, children: _jsx(Cog, {}) }), _jsx(Text, { appearance: "microtext1", ml: 8, className: "collapse", children: t.settings })] })] }),
|
|
202
|
+
_jsxs(Link, { href: props.settings?.href, onClick: props.settings?.onClick, className: "sections-footer toggle", ...(props.settings.active ? { 'aria-current': 'page' } : undefined), children: [_jsx(IconBox, { "aria-label": t.settingsIcon, children: _jsx(Cog, {}) }), _jsx(Text, { appearance: "microtext1", ml: 8, className: "collapse", children: t.settings })] })] }), _jsx("div", { id: MENU_OVERLAY_ID, onMouseEnter: showOverlay, onMouseLeave: hideOverlay, ref: overlayRef, children: renderMenuOverlay() })] }));
|
|
149
203
|
};
|
|
150
204
|
const dictionary = {
|
|
151
205
|
en: {
|
|
@@ -159,7 +213,7 @@ const dictionary = {
|
|
|
159
213
|
toggle: 'Visualizar ou esconder o menu',
|
|
160
214
|
menuOptions: 'Visualizar opções do menu $0',
|
|
161
215
|
settings: 'Configurações',
|
|
162
|
-
settingsIcon: '
|
|
216
|
+
settingsIcon: 'Ícone de configurações',
|
|
163
217
|
hide: 'Esconder',
|
|
164
218
|
},
|
|
165
219
|
};
|
|
@@ -1 +1 @@
|
|
|
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,UAAU,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAC9D,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"MenuSections.js","sourceRoot":"","sources":["../../../src/components/menu/MenuSections.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,8 @@
|
|
|
1
1
|
import { Selector } from './types.js';
|
|
2
|
+
/**
|
|
3
|
+
* A selector component to render inside a menu-content. Allows the user to select another page.
|
|
4
|
+
*
|
|
5
|
+
* @param props the React props for the component {@link Selector}.
|
|
6
|
+
*/
|
|
2
7
|
export declare const PageSelector: ({ options, value, button, loading, title }: Selector) => import("react/jsx-runtime").JSX.Element;
|
|
3
8
|
//# sourceMappingURL=PageSelector.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageSelector.d.ts","sourceRoot":"","sources":["../../../src/components/menu/PageSelector.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PageSelector.d.ts","sourceRoot":"","sources":["../../../src/components/menu/PageSelector.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAwElC;;;;GAIG;AACH,eAAO,MAAM,YAAY,+CAAgD,QAAQ,4CAiEhF,CAAA"}
|
|
@@ -2,14 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
2
2
|
import { IconBox, Text } from '@citric/core';
|
|
3
3
|
import { ArrowRight, Select } from '@citric/icons';
|
|
4
4
|
import { LoadingCircular } from '@citric/ui';
|
|
5
|
+
import { useCheckTextOverflow } from '@stack-spot/portal-components';
|
|
6
|
+
import { SelectionList } from '@stack-spot/portal-components/SelectionList';
|
|
7
|
+
import { useAnchorTag } from '@stack-spot/portal-components/anchor';
|
|
5
8
|
import { theme } from '@stack-spot/portal-theme';
|
|
6
9
|
import { interpolate, useTranslate } from '@stack-spot/portal-translate';
|
|
7
10
|
import { useMemo, useRef, useState } from 'react';
|
|
8
11
|
import { styled } from 'styled-components';
|
|
9
|
-
import { useAnchorTag } from '../../layout-context.js';
|
|
10
|
-
import { SelectionList } from '../SelectionList.js';
|
|
11
12
|
import { MENU_CONTENT_PADDING as PADDING } from './constants.js';
|
|
12
|
-
import { useCheckTextOverflow } from './use-check-text-overflow.js';
|
|
13
13
|
const SelectorBox = styled.div `
|
|
14
14
|
position: relative;
|
|
15
15
|
margin: ${PADDING}px;
|
|
@@ -79,6 +79,11 @@ const SelectorBox = styled.div `
|
|
|
79
79
|
}
|
|
80
80
|
}
|
|
81
81
|
`;
|
|
82
|
+
/**
|
|
83
|
+
* A selector component to render inside a menu-content. Allows the user to select another page.
|
|
84
|
+
*
|
|
85
|
+
* @param props the React props for the component {@link Selector}.
|
|
86
|
+
*/
|
|
82
87
|
export const PageSelector = ({ options, value, button, loading, title }) => {
|
|
83
88
|
const Link = useAnchorTag();
|
|
84
89
|
const t = useTranslate(dictionary);
|