@linzjs/windows 10.3.0 → 11.0.0

package/dist/LuiModalAsync/useLuiModalPrefab.tsx

@@ -1,227 +0,0 @@
-import { LuiButton, LuiCheckboxInput, LuiIcon, LuiMiniSpinner } from '@linzjs/lui';
-import { LuiButtonProps } from '@linzjs/lui/dist/components/LuiButton/LuiButton';
-import { IconName } from '@linzjs/lui/dist/components/LuiIcon/LuiIcon';
-import clsx from 'clsx';
-import { flatMap, omit, pick } from 'lodash-es';
-import React, { PropsWithChildren, ReactElement, useCallback, useMemo, useState } from 'react';
-
-import { debugLog } from '../common/debug';
-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';
-
-export type PrefabType = 'outline' | 'success' | 'info' | 'warning' | 'error' | 'progress' | 'blocked';
-
-export interface LuiModalAsyncPrefabButton<RT> {
-  default?: boolean;
-  level?: LuiButtonProps['level'] | 'secondary-error';
-  title: string;
-  icon?: IconName;
-  value?: RT;
-}
-
-export interface useLuiModalPrefabProps<RT = string> extends LuiModalAsyncProps {
-  showOnAllWindows?: boolean;
-  level: PrefabType;
-  title: string;
-  helpLink?: string;
-  onHelpClick?: () => void;
-  buttons?: LuiModalAsyncPrefabButton<RT>[];
-  dontShowAgainSessionKey?: string;
-  polledCloseCondition?: () => boolean;
-}
-
-export interface LuiModalAsyncPrefabProps<RT> extends useLuiModalPrefabProps<RT>, LuiModalAsyncCallback<RT> {
-  //
-}
-
-// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
-export const getIconForLevel = (level: PrefabType): IconName | 'custom_progress' | null => {
-  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';
-    case 'blocked':
-      return 'ic_lock_alt';
-    case 'outline':
-      return null;
-  }
-};
-
-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<unknown>>): 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<unknown>[] = 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
-  if (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-error' ? 'secondary' : (pf.level ?? 'secondary')}
-            className={clsx(
-              pf.icon && 'lui-button-icon',
-              pf.level === 'secondary-error' && 'lui-button-secondary-error',
-            )}
-            onClick={() => {
-              setDontShow();
-              resolve(pf.value);
-            }}
-            buttonProps={pf.default ? { 'data-autofocus': true } : undefined}
-          >
-            {pf.icon && <LuiIcon name={pf.icon} alt={pf.title} size={'md'} />}
-            {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 = string,>(props: PropsWithChildren<useLuiModalPrefabProps<RT>>): PromiseWithResolve<RT> => {
-      debugLog(`Show '${props.level}' prefab-modal '${props.title}'`, props);
-      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)) ||
-        (props.polledCloseCondition && props.polledCloseCondition())
-      ) {
-        // Add resolve method to make the signature of showPrefabModal consistent
-        const prom = Promise.resolve(undefined) as PromiseWithResolve<RT>;
-        prom.resolve = (_val: RT | undefined) => {};
-        return prom;
-      }
-      return showModal(
-        LuiModalPrefab,
-        omit(props, ['showOnAllWindows', 'polledCloseCondition']),
-        pick(props, ['showOnAllWindows', 'polledCloseCondition']),
-      ) as PromiseWithResolve<RT>;
-    },
-    [showModal],
-  );
-
-  return useMemo(
-    () => ({
-      modalOwnerRef,
-      showPrefabModal,
-    }),
-    [modalOwnerRef, showPrefabModal],
-  );
-};

package/dist/LuiModalAsync/useLuiModalUpload.tsx

