@stack-spot/portal-layout 0.0.64 → 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.
Files changed (209) hide show
  1. package/dist/Layout.d.ts +57 -5
  2. package/dist/Layout.d.ts.map +1 -1
  3. package/dist/Layout.js +12 -5
  4. package/dist/Layout.js.map +1 -1
  5. package/dist/LayoutOverlayManager.d.ts +173 -6
  6. package/dist/LayoutOverlayManager.d.ts.map +1 -1
  7. package/dist/LayoutOverlayManager.js +118 -9
  8. package/dist/LayoutOverlayManager.js.map +1 -1
  9. package/dist/components/Dialog.d.ts +48 -5
  10. package/dist/components/Dialog.d.ts.map +1 -1
  11. package/dist/components/Dialog.js +7 -2
  12. package/dist/components/Dialog.js.map +1 -1
  13. package/dist/components/Header.d.ts +29 -1
  14. package/dist/components/Header.d.ts.map +1 -1
  15. package/dist/components/Header.js +6 -2
  16. package/dist/components/Header.js.map +1 -1
  17. package/dist/components/OverlayContent.d.ts +22 -0
  18. package/dist/components/OverlayContent.d.ts.map +1 -1
  19. package/dist/components/OverlayContent.js +4 -0
  20. package/dist/components/OverlayContent.js.map +1 -1
  21. package/dist/components/PortalSwitcher.d.ts +14 -0
  22. package/dist/components/PortalSwitcher.d.ts.map +1 -1
  23. package/dist/components/PortalSwitcher.js +9 -6
  24. package/dist/components/PortalSwitcher.js.map +1 -1
  25. package/dist/components/Toaster.d.ts +4 -0
  26. package/dist/components/Toaster.d.ts.map +1 -1
  27. package/dist/components/Toaster.js +5 -1
  28. package/dist/components/Toaster.js.map +1 -1
  29. package/dist/components/UserMenu.d.ts +14 -1
  30. package/dist/components/UserMenu.d.ts.map +1 -1
  31. package/dist/components/UserMenu.js +5 -1
  32. package/dist/components/UserMenu.js.map +1 -1
  33. package/dist/components/error/ErrorBoundary.d.ts +10 -1
  34. package/dist/components/error/ErrorBoundary.d.ts.map +1 -1
  35. package/dist/components/error/ErrorBoundary.js +10 -1
  36. package/dist/components/error/ErrorBoundary.js.map +1 -1
  37. package/dist/components/error/ErrorManager.d.ts +22 -6
  38. package/dist/components/error/ErrorManager.d.ts.map +1 -1
  39. package/dist/components/error/ErrorManager.js +21 -1
  40. package/dist/components/error/ErrorManager.js.map +1 -1
  41. package/dist/components/error/SilentErrorBoundary.d.ts +11 -2
  42. package/dist/components/error/SilentErrorBoundary.d.ts.map +1 -1
  43. package/dist/components/error/SilentErrorBoundary.js +10 -0
  44. package/dist/components/error/SilentErrorBoundary.js.map +1 -1
  45. package/dist/components/menu/MenuContent.d.ts +19 -545
  46. package/dist/components/menu/MenuContent.d.ts.map +1 -1
  47. package/dist/components/menu/MenuContent.js +33 -35
  48. package/dist/components/menu/MenuContent.js.map +1 -1
  49. package/dist/components/menu/MenuSections.d.ts +10 -0
  50. package/dist/components/menu/MenuSections.d.ts.map +1 -1
  51. package/dist/components/menu/MenuSections.js +70 -16
  52. package/dist/components/menu/MenuSections.js.map +1 -1
  53. package/dist/components/menu/PageSelector.d.ts +5 -0
  54. package/dist/components/menu/PageSelector.d.ts.map +1 -1
  55. package/dist/components/menu/PageSelector.js +8 -3
  56. package/dist/components/menu/PageSelector.js.map +1 -1
  57. package/dist/components/menu/types.d.ts +100 -7
  58. package/dist/components/menu/types.d.ts.map +1 -1
  59. package/dist/components/tour/PortalSwitcherStep.d.ts +6 -1
  60. package/dist/components/tour/PortalSwitcherStep.d.ts.map +1 -1
  61. package/dist/components/tour/PortalSwitcherStep.js +6 -1
  62. package/dist/components/tour/PortalSwitcherStep.js.map +1 -1
  63. package/dist/components/types.d.ts +0 -13
  64. package/dist/components/types.d.ts.map +1 -1
  65. package/dist/dictionary.d.ts +3 -0
  66. package/dist/dictionary.d.ts.map +1 -1
  67. package/dist/dictionary.js +3 -0
  68. package/dist/dictionary.js.map +1 -1
  69. package/dist/elements.d.ts +6 -0
  70. package/dist/elements.d.ts.map +1 -1
  71. package/dist/elements.js +6 -0
  72. package/dist/elements.js.map +1 -1
  73. package/dist/index.d.ts +0 -3
  74. package/dist/index.d.ts.map +1 -1
  75. package/dist/index.js +0 -3
  76. package/dist/index.js.map +1 -1
  77. package/dist/layout.css +1 -5
  78. package/dist/toaster.d.ts +74 -9
  79. package/dist/toaster.d.ts.map +1 -1
  80. package/dist/toaster.js +32 -6
  81. package/dist/toaster.js.map +1 -1
  82. package/dist/utils.d.ts +6 -69
  83. package/dist/utils.d.ts.map +1 -1
  84. package/dist/utils.js +9 -130
  85. package/dist/utils.js.map +1 -1
  86. package/package.json +12 -11
  87. package/readme.md +146 -0
  88. package/src/Layout.tsx +78 -28
  89. package/src/LayoutOverlayManager.tsx +184 -9
  90. package/src/components/Dialog.tsx +49 -6
  91. package/src/components/Header.tsx +31 -3
  92. package/src/components/OverlayContent.tsx +22 -0
  93. package/src/components/PortalSwitcher.tsx +22 -8
  94. package/src/components/Toaster.tsx +10 -2
  95. package/src/components/UserMenu.tsx +14 -1
  96. package/src/components/error/ErrorBoundary.tsx +11 -2
  97. package/src/components/error/ErrorManager.ts +22 -6
  98. package/src/components/error/SilentErrorBoundary.tsx +12 -2
  99. package/src/components/menu/MenuContent.tsx +33 -52
  100. package/src/components/menu/MenuSections.tsx +99 -49
  101. package/src/components/menu/PageSelector.tsx +8 -3
  102. package/src/components/menu/types.ts +100 -8
  103. package/src/components/tour/PortalSwitcherStep.tsx +7 -4
  104. package/src/components/types.ts +0 -14
  105. package/src/dictionary.ts +3 -0
  106. package/src/elements.ts +6 -0
  107. package/src/index.ts +0 -3
  108. package/src/layout.css +1 -5
  109. package/src/toaster.tsx +125 -14
  110. package/src/utils.ts +9 -142
  111. package/dist/components/BottomNotification.d.ts +0 -1
  112. package/dist/components/BottomNotification.d.ts.map +0 -1
  113. package/dist/components/BottomNotification.js +0 -2
  114. package/dist/components/BottomNotification.js.map +0 -1
  115. package/dist/components/BottomPanel.d.ts +0 -1
  116. package/dist/components/BottomPanel.d.ts.map +0 -1
  117. package/dist/components/BottomPanel.js +0 -2
  118. package/dist/components/BottomPanel.js.map +0 -1
  119. package/dist/components/SelectionList.d.ts +0 -36
  120. package/dist/components/SelectionList.d.ts.map +0 -1
  121. package/dist/components/SelectionList.js +0 -140
  122. package/dist/components/SelectionList.js.map +0 -1
  123. package/dist/components/error/ErrorDescriptor.d.ts +0 -12
  124. package/dist/components/error/ErrorDescriptor.d.ts.map +0 -1
  125. package/dist/components/error/ErrorDescriptor.js +0 -17
  126. package/dist/components/error/ErrorDescriptor.js.map +0 -1
  127. package/dist/components/error/ErrorFeedback.d.ts +0 -3
  128. package/dist/components/error/ErrorFeedback.d.ts.map +0 -1
  129. package/dist/components/error/ErrorFeedback.js +0 -66
  130. package/dist/components/error/ErrorFeedback.js.map +0 -1
  131. package/dist/components/menu/use-check-text-overflow.d.ts +0 -6
  132. package/dist/components/menu/use-check-text-overflow.d.ts.map +0 -1
  133. package/dist/components/menu/use-check-text-overflow.js +0 -20
  134. package/dist/components/menu/use-check-text-overflow.js.map +0 -1
  135. package/dist/components/menu/use-keyboard-controls.d.ts +0 -23
  136. package/dist/components/menu/use-keyboard-controls.d.ts.map +0 -1
  137. package/dist/components/menu/use-keyboard-controls.js +0 -49
  138. package/dist/components/menu/use-keyboard-controls.js.map +0 -1
  139. package/dist/components/menu/useCheckTextOverflow.d.ts +0 -6
  140. package/dist/components/menu/useCheckTextOverflow.d.ts.map +0 -1
  141. package/dist/components/menu/useCheckTextOverflow.js +0 -20
  142. package/dist/components/menu/useCheckTextOverflow.js.map +0 -1
  143. package/dist/components/tour/Navigation.d.ts +0 -8
  144. package/dist/components/tour/Navigation.d.ts.map +0 -1
  145. package/dist/components/tour/Navigation.js +0 -15
  146. package/dist/components/tour/Navigation.js.map +0 -1
  147. package/dist/components/tour/config.d.ts +0 -3
  148. package/dist/components/tour/config.d.ts.map +0 -1
  149. package/dist/components/tour/config.js +0 -22
  150. package/dist/components/tour/config.js.map +0 -1
  151. package/dist/components/tour/steps/PortalSwitcherStep.d.ts +0 -3
  152. package/dist/components/tour/steps/PortalSwitcherStep.d.ts.map +0 -1
  153. package/dist/components/tour/steps/PortalSwitcherStep.js +0 -30
  154. package/dist/components/tour/steps/PortalSwitcherStep.js.map +0 -1
  155. package/dist/components/tour/utils.d.ts +0 -9
  156. package/dist/components/tour/utils.d.ts.map +0 -1
  157. package/dist/components/tour/utils.js +0 -48
  158. package/dist/components/tour/utils.js.map +0 -1
  159. package/dist/layout-context.d.ts +0 -10
  160. package/dist/layout-context.d.ts.map +0 -1
  161. package/dist/layout-context.js +0 -11
  162. package/dist/layout-context.js.map +0 -1
  163. package/dist/svg/AI.d.ts +0 -6
  164. package/dist/svg/AI.d.ts.map +0 -1
  165. package/dist/svg/AI.js +0 -9
  166. package/dist/svg/AI.js.map +0 -1
  167. package/dist/svg/EDP.d.ts +0 -6
  168. package/dist/svg/EDP.d.ts.map +0 -1
  169. package/dist/svg/EDP.js +0 -5
  170. package/dist/svg/EDP.js.map +0 -1
  171. package/dist/svg/Forbidden.d.ts +0 -6
  172. package/dist/svg/Forbidden.d.ts.map +0 -1
  173. package/dist/svg/Forbidden.js +0 -4
  174. package/dist/svg/Forbidden.js.map +0 -1
  175. package/dist/svg/HUB.d.ts +0 -6
  176. package/dist/svg/HUB.d.ts.map +0 -1
  177. package/dist/svg/HUB.js +0 -5
  178. package/dist/svg/HUB.js.map +0 -1
  179. package/dist/svg/Logo.d.ts +0 -2
  180. package/dist/svg/Logo.d.ts.map +0 -1
  181. package/dist/svg/Logo.js +0 -4
  182. package/dist/svg/Logo.js.map +0 -1
  183. package/dist/svg/NotFound.d.ts +0 -6
  184. package/dist/svg/NotFound.d.ts.map +0 -1
  185. package/dist/svg/NotFound.js +0 -4
  186. package/dist/svg/NotFound.js.map +0 -1
  187. package/dist/svg/ServerError.d.ts +0 -6
  188. package/dist/svg/ServerError.d.ts.map +0 -1
  189. package/dist/svg/ServerError.js +0 -4
  190. package/dist/svg/ServerError.js.map +0 -1
  191. package/dist/svg/Unauthenticated.d.ts +0 -6
  192. package/dist/svg/Unauthenticated.d.ts.map +0 -1
  193. package/dist/svg/Unauthenticated.js +0 -4
  194. package/dist/svg/Unauthenticated.js.map +0 -1
  195. package/src/components/BottomNotification.tsx +0 -0
  196. package/src/components/BottomPanel.tsx +0 -0
  197. package/src/components/SelectionList.tsx +0 -272
  198. package/src/components/error/ErrorFeedback.tsx +0 -114
  199. package/src/components/menu/use-check-text-overflow.tsx +0 -26
  200. package/src/components/menu/use-keyboard-controls.tsx +0 -70
  201. package/src/layout-context.tsx +0 -22
  202. package/src/svg/AI.tsx +0 -37
  203. package/src/svg/EDP.tsx +0 -35
  204. package/src/svg/Forbidden.tsx +0 -22
  205. package/src/svg/HUB.tsx +0 -35
  206. package/src/svg/Logo.tsx +0 -35
  207. package/src/svg/NotFound.tsx +0 -16
  208. package/src/svg/ServerError.tsx +0 -33
  209. package/src/svg/Unauthenticated.tsx +0 -16
