@linzjs/windows 10.3.1 → 11.0.0

package/package.json

@@ -12,8 +12,15 @@
     "panel",
     "popout"
   ],
-  "main": "./dist/index.ts",
-  "version": "10.3.1",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "version": "11.0.0",
   "peerDependencies": {
     "@linzjs/lui": ">=23",
     "react": ">=18",
@@ -33,7 +40,7 @@
     "build": "node -e \"require('fs').mkdirSync('./dist',{recursive:true})\" && npm run clean && npm run lintall && npm run bundle",
     "yalc": "npm run clean && npm run bundle && yalc push",
     "clean": "node -e \"fs.rmSync('dist', { recursive: true, force: true })\"",
-    "bundle": "tsc --noEmit && rollup -c",
+    "bundle": "tsc && rollup -c",
     "test": "vitest run",
     "test:watch": "vitest --watch",
     "lintall": "npm run lint:style && npm run lint:oxlint",
@@ -73,11 +80,11 @@
     "ag-grid-community": "34.2.0",
     "ag-grid-react": "34.2.0",
     "jsdom": "^27.3.0",
-    "oxfmt": "^0.48.0",
-    "oxlint": "^1.63.0",
+    "oxfmt": "^0.50.0",
+    "oxlint": "^1.65.0",
     "react": "^18.3.1",
     "react-dom": "18.3.1",
-    "rollup": "^4.60.3",
+    "rollup": "^4.60.4",
     "rollup-plugin-copy": "^3.5.0",
     "sass": "^1.99.0",
     "storybook": "10.3.6",
@@ -87,8 +94,7 @@
     "stylelint-config-standard": "^39.0.1",
     "stylelint-scss": "6.14.0",
     "typescript": "^5.9.3",
-    "vite": "^7.3.2",
-    "vite-tsconfig-paths": "^5.1.4",
+    "vite": "^8.0.13",
     "vitest": "^4.1.5"
   },
   "browserslist": {

package/dist/LuiModalAsync/LuiModalAsync.tsx

@@ -1,82 +0,0 @@
-import '../index.scss';
-
-import clsx from 'clsx';
-import { delay } from 'lodash-es';
-import React, { CSSProperties, PropsWithChildren, ReactElement, useContext, useEffect, useRef } from 'react';
-
-import { LuiModalAsyncInstanceContext } from './LuiModalAsyncInstanceContext';
-
-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
-    if (!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;
-      }
-      const input = (d.querySelectorAll('[data-autofocus]')[0] ??
-        d.querySelectorAll('[type=file]')[0] ??
-        d.querySelectorAll('button:not([data-noautofocus]),input:not([data-noautofocus])')[0]) as
-        | HTMLElement
-        | undefined;
-
-      if (input) {
-        input.focus?.();
-        if ('select' in input) {
-          (input as HTMLInputElement).select?.();
-        }
-      }
-    }, 100);
-  }, []);
-
-  // You cannot override dialogs position from absolute.
-  return className?.includes('storybook') ? (
-    <div className={clsx('LuiModalAsync', className)} style={style}>
-      {children}
-    </div>
-  ) : (
-    <dialog
-      role={'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

@@ -1,55 +0,0 @@
-import { LuiButton } from '@linzjs/lui';
-import { LuiButtonProps } from '@linzjs/lui/dist/components/LuiButton/LuiButton';
-import React, { PropsWithChildren, useContext } from 'react';
-
-import { LuiModalAsyncInstanceContext } from './LuiModalAsyncInstanceContext';
-
-/**
- * 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?: unknown; 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={(e) => {
-        if (props.onClick) props.onClick(e);
-        else resolve(props.value ?? 'continue');
-      }}
-    >
-      {props.children}
-    </LuiButton>
-  );
-});

package/dist/LuiModalAsync/LuiModalAsyncContent.tsx

@@ -1,9 +0,0 @@
-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

@@ -1,52 +0,0 @@
-import { ComponentProps, createContext, createRef, MutableRefObject, ReactElement } from 'react';
-
-export const openModalOnAllWindows = createRef<HTMLDivElement>();
-
-/**
- * @param showOnAllWindows If true this modal will show on all windows opened from main window including main window.
- * @param
- */
-export interface ShowModalProps {
-  showOnAllWindows?: boolean;
-  polledCloseCondition?: () => boolean;
-}
-
-// eslint-disable-next-line
-export type ComponentType = (props: any) => ReactElement;
-
-/**
- * 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,
-    // eslint-disable-next-line
-    PROPS extends LuiModalAsyncCallback<any>,
-    CT extends (props: PROPS) => ReactElement,
-    RT = Parameters<ComponentProps<CT>['resolve']>[0],
-  >(
-    ownerRef: MutableRefObject<OR>,
-    component: CT,
-    args: Omit<ComponentProps<CT>, 'resolve' | 'close'>,
-    showModalProps?: ShowModalProps,
-  ) => PromiseWithResolve<RT>;
-}
-
-export const LuiModalAsyncContext = createContext<LuiModalAsyncContextType>({
-  // eslint-disable-next-line @typescript-eslint/require-await
-  showModal: (async () => {
-    console.error('Missing LuiModalAsyncContext Provider');
-  }) as unknown as LuiModalAsyncContextType['showModal'],
-});

package/dist/LuiModalAsync/LuiModalAsyncContextProvider.tsx

@@ -1,223 +0,0 @@
-import React, {
-  MutableRefObject,
-  PropsWithChildren,
-  ReactElement,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import { createPortal } from 'react-dom';
-
-import { debugLog } from '../common/debug';
-import {
-  ComponentType,
-  LuiModalAsyncContext,
-  openModalOnAllWindows,
-  PromiseWithResolve,
-  ShowModalProps,
-} from './LuiModalAsyncContext';
-import { LuiModalAsyncInstanceContext } from './LuiModalAsyncInstanceContext';
-import { useInterval } from '../common/useInterval';
-import { v4 } from '../common/uuid';
-
-export interface LuiModalAsyncInstance {
-  uuid: string;
-  ownerRef: MutableRefObject<HTMLElement | null>;
-  componentInstance: ReactElement;
-  // eslint-disable-next-line
-  resolve: (result: any) => void;
-  showModalProps?: ShowModalProps;
-}
-
-/**
- * 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  } = useShowAsyncModal();
- *   ...
- *   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[]>([]);
-  const openWindowsRef = useRef([window]);
-
-  // hook window open for opening dialogs across multiple windows
-  useEffect(() => {
-    const oldWindowOpen = window.open;
-    window.open = (...props) => {
-      const r = oldWindowOpen(...props);
-      // We don't want to track non app-windows, e.g. help screens
-      if (!props[0]) {
-        if (r) {
-          openWindowsRef.current.push(r as typeof window);
-        }
-      }
-      return r;
-    };
-
-    return () => {
-      window.open = oldWindowOpen;
-    };
-  }, []);
-
-  /**
-   * 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,
-      // eslint-disable-next-line
-      args: any,
-      showModalProps?: ShowModalProps,
-    ): // eslint-disable-next-line
-    PromiseWithResolve<any> => {
-      if (!('level' in args)) {
-        debugLog(`Show generic modal`, args);
-      }
-      const uuid = v4();
-      // eslint-disable-next-line
-      let extResolve: PromiseWithResolve<any>['resolve'];
-
-      // @ts-expect-error promise resolve cast
-      // eslint-disable-next-line
-      const promise: PromiseWithResolve<any> = new Promise((resolve) => {
-        extResolve = resolve;
-        try {
-          // If there are any exceptions the modal won't show
-          setModals((modals) => [
-            ...modals,
-            {
-              uuid,
-              ownerRef,
-              // eslint-disable-next-line
-              componentInstance: <Component {...args} resolve={resolve} close={() => resolve(undefined)} />,
-              resolve,
-              showModalProps,
-            },
-          ]);
-        } catch (e) {
-          console.error(e);
-          return;
-        }
-      }).then((result) => {
-        debugLog('Modal resolved result =', JSON.stringify(result));
-        return new Promise((resolve) => {
-          // Close modal
-          setModals((modals) => {
-            // Defer resolving to give react a chance to update the view allowing the async event model to run.
-            // Just in case the task following this is long-running with non IO code, which will block the event queue.
-            setTimeout(() => resolve(result), 10);
-            return modals.filter((e) => e.uuid !== uuid);
-          });
-        });
-      });
-      // 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 === openModalOnAllWindows || !!modalInstance.ownerRef.current?.ownerDocument.defaultView,
-    [],
-  );
-
-  const windowIsOpen = useCallback((w: typeof window): boolean => !w.closed, []);
-
-  /**
-   * Tidy up modals that have closed because of an external window closing
-   */
-  useInterval(() => {
-    const newModals = modals.filter(modalHasView);
-    if (newModals.length !== modals.length) {
-      setModals(newModals);
-    }
-    // We could do this with window close listeners, but they are unreliable
-    openWindowsRef.current = openWindowsRef.current.filter((w) => !w.closed);
-
-    newModals.forEach((modalInstance) => {
-      if (modalInstance.showModalProps?.polledCloseCondition?.()) {
-        modalInstance.resolve(undefined);
-      }
-    });
-  }, 500);
-
-  const portalOwners = (modalInstance: LuiModalAsyncInstance) =>
-    modalInstance.ownerRef == openModalOnAllWindows
-      ? openWindowsRef.current.filter(windowIsOpen).map((frame) => frame.document.body)
-      : [(modalInstance.ownerRef.current?.ownerDocument ?? document).body];
-
-  return (
-    <LuiModalAsyncContext.Provider
-      value={{
-        showModal,
-      }}
-    >
-      <>
-        {modals.filter(modalHasView).map((modalInstance) => (
-          <LuiModalAsyncInstanceContext.Provider
-            key={modalInstance.uuid}
-            value={{
-              ownerRef: modalInstance.ownerRef,
-              close: () => modalInstance.resolve(undefined),
-              resolve: modalInstance.resolve,
-            }}
-          >
-            {portalOwners(modalInstance).map((element) =>
-              createPortal(<>{modalInstance.componentInstance}</>, element),
-            )}
-          </LuiModalAsyncInstanceContext.Provider>
-        ))}
-      </>
-      <>{children}</>
-    </LuiModalAsyncContext.Provider>
-  );
-};

package/dist/LuiModalAsync/LuiModalAsyncHeader.tsx

@@ -1,67 +0,0 @@
-import '../index.scss';
-
-import { LuiButton, LuiIcon } from '@linzjs/lui';
-import { LuiIconName } from '@linzjs/lui/dist/assets/svg-content';
-import React, { PropsWithChildren, ReactElement, useContext } from 'react';
-
-import { PanelHeaderButton } from '../panel';
-import { LuiModalAsyncInstanceContext } from './LuiModalAsyncInstanceContext';
-
-export interface LuiModalAsyncHeaderProps {
-  icon?: LuiIconName | ReactElement | null;
-  title: string;
-  closeButton?: true;
-  helpLink?: string;
-  onHelpClick?: () => void;
-  // @Deprecated This has no effect.  Don't use it
-  helpButtonLevel?: 'text' | 'plain-text' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'error';
-}
-
-/**
- * Generic modal header.
- */
-export const LuiModalAsyncHeader = ({
-  icon,
-  title,
-  closeButton,
-  helpLink,
-  onHelpClick,
-  helpButtonLevel,
-}: PropsWithChildren<LuiModalAsyncHeaderProps>) => {
-  const { ownerRef, close } = 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" className={'LuiModalAsync-help-icon'} />
-        </LuiButton>
-      )}
-      {closeButton && <PanelHeaderButton aria-label={'Close'} onClick={close} icon={'ic_clear'} />}
-    </div>
-  );
-};

package/dist/LuiModalAsync/LuiModalAsyncInstanceContext.ts

@@ -1,24 +0,0 @@
-import { createContext, MutableRefObject } from 'react';
-
-/**
- * Actions that can be taken from within the modal via instance context
- */
-export interface LuiModalAsyncInstanceContextType {
-  ownerRef: MutableRefObject<HTMLElement | null>;
-  close: () => void;
-  // eslint-disable-next-line
-  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

@@ -1,8 +0,0 @@
-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>
-);