@@ -1,79 +0,0 @@
-import { LuiFileInputBox } from '@linzjs/lui';
-import { LuiFileInputBoxProps } from '@linzjs/lui/dist/components/LuiFormElements/LuiFileInputBox/LuiFileInputBox';
-import clsx from 'clsx';
-import { ReactElement, useCallback, useMemo, useState } from 'react';
-
-import { LuiModalAsync } from './LuiModalAsync';
-import { LuiModalAsyncCallback, PromiseWithResolve } from './LuiModalAsyncContext';
-import { LuiModalAsyncHeader } from './LuiModalAsyncHeader';
-import { useShowAsyncModal } from './useShowAsyncModal';
-
-export interface useLuiModalUploadProps extends Omit<LuiFileInputBoxProps, 'onValidFileSelected'> {
-  title?: string;
-  content?: ReactElement | string;
-  validateFile?: (file: File) => string;
-}
-
-/**
- * A generic template for common types of modals.
- */
-export const LuiModalUpload = ({
-  validateFile,
-  resolve,
-  title,
-  width,
-  height,
-  content,
-  ...props
-}: useLuiModalUploadProps & LuiModalAsyncCallback<File>): ReactElement => {
-  const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
-
-  const uploadFile = useCallback(
-    (file: File) => {
-      const error = validateFile?.(file);
-      if (error) {
-        setErrorMessage(error);
-      } else {
-        resolve(file);
-      }
-    },
-    [resolve, validateFile],
-  );
-
-  return (
-    <LuiModalAsync
-      className={clsx('LuiModalPrefab', `LuiModalPrefab-file`)}
-      closeOnOverlayClick={true}
-      style={{ width: width ?? 512, minHeight: height, height: height }}
-    >
-      {title && <LuiModalAsyncHeader title={title ?? 'Upload file...'} closeButton />}
-      {content}
-      <LuiFileInputBox
-        {...props}
-        width={'100%'}
-        showMustSelectFileError={!!errorMessage}
-        customFileErrorMessage={errorMessage ?? props.customFileErrorMessage}
-        onValidFileSelected={uploadFile}
-      />
-    </LuiModalAsync>
-  );
-};
-
-export const useLuiModalUpload = () => {
-  const { showModal, modalOwnerRef } = useShowAsyncModal();
-
-  const showUploadModal = useCallback(
-    (props: useLuiModalUploadProps): PromiseWithResolve<File> => {
-      return showModal(LuiModalUpload, props) as PromiseWithResolve<File>;
-    },
-    [showModal],
-  );
-
-  return useMemo(
-    () => ({
-      modalOwnerRef,
-      showUploadModal,
-    }),
-    [modalOwnerRef, showUploadModal],
-  );
-};

package/dist/LuiModalAsync/useShowAsyncModal.ts

@@ -1,34 +0,0 @@
-import { ComponentProps, useCallback, useContext, useMemo, useRef } from 'react';
-
-import {
-  ComponentType,
-  LuiModalAsyncContext,
-  openModalOnAllWindows,
-  PromiseWithResolve,
-  ShowModalProps,
-} from './LuiModalAsyncContext';
-
-export const useShowAsyncModal = () => {
-  const { showModal } = useContext(LuiModalAsyncContext);
-
-  // eslint-disable-next-line
-  const modalOwnerRef = useRef<any>(document.body);
-
-  const showModalAsync = useCallback(
-    <CT extends ComponentType>(
-      component: CT,
-      args: Omit<ComponentProps<CT>, 'resolve' | 'close'>,
-      props?: ShowModalProps,
-    ): PromiseWithResolve<Parameters<ComponentProps<CT>['resolve']>[0]> =>
-      showModal(props?.showOnAllWindows ? openModalOnAllWindows : modalOwnerRef, component, args, props),
-    [showModal],
-  );
-
-  return useMemo(
-    () => ({
-      showModal: showModalAsync,
-      modalOwnerRef,
-    }),
-    [showModalAsync],
-  );
-};

package/dist/common/debug.ts

@@ -1,9 +0,0 @@
-export const debugLog = (message: string, obj: unknown) => {
-  try {
-    if (localStorage.getItem('@linzjs/windows.debugEnabled') == 'true') {
-      console.debug(`@linzjs/windows: ${message}`, obj);
-    }
-  } catch (e) {
-    console.error(e);
-  }
-};

package/dist/common/useConstFunction.ts

@@ -1,22 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-const VoidFn = () => {
-  // empty
-};
-
-/**
- * When calling external non-react components, and you can't update the function when state changes,
- * use this to proxy the dynamic function with a static function.
- */
-export const useConstFunction = <Args extends never[], R, TFn extends ((...args: Args) => R) | null | undefined>(
-  fn: TFn = VoidFn as TFn,
-): TFn => {
-  const functionRef = useRef<TFn>(fn);
-  const proxyRef = useRef<TFn>(((...args: Args) => functionRef.current?.(...args)) as TFn);
-
-  useEffect(() => {
-    functionRef.current = fn;
-  }, [fn]);
-
-  return proxyRef.current;
-};

package/dist/common/util.ts

