@stack-spot/portal-layout 2.6.1 → 2.8.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/CHANGELOG.md +19 -0
- package/dist/LayoutOverlayManager.d.ts +4 -5
- package/dist/LayoutOverlayManager.d.ts.map +1 -1
- package/dist/LayoutOverlayManager.js.map +1 -1
- package/dist/components/Backdrop.d.ts +67 -1
- package/dist/components/Backdrop.d.ts.map +1 -1
- package/dist/components/Backdrop.js +60 -9
- package/dist/components/Backdrop.js.map +1 -1
- package/dist/components/NotificationCenter/NotificationPanel.js +1 -1
- package/dist/components/NotificationCenter/NotificationPanel.js.map +1 -1
- package/dist/components/NotificationCenter/styled.d.ts +1 -1
- package/dist/components/NotificationCenter/styled.d.ts.map +1 -1
- package/dist/components/PortalSwitcher.d.ts +1 -1
- package/dist/components/PortalSwitcher.d.ts.map +1 -1
- package/dist/components/PortalSwitcher.js.map +1 -1
- package/dist/index.d.ts +4 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -3
- package/dist/index.js.map +1 -1
- package/dist/layout.css +17 -12
- package/dist/types.d.ts +5 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/types.js.map +1 -0
- package/package.json +1 -1
- package/src/LayoutOverlayManager.tsx +4 -5
- package/src/components/Backdrop.tsx +91 -7
- package/src/components/NotificationCenter/NotificationPanel.tsx +1 -1
- package/src/components/PortalSwitcher.tsx +1 -1
- package/src/index.ts +4 -3
- package/src/layout.css +17 -12
- package/src/types.ts +4 -0
- package/dist/components/types.d.ts +0 -2
- package/dist/components/types.d.ts.map +0 -1
- package/dist/components/types.js.map +0 -1
- package/src/components/types.ts +0 -1
- /package/dist/{components/types.js → types.js} +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [2.8.0](https://github.com/stack-spot/portal-commons/compare/portal-layout@v2.7.0...portal-layout@v2.8.0) (2024-08-30)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Features
|
|
7
|
+
|
|
8
|
+
* adds modal capabilities to backdrop component ([#334](https://github.com/stack-spot/portal-commons/issues/334)) ([ef146a8](https://github.com/stack-spot/portal-commons/commit/ef146a874f3bb64e58bdec5016526c5cb30fa9d9))
|
|
9
|
+
|
|
10
|
+
## [2.7.0](https://github.com/stack-spot/portal-commons/compare/portal-layout@v2.6.1...portal-layout@v2.7.0) (2024-08-27)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
|
|
15
|
+
* full sized modal ([#320](https://github.com/stack-spot/portal-commons/issues/320)) ([69f05ef](https://github.com/stack-spot/portal-commons/commit/69f05eff2af2a6dbf175f883a4efbc577d7c015d))
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Bug Fixes
|
|
19
|
+
|
|
20
|
+
* Fix css title toaster ([80d5476](https://github.com/stack-spot/portal-commons/commit/80d54765e3fb69fba2049dfe5d717f411943f4f8))
|
|
21
|
+
|
|
3
22
|
## [2.6.1](https://github.com/stack-spot/portal-commons/compare/portal-layout@v2.6.0...portal-layout@v2.6.1) (2024-08-23)
|
|
4
23
|
|
|
5
24
|
|
|
@@ -2,6 +2,7 @@ import { ReactElement } from 'react';
|
|
|
2
2
|
import { DialogOptions } from './components/Dialog.js';
|
|
3
3
|
import { OverlayContentProps } from './components/OverlayContent.js';
|
|
4
4
|
import { CustomToasterOptions, DefaultToasterOptions, closeReactToaster } from './toaster.js';
|
|
5
|
+
import { CustomModalSize, ModalSize, RightPanelSize } from './types.js';
|
|
5
6
|
interface AlertOptions extends Omit<DialogOptions, 'cancel'> {
|
|
6
7
|
/**
|
|
7
8
|
* Whether or not to show an "ok" button. If false, the dialog can still be closed through the close button, by clicking outside it or by
|
|
@@ -10,13 +11,11 @@ interface AlertOptions extends Omit<DialogOptions, 'cancel'> {
|
|
|
10
11
|
showButton?: boolean;
|
|
11
12
|
}
|
|
12
13
|
type BottomDialogOptions = Omit<DialogOptions, 'title'>;
|
|
13
|
-
type OverlaySize = 'small' | 'medium' | 'large';
|
|
14
|
-
type ModalSize = 'fit-content' | OverlaySize;
|
|
15
14
|
interface CustomModalOptions {
|
|
16
15
|
/**
|
|
17
16
|
* The size of the modal.
|
|
18
17
|
*/
|
|
19
|
-
size?:
|
|
18
|
+
size?: CustomModalSize;
|
|
20
19
|
/**
|
|
21
20
|
* A function to call when the modal closes.
|
|
22
21
|
*/
|
|
@@ -26,7 +25,7 @@ interface CustomRightPanelOptions {
|
|
|
26
25
|
/**
|
|
27
26
|
* The size of the right panel.
|
|
28
27
|
*/
|
|
29
|
-
size?:
|
|
28
|
+
size?: RightPanelSize;
|
|
30
29
|
/**
|
|
31
30
|
* A function to call when the right panel closes.
|
|
32
31
|
*/
|
|
@@ -152,7 +151,7 @@ declare class LayoutOverlayManager {
|
|
|
152
151
|
* @param options the modal options: {@link OverlayContentProps} & { size: {@link ModalSize} }.
|
|
153
152
|
*/
|
|
154
153
|
showRightPanel({ size, ...props }: OverlayContentProps & {
|
|
155
|
-
size?:
|
|
154
|
+
size?: RightPanelSize;
|
|
156
155
|
}): void;
|
|
157
156
|
private focusLastActiveElement;
|
|
158
157
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LayoutOverlayManager.d.ts","sourceRoot":"","sources":["../src/LayoutOverlayManager.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAA;AAC/D,OAAO,EAAU,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC3D,OAAO,EAAoC,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAInG,OAAO,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,iBAAiB,EAAmC,MAAM,WAAW,CAAA;
|
|
1
|
+
{"version":3,"file":"LayoutOverlayManager.d.ts","sourceRoot":"","sources":["../src/LayoutOverlayManager.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LayoutOverlayManager.js","sourceRoot":"","sources":["../src/LayoutOverlayManager.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"LayoutOverlayManager.js","sourceRoot":"","sources":["../src/LayoutOverlayManager.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +1,76 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import { CustomModalSize, RightPanelSize } from '../types.js';
|
|
2
3
|
export interface BackdropProps {
|
|
3
4
|
children: React.ReactNode;
|
|
4
5
|
visible: boolean;
|
|
6
|
+
/**
|
|
7
|
+
* A function to run when the backdrop is closed. Since the backdrop is a controlled element, this should be used to set the state
|
|
8
|
+
* of `visible` to false.
|
|
9
|
+
*/
|
|
5
10
|
onClose: () => void;
|
|
6
11
|
style?: React.CSSProperties;
|
|
12
|
+
/**
|
|
13
|
+
* Makes this backdrop act as a modal or a right panel.
|
|
14
|
+
* - `actAs = 'modal'` adds the className 'modal-box' to the backdrop, making it behave like a modal with medium size.
|
|
15
|
+
* - `actAs = 'right-panel'` adds the className 'right-panel-box' to the backdrop, making it behave like a right-panel with medium size.
|
|
16
|
+
* - `actAs = { type: T, size: S }` adds the className 'modal-box' or 'right-panel-box' to the backdrop, depending on the value of `T`.
|
|
17
|
+
* The size will depend on the value of `S`.
|
|
18
|
+
*/
|
|
19
|
+
actAs?: 'modal' | 'right-panel' | {
|
|
20
|
+
type: 'modal';
|
|
21
|
+
size: CustomModalSize;
|
|
22
|
+
} | {
|
|
23
|
+
type: 'right-panel';
|
|
24
|
+
size: RightPanelSize;
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* A persistent backdrop is always rendered, despite the value of `visible`. It still appears or disappears according to `visible`, but
|
|
28
|
+
* it never leaves the DOM.
|
|
29
|
+
*
|
|
30
|
+
* This can help preserving complex animations.
|
|
31
|
+
*
|
|
32
|
+
* Attention: if you have many complex backdrops with persistent = true, it may affect performance.
|
|
33
|
+
*
|
|
34
|
+
* @default false
|
|
35
|
+
*/
|
|
36
|
+
persistent?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* This doesn't change the animation of the backdrop! Use this property if `persistent` is false and the backdrop's content is animated
|
|
39
|
+
* in a different time than `--modal-animation-duration` (layout css variable).
|
|
40
|
+
*
|
|
41
|
+
* This lets you preserve the animations on your content when `persistent` is false.
|
|
42
|
+
*/
|
|
43
|
+
animationMS?: number;
|
|
7
44
|
className?: string;
|
|
8
45
|
}
|
|
9
|
-
|
|
46
|
+
/**
|
|
47
|
+
* The backdrop is a component for creating a Modal content. This can have any shape or form, it's free to accept any kind of content, and,
|
|
48
|
+
* by default, it has no animations attached to it (with the exception of the backdrop's animation, which is a fade-in-out).
|
|
49
|
+
*
|
|
50
|
+
* In general, to create modal and side-panels, you should use `overlay.showModal`, `overlay.showCustomModal`, `overlay.showRightPanel` and
|
|
51
|
+
* `overlay.showCustomRightPanel`.
|
|
52
|
+
*
|
|
53
|
+
* Use this when:
|
|
54
|
+
* 1. Your content is neither a modal, nor a right panel, but it needs a backdrop. Meaning, it can't be animated like a modal, but still
|
|
55
|
+
* needs to show a backdrop.
|
|
56
|
+
* 2. Your content is a modal or a right panel, but it needs to update according to an external state. The ideal scenario is to have the
|
|
57
|
+
* modal content completely independent of the external state, but sometimes, we do need to interact with an external state and calling
|
|
58
|
+
* `overlay.show*` multiple times is not ideal.
|
|
59
|
+
*
|
|
60
|
+
* Attention: if you open a modal/right panel through this component, you should not use the methods `overlay.close*` or `overlay.is*Open`
|
|
61
|
+
* to manage it.
|
|
62
|
+
*
|
|
63
|
+
* @example
|
|
64
|
+
* Check the example below for rendering a medium-sized modal. Equivalent to `overlay.showModal`. Remember that calling `overlay.showModal`
|
|
65
|
+
* is always preferable. Use this only if you fall into the second case explained above.
|
|
66
|
+
* ```
|
|
67
|
+
* <Backdrop visible={isOpen} onClose={() => setOpen(false)} actAs="modal">
|
|
68
|
+
* <OverlayContent type="modal" onClose={() => setOpen(false)} title="Title">
|
|
69
|
+
* <p>Hello World!</p>
|
|
70
|
+
* </OverlayContent>
|
|
71
|
+
* </Backdrop>
|
|
72
|
+
* ```
|
|
73
|
+
* @param props the component props {@link BackdropProps}.
|
|
74
|
+
*/
|
|
75
|
+
export declare const Backdrop: ({ children, visible, onClose, className, actAs, persistent, animationMS, style }: BackdropProps) => import("react").ReactPortal | null;
|
|
10
76
|
//# sourceMappingURL=Backdrop.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Backdrop.d.ts","sourceRoot":"","sources":["../../src/components/Backdrop.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Backdrop.d.ts","sourceRoot":"","sources":["../../src/components/Backdrop.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAG1D,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,aAAa,GAAG;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,eAAe,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,aAAa,CAAC;QAAC,IAAI,EAAE,cAAc,CAAA;KAAE,CAAC;IAC3H;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,QAAQ,qFAAkG,aAAa,uCAuCnI,CAAA"}
|
|
@@ -1,18 +1,69 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { delay } from '@stack-spot/portal-components';
|
|
3
|
+
import { listToClass } from '@stack-spot/portal-theme';
|
|
4
|
+
import { useEffect, useMemo, useRef, useState } from 'react';
|
|
3
5
|
import { createPortal } from 'react-dom';
|
|
4
6
|
import { getLayoutElements } from '../elements.js';
|
|
5
7
|
import { overlay } from '../LayoutOverlayManager.js';
|
|
6
|
-
|
|
8
|
+
import { valueOfLayoutVar } from '../utils.js';
|
|
9
|
+
/**
|
|
10
|
+
* The backdrop is a component for creating a Modal content. This can have any shape or form, it's free to accept any kind of content, and,
|
|
11
|
+
* by default, it has no animations attached to it (with the exception of the backdrop's animation, which is a fade-in-out).
|
|
12
|
+
*
|
|
13
|
+
* In general, to create modal and side-panels, you should use `overlay.showModal`, `overlay.showCustomModal`, `overlay.showRightPanel` and
|
|
14
|
+
* `overlay.showCustomRightPanel`.
|
|
15
|
+
*
|
|
16
|
+
* Use this when:
|
|
17
|
+
* 1. Your content is neither a modal, nor a right panel, but it needs a backdrop. Meaning, it can't be animated like a modal, but still
|
|
18
|
+
* needs to show a backdrop.
|
|
19
|
+
* 2. Your content is a modal or a right panel, but it needs to update according to an external state. The ideal scenario is to have the
|
|
20
|
+
* modal content completely independent of the external state, but sometimes, we do need to interact with an external state and calling
|
|
21
|
+
* `overlay.show*` multiple times is not ideal.
|
|
22
|
+
*
|
|
23
|
+
* Attention: if you open a modal/right panel through this component, you should not use the methods `overlay.close*` or `overlay.is*Open`
|
|
24
|
+
* to manage it.
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* Check the example below for rendering a medium-sized modal. Equivalent to `overlay.showModal`. Remember that calling `overlay.showModal`
|
|
28
|
+
* is always preferable. Use this only if you fall into the second case explained above.
|
|
29
|
+
* ```
|
|
30
|
+
* <Backdrop visible={isOpen} onClose={() => setOpen(false)} actAs="modal">
|
|
31
|
+
* <OverlayContent type="modal" onClose={() => setOpen(false)} title="Title">
|
|
32
|
+
* <p>Hello World!</p>
|
|
33
|
+
* </OverlayContent>
|
|
34
|
+
* </Backdrop>
|
|
35
|
+
* ```
|
|
36
|
+
* @param props the component props {@link BackdropProps}.
|
|
37
|
+
*/
|
|
38
|
+
export const Backdrop = ({ children, visible = false, onClose, className, actAs, persistent, animationMS = 0, style }) => {
|
|
7
39
|
const ref = useRef(null);
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
40
|
+
const [shouldRender, setShouldRender] = useState(!!persistent);
|
|
41
|
+
const renderDelay = useMemo(() => Math.max(parseFloat(valueOfLayoutVar('--modal-animation-duration')), animationMS) * 1000, []);
|
|
42
|
+
const backdropType = typeof actAs === 'string' ? actAs : actAs?.type;
|
|
43
|
+
const backdropSize = typeof actAs === 'string' ? 'medium' : actAs?.size;
|
|
44
|
+
const classes = listToClass([
|
|
45
|
+
className,
|
|
46
|
+
backdropType === 'modal' && 'modal-box',
|
|
47
|
+
backdropType === 'right-panel' && 'right-panel-box',
|
|
48
|
+
backdropSize,
|
|
49
|
+
]);
|
|
50
|
+
useEffect(() => {
|
|
51
|
+
(async () => {
|
|
52
|
+
if (visible) {
|
|
53
|
+
setShouldRender(true);
|
|
54
|
+
// arbitrary delay to make sure the content is rendered before actually showing it.
|
|
55
|
+
await delay(10);
|
|
56
|
+
overlay.showBackdrop(ref.current);
|
|
57
|
+
}
|
|
58
|
+
else {
|
|
59
|
+
overlay.closeBackdrop(ref.current);
|
|
60
|
+
await delay(renderDelay);
|
|
61
|
+
setShouldRender(false);
|
|
62
|
+
}
|
|
63
|
+
})();
|
|
13
64
|
}, [visible]);
|
|
14
|
-
const backdropContent = (_jsxs("div", { ref: ref, "data-custom-backdrop-visibility": visible, className:
|
|
65
|
+
const backdropContent = (_jsxs("div", { ref: ref, "data-custom-backdrop-visibility": visible, className: classes, style: style, children: [children, _jsx("button", { "data-custom-backdrop-close": true, onClick: onClose, style: { display: 'none' }, children: "Close" })] }));
|
|
15
66
|
const backdrop = getLayoutElements().backdrop;
|
|
16
|
-
return backdrop ? createPortal(backdropContent, backdrop) : null;
|
|
67
|
+
return backdrop && (shouldRender || persistent) ? createPortal(backdropContent, backdrop) : null;
|
|
17
68
|
};
|
|
18
69
|
//# sourceMappingURL=Backdrop.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../../src/components/Backdrop.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../../src/components/Backdrop.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAwC3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,GAAG,CAAC,EAAE,KAAK,EAAiB,EAAE,EAAE;IACtI,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACxC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAA;IAC9D,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,CAAC,EAAE,WAAW,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,CAAA;IAC/H,MAAM,YAAY,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,IAAI,CAAA;IACpE,MAAM,YAAY,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAAE,IAAI,CAAA;IACvE,MAAM,OAAO,GAAG,WAAW,CAAC;QAC1B,SAAS;QACT,YAAY,KAAK,OAAO,IAAI,WAAW;QACvC,YAAY,KAAK,aAAa,IAAI,iBAAiB;QACnD,YAAY;KACb,CAAC,CAAA;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,CAAC,KAAK,IAAI,EAAE;YACV,IAAI,OAAO,EAAE,CAAC;gBACZ,eAAe,CAAC,IAAI,CAAC,CAAA;gBACrB,mFAAmF;gBACnF,MAAM,KAAK,CAAC,EAAE,CAAC,CAAA;gBACf,OAAO,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;YACnC,CAAC;iBACI,CAAC;gBACJ,OAAO,CAAC,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;gBAClC,MAAM,KAAK,CAAC,WAAW,CAAC,CAAA;gBACxB,eAAe,CAAC,KAAK,CAAC,CAAA;YACxB,CAAC;QACH,CAAC,CAAC,EAAE,CAAA;IACN,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,MAAM,eAAe,GAAG,CACtB,eAAK,GAAG,EAAE,GAAG,qCAAmC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,aACtF,QAAQ,EAET,qDAAmC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,sBAAgB,IAC3F,CACP,CAAA;IAED,MAAM,QAAQ,GAAG,iBAAiB,EAAE,CAAC,QAAQ,CAAA;IAC7C,OAAO,QAAQ,IAAI,CAAC,YAAY,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;AAClG,CAAC,CAAA"}
|
|
@@ -8,7 +8,7 @@ import { NotificationPanelFooter } from './NotificationsPanelFooter.js';
|
|
|
8
8
|
import { StyledBackdrop } from './styled.js';
|
|
9
9
|
export const NotificationPanel = ({ filter, onFilter, loading, error, visible, onClose, ...props }) => {
|
|
10
10
|
const controller = useNotificationController();
|
|
11
|
-
return (_jsx(StyledBackdrop, { visible: visible, onClose: onClose, children: _jsx(AnimatedHeight, { className: "notification-panel", visible: visible, header: _jsx(NotificationPanelHeader, { filter: filter, onChangeFilter: onFilter, onClose: onClose }), footer: _jsx(NotificationPanelFooter, { onClose: onClose }), children: _jsx(ScrollView, { direction: "vertical", style: { maxHeight: 'calc(100vh - 300px)' }, children: error ? _jsx(ErrorFeedback, { code: error.code, direction: "column" }) : _jsx(NotificationList, { ...props, compact: true, loading: loading, onCommit: id => controller.markAsCommitted(id), onClickAction: (id) => {
|
|
11
|
+
return (_jsx(StyledBackdrop, { visible: visible, onClose: onClose, persistent: true, children: _jsx(AnimatedHeight, { className: "notification-panel", visible: visible, header: _jsx(NotificationPanelHeader, { filter: filter, onChangeFilter: onFilter, onClose: onClose }), footer: _jsx(NotificationPanelFooter, { onClose: onClose }), children: _jsx(ScrollView, { direction: "vertical", style: { maxHeight: 'calc(100vh - 300px)' }, children: error ? _jsx(ErrorFeedback, { code: error.code, direction: "column" }) : _jsx(NotificationList, { ...props, compact: true, loading: loading, onCommit: id => controller.markAsCommitted(id), onClickAction: (id) => {
|
|
12
12
|
onClose();
|
|
13
13
|
controller.config.onClickAction?.(id);
|
|
14
14
|
} }) }) }) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationPanel.js","sourceRoot":"","sources":["../../../src/components/NotificationCenter/NotificationPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAA;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAA;AACnE,OAAO,EAAE,gBAAgB,EAAE,yBAAyB,EAAE,MAAM,6CAA6C,CAAA;AACzG,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAA;AACrE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAA;AACnE,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAA;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAGzC,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,EAA0B,EAAE,EAAE;IAC5H,MAAM,UAAU,GAAG,yBAAyB,EAAE,CAAA;IAC9C,OAAO,CACL,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,
|
|
1
|
+
{"version":3,"file":"NotificationPanel.js","sourceRoot":"","sources":["../../../src/components/NotificationCenter/NotificationPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAA;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAA;AACnE,OAAO,EAAE,gBAAgB,EAAE,yBAAyB,EAAE,MAAM,6CAA6C,CAAA;AACzG,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAA;AACrE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAA;AACnE,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAA;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAGzC,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,EAA0B,EAAE,EAAE;IAC5H,MAAM,UAAU,GAAG,yBAAyB,EAAE,CAAA;IAC9C,OAAO,CACL,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,kBAC5D,KAAC,cAAc,IACb,SAAS,EAAC,oBAAoB,EAC9B,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,KAAC,uBAAuB,IAAC,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,GAAI,EAC/F,MAAM,EAAE,KAAC,uBAAuB,IAAC,OAAO,EAAE,OAAO,GAAI,YAErD,KAAC,UAAU,IAAC,SAAS,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,qBAAqB,EAAE,YACzE,KAAK,CAAC,CAAC,CAAC,KAAC,aAAa,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,SAAS,EAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,KAAC,gBAAgB,OAC7E,KAAK,EACT,OAAO,QACP,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,CAAC,EAC9C,aAAa,EAAE,CAAC,EAAE,EAAE,EAAE;wBACpB,OAAO,EAAE,CAAA;wBACT,UAAU,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC,EAAE,CAAC,CAAA;oBACvC,CAAC,GACD,GACS,GACE,GACF,CAClB,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const NotificationBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
3
|
-
export declare const StyledBackdrop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").FastOmit<import("../Backdrop.js").BackdropProps, never>> & string & Omit<({ children, visible, onClose, className, style }: import("../Backdrop.js").BackdropProps) => import("react").ReactPortal | null, keyof import("react").Component<any, {}, any>>;
|
|
3
|
+
export declare const StyledBackdrop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").FastOmit<import("../Backdrop.js").BackdropProps, never>> & string & Omit<({ children, visible, onClose, className, actAs, persistent, animationMS, style }: import("../Backdrop.js").BackdropProps) => import("react").ReactPortal | null, keyof import("react").Component<any, {}, any>>;
|
|
4
4
|
//# sourceMappingURL=styled.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationCenter/styled.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,eAAe,wOA6B3B,CAAA;AAED,eAAO,MAAM,cAAc,+
|
|
1
|
+
{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationCenter/styled.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,eAAe,wOA6B3B,CAAA;AAED,eAAO,MAAM,cAAc,+XAuC1B,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PortalSwitcher.d.ts","sourceRoot":"","sources":["../../src/components/PortalSwitcher.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PortalSwitcher.d.ts","sourceRoot":"","sources":["../../src/components/PortalSwitcher.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAUxC,MAAM,WAAW,MAAM;IACrB;;OAEG;IACH,OAAO,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AA0DD;;;;GAIG;AACH,eAAO,MAAM,cAAc,gBAAsB,mBAAmB,4CA6CnE,CAAA;AAuBD;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,YAkBrC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PortalSwitcher.js","sourceRoot":"","sources":["../../src/components/PortalSwitcher.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACtE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,6CAA6C,CAAA;AAC3E,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,mCAAmC,CAAA;AAC1E,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,MAAM,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"PortalSwitcher.js","sourceRoot":"","sources":["../../src/components/PortalSwitcher.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
export { Backdrop } from './components/Backdrop.js';
|
|
2
|
+
export { ContactPopover } from './components/Contact/ContactPopover.js';
|
|
3
|
+
export { showContactUsModal } from './components/Contact/show-contact-modal.js';
|
|
1
4
|
export { Dialog } from './components/Dialog.js';
|
|
2
5
|
export { Header, HeaderProps } from './components/Header.js';
|
|
3
6
|
export { ActionItem, MenuContent, MenuGroup, Title } from './components/menu/MenuContent.js';
|
|
@@ -8,13 +11,11 @@ export { PortalSwitcher } from './components/PortalSwitcher.js';
|
|
|
8
11
|
export { RateComponent } from './components/Rate/index.js';
|
|
9
12
|
export { useRatingEffect } from './components/Rate/hook.js';
|
|
10
13
|
export { showRatingModal } from './components/Rate/show-rating-modal.js';
|
|
11
|
-
export { showContactUsModal } from './components/Contact/show-contact-modal.js';
|
|
12
|
-
export { ContactPopover } from './components/Contact/ContactPopover.js';
|
|
13
14
|
export * from './components/tour/index.js';
|
|
14
|
-
export * from './components/types.js';
|
|
15
15
|
export * from './elements.js';
|
|
16
16
|
export * from './errors.js';
|
|
17
17
|
export { Layout, RawLayout } from './Layout.js';
|
|
18
18
|
export { overlay } from './LayoutOverlayManager.js';
|
|
19
|
+
export * from './types.js';
|
|
19
20
|
export * from './utils.js';
|
|
20
21
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAA;AACrE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAA;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAC5E,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAA;AACrE,cAAc,mBAAmB,CAAA;AACjC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
export { Backdrop } from './components/Backdrop.js';
|
|
2
|
+
export { ContactPopover } from './components/Contact/ContactPopover.js';
|
|
3
|
+
export { showContactUsModal } from './components/Contact/show-contact-modal.js';
|
|
1
4
|
export { Dialog } from './components/Dialog.js';
|
|
2
5
|
export { Header } from './components/Header.js';
|
|
3
6
|
export { ActionItem, MenuContent, MenuGroup, Title } from './components/menu/MenuContent.js';
|
|
@@ -8,13 +11,11 @@ export { PortalSwitcher } from './components/PortalSwitcher.js';
|
|
|
8
11
|
export { RateComponent } from './components/Rate/index.js';
|
|
9
12
|
export { useRatingEffect } from './components/Rate/hook.js';
|
|
10
13
|
export { showRatingModal } from './components/Rate/show-rating-modal.js';
|
|
11
|
-
export { showContactUsModal } from './components/Contact/show-contact-modal.js';
|
|
12
|
-
export { ContactPopover } from './components/Contact/ContactPopover.js';
|
|
13
14
|
export * from './components/tour/index.js';
|
|
14
|
-
export * from './components/types.js';
|
|
15
15
|
export * from './elements.js';
|
|
16
16
|
export * from './errors.js';
|
|
17
17
|
export { Layout, RawLayout } from './Layout.js';
|
|
18
18
|
export { overlay } from './LayoutOverlayManager.js';
|
|
19
|
+
export * from './types.js';
|
|
19
20
|
export * from './utils.js';
|
|
20
21
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAA;AACrE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAA;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAC5E,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAA;AACrE,cAAc,mBAAmB,CAAA;AACjC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}
|
package/dist/layout.css
CHANGED
|
@@ -301,7 +301,7 @@ body {
|
|
|
301
301
|
pointer-events: auto;
|
|
302
302
|
}
|
|
303
303
|
|
|
304
|
-
#modal {
|
|
304
|
+
#modal, #backdrop .modal-box {
|
|
305
305
|
transform: scale(0);
|
|
306
306
|
display: flex;
|
|
307
307
|
flex-direction: column;
|
|
@@ -309,27 +309,32 @@ body {
|
|
|
309
309
|
width: calc(100% - 60px);
|
|
310
310
|
}
|
|
311
311
|
|
|
312
|
-
#modal.fit-content {
|
|
312
|
+
#modal.fit-content, #backdrop .modal-box.fit-content {
|
|
313
313
|
width: auto;
|
|
314
314
|
}
|
|
315
315
|
|
|
316
|
-
#modal.
|
|
316
|
+
#modal.full, #backdrop .modal-box.full {
|
|
317
|
+
width: 100%;
|
|
318
|
+
height: 100%;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
#modal.large, #backdrop .modal-box.large {
|
|
317
322
|
max-width: 1000px;
|
|
318
323
|
}
|
|
319
324
|
|
|
320
|
-
#modal.medium {
|
|
325
|
+
#modal.medium, #backdrop .modal-box.medium {
|
|
321
326
|
max-width: 800px;
|
|
322
327
|
}
|
|
323
328
|
|
|
324
|
-
#modal.small {
|
|
329
|
+
#modal.small, #backdrop .modal-box.small {
|
|
325
330
|
max-width: 600px;
|
|
326
331
|
}
|
|
327
332
|
|
|
328
|
-
#modal.visible {
|
|
333
|
+
#modal.visible, #backdrop.visible .modal-box {
|
|
329
334
|
transform: scale(1);
|
|
330
335
|
}
|
|
331
336
|
|
|
332
|
-
#rightPanel {
|
|
337
|
+
#rightPanel, #backdrop .right-panel-box {
|
|
333
338
|
position: fixed;
|
|
334
339
|
display: flex;
|
|
335
340
|
flex-direction: column;
|
|
@@ -342,22 +347,22 @@ body {
|
|
|
342
347
|
border-bottom-left-radius: 1rem;
|
|
343
348
|
}
|
|
344
349
|
|
|
345
|
-
#rightPanel.small {
|
|
350
|
+
#rightPanel.small, #backdrop .right-panel-box.small {
|
|
346
351
|
right: -400px;
|
|
347
352
|
width: 400px;
|
|
348
353
|
}
|
|
349
354
|
|
|
350
|
-
#rightPanel.medium {
|
|
355
|
+
#rightPanel.medium, #backdrop .right-panel-box.medium {
|
|
351
356
|
right: -600px;
|
|
352
357
|
width: 600px;
|
|
353
358
|
}
|
|
354
359
|
|
|
355
|
-
#rightPanel.large {
|
|
360
|
+
#rightPanel.large, #backdrop .right-panel-box.large {
|
|
356
361
|
right: -800px;
|
|
357
362
|
width: 800px;
|
|
358
363
|
}
|
|
359
364
|
|
|
360
|
-
#rightPanel.visible {
|
|
365
|
+
#rightPanel.visible, #backdrop.visible .right-panel-box {
|
|
361
366
|
right: 0;
|
|
362
367
|
}
|
|
363
368
|
|
|
@@ -403,7 +408,7 @@ body {
|
|
|
403
408
|
|
|
404
409
|
/* Overlay: toaster */
|
|
405
410
|
|
|
406
|
-
.main-toaster
|
|
411
|
+
.main-toaster h2 {
|
|
407
412
|
font-size: 14px;
|
|
408
413
|
font-weight: 500;
|
|
409
414
|
margin: 0 0 8px 0;
|
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,GAAG,IAAI,CAAA;AACvD,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AACzD,MAAM,MAAM,SAAS,GAAG,cAAc,GAAG,aAAa,CAAA;AACtD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,MAAM,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}
|
package/package.json
CHANGED
|
@@ -9,6 +9,7 @@ import { getDictionary } from './dictionary'
|
|
|
9
9
|
import { LayoutElements, elementIds, getLayoutElements } from './elements'
|
|
10
10
|
import { ElementNotFound, LayoutError } from './errors'
|
|
11
11
|
import { CustomToasterOptions, DefaultToasterOptions, closeReactToaster, showToaster as showReactToaster } from './toaster'
|
|
12
|
+
import { CustomModalSize, ModalSize, RightPanelSize } from './types'
|
|
12
13
|
import { valueOfLayoutVar } from './utils'
|
|
13
14
|
|
|
14
15
|
interface AlertOptions extends Omit<DialogOptions, 'cancel'> {
|
|
@@ -20,8 +21,6 @@ interface AlertOptions extends Omit<DialogOptions, 'cancel'> {
|
|
|
20
21
|
}
|
|
21
22
|
|
|
22
23
|
type BottomDialogOptions = Omit<DialogOptions, 'title'>
|
|
23
|
-
type OverlaySize = 'small' | 'medium' | 'large'
|
|
24
|
-
type ModalSize = 'fit-content' | OverlaySize
|
|
25
24
|
type SetContentFn = ((content: ReactElement | undefined) => void) | undefined
|
|
26
25
|
|
|
27
26
|
interface OverlayContentSetter {
|
|
@@ -34,7 +33,7 @@ interface CustomModalOptions {
|
|
|
34
33
|
/**
|
|
35
34
|
* The size of the modal.
|
|
36
35
|
*/
|
|
37
|
-
size?:
|
|
36
|
+
size?: CustomModalSize,
|
|
38
37
|
/**
|
|
39
38
|
* A function to call when the modal closes.
|
|
40
39
|
*/
|
|
@@ -45,7 +44,7 @@ interface CustomRightPanelOptions {
|
|
|
45
44
|
/**
|
|
46
45
|
* The size of the right panel.
|
|
47
46
|
*/
|
|
48
|
-
size?:
|
|
47
|
+
size?: RightPanelSize,
|
|
49
48
|
/**
|
|
50
49
|
* A function to call when the right panel closes.
|
|
51
50
|
*/
|
|
@@ -351,7 +350,7 @@ class LayoutOverlayManager {
|
|
|
351
350
|
*
|
|
352
351
|
* @param options the modal options: {@link OverlayContentProps} & { size: {@link ModalSize} }.
|
|
353
352
|
*/
|
|
354
|
-
showRightPanel({ size, ...props }: OverlayContentProps & { size?:
|
|
353
|
+
showRightPanel({ size, ...props }: OverlayContentProps & { size?: RightPanelSize }) {
|
|
355
354
|
this.showCustomRightPanel(
|
|
356
355
|
<OverlayContent {...props} onClose={() => this.closeRightPanel()} type="panel" />,
|
|
357
356
|
{ size, onClose: props.onClose },
|
|
@@ -1,26 +1,110 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { delay } from '@stack-spot/portal-components'
|
|
2
|
+
import { listToClass } from '@stack-spot/portal-theme'
|
|
3
|
+
import { useEffect, useMemo, useRef, useState } from 'react'
|
|
2
4
|
import { createPortal } from 'react-dom'
|
|
3
5
|
import { getLayoutElements } from '../elements'
|
|
4
6
|
import { overlay } from '../LayoutOverlayManager'
|
|
7
|
+
import { CustomModalSize, RightPanelSize } from '../types'
|
|
8
|
+
import { valueOfLayoutVar } from '../utils'
|
|
5
9
|
|
|
6
10
|
export interface BackdropProps {
|
|
7
11
|
children: React.ReactNode,
|
|
8
12
|
visible: boolean,
|
|
13
|
+
/**
|
|
14
|
+
* A function to run when the backdrop is closed. Since the backdrop is a controlled element, this should be used to set the state
|
|
15
|
+
* of `visible` to false.
|
|
16
|
+
*/
|
|
9
17
|
onClose: () => void,
|
|
10
18
|
style?: React.CSSProperties,
|
|
19
|
+
/**
|
|
20
|
+
* Makes this backdrop act as a modal or a right panel.
|
|
21
|
+
* - `actAs = 'modal'` adds the className 'modal-box' to the backdrop, making it behave like a modal with medium size.
|
|
22
|
+
* - `actAs = 'right-panel'` adds the className 'right-panel-box' to the backdrop, making it behave like a right-panel with medium size.
|
|
23
|
+
* - `actAs = { type: T, size: S }` adds the className 'modal-box' or 'right-panel-box' to the backdrop, depending on the value of `T`.
|
|
24
|
+
* The size will depend on the value of `S`.
|
|
25
|
+
*/
|
|
26
|
+
actAs?: 'modal' | 'right-panel' | { type: 'modal', size: CustomModalSize } | { type: 'right-panel', size: RightPanelSize },
|
|
27
|
+
/**
|
|
28
|
+
* A persistent backdrop is always rendered, despite the value of `visible`. It still appears or disappears according to `visible`, but
|
|
29
|
+
* it never leaves the DOM.
|
|
30
|
+
*
|
|
31
|
+
* This can help preserving complex animations.
|
|
32
|
+
*
|
|
33
|
+
* Attention: if you have many complex backdrops with persistent = true, it may affect performance.
|
|
34
|
+
*
|
|
35
|
+
* @default false
|
|
36
|
+
*/
|
|
37
|
+
persistent?: boolean,
|
|
38
|
+
/**
|
|
39
|
+
* This doesn't change the animation of the backdrop! Use this property if `persistent` is false and the backdrop's content is animated
|
|
40
|
+
* in a different time than `--modal-animation-duration` (layout css variable).
|
|
41
|
+
*
|
|
42
|
+
* This lets you preserve the animations on your content when `persistent` is false.
|
|
43
|
+
*/
|
|
44
|
+
animationMS?: number,
|
|
11
45
|
className?: string,
|
|
12
46
|
}
|
|
13
47
|
|
|
14
|
-
|
|
48
|
+
/**
|
|
49
|
+
* The backdrop is a component for creating a Modal content. This can have any shape or form, it's free to accept any kind of content, and,
|
|
50
|
+
* by default, it has no animations attached to it (with the exception of the backdrop's animation, which is a fade-in-out).
|
|
51
|
+
*
|
|
52
|
+
* In general, to create modal and side-panels, you should use `overlay.showModal`, `overlay.showCustomModal`, `overlay.showRightPanel` and
|
|
53
|
+
* `overlay.showCustomRightPanel`.
|
|
54
|
+
*
|
|
55
|
+
* Use this when:
|
|
56
|
+
* 1. Your content is neither a modal, nor a right panel, but it needs a backdrop. Meaning, it can't be animated like a modal, but still
|
|
57
|
+
* needs to show a backdrop.
|
|
58
|
+
* 2. Your content is a modal or a right panel, but it needs to update according to an external state. The ideal scenario is to have the
|
|
59
|
+
* modal content completely independent of the external state, but sometimes, we do need to interact with an external state and calling
|
|
60
|
+
* `overlay.show*` multiple times is not ideal.
|
|
61
|
+
*
|
|
62
|
+
* Attention: if you open a modal/right panel through this component, you should not use the methods `overlay.close*` or `overlay.is*Open`
|
|
63
|
+
* to manage it.
|
|
64
|
+
*
|
|
65
|
+
* @example
|
|
66
|
+
* Check the example below for rendering a medium-sized modal. Equivalent to `overlay.showModal`. Remember that calling `overlay.showModal`
|
|
67
|
+
* is always preferable. Use this only if you fall into the second case explained above.
|
|
68
|
+
* ```
|
|
69
|
+
* <Backdrop visible={isOpen} onClose={() => setOpen(false)} actAs="modal">
|
|
70
|
+
* <OverlayContent type="modal" onClose={() => setOpen(false)} title="Title">
|
|
71
|
+
* <p>Hello World!</p>
|
|
72
|
+
* </OverlayContent>
|
|
73
|
+
* </Backdrop>
|
|
74
|
+
* ```
|
|
75
|
+
* @param props the component props {@link BackdropProps}.
|
|
76
|
+
*/
|
|
77
|
+
export const Backdrop = ({ children, visible = false, onClose, className, actAs, persistent, animationMS = 0, style }: BackdropProps) => {
|
|
15
78
|
const ref = useRef<HTMLDivElement>(null)
|
|
79
|
+
const [shouldRender, setShouldRender] = useState(!!persistent)
|
|
80
|
+
const renderDelay = useMemo(() => Math.max(parseFloat(valueOfLayoutVar('--modal-animation-duration')), animationMS) * 1000, [])
|
|
81
|
+
const backdropType = typeof actAs === 'string' ? actAs : actAs?.type
|
|
82
|
+
const backdropSize = typeof actAs === 'string' ? 'medium' : actAs?.size
|
|
83
|
+
const classes = listToClass([
|
|
84
|
+
className,
|
|
85
|
+
backdropType === 'modal' && 'modal-box',
|
|
86
|
+
backdropType === 'right-panel' && 'right-panel-box',
|
|
87
|
+
backdropSize,
|
|
88
|
+
])
|
|
16
89
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
90
|
+
useEffect(() => {
|
|
91
|
+
(async () => {
|
|
92
|
+
if (visible) {
|
|
93
|
+
setShouldRender(true)
|
|
94
|
+
// arbitrary delay to make sure the content is rendered before actually showing it.
|
|
95
|
+
await delay(10)
|
|
96
|
+
overlay.showBackdrop(ref.current)
|
|
97
|
+
}
|
|
98
|
+
else {
|
|
99
|
+
overlay.closeBackdrop(ref.current)
|
|
100
|
+
await delay(renderDelay)
|
|
101
|
+
setShouldRender(false)
|
|
102
|
+
}
|
|
103
|
+
})()
|
|
20
104
|
}, [visible])
|
|
21
105
|
|
|
22
106
|
const backdropContent = (
|
|
23
|
-
<div ref={ref} data-custom-backdrop-visibility={visible} className={
|
|
107
|
+
<div ref={ref} data-custom-backdrop-visibility={visible} className={classes} style={style}>
|
|
24
108
|
{children}
|
|
25
109
|
{/* This button allows the OverlayManager to programmatically close any custom backdrop by calling their respective onClose prop. */}
|
|
26
110
|
<button data-custom-backdrop-close onClick={onClose} style={{ display: 'none' }}>Close</button>
|
|
@@ -28,5 +112,5 @@ export const Backdrop = ({ children, visible = false, onClose, className, style
|
|
|
28
112
|
)
|
|
29
113
|
|
|
30
114
|
const backdrop = getLayoutElements().backdrop
|
|
31
|
-
return backdrop ? createPortal(backdropContent, backdrop) : null
|
|
115
|
+
return backdrop && (shouldRender || persistent) ? createPortal(backdropContent, backdrop) : null
|
|
32
116
|
}
|
|
@@ -10,7 +10,7 @@ import { NotificationPanelProps } from './types'
|
|
|
10
10
|
export const NotificationPanel = ({ filter, onFilter, loading, error, visible, onClose, ...props }: NotificationPanelProps) => {
|
|
11
11
|
const controller = useNotificationController()
|
|
12
12
|
return (
|
|
13
|
-
<StyledBackdrop visible={visible} onClose={onClose}>
|
|
13
|
+
<StyledBackdrop visible={visible} onClose={onClose} persistent>
|
|
14
14
|
<AnimatedHeight
|
|
15
15
|
className="notification-panel"
|
|
16
16
|
visible={visible}
|
|
@@ -6,8 +6,8 @@ import { theme } from '@stack-spot/portal-theme'
|
|
|
6
6
|
import { useTranslate } from '@stack-spot/portal-translate'
|
|
7
7
|
import { ReactNode, useState } from 'react'
|
|
8
8
|
import styled from 'styled-components'
|
|
9
|
+
import { PortalAcronym } from '../types'
|
|
9
10
|
import { useTour } from './tour'
|
|
10
|
-
import { PortalAcronym } from './types'
|
|
11
11
|
|
|
12
12
|
const Logos: Record<PortalAcronym, ReactNode> = {
|
|
13
13
|
'AI': <AI />,
|
package/src/index.ts
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
export { Backdrop } from './components/Backdrop'
|
|
2
|
+
export { ContactPopover } from './components/Contact/ContactPopover'
|
|
3
|
+
export { showContactUsModal } from './components/Contact/show-contact-modal'
|
|
1
4
|
export { Dialog } from './components/Dialog'
|
|
2
5
|
export { Header, HeaderProps } from './components/Header'
|
|
3
6
|
export { ActionItem, MenuContent, MenuGroup, Title } from './components/menu/MenuContent'
|
|
@@ -8,13 +11,11 @@ export { PortalSwitcher } from './components/PortalSwitcher'
|
|
|
8
11
|
export { RateComponent } from './components/Rate'
|
|
9
12
|
export { useRatingEffect } from './components/Rate/hook'
|
|
10
13
|
export { showRatingModal } from './components/Rate/show-rating-modal'
|
|
11
|
-
export { showContactUsModal } from './components/Contact/show-contact-modal'
|
|
12
|
-
export { ContactPopover } from './components/Contact/ContactPopover'
|
|
13
14
|
export * from './components/tour'
|
|
14
|
-
export * from './components/types'
|
|
15
15
|
export * from './elements'
|
|
16
16
|
export * from './errors'
|
|
17
17
|
export { Layout, RawLayout } from './Layout'
|
|
18
18
|
export { overlay } from './LayoutOverlayManager'
|
|
19
|
+
export * from './types'
|
|
19
20
|
export * from './utils'
|
|
20
21
|
|
package/src/layout.css
CHANGED
|
@@ -301,7 +301,7 @@ body {
|
|
|
301
301
|
pointer-events: auto;
|
|
302
302
|
}
|
|
303
303
|
|
|
304
|
-
#modal {
|
|
304
|
+
#modal, #backdrop .modal-box {
|
|
305
305
|
transform: scale(0);
|
|
306
306
|
display: flex;
|
|
307
307
|
flex-direction: column;
|
|
@@ -309,27 +309,32 @@ body {
|
|
|
309
309
|
width: calc(100% - 60px);
|
|
310
310
|
}
|
|
311
311
|
|
|
312
|
-
#modal.fit-content {
|
|
312
|
+
#modal.fit-content, #backdrop .modal-box.fit-content {
|
|
313
313
|
width: auto;
|
|
314
314
|
}
|
|
315
315
|
|
|
316
|
-
#modal.
|
|
316
|
+
#modal.full, #backdrop .modal-box.full {
|
|
317
|
+
width: 100%;
|
|
318
|
+
height: 100%;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
#modal.large, #backdrop .modal-box.large {
|
|
317
322
|
max-width: 1000px;
|
|
318
323
|
}
|
|
319
324
|
|
|
320
|
-
#modal.medium {
|
|
325
|
+
#modal.medium, #backdrop .modal-box.medium {
|
|
321
326
|
max-width: 800px;
|
|
322
327
|
}
|
|
323
328
|
|
|
324
|
-
#modal.small {
|
|
329
|
+
#modal.small, #backdrop .modal-box.small {
|
|
325
330
|
max-width: 600px;
|
|
326
331
|
}
|
|
327
332
|
|
|
328
|
-
#modal.visible {
|
|
333
|
+
#modal.visible, #backdrop.visible .modal-box {
|
|
329
334
|
transform: scale(1);
|
|
330
335
|
}
|
|
331
336
|
|
|
332
|
-
#rightPanel {
|
|
337
|
+
#rightPanel, #backdrop .right-panel-box {
|
|
333
338
|
position: fixed;
|
|
334
339
|
display: flex;
|
|
335
340
|
flex-direction: column;
|
|
@@ -342,22 +347,22 @@ body {
|
|
|
342
347
|
border-bottom-left-radius: 1rem;
|
|
343
348
|
}
|
|
344
349
|
|
|
345
|
-
#rightPanel.small {
|
|
350
|
+
#rightPanel.small, #backdrop .right-panel-box.small {
|
|
346
351
|
right: -400px;
|
|
347
352
|
width: 400px;
|
|
348
353
|
}
|
|
349
354
|
|
|
350
|
-
#rightPanel.medium {
|
|
355
|
+
#rightPanel.medium, #backdrop .right-panel-box.medium {
|
|
351
356
|
right: -600px;
|
|
352
357
|
width: 600px;
|
|
353
358
|
}
|
|
354
359
|
|
|
355
|
-
#rightPanel.large {
|
|
360
|
+
#rightPanel.large, #backdrop .right-panel-box.large {
|
|
356
361
|
right: -800px;
|
|
357
362
|
width: 800px;
|
|
358
363
|
}
|
|
359
364
|
|
|
360
|
-
#rightPanel.visible {
|
|
365
|
+
#rightPanel.visible, #backdrop.visible .right-panel-box {
|
|
361
366
|
right: 0;
|
|
362
367
|
}
|
|
363
368
|
|
|
@@ -403,7 +408,7 @@ body {
|
|
|
403
408
|
|
|
404
409
|
/* Overlay: toaster */
|
|
405
410
|
|
|
406
|
-
.main-toaster
|
|
411
|
+
.main-toaster h2 {
|
|
407
412
|
font-size: 14px;
|
|
408
413
|
font-weight: 500;
|
|
409
414
|
margin: 0 0 8px 0;
|
package/src/types.ts
ADDED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,GAAG,IAAI,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":""}
|
package/src/components/types.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export type PortalAcronym = 'EDP' | 'AI' | 'HUB' | 'CS'
|
|
File without changes
|