@linzjs/windows 10.3.0 → 11.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 (223) hide show
  1. package/dist/LuiModalAsync/LuiModalAsync.d.ts +14 -0
  2. package/dist/LuiModalAsync/LuiModalAsync.js +45 -0
  3. package/dist/LuiModalAsync/LuiModalAsync.js.map +1 -0
  4. package/dist/LuiModalAsync/LuiModalAsync.scss +0 -1
  5. package/dist/LuiModalAsync/LuiModalAsyncButtonGroup.d.ts +19 -0
  6. package/dist/LuiModalAsync/LuiModalAsyncButtonGroup.js +27 -0
  7. package/dist/LuiModalAsync/LuiModalAsyncButtonGroup.js.map +1 -0
  8. package/dist/LuiModalAsync/LuiModalAsyncContent.d.ts +6 -0
  9. package/dist/LuiModalAsync/LuiModalAsyncContent.js +7 -0
  10. package/dist/LuiModalAsync/LuiModalAsyncContent.js.map +1 -0
  11. package/dist/LuiModalAsync/LuiModalAsyncContext.d.ts +28 -0
  12. package/dist/LuiModalAsync/LuiModalAsyncContext.js +9 -0
  13. package/dist/LuiModalAsync/LuiModalAsyncContext.js.map +1 -0
  14. package/dist/LuiModalAsync/LuiModalAsyncContextProvider.d.ts +54 -0
  15. package/dist/LuiModalAsync/LuiModalAsyncContextProvider.js +160 -0
  16. package/dist/LuiModalAsync/LuiModalAsyncContextProvider.js.map +1 -0
  17. package/dist/LuiModalAsync/LuiModalAsyncHeader.d.ts +15 -0
  18. package/dist/LuiModalAsync/LuiModalAsyncHeader.js +23 -0
  19. package/dist/LuiModalAsync/LuiModalAsyncHeader.js.map +1 -0
  20. package/dist/LuiModalAsync/LuiModalAsyncInstanceContext.d.ts +13 -0
  21. package/dist/LuiModalAsync/LuiModalAsyncInstanceContext.js +13 -0
  22. package/dist/LuiModalAsync/LuiModalAsyncInstanceContext.js.map +1 -0
  23. package/dist/LuiModalAsync/LuiModalAsyncMain.d.ts +5 -0
  24. package/dist/LuiModalAsync/LuiModalAsyncMain.js +6 -0
  25. package/dist/LuiModalAsync/LuiModalAsyncMain.js.map +1 -0
  26. package/dist/LuiModalAsync/index.js +12 -0
  27. package/dist/LuiModalAsync/index.js.map +1 -0
  28. package/dist/LuiModalAsync/useLuiModalPrefab.d.ts +56 -0
  29. package/dist/LuiModalAsync/useLuiModalPrefab.js +118 -0
  30. package/dist/LuiModalAsync/useLuiModalPrefab.js.map +1 -0
  31. package/dist/LuiModalAsync/useLuiModalUpload.d.ts +16 -0
  32. package/dist/LuiModalAsync/useLuiModalUpload.js +34 -0
  33. package/dist/LuiModalAsync/useLuiModalUpload.js.map +1 -0
  34. package/dist/LuiModalAsync/useShowAsyncModal.d.ts +6 -0
  35. package/dist/LuiModalAsync/useShowAsyncModal.js +13 -0
  36. package/dist/LuiModalAsync/useShowAsyncModal.js.map +1 -0
  37. package/dist/common/debug.d.ts +1 -0
  38. package/dist/common/debug.js +11 -0
  39. package/dist/common/debug.js.map +1 -0
  40. package/dist/common/index.js +3 -0
  41. package/dist/common/index.js.map +1 -0
  42. package/dist/common/useConstFunction.d.ts +5 -0
  43. package/dist/common/useConstFunction.js +17 -0
  44. package/dist/common/useConstFunction.js.map +1 -0
  45. package/dist/common/useInterval.d.ts +17 -0
  46. package/dist/common/{useInterval.ts → useInterval.js} +21 -25
  47. package/dist/common/useInterval.js.map +1 -0
  48. package/dist/common/useIsomorphicLayoutEffect.d.ts +17 -0
  49. package/dist/common/{useIsomorphicLayoutEffect.ts → useIsomorphicLayoutEffect.js} +1 -1
  50. package/dist/common/useIsomorphicLayoutEffect.js.map +1 -0
  51. package/dist/common/util.d.ts +3 -0
  52. package/dist/common/util.js +25 -0
  53. package/dist/common/util.js.map +1 -0
  54. package/dist/common/uuid.d.ts +1 -0
  55. package/dist/common/{uuid.ts → uuid.js} +1 -1
  56. package/dist/common/uuid.js.map +1 -0
  57. package/dist/components/CopyableText.d.ts +9 -0
  58. package/dist/components/CopyableText.js +29 -0
  59. package/dist/components/CopyableText.js.map +1 -0
  60. package/dist/components/index.js +2 -0
  61. package/dist/components/index.js.map +1 -0
  62. package/dist/index.js +7 -0
  63. package/dist/index.js.map +1 -0
  64. package/dist/panel/OpenPanelButton.d.ts +8 -0
  65. package/dist/panel/OpenPanelButton.js +11 -0
  66. package/dist/panel/OpenPanelButton.js.map +1 -0
  67. package/dist/panel/Panel.d.ts +10 -0
  68. package/dist/panel/Panel.js +122 -0
  69. package/dist/panel/Panel.js.map +1 -0
  70. package/dist/panel/PanelContext.d.ts +10 -0
  71. package/dist/panel/PanelContext.js +13 -0
  72. package/dist/panel/PanelContext.js.map +1 -0
  73. package/dist/panel/PanelDock.d.ts +5 -0
  74. package/dist/panel/PanelDock.js +9 -0
  75. package/dist/panel/PanelDock.js.map +1 -0
  76. package/dist/panel/PanelHeader.d.ts +15 -0
  77. package/dist/panel/PanelHeader.js +33 -0
  78. package/dist/panel/PanelHeader.js.map +1 -0
  79. package/dist/panel/PanelHeaderButton.d.ts +8 -0
  80. package/dist/panel/PanelHeaderButton.js +16 -0
  81. package/dist/panel/PanelHeaderButton.js.map +1 -0
  82. package/dist/panel/PanelInline.d.ts +10 -0
  83. package/dist/panel/PanelInline.js +26 -0
  84. package/dist/panel/PanelInline.js.map +1 -0
  85. package/dist/panel/PanelInstanceContext.d.ts +21 -0
  86. package/dist/panel/PanelInstanceContext.js +25 -0
  87. package/dist/panel/PanelInstanceContext.js.map +1 -0
  88. package/dist/panel/PanelInstanceContextProvider.d.ts +11 -0
  89. package/dist/panel/PanelInstanceContextProvider.js +50 -0
  90. package/dist/panel/PanelInstanceContextProvider.js.map +1 -0
  91. package/dist/panel/PanelsContext.d.ts +33 -0
  92. package/dist/panel/PanelsContext.js +19 -0
  93. package/dist/panel/PanelsContext.js.map +1 -0
  94. package/dist/panel/PanelsContextProvider.d.ts +12 -0
  95. package/dist/panel/PanelsContextProvider.js +145 -0
  96. package/dist/panel/PanelsContextProvider.js.map +1 -0
  97. package/dist/panel/PopinWIndow.d.ts +11 -0
  98. package/dist/panel/PopinWIndow.js +74 -0
  99. package/dist/panel/PopinWIndow.js.map +1 -0
  100. package/dist/panel/PopoutWindow.d.ts +17 -0
  101. package/dist/panel/PopoutWindow.js +72 -0
  102. package/dist/panel/PopoutWindow.js.map +1 -0
  103. package/dist/panel/generateId.d.ts +6 -0
  104. package/dist/panel/{generateId.ts → generateId.js} +3 -4
  105. package/dist/panel/generateId.js.map +1 -0
  106. package/dist/panel/handleStyleSheetsChanges.d.ts +9 -0
  107. package/dist/panel/handleStyleSheetsChanges.js +65 -0
  108. package/dist/panel/handleStyleSheetsChanges.js.map +1 -0
  109. package/dist/panel/index.js +13 -0
  110. package/dist/panel/index.js.map +1 -0
  111. package/dist/panel/openExternalWindow.d.ts +23 -0
  112. package/dist/panel/openExternalWindow.js +62 -0
  113. package/dist/panel/openExternalWindow.js.map +1 -0
  114. package/dist/panel/types/{PanelPosition.ts → PanelPosition.d.ts} +2 -2
  115. package/dist/panel/types/PanelPosition.js +2 -0
  116. package/dist/panel/types/PanelPosition.js.map +1 -0
  117. package/dist/panel/types/PanelProps.d.ts +19 -0
  118. package/dist/panel/types/PanelProps.js +2 -0
  119. package/dist/panel/types/PanelProps.js.map +1 -0
  120. package/dist/panel/types/{PanelRestoredState.ts → PanelRestoredState.d.ts} +3 -4
  121. package/dist/panel/types/PanelRestoredState.js +2 -0
  122. package/dist/panel/types/PanelRestoredState.js.map +1 -0
  123. package/dist/panel/types/PanelSize.d.ts +8 -0
  124. package/dist/panel/types/PanelSize.js +2 -0
  125. package/dist/panel/types/PanelSize.js.map +1 -0
  126. package/dist/panel/types/{PanelState.ts → PanelState.d.ts} +5 -8
  127. package/dist/panel/types/PanelState.js +2 -0
  128. package/dist/panel/types/PanelState.js.map +1 -0
  129. package/dist/panel/types/{PanelStateOptions.ts → PanelStateOptions.d.ts} +4 -6
  130. package/dist/panel/types/PanelStateOptions.js +2 -0
  131. package/dist/panel/types/PanelStateOptions.js.map +1 -0
  132. package/dist/panel/types/index.js +7 -0
  133. package/dist/panel/types/index.js.map +1 -0
  134. package/dist/panel/usePanelStateHandler.d.ts +8 -0
  135. package/dist/panel/usePanelStateHandler.js +81 -0
  136. package/dist/panel/usePanelStateHandler.js.map +1 -0
  137. package/dist/ribbon/RibbonButton.d.ts +21 -0
  138. package/dist/ribbon/RibbonButton.js +28 -0
  139. package/dist/ribbon/RibbonButton.js.map +1 -0
  140. package/dist/ribbon/RibbonButtonLink.d.ts +12 -0
  141. package/dist/ribbon/RibbonButtonLink.js +11 -0
  142. package/dist/ribbon/RibbonButtonLink.js.map +1 -0
  143. package/dist/ribbon/RibbonButtonOpenPanel.d.ts +5 -0
  144. package/dist/ribbon/RibbonButtonOpenPanel.js +11 -0
  145. package/dist/ribbon/RibbonButtonOpenPanel.js.map +1 -0
  146. package/dist/ribbon/RibbonButtonSlider.d.ts +11 -0
  147. package/dist/ribbon/RibbonButtonSlider.js +28 -0
  148. package/dist/ribbon/RibbonButtonSlider.js.map +1 -0
  149. package/dist/ribbon/RibbonButtonSliderContext.d.ts +25 -0
  150. package/dist/ribbon/RibbonButtonSliderContext.js +25 -0
  151. package/dist/ribbon/RibbonButtonSliderContext.js.map +1 -0
  152. package/dist/ribbon/RibbonContainer.d.ts +10 -0
  153. package/dist/ribbon/RibbonContainer.js +7 -0
  154. package/dist/ribbon/RibbonContainer.js.map +1 -0
  155. package/dist/ribbon/RibbonDeprecated.d.ts +10 -0
  156. package/dist/ribbon/RibbonDeprecated.js +13 -0
  157. package/dist/ribbon/RibbonDeprecated.js.map +1 -0
  158. package/dist/ribbon/RibbonMenu.d.ts +7 -0
  159. package/dist/ribbon/RibbonMenu.js +12 -0
  160. package/dist/ribbon/RibbonMenu.js.map +1 -0
  161. package/dist/ribbon/RibbonMenuOption.d.ts +17 -0
  162. package/dist/ribbon/RibbonMenuOption.js +26 -0
  163. package/dist/ribbon/RibbonMenuOption.js.map +1 -0
  164. package/dist/ribbon/RibbonMenuSeparator.d.ts +2 -0
  165. package/dist/ribbon/RibbonMenuSeparator.js +6 -0
  166. package/dist/ribbon/RibbonMenuSeparator.js.map +1 -0
  167. package/dist/ribbon/RibbonSeparator.d.ts +2 -0
  168. package/dist/ribbon/RibbonSeparator.js +4 -0
  169. package/dist/ribbon/RibbonSeparator.js.map +1 -0
  170. package/dist/ribbon/index.js +12 -0
  171. package/dist/ribbon/index.js.map +1 -0
  172. package/package.json +14 -8
  173. package/dist/LuiModalAsync/LuiModalAsync.tsx +0 -82
  174. package/dist/LuiModalAsync/LuiModalAsyncButtonGroup.tsx +0 -55
  175. package/dist/LuiModalAsync/LuiModalAsyncContent.tsx +0 -9
  176. package/dist/LuiModalAsync/LuiModalAsyncContext.tsx +0 -52
  177. package/dist/LuiModalAsync/LuiModalAsyncContextProvider.tsx +0 -223
  178. package/dist/LuiModalAsync/LuiModalAsyncHeader.tsx +0 -67
  179. package/dist/LuiModalAsync/LuiModalAsyncInstanceContext.ts +0 -24
  180. package/dist/LuiModalAsync/LuiModalAsyncMain.tsx +0 -8
  181. package/dist/LuiModalAsync/useLuiModalPrefab.tsx +0 -227
  182. package/dist/LuiModalAsync/useLuiModalUpload.tsx +0 -79
  183. package/dist/LuiModalAsync/useShowAsyncModal.ts +0 -34
  184. package/dist/common/debug.ts +0 -9
  185. package/dist/common/useConstFunction.ts +0 -22
  186. package/dist/common/util.ts +0 -31
  187. package/dist/components/CopyableText.tsx +0 -58
  188. package/dist/panel/OpenPanelButton.tsx +0 -52
  189. package/dist/panel/Panel.tsx +0 -211
  190. package/dist/panel/PanelContext.ts +0 -22
  191. package/dist/panel/PanelDock.tsx +0 -20
  192. package/dist/panel/PanelHeader.tsx +0 -105
  193. package/dist/panel/PanelHeaderButton.tsx +0 -26
  194. package/dist/panel/PanelInline.tsx +0 -46
  195. package/dist/panel/PanelInstanceContext.ts +0 -44
  196. package/dist/panel/PanelInstanceContextProvider.tsx +0 -75
  197. package/dist/panel/PanelsContext.tsx +0 -56
  198. package/dist/panel/PanelsContextProvider.tsx +0 -220
  199. package/dist/panel/PopinWIndow.tsx +0 -147
  200. package/dist/panel/PopoutWindow.tsx +0 -117
  201. package/dist/panel/handleStyleSheetsChanges.ts +0 -71
  202. package/dist/panel/openExternalWindow.ts +0 -98
  203. package/dist/panel/types/PanelProps.ts +0 -22
  204. package/dist/panel/types/PanelSize.ts +0 -9
  205. package/dist/panel/usePanelStateHandler.tsx +0 -102
  206. package/dist/ribbon/RibbonButton.tsx +0 -112
  207. package/dist/ribbon/RibbonButtonLink.tsx +0 -27
  208. package/dist/ribbon/RibbonButtonOpenPanel.tsx +0 -23
  209. package/dist/ribbon/RibbonButtonSlider.tsx +0 -66
  210. package/dist/ribbon/RibbonButtonSliderContext.tsx +0 -34
  211. package/dist/ribbon/RibbonContainer.tsx +0 -19
  212. package/dist/ribbon/RibbonDeprecated.tsx +0 -27
  213. package/dist/ribbon/RibbonMenu.tsx +0 -25
  214. package/dist/ribbon/RibbonMenuOption.tsx +0 -67
  215. package/dist/ribbon/RibbonMenuSeparator.tsx +0 -5
  216. package/dist/ribbon/RibbonSeparator.tsx +0 -3
  217. /package/dist/LuiModalAsync/{index.ts → index.d.ts} +0 -0
  218. /package/dist/common/{index.ts → index.d.ts} +0 -0
  219. /package/dist/components/{index.ts → index.d.ts} +0 -0
  220. /package/dist/{index.ts → index.d.ts} +0 -0
  221. /package/dist/panel/{index.ts → index.d.ts} +0 -0
  222. /package/dist/panel/types/{index.ts → index.d.ts} +0 -0
  223. /package/dist/ribbon/{index.ts → index.d.ts} +0 -0
