@linzjs/windows 1.5.2 → 2.0.1

package/dist/LuiModalAsync/LuiModalAsync.scss

@@ -0,0 +1,100 @@
+@use "node_modules/@linzjs/lui/dist/scss/Core" as lui;
+
+dialog.LuiModalAsync::backdrop {
+  background: rgb(0 0 0 / 10%);
+}
+
+dialog.LuiModalAsync, div.LuiModalAsync {
+  @include lui.drop-shadow(sm);
+  border: none;
+  display: flex;
+  flex-direction: column;
+  border-radius: lui.$unit-xs;
+  padding: lui.$unit-md;
+  min-width: 400px;
+  max-width: 80vw;
+  max-height: 80vh;
+  gap: lui.$unit-md;
+
+  &.LuiModalPrefab-success {
+    border-left: lui.$unit-xs solid lui.$success;
+  }
+
+  &.LuiModalPrefab-info {
+    border-left: lui.$unit-xs solid lui.$info;
+  }
+
+  &.LuiModalPrefab-warning {
+    border-left: lui.$unit-xs solid lui.$warning;
+  }
+
+  &.LuiModalPrefab-error {
+    border-left: lui.$unit-xs solid lui.$error;
+  }
+
+  h4 {
+    margin-top: 0;
+  }
+
+  .LuiModalAsync-ButtonGroup {
+    display: flex;
+
+    button {
+      flex: 1;
+      border-color: transparent;
+    }
+  }
+
+  .LuiModalAsync-header {
+    display: flex;
+    gap: lui.$unit-xs;
+
+    flex-direction: row;
+    align-items: center;
+
+    h4 {
+      flex: 1;
+      color: lui.$charcoal;
+    }
+  }
+
+  .LuiModalAsync-main {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: lui.$unit-rg;
+    overflow: hidden;
+  }
+
+  .LuiModalAsync-content {
+    flex: 1;
+    overflow: auto;
+    font-weight: 400;
+  }
+
+  .lui-button:focus {
+    // Button focus not showing unless window content has focus
+    outline: lui.$input-border-width solid lui.$input-focus;
+  }
+
+  .LuiModalAsync-header-icon {
+    fill: lui.$info;
+  }
+
+  .LuiModalAsync-header-icon.LuiModalAsync-header-icon-ic_check_circle_outline {
+    fill: lui.$success;
+  }
+
+  .LuiModalAsync-header-icon.LuiModalAsync-header-icon-ic_warning_outline {
+    fill: lui.$warning;
+  }
+
+  .LuiModalAsync-header-icon.LuiModalAsync-header-icon-ic_info_outline {
+    fill: lui.$info;
+  }
+
+  .LuiModalAsync-header-icon.LuiModalAsync-header-icon-ic_error_outline {
+    fill: lui.$error;
+  }
+}
+

package/dist/LuiModalAsync/LuiModalAsync.tsx

@@ -0,0 +1,75 @@
+import "./LuiModalAsync.scss";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import { LuiModalAsyncInstanceContext } from "./LuiModalAsyncInstanceContext";
+import clsx from "clsx";
+import { delay } from "lodash";
+import React, { CSSProperties, PropsWithChildren, ReactElement, useContext, useEffect, useRef } from "react";
+
+import "@linzjs/lui/dist/fonts";
+
+export interface LuiModalAsyncProps {
+  className?: string;
+  style?: CSSProperties;
+  /**
+   * Close on clicking overlay
+   */
+  closeOnOverlayClick?: boolean;
+}
+
+/**
+ * This creates the dialog element.
+ */
+export const LuiModalAsync = ({
+  style,
+  className,
+  closeOnOverlayClick,
+  children,
+}: PropsWithChildren<LuiModalAsyncProps>): ReactElement => {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  const { close } = useContext(LuiModalAsyncInstanceContext);
+
+  // The only way to create a modal dialog is to call showModal, open attribute will not work
+  useEffect(() => {
+    // Check if it's open already to support .vite hot deploys
+    !dialogRef.current?.open && dialogRef.current?.showModal();
+  }, []);
+
+  useEffect(() => {
+    // Dialogs auto select the first focusable element, this is in case you don't want that
+    // For example we don't want to select the help button by default, so we add data-noautofocus
+    delay(() => {
+      const d = dialogRef.current;
+      if (!d) return;
+      let input = d.querySelectorAll("[data-autofocus]")[0] as any;
+      if (!input) {
+        input = d.querySelectorAll("button:not([data-noautofocus]),input:not([data-noautofocus])")[0] as any;
+      }
+      if (input) {
+        input.focus?.();
+        input.select?.();
+      }
+    }, 100);
+  }, []);
+
+  // You cannot override dialogs position from absolute.
+  return className?.includes("storybook") ? (
+    <div className={clsx("LuiModalAsync", className)} style={style}>
+      {children}
+    </div>
+  ) : (
+    <dialog
+      className={clsx("LuiModalAsync", className)}
+      style={style}
+      ref={dialogRef}
+      onCancel={(e) => {
+        e.preventDefault();
+        close();
+      }}
+      onClick={(e) => closeOnOverlayClick && e.target === e.currentTarget && close()}
+    >
+      {children}
+    </dialog>
+  );
+};

package/dist/LuiModalAsync/LuiModalAsyncButtonGroup.tsx

