@linzjs/windows 8.3.0 → 8.5.0

package/dist/LuiModalAsync/LuiModalAsync.scss

@@ -118,3 +118,11 @@ dialog.LuiModalAsync, div.LuiModalAsync {
   }
 }
 
+dialog.LuiModalPrefab-file {
+  gap: lui.$unit-sm;
+  padding: lui.$unit-md;
+
+  .LuiModalAsync-content {
+    padding-bottom: lui.$unit-xs;
+  }
+}

package/dist/LuiModalAsync/LuiModalAsync.tsx

@@ -41,13 +41,15 @@ export const LuiModalAsync = ({
     // 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;
-      let input = d.querySelectorAll('[data-autofocus]')[0] as HTMLElement | undefined;
-      if (!input) {
-        input = d.querySelectorAll('button:not([data-noautofocus]),input:not([data-noautofocus])')[0] as
-          | HTMLElement
-          | undefined;
+      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) {

package/dist/LuiModalAsync/LuiModalAsyncHeader.tsx

@@ -4,11 +4,13 @@ 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;
   helpButtonLevel?: 'text' | 'plain-text' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'error';
@@ -20,11 +22,12 @@ export interface LuiModalAsyncHeaderProps {
 export const LuiModalAsyncHeader = ({
   icon,
   title,
+  closeButton,
   helpLink,
   onHelpClick,
   helpButtonLevel,
 }: PropsWithChildren<LuiModalAsyncHeaderProps>) => {
-  const { ownerRef } = useContext(LuiModalAsyncInstanceContext);
+  const { ownerRef, close } = useContext(LuiModalAsyncInstanceContext);
 
   return (
     <div className={'LuiModalAsync-header'}>
@@ -57,6 +60,7 @@ export const LuiModalAsyncHeader = ({
           <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/index.ts

@@ -7,4 +7,5 @@ export * from './LuiModalAsyncHeader';
 export * from './LuiModalAsyncInstanceContext';
 export * from './LuiModalAsyncMain';
 export * from './useLuiModalPrefab';
+export * from './useLuiModalUpload';
 export * from './useShowAsyncModal';

package/dist/LuiModalAsync/useLuiModalUpload.tsx

@@ -1,23 +1,31 @@
 import { LuiFileInputBox } from '@linzjs/lui';
 import { LuiFileInputBoxProps } from '@linzjs/lui/dist/components/LuiFormElements/LuiFileInputBox/LuiFileInputBox';
 import clsx from 'clsx';
-import React, { PropsWithChildren, ReactElement, useCallback, useMemo, useState } from 'react';
+import { ReactElement, useCallback, useMemo, useState } from 'react';
 
 import { LuiModalAsync } from './LuiModalAsync';
+import { LuiModalAsyncContent } from './LuiModalAsyncContent';
 import { LuiModalAsyncCallback, PromiseWithResolve } from './LuiModalAsyncContext';
+import { LuiModalAsyncHeader } from './LuiModalAsyncHeader';
 import { useShowAsyncModal } from './useShowAsyncModal';
 
-export interface useLuiModalUploadProps<RT>
-  extends Omit<LuiFileInputBoxProps, 'onValidFileSelected'>,
-    LuiModalAsyncCallback<RT> {
+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 = (props: PropsWithChildren<useLuiModalUploadProps<File>>): ReactElement => {
-  const { validateFile, resolve } = props;
+export const LuiModalUpload = ({
+  validateFile,
+  resolve,
+  title,
+  width,
+  content,
+  ...props
+}: useLuiModalUploadProps & LuiModalAsyncCallback<File>): ReactElement => {
   const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
 
   const uploadFile = useCallback(
@@ -33,10 +41,16 @@ export const LuiModalUpload = (props: PropsWithChildren<useLuiModalUploadProps<F
   );
 
   return (
-    <LuiModalAsync className={clsx('LuiModalPrefab', `LuiModalPrefab-file`)} closeOnOverlayClick={true}>
+    <LuiModalAsync
+      className={clsx('LuiModalPrefab', `LuiModalPrefab-file`)}
+      closeOnOverlayClick={true}
+      style={{ width: width ?? 512 }}
+    >
+      {title && <LuiModalAsyncHeader title={title ?? 'Upload file...'} closeButton />}
+      {content && <LuiModalAsyncContent>{content}</LuiModalAsyncContent>}
       <LuiFileInputBox
         {...props}
-        width={props.width ?? 512}
+        width={'100%'}
         showMustSelectFileError={!!errorMessage}
         customFileErrorMessage={errorMessage}
         onValidFileSelected={uploadFile}
@@ -49,7 +63,7 @@ export const useLuiModalUpload = () => {
   const { showModal, modalOwnerRef } = useShowAsyncModal();
 
   const showUploadModal = useCallback(
-    (props: Omit<LuiFileInputBoxProps, 'onValidFileSelected'>): PromiseWithResolve<File> => {
+    (props: useLuiModalUploadProps): PromiseWithResolve<File> => {
       return showModal(LuiModalUpload, props) as PromiseWithResolve<File>;
     },
     [showModal],

package/package.json

@@ -13,7 +13,7 @@
     "popout"
   ],
   "main": "./dist/index.ts",
-  "version": "8.3.0",
+  "version": "8.5.0",
   "peerDependencies": {
     "@linzjs/lui": ">=23",
     "lodash-es": ">=4",