@@ -0,0 +1,14 @@
1
+ import '../index.scss';
2
+ import { CSSProperties, PropsWithChildren, ReactElement } from 'react';
3
+ export interface LuiModalAsyncProps {
4
+ className?: string;
5
+ style?: CSSProperties;
6
+ /**
7
+ * Close on clicking overlay
8
+ */
9
+ closeOnOverlayClick?: boolean;
10
+ }
11
+ /**
12
+ * This creates the dialog element.
13
+ */
14
+ export declare const LuiModalAsync: ({ style, className, closeOnOverlayClick, children, }: PropsWithChildren<LuiModalAsyncProps>) => ReactElement;
@@ -0,0 +1,45 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import '../index.scss';
3
+ import clsx from 'clsx';
4
+ import { delay } from 'lodash-es';
5
+ import { useContext, useEffect, useRef } from 'react';
6
+ import { LuiModalAsyncInstanceContext } from './LuiModalAsyncInstanceContext';
7
+ /**
8
+ * This creates the dialog element.
9
+ */
10
+ export const LuiModalAsync = ({ style, className, closeOnOverlayClick, children, }) => {
11
+ const dialogRef = useRef(null);
12
+ const { close } = useContext(LuiModalAsyncInstanceContext);
13
+ // The only way to create a modal dialog is to call showModal, open attribute will not work
14
+ useEffect(() => {
15
+ // Check if it's open already to support .vite hot deploys
16
+ if (!dialogRef.current?.open) {
17
+ dialogRef.current?.showModal?.();
18
+ }
19
+ }, []);
20
+ useEffect(() => {
21
+ // Dialogs auto select the first focusable element, this is in case you don't want that
22
+ // For example we don't want to select the help button by default, so we add data-noautofocus
23
+ delay(() => {
24
+ const d = dialogRef.current;
25
+ if (!d) {
26
+ return;
27
+ }
28
+ const input = (d.querySelectorAll('[data-autofocus]')[0] ??
29
+ d.querySelectorAll('[type=file]')[0] ??
30
+ d.querySelectorAll('button:not([data-noautofocus]),input:not([data-noautofocus])')[0]);
31
+ if (input) {
32
+ input.focus?.();
33
+ if ('select' in input) {
34
+ input.select?.();
35
+ }
36
+ }
37
+ }, 100);
38
+ }, []);
39
+ // You cannot override dialogs position from absolute.
40
+ return className?.includes('storybook') ? (_jsx("div", { className: clsx('LuiModalAsync', className), style: style, children: children })) : (_jsx("dialog", { role: 'dialog', className: clsx('LuiModalAsync', className), style: style, ref: dialogRef, onCancel: (e) => {
41
+ e.preventDefault();
42
+ close();
43
+ }, onClick: (e) => closeOnOverlayClick && e.target === e.currentTarget && close(), children: children }));
44
+ };
45
+ //# sourceMappingURL=LuiModalAsync.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"LuiModalAsync.js","sourceRoot":"","sources":["../../src/LuiModalAsync/LuiModalAsync.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AAEvB,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAClC,OAAO,EAAkD,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEtG,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAW9E;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,KAAK,EACL,SAAS,EACT,mBAAmB,EACnB,QAAQ,GAC8B,EAAgB,EAAE;IACxD,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAElD,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,4BAA4B,CAAC,CAAC;IAE3D,2FAA2F;IAC3F,SAAS,CAAC,GAAG,EAAE;QACb,0DAA0D;QAC1D,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC;YAC7B,SAAS,CAAC,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC;QACnC,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,uFAAuF;QACvF,6FAA6F;QAC7F,KAAK,CAAC,GAAG,EAAE;YACT,MAAM,CAAC,GAAG,SAAS,CAAC,OAAO,CAAC;YAC5B,IAAI,CAAC,CAAC,EAAE,CAAC;gBACP,OAAO;YACT,CAAC;YACD,MAAM,KAAK,GAAG,CAAC,CAAC,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC;gBACtD,CAAC,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;gBACpC,CAAC,CAAC,gBAAgB,CAAC,8DAA8D,CAAC,CAAC,CAAC,CAAC,CAE1E,CAAC;YAEd,IAAI,KAAK,EAAE,CAAC;gBACV,KAAK,CAAC,KAAK,EAAE,EAAE,CAAC;gBAChB,IAAI,QAAQ,IAAI,KAAK,EAAE,CAAC;oBACrB,KAA0B,CAAC,MAAM,EAAE,EAAE,CAAC;gBACzC,CAAC;YACH,CAAC;QACH,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,sDAAsD;IACtD,OAAO,SAAS,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CACxC,cAAK,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,YAC3D,QAAQ,GACL,CACP,CAAC,CAAC,CAAC,CACF,iBACE,IAAI,EAAE,QAAQ,EACd,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,EAC3C,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,SAAS,EACd,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACd,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,KAAK,EAAE,CAAC;QACV,CAAC,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,mBAAmB,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa,IAAI,KAAK,EAAE,YAE7E,QAAQ,GACF,CACV,CAAC;AACJ,CAAC,CAAC"}
@@ -137,7 +137,6 @@ dialog.LuiModalAsync, div.LuiModalAsync {
137
137
  }