@@ -0,0 +1,55 @@
+import { LuiModalAsyncInstanceContext } from "./LuiModalAsyncInstanceContext";
+import React, { PropsWithChildren, useContext } from "react";
+
+import { LuiButton } from "@linzjs/lui";
+import { LuiButtonProps } from "@linzjs/lui/dist/components/LuiButton/LuiButton";
+
+/**
+ * Wrapper for buttons at the bottom of model.
+ */
+export const LuiModalAsyncButtonGroup = ({ children }: PropsWithChildren<unknown>) => (
+  <div className={"LuiModalAsync-ButtonGroup"}>{children}</div>
+);
+
+/**
+ * Calls model close on click.
+ */
+export const LuiModalAsyncButtonDismiss = React.forwardRef<HTMLButtonElement, LuiButtonProps & { autofocus?: boolean }>(
+  function LuiModalAsyncButtonDismiss(props, ref) {
+    return (
+      <LuiButton
+        {...props}
+        {...(props.level ? {} : { level: "tertiary" })}
+        {...(props.autofocus ? { buttonProps: { "data-autofocus": true } } : {})}
+        ref={ref}
+        onClick={useContext(LuiModalAsyncInstanceContext).close}
+      >
+        {props.children}
+      </LuiButton>
+    );
+  },
+);
+
+/**
+ * Resolves to value on click, or if onClick is specified calls onClick.
+ */
+export const LuiModalAsyncButtonContinue = React.forwardRef<
+  HTMLButtonElement,
+  LuiButtonProps & { value?: any; autofocus?: boolean }
+>(function LuiModalAsyncButtonContinue(props, ref) {
+  const { resolve } = useContext(LuiModalAsyncInstanceContext);
+  return (
+    <LuiButton
+      {...props}
+      {...(props.level ? {} : { level: "primary" })}
+      {...(props.autofocus ? { buttonProps: { "data-autofocus": true } } : {})}
+      ref={ref}
+      onClick={async (e) => {
+        if (props.onClick) props.onClick(e);
+        else resolve(props.value ?? "continue");
+      }}
+    >
+      {props.children}
+    </LuiButton>
+  );
+});

package/dist/LuiModalAsync/LuiModalAsyncContent.tsx

@@ -0,0 +1,9 @@
+import React, { PropsWithChildren } from "react";
+
+/**
+ * Wrapper for modal content.
+ * Content is the scrollable area.
+ */
+export const LuiModalAsyncContent = ({ children }: PropsWithChildren<unknown>) => (
+  <div className={"LuiModalAsync-content"}>{children}</div>
+);

package/dist/LuiModalAsync/LuiModalAsyncContext.tsx

@@ -0,0 +1,37 @@
+import { ComponentProps, MutableRefObject, ReactElement, createContext } from "react";
+
+export type ComponentType = (props: any) => ReactElement<any, any>;
+
+/**
+ * Promise extended to add the ability to externally resolve dialog.
+ */
+export interface PromiseWithResolve<RT> extends Promise<RT> {
+  resolve: (value: RT) => void;
+}
+
+/**
+ * Properties passed to the modal component to allow resolving.
+ */
+export interface LuiModalAsyncCallback<R> {
+  resolve: (result: R | undefined) => void;
+  close: () => void;
+}
+
+export interface LuiModalAsyncContextType {
+  showModal: <
+    OR extends HTMLElement | null,
+    PROPS extends LuiModalAsyncCallback<any>,
+    CT extends (props: PROPS) => ReactElement<any, any>,
+    RT = Parameters<ComponentProps<CT>["resolve"]>[0],
+  >(
+    ownerRef: MutableRefObject<OR>,
+    component: CT,
+    args: Omit<ComponentProps<CT>, "resolve" | "close">,
+  ) => PromiseWithResolve<RT>;
+}
+
+export const LuiModalAsyncContext = createContext<LuiModalAsyncContextType>({
+  showModal: (async () => {
+    console.error("Missing LuiModalAsyncContext Provider");
+  }) as unknown as LuiModalAsyncContextType["showModal"],
+});

package/dist/{modal/ModalContextProvider.tsx → LuiModalAsync/LuiModalAsyncContextProvider.tsx}

@@ -1,16 +1,13 @@
-import "./ModalContext.scss";
-
-import { useInterval } from "../util/useInterval";
-import { ComponentType, ModalContext } from "./ModalContext";
-import { ModalInstanceContext } from "./ModalInstanceContext";
-import React, { Fragment, ReactNode } from "react";
-import { MutableRefObject, ReactElement, useCallback, useState } from "react";
+import { ComponentType, LuiModalAsyncContext, PromiseWithResolve } from "./LuiModalAsyncContext";
+import { LuiModalAsyncInstanceContext } from "./LuiModalAsyncInstanceContext";
+import React, { MutableRefObject, PropsWithChildren, ReactElement, useCallback, useState } from "react";
 import { createPortal } from "react-dom";
+import { useInterval } from "usehooks-ts";
 import { v4 as makeUuid } from "uuid";
 