@@ -1,31 +0,0 @@
-export const tabToNextSiblingElement = (): void => tabToSiblingElement(1);
-export const tabToPreviousSiblingElement = (): void => tabToSiblingElement(-1);
-
-export const tabToSiblingElement = (direction: 1 | -1): void => {
-  const active = document.activeElement as HTMLElement | null;
-  if (!active) {
-    return;
-  }
-
-  const selector = [
-    'a[href]',
-    'area[href]',
-    'button:not([disabled])',
-    'input:not([disabled]):not([type="hidden"])',
-    'select:not([disabled])',
-    'textarea:not([disabled])',
-    'iframe',
-    '[tabindex]:not([tabindex="-1"])',
-    '[contenteditable="true"]',
-  ].join(',');
-
-  const focusables = Array.from(active.parentElement?.querySelectorAll<HTMLElement>(selector) ?? []).filter(
-    (el) => el.offsetParent !== null && getComputedStyle(el).visibility !== 'hidden',
-  );
-
-  const next = focusables.indexOf(active) + direction;
-
-  if (next >= 0 && next < focusables.length) {
-    focusables[next]?.focus();
-  }
-};

package/dist/components/CopyableText.tsx

@@ -1,58 +0,0 @@
-import '../index.scss';
-
-import clsx from 'clsx';
-import { CSSProperties, MouseEvent, ReactElement, useEffect, useRef, useState } from 'react';
-
-export interface CopyableTextProps {
-  dataTestId?: string;
-  style?: CSSProperties;
-  className?: string;
-  text: string | number;
-}
-
-export const CopyableText = (props: CopyableTextProps): ReactElement => {
-  const [copied, setCopied] = useState(false);
-
-  const { dataTestId, style, className, text } = props;
-  const timeoutRefDisplay = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const copy = (event: MouseEvent<HTMLSpanElement>) => {
-    const win = event.currentTarget.ownerDocument.defaultView ?? window;
-    win.navigator.clipboard.writeText(String(text)).then(
-      () => {
-        setCopied(true);
-        timeoutRefDisplay.current = setTimeout(() => void setCopied(false), 3000);
-      },
-      (err: Error) => {
-        alert(`Data copy failed: ${err.message}`);
-      },
-    );
-  };
-
-  useEffect(
-    () => () => {
-      if (timeoutRefDisplay.current) {
-        clearTimeout(timeoutRefDisplay.current);
-        timeoutRefDisplay.current = null;
-      }
-    },
-    [],
-  );
-
-  return (
-    <span
-      data-testid={dataTestId}
-      style={style}
-      className={clsx('windows_tooltip', className)}
-      onClick={(event) => {
-        event.stopPropagation();
-        copy(event);
-      }}
-    >
-      <span className="windows_tooltiptext" style={{ width: copied ? '62px' : '47px' }}>
-        {copied ? 'Copied!' : 'Copy'}
-      </span>
-      {text}
-    </span>
-  );
-};

package/dist/panel/OpenPanelButton.tsx

@@ -1,52 +0,0 @@
-// Simple button to open panel and show panel state
-import { useContext } from 'react';
-
-import { OpenPanelOptions, PanelsContext } from './PanelsContext';
-
-interface OpenPanelButtonProps extends OpenPanelOptions {
-  uniqueId?: string;
-  testId?: string;
-  buttonText: string;
-}
-
-export const OpenPanelButton = ({
-  buttonText,
-  testId,
-  uniqueId = buttonText,
-  ...openPanelOptions
-}: OpenPanelButtonProps) => {
-  const { openPanel, closePanel, hidePanel, unhidePanel, hasOpenPanel, hasHiddenPanel } = useContext(PanelsContext);
-
-  const open = hasOpenPanel(uniqueId);
-  const hidden = hasHiddenPanel(uniqueId);
-  return (
-    <div>
-      <b>
-        {buttonText} {open ? '(Open)' : ''}
-      </b>
-      <br />
-
-      {!open && (
-        <button data-testid={testId + 'Open'} onClick={() => openPanel({ uniqueId, ...openPanelOptions })}>
-          Open
-        </button>
-      )}
-      {open && (
-        <>
-          <button data-testid={testId + 'Close'} onClick={() => closePanel(uniqueId)}>
-            Close
-          </button>
-          {hidden ? (
-            <button data-testid={testId + 'Unhide'} onClick={() => unhidePanel(uniqueId)}>
-              Unhide
-            </button>
-          ) : (
-            <button data-testid={testId + 'Hide'} onClick={() => hidePanel(uniqueId)}>
-              Hide
-            </button>
-          )}
-        </>
-      )}
-    </div>
-  );
-};