@linzjs/windows 4.1.3 → 5.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 (41) hide show
  1. package/dist/LuiModalAsync/LuiModalAsync.scss +1 -1
  2. package/dist/LuiModalAsync/LuiModalAsync.tsx +17 -13
  3. package/dist/LuiModalAsync/LuiModalAsyncButtonGroup.tsx +12 -12
  4. package/dist/LuiModalAsync/LuiModalAsyncContent.tsx +2 -2
  5. package/dist/LuiModalAsync/LuiModalAsyncContext.tsx +10 -7
  6. package/dist/LuiModalAsync/LuiModalAsyncContextProvider.tsx +25 -16
  7. package/dist/LuiModalAsync/LuiModalAsyncHeader.tsx +18 -18
  8. package/dist/LuiModalAsync/LuiModalAsyncInstanceContext.ts +3 -2
  9. package/dist/LuiModalAsync/LuiModalAsyncMain.tsx +2 -2
  10. package/dist/LuiModalAsync/index.ts +10 -10
  11. package/dist/LuiModalAsync/useLuiModalPrefab.tsx +50 -49
  12. package/dist/LuiModalAsync/useShowAsyncModal.ts +6 -4
  13. package/dist/common/index.ts +1 -1
  14. package/dist/common/useConstFunction.ts +1 -1
  15. package/dist/index.ts +4 -4
  16. package/dist/panel/OpenPanelButton.tsx +4 -3
  17. package/dist/panel/OpenPanelIcon.scss +3 -4
  18. package/dist/panel/OpenPanelIcon.tsx +12 -12
  19. package/dist/panel/Panel.scss +6 -6
  20. package/dist/panel/Panel.tsx +18 -17
  21. package/dist/panel/PanelBlue.scss +3 -3
  22. package/dist/panel/PanelContext.ts +4 -3
  23. package/dist/panel/PanelDock.tsx +6 -5
  24. package/dist/panel/PanelHeader.tsx +25 -25
  25. package/dist/panel/PanelHeaderButton.tsx +8 -8
  26. package/dist/panel/PanelInstanceContext.ts +5 -5
  27. package/dist/panel/PanelInstanceContextProvider.tsx +6 -5
  28. package/dist/panel/PanelsContext.tsx +5 -4
  29. package/dist/panel/PanelsContextProvider.tsx +12 -11
  30. package/dist/panel/PopinWIndow.tsx +23 -22
  31. package/dist/panel/PopoutWindow.tsx +18 -17
  32. package/dist/panel/generateId.ts +12 -12
  33. package/dist/panel/handleStyleSheetsChanges.ts +7 -7
  34. package/dist/panel/index.ts +12 -13
  35. package/dist/panel/types/PanelProps.ts +5 -4
  36. package/dist/panel/types/PanelRestoredState.ts +2 -2
  37. package/dist/panel/types/PanelState.ts +3 -3
  38. package/dist/panel/types/PanelStateOptions.ts +3 -3
  39. package/dist/panel/types/index.ts +6 -6
  40. package/dist/panel/usePanelStateHandler.tsx +12 -11
  41. package/package.json +47 -66
@@ -1,4 +1,4 @@
1
- @use "node_modules/@linzjs/lui/dist/scss/Core" as lui;
1
+ @use "@linzjs/lui/dist/scss/Core" as lui;
2
2
 