138
138
 
139
139
  .lui-button:focus {
140
- // Button focus not showing unless window content has focus
141
140
  outline: form.$input-border-width-thick solid colors.$input-focus;
142
141
  }
143
142
  }
@@ -0,0 +1,19 @@
1
+ import { LuiButtonProps } from '@linzjs/lui/dist/components/LuiButton/LuiButton';
2
+ import { PropsWithChildren } from 'react';
3
+ /**
4
+ * Wrapper for buttons at the bottom of model.
5
+ */
6
+ export declare const LuiModalAsyncButtonGroup: ({ children }: PropsWithChildren<unknown>) => import("react/jsx-runtime").JSX.Element;
7
+ /**
8
+ * Calls model close on click.
9
+ */
10
+ export declare const LuiModalAsyncButtonDismiss: import("react").ForwardRefExoticComponent<Omit<LuiButtonProps & {
11
+ autofocus?: boolean;
12
+ }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
13
+ /**
14
+ * Resolves to value on click, or if onClick is specified calls onClick.
15
+ */
16
+ export declare const LuiModalAsyncButtonContinue: import("react").ForwardRefExoticComponent<Omit<LuiButtonProps & {
17
+ value?: unknown;
18
+ autofocus?: boolean;
19
+ }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
@@ -0,0 +1,27 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { LuiButton } from '@linzjs/lui';
3
+ import { forwardRef, useContext } from 'react';
4
+ import { LuiModalAsyncInstanceContext } from './LuiModalAsyncInstanceContext';
5
+ /**
6
+ * Wrapper for buttons at the bottom of model.
7
+ */
8
+ export const LuiModalAsyncButtonGroup = ({ children }) => (_jsx("div", { className: 'LuiModalAsync-ButtonGroup', children: children }));
9
+ /**
10
+ * Calls model close on click.
11
+ */
12
+ export const LuiModalAsyncButtonDismiss = forwardRef(function LuiModalAsyncButtonDismiss(props, ref) {
13
+ return (_jsx(LuiButton, { ...props, ...(props.level ? {} : { level: 'tertiary' }), ...(props.autofocus ? { buttonProps: { 'data-autofocus': true } } : {}), ref: ref, onClick: useContext(LuiModalAsyncInstanceContext).close, children: props.children }));
14
+ });
15
+ /**
16
+ * Resolves to value on click, or if onClick is specified calls onClick.
17
+ */
18
+ export const LuiModalAsyncButtonContinue = forwardRef(function LuiModalAsyncButtonContinue(props, ref) {
19
+ const { resolve } = useContext(LuiModalAsyncInstanceContext);
20
+ return (_jsx(LuiButton, { ...props, ...(props.level ? {} : { level: 'primary' }), ...(props.autofocus ? { buttonProps: { 'data-autofocus': true } } : {}), ref: ref, onClick: (e) => {
21
+ if (props.onClick)
22
+ props.onClick(e);
23
+ else
24
+ resolve(props.value ?? 'continue');
25
+ }, children: props.children }));
26
+ });
27
+ //# sourceMappingURL=LuiModalAsyncButtonGroup.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"LuiModalAsyncButtonGroup.js","sourceRoot":"","sources":["../../src/LuiModalAsync/LuiModalAsyncButtonGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,EAAE,UAAU,EAAqB,UAAU,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAE9E;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EAAE,QAAQ,EAA8B,EAAE,EAAE,CAAC,CACpF,cAAK,SAAS,EAAE,2BAA2B,YAAG,QAAQ,GAAO,CAC9D,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,UAAU,CAClD,SAAS,0BAA0B,CAAC,KAAK,EAAE,GAAG;IAC5C,OAAO,CACL,KAAC,SAAS,OACJ,KAAK,KACL,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,KAC1C,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACxE,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,UAAU,CAAC,4BAA4B,CAAC,CAAC,KAAK,YAEtD,KAAK,CAAC,QAAQ,GACL,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,UAAU,CAGnD,SAAS,2BAA2B,CAAC,KAAK,EAAE,GAAG;IAC/C,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,4BAA4B,CAAC,CAAC;IAC7D,OAAO,CACL,KAAC,SAAS,OACJ,KAAK,KACL,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,KACzC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACxE,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,IAAI,KAAK,CAAC,OAAO;gBAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;;gBAC/B,OAAO,CAAC,KAAK,CAAC,KAAK,IAAI,UAAU,CAAC,CAAC;QAC1C,CAAC,YAEA,KAAK,CAAC,QAAQ,GACL,CACb,CAAC;AACJ,CAAC,CAAC,CAAC"}
@@ -0,0 +1,6 @@
1
+ import { PropsWithChildren } from 'react';
2
+ /**
3
+ * Wrapper for modal content.
4
+ * Content is the scrollable area.
5
+ */
6
+ export declare const LuiModalAsyncContent: ({ children }: PropsWithChildren<unknown>) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,7 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ /**
3
+ * Wrapper for modal content.
4
+ * Content is the scrollable area.
5
+ */
6
+ export const LuiModalAsyncContent = ({ children }) => (_jsx("div", { className: 'LuiModalAsync-content', children: children }));
7
+ //# sourceMappingURL=LuiModalAsyncContent.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"LuiModalAsyncContent.js","sourceRoot":"","sources":["../../src/LuiModalAsync/LuiModalAsyncContent.tsx"],"names":[],"mappings":";AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAA8B,EAAE,EAAE,CAAC,CAChF,cAAK,SAAS,EAAE,uBAAuB,YAAG,QAAQ,GAAO,CAC1D,CAAC"}
@@ -0,0 +1,28 @@
1
+ import { ComponentProps, MutableRefObject, ReactElement } from 'react';
2
+ export declare const openModalOnAllWindows: import("react").RefObject<HTMLDivElement>;
3
+ /**
4
+ * @param showOnAllWindows If true this modal will show on all windows opened from main window including main window.
5
+ * @param
6
+ */
7
+ export interface ShowModalProps {
8
+ showOnAllWindows?: boolean;
9
+ polledCloseCondition?: () => boolean;
10
+ }
11
+ export type ComponentType = (props: any) => ReactElement;
12
+ /**
13
+ * Promise extended to add the ability to externally resolve dialog.
14
+ */
15
+ export interface PromiseWithResolve<RT> extends Promise<RT> {
16
+ resolve: (value: RT) => void;
17
+ }
18
+ /**
19
+ * Properties passed to the modal component to allow resolving.
20
+ */
21
+ export interface LuiModalAsyncCallback<R> {
22
+ resolve: (result: R | undefined) => void;
23
+ close: () => void;
24
+ }
25
+ export interface LuiModalAsyncContextType {
26
+ showModal: <OR extends HTMLElement | null, PROPS extends LuiModalAsyncCallback<any>, CT extends (props: PROPS) => ReactElement, RT = Parameters<ComponentProps<CT>['resolve']>[0]>(ownerRef: MutableRefObject<OR>, component: CT, args: Omit<ComponentProps<CT>, 'resolve' | 'close'>, showModalProps?: ShowModalProps) => PromiseWithResolve<RT>;
27
+ }
28
+ export declare const LuiModalAsyncContext: import("react").Context<LuiModalAsyncContextType>;
@@ -0,0 +1,9 @@
1
+ import { createContext, createRef } from 'react';
2
+ export const openModalOnAllWindows = createRef();
3
+ export const LuiModalAsyncContext = createContext({
4
+ // eslint-disable-next-line @typescript-eslint/require-await
5
+ showModal: (async () => {
6
+ console.error('Missing LuiModalAsyncContext Provider');
7
+ }),
8
+ });
9
+ //# sourceMappingURL=LuiModalAsyncContext.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"LuiModalAsyncContext.js","sourceRoot":"","sources":["../../src/LuiModalAsync/LuiModalAsyncContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,aAAa,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAC;AAEjG,MAAM,CAAC,MAAM,qBAAqB,GAAG,SAAS,EAAkB,CAAC;AA4CjE,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAA2B;IAC1E,4DAA4D;IAC5D,SAAS,EAAE,CAAC,KAAK,IAAI,EAAE;QACrB,OAAO,CAAC,KAAK,CAAC,uCAAuC,CAAC,CAAC;IACzD,CAAC,CAAqD;CACvD,CAAC,CAAC"}
@@ -0,0 +1,54 @@
1
+ import { MutableRefObject, PropsWithChildren, ReactElement } from 'react';
2
+ import { ShowModalProps } from './LuiModalAsyncContext';
3
+ export interface LuiModalAsyncInstance {
4
+ uuid: string;
5
+ ownerRef: MutableRefObject<HTMLElement | null>;
6
+ componentInstance: ReactElement;
7
+ resolve: (result: any) => void;
8
+ showModalProps?: ShowModalProps;
9
+ }
10
+ /**
11
+ * Provides the ability to show modals using react components without needing useState boilerplate and inline dialogs.
12
+ *
13
+ * To use:
14
+ * <ol>
15
+ * <li>Add this Provider somewhere in your standard providers
16
+ * <pre>
17
+ * <LuiModalAsyncContextProvider>
18
+ * ...children
19
+ * </LuiModalAsyncContextProvider>
20
+ * </pre>
21
+ * </li>
22
+ * <li>Add the modal return type to the element as below, and use the props resolve/close from ModalProps for results.
23
+ * <pre>
24
+ * export interface SomeModalProps extends ModalProps<number> {
25
+ * someProp?: number; // user props
26
+ * }
27
+ *
28
+ * export const SomeModal = ({initialState, resolve, close}: SomeModalProps): ReactElement => {
29
+ * return Modal(
30
+ * <div>
31
+ * Itsa me, I'm a modal
32
+ * <button onClick={close}>Cancel</button>
33
+ * <button onClick={()=>resolve(someProp)}>Save</button>
34
+ * </div>
35
+ * )}
36
+ * }
37
+ * </pre>
38
+ * </li>
39
+ * <li> To show the dialog and get the result...
40
+ * <pre>
41
+ * // Note: modalOwnerRef is only required if you need to support popout windows
42
+ * const { showModal, modalOwnerRef } = useShowAsyncModal();
43
+ * ...
44
+ * const showModal = () => {
45
+ * const result = await showModal(SomeModal, { someProp: 1 });
46
+ * if (!result) return; // modal cancelled
47
+ * }
48
+ *
49
+ * return <button onClick={showModal} ref={modalOwnerRef}>Show Modal!</button>
50
+ * </pre>
51
+ * </li>
52
+ * </ol>
53
+ */
54
+ export declare const LuiModalAsyncContextProvider: ({ children }: PropsWithChildren<unknown>) => ReactElement;
@@ -0,0 +1,160 @@
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useCallback, useEffect, useRef, useState } from 'react';
3
+ import { createPortal } from 'react-dom';
4
+ import { debugLog } from '../common/debug';
5
+ import { LuiModalAsyncContext, openModalOnAllWindows, } from './LuiModalAsyncContext';
6
+ import { LuiModalAsyncInstanceContext } from './LuiModalAsyncInstanceContext';
7
+ import { useInterval } from '../common/useInterval';
8
+ import { v4 } from '../common/uuid';
9
+ /**
10
+ * Provides the ability to show modals using react components without needing useState boilerplate and inline dialogs.
11
+ *
12
+ * To use:
13
+ * <ol>
14
+ * <li>Add this Provider somewhere in your standard providers
15
+ * <pre>
16
+ * <LuiModalAsyncContextProvider>
17
+ * ...children
18
+ * </LuiModalAsyncContextProvider>
19
+ * </pre>
20
+ * </li>
21
+ * <li>Add the modal return type to the element as below, and use the props resolve/close from ModalProps for results.
22
+ * <pre>
23
+ * export interface SomeModalProps extends ModalProps<number> {
24
+ * someProp?: number; // user props
25
+ * }
26
+ *
27
+ * export const SomeModal = ({initialState, resolve, close}: SomeModalProps): ReactElement => {
28
+ * return Modal(
29
+ * <div>
30
+ * Itsa me, I'm a modal
31
+ * <button onClick={close}>Cancel</button>
32
+ * <button onClick={()=>resolve(someProp)}>Save</button>
33
+ * </div>
34
+ * )}
35
+ * }
36
+ * </pre>
37
+ * </li>
38
+ * <li> To show the dialog and get the result...
39
+ * <pre>
40
+ * // Note: modalOwnerRef is only required if you need to support popout windows
41
+ * const { showModal, modalOwnerRef } = useShowAsyncModal();
42
+ * ...
43
+ * const showModal = () => {
44
+ * const result = await showModal(SomeModal, { someProp: 1 });
45
+ * if (!result) return; // modal cancelled
46
+ * }
47
+ *
48
+ * return <button onClick={showModal} ref={modalOwnerRef}>Show Modal!</button>
49
+ * </pre>
50
+ * </li>
51
+ * </ol>
52
+ */
53
+ export const LuiModalAsyncContextProvider = ({ children }) => {
54
+ const [modals, setModals] = useState([]);
55
+ const openWindowsRef = useRef([window]);
56
+ // hook window open for opening dialogs across multiple windows
57
+ useEffect(() => {
58
+ const oldWindowOpen = window.open;
59
+ window.open = (...props) => {
60
+ const r = oldWindowOpen(...props);
61
+ // We don't want to track non app-windows, e.g. help screens
62
+ if (!props[0]) {
63
+ if (r) {
64
+ openWindowsRef.current.push(r);
65
+ }
66
+ }
67
+ return r;
68
+ };
69
+ return () => {
70
+ window.open = oldWindowOpen;
71
+ };
72
+ }, []);
73
+ /**
74
+ * Inserts the modal into the page, and removes once modal has a result.
75
+ * Note: full generic types are provided by the interface. Function def has been simplified here.
76
+ *
77
+ * @param ownerRef Reference to element that opened this dialog such that it works for popout windows.
78
+ * @param Component React component.
79
+ * @param args Arguments for react component.
80
+ */
81
+ const showModal = useCallback((ownerRef, Component,
82
+ // eslint-disable-next-line
83
+ args, showModalProps) => {
84
+ if (!('level' in args)) {
85
+ debugLog(`Show generic modal`, args);
86
+ }
87
+ const uuid = v4();
88
+ // eslint-disable-next-line
89
+ let extResolve;
90
+ // @ts-expect-error promise resolve cast
91
+ // eslint-disable-next-line
92
+ const promise = new Promise((resolve) => {
93
+ extResolve = resolve;
94
+ try {
95
+ // If there are any exceptions the modal won't show
96
+ setModals((modals) => [
97
+ ...modals,
98
+ {
99
+ uuid,
100
+ ownerRef,
101
+ // eslint-disable-next-line
102
+ componentInstance: _jsx(Component, { ...args, resolve: resolve, close: () => resolve(undefined) }),
103
+ resolve,
104
+ showModalProps,
105
+ },
106
+ ]);
107
+ }
108
+ catch (e) {
109
+ console.error(e);
110
+ return;
111
+ }
112
+ }).then((result) => {
113
+ debugLog('Modal resolved result =', JSON.stringify(result));
114
+ return new Promise((resolve) => {
115
+ // Close modal
116
+ setModals((modals) => {
117
+ // Defer resolving to give react a chance to update the view allowing the async event model to run.
118
+ // Just in case the task following this is long-running with non IO code, which will block the event queue.
119
+ setTimeout(() => resolve(result), 10);
120
+ return modals.filter((e) => e.uuid !== uuid);
121
+ });
122
+ });
123
+ });
124
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
125
+ promise.resolve = extResolve;
126
+ return promise;
127
+ }, []);
128
+ /**
129
+ * Check modal is still attached to a window.
130
+ */
131
+ const modalHasView = useCallback((modalInstance) => modalInstance.ownerRef === openModalOnAllWindows || !!modalInstance.ownerRef.current?.ownerDocument.defaultView, []);
132
+ const windowIsOpen = useCallback((w) => !w.closed, []);
133
+ /**
134
+ * Tidy up modals that have closed because of an external window closing
135
+ */
136
+ useInterval(() => {
137
+ const newModals = modals.filter(modalHasView);
138
+ if (newModals.length !== modals.length) {
139
+ setModals(newModals);
140
+ }
141
+ // We could do this with window close listeners, but they are unreliable
142
+ openWindowsRef.current = openWindowsRef.current.filter((w) => !w.closed);
143
+ newModals.forEach((modalInstance) => {
144
+ if (modalInstance.showModalProps?.polledCloseCondition?.()) {
145
+ modalInstance.resolve(undefined);
146
+ }
147
+ });
148
+ }, 500);
149
+ const portalOwners = (modalInstance) => modalInstance.ownerRef == openModalOnAllWindows
150
+ ? openWindowsRef.current.filter(windowIsOpen).map((frame) => frame.document.body)
151
+ : [(modalInstance.ownerRef.current?.ownerDocument ?? document).body];
152
+ return (_jsxs(LuiModalAsyncContext.Provider, { value: {
153
+ showModal,
154
+ }, children: [_jsx(_Fragment, { children: modals.filter(modalHasView).map((modalInstance) => (_jsx(LuiModalAsyncInstanceContext.Provider, { value: {
155
+ ownerRef: modalInstance.ownerRef,
156
+ close: () => modalInstance.resolve(undefined),
157
+ resolve: modalInstance.resolve,
158
+ }, children: portalOwners(modalInstance).map((element) => createPortal(_jsx(_Fragment, { children: modalInstance.componentInstance }), element)) }, modalInstance.uuid))) }), _jsx(_Fragment, { children: children })] }));
159
+ };
160
+ //# sourceMappingURL=LuiModalAsyncContextProvider.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"LuiModalAsyncContextProvider.js","sourceRoot":"","sources":["../../src/LuiModalAsync/LuiModalAsyncContextProvider.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,15 @@
1
+ import '../index.scss';
2
+ import { LuiIconName } from '@linzjs/lui/dist/assets/svg-content';
3
+ import { PropsWithChildren, ReactElement } from 'react';
4
+ export interface LuiModalAsyncHeaderProps {
5
+ icon?: LuiIconName | ReactElement | null;
6
+ title: string;
7
+ closeButton?: true;
8
+ helpLink?: string;
9
+ onHelpClick?: () => void;
10
+ helpButtonLevel?: 'text' | 'plain-text' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'error';
11
+ }
12
+ /**
13
+ * Generic modal header.
14
+ */
15
+ export declare const LuiModalAsyncHeader: ({ icon, title, closeButton, helpLink, onHelpClick, helpButtonLevel, }: PropsWithChildren<LuiModalAsyncHeaderProps>) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,23 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import '../index.scss';
3
+ import { LuiButton, LuiIcon } from '@linzjs/lui';
4
+ import { useContext, useLayoutEffect, useState } from 'react';
5
+ import { PanelHeaderButton } from '../panel';
6
+ import { LuiModalAsyncInstanceContext } from './LuiModalAsyncInstanceContext';
7
+ /**
8
+ * Generic modal header.
9
+ */
10
+ export const LuiModalAsyncHeader = ({ icon, title, closeButton, helpLink, onHelpClick, helpButtonLevel, }) => {
11
+ const { ownerRef, close } = useContext(LuiModalAsyncInstanceContext);
12
+ const [disabled, setDisabled] = useState(true);
13
+ // Dialogs auto focus buttons even when flagged not to
14
+ // On initial display the header buttons are disable to prevent this
15
+ useLayoutEffect(() => {
16
+ void setDisabled(false);
17
+ }, []);
18
+ return (_jsxs("div", { className: 'LuiModalAsync-header', children: [icon &&
19
+ (typeof icon === 'string' ? (_jsx(LuiIcon, { name: icon, alt: 'icon', size: 'md', className: `LuiModalAsync-header-icon LuiModalAsync-header-icon-${icon}` })) : (icon)), _jsx("h4", { children: title }), (helpLink || onHelpClick) && (_jsx(LuiButton, { type: 'button', level: helpButtonLevel || 'plain-text', "aria-label": 'Help', title: 'Help', className: 'lui-button-icon-only', disabled: disabled, buttonProps: { 'data-noautofocus': true, tabIndex: -1 }, onClick: helpLink
20
+ ? () => (ownerRef.current?.ownerDocument?.defaultView ?? window).open(helpLink, '_blank')
21
+ : onHelpClick, children: _jsx(LuiIcon, { name: "ic_help_outline", alt: "Help", size: "md", className: 'LuiModalAsync-help-icon' }) })), closeButton && _jsx(PanelHeaderButton, { "aria-label": 'Close', onClick: close, icon: 'ic_clear' })] }));
22
+ };
23
+ //# sourceMappingURL=LuiModalAsyncHeader.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"LuiModalAsyncHeader.js","sourceRoot":"","sources":["../../src/LuiModalAsync/LuiModalAsyncHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,EAAmC,UAAU,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE/F,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAY9E;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAClC,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,WAAW,EACX,eAAe,GAC6B,EAAE,EAAE;IAChD,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,4BAA4B,CAAC,CAAC;IACrE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE/C,sDAAsD;IACtD,oEAAoE;IACpE,eAAe,CAAC,GAAG,EAAE;QACnB,KAAK,WAAW,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,eAAK,SAAS,EAAE,sBAAsB,aACnC,IAAI;gBACH,CAAC,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC1B,KAAC,OAAO,IACN,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,uDAAuD,IAAI,EAAE,GACxE,CACH,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAC,EACJ,uBAAK,KAAK,GAAM,EACf,CAAC,QAAQ,IAAI,WAAW,CAAC,IAAI,CAC5B,KAAC,SAAS,IACR,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,eAAe,IAAI,YAAY,gBAC1B,MAAM,EAClB,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,sBAAsB,EACjC,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,EACvD,OAAO,EACL,QAAQ;oBACN,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,QAAQ,CAAC,OAAO,EAAE,aAAa,EAAE,WAAW,IAAI,MAAM,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC;oBACzF,CAAC,CAAC,WAAW,YAGjB,KAAC,OAAO,IAAC,IAAI,EAAC,iBAAiB,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAE,yBAAyB,GAAI,GACnF,CACb,EACA,WAAW,IAAI,KAAC,iBAAiB,kBAAa,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,GAAI,IACxF,CACP,CAAC;AACJ,CAAC,CAAC"}
@@ -0,0 +1,13 @@
1
+ import { MutableRefObject } from 'react';
2
+ /**
3
+ * Actions that can be taken from within the modal via instance context
4
+ */
5
+ export interface LuiModalAsyncInstanceContextType {
6
+ ownerRef: MutableRefObject<HTMLElement | null>;
7
+ close: () => void;
8
+ resolve: (value: any) => void;
9
+ }
10
+ /**
11
+ * Provides access to resolving/closing to modal elements.
12
+ */
13
+ export declare const LuiModalAsyncInstanceContext: import("react").Context<LuiModalAsyncInstanceContextType>;
@@ -0,0 +1,13 @@
1
+ import { createContext } from 'react';
2
+ const NoContextError = () => {
3
+ console.error('Missing LuiModalAsyncInstanceContext Provider');
4
+ };
5
+ /**
6
+ * Provides access to resolving/closing to modal elements.
7
+ */
8
+ export const LuiModalAsyncInstanceContext = createContext({
9
+ ownerRef: { current: null },
10
+ close: NoContextError,
11
+ resolve: NoContextError,
12
+ });
13
+ //# sourceMappingURL=LuiModalAsyncInstanceContext.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"LuiModalAsyncInstanceContext.js","sourceRoot":"","sources":["../../src/LuiModalAsync/LuiModalAsyncInstanceContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAoB,MAAM,OAAO,CAAC;AAYxD,MAAM,cAAc,GAAG,GAAG,EAAE;IAC1B,OAAO,CAAC,KAAK,CAAC,+CAA+C,CAAC,CAAC;AACjE,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,aAAa,CAAmC;IAC1F,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;IAC3B,KAAK,EAAE,cAAc;IACrB,OAAO,EAAE,cAAc;CACxB,CAAC,CAAC"}
@@ -0,0 +1,5 @@
1
+ import { PropsWithChildren } from 'react';
2
+ /**
3
+ * Wraps the content and header. This is just to match the way figma is arranged.
4
+ */
5
+ export declare const LuiModalAsyncMain: ({ children }: PropsWithChildren<unknown>) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,6 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ /**
3
+ * Wraps the content and header. This is just to match the way figma is arranged.
4
+ */
5
+ export const LuiModalAsyncMain = ({ children }) => (_jsx("div", { className: 'LuiModalAsync-main', children: children }));
6
+ //# sourceMappingURL=LuiModalAsyncMain.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"LuiModalAsyncMain.js","sourceRoot":"","sources":["../../src/LuiModalAsync/LuiModalAsyncMain.tsx"],"names":[],"mappings":";AAEA;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,QAAQ,EAA8B,EAAE,EAAE,CAAC,CAC7E,cAAK,SAAS,EAAE,oBAAoB,YAAG,QAAQ,GAAO,CACvD,CAAC"}
@@ -0,0 +1,12 @@
1
+ export * from './LuiModalAsync';
2
+ export * from './LuiModalAsyncButtonGroup';
3
+ export * from './LuiModalAsyncContent';
4
+ export * from './LuiModalAsyncContext';
5
+ export * from './LuiModalAsyncContextProvider';
6
+ export * from './LuiModalAsyncHeader';
7
+ export * from './LuiModalAsyncInstanceContext';
8
+ export * from './LuiModalAsyncMain';
9
+ export * from './useLuiModalPrefab';
10
+ export * from './useLuiModalUpload';
11
+ export * from './useShowAsyncModal';
12
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/LuiModalAsync/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uBAAuB,CAAC;AACtC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC"}
@@ -0,0 +1,56 @@
1
+ import { LuiButtonProps } from '@linzjs/lui/dist/components/LuiButton/LuiButton';
2
+ import { IconName } from '@linzjs/lui/dist/components/LuiIcon/LuiIcon';
3
+ import { PropsWithChildren, ReactElement } from 'react';
4
+ import { LuiModalAsyncProps } from './LuiModalAsync';
5
+ import { LuiModalAsyncCallback, PromiseWithResolve } from './LuiModalAsyncContext';
6
+ export type PrefabType = 'outline' | 'success' | 'info' | 'warning' | 'error' | 'progress' | 'blocked';
7
+ export interface LuiModalAsyncPrefabButton<RT> {
8
+ default?: boolean;
9
+ level?: LuiButtonProps['level'] | 'secondary-error';
10
+ title: string;
11
+ icon?: IconName;
12
+ value?: RT;
13
+ }
14
+ export interface useLuiModalPrefabProps<RT = string> extends LuiModalAsyncProps {
15
+ showOnAllWindows?: boolean;
16
+ level: PrefabType;
17
+ title: string;
18
+ helpLink?: string;
19
+ onHelpClick?: () => void;
20
+ buttons?: LuiModalAsyncPrefabButton<RT>[];
21
+ dontShowAgainSessionKey?: string;
22
+ polledCloseCondition?: () => boolean;
23
+ }
24
+ export interface LuiModalAsyncPrefabProps<RT> extends useLuiModalPrefabProps<RT>, LuiModalAsyncCallback<RT> {
25
+ }
26
+ export declare const getIconForLevel: (level: PrefabType) => IconName | "custom_progress" | null;
27
+ export declare const LuiModalDontShowSessionSet: (userKey: string) => void;
28
+ export declare const LuiModalDontShowSessionRemove: (userKey: string) => void;
29
+ export declare const LuiModalDontShowSessionCheck: (userKey: string) => boolean;
30
+ /**
31
+ * A generic template for common types of modals.
32
+ */
33
+ export declare const LuiModalPrefab: (props: PropsWithChildren<LuiModalAsyncPrefabProps<unknown>>) => ReactElement;
34
+ /**
35
+ * Instantiate a generic template for common types of modals.
36
+ *
37
+ * Usage:
38
+ * const { modalOwnerRef, showPrefabModal } = useLuiModalPrefab();
39
+ *
40
+ * return (
41
+ * <button
42
+ * ref={modalOwnerRef}
43
+ * onClick={() =>
44
+ * showPrefabModal({
45
+ * level: 'info',
46
+ * title: 'You are a fantastic person',
47
+ * children: 'Keep it up!',
48
+ * })
49
+ * }>
50
+ * Open Modal
51
+ * </button>
52
+ */
53
+ export declare const useLuiModalPrefab: () => {
54
+ modalOwnerRef: import("react").MutableRefObject<any>;
55
+ showPrefabModal: <RT = string>(props: PropsWithChildren<useLuiModalPrefabProps<RT>>) => PromiseWithResolve<RT>;
56
+ };