@linzjs/windows 2.0.0 → 2.1.0

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/LuiModalAsync/LuiModalAsyncContextProvider.tsx

@@ -0,0 +1,144 @@
+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 LuiModalAsyncInstance {
+  uuid: string;
+  ownerRef: MutableRefObject<HTMLElement | null>;
+  componentInstance: ReactElement;
+  resolve: (result: any) => void;
+}
+
+/**
+ * Provides the ability to show modals using react components without needing useState boilerplate and inline dialogs.
+ *
+ * To use:
+ * <ol>
+ * <li>Add this Provider somewhere in your standard providers
+ * <pre>
+ * <LuiModalAsyncContextProvider>
+ *    ...children
+ * </LuiModalAsyncContextProvider>
+ * </pre>
+ * </li>
+ * <li>Add the modal return type to the element as below, and use the props resolve/close from ModalProps for results.
+ * <pre>
+ * export interface SomeModalProps extends ModalProps<number> {
+ *   someProp?: number; // user props
+ * }
+ *
+ * export const SomeModal = ({initialState, resolve, close}: SomeModalProps): ReactElement => {
+ *    return Modal(
+ *       <div>
+ *           Itsa me, I'm a modal
+ *          <button onClick={close}>Cancel</button>
+ *          <button onClick={()=>resolve(someProp)}>Save</button>
+ *       </div>
+ *    )}
+ * }
+ * </pre>
+ * </li>
+ * <li> To show the dialog and get the result...
+ * <pre>
+ *   // Note: modalOwnerRef is only required if you need to support popout windows
+ *   const { showModal, modalOwnerRef  } = useContext(ModalContext);
+ *   ...
+ *   const showModal = () => {
+ *     const result = await showModal(SomeModal, { someProp: 1 });
+ *     if (!result) return; // modal cancelled
+ *   }
+ *
+ *   return <button onClick={showModal} ref={modalOwnerRef}>Show Modal!</button>
+ * </pre>
+ * </li>
+ * </ol>
+ */
+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 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(
+    (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,
+              ownerRef,
+              componentInstance: <Component {...args} resolve={resolve} close={() => resolve(undefined)} />,
+              resolve,
+            },
+          ]);
+        } catch (e) {
+          console.error(e);
+          return;
+        }
+      }).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: LuiModalAsyncInstance): boolean => !!modalInstance.ownerRef.current?.ownerDocument?.defaultView,
+    [],
+  );
+
+  /**
+   * 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 (
+    <LuiModalAsyncContext.Provider
+      value={{
+        showModal,
+      }}
+    >
+      <>
+        {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,62 @@
+import "./LuiModalAsync.scss";
+
+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;
+  helpButtonLevel?: "text" | "plain-text" | "primary" | "secondary" | "tertiary" | "success" | "error";
+}
+
+/**
+ * Generic modal header.
+ */
+export const LuiModalAsyncHeader = ({
+  icon,
+  title,
+  helpLink,
+  onHelpClick,
+  helpButtonLevel,
+}: 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={helpButtonLevel || "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/package.json

@@ -13,7 +13,7 @@
     "popout"
   ],
   "main": "./dist/index.ts",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "peerDependencies": {
     "@linzjs/lui": "^18",
     "lodash-es": ">=4",