@linzjs/windows 1.4.2 → 1.4.4

package/package.json

@@ -12,7 +12,8 @@
     "panel",
     "popout"
   ],
-  "version": "1.4.2",
+  "main": "./src/index.ts",
+  "version": "1.4.4",
   "peerDependencies": {
     "@linzjs/lui": "^17",
     "lodash-es": ">=4",

package/src/modal/Modal.tsx

@@ -1,12 +1,13 @@
 import { ModalInstanceContext } from "./ModalInstanceContext";
+import clsx from "clsx";
 import { delay } from "lodash-es";
-import { ReactElement, useContext, useEffect, useRef } from "react";
+import { PropsWithChildren, ReactElement, useContext, useEffect, useRef } from "react";
 
 export interface ModalProps {
-  children: ReactElement | ReactElement[];
+  className?: string;
 }
 
-export const Modal = ({ children }: ModalProps): ReactElement => {
+export const Modal = ({ className, children }: PropsWithChildren<ModalProps>): ReactElement => {
   const dialogRef = useRef<HTMLDialogElement>(null);
 
   const { close } = useContext(ModalInstanceContext);
@@ -29,7 +30,11 @@ export const Modal = ({ children }: ModalProps): ReactElement => {
   }, []);
 
   return (
-    <dialog ref={dialogRef} onClick={(e) => e.target === e.currentTarget && close()} style={{ padding: 0 }}>
+    <dialog
+      className={clsx("linzjs-windows-dialog", className)}
+      ref={dialogRef}
+      onClick={(e) => e.target === e.currentTarget && close()}
+    >
       {children}
     </dialog>
   );

package/src/modal/ModalContext.scss

@@ -0,0 +1,11 @@
+
+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/src/modal/ModalContextProvider.tsx

@@ -1,8 +1,11 @@
+import "./ModalContext.scss";
+
 import { useInterval } from "../util/useInterval";
 import { ComponentType, ModalContext } from "./ModalContext";
 import { ModalInstanceContext } from "./ModalInstanceContext";
-import { Fragment, MutableRefObject, ReactElement, useCallback, useState } from "react";
-import * as ReactDOM from "react-dom";
+import React, { Fragment, ReactNode } from "react";
+import { MutableRefObject, ReactElement, useCallback, useState } from "react";
+import { createPortal } from "react-dom";
 import { v4 as uuid } from "uuid";
 
 export interface ModalInstance {
@@ -56,7 +59,7 @@ export interface ModalInstance {
  * </li>
  * </ol>
  */
-export const ModalContextProvider = ({ children }: { children: ReactElement }): ReactElement => {
+export const ModalContextProvider = ({ children }: { children?: ReactNode | undefined }): ReactElement => {
   const [modals, setModals] = useState<ModalInstance[]>([]);
 
   /**
@@ -116,21 +119,19 @@ export const ModalContextProvider = ({ children }: { children: ReactElement }):
         showModal,
       }}
     >
-      <>
-        <Fragment key={"modals"}>
-          {modals
-            .filter(modalHasView)
-            .map((modalInstance) =>
-              ReactDOM.createPortal(
-                <ModalInstanceContext.Provider value={{ close: () => modalInstance.resolve(undefined) }}>
-                  {modalInstance.componentInstance}
-                </ModalInstanceContext.Provider>,
-                (modalInstance.ownerElement?.ownerDocument ?? document).body,
-              ),
-            )}
-        </Fragment>
-        <Fragment key={"children"}>{children}</Fragment>
-      </>
+      <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/src/modal/PrefabModal.scss

@@ -0,0 +1,21 @@
+@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/src/modal/PrefabModal.tsx

@@ -1,8 +1,10 @@
+import "./PrefabModal.scss";
+
 import { Modal } from "./Modal";
 import { ModalCallback } from "./ModalContext";
 import { useShowModal } from "./useShowModal";
 import { isEmpty } from "lodash-es";
-import { ReactElement } from "react";
+import React, { ReactElement } from "react";
 
 import { LuiAlertModalButtons, LuiButton, LuiIcon } from "@linzjs/lui";
 import { LuiButtonProps } from "@linzjs/lui/dist/components/LuiButton/LuiButton";
@@ -58,7 +60,7 @@ export const PrefabModal = ({ level = "warning", children, resolve, ...props }:
   });
 
   return (
-    <Modal>
+    <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}
@@ -91,6 +93,7 @@ export const usePrefabModal = () => {
     ) =>
       showModal(PrefabModal, {
         level,
+
         children: (
           <>
             {typeof title === "string" ? <h2>{title}</h2> : title}

package/src/panel/PanelsContextProvider.tsx

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

package/src/stories/modal/Modal.stories.tsx

@@ -1,4 +1,4 @@
-import { ModalContextProvider } from "../../modal/ModalContextProvider";
+import { ModalContextProvider } from "../../modal";
 import { TestModalUsage } from "./TestModal";
 import type { Meta, StoryObj } from "@storybook/react";
 

package/src/stories/modal/PrefabModal.tsx

@@ -1,8 +1,6 @@
-import "./TestModal.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { ModalContextProvider } from "../../modal/ModalContextProvider";
-import { usePrefabModal } from "../../modal/PrefabModal";
+import { ModalContextProvider, usePrefabModal } from "../../modal";
 
 // #Example: Modal Context Provider
 // Don't forget to add a ModalContextProvider at the root of your project

package/src/stories/modal/TestModal.scss

@@ -1,11 +1,9 @@
-@use "node_modules/@linzjs/lui/dist/scss/Core" as lui;
-@use "node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars.scss" as colours;
-
-dialog > div {
-  padding: 20px;
+dialog.testModal {
   display: flex;
   flex-direction: column;
+  padding: 20px;
   gap: 16px;
+  border-radius: 5px;
 
   div {
     display: flex;
@@ -15,22 +13,4 @@ dialog > div {
   button {
     flex: 1;
   }
-}
-
-.lui-modal {
-  margin: 0 !important;
-}
-
-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;
-}
-
-dialog::backdrop {
-  background: rgb(0 0 0 / 60%);
-}
-
-dialog {
-  border: none;
 }

package/src/stories/modal/TestModal.tsx

@@ -1,9 +1,9 @@
 import "./TestModal.scss";
 
-import { Modal } from "../../modal/Modal";
-import { ModalCallback } from "../../modal/ModalContext";
-import { ModalContextProvider } from "../../modal/ModalContextProvider";
-import { useShowModal } from "../../modal/useShowModal";
+import { Modal } from "../../modal";
+import { ModalCallback } from "../../modal";
+import { ModalContextProvider } from "../../modal";
+import { useShowModal } from "../../modal";
 
 // #Example: Modal Context Provider
 // Don't forget to add a ModalContextProvider at the root of your project
@@ -21,13 +21,11 @@ export interface TestModalProps extends ModalCallback<number> {
 
 // Close and resolve will be passed to your props magically!
 export const TestModal = ({ text, close, resolve }: TestModalProps) => (
-  <Modal>
+  <Modal className={"testModal"}>
+    <div>This is the modal text: '{text}'</div>
     <div>
-      <div>This is the modal text: '{text}'</div>
-      <div>
-        <button onClick={close}>Close</button>
-        <button onClick={() => resolve(1)}>Return 1</button>
-      </div>
+      <button onClick={close}>Close</button>
+      <button onClick={() => resolve(1)}>Return 1</button>
     </div>
   </Modal>
 );

package/src/stories/panel/PanelButtons/ShowPanel.tsx

@@ -1,15 +1,16 @@
 import "../story.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { OpenPanelButton } from "../../../panel/OpenPanelButton";
 import {
   ButtonIconHorizontalGroup,
   ButtonIconSeparator,
   ButtonIconVerticalGroup,
+  OpenPanelButton,
   OpenPanelIcon,
-} from "../../../panel/OpenPanelIcon";
-import { Panel, PanelContent } from "../../../panel/Panel";
-import { PanelHeader } from "../../../panel/PanelHeader";
+  Panel,
+  PanelContent,
+  PanelHeader,
+} from "../../../panel";
 
 /* exclude */
 export interface ShowPanelProps {

package/src/stories/panel/ShowPanel/ShowPanel.tsx

@@ -1,10 +1,7 @@
 import "../story.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { OpenPanelButton } from "../../../panel/OpenPanelButton";
-import { Panel, PanelContent } from "../../../panel/Panel";
-import { PanelHeader } from "../../../panel/PanelHeader";
-import { PanelsContextProvider } from "../../../panel/PanelsContextProvider";
+import { OpenPanelButton, Panel, PanelContent, PanelHeader, PanelsContextProvider } from "../../../panel/";
 
 // #Example: Panel Context Provider
 // Don't forget to add a PanelContextProvider at the root of your project

package/src/stories/panel/ShowPanelDocking/ShowPanel.tsx

@@ -1,10 +1,7 @@
 import "../story.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { OpenPanelButton } from "../../../panel/OpenPanelButton";
-import { Panel, PanelContent } from "../../../panel/Panel";
-import { PanelDock } from "../../../panel/PanelDock";
-import { PanelHeader } from "../../../panel/PanelHeader";
+import { OpenPanelButton, Panel, PanelContent, PanelDock, PanelHeader } from "../../../panel/";
 
 // #Example: Panel Component
 export interface ShowPanelComponentProps {

package/src/stories/panel/ShowPanelResizingAgGrid/ShowPanelResizingStepAgGrid.tsx

@@ -3,11 +3,7 @@ import "@linzjs/lui/dist/scss/base.scss";
 import "@linzjs/step-ag-grid/dist/GridTheme.scss";
 import "@linzjs/step-ag-grid/dist/index.css";
 
-import { OpenPanelButton } from "../../../panel/OpenPanelButton";
-import { Panel, PanelContent } from "../../../panel/Panel";
-import { PanelContext } from "../../../panel/PanelContext";
-import { PanelHeader } from "../../../panel/PanelHeader";
-import { PanelsContextProvider } from "../../../panel/PanelsContextProvider";
+import { OpenPanelButton, Panel, PanelContent, PanelContext, PanelHeader, PanelsContextProvider } from "../../../panel";
 import { useContext, useMemo, useState } from "react";
 
 import {

package/src/stories/panel/ShowTabbedPanel/ShowPanel.tsx

@@ -1,10 +1,7 @@
 import "../story.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { OpenPanelButton } from "../../../panel/OpenPanelButton";
-import { Panel, PanelContent } from "../../../panel/Panel";
-import { PanelHeader } from "../../../panel/PanelHeader";
-import { PanelsContextProvider } from "../../../panel/PanelsContextProvider";
+import { OpenPanelButton, Panel, PanelContent, PanelHeader, PanelsContextProvider } from "../../../panel/";
 
 import { LuiTabs, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch } from "@linzjs/lui";
 

package/index.ts

@@ -1 +0,0 @@
-export * from "./src";