package/dist/Layout.d.ts CHANGED
@@ -1,32 +1,84 @@
1
- import { TourProps } from '@stack-spot/portal-components';
1
+ import { TourProps } from '@stack-spot/portal-components/Tour';
2
2
  import { WithStyle } from '@stack-spot/portal-theme';
3
3
  import '@stack-spot/portal-theme/dist/theme.css';
4
4
  import { ReactElement, ReactNode } from 'react';
5
5
  import { HeaderProps } from './components/Header.js';
6
6
  import { DescriptionFn, ErrorHandler } from './components/error/ErrorManager.js';
7
7
  import { MenuProps } from './components/menu/types.js';
8
- import { LayoutContext } from './layout-context.js';
9
8
  import './layout.css';
10
- interface Props extends WithStyle, LayoutContext {
9
+ interface Props extends WithStyle {
10
+ /**
11
+ * The config for the menu.
12
+ */
11
13
  menu: MenuProps;
14
+ /**
15
+ * The config for the header.
16
+ */
12
17
  header: HeaderProps;
18
+ /**
19
+ * The React node to go in the page content.
20
+ */
13
21
  children: ReactNode;
22
+ /**
23
+ * A React node to place right after the page.
24
+ */
14
25
  extra?: ReactNode;
26
+ /**
27
+ * A function to convert errors into a readable format so they're properly rendered and logged.
28
+ */
15
29
  errorDescriptor?: DescriptionFn;
30
+ /**
31
+ * A function to run whenever an error is catch by an error boundary.
32
+ */
16
33
  onError?: ErrorHandler;
34
+ /**
35
+ * The options for the React Tour's tutorial.
36
+ */
17
37
  tourProps?: TourProps;
18
38
  }
19
- interface RawProps extends WithStyle, LayoutContext {
39
+ interface RawProps extends WithStyle {
40
+ /**
41
+ * The React element to go in the menu sections.
42
+ */
20
43
  menuSections?: ReactElement;
44
+ /**
45
+ * The React element to go in the menu content.
46
+ */
21
47
  menuContent?: ReactElement;
48
+ /**
49
+ * The React element to go in the header.
50
+ */
22
51
  header?: ReactElement;
52
+ /**
53
+ * The React node to go in the page content.
54
+ */
23
55
  children?: ReactNode;
56
+ /**
57
+ * A React node to place right after the page.
58
+ */
24
59
  extra?: ReactNode;
60
+ /**
61
+ * A function to convert errors into a readable format so they're properly rendered and logged.
62
+ */
25
63
  errorDescriptor?: DescriptionFn;
64
+ /**
65
+ * A function to run whenever an error is catch by an error boundary.
66
+ */
26
67
  onError?: ErrorHandler;
68
+ /**
69
+ * The options for the React Tour's tutorial.
70
+ */
27
71
  tourProps?: TourProps;
28
72
  }
29
- export declare const RawLayout: ({ menuSections, menuContent, header, children, tourProps, extra, errorDescriptor, onError, className, style, anchorTag }: RawProps) => import("react/jsx-runtime").JSX.Element;
73
+ /**
74
+ * Renders the layout with the React elements passed in the props.
75
+ * @param props the component's props {@link RawProps}.
76
+ */
77
+ export declare const RawLayout: ({ menuSections, menuContent, header, children, tourProps, extra, errorDescriptor, onError, className, style }: RawProps) => import("react/jsx-runtime").JSX.Element;
78
+ /**
79
+ * Renders the layout with a menu and header that follow the config objects passed as parameter.
80
+ * @param props the component's props {@link Props}.
81
+ */
30
82
  export declare const Layout: ({ menu, header, children, extra, errorDescriptor, onError, className, style, tourProps }: Props) => import("react/jsx-runtime").JSX.Element;
31
83
  export {};
32
84
  //# sourceMappingURL=Layout.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../src/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAkD,MAAM,+BAA+B,CAAA;AACzG,OAAO,EAAsB,SAAS,EAAe,MAAM,0BAA0B,CAAA;AACrF,OAAO,yCAAyC,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,SAAS,EAAa,MAAM,OAAO,CAAA;AAE1D,OAAO,EAAU,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAGzD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAgB,MAAM,iCAAiC,CAAA;AAI3F,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAGnD,OAAO,EAAE,aAAa,EAAkB,MAAM,kBAAkB,CAAA;AAChE,OAAO,cAAc,CAAA;AAErB,UAAU,KAAM,SAAQ,SAAS,EAAE,aAAa;IAC9C,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,UAAU,QAAS,SAAQ,SAAS,EAAE,aAAa;IACjD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,eAAO,MAAM,SAAS,6HAGlB,QAAQ,4CAsDX,CAAA;AAOD,eAAO,MAAM,MAAM,6FAA8F,KAAK,4CAiBrH,CAAA"}
1
+ {"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../src/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAkD,MAAM,oCAAoC,CAAA;AAC9G,OAAO,EAAsB,SAAS,EAAe,MAAM,0BAA0B,CAAA;AACrF,OAAO,yCAAyC,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,SAAS,EAAa,MAAM,OAAO,CAAA;AAE1D,OAAO,EAAU,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAGzD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAgB,MAAM,iCAAiC,CAAA;AAI3F,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAGnD,OAAO,cAAc,CAAA;AAErB,UAAU,KAAM,SAAQ,SAAS;IAC/B;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAChB;;OAEG;IACH,MAAM,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,UAAU,QAAS,SAAQ,SAAS;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,kHAGlB,QAAQ,4CAoDX,CAAA;AAOD;;;GAGG;AACH,eAAO,MAAM,MAAM,6FAA8F,KAAK,4CAiBrH,CAAA"}
package/dist/Layout.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { TourProvider, defaultTourConfig, isNewTourStep } from '@stack-spot/portal-components';
2
+ import { TourProvider, defaultTourConfig, isNewTourStep } from '@stack-spot/portal-components/Tour';
3
3
  import { CSSToCitricAdapter, listToClass } from '@stack-spot/portal-theme';
4
4
  import '@stack-spot/portal-theme/dist/theme.css';
5
5
  import { useEffect } from 'react';
@@ -13,9 +13,12 @@ import { MenuContent } from './components/menu/MenuContent.js';
13
13
  import { MenuSections } from './components/menu/MenuSections.js';
14
14
  import { usePortalSwitcherStep } from './components/tour/PortalSwitcherStep.js';
15
15
  import { elementIds, getLayoutElements } from './elements.js';
16
- import { LayoutProvider } from './layout-context.js';
17
16
  import './layout.css';
18
- export const RawLayout = ({ menuSections, menuContent, header, children, tourProps, extra, errorDescriptor, onError, className, style, anchorTag }) => {
17
+ /**
18
+ * Renders the layout with the React elements passed in the props.
19
+ * @param props the component's props {@link RawProps}.
20
+ */
21
+ export const RawLayout = ({ menuSections, menuContent, header, children, tourProps, extra, errorDescriptor, onError, className, style }) => {
19
22
  // @ts-ignore
20
23
  const { bottomDialog, modal, rightPanel } = overlay.useOverlays();
21
24
  const { layout } = getLayoutElements();
@@ -38,13 +41,17 @@ export const RawLayout = ({ menuSections, menuContent, header, children, tourPro
38
41
  if (onError)
39
42
  ErrorManager.setErrorHandler(onError);
40
43
  }, []);
41
- return (_jsx(CSSToCitricAdapter, { children: _jsx(LayoutProvider, { anchorTag: anchorTag, children: _jsx(TourProvider, { config: tourPropsWithDefaults, children: _jsxs("div", { id: elementIds.layout, className: listToClass(classes), style: style, children: [children && _jsx("div", { id: elementIds.page, children: _jsx("article", { id: elementIds.content, children: _jsx(ErrorBoundary, { children: children }) }) }), extra && _jsx(SilentErrorBoundary, { children: extra }), _jsxs("aside", { id: elementIds.menu, children: [_jsx("nav", { role: "menu", id: elementIds.menuContent, children: _jsx(SilentErrorBoundary, { children: menuContent }) }), menuSections &&
42
- _jsx("nav", { role: "menu", id: elementIds.menuSections, children: _jsx(SilentErrorBoundary, { children: menuSections }) })] }), header && _jsx("header", { id: elementIds.header, children: _jsx(SilentErrorBoundary, { children: header }) }), _jsx("div", { id: elementIds.bottomDialog, role: "dialog", children: _jsx(ErrorBoundary, { children: bottomDialog }) }), _jsxs("div", { id: elementIds.backdrop, children: [_jsx("div", { id: elementIds.rightPanel, "aria-modal": true, role: "dialog", children: _jsx(ErrorBoundary, { children: rightPanel }) }), _jsx("div", { id: elementIds.modal, "aria-modal": true, role: "dialog", children: _jsx(ErrorBoundary, { children: modal }) })] }), _jsx(Toaster, {}), _jsx("div", { id: elementIds.accessibilityAnnouncer, "aria-atomic": true, "aria-live": "assertive" })] }) }) }) }));
44
+ return (_jsx(CSSToCitricAdapter, { children: _jsx(TourProvider, { config: tourPropsWithDefaults, children: _jsxs("div", { id: elementIds.layout, className: listToClass(classes), style: style, children: [children && _jsx("div", { id: elementIds.page, children: _jsx("article", { id: elementIds.content, children: _jsx(ErrorBoundary, { children: children }) }) }), extra && _jsx(SilentErrorBoundary, { children: extra }), _jsxs("aside", { id: elementIds.menu, children: [_jsx("nav", { role: "menu", id: elementIds.menuContent, children: _jsx(SilentErrorBoundary, { children: menuContent }) }), menuSections &&
45
+ _jsx("nav", { role: "menu", id: elementIds.menuSections, children: _jsx(SilentErrorBoundary, { children: menuSections }) })] }), header && _jsx("header", { id: elementIds.header, children: _jsx(SilentErrorBoundary, { children: header }) }), _jsx("div", { id: elementIds.bottomDialog, role: "dialog", children: _jsx(ErrorBoundary, { children: bottomDialog }) }), _jsxs("div", { id: elementIds.backdrop, children: [_jsx("div", { id: elementIds.rightPanel, "aria-modal": true, role: "dialog", children: _jsx(ErrorBoundary, { children: rightPanel }) }), _jsx("div", { id: elementIds.modal, "aria-modal": true, role: "dialog", children: _jsx(ErrorBoundary, { children: modal }) })] }), _jsx(Toaster, {}), _jsx("div", { id: elementIds.accessibilityAnnouncer, "aria-atomic": true, "aria-live": "assertive" })] }) }) }));
43
46
  };
44
47
  const MenuContentRenderer = ({ content }) => {
45
48
  const menuContent = typeof content === 'function' ? content() : content;
46
49
  return _jsx(MenuContent, { ...menuContent });
47
50
  };
51
+ /**
52
+ * Renders the layout with a menu and header that follow the config objects passed as parameter.
53
+ * @param props the component's props {@link Props}.
54
+ */
48
55
  export const Layout = ({ menu, header, children, extra, errorDescriptor, onError, className, style, tourProps }) => (_jsx(RawLayout, { header: _jsx(Header, { ...header }), menuSections: menu.sections ? _jsx(MenuSections, { ...menu }) : undefined, menuContent: menu.content
49
56
  ? _jsx(MenuContentRenderer, { content: menu.content }, 'contentKey' in menu ? menu.contentKey : undefined)
50
57
  : undefined, errorDescriptor: errorDescriptor, onError: onError, extra: extra, className: className, style: style, tourProps: tourProps, children: children }));
@@ -1 +1 @@
1
- {"version":3,"file":"Layout.js","sourceRoot":"","sources":["../src/Layout.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Layout.js","sourceRoot":"","sources":["../src/Layout.tsx"],"names":[],"mappings":"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"}
@@ -1,19 +1,35 @@
1
1
  import { ReactElement } from 'react';
2
2
  import { DialogOptions } from './components/Dialog.js';
3
3
  import { OverlayContentProps } from './components/OverlayContent.js';
4
- import { showToaster as showReactToaster } from './toaster.js';
4
+ import { CustomToasterOptions, DefaultToasterOptions, closeReactToaster } from './toaster.js';
5
5
  interface AlertOptions extends Omit<DialogOptions, 'cancel'> {
6
+ /**
7
+ * 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
8
+ * pressing ESC.
9
+ */
6
10
  showButton?: boolean;
7
11
  }
8
12
  type BottomDialogOptions = Omit<DialogOptions, 'title'>;
9
13
  type OverlaySize = 'small' | 'medium' | 'large';
10
14
  type ModalSize = 'fit-content' | OverlaySize;
11
15
  interface CustomModalOptions {
16
+ /**
17
+ * The size of the modal.
18
+ */
12
19
  size?: ModalSize;
20
+ /**
21
+ * A function to call when the modal closes.
22
+ */
13
23
  onClose?: () => void;
14
24
  }
15
25
  interface CustomRightPanelOptions {
26
+ /**
27
+ * The size of the right panel.
28
+ */
16
29
  size?: OverlaySize;
30
+ /**
31
+ * A function to call when the right panel closes.
32
+ */
17
33
  onClose?: () => void;
18
34
  }
19
35
  declare class LayoutOverlayManager {
@@ -26,38 +42,189 @@ declare class LayoutOverlayManager {
26
42
  */
27
43
  private lastActiveElement;
28
44
  private setupElements;
45
+ /**
46
+ * Setup the overlay layout elements.
47
+ * @returns the content for the modal, rightPanel and bottomDialog.
48
+ */
29
49
  private useOverlays;
50
+ /**
51
+ * Enables or disables the interactivity of an element.
52
+ * @param element the element to have its interactivity changed.
53
+ * @param interactive false to disable interactivity, true to enable.
54
+ */
30
55
  private setInteractivity;
31
56
  private setMainContentInteractivity;
32
57
  private showOverlay;
33
58
  private hideOverlay;
59
+ /**
60
+ * @returns true if the modal is currently opened. False otherwise.
61
+ */
34
62
  isModalOpen(): boolean;
63
+ /**
64
+ * @returns true if the right panel is currently opened. False otherwise.
65
+ */
35
66
  isRightPanelOpen(): boolean;
67
+ /**
68
+ * @returns true if the bottom dialog is currently opened. False otherwise.
69
+ */
36
70
  isBottomDialogOpen(): boolean;
71
+ /**
72
+ * Opens a modal with custom content.
73
+ *
74
+ * Attention: the modal state must be declared within the modal. If the state is declared outside the modal, its content won't be updated
75
+ * accordingly. To force an update of an outside state, you need to call `showCustomModal` again with the new state value.
76
+ *
77
+ * @param content a react element with the modal content.
78
+ * @param options the modal options {@link CustomModalOptions}.
79
+ */
37
80
  showCustomModal(content: React.ReactElement, { size, onClose }?: CustomModalOptions): void;
81
+ /**
82
+ * Opens a modal.
83
+ *
84
+ * Attention: the modal state must be declared within the modal. If the state is declared outside the modal, its content won't be updated
85
+ * accordingly. To force an update of an outside state, you need to call `showModal` again with the new state value.
86
+ *
87
+ * @param options the modal options: {@link OverlayContentProps} & { size: {@link ModalSize} }.
88
+ */
38
89
  showModal({ size, ...props }: OverlayContentProps & {
39
90
  size?: ModalSize;
40
91
  }): void;
41
92
  private showDialog;
93
+ /**
94
+ * Shows a confirmation dialog and returns a promise that resolves as soon as the dialog is closed. The result of the promise is true if
95
+ * the user confirms and false otherwise.
96
+ *
97
+ * If you need the user to type something to confirm the action, use the property `validate` in the options parameter.
98
+ * @param options the dialog options: {@link DialogOptions}.
99
+ * @returns a promise that resolves with the user's answer.
100
+ */
42
101
  confirm({ confirm, cancel, ...options }: DialogOptions): Promise<boolean>;
102
+ /**
103
+ * Shows an alert dialog and returns a promise that resolves as soon as the dialog is closed.
104
+ *
105
+ * @param options the dialog options: {@link AlertOptions}.
106
+ * @returns a promise that resolves to undefined as soon as the dialog is closed.
107
+ */
43
108
  alert({ confirm, showButton, ...options }: AlertOptions): Promise<void>;
44
- showBottomDialog({ message, cancel, confirm }: BottomDialogOptions): Promise<boolean>;
109
+ /**
110
+ * Shows a message at the bottom of the window and asks the user to confirm or decline it. The return value is a promise that resolves as
111
+ * soon as the user presses one of the buttons. The result of the promise is true if the user confirms and false otherwise.
112
+ *
113
+ * Differently than `confirm` and `alert`, this message can only be closed if the user clicks one of the buttons or `closeBottomDialog`
114
+ * is called.
115
+ *
116
+ * @param options the dialog options: {@link BottomDialogOptions}.
117
+ * @returns a promise that resolves with the user's answer.
118
+ */
119
+ showBottomDialog({ children, cancel, confirm }: BottomDialogOptions): Promise<boolean>;
120
+ /**
121
+ * Opens a right panel with custom content.
122
+ *
123
+ * Attention: the right panel state must be declared within the right panel. If the state is declared outside the right panel, its content
124
+ * won't be updated accordingly. To force an update of an outside state, you need to call `showCustomRightPanel` again with the new state
125
+ * value.
126
+ *
127
+ * @param content a react element with the modal content.
128
+ * @param options the modal options {@link CustomModalOptions}.
129
+ */
45
130
  showCustomRightPanel(content: ReactElement, { size, onClose }?: CustomRightPanelOptions): void;
131
+ /**
132
+ * Opens a right panel.
133
+ *
134
+ * Attention: the right panel state must be declared within the right panel. If the state is declared outside the right panel, its content
135
+ * won't be updated accordingly. To force an update of an outside state, you need to call `showRightPanel` again with the new state value.
136
+ *
137
+ * @param options the modal options: {@link OverlayContentProps} & { size: {@link ModalSize} }.
138
+ */
46
139
  showRightPanel({ size, ...props }: OverlayContentProps & {
47
140
  size?: OverlaySize;
48
141
  }): void;
142
+ private focusLastActiveElement;
49
143
  /**
50
- * Focus the element that had focus before the last overlay was opened. If the element is not visible anymore, another one that makes
51
- * sense (accessibility-wise) is focused.
144
+ * Closes the modal if it's open.
145
+ * @param runCloseListener whether or not to run the function `onClose` passed to `showModal` or `showCustomModal`. Defaults to true.
52
146
  */
53
- private focusLastActiveElement;
54
147
  closeModal(runCloseListener?: boolean): void;
148
+ /**
149
+ * Closes the right panel if it's open.
150
+ * @param runCloseListener whether or not to run the function `onClose` passed to `showRightPanel` or `showCustomRightPanel`. Defaults to
151
+ * true.
152
+ */
55
153
  closeRightPanel(runCloseListener?: boolean): void;
154
+ /**
155
+ * Closes the bottom dialog if it's open.
156
+ */
56
157
  closeBottomDialog(): void;
158
+ /**
159
+ * Verifies if the HTML element passed as parameter is inside the modal.
160
+ * @param element the HTML element to check.
161
+ * @returns true if `element` is inside the modal; false otherwise.
162
+ */
57
163
  isInsideModal(element: HTMLElement): boolean;
164
+ /**
165
+ * Verifies if the HTML element passed as parameter is inside the right panel.
166
+ * @param element the HTML element to check.
167
+ * @returns true if `element` is inside the right panel; false otherwise.
168
+ */
58
169
  isInsideRightPanel(element: HTMLElement): boolean;
59
- showToaster: typeof showReactToaster;
170
+ /**
171
+ * Shows a new toaster on the top right corner of the layout.
172
+ * @example
173
+ * ```
174
+ * overlay.showToaster({ title: 'Welcome', message: 'Hello World' })
175
+ * overlay.showToaster({
176
+ * title: 'Welcome',
177
+ * message: 'Hello World',
178
+ * actions: [
179
+ * { label: 'Got it!' },
180
+ * {
181
+ * label: 'Tell me more',
182
+ * closeOnClick: false,
183
+ * onClick: (event) => {
184
+ * // do something...
185
+ * },
186
+ * },
187
+ * ]
188
+ * })
189
+ * ```
190
+ * @param options the options for the toaster: {@link DefaultToasterOptions}.
191
+ * @returns the toaster's id.
192
+ */
193
+ showToaster(defaultToasterConfig: DefaultToasterOptions): number | string;
194
+ /**
195
+ * Shows a fully customized toaster on the top right corner of the layout.
196
+ * @example
197
+ * ```
198
+ * overlay.showToaster({
199
+ * custom: true,
200
+ * message: <MyCustomToasterContent />,
201
+ * closeButton: <MyCustomCloseButton />,
202
+ * })
203
+ * ```
204
+ * @param options the options for the toaster: {@link CustomToasterOptions}.
205
+ * @returns the toaster's id.
206
+ */
207
+ showToaster(customToasterConfig: CustomToasterOptions): number | string;
208
+ /**
209
+ * Shows the message passed as parameter in a new toaster on the top right corner of the layout.
210
+ * @example
211
+ * ```
212
+ * overlay.showToaster('Hello World!')
213
+ * overlay.showToaster(<p>Hello World</p>)
214
+ * ```
215
+ * @param message the message to show, can be either a string or React Element.
216
+ * @returns the toaster's id.
217
+ */
218
+ showToaster(message: React.ReactNode): number | string;
219
+ /**
220
+ * Closes the toaster with the specified id.
221
+ * @param id the id of the toaster to close.
222
+ */
223
+ closeToaster: typeof closeReactToaster;
60
224
  }
225
+ /**
226
+ * Manages overlay components of the layout like: modal, rightPanel, bottomDialog and toaster.
227
+ */
61
228
  export declare const overlay: LayoutOverlayManager;
62
229
  export {};
63
230
  //# sourceMappingURL=LayoutOverlayManager.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"LayoutOverlayManager.d.ts","sourceRoot":"","sources":["../src/LayoutOverlayManager.tsx"],"names":[],"mappings":"AAGA,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,WAAW,IAAI,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAG3D,UAAU,YAAa,SAAQ,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,KAAK,mBAAmB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,CAAA;AACvD,KAAK,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC/C,KAAK,SAAS,GAAG,aAAa,GAAG,WAAW,CAAA;AAS5C,UAAU,kBAAkB;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,uBAAuB;IAC/B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAWD,cAAM,oBAAoB;IACxB,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,oBAAoB,CAAA;IAC/C,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,QAAQ,CAAC,CAAgB;IACjC,OAAO,CAAC,YAAY,CAAC,CAAY;IACjC;;OAEG;IACH,OAAO,CAAC,iBAAiB,CAAuB;IAEhD,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,2BAA2B;IAOnC,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,WAAW;IAMnB,WAAW;IAIX,gBAAgB;IAIhB,kBAAkB;IAIlB,eAAe,CAAC,OAAO,EAAE,KAAK,CAAC,YAAY,EAAE,EAAE,IAAe,EAAE,OAAO,EAAE,GAAE,kBAAuB;IAQlG,SAAS,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAAG;QAAE,IAAI,CAAC,EAAE,SAAS,CAAA;KAAE;IAIxE,OAAO,CAAC,UAAU;IAqBlB,OAAO,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,OAAO,EAAE,EAAE,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC;IAKnE,KAAK,CAAC,EAAE,OAAO,EAAE,UAAiB,EAAE,GAAG,OAAO,EAAE,EAAE,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC;IAKpF,gBAAgB,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,mBAAmB,GAAG,OAAO,CAAC,OAAO,CAAC;IAiBrF,oBAAoB,CAAC,OAAO,EAAE,YAAY,EAAE,EAAE,IAAe,EAAE,OAAO,EAAE,GAAE,uBAA4B;IAWtG,cAAc,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAAG;QAAE,IAAI,CAAC,EAAE,WAAW,CAAA;KAAE;IAO/E;;;OAGG;IACH,OAAO,CAAC,sBAAsB;IAK9B,UAAU,CAAC,gBAAgB,UAAO;IAyBlC,eAAe,CAAC,gBAAgB,UAAO;IAyBvC,iBAAiB;IAIjB,aAAa,CAAC,OAAO,EAAE,WAAW;IAIlC,kBAAkB,CAAC,OAAO,EAAE,WAAW;IAIvC,WAAW,0BAAmB;CAC/B;AAED,eAAO,MAAM,OAAO,sBAA6B,CAAA"}
1
+ {"version":3,"file":"LayoutOverlayManager.d.ts","sourceRoot":"","sources":["../src/LayoutOverlayManager.tsx"],"names":[],"mappings":"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"}
@@ -1,14 +1,15 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  /* eslint-disable react-hooks/rules-of-hooks */
3
3
  import { Button } from '@citric/core';
4
+ import { focusAccessibleElement, focusFirstChild } from '@stack-spot/portal-components';
4
5
  import { useLayoutEffect, useState } from 'react';
5
6
  import { Dialog } from './components/Dialog.js';
6
7
  import { CLOSE_OVERLAY_ID, OverlayContent } from './components/OverlayContent.js';
7
8
  import { getDictionary } from './dictionary.js';
8
9
  import { elementIds, getLayoutElements } from './elements.js';
9
10
  import { ElementNotFound, LayoutError } from './errors.js';
10
- import { showToaster as showReactToaster } from './toaster.js';
11
- import { focusAccessibleElement, focusFirstChild, valueOfLayoutVar } from './utils.js';
11
+ import { closeReactToaster, showToaster as showReactToaster } from './toaster.js';
12
+ import { valueOfLayoutVar } from './utils.js';
12
13
  function multipleCallsWarning(type, timeMS) {
13
14
  return `
14
15
  Attempted to show a modal or rightPanel while a ${type} was still being closed. Closing a ${type} takes only ${timeMS}ms, so this action
@@ -46,11 +47,15 @@ class LayoutOverlayManager {
46
47
  writable: true,
47
48
  value: null
48
49
  });
49
- Object.defineProperty(this, "showToaster", {
50
+ /**
51
+ * Closes the toaster with the specified id.
52
+ * @param id the id of the toaster to close.
53
+ */
54
+ Object.defineProperty(this, "closeToaster", {
50
55
  enumerable: true,
51
56
  configurable: true,
52
57
  writable: true,
53
- value: showReactToaster
58
+ value: closeReactToaster
54
59
  });
55
60
  }
56
61
  setupElements() {
@@ -78,8 +83,11 @@ class LayoutOverlayManager {
78
83
  this.setInteractivity(this.elements?.rightPanel, false);
79
84
  this.setInteractivity(this.elements?.bottomDialog, false);
80
85
  }
81
- // this should actually be like Kotlin's "internal", i.e. private to any user of the lib, but public to the lib itself.
82
- // @ts-ignore
86
+ /**
87
+ * Setup the overlay layout elements.
88
+ * @returns the content for the modal, rightPanel and bottomDialog.
89
+ */
90
+ // @ts-ignore: this should actually be like Kotlin's "internal", i.e. private to any user of the lib, but public to the lib itself.
83
91
  useOverlays() {
84
92
  useLayoutEffect(() => {
85
93
  if (!this.elements)
@@ -93,6 +101,11 @@ class LayoutOverlayManager {
93
101
  this.setContent.bottomDialog = setBottomDialog;
94
102
  return { modal, rightPanel, bottomDialog };
95
103
  }
104
+ /**
105
+ * Enables or disables the interactivity of an element.
106
+ * @param element the element to have its interactivity changed.
107
+ * @param interactive false to disable interactivity, true to enable.
108
+ */
96
109
  setInteractivity(element, interactive) {
97
110
  if (interactive) {
98
111
  element?.removeAttribute('inert');
@@ -122,15 +135,33 @@ class LayoutOverlayManager {
122
135
  this.setInteractivity(element, false);
123
136
  this.setMainContentInteractivity(true);
124
137
  }
138
+ /**
139
+ * @returns true if the modal is currently opened. False otherwise.
140
+ */
125
141
  isModalOpen() {
126
142
  return this.elements?.modal?.classList.contains('visible') ?? false;
127
143
  }
144
+ /**
145
+ * @returns true if the right panel is currently opened. False otherwise.
146
+ */
128
147
  isRightPanelOpen() {
129
148
  return this.elements?.rightPanel?.classList.contains('visible') ?? false;
130
149
  }
150
+ /**
151
+ * @returns true if the bottom dialog is currently opened. False otherwise.
152
+ */
131
153
  isBottomDialogOpen() {
132
154
  return this.elements?.bottomDialog?.classList.contains('visible') ?? false;
133
155
  }
156
+ /**
157
+ * Opens a modal with custom content.
158
+ *
159
+ * Attention: the modal state must be declared within the modal. If the state is declared outside the modal, its content won't be updated
160
+ * accordingly. To force an update of an outside state, you need to call `showCustomModal` again with the new state value.
161
+ *
162
+ * @param content a react element with the modal content.
163
+ * @param options the modal options {@link CustomModalOptions}.
164
+ */
134
165
  showCustomModal(content, { size = 'medium', onClose } = {}) {
135
166
  if (!this.elements?.modal)
136
167
  throw new ElementNotFound('modal', elementIds.modal);
@@ -140,6 +171,14 @@ class LayoutOverlayManager {
140
171
  this.setContent.modal(content);
141
172
  this.showOverlay(this.elements.modal, [size]);
142
173
  }
174
+ /**
175
+ * Opens a modal.
176
+ *
177
+ * Attention: the modal state must be declared within the modal. If the state is declared outside the modal, its content won't be updated
178
+ * accordingly. To force an update of an outside state, you need to call `showModal` again with the new state value.
179
+ *
180
+ * @param options the modal options: {@link OverlayContentProps} & { size: {@link ModalSize} }.
181
+ */
143
182
  showModal({ size, ...props }) {
144
183
  this.showCustomModal(_jsx(OverlayContent, { ...props, onClose: () => this.closeModal(), type: "modal" }), { size, onClose: props.onClose });
145
184
  }
@@ -157,24 +196,58 @@ class LayoutOverlayManager {
157
196
  }
158
197
  });
159
198
  }
199
+ /**
200
+ * Shows a confirmation dialog and returns a promise that resolves as soon as the dialog is closed. The result of the promise is true if
201
+ * the user confirms and false otherwise.
202
+ *
203
+ * If you need the user to type something to confirm the action, use the property `validate` in the options parameter.
204
+ * @param options the dialog options: {@link DialogOptions}.
205
+ * @returns a promise that resolves with the user's answer.
206
+ */
160
207
  confirm({ confirm, cancel, ...options }) {
161
208
  const t = getDictionary();
162
209
  return this.showDialog({ ...options, confirm: confirm || t.confirm, cancel: cancel || t.cancel });
163
210
  }
211
+ /**
212
+ * Shows an alert dialog and returns a promise that resolves as soon as the dialog is closed.
213
+ *
214
+ * @param options the dialog options: {@link AlertOptions}.
215
+ * @returns a promise that resolves to undefined as soon as the dialog is closed.
216
+ */
164
217
  async alert({ confirm, showButton = true, ...options }) {
165
218
  const t = getDictionary();
166
219
  await this.showDialog({ ...options, confirm: showButton ? (confirm || t.confirm) : undefined });
167
220
  }
168
- showBottomDialog({ message, cancel, confirm }) {
221
+ /**
222
+ * Shows a message at the bottom of the window and asks the user to confirm or decline it. The return value is a promise that resolves as
223
+ * soon as the user presses one of the buttons. The result of the promise is true if the user confirms and false otherwise.
224
+ *
225
+ * Differently than `confirm` and `alert`, this message can only be closed if the user clicks one of the buttons or `closeBottomDialog`
226
+ * is called.
227
+ *
228
+ * @param options the dialog options: {@link BottomDialogOptions}.
229
+ * @returns a promise that resolves with the user's answer.
230
+ */
231
+ showBottomDialog({ children, cancel, confirm }) {
169
232
  if (!this.elements?.bottomDialog)
170
233
  throw new ElementNotFound('bottom dialog', elementIds.bottomDialog);
171
234
  if (!this.setContent.bottomDialog)
172
235
  throw new LayoutError('unable to show bottom dialog, because it has not been setup yet.');
173
236
  return new Promise((resolve) => {
174
- this.setContent.bottomDialog?.(_jsxs(_Fragment, { children: [message, _jsxs("div", { className: "btn-group", children: [cancel && _jsx(Button, { onClick: () => resolve(false), colorScheme: "light", appearance: "outlined", children: cancel }), confirm && _jsx(Button, { onClick: () => resolve(true), colorScheme: "light", children: confirm })] })] }));
237
+ this.setContent.bottomDialog?.(_jsxs(_Fragment, { children: [children, _jsxs("div", { className: "btn-group", children: [cancel && _jsx(Button, { onClick: () => resolve(false), colorScheme: "light", appearance: "outlined", children: cancel }), confirm && _jsx(Button, { onClick: () => resolve(true), colorScheme: "light", children: confirm })] })] }));
175
238
  this.showOverlay(this.elements?.bottomDialog, undefined, false);
176
239
  });
177
240
  }
241
+ /**
242
+ * Opens a right panel with custom content.
243
+ *
244
+ * Attention: the right panel state must be declared within the right panel. If the state is declared outside the right panel, its content
245
+ * won't be updated accordingly. To force an update of an outside state, you need to call `showCustomRightPanel` again with the new state
246
+ * value.
247
+ *
248
+ * @param content a react element with the modal content.
249
+ * @param options the modal options {@link CustomModalOptions}.
250
+ */
178
251
  showCustomRightPanel(content, { size = 'medium', onClose } = {}) {
179
252
  if (!this.elements?.rightPanel)
180
253
  throw new ElementNotFound('right panel overlay', elementIds.rightPanel);
@@ -187,10 +260,18 @@ class LayoutOverlayManager {
187
260
  this.showOverlay(this.elements?.rightPanel);
188
261
  });
189
262
  }
263
+ /**
264
+ * Opens a right panel.
265
+ *
266
+ * Attention: the right panel state must be declared within the right panel. If the state is declared outside the right panel, its content
267
+ * won't be updated accordingly. To force an update of an outside state, you need to call `showRightPanel` again with the new state value.
268
+ *
269
+ * @param options the modal options: {@link OverlayContentProps} & { size: {@link ModalSize} }.
270
+ */
190
271
  showRightPanel({ size, ...props }) {
191
272
  this.showCustomRightPanel(_jsx(OverlayContent, { ...props, onClose: () => this.closeRightPanel(), type: "panel" }), { size, onClose: props.onClose });
192
273
  }
193
- /**
274
+ /*
194
275
  * Focus the element that had focus before the last overlay was opened. If the element is not visible anymore, another one that makes
195
276
  * sense (accessibility-wise) is focused.
196
277
  */
@@ -198,6 +279,10 @@ class LayoutOverlayManager {
198
279
  focusAccessibleElement(this.lastActiveElement);
199
280
  this.lastActiveElement = null;
200
281
  }
282
+ /**
283
+ * Closes the modal if it's open.
284
+ * @param runCloseListener whether or not to run the function `onClose` passed to `showModal` or `showCustomModal`. Defaults to true.
285
+ */
201
286
  closeModal(runCloseListener = true) {
202
287
  this.elements?.modal?.classList.remove('visible');
203
288
  this.elements?.backdrop?.setAttribute('class', '');
@@ -220,6 +305,11 @@ class LayoutOverlayManager {
220
305
  this.focusLastActiveElement();
221
306
  }, animationMS);
222
307
  }
308
+ /**
309
+ * Closes the right panel if it's open.
310
+ * @param runCloseListener whether or not to run the function `onClose` passed to `showRightPanel` or `showCustomRightPanel`. Defaults to
311
+ * true.
312
+ */
223
313
  closeRightPanel(runCloseListener = true) {
224
314
  this.elements?.rightPanel?.classList.remove('visible');
225
315
  this.elements?.backdrop?.setAttribute('class', '');
@@ -242,15 +332,34 @@ class LayoutOverlayManager {
242
332
  this.focusLastActiveElement();
243
333
  }, animationMS);
244
334
  }
335
+ /**
336
+ * Closes the bottom dialog if it's open.
337
+ */
245
338
  closeBottomDialog() {
246
339
  this.hideOverlay(this.elements?.bottomDialog);
247
340
  }
341
+ /**
342
+ * Verifies if the HTML element passed as parameter is inside the modal.
343
+ * @param element the HTML element to check.
344
+ * @returns true if `element` is inside the modal; false otherwise.
345
+ */
248
346
  isInsideModal(element) {
249
347
  return !!this.elements?.modal?.contains(element);
250
348
  }
349
+ /**
350
+ * Verifies if the HTML element passed as parameter is inside the right panel.
351
+ * @param element the HTML element to check.
352
+ * @returns true if `element` is inside the right panel; false otherwise.
353
+ */
251
354
  isInsideRightPanel(element) {
252
355
  return !!this.elements?.rightPanel?.contains(element);
253
356
  }
357
+ showToaster(options) {
358
+ return showReactToaster(options);
359
+ }
254
360
  }
361
+ /**
362
+ * Manages overlay components of the layout like: modal, rightPanel, bottomDialog and toaster.
363
+ */
255
364
  export const overlay = new LayoutOverlayManager();
256
365
  //# sourceMappingURL=LayoutOverlayManager.js.map