-export interface ModalInstance {
+export interface LuiModalAsyncInstance {
   uuid: string;
-  ownerElement: Element | undefined;
+  ownerRef: MutableRefObject<HTMLElement | null>;
   componentInstance: ReactElement;
   resolve: (result: any) => void;
 }
@@ -22,9 +19,9 @@ export interface ModalInstance {
  * <ol>
  * <li>Add this Provider somewhere in your standard providers
  * <pre>
- * <ModalContextProvider>
+ * <LuiModalAsyncContextProvider>
  *    ...children
- * </ModalContextProvider>
+ * </LuiModalAsyncContextProvider>
  * </pre>
  * </li>
  * <li>Add the modal return type to the element as below, and use the props resolve/close from ModalProps for results.
@@ -36,7 +33,7 @@ export interface ModalInstance {
  * export const SomeModal = ({initialState, resolve, close}: SomeModalProps): ReactElement => {
  *    return Modal(
  *       <div>
- *           Itsa me, I'm modal
+ *           Itsa me, I'm a modal
  *          <button onClick={close}>Cancel</button>
  *          <button onClick={()=>resolve(someProp)}>Save</button>
  *       </div>
@@ -59,28 +56,30 @@ export interface ModalInstance {
  * </li>
  * </ol>
  */
-export const ModalContextProvider = ({ children }: { children?: ReactNode | undefined }): ReactElement => {
-  const [modals, setModals] = useState<ModalInstance[]>([]);
+export const LuiModalAsyncContextProvider = ({ children }: PropsWithChildren<unknown>): ReactElement => {
+  const [modals, setModals] = useState<LuiModalAsyncInstance[]>([]);
 
   /**
    * Inserts the modal into the page, and removes once modal has a result.
    * Note: full generic types are provided by the interface.  Function def has been simplified here.
    *
-   * @param ownerRef Reference to div that opened this dialog such that it works for popout windows.
+   * @param ownerRef Reference to element that opened this dialog such that it works for popout windows.
    * @param Component React component.
    * @param args Arguments for react component.
    */
   const showModal = useCallback(
-    async (ownerRef: MutableRefObject<HTMLElement | null>, Component: ComponentType, args: any): Promise<any> => {
+    (ownerRef: MutableRefObject<HTMLElement | null>, Component: ComponentType, args: any): PromiseWithResolve<any> => {
       const uuid = makeUuid();
+      let extResolve: PromiseWithResolve<any>["resolve"];
       const promise = new Promise((resolve) => {
+        extResolve = resolve;
         try {
           // If there are any exceptions the modal won't show
           setModals((modals) => [
             ...modals,
             {
               uuid,
-              ownerElement: ownerRef.current ?? document.body,
+              ownerRef,
               componentInstance: <Component {...args} resolve={resolve} close={() => resolve(undefined)} />,
               resolve,
             },
@@ -89,49 +88,57 @@ export const ModalContextProvider = ({ children }: { children?: ReactNode | unde
           console.error(e);
           return;
         }
-      });
-
-      // Wait for modal to complete
-      const result = await promise;
-
-      // Close modal
-      setModals((modals) => modals.filter((e) => e.uuid !== uuid));
-
-      return result;
+      }).then((result) => {
+        // Close modal
+        setModals((modals) => modals.filter((e) => e.uuid !== uuid));
+        return result;
+      }) as PromiseWithResolve<any>;
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      promise.resolve = extResolve!;
+      return promise;
     },
     [],
   );
 
+  /**
+   * Check modal is still attached to a window.
+   */
   const modalHasView = useCallback(
-    (modalInstance: ModalInstance): boolean => !!modalInstance.ownerElement?.ownerDocument?.defaultView,
+    (modalInstance: LuiModalAsyncInstance): boolean => !!modalInstance.ownerRef.current?.ownerDocument?.defaultView,
     [],
   );
 
-  // Tidy up modals that have closed because of an external window closing
+  /**
+   * Tidy up modals that have closed because of an external window closing
+   */
   useInterval(() => {
     const newModals = modals.filter(modalHasView);
     newModals.length !== modals.length && setModals(newModals);
   }, 500);
 
   return (
-    <ModalContext.Provider
+    <LuiModalAsyncContext.Provider
       value={{
         showModal,
       }}
     >
-      <Fragment key={"modals"}>
-        {modals
-          .filter(modalHasView)
-          .map((modalInstance) =>
-            createPortal(
-              <ModalInstanceContext.Provider value={{ close: () => modalInstance.resolve(undefined) }}>
-                {modalInstance.componentInstance}
-              </ModalInstanceContext.Provider>,
-              (modalInstance.ownerElement?.ownerDocument ?? document).body,
-            ),
-          )}
-      </Fragment>
-      <Fragment key={"children"}>{children}</Fragment>
-    </ModalContext.Provider>
+      <>
+        {modals.filter(modalHasView).map((modalInstance) =>
+          createPortal(
+            <LuiModalAsyncInstanceContext.Provider
+              value={{
+                ownerRef: modalInstance.ownerRef,
+                close: () => modalInstance.resolve(undefined),
+                resolve: modalInstance.resolve,
+              }}
+            >
+              {modalInstance.componentInstance}
+            </LuiModalAsyncInstanceContext.Provider>,
+            (modalInstance.ownerRef.current?.ownerDocument ?? document).body,
+          ),
+        )}
+      </>
+      <>{children}</>
+    </LuiModalAsyncContext.Provider>
   );
 };

package/dist/LuiModalAsync/LuiModalAsyncHeader.tsx

@@ -0,0 +1,58 @@
+import { LuiModalAsyncInstanceContext } from "./LuiModalAsyncInstanceContext";
+import React, { PropsWithChildren, ReactElement, useContext } from "react";
+
+import { LuiButton, LuiIcon } from "@linzjs/lui";
+import { LuiIconName } from "@linzjs/lui/dist/assets/svg-content";
+
+export interface LuiModalAsyncHeaderProps {
+  icon?: LuiIconName | ReactElement;
+  title: string;
+  helpLink?: string;
+  onHelpClick?: () => void;
+}
+
+/**
+ * Generic modal header.
+ */
+export const LuiModalAsyncHeader = ({
+  icon,
+  title,
+  helpLink,
+  onHelpClick,
+}: PropsWithChildren<LuiModalAsyncHeaderProps>) => {
+  const { ownerRef } = useContext(LuiModalAsyncInstanceContext);
+
+  return (
+    <div className={"LuiModalAsync-header"}>
+      {icon &&
+        (typeof icon === "string" ? (
+          <LuiIcon
+            name={icon}
+            alt={"icon"}
+            size={"md"}
+            className={`LuiModalAsync-header-icon LuiModalAsync-header-icon-${icon}`}
+          />
+        ) : (
+          icon
+        ))}
+      <h4>{title}</h4>
+      {(helpLink || onHelpClick) && (
+        <LuiButton
+          type={"button"}
+          level={"plain-text"}
+          aria-label={"Help"}
+          title={"Help"}
+          className={"lui-button-icon-only"}
+          buttonProps={{ "data-noautofocus": true }}
+          onClick={
+            helpLink
+              ? () => (ownerRef.current?.ownerDocument?.defaultView ?? window).open(helpLink, "_blank")
+              : onHelpClick
+          }
+        >
+          <LuiIcon name="ic_help_outline" alt="Help" size="md" />
+        </LuiButton>
+      )}
+    </div>
+  );
+};

package/dist/LuiModalAsync/LuiModalAsyncInstanceContext.ts

@@ -0,0 +1,23 @@
+import { MutableRefObject, createContext } from "react";
+
+/**
+ * Actions that can be taken from within the modal via instance context
+ */
+export interface LuiModalAsyncInstanceContextType {
+  ownerRef: MutableRefObject<HTMLElement | null>;
+  close: () => void;
+  resolve: (value: any) => void;
+}
+
+const NoContextError = () => {
+  console.error("Missing LuiModalAsyncInstanceContext Provider");
+};
+
+/**
+ * Provides access to resolving/closing to modal elements.
+ */
+export const LuiModalAsyncInstanceContext = createContext<LuiModalAsyncInstanceContextType>({
+  ownerRef: { current: null },
+  close: NoContextError,
+  resolve: NoContextError,
+});

package/dist/LuiModalAsync/LuiModalAsyncMain.tsx

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from "react";
+
+/**
+ * Wraps the content and header.  This is just to match the way figma is arranged.
+ */
+export const LuiModalAsyncMain = ({ children }: PropsWithChildren<unknown>) => (
+  <div className={"LuiModalAsync-main"}>{children}</div>
+);

package/dist/LuiModalAsync/index.ts

@@ -0,0 +1,10 @@
+export * from "./LuiModalAsync";
+export * from "./LuiModalAsyncButtonGroup";
+export * from "./LuiModalAsyncContent";
+export * from "./LuiModalAsyncHeader";
+export * from "./LuiModalAsyncMain";
+export * from "./LuiModalAsyncContext";
+export * from "./LuiModalAsyncContextProvider";
+export * from "./LuiModalAsyncInstanceContext";
+export * from "./useShowAsyncModal";
+export * from "./useLuiModalPrefab";

package/dist/LuiModalAsync/useLuiModalPrefab.tsx

@@ -0,0 +1,202 @@
+import { LuiModalAsync, LuiModalAsyncProps } from "./LuiModalAsync";
+import { LuiModalAsyncButtonGroup } from "./LuiModalAsyncButtonGroup";
+import { LuiModalAsyncContent } from "./LuiModalAsyncContent";
+import { LuiModalAsyncCallback, PromiseWithResolve } from "./LuiModalAsyncContext";
+import { LuiModalAsyncHeader } from "./LuiModalAsyncHeader";
+import { LuiModalAsyncMain } from "./LuiModalAsyncMain";
+import { useShowAsyncModal } from "./useShowAsyncModal";
+import clsx from "clsx";
+import { flatMap } from "lodash";
+import React, { PropsWithChildren, ReactElement, useCallback, useMemo, useState } from "react";
+
+import { LuiButton, LuiCheckboxInput, LuiMiniSpinner } from "@linzjs/lui";
+import { LuiButtonProps } from "@linzjs/lui/dist/components/LuiButton/LuiButton";
+import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
+
+export type PrefabType = "success" | "info" | "warning" | "error" | "progress";
+
+export interface LuiModalAsyncPrefabButton<RT> {
+  default?: boolean;
+  level?: LuiButtonProps["level"];
+  title: string;
+  value?: RT;
+}
+
+export interface useLuiModalPrefabProps<RT extends any = string> extends LuiModalAsyncProps {
+  level: PrefabType;
+  title: string;
+  helpLink?: string;
+  onHelpClick?: () => void;
+  buttons?: LuiModalAsyncPrefabButton<RT>[];
+  dontShowAgainSessionKey?: string;
+}
+
+export interface LuiModalAsyncPrefabProps<RT> extends useLuiModalPrefabProps<RT>, LuiModalAsyncCallback<RT> {
+  //
+}
+
+export const getIconForLevel = (level: PrefabType): IconName | "custom_progress" => {
+  switch (level) {
+    case "success":
+      return "ic_check_circle_outline";
+    case "info":
+      return "ic_info_outline";
+    case "warning":
+      return "ic_warning_outline";
+    case "error":
+      return "ic_error_outline";
+    case "progress":
+      return "custom_progress";
+  }
+};
+
+const LuiModalDontShowSessionStorageKey = (userKey: string): string => `__LuiModalContext_dontshowagain_${userKey}`;
+
+export const LuiModalDontShowSessionSet = (userKey: string): void =>
+  window.sessionStorage.setItem(LuiModalDontShowSessionStorageKey(userKey), "true");
+
+export const LuiModalDontShowSessionRemove = (userKey: string): void =>
+  window.sessionStorage.removeItem(LuiModalDontShowSessionStorageKey(userKey));
+
+export const LuiModalDontShowSessionCheck = (userKey: string): boolean =>
+  !!window.sessionStorage.getItem(LuiModalDontShowSessionStorageKey(userKey));
+
+/**
+ * A generic template for common types of modals.
+ */
+export const LuiModalPrefab = (props: PropsWithChildren<LuiModalAsyncPrefabProps<any>>): ReactElement => {
+  const {
+    level = "warning",
+    className,
+    style,
+    title,
+    helpLink,
+    onHelpClick,
+    children,
+    resolve,
+    closeOnOverlayClick,
+    dontShowAgainSessionKey,
+  } = props;
+  const [dontShowAgain, setDontShowAgain] = useState(false);
+
+  const icon = getIconForLevel(level);
+
+  /**
+   * Default buttons
+   * Warning, Info, Error, Success: "Dismiss"
+   * Progress: "Cancel"
+   */
+  const buttons: LuiModalAsyncPrefabButton<any>[] = props.buttons ?? [
+    {
+      title: level === "progress" ? "Cancel" : "Dismiss",
+    },
+  ];
+
+  // If there are two options, option 1 is secondary, option 2 is primary
+  // Otherwise all options are secondary
+  buttons.length === 2 &&
+    buttons.forEach((b, i) => {
+      if (!b.level) {
+        // Last button is primary all others are secondary
+        b.level = i === buttons.length - 1 ? "primary" : "secondary";
+      }
+    });
+
+  /**
+   * When dialog closes save the "don't show" property
+   */
+  const setDontShow = () => {
+    if (dontShowAgainSessionKey && dontShowAgain) {
+      LuiModalDontShowSessionSet(dontShowAgainSessionKey);
+    }
+  };
+
+  return (
+    <LuiModalAsync
+      className={clsx("LuiModalPrefab", `LuiModalPrefab-${level}`, className)}
+      style={style}
+      closeOnOverlayClick={closeOnOverlayClick}
+    >
+      <LuiModalAsyncMain>
+        <LuiModalAsyncHeader
+          title={title}
+          icon={icon === "custom_progress" ? <LuiMiniSpinner size={24} /> : icon}
+          helpLink={helpLink}
+          onHelpClick={onHelpClick}
+        />
+        <LuiModalAsyncContent>{children}</LuiModalAsyncContent>
+        {dontShowAgainSessionKey && (
+          <LuiCheckboxInput
+            className={"LuiCheckboxInput--nomargin"}
+            label={"Don't show me this again"}
+            value={"dontShowAgain"}
+            isChecked={dontShowAgain}
+            onChange={(e) => setDontShowAgain(e.target.checked)}
+          />
+        )}
+      </LuiModalAsyncMain>
+      <LuiModalAsyncButtonGroup>
+        {buttons.map((pf, i) => (
+          <LuiButton
+            key={i}
+            level={pf.level ?? "secondary"}
+            onClick={() => {
+              setDontShow();
+              resolve(pf.value);
+            }}
+            buttonProps={pf.default ? { "data-autofocus": true } : undefined}
+          >
+            {pf.title}
+          </LuiButton>
+        ))}
+      </LuiModalAsyncButtonGroup>
+    </LuiModalAsync>
+  );
+};
+
+/**
+ * Instantiate a generic template for common types of modals.
+ *
+ * Usage:
+ * const { modalOwnerRef, showPrefabModal } = useLuiModalPrefab();
+ *
+ * return (
+ *   <button
+ *     ref={modalOwnerRef}
+ *       onClick={() =>
+ *         showPrefabModal({
+ *           level: 'info',
+ *           title: 'You are a fantastic person',
+ *           children: 'Keep it up!',
+ *         })
+ *   }>
+ *   Open Modal
+ *   </button>
+ */
+export const useLuiModalPrefab = () => {
+  const { showModal, modalOwnerRef } = useShowAsyncModal();
+
+  const showPrefabModal = useCallback(
+    <RT extends any = string>(props: PropsWithChildren<useLuiModalPrefabProps<RT>>) => {
+      if (typeof props.children === "string") {
+        // Convert \n to <br/>
+        const split = props.children.split("\n");
+        props.children = flatMap(split.map((part, i) => (i !== split.length - 1 ? [part, <br key={i} />] : part)));
+      }
+      if (props.dontShowAgainSessionKey && LuiModalDontShowSessionCheck(props.dontShowAgainSessionKey)) {
+        return Promise.resolve(undefined);
+      }
+
+      return showModal(LuiModalPrefab, props) as PromiseWithResolve<RT>;
+    },
+    [showModal],
+  );
+
+  return useMemo(
+    () => ({
+      modalOwnerRef,
+      showPrefabModal,
+    }),
+    [modalOwnerRef, showPrefabModal],
+  );
+};

package/dist/LuiModalAsync/useShowAsyncModal.ts

@@ -0,0 +1,24 @@
+import { ComponentType, LuiModalAsyncContext, PromiseWithResolve } from "./LuiModalAsyncContext";
+import { ComponentProps, useCallback, useContext, useMemo, useRef } from "react";
+
+export const useShowAsyncModal = () => {
+  const { showModal } = useContext(LuiModalAsyncContext);
+
+  const modalOwnerRef = useRef<any>(null);
+
+  const showModalAsync = useCallback(
+    <CT extends ComponentType>(
+      component: CT,
+      args: Omit<ComponentProps<CT>, "resolve" | "close">,
+    ): PromiseWithResolve<Parameters<ComponentProps<CT>["resolve"]>[0]> => showModal(modalOwnerRef, component, args),
+    [showModal],
+  );
+
+  return useMemo(
+    () => ({
+      showModal: showModalAsync,
+      modalOwnerRef,
+    }),
+    [showModalAsync],
+  );
+};

package/dist/index.ts

@@ -1,2 +1,2 @@
-export * from "./modal";
+export * from "./LuiModalAsync";
 export * from "./panel";

package/dist/panel/PanelsContextProvider.tsx

@@ -1,8 +1,8 @@
-import { useInterval } from "../util/useInterval";
 import { PanelInstanceContextProvider } from "./PanelInstanceContextProvider";
 import { PanelInstance, PanelPosition, PanelsContext } from "./PanelsContext";
 import { castArray, maxBy, sortBy } from "lodash-es";
 import React, { Fragment, PropsWithChildren, ReactElement, useCallback, useMemo, useRef, useState } from "react";
+import { useInterval } from "usehooks-ts";
 
 export interface PanelsContextProviderProps {
   baseZIndex?: number;

package/package.json

@@ -13,9 +13,9 @@
     "popout"
   ],
   "main": "./dist/index.ts",
-  "version": "1.5.2",
+  "version": "2.0.1",
   "peerDependencies": {
-    "@linzjs/lui": "^17",
+    "@linzjs/lui": "^18",
     "lodash-es": ">=4",
     "react": ">=17",
     "react-dom": ">=17"
@@ -49,71 +49,72 @@
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@linzjs/lui": "^18",
+    "@linzjs/lui": "^20.0.3",
     "lodash-es": ">=4",
-    "react": ">=17",
-    "react-dom": ">=17",
+    "react": ">=18",
+    "react-dom": ">=18",
     "react-rnd": "^10.4.1",
-    "uuid": "^9.0.0"
+    "usehooks-ts": "^2.9.1",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
-    "@linzjs/step-ag-grid": "^14.10.0",
-    "@rollup/plugin-commonjs": "^25.0.2",
+    "@linzjs/step-ag-grid": "^17.6.1",
+    "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.1.0",
-    "@storybook/addon-docs": "^7.0.26",
-    "@storybook/addon-essentials": "^7.0.26",
-    "@storybook/addon-interactions": "^7.0.26",
-    "@storybook/addon-links": "^7.0.26",
-    "@storybook/blocks": "^7.0.26",
-    "@storybook/builder-webpack5": "^7.0.26",
-    "@storybook/jest": "^0.1.0",
-    "@storybook/preset-create-react-app": "^7.0.26",
-    "@storybook/react": "^7.0.26",
-    "@storybook/react-vite": "^7.0.26",
-    "@storybook/test-runner": "^0.11.0",
-    "@storybook/testing-library": "^0.2.0",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@rollup/plugin-node-resolve": "^15.2.1",
+    "@storybook/addon-docs": "^7.4.5",
+    "@storybook/addon-essentials": "^7.4.5",
+    "@storybook/addon-interactions": "^7.4.5",
+    "@storybook/addon-links": "^7.4.5",
+    "@storybook/addon-mdx-gfm": "^7.4.5",
+    "@storybook/blocks": "^7.4.5",
+    "@storybook/jest": "^0.2.2",
+    "@storybook/preset-create-react-app": "^7.4.5",
+    "@storybook/react": "^7.4.5",
+    "@storybook/react-vite": "^7.4.5",
+    "@storybook/test-runner": "^0.13.0",
+    "@storybook/testing-library": "^0.2.1",
+    "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
-    "@types/jest": "^29.5.2",
-    "@types/lodash-es": "^4.17.7",
-    "@types/node": "^20.4.2",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
-    "@types/uuid": "^9.0.2",
-    "ag-grid-community": "^27.3.0",
-    "ag-grid-react": "^27.3.0",
-    "eslint": "^8.44.0",
-    "eslint-config-prettier": "^8.8.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@trivago/prettier-plugin-sort-imports": "^4.2.0",
+    "@types/jest": "^29.5.5",
+    "@types/lodash-es": "^4.17.9",
+    "@types/node": "^20.7.1",
+    "@types/react": "^18.2.23",
+    "@types/react-dom": "^18.2.8",
+    "@types/uuid": "^9.0.4",
+    "ag-grid-community": "^29.3.5",
+    "ag-grid-react": "^29.3.5",
+    "eslint": "^8.50.0",
+    "eslint-config-prettier": "^8.10.0",
     "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-deprecation": "^1.4.1",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jest": "^27.2.2",
+    "eslint-plugin-deprecation": "^1.6.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jest": "^27.4.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.12",
-    "eslint-plugin-testing-library": "^5.11.0",
-    "jest": "^29.5.0",
+    "eslint-plugin-storybook": "^0.6.14",
+    "eslint-plugin-testing-library": "^5.11.1",
+    "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^29.6.1",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-expect-message": "^1.1.3",
     "mkdirp": "^3.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
     "prop-types": "^15.8.1",
     "react-scripts": "5.0.1",
-    "rollup": "^3.26.2",
-    "rollup-plugin-copy": "^3.4.0",
-    "sass": "^1.63.6",
+    "rollup": "^3.29.3",
+    "rollup-plugin-copy": "^3.5.0",
+    "sass": "^1.68.0",
     "sass-loader": "^13.3.2",
     "semantic-release": "^19.0.5",
-    "storybook": "^7.0.26",
+    "storybook": "^7.4.5",
     "style-loader": "^3.3.3",
     "stylelint": "^14.16.1",
     "stylelint-config-prettier": "^9.0.5",
@@ -122,7 +123,7 @@
     "stylelint-prettier": "3.0.0",
     "stylelint-scss": "5.0.1",
     "typescript": "^4.9.5",
-    "vite": "^4.4.4"
+    "vite": "^4.4.9"
   },
   "eslintConfig": {
     "extends": [

package/dist/modal/Modal.tsx

@@ -1,45 +0,0 @@
-import { ModalInstanceContext } from "./ModalInstanceContext";
-import clsx from "clsx";
-import { delay } from "lodash-es";
-import React, { PropsWithChildren, ReactElement, useContext, useEffect, useRef } from "react";
-
-export interface ModalProps {
-  className?: string;
-}
-
-export const Modal = ({ className, children }: PropsWithChildren<ModalProps>): ReactElement => {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
-  const { close } = useContext(ModalInstanceContext);
-
-  // The only way to create a modal dialog is to call showModal, open attribute will not work
-  useEffect(() => {
-    // Check if it's open already to support .vite hot deploys
-    if (!dialogRef.current?.open) {
-      dialogRef.current?.showModal();
-    }
-  }, []);
-
-  useEffect(() => {
-    // Dialogs auto select the first focusable element, this is in case you don't want that
-    delay(() => {
-      const input = dialogRef.current?.querySelectorAll("[data-autofocus]") as any;
-      input[0]?.focus?.();
-      input?.select?.();
-    }, 100);
-  }, []);
-
-  return (
-    <dialog
-      className={clsx("linzjs-windows-dialog", className)}
-      ref={dialogRef}
-      onClick={(e) => e.target === e.currentTarget && close()}
-      onCancel={(e) => {
-        e.preventDefault();
-        close();
-      }}
-    >
-      {children}
-    </dialog>
-  );
-};

package/dist/modal/ModalContext.scss

@@ -1,11 +0,0 @@
-
-dialog.linzjs-windows-dialog::backdrop {
-  background: rgb(0 0 0 / 60%);
-}
-
-dialog.linzjs-windows-dialog {
-  border: none;
-   display: flex;
-   flex-direction: column;
-   padding: 0;
- }

package/dist/modal/ModalContext.tsx

@@ -1,27 +0,0 @@
-import { ComponentProps, MutableRefObject, ReactElement, createContext } from "react";
-
-export type ComponentType = (props: any) => ReactElement<any, any>;
-
-export interface ModalCallback<R> {
-  resolve: (result: R | undefined) => void;
-  close: () => void;
-}
-
-export interface ModalContextType {
-  showModal: <
-    OR extends HTMLElement | null,
-    PROPS extends ModalCallback<any>,
-    CT extends (props: PROPS) => ReactElement<any, any>,
-    RT = Parameters<Parameters<CT>[0]["resolve"]>[0],
-  >(
-    ownerRef: MutableRefObject<OR>,
-    component: CT,
-    args: Omit<ComponentProps<CT>, "resolve" | "close">,
-  ) => Promise<RT>;
-}
-
-export const ModalContext = createContext<ModalContextType>({
-  showModal: (async () => {
-    console.error("Missing ModalContext Provider");
-  }) as ModalContextType["showModal"],
-});

package/dist/modal/ModalInstanceContext.ts

@@ -1,16 +0,0 @@
-import { createContext } from "react";
-
-export interface ModalInstanceContextType {
-  close: () => void;
-}
-
-const NoContextError = () => {
-  console.error("Missing ModalInstanceContext Provider");
-};
-
-/**
- * Provides access to resolving/closing to modal elements.
- */
-export const ModalInstanceContext = createContext<ModalInstanceContextType>({
-  close: NoContextError,
-});

package/dist/modal/PrefabModal.scss

@@ -1,21 +0,0 @@
-@use "node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars.scss" as colours;
-
-dialog.linzjs-windows-dialog {
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-}
-
-dialog.prefab-modal {
-  border-radius: 5px;
-}
-
-dialog.prefab-modal .lui-modal {
-  margin: 0 !important;
-}
-
-dialog.prefab-modal .lui-button:focus {
-  outline: 2px solid colours.$brand-primary;
-  // make sure the button sits above the others so the outline is not cut off on focus
-  position: relative;
-}

package/dist/modal/PrefabModal.tsx

@@ -1,106 +0,0 @@
-import "./PrefabModal.scss";
-
-import { Modal } from "./Modal";
-import { ModalCallback } from "./ModalContext";
-import { useShowModal } from "./useShowModal";
-import { isEmpty } from "lodash-es";
-import React, { ReactElement } from "react";
-
-import { LuiAlertModalButtons, LuiButton, LuiIcon } from "@linzjs/lui";
-import { LuiButtonProps } from "@linzjs/lui/dist/components/LuiButton/LuiButton";
-import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
-
-export type WarningLevel = "success" | "info" | "warning" | "error";
-
-export interface PrefabButton<RT> {
-  default?: boolean;
-  level?: LuiButtonProps["level"];
-  title: string;
-  value: RT;
-}
-
-export interface PrefabModalProps extends ModalCallback<string | null> {
-  level?: WarningLevel;
-  children: ReactElement;
-  buttons?: PrefabButton<any>[];
-}
-export const getIconForLevel = (level: "success" | "info" | "warning" | "error"): IconName => {
-  switch (level) {
-    case "success":
-      return "ic_check_circle";
-    case "info":
-      return "ic_info";
-    case "warning":
-      return "ic_warning";
-    case "error":
-      return "ic_error";
-  }
-};
-
-export const PrefabModal = ({ level = "warning", children, resolve, ...props }: PrefabModalProps) => {
-  const icon = getIconForLevel(level);
-  const buttons: PrefabButton<any>[] = props.buttons ?? [];
-  if (isEmpty(buttons)) {
-    if (level === "warning") {
-      buttons.push({
-        title: "Cancel",
-        value: null,
-      });
-    }
-    buttons.push({
-      title: "Continue",
-      value: true,
-    });
-  }
-
-  buttons.forEach((b, i) => {
-    if (!b.level) {
-      b.level = i === buttons.length - 1 ? "primary" : "secondary";
-    }
-  });
-
-  return (
-    <Modal className={"prefab-modal"}>
-      <div className={`lui-modal lui-box-shadow lui-modal-${level}`} style={{ minWidth: 400 }}>
-        <LuiIcon name={icon} alt={"warning"} size={"lg"} className={"lui-msg-status-icon"} />
-        {children}
-        <LuiAlertModalButtons>
-          {buttons.map((pf, i) => (
-            <LuiButton
-              key={i}
-              level={pf.level}
-              onClick={() => resolve(pf.value === undefined ? pf.title : pf.value)}
-              buttonProps={pf.default ? { "data-autofocus": true } : undefined}
-            >
-              {pf.title}
-            </LuiButton>
-          ))}
-        </LuiAlertModalButtons>
-      </div>
-    </Modal>
-  );
-};
-
-export const usePrefabModal = () => {
-  const { showModal, modalOwnerRef } = useShowModal();
-  return {
-    modalOwnerRef,
-    showPrefabModal: <RT extends any = boolean>(
-      level: WarningLevel,
-      title: ReactElement | string,
-      content: ReactElement | string,
-      buttons?: PrefabButton<RT>[],
-    ) =>
-      showModal(PrefabModal, {
-        level,
-
-        children: (
-          <>
-            {typeof title === "string" ? <h2>{title}</h2> : title}
-            {typeof content === "string" ? <p>{content}</p> : content}
-          </>
-        ),
-        buttons,
-      }) as Promise<RT>,
-  };
-};

package/dist/modal/index.ts

@@ -1,6 +0,0 @@
-export * from "./Modal";
-export * from "./ModalContext";
-export * from "./ModalContextProvider";
-export * from "./ModalInstanceContext";
-export * from "./PrefabModal";
-export * from "./useShowModal";

package/dist/modal/useShowModal.ts

@@ -1,16 +0,0 @@
-import { ComponentType, ModalContext } from "./ModalContext";
-import { ComponentProps, useContext, useRef } from "react";
-
-export const useShowModal = () => {
-  const { showModal } = useContext(ModalContext);
-
-  const modalOwnerRef = useRef<any>(null);
-
-  return {
-    showModal: <CT extends ComponentType>(
-      component: CT,
-      args: Omit<ComponentProps<CT>, "resolve" | "close">,
-    ): Promise<Parameters<Parameters<CT>[0]["resolve"]>[0]> => showModal(modalOwnerRef, component, args),
-    modalOwnerRef,
-  };
-};

package/dist/util/useInterval.ts

@@ -1,18 +0,0 @@
-import { useEffect, useRef } from "react";
-
-type Callback = () => void | Promise<void>;
-
-export const useInterval = (callback: Callback, timeoutMs: number | null) => {
-  const callbackRef = useRef(callback);
-  callbackRef.current = callback;
-
-  useEffect(() => {
-    if (!timeoutMs) return;
-    const interval = setInterval(() => {
-      callbackRef.current && callbackRef.current();
-    }, timeoutMs);
-    return () => {
-      clearInterval(interval);
-    };
-  }, [timeoutMs]);
-};