3
3
  dialog.LuiModalAsync::backdrop {
4
4
  background: rgb(0 0 0 / 10%);
@@ -1,12 +1,12 @@
1
- import "./LuiModalAsync.scss";
2
- import "@linzjs/lui/dist/scss/base.scss";
1
+ import './LuiModalAsync.scss';
2
+ import '@linzjs/lui/dist/scss/base.scss';
3
+ import '@linzjs/lui/dist/fonts';
3
4
 
4
- import { LuiModalAsyncInstanceContext } from "./LuiModalAsyncInstanceContext";
5
- import clsx from "clsx";
6
- import { delay } from "lodash";
7
- import React, { CSSProperties, PropsWithChildren, ReactElement, useContext, useEffect, useRef } from "react";
5
+ import clsx from 'clsx';
6
+ import { delay } from 'lodash';
7
+ import React, { CSSProperties, PropsWithChildren, ReactElement, useContext, useEffect, useRef } from 'react';
8
8
 
9
- import "@linzjs/lui/dist/fonts";
9
+ import { LuiModalAsyncInstanceContext } from './LuiModalAsyncInstanceContext';
10
10
 
11
11
  export interface LuiModalAsyncProps {
12
12
  className?: string;
@@ -42,25 +42,29 @@ export const LuiModalAsync = ({
42
42
  delay(() => {
43
43
  const d = dialogRef.current;
44
44
  if (!d) return;
45
- let input = d.querySelectorAll("[data-autofocus]")[0] as any;
45
+ let input = d.querySelectorAll('[data-autofocus]')[0] as HTMLElement | undefined;
46
46
  if (!input) {
47
- input = d.querySelectorAll("button:not([data-noautofocus]),input:not([data-noautofocus])")[0] as any;
47
+ input = d.querySelectorAll('button:not([data-noautofocus]),input:not([data-noautofocus])')[0] as
48
+ | HTMLElement
49
+ | undefined;
48
50
  }
49
51
  if (input) {
50
52
  input.focus?.();
51
- input.select?.();
53
+ if ('select' in input) {
54
+ (input as HTMLInputElement).select?.();
55
+ }
52
56
  }
53
57
  }, 100);
54
58
  }, []);
55
59
 
56
60
  // You cannot override dialogs position from absolute.
57
- return className?.includes("storybook") ? (
58
- <div className={clsx("LuiModalAsync", className)} style={style}>
61
+ return className?.includes('storybook') ? (
62
+ <div className={clsx('LuiModalAsync', className)} style={style}>
59
63
  {children}
60
64
  </div>
61
65
  ) : (
62
66
  <dialog
63
- className={clsx("LuiModalAsync", className)}
67
+ className={clsx('LuiModalAsync', className)}
64
68
  style={style}
65
69
  ref={dialogRef}
66
70
  onCancel={(e) => {
@@ -1,14 +1,14 @@
1
- import { LuiModalAsyncInstanceContext } from "./LuiModalAsyncInstanceContext";
2
- import React, { PropsWithChildren, useContext } from "react";
1
+ import { LuiButton } from '@linzjs/lui';
2
+ import { LuiButtonProps } from '@linzjs/lui/dist/components/LuiButton/LuiButton';
3
+ import React, { PropsWithChildren, useContext } from 'react';
3
4
 
4
- import { LuiButton } from "@linzjs/lui";
5
- import { LuiButtonProps } from "@linzjs/lui/dist/components/LuiButton/LuiButton";
5
+ import { LuiModalAsyncInstanceContext } from './LuiModalAsyncInstanceContext';
6
6
 
7
7
  /**
8
8
  * Wrapper for buttons at the bottom of model.
9
9
  */
10
10
  export const LuiModalAsyncButtonGroup = ({ children }: PropsWithChildren<unknown>) => (
11
- <div className={"LuiModalAsync-ButtonGroup"}>{children}</div>
11
+ <div className={'LuiModalAsync-ButtonGroup'}>{children}</div>
12
12
  );
13
13
 
14
14
  /**
@@ -19,8 +19,8 @@ export const LuiModalAsyncButtonDismiss = React.forwardRef<HTMLButtonElement, Lu
19
19
  return (
20
20
  <LuiButton
21
21
  {...props}
22
- {...(props.level ? {} : { level: "tertiary" })}
23
- {...(props.autofocus ? { buttonProps: { "data-autofocus": true } } : {})}
22
+ {...(props.level ? {} : { level: 'tertiary' })}
23
+ {...(props.autofocus ? { buttonProps: { 'data-autofocus': true } } : {})}
24
24
  ref={ref}
25
25
  onClick={useContext(LuiModalAsyncInstanceContext).close}
26
26
  >
@@ -35,18 +35,18 @@ export const LuiModalAsyncButtonDismiss = React.forwardRef<HTMLButtonElement, Lu
35
35
  */
36
36
  export const LuiModalAsyncButtonContinue = React.forwardRef<
37
37
  HTMLButtonElement,
38
- LuiButtonProps & { value?: any; autofocus?: boolean }
38
+ LuiButtonProps & { value?: unknown; autofocus?: boolean }
39
39
  >(function LuiModalAsyncButtonContinue(props, ref) {
40
40
  const { resolve } = useContext(LuiModalAsyncInstanceContext);
41
41
  return (
42
42
  <LuiButton
43
43
  {...props}
44
- {...(props.level ? {} : { level: "primary" })}
45
- {...(props.autofocus ? { buttonProps: { "data-autofocus": true } } : {})}
44
+ {...(props.level ? {} : { level: 'primary' })}
45
+ {...(props.autofocus ? { buttonProps: { 'data-autofocus': true } } : {})}
46
46
  ref={ref}
47
- onClick={async (e) => {
47
+ onClick={(e) => {
48
48
  if (props.onClick) props.onClick(e);
49
- else resolve(props.value ?? "continue");
49
+ else resolve(props.value ?? 'continue');
50
50
  }}
51
51
  >
52
52
  {props.children}
@@ -1,9 +1,9 @@
1
- import React, { PropsWithChildren } from "react";
1
+ import React, { PropsWithChildren } from 'react';
2
2
 
3
3
  /**
4
4
  * Wrapper for modal content.
5
5
  * Content is the scrollable area.
6
6
  */
7
7
  export const LuiModalAsyncContent = ({ children }: PropsWithChildren<unknown>) => (
8
- <div className={"LuiModalAsync-content"}>{children}</div>
8
+ <div className={'LuiModalAsync-content'}>{children}</div>
9
9
  );
@@ -1,4 +1,4 @@
1
- import { ComponentProps, MutableRefObject, ReactElement, createContext, createRef } from "react";
1
+ import { ComponentProps, createContext, createRef, MutableRefObject, ReactElement } from 'react';
2
2
 
3
3
  export const openModalOnAllWindows = createRef<HTMLDivElement>();
4
4
 
@@ -11,7 +11,8 @@ export interface ShowModalProps {
11
11
  polledCloseCondition?: () => boolean;
12
12
  }
13
13
 
14
- export type ComponentType = (props: any) => ReactElement<any, any>;
14
+ // eslint-disable-next-line
15
+ export type ComponentType = (props: any) => ReactElement;
15
16
 
16
17
  /**
17
18
  * Promise extended to add the ability to externally resolve dialog.
@@ -31,19 +32,21 @@ export interface LuiModalAsyncCallback<R> {
31
32
  export interface LuiModalAsyncContextType {
32
33
  showModal: <
33
34
  OR extends HTMLElement | null,
35
+ // eslint-disable-next-line
34
36
  PROPS extends LuiModalAsyncCallback<any>,
35
- CT extends (props: PROPS) => ReactElement<any, any>,
36
- RT = Parameters<ComponentProps<CT>["resolve"]>[0],
37
+ CT extends (props: PROPS) => ReactElement,
38
+ RT = Parameters<ComponentProps<CT>['resolve']>[0],
37
39
  >(
38
40
  ownerRef: MutableRefObject<OR>,
39
41
  component: CT,
40
- args: Omit<ComponentProps<CT>, "resolve" | "close">,
42
+ args: Omit<ComponentProps<CT>, 'resolve' | 'close'>,
41
43
  showModalProps?: ShowModalProps,
42
44
  ) => PromiseWithResolve<RT>;
43
45
  }
44
46
 
45
47
  export const LuiModalAsyncContext = createContext<LuiModalAsyncContextType>({
48
+ // eslint-disable-next-line @typescript-eslint/require-await
46
49
  showModal: (async () => {
47
- console.error("Missing LuiModalAsyncContext Provider");
48
- }) as unknown as LuiModalAsyncContextType["showModal"],
50
+ console.error('Missing LuiModalAsyncContext Provider');
51
+ }) as unknown as LuiModalAsyncContextType['showModal'],
49
52
  });
@@ -1,11 +1,3 @@
1
- import {
2
- ComponentType,
3
- LuiModalAsyncContext,
4
- openModalOnAllWindows,
5
- PromiseWithResolve,
6
- ShowModalProps,
7
- } from "./LuiModalAsyncContext";
8
- import { LuiModalAsyncInstanceContext } from "./LuiModalAsyncInstanceContext";
9
1
  import React, {
10
2
  MutableRefObject,
11
3
  PropsWithChildren,
@@ -14,15 +6,25 @@ import React, {
14
6
  useEffect,
15
7
  useRef,
16
8
  useState,
17
- } from "react";
18
- import { createPortal } from "react-dom";
19
- import { useInterval } from "usehooks-ts";
20
- import { v4 } from "uuid";
9
+ } from 'react';
10
+ import { createPortal } from 'react-dom';
11
+ import { useInterval } from 'usehooks-ts';
12
+ import { v4 } from 'uuid';
13
+
14
+ import {
15
+ ComponentType,
16
+ LuiModalAsyncContext,
17
+ openModalOnAllWindows,
18
+ PromiseWithResolve,
19
+ ShowModalProps,
20
+ } from './LuiModalAsyncContext';
21
+ import { LuiModalAsyncInstanceContext } from './LuiModalAsyncInstanceContext';
21
22
 
22
23
  export interface LuiModalAsyncInstance {
23
24
  uuid: string;
24
25
  ownerRef: MutableRefObject<HTMLElement | null>;
25
26
  componentInstance: ReactElement;
27
+ // eslint-disable-next-line
26
28
  resolve: (result: any) => void;
27
29
  showModalProps?: ShowModalProps;
28
30
  }
@@ -104,12 +106,18 @@ export const LuiModalAsyncContextProvider = ({ children }: PropsWithChildren<unk
104
106
  (
105
107
  ownerRef: MutableRefObject<HTMLElement | null>,
106
108
  Component: ComponentType,
109
+ // eslint-disable-next-line
107
110
  args: any,
108
111
  showModalProps?: ShowModalProps,
109
- ): PromiseWithResolve<any> => {
112
+ ): // eslint-disable-next-line
113
+ PromiseWithResolve<any> => {
110
114
  const uuid = v4();
111
- let extResolve: PromiseWithResolve<any>["resolve"];
112
- const promise = new Promise((resolve) => {
115
+ // eslint-disable-next-line
116
+ let extResolve: PromiseWithResolve<any>['resolve'];
117
+
118
+ // @ts-expect-error promise resolve cast
119
+ // eslint-disable-next-line
120
+ const promise: PromiseWithResolve<any> = new Promise((resolve) => {
113
121
  extResolve = resolve;
114
122
  try {
115
123
  // If there are any exceptions the modal won't show
@@ -118,6 +126,7 @@ export const LuiModalAsyncContextProvider = ({ children }: PropsWithChildren<unk
118
126
  {
119
127
  uuid,
120
128
  ownerRef,
129
+ // eslint-disable-next-line
121
130
  componentInstance: <Component {...args} resolve={resolve} close={() => resolve(undefined)} />,
122
131
  resolve,
123
132
  showModalProps,
@@ -137,7 +146,7 @@ export const LuiModalAsyncContextProvider = ({ children }: PropsWithChildren<unk
137
146
  return modals.filter((e) => e.uuid !== uuid);
138
147
  });
139
148
  });
140
- }) as PromiseWithResolve<any>;
149
+ });
141
150
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
142
151
  promise.resolve = extResolve!;
143
152
  return promise;
@@ -1,17 +1,17 @@
1
- import "./LuiModalAsync.scss";
1
+ import './LuiModalAsync.scss';
2
2
 
3
- import { LuiModalAsyncInstanceContext } from "./LuiModalAsyncInstanceContext";
4
- import React, { PropsWithChildren, ReactElement, useContext } from "react";
3
+ import { LuiButton, LuiIcon } from '@linzjs/lui';
4
+ import { LuiIconName } from '@linzjs/lui/dist/assets/svg-content';
5
+ import React, { PropsWithChildren, ReactElement, useContext } from 'react';
5
6
 
6
- import { LuiButton, LuiIcon } from "@linzjs/lui";
7
- import { LuiIconName } from "@linzjs/lui/dist/assets/svg-content";
7
+ import { LuiModalAsyncInstanceContext } from './LuiModalAsyncInstanceContext';
8
8
 
9
9
  export interface LuiModalAsyncHeaderProps {
10
10
  icon?: LuiIconName | ReactElement;
11
11
  title: string;
12
12
  helpLink?: string;
13
13
  onHelpClick?: () => void;
14
- helpButtonLevel?: "text" | "plain-text" | "primary" | "secondary" | "tertiary" | "success" | "error";
14
+ helpButtonLevel?: 'text' | 'plain-text' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'error';
15
15
  }
16
16
 
17
17
  /**
@@ -27,13 +27,13 @@ export const LuiModalAsyncHeader = ({
27
27
  const { ownerRef } = useContext(LuiModalAsyncInstanceContext);
28
28
 
29
29
  return (
30
- <div className={"LuiModalAsync-header"}>
30
+ <div className={'LuiModalAsync-header'}>
31
31
  {icon &&
32
- (typeof icon === "string" ? (
32
+ (typeof icon === 'string' ? (
33
33
  <LuiIcon
34
34
  name={icon}
35
- alt={"icon"}
36
- size={"md"}
35
+ alt={'icon'}
36
+ size={'md'}
37
37
  className={`LuiModalAsync-header-icon LuiModalAsync-header-icon-${icon}`}
38
38
  />
39
39
  ) : (
@@ -42,19 +42,19 @@ export const LuiModalAsyncHeader = ({
42
42
  <h4>{title}</h4>
43
43
  {(helpLink || onHelpClick) && (
44
44
  <LuiButton
45
- type={"button"}
46
- level={helpButtonLevel || "plain-text"}
47
- aria-label={"Help"}
48
- title={"Help"}
49
- className={"lui-button-icon-only"}
50
- buttonProps={{ "data-noautofocus": true }}
45
+ type={'button'}
46
+ level={helpButtonLevel || 'plain-text'}
47
+ aria-label={'Help'}
48
+ title={'Help'}
49
+ className={'lui-button-icon-only'}
50
+ buttonProps={{ 'data-noautofocus': true }}
51
51
  onClick={
52
52
  helpLink
53
- ? () => (ownerRef.current?.ownerDocument?.defaultView ?? window).open(helpLink, "_blank")
53
+ ? () => (ownerRef.current?.ownerDocument?.defaultView ?? window).open(helpLink, '_blank')
54
54
  : onHelpClick
55
55
  }
56
56
  >
57
- <LuiIcon name="ic_help_outline" alt="Help" size="md" className={"LuiModalAsync-help-icon"} />
57
+ <LuiIcon name="ic_help_outline" alt="Help" size="md" className={'LuiModalAsync-help-icon'} />
58
58
  </LuiButton>
59
59
  )}
60
60
  </div>
@@ -1,4 +1,4 @@
1
- import { MutableRefObject, createContext } from "react";
1
+ import { createContext, MutableRefObject } from 'react';
2
2
 
3
3
  /**
4
4
  * Actions that can be taken from within the modal via instance context
@@ -6,11 +6,12 @@ import { MutableRefObject, createContext } from "react";
6
6
  export interface LuiModalAsyncInstanceContextType {
7
7
  ownerRef: MutableRefObject<HTMLElement | null>;
8
8
  close: () => void;
9
+ // eslint-disable-next-line
9
10
  resolve: (value: any) => void;
10
11
  }
11
12
 
12
13
  const NoContextError = () => {
13
- console.error("Missing LuiModalAsyncInstanceContext Provider");
14
+ console.error('Missing LuiModalAsyncInstanceContext Provider');
14
15
  };
15
16
 
16
17
  /**
@@ -1,8 +1,8 @@
1
- import React, { PropsWithChildren } from "react";
1
+ import React, { PropsWithChildren } from 'react';
2
2
 
3
3
  /**
4
4
  * Wraps the content and header. This is just to match the way figma is arranged.
5
5
  */
6
6
  export const LuiModalAsyncMain = ({ children }: PropsWithChildren<unknown>) => (
7
- <div className={"LuiModalAsync-main"}>{children}</div>
7
+ <div className={'LuiModalAsync-main'}>{children}</div>
8
8
  );
@@ -1,10 +1,10 @@
1
- export * from "./LuiModalAsync";
2
- export * from "./LuiModalAsyncButtonGroup";
3
- export * from "./LuiModalAsyncContent";
4
- export * from "./LuiModalAsyncHeader";
5
- export * from "./LuiModalAsyncMain";
6
- export * from "./LuiModalAsyncContext";
7
- export * from "./LuiModalAsyncContextProvider";
8
- export * from "./LuiModalAsyncInstanceContext";
9
- export * from "./useShowAsyncModal";
10
- export * from "./useLuiModalPrefab";
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 './useShowAsyncModal';
@@ -1,29 +1,29 @@
1
- import { LuiModalAsync, LuiModalAsyncProps } from "./LuiModalAsync";
2
- import { LuiModalAsyncButtonGroup } from "./LuiModalAsyncButtonGroup";
3
- import { LuiModalAsyncContent } from "./LuiModalAsyncContent";
4
- import { LuiModalAsyncCallback, PromiseWithResolve } from "./LuiModalAsyncContext";
5
- import { LuiModalAsyncHeader } from "./LuiModalAsyncHeader";
6
- import { LuiModalAsyncMain } from "./LuiModalAsyncMain";
7
- import { useShowAsyncModal } from "./useShowAsyncModal";
8
- import clsx from "clsx";
9
- import { flatMap } from "lodash";
10
- import React, { PropsWithChildren, ReactElement, useCallback, useMemo, useState } from "react";
11
-
12
- import { LuiButton, LuiCheckboxInput, LuiMiniSpinner } from "@linzjs/lui";
13
- import { LuiButtonProps } from "@linzjs/lui/dist/components/LuiButton/LuiButton";
14
- import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
15
- import { omit, pick } from "lodash-es";
16
-
17
- export type PrefabType = "success" | "info" | "warning" | "error" | "progress" | "blocked";
1
+ import { LuiButton, LuiCheckboxInput, LuiMiniSpinner } from '@linzjs/lui';
2
+ import { LuiButtonProps } from '@linzjs/lui/dist/components/LuiButton/LuiButton';
3
+ import { IconName } from '@linzjs/lui/dist/components/LuiIcon/LuiIcon';
4
+ import clsx from 'clsx';
5
+ import { flatMap } from 'lodash';
6
+ import { omit, pick } from 'lodash-es';
7
+ import React, { PropsWithChildren, ReactElement, useCallback, useMemo, useState } from 'react';
8
+
9
+ import { LuiModalAsync, LuiModalAsyncProps } from './LuiModalAsync';
10
+ import { LuiModalAsyncButtonGroup } from './LuiModalAsyncButtonGroup';
11
+ import { LuiModalAsyncContent } from './LuiModalAsyncContent';
12
+ import { LuiModalAsyncCallback, PromiseWithResolve } from './LuiModalAsyncContext';
13
+ import { LuiModalAsyncHeader } from './LuiModalAsyncHeader';
14
+ import { LuiModalAsyncMain } from './LuiModalAsyncMain';
15
+ import { useShowAsyncModal } from './useShowAsyncModal';
16
+
17
+ export type PrefabType = 'success' | 'info' | 'warning' | 'error' | 'progress' | 'blocked';
18
18
 
19
19
  export interface LuiModalAsyncPrefabButton<RT> {
20
20
  default?: boolean;
21
- level?: LuiButtonProps["level"];
21
+ level?: LuiButtonProps['level'];
22
22
  title: string;
23
23
  value?: RT;
24
24
  }
25
25
 
26
- export interface useLuiModalPrefabProps<RT extends any = string> extends LuiModalAsyncProps {
26
+ export interface useLuiModalPrefabProps<RT = string> extends LuiModalAsyncProps {
27
27
  showOnAllWindows?: boolean;
28
28
  level: PrefabType;
29
29
  title: string;
@@ -38,27 +38,28 @@ export interface LuiModalAsyncPrefabProps<RT> extends useLuiModalPrefabProps<RT>
38
38
  //
39
39
  }
40
40
 
41
- export const getIconForLevel = (level: PrefabType): IconName | "custom_progress" => {
41
+ // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
42
+ export const getIconForLevel = (level: PrefabType): IconName | 'custom_progress' => {
42
43
  switch (level) {
43
- case "success":
44
- return "ic_check_circle_outline";
45
- case "info":
46
- return "ic_info_outline";
47
- case "warning":
48
- return "ic_warning_outline";
49
- case "error":
50
- return "ic_error_outline";
51
- case "progress":
52
- return "custom_progress";
53
- case "blocked":
54
- return "ic_lock_alt";
44
+ case 'success':
45
+ return 'ic_check_circle_outline';
46
+ case 'info':
47
+ return 'ic_info_outline';
48
+ case 'warning':
49
+ return 'ic_warning_outline';
50
+ case 'error':
51
+ return 'ic_error_outline';
52
+ case 'progress':
53
+ return 'custom_progress';
54
+ case 'blocked':
55
+ return 'ic_lock_alt';
55
56
  }
56
57
  };
57
58
 
58
59
  const LuiModalDontShowSessionStorageKey = (userKey: string): string => `__LuiModalContext_dontshowagain_${userKey}`;
59
60
 
60
61
  export const LuiModalDontShowSessionSet = (userKey: string): void =>
61
- window.sessionStorage.setItem(LuiModalDontShowSessionStorageKey(userKey), "true");
62
+ window.sessionStorage.setItem(LuiModalDontShowSessionStorageKey(userKey), 'true');
62
63
 
63
64
  export const LuiModalDontShowSessionRemove = (userKey: string): void =>
64
65
  window.sessionStorage.removeItem(LuiModalDontShowSessionStorageKey(userKey));
@@ -69,9 +70,9 @@ export const LuiModalDontShowSessionCheck = (userKey: string): boolean =>
69
70
  /**
70
71
  * A generic template for common types of modals.
71
72
  */
72
- export const LuiModalPrefab = (props: PropsWithChildren<LuiModalAsyncPrefabProps<any>>): ReactElement => {
73
+ export const LuiModalPrefab = (props: PropsWithChildren<LuiModalAsyncPrefabProps<unknown>>): ReactElement => {
73
74
  const {
74
- level = "warning",
75
+ level = 'warning',
75
76
  className,
76
77
  style,
77
78
  title,
@@ -91,9 +92,9 @@ export const LuiModalPrefab = (props: PropsWithChildren<LuiModalAsyncPrefabProps
91
92
  * Warning, Info, Error, Success: "Dismiss"
92
93
  * Progress: "Cancel"
93
94
  */
94
- const buttons: LuiModalAsyncPrefabButton<any>[] = props.buttons ?? [
95
+ const buttons: LuiModalAsyncPrefabButton<unknown>[] = props.buttons ?? [
95
96
  {
96
- title: level === "progress" ? "Cancel" : "Dismiss",
97
+ title: level === 'progress' ? 'Cancel' : 'Dismiss',
97
98
  },
98
99
  ];
99
100
 
@@ -103,7 +104,7 @@ export const LuiModalPrefab = (props: PropsWithChildren<LuiModalAsyncPrefabProps
103
104
  buttons.forEach((b, i) => {
104
105
  if (!b.level) {
105
106
  // Last button is primary all others are secondary
106
- b.level = i === buttons.length - 1 ? "primary" : "secondary";
107
+ b.level = i === buttons.length - 1 ? 'primary' : 'secondary';
107
108
  }
108
109
  });
109
110
 
@@ -118,23 +119,23 @@ export const LuiModalPrefab = (props: PropsWithChildren<LuiModalAsyncPrefabProps
118
119
 
119
120
  return (
120
121
  <LuiModalAsync
121
- className={clsx("LuiModalPrefab", `LuiModalPrefab-${level}`, className)}
122
+ className={clsx('LuiModalPrefab', `LuiModalPrefab-${level}`, className)}
122
123
  style={style}
123
124
  closeOnOverlayClick={closeOnOverlayClick}
124
125
  >
125
126
  <LuiModalAsyncMain>
126
127
  <LuiModalAsyncHeader
127
128
  title={title}
128
- icon={icon === "custom_progress" ? <LuiMiniSpinner size={24} /> : icon}
129
+ icon={icon === 'custom_progress' ? <LuiMiniSpinner size={24} /> : icon}
129
130
  helpLink={helpLink}
130
131
  onHelpClick={onHelpClick}
131
132
  />
132
133
  <LuiModalAsyncContent>{children}</LuiModalAsyncContent>
133
134
  {dontShowAgainSessionKey && (
134
135
  <LuiCheckboxInput
135
- className={"LuiCheckboxInput--nomargin"}
136
+ className={'LuiCheckboxInput--nomargin'}
136
137
  label={"Don't show me this again"}
137
- value={"dontShowAgain"}
138
+ value={'dontShowAgain'}
138
139
  isChecked={dontShowAgain}
139
140
  onChange={(e) => setDontShowAgain(e.target.checked)}
140
141
  />
@@ -144,12 +145,12 @@ export const LuiModalPrefab = (props: PropsWithChildren<LuiModalAsyncPrefabProps
144
145
  {buttons.map((pf, i) => (
145
146
  <LuiButton
146
147
  key={i}
147
- level={pf.level ?? "secondary"}
148
+ level={pf.level ?? 'secondary'}
148
149
  onClick={() => {
149
150
  setDontShow();
150
151
  resolve(pf.value);
151
152
  }}
152
- buttonProps={pf.default ? { "data-autofocus": true } : undefined}
153
+ buttonProps={pf.default ? { 'data-autofocus': true } : undefined}
153
154
  >
154
155
  {pf.title}
155
156
  </LuiButton>
@@ -182,10 +183,10 @@ export const useLuiModalPrefab = () => {
182
183
  const { showModal, modalOwnerRef } = useShowAsyncModal();
183
184
 
184
185
  const showPrefabModal = useCallback(
185
- <RT extends any = string>(props: PropsWithChildren<useLuiModalPrefabProps<RT>>): PromiseWithResolve<RT> => {
186
- if (typeof props.children === "string") {
186
+ <RT = string,>(props: PropsWithChildren<useLuiModalPrefabProps<RT>>): PromiseWithResolve<RT> => {
187
+ if (typeof props.children === 'string') {
187
188
  // Convert \n to <br/>
188
- const split = props.children.split("\n");
189
+ const split = props.children.split('\n');
189
190
  props.children = flatMap(split.map((part, i) => (i !== split.length - 1 ? [part, <br key={i} />] : part)));
190
191
  }
191
192
  if (
@@ -199,8 +200,8 @@ export const useLuiModalPrefab = () => {
199
200
  }
200
201
  return showModal(
201
202
  LuiModalPrefab,
202
- omit(props, ["showOnAllWindows", "polledCloseCondition"]),
203
- pick(props, ["showOnAllWindows", "polledCloseCondition"]),
203
+ omit(props, ['showOnAllWindows', 'polledCloseCondition']),
204
+ pick(props, ['showOnAllWindows', 'polledCloseCondition']),
204
205
  ) as PromiseWithResolve<RT>;
205
206
  },
206
207
  [showModal],
@@ -1,23 +1,25 @@
1
+ import { ComponentProps, useCallback, useContext, useMemo, useRef } from 'react';
2
+
1
3
  import {
2
4
  ComponentType,
3
5
  LuiModalAsyncContext,
4
6
  openModalOnAllWindows,
5
7
  PromiseWithResolve,
6
8
  ShowModalProps,
7
- } from "./LuiModalAsyncContext";
8
- import { ComponentProps, useCallback, useContext, useMemo, useRef } from "react";
9
+ } from './LuiModalAsyncContext';
9
10
 
10
11
  export const useShowAsyncModal = () => {
11
12
  const { showModal } = useContext(LuiModalAsyncContext);
12
13
 
14
+ // eslint-disable-next-line
13
15
  const modalOwnerRef = useRef<any>(document.body);
14
16
 
15
17
  const showModalAsync = useCallback(
16
18
  <CT extends ComponentType>(
17
19
  component: CT,
18
- args: Omit<ComponentProps<CT>, "resolve" | "close">,
20
+ args: Omit<ComponentProps<CT>, 'resolve' | 'close'>,
19
21
  props?: ShowModalProps,
20
- ): PromiseWithResolve<Parameters<ComponentProps<CT>["resolve"]>[0]> =>
22
+ ): PromiseWithResolve<Parameters<ComponentProps<CT>['resolve']>[0]> =>
21
23
  showModal(props?.showOnAllWindows ? openModalOnAllWindows : modalOwnerRef, component, args, props),
22
24
  [showModal],
23
25
  );
@@ -1 +1 @@
1
- export * from "./useConstFunction";
1
+ export * from './useConstFunction';
@@ -1,4 +1,4 @@
1
- import { useEffect, useRef } from "react";
1
+ import { useEffect, useRef } from 'react';
2
2
 
3
3
  /**
4
4
  * When calling external non-react components, and you can't update the function when state changes,
package/dist/index.ts CHANGED
@@ -1,4 +1,4 @@
1
- export * from "./common";
2
- export * from "./LuiModalAsync";
3
- export * from "./panel";
4
- export * from "./panel/types";
1
+ export * from './common';
2
+ export * from './LuiModalAsync';
3
+ export * from './panel';
4
+ export * from './panel/types';
@@ -1,6 +1,7 @@
1
1
  // Simple button to open panel and show panel state
2
- import { OpenPanelOptions, PanelsContext } from "./PanelsContext";
3
- import { useContext } from "react";
2
+ import { useContext } from 'react';
3
+
4
+ import { OpenPanelOptions, PanelsContext } from './PanelsContext';
4
5
 
5
6
  interface OpenPanelButtonProps extends OpenPanelOptions {
6
7
  uniqueId?: string;
@@ -12,7 +13,7 @@ export const OpenPanelButton = ({ buttonText, uniqueId = buttonText, ...openPane
12
13
 
13
14
  return (
14
15
  <button onClick={() => openPanel({ uniqueId, ...openPanelOptions })}>
15
- Show {buttonText} {openPanels.has(buttonText) ? "(Open)" : ""}
16
+ Show {buttonText} {openPanels.has(buttonText) ? '(Open)' : ''}
16
17
  </button>
17
18
  );
18
19
  };