@linzjs/windows 1.5.2 → 2.0.0

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.0",
   "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/ModalContextProvider.tsx

@@ -1,137 +0,0 @@
-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 { createPortal } from "react-dom";
-import { v4 as makeUuid } from "uuid";
-
-export interface ModalInstance {
-  uuid: string;
-  ownerElement: Element | undefined;
-  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>
- * <ModalContextProvider>
- *    ...children
- * </ModalContextProvider>
- * </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 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 ModalContextProvider = ({ children }: { children?: ReactNode | undefined }): ReactElement => {
-  const [modals, setModals] = useState<ModalInstance[]>([]);
-
-  /**
-   * 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 Component React component.
-   * @param args Arguments for react component.
-   */
-  const showModal = useCallback(
-    async (ownerRef: MutableRefObject<HTMLElement | null>, Component: ComponentType, args: any): Promise<any> => {
-      const uuid = makeUuid();
-      const promise = new Promise((resolve) => {
-        try {
-          // If there are any exceptions the modal won't show
-          setModals((modals) => [
-            ...modals,
-            {
-              uuid,
-              ownerElement: ownerRef.current ?? document.body,
-              componentInstance: <Component {...args} resolve={resolve} close={() => resolve(undefined)} />,
-              resolve,
-            },
-          ]);
-        } catch (e) {
-          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;
-    },
-    [],
-  );
-
-  const modalHasView = useCallback(
-    (modalInstance: ModalInstance): boolean => !!modalInstance.ownerElement?.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 (
-    <ModalContext.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>
-  );
-};

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]);
-};