@linzjs/windows 1.4.3 → 1.4.4

package/package.json

@@ -13,7 +13,7 @@
     "popout"
   ],
   "main": "./src/index.ts",
-  "version": "1.4.3",
+  "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[]>([]);
 
   /**
@@ -120,7 +123,7 @@ export const ModalContextProvider = ({ children }: { children: ReactElement }):
         {modals
           .filter(modalHasView)
           .map((modalInstance) =>
-            ReactDOM.createPortal(
+            createPortal(
               <ModalInstanceContext.Provider value={{ close: () => modalInstance.resolve(undefined) }}>
                 {modalInstance.componentInstance}
               </ModalInstanceContext.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 { Fragment, 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,11 +93,12 @@ export const usePrefabModal = () => {
     ) =>
       showModal(PrefabModal, {
         level,
+
         children: (
-          <Fragment>
+          <>
             {typeof title === "string" ? <h2>{title}</h2> : title}
             {typeof content === "string" ? <p>{content}</p> : content}
-          </Fragment>
+          </>
         ),
         buttons,
       }) as Promise<RT>,

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,11 +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 { Fragment } from "react";
+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
@@ -64,9 +60,9 @@ export const PanelContents = () => (
 // #Example: Panel Invocation
 export const TestShowPanel = () => {
   return (
-    <Fragment>
+    <>
       <OpenPanelButton buttonText={"TestPanel 1"} component={() => <ShowPanelComponent data={1} />} />{" "}
       <OpenPanelButton buttonText={"TestPanel 2"} component={() => <ShowPanelComponent data={2} />} />
-    </Fragment>
+    </>
   );
 };

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

@@ -1,11 +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 { Fragment } from "react";
+import { OpenPanelButton, Panel, PanelContent, PanelDock, PanelHeader } from "../../../panel/";
 
 // #Example: Panel Component
 export interface ShowPanelComponentProps {
@@ -57,9 +53,9 @@ export const PanelContents = () => {
 // #Example: Panel Invocation
 export const TestShowPanel = () => {
   return (
-    <Fragment>
+    <>
       <OpenPanelButton buttonText={"TestPanel"} component={() => <ShowPanelComponent data={1} />} />
       <PanelDock id={"leftSide"}>The Panel will dock in here</PanelDock>
-    </Fragment>
+    </>
   );
 };

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

@@ -4,7 +4,7 @@ import "@linzjs/step-ag-grid/dist/GridTheme.scss";
 import "@linzjs/step-ag-grid/dist/index.css";
 
 import { OpenPanelButton, Panel, PanelContent, PanelContext, PanelHeader, PanelsContextProvider } from "../../../panel";
-import { Fragment, useContext, useMemo, useState } from "react";
+import { useContext, useMemo, useState } from "react";
 
 import {
   ColDefT,
@@ -44,10 +44,10 @@ export const TestPanelResizing = ({ data }: TestPanelProps) => {
 
 // #Example: Panel Invocation
 export const TestShowPanelResizingAgGrid = () => (
-  <Fragment>
+  <>
     <OpenPanelButton buttonText={"TestPanel resizing 1"} component={() => <TestPanelResizing data={1} />} />{" "}
     <OpenPanelButton buttonText={"TestPanel resizing 2"} component={() => <TestPanelResizing data={2} />} />
-  </Fragment>
+  </>
 );
 
 /* exclude */
@@ -96,7 +96,7 @@ export const PanelContentsWithResize = () => {
       GridPopoverMessage(
         {
           headerName: "Popout message",
-          cellRenderer: () => <Fragment>Single Click me!</Fragment>,
+          cellRenderer: () => <>Single Click me!</>,
           exportable: false,
         },
         {

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

@@ -1,11 +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 { Fragment } from "react";
+import { OpenPanelButton, Panel, PanelContent, PanelHeader, PanelsContextProvider } from "../../../panel/";
 
 import { LuiTabs, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch } from "@linzjs/lui";
 
@@ -69,9 +65,9 @@ export const PanelContents = () => (
 // #Example: Panel Invocation
 export const TestShowTabbedPanel = () => {
   return (
-    <Fragment>
+    <>
       <OpenPanelButton buttonText={"TestPanel 1"} component={() => <ShowPanelComponent data={1} />} />{" "}
       <OpenPanelButton buttonText={"TestPanel 2"} component={() => <ShowPanelComponent data={2} />} />
-    </Fragment>
+    </>
   );
 };