@x15ventures/x15-ui-library 3.11.4

package/dist/esm/components/form/formFields/subComponents/inputs/date/NativeDateCalendarPopupTrigger.js

@@ -0,0 +1,28 @@
+'use client';
+
+import React from 'react';
+import { SimpleButton } from '../../../../buttons/SimpleButton';
+export const NativeDateCalendarPopupTrigger = ({
+  dateInputElementId,
+  onPopupOpen = () => {}
+}) => {
+  const ShowCalendarPopup = event => {
+    event.preventDefault();
+    const dateInputElement = document.getElementById(dateInputElementId);
+    if (dateInputElement && typeof dateInputElement.showPicker === 'function') {
+      dateInputElement.showPicker();
+      onPopupOpen();
+    }
+  };
+  return /*#__PURE__*/React.createElement(SimpleButton, {
+    hideLabel: true,
+    title: "Open calendar popup. Click elsewhere or use esc key to close.",
+    label: "Open calendar popup",
+    id: `${dateInputElementId}_calendarTrigger`,
+    onClickHandler: ShowCalendarPopup,
+    rightIcon: {
+      icon: 'calendar'
+    }
+  });
+};
+//# sourceMappingURL=NativeDateCalendarPopupTrigger.js.map

package/dist/esm/components/form/formFields/subComponents/inputs/date/NativeDateCalendarPopupTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeDateCalendarPopupTrigger.js","names":["React","SimpleButton","NativeDateCalendarPopupTrigger","dateInputElementId","onPopupOpen","ShowCalendarPopup","event","preventDefault","dateInputElement","document","getElementById","showPicker","createElement","hideLabel","title","label","id","onClickHandler","rightIcon","icon"],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/date/NativeDateCalendarPopupTrigger.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { SimpleButton } from '../../../../buttons/SimpleButton';\nimport { GenericFunction } from '../../../../../../interfaces';\n\ninterface NativeDateCalendarPopupTriggerProps {\n  dateInputElementId: string;\n  onPopupOpen?: GenericFunction;\n}\n\nexport const NativeDateCalendarPopupTrigger: React.FC<NativeDateCalendarPopupTriggerProps> = (\n  {\n    dateInputElementId,\n    onPopupOpen = () => {}\n  }\n) => {\n  const ShowCalendarPopup = (event: KeyboardEvent | MouseEvent) => {\n    event.preventDefault();\n    const dateInputElement: HTMLInputElement | null = document.getElementById(dateInputElementId) as HTMLInputElement;\n\n    if (dateInputElement && typeof dateInputElement.showPicker === 'function') {\n      dateInputElement.showPicker();\n      onPopupOpen();\n    }\n  };\n\n  return (\n    <SimpleButton\n      hideLabel\n      title=\"Open calendar popup. Click elsewhere or use esc key to close.\"\n      label=\"Open calendar popup\"\n      id={ `${ dateInputElementId }_calendarTrigger` }\n      onClickHandler={ ShowCalendarPopup }\n      rightIcon={ { icon: 'calendar' } }\n    />\n  );\n};\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,QAAQ,kCAAkC;AAQ/D,OAAO,MAAMC,8BAA6E,GAAGA,CAC3F;EACEC,kBAAkB;EAClBC,WAAW,GAAGA,CAAA,KAAM,CAAC;AACvB,CAAC,KACE;EACH,MAAMC,iBAAiB,GAAIC,KAAiC,IAAK;IAC/DA,KAAK,CAACC,cAAc,CAAC,CAAC;IACtB,MAAMC,gBAAyC,GAAGC,QAAQ,CAACC,cAAc,CAACP,kBAAkB,CAAqB;IAEjH,IAAIK,gBAAgB,IAAI,OAAOA,gBAAgB,CAACG,UAAU,KAAK,UAAU,EAAE;MACzEH,gBAAgB,CAACG,UAAU,CAAC,CAAC;MAC7BP,WAAW,CAAC,CAAC;IACf;EACF,CAAC;EAED,oBACEJ,KAAA,CAAAY,aAAA,CAACX,YAAY;IACXY,SAAS;IACTC,KAAK,EAAC,+DAA+D;IACrEC,KAAK,EAAC,qBAAqB;IAC3BC,EAAE,EAAG,GAAIb,kBAAkB,kBAAqB;IAChDc,cAAc,EAAGZ,iBAAmB;IACpCa,SAAS,EAAG;MAAEC,IAAI,EAAE;IAAW;EAAG,CACnC,CAAC;AAEN,CAAC","ignoreList":[]}

package/dist/esm/components/form/formFields/subComponents/inputs/file/InputFile.js

@@ -0,0 +1,19 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { InputText } from '../text/InputText';
+import './inputFile.css';
+
+// PRIVATE COMPONENT
+// Do not use this directly. It must be created via a FormField component
+
+export const InputFile = ({
+  ...props
+}) => /*#__PURE__*/React.createElement(InputText, _extends({}, props, {
+  type: "file"
+}));
+export default {
+  InputFile
+};
+//# sourceMappingURL=InputFile.js.map

package/dist/esm/components/form/formFields/subComponents/inputs/file/InputFile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputFile.js","names":["_extends","React","InputText","InputFile","props","createElement","type"],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/file/InputFile.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { InputText } from '../text/InputText';\n\nimport { FileInputProps } from '../../../subComponents/inputs/file/fileInputProps';\n\nimport './inputFile.scss';\n\n// PRIVATE COMPONENT\n// Do not use this directly. It must be created via a FormField component\n\nexport const InputFile: React.FC<FileInputProps> = (\n  {\n    ...props\n  }\n) => (\n  <InputText\n    { ...props }\n    type=\"file\"\n  />\n);\n\nexport default { InputFile };\n"],"mappings":"AAAA,YAAY;;AAAC,OAAAA,QAAA;AAEb,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAQ,mBAAmB;AAI7C,OAAO,kBAAkB;;AAEzB;AACA;;AAEA,OAAO,MAAMC,SAAmC,GAAGA,CACjD;EACE,GAAGC;AACL,CAAC,kBAEDH,KAAA,CAAAI,aAAA,CAACH,SAAS,EAAAF,QAAA,KACHI,KAAK;EACVE,IAAI,EAAC;AAAM,EACZ,CACF;AAED,eAAe;EAAEH;AAAU,CAAC","ignoreList":[]}

package/dist/esm/components/form/formFields/subComponents/inputs/file/dragAndDrop/DragAndDropFileUpload.js

@@ -0,0 +1,211 @@
+'use client';
+
+/* eslint-disable no-unused-vars */
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { arrowUpFromBracket } from '@x15ventures/x15-ui-library-icons/iconDefinitions';
+import { SvgIcon } from '@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon';
+import { useFormContext } from 'react-hook-form';
+import { HookFormWrapper } from '../../../../../hookFormWrapper/HookFormWrapper';
+import { Spinner } from '../../../../../../design/spinner/Spinner';
+import { FormFieldLabel } from '../../../../subComponents/labels/FormFieldLabel';
+import { InputFile } from '../../../../subComponents/inputs/file/InputFile';
+import { ValidationMessages } from '../../../../../validation/ValidationMessages';
+import { NoHookFormContext } from '../../../../utilities/formUtilities';
+import { generateButtonClass } from '../../../../../buttons/button.helpers';
+import { FileAttachmentsList } from '../fileAttachmentList/FileAttachmentsList';
+import { DEFAULT_UPLOAD_FILE_EXTENSIONS, DEFAULT_UPLOAD_FILE_TYPES, BLACKLISTED_FILE_TYPES } from '../../../../../../../constants';
+import './dragAndDropFileUpload.css';
+export const DragAndDropFileUpload = ({
+  label,
+  field,
+  showSpinner,
+  fileDisplayStyle = 'names',
+  fileListSettings,
+  fileList,
+  validation,
+  customContent,
+  customCssClasses,
+  labelStyle = 'dragArea',
+  labelAsButtonStyles = {
+    color: 'primary',
+    variant: 'outline'
+  },
+  labelUploadIcon = /*#__PURE__*/React.createElement(SvgIcon, {
+    svgDefinition: arrowUpFromBracket
+  }),
+  multiple = false,
+  restrictionsTxt = '',
+  validFiles = {
+    extensions: DEFAULT_UPLOAD_FILE_EXTENSIONS,
+    fileTypes: DEFAULT_UPLOAD_FILE_TYPES,
+    maxFileCount: 5,
+    maxFileSize: 52428800 // 50 MB
+  },
+  onFilesChange = () => {}
+}) => {
+  const {
+    setValue,
+    trigger,
+    setError
+  } = useFormContext() || NoHookFormContext;
+  const [activeFileList, setFileList] = useState(fileList || []);
+  const [isTouched, setIsTouched] = useState(false);
+  const [isDragActive, setIsDragActive] = useState(false);
+  const inputId = field.id;
+  const inputElRef = useRef(null);
+  const dialogOpenRef = useRef(false);
+  useEffect(() => {
+    inputElRef.current = document.getElementById(inputId);
+  }, [inputId]);
+
+  // Detect “Cancel” -> dialog closes, window regains focus, but input had no change.
+  useEffect(() => {
+    const onFocus = () => {
+      if (!dialogOpenRef.current) {
+        return;
+      }
+      dialogOpenRef.current = false;
+      const noneSelected = !inputElRef.current?.files?.length;
+      if (noneSelected) {
+        // Trigger React Hook Form validators (e.g., required)
+        trigger(field.name);
+      }
+    };
+    window.addEventListener('focus', onFocus);
+    return () => window.removeEventListener('focus', onFocus);
+  }, [trigger, field.name]);
+  const supportedFileTypes = useMemo(() => validFiles?.fileTypes?.join(', ') || '', [validFiles?.fileTypes]);
+  const validateAndCommit = useCallback(files => {
+    // basic validations
+    const validated = files.filter(file => {
+      const ext = file.name.split('.').pop()?.toLowerCase() || '';
+      const isBlacklisted = BLACKLISTED_FILE_TYPES.includes(ext);
+      const isValidExt = validFiles.extensions ? validFiles.extensions.includes(ext) : true;
+      const isValidSize = validFiles.maxFileSize ? file.size <= validFiles.maxFileSize : true;
+      return !isBlacklisted && isValidExt && isValidSize;
+    });
+    const clipped = validFiles.maxFileCount ? validated.slice(0, validFiles.maxFileCount) : validated;
+    setFileList(clipped);
+    setIsTouched(true);
+    setValue(field.name, clipped.length ? clipped : null, {
+      shouldValidate: true,
+      shouldDirty: true,
+      shouldTouch: true
+    });
+    onFilesChange(clipped);
+  }, [field.name, onFilesChange, setValue, fileDisplayStyle, validFiles]);
+  const handleFileInputChange = useCallback(event => {
+    const target = event.target;
+    const files = Array.from(target.files ?? []);
+    validateAndCommit(files);
+    trigger(field.name);
+    dialogOpenRef.current = false;
+  }, [trigger, field.name, validateAndCommit]);
+  const handleDrop = useCallback(dropped => {
+    validateAndCommit(dropped);
+    trigger(field.name);
+  }, [trigger, field.name, validateAndCommit]);
+  const handleFilesEdited = useCallback(files => {
+    // No need to validate again as they were already validated
+    // Changes may include renaming or removing files
+    setFileList(files);
+    setValue(field.name, files.length > 0 ? files : null, {
+      shouldValidate: true,
+      shouldDirty: true,
+      shouldTouch: true
+    });
+    onFilesChange(files);
+  }, [field.name, setValue, onFilesChange]);
+  const wrapperCssClass = `
+    formField 
+    dragAndDropFileUpload 
+    ${fileDisplayStyle === 'list' ? 'withFileList' : ''} 
+    ${labelStyle || ''}Style 
+    ${customCssClasses?.wrapper || ''} 
+    ${isTouched ? 'touched' : ''} 
+    ${typeof validation !== 'undefined' ? 'withValidation' : ''} 
+    ${label?.position === 'inset' ? 'insetLabel' : ''} 
+    ${isDragActive ? 'isDragActive' : ''}
+  `;
+  const labelProps = {
+    ...label,
+    inputId: inputId,
+    isRequired: validation && typeof validation.required !== 'undefined',
+    customContent
+  };
+  const labelStyleAsButtonClasses = generateButtonClass({
+    cssClass: 'button dragAndDropFileUploadButtonLabel',
+    buttonStyle: labelAsButtonStyles,
+    hideLabel: label.hide
+  });
+  const labelCssClass = `
+    ${labelStyle === 'button' ? labelStyleAsButtonClasses : ''}
+    ${customCssClasses?.label || ''} 
+    ${showSpinner ? 'withSpinner' : ''} 
+    ${label.hide ? 'hiddenLabel' : ''}
+  `;
+  return /*#__PURE__*/React.createElement(HookFormWrapper, null, /*#__PURE__*/React.createElement("div", {
+    className: wrapperCssClass,
+    onDragOver: e => {
+      e.preventDefault();
+      if (!isDragActive) setIsDragActive(true);
+    },
+    onDragLeave: e => {
+      if (e.currentTarget === e.target) setIsDragActive(false);
+    },
+    onDrop: e => {
+      e.preventDefault();
+      setIsDragActive(false);
+      const files = Array.from(e.dataTransfer?.files ?? []);
+      handleDrop(files);
+    }
+  }, /*#__PURE__*/React.createElement("label", {
+    id: label.labelId || `${inputId}_label`,
+    className: labelCssClass,
+    htmlFor: inputId,
+    onClick: () => {
+      dialogOpenRef.current = true;
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "dragAndDropFileUploadLabel"
+  }, labelUploadIcon || null, /*#__PURE__*/React.createElement(FormFieldLabel, labelProps), restrictionsTxt && /*#__PURE__*/React.createElement("span", {
+    className: "fileRestrictionsText"
+  }, restrictionsTxt)), /*#__PURE__*/React.createElement("span", {
+    className: "inputContainer"
+  }, /*#__PURE__*/React.createElement(InputFile, {
+    label,
+    field: {
+      ...field,
+      type: 'file',
+      id: inputId,
+      // ensure we can query it by id
+      defaultValue: '',
+      multiple,
+      accept: supportedFileTypes,
+      onInput: event => {
+        handleFileInputChange(event);
+      }
+    },
+    validation,
+    showSpinner,
+    customCssClasses,
+    customContent
+  })), showSpinner && /*#__PURE__*/React.createElement(Spinner, null), fileDisplayStyle === 'names' && activeFileList.length > 0 && /*#__PURE__*/React.createElement("span", {
+    className: "uploadedFileNames"
+  }, activeFileList.map((file, index) => /*#__PURE__*/React.createElement("small", {
+    key: index,
+    className: "uploadedFileName"
+  }, file.name, index < activeFileList.length - 1 ? ', ' : ''))), /*#__PURE__*/React.createElement(ValidationMessages, {
+    name: field.name,
+    validation: validation
+  })), fileDisplayStyle === 'list' && activeFileList.length > 0 && /*#__PURE__*/React.createElement(FileAttachmentsList, {
+    customFileListSettings: fileListSettings,
+    files: activeFileList,
+    onFilesRemoved: handleFilesEdited,
+    onFilesEdited: handleFilesEdited
+  })));
+};
+export default {
+  DragAndDropFileUpload
+};
+//# sourceMappingURL=DragAndDropFileUpload.js.map

package/dist/esm/components/form/formFields/subComponents/inputs/file/dragAndDrop/DragAndDropFileUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragAndDropFileUpload.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","arrowUpFromBracket","SvgIcon","useFormContext","HookFormWrapper","Spinner","FormFieldLabel","InputFile","ValidationMessages","NoHookFormContext","generateButtonClass","FileAttachmentsList","DEFAULT_UPLOAD_FILE_EXTENSIONS","DEFAULT_UPLOAD_FILE_TYPES","BLACKLISTED_FILE_TYPES","DragAndDropFileUpload","label","field","showSpinner","fileDisplayStyle","fileListSettings","fileList","validation","customContent","customCssClasses","labelStyle","labelAsButtonStyles","color","variant","labelUploadIcon","createElement","svgDefinition","multiple","restrictionsTxt","validFiles","extensions","fileTypes","maxFileCount","maxFileSize","onFilesChange","setValue","trigger","setError","activeFileList","setFileList","isTouched","setIsTouched","isDragActive","setIsDragActive","inputId","id","inputElRef","dialogOpenRef","current","document","getElementById","onFocus","noneSelected","files","length","name","window","addEventListener","removeEventListener","supportedFileTypes","join","validateAndCommit","validated","filter","file","ext","split","pop","toLowerCase","isBlacklisted","includes","isValidExt","isValidSize","size","clipped","slice","shouldValidate","shouldDirty","shouldTouch","handleFileInputChange","event","target","Array","from","handleDrop","dropped","handleFilesEdited","wrapperCssClass","wrapper","position","labelProps","isRequired","required","labelStyleAsButtonClasses","cssClass","buttonStyle","hideLabel","hide","labelCssClass","className","onDragOver","e","preventDefault","onDragLeave","currentTarget","onDrop","dataTransfer","labelId","htmlFor","onClick","type","defaultValue","accept","onInput","map","index","key","customFileListSettings","onFilesRemoved","onFilesEdited"],"sources":["../../../../../../../../../src/components/form/formFields/subComponents/inputs/file/dragAndDrop/DragAndDropFileUpload.tsx"],"sourcesContent":["'use client';\n\n/* eslint-disable no-unused-vars */\nimport React, { FormEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { arrowUpFromBracket } from '@x15ventures/x15-ui-library-icons/iconDefinitions';\nimport { SvgIcon } from '@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon';\nimport { useFormContext } from 'react-hook-form';\nimport { HookFormWrapper } from '../../../../../hookFormWrapper/HookFormWrapper';\nimport { Spinner } from '../../../../../../design/spinner/Spinner';\nimport { FormFieldLabel } from '../../../../subComponents/labels/FormFieldLabel';\nimport { InputFile } from '../../../../subComponents/inputs/file/InputFile';\nimport { ValidationMessages } from '../../../../../validation/ValidationMessages';\nimport { NoHookFormContext } from '../../../../utilities/formUtilities';\nimport { generateButtonClass } from '../../../../../buttons/button.helpers';\nimport { FileAttachmentsList } from '../fileAttachmentList/FileAttachmentsList';\nimport { DragAndDropFileUploadProps } from '../fileInputProps';\nimport {\n  DEFAULT_UPLOAD_FILE_EXTENSIONS,\n  DEFAULT_UPLOAD_FILE_TYPES,\n  BLACKLISTED_FILE_TYPES\n} from '../../../../../../../constants';\n\nimport './dragAndDropFileUpload.scss';\n\nexport const DragAndDropFileUpload: React.FC<DragAndDropFileUploadProps> = (\n  {\n    label,\n    field,\n    showSpinner,\n    fileDisplayStyle = 'names',\n    fileListSettings,\n    fileList,\n    validation,\n    customContent,\n    customCssClasses,\n    labelStyle = 'dragArea',\n    labelAsButtonStyles = { color: 'primary', variant: 'outline' },\n    labelUploadIcon = <SvgIcon svgDefinition={ arrowUpFromBracket } />,\n    multiple = false,\n    restrictionsTxt = '',\n    validFiles = {\n      extensions: DEFAULT_UPLOAD_FILE_EXTENSIONS,\n      fileTypes: DEFAULT_UPLOAD_FILE_TYPES,\n      maxFileCount: 5,\n      maxFileSize: 52428800 // 50 MB\n    },\n    onFilesChange = () => {}\n  }\n) => {\n  const { setValue, trigger, setError } = useFormContext() || NoHookFormContext;\n\n  const [activeFileList, setFileList] = useState<File[]>(fileList || []);\n  const [isTouched, setIsTouched] = useState(false);\n  const [isDragActive, setIsDragActive] = useState(false);\n\n  const inputId = field.id;\n  const inputElRef = useRef<HTMLInputElement | null>(null);\n  const dialogOpenRef = useRef(false);\n\n  useEffect(() => {\n    inputElRef.current = document.getElementById(inputId) as HTMLInputElement | null;\n  }, [inputId]);\n\n  // Detect “Cancel” -> dialog closes, window regains focus, but input had no change.\n  useEffect(() => {\n    const onFocus = () => {\n      if (!dialogOpenRef.current) { return; }\n      dialogOpenRef.current = false;\n      const noneSelected = !inputElRef.current?.files?.length;\n      if (noneSelected) {\n        // Trigger React Hook Form validators (e.g., required)\n        trigger(field.name);\n      }\n    };\n    window.addEventListener('focus', onFocus);\n    return () => window.removeEventListener('focus', onFocus);\n  }, [trigger, field.name]);\n\n  const supportedFileTypes = useMemo(\n    () => validFiles?.fileTypes?.join(', ') || '',\n    [validFiles?.fileTypes]\n  );\n\n  const validateAndCommit = useCallback(\n    (files: File[]) => {\n      // basic validations\n      const validated = files.filter((file) => {\n        const ext = file.name.split('.').pop()?.toLowerCase() || '';\n        const isBlacklisted = BLACKLISTED_FILE_TYPES.includes(ext);\n        const isValidExt = validFiles.extensions ? validFiles.extensions.includes(ext) : true;\n        const isValidSize = validFiles.maxFileSize ? file.size <= validFiles.maxFileSize : true;\n        return !isBlacklisted && isValidExt && isValidSize;\n      });\n\n      const clipped = validFiles.maxFileCount\n        ? validated.slice(0, validFiles.maxFileCount)\n        : validated;\n\n      setFileList(clipped);\n      setIsTouched(true);\n\n      setValue(field.name, clipped.length ? clipped : null, {\n        shouldValidate: true,\n        shouldDirty: true,\n        shouldTouch: true\n      });\n\n      onFilesChange(clipped);\n    },\n    [field.name, onFilesChange, setValue, fileDisplayStyle, validFiles]\n  );\n\n  const handleFileInputChange = useCallback((event: FormEvent<HTMLInputElement>) => {\n    const target = event.target as HTMLInputElement;\n    const files = Array.from(target.files ?? []);\n    validateAndCommit(files);\n    trigger(field.name);\n    dialogOpenRef.current = false;\n  }, [trigger, field.name, validateAndCommit]);\n\n  const handleDrop = useCallback((dropped: File[]) => {\n    validateAndCommit(dropped);\n    trigger(field.name);\n  }, [trigger, field.name, validateAndCommit]);\n\n  const handleFilesEdited = useCallback((files: File[]) => {\n    // No need to validate again as they were already validated\n    // Changes may include renaming or removing files\n    setFileList(files);\n    setValue(field.name, files.length > 0 ? files : null, {\n      shouldValidate: true,\n      shouldDirty: true,\n      shouldTouch: true\n    });\n    onFilesChange(files);\n  }, [field.name, setValue, onFilesChange]);\n\n  const wrapperCssClass = `\n    formField \n    dragAndDropFileUpload \n    ${ fileDisplayStyle === 'list' ? 'withFileList' : '' } \n    ${ labelStyle || '' }Style \n    ${ customCssClasses?.wrapper || '' } \n    ${ isTouched ? 'touched' : '' } \n    ${ typeof validation !== 'undefined' ? 'withValidation' : '' } \n    ${ label?.position === 'inset' ? 'insetLabel' : '' } \n    ${ isDragActive ? 'isDragActive' : '' }\n  `;\n\n  const labelProps = {\n    ...label,\n    inputId: inputId,\n    isRequired: validation && typeof validation.required !== 'undefined',\n    customContent\n  };\n\n  const labelStyleAsButtonClasses = generateButtonClass({\n    cssClass: 'button dragAndDropFileUploadButtonLabel',\n    buttonStyle: labelAsButtonStyles,\n    hideLabel: label.hide\n  });\n\n  const labelCssClass = `\n    ${ labelStyle === 'button' ? labelStyleAsButtonClasses : '' }\n    ${ customCssClasses?.label || '' } \n    ${ showSpinner ? 'withSpinner' : '' } \n    ${ label.hide ? 'hiddenLabel' : '' }\n  `;\n\n  return (\n    <HookFormWrapper>\n      <div\n        className={ wrapperCssClass }\n        onDragOver={ (e) => {\n          e.preventDefault();\n          if (!isDragActive) setIsDragActive(true);\n        } }\n        onDragLeave={ (e) => {\n          if (e.currentTarget === e.target) setIsDragActive(false);\n        } }\n        onDrop={ (e) => {\n          e.preventDefault();\n          setIsDragActive(false);\n          const files = Array.from(e.dataTransfer?.files ?? []);\n          handleDrop(files);\n        } }\n      >\n        <label\n          id={ label.labelId || `${ inputId }_label` }\n          className={ labelCssClass }\n          htmlFor={ inputId }\n          onClick={ () => { dialogOpenRef.current = true; } }\n        >\n          <span className=\"dragAndDropFileUploadLabel\">\n            { labelUploadIcon || null }\n            <FormFieldLabel { ...labelProps } />\n            { restrictionsTxt && <span className=\"fileRestrictionsText\">{ restrictionsTxt }</span> }\n          </span>\n\n          <span className=\"inputContainer\">\n            <InputFile\n              {\n                ...{\n                  label,\n                  field: {\n                    ...field,\n                    type: 'file',\n                    id: inputId,             // ensure we can query it by id\n                    defaultValue: '',\n                    multiple,\n                    accept: supportedFileTypes,\n                    onInput: (event: FormEvent<HTMLInputElement>) => {\n                      handleFileInputChange(event);\n                    }\n                  },\n                  validation,\n                  showSpinner,\n                  customCssClasses,\n                  customContent\n                }\n              }\n            />\n          </span>\n\n          { showSpinner && <Spinner /> }\n\n          { fileDisplayStyle === 'names' && activeFileList.length > 0 && (\n            <span className=\"uploadedFileNames\">\n              { activeFileList.map((file, index) => (\n                <small key={ index } className=\"uploadedFileName\">\n                  { file.name }{ index < activeFileList.length - 1 ? ', ' : '' }\n                </small>\n              )) }\n            </span>\n          ) }\n\n          <ValidationMessages name={ field.name } validation={ validation } />\n        </label>\n\n        { fileDisplayStyle === 'list' && activeFileList.length > 0 && (\n          <FileAttachmentsList\n            customFileListSettings={ fileListSettings }\n            files={ activeFileList }\n            onFilesRemoved={ handleFilesEdited }\n            onFilesEdited={ handleFilesEdited }\n          />\n        ) }\n      </div>\n    </HookFormWrapper>\n  );\n};\n\nexport default { DragAndDropFileUpload };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/form/formFields/subComponents/inputs/file/dragAndDrop/dragAndDropFileUpload.css

@@ -0,0 +1,96 @@
+.dragAndDropFileUpload,
+.dragAndDropFileUpload.withValidation {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.dragAndDropFileUpload label,
+.dragAndDropFileUpload.withValidation label {
+  border: 2px dashed #d3dee4;
+  border-radius: 5px;
+  padding: 20px;
+  cursor: pointer;
+}
+.dragAndDropFileUpload label svg,
+.dragAndDropFileUpload.withValidation label svg {
+  width: 40px;
+  height: 40px;
+}
+.dragAndDropFileUpload label svg path,
+.dragAndDropFileUpload.withValidation label svg path {
+  stroke-width: 2px;
+}
+.dragAndDropFileUpload label .dragAndDropFileUploadLabel,
+.dragAndDropFileUpload.withValidation label .dragAndDropFileUploadLabel {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+.dragAndDropFileUpload label .dragAndDropFileUploadLabel .fileRestrictionsText,
+.dragAndDropFileUpload.withValidation label .dragAndDropFileUploadLabel .fileRestrictionsText {
+  padding: 10px 0;
+  display: block;
+  font-size: 14px;
+}
+.dragAndDropFileUpload label .inputContainer,
+.dragAndDropFileUpload.withValidation label .inputContainer {
+  opacity: 0.01;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  box-sizing: border-box;
+  display: block;
+}
+.dragAndDropFileUpload.buttonStyle,
+.dragAndDropFileUpload.withValidation.buttonStyle {
+  padding: 0;
+}
+.dragAndDropFileUpload.buttonStyle label .dragAndDropFileUploadLabel,
+.dragAndDropFileUpload.withValidation.buttonStyle label .dragAndDropFileUploadLabel {
+  justify-content: center;
+  flex-direction: column;
+}
+.dragAndDropFileUpload.dragAreaStyle label,
+.dragAndDropFileUpload.withValidation.dragAreaStyle label {
+  text-align: center;
+  padding: 20px;
+}
+.dragAndDropFileUpload.dragAreaStyle label .dragAndDropFileUploadLabel,
+.dragAndDropFileUpload.withValidation.dragAreaStyle label .dragAndDropFileUploadLabel {
+  flex-direction: column;
+}
+.dragAndDropFileUpload.dragAreaStyle label .dragAndDropFileUploadLabel .fileRestrictionsText,
+.dragAndDropFileUpload.withValidation.dragAreaStyle label .dragAndDropFileUploadLabel .fileRestrictionsText {
+  font-size: 12px;
+  max-width: 450px;
+}
+.dragAndDropFileUpload.dragAreaStyle label .dragAndDropFileUploadLabel .fileRestrictionsText span strong,
+.dragAndDropFileUpload.withValidation.dragAreaStyle label .dragAndDropFileUploadLabel .fileRestrictionsText span strong {
+  font-weight: normal;
+}
+.dragAndDropFileUpload.dragAreaStyle label .dragAndDropFileUploadLabel .fileRestrictionsText span em,
+.dragAndDropFileUpload.withValidation.dragAreaStyle label .dragAndDropFileUploadLabel .fileRestrictionsText span em {
+  font-style: normal;
+}
+.dragAndDropFileUpload.dragAreaStyle label .dragAndDropFileUploadLabel .fileRestrictionsText span small,
+.dragAndDropFileUpload.withValidation.dragAreaStyle label .dragAndDropFileUploadLabel .fileRestrictionsText span small {
+  white-space: nowrap;
+}
+.dragAndDropFileUpload.simpleStyle label,
+.dragAndDropFileUpload.withValidation.simpleStyle label {
+  padding: 10px;
+  border: none;
+}
+.dragAndDropFileUpload.simpleStyle label .dragAndDropFileUploadLabel,
+.dragAndDropFileUpload.withValidation.simpleStyle label .dragAndDropFileUploadLabel {
+  column-gap: 10px;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+.dragAndDropFileUpload.simpleStyle label .dragAndDropFileUploadLabel .fileRestrictionsText,
+.dragAndDropFileUpload.withValidation.simpleStyle label .dragAndDropFileUploadLabel .fileRestrictionsText {
+  font-size: 11px;
+  flex: none;
+}

package/dist/esm/components/form/formFields/subComponents/inputs/file/fileAttachmentList/FileAttachmentsList.js

@@ -0,0 +1,172 @@
+/* eslint-disable no-unused-vars */
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { SimpleButton } from '../../../../../buttons/SimpleButton';
+import { pencil, trash, xmark, check } from '@x15ventures/x15-ui-library-icons/iconDefinitions';
+import { SvgIcon } from '@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon';
+import { deepMergeObjects } from '../../../../../../../helpers';
+import './fileAttachmentsList.css';
+export const DefaultFileListSettings = {
+  isEditable: true,
+  design: {
+    animation: 'reveal',
+    editing: {
+      delete: {
+        icon: /*#__PURE__*/React.createElement(SvgIcon, {
+          svgDefinition: trash
+        }),
+        label: 'Remove file',
+        disable: false,
+        buttonStyle: {
+          variant: 'icon-only',
+          size: 'compact'
+        }
+      },
+      edit: {
+        icon: /*#__PURE__*/React.createElement(SvgIcon, {
+          svgDefinition: pencil
+        }),
+        label: 'Edit file name',
+        disable: false,
+        buttonStyle: {
+          variant: 'icon-only',
+          size: 'compact'
+        }
+      }
+    },
+    heading: {
+      isVisible: false,
+      prefix: 'Attached files',
+      includeFileCount: true
+    }
+  }
+};
+export const FileAttachmentsList = ({
+  customFileListSettings,
+  onFilesRemoved = () => {},
+  onFilesEdited = () => {},
+  files
+}) => {
+  const [adjustedFiles, setAdjustedFiles] = useState(files);
+  const [editingIndex, setEditingIndex] = useState(null);
+  const filesList = /*#__PURE__*/React.createRef();
+  const fileListSettings = deepMergeObjects({
+    baseObject: DefaultFileListSettings,
+    overrideObject: customFileListSettings || {}
+  });
+  useEffect(() => {
+    setAdjustedFiles(files);
+  }, [files]);
+  const handleFileNameEdit = (index, newName) => {
+    const adjustedName = newName || filesList.current?.children[index].querySelector('input')?.value.trim();
+    const updatedFiles = adjustedFiles.map((file, i) => {
+      if (i === index) {
+        return new File([file], adjustedName, {
+          type: file.type
+        });
+      }
+      return file;
+    });
+    setAdjustedFiles(updatedFiles);
+    setEditingIndex(null);
+    onFilesEdited(updatedFiles);
+  };
+  const handleFileRemoved = index => {
+    const updatedFiles = adjustedFiles.filter((_, i) => i !== index);
+    setAdjustedFiles(updatedFiles);
+    onFilesRemoved(updatedFiles);
+  };
+  const EditIcon = () => fileListSettings.design?.editing?.edit?.icon || /*#__PURE__*/React.createElement(SvgIcon, {
+    svgDefinition: pencil
+  });
+  const DeleteIcon = () => fileListSettings.design?.editing?.delete?.icon || /*#__PURE__*/React.createElement(SvgIcon, {
+    svgDefinition: trash
+  });
+  const CancelIcon = () => /*#__PURE__*/React.createElement(SvgIcon, {
+    svgDefinition: xmark
+  });
+  const SaveIcon = () => /*#__PURE__*/React.createElement(SvgIcon, {
+    svgDefinition: check,
+    customCssClass: "saveIcon"
+  });
+  const isFileNameEditable = fileListSettings.isEditable && !fileListSettings.design?.editing?.edit?.disable;
+  const isFileDeletable = fileListSettings.isEditable && !fileListSettings.design?.editing?.delete?.disable;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "fileAttachmentsList"
+  }, fileListSettings.design?.heading?.isVisible && /*#__PURE__*/React.createElement("h4", null, fileListSettings.design?.heading?.prefix || 'Attached files', fileListSettings.design?.heading?.includeFileCount && ` (${adjustedFiles.length})`), /*#__PURE__*/React.createElement("div", {
+    className: `fileUploadList ${adjustedFiles.length > 0 ? 'withFiles' : 'noFiles'}`
+  }, adjustedFiles.length > 0 && /*#__PURE__*/React.createElement("ul", {
+    className: "noBullet",
+    ref: filesList
+  }, adjustedFiles.map((file, index) => /*#__PURE__*/React.createElement("li", {
+    key: index
+  }, editingIndex === index && isFileNameEditable ? /*#__PURE__*/React.createElement("span", {
+    className: "editFileNameContainer"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    "aria-label": `Edit file name (${file.name})`,
+    defaultValue: file.name,
+    className: "fileNameInput",
+    onKeyDown: e => {
+      if (e.key === 'Enter') {
+        const newName = e.target.value.trim();
+        if (newName && newName !== file.name) {
+          handleFileNameEdit(index, newName);
+        }
+      } else if (e.key === 'Escape' || e.key === 'Tab') {
+        setEditingIndex(null);
+      }
+    },
+    autoFocus: true
+  }), /*#__PURE__*/React.createElement(SimpleButton, {
+    label: "Cancel",
+    hideLabel: true,
+    buttonStyle: {
+      variant: 'icon-only',
+      size: 'compact'
+    },
+    leftIcon: {
+      icon: /*#__PURE__*/React.createElement(CancelIcon, null)
+    },
+    id: `cancelEditFileButton${index}`,
+    onClickHandler: () => setEditingIndex(null)
+  }), /*#__PURE__*/React.createElement(SimpleButton, {
+    label: "Save",
+    hideLabel: true,
+    buttonStyle: {
+      variant: 'icon-only',
+      size: 'compact',
+      color: 'primary'
+    },
+    leftIcon: {
+      icon: /*#__PURE__*/React.createElement(SaveIcon, null)
+    },
+    id: `saveEditFileButton${index}`,
+    onClickHandler: () => handleFileNameEdit(index)
+  })) : /*#__PURE__*/React.createElement("span", {
+    className: "fileNameDisplay"
+  }, file.name), isFileNameEditable && /*#__PURE__*/React.createElement(SimpleButton, {
+    label: "Edit file name",
+    hideLabel: true,
+    buttonStyle: fileListSettings.design?.editing?.edit?.buttonStyle,
+    leftIcon: {
+      icon: /*#__PURE__*/React.createElement(EditIcon, null)
+    },
+    id: `editFileButton${index}`,
+    onClickHandler: () => setEditingIndex(index)
+  }), isFileDeletable && /*#__PURE__*/React.createElement(SimpleButton, {
+    label: "Remove file",
+    hideLabel: true,
+    buttonStyle: fileListSettings.design?.editing?.delete?.buttonStyle,
+    leftIcon: {
+      icon: /*#__PURE__*/React.createElement(DeleteIcon, null)
+    },
+    id: `removeFileButton${index}`,
+    onClickHandler: () => handleFileRemoved(index)
+  }))))));
+};
+export default {
+  FileAttachmentsList
+};
+//# sourceMappingURL=FileAttachmentsList.js.map

package/dist/esm/components/form/formFields/subComponents/inputs/file/fileAttachmentList/FileAttachmentsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileAttachmentsList.js","names":["React","useEffect","useState","SimpleButton","pencil","trash","xmark","check","SvgIcon","deepMergeObjects","DefaultFileListSettings","isEditable","design","animation","editing","delete","icon","createElement","svgDefinition","label","disable","buttonStyle","variant","size","edit","heading","isVisible","prefix","includeFileCount","FileAttachmentsList","customFileListSettings","onFilesRemoved","onFilesEdited","files","adjustedFiles","setAdjustedFiles","editingIndex","setEditingIndex","filesList","createRef","fileListSettings","baseObject","overrideObject","handleFileNameEdit","index","newName","adjustedName","current","children","querySelector","value","trim","updatedFiles","map","file","i","File","type","handleFileRemoved","filter","_","EditIcon","DeleteIcon","CancelIcon","SaveIcon","customCssClass","isFileNameEditable","isFileDeletable","className","length","ref","key","name","defaultValue","onKeyDown","e","target","autoFocus","hideLabel","leftIcon","id","onClickHandler","color"],"sources":["../../../../../../../../../src/components/form/formFields/subComponents/inputs/file/fileAttachmentList/FileAttachmentsList.tsx"],"sourcesContent":["/* eslint-disable no-unused-vars */\n'use client';\nimport React, { FC, useEffect, useState } from 'react';\nimport { SimpleButton } from '../../../../../buttons/SimpleButton';\nimport { pencil, trash, xmark, check } from '@x15ventures/x15-ui-library-icons/iconDefinitions';\nimport { SvgIcon } from '@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon';\nimport { FileAttachmentListSettingsProps } from '../fileInputProps';\nimport { deepMergeObjects } from '../../../../../../../helpers';\n\nimport './fileAttachmentsList.scss';\n\ninterface FileAttachmentsProps {\n  customFileListSettings?: FileAttachmentListSettingsProps;\n  onFilesRemoved: (files: File[]) => void;\n  onFilesEdited: (files: File[]) => void;\n  files: File[];\n}\n\nexport const DefaultFileListSettings: FileAttachmentListSettingsProps = {\n  isEditable: true,\n  design: {\n    animation: 'reveal',\n    editing: {\n      delete: {\n        icon: <SvgIcon svgDefinition={ trash }/>,\n        label: 'Remove file',\n        disable: false,\n        buttonStyle: {\n          variant: 'icon-only',\n          size: 'compact',\n        }\n      },\n      edit: {\n        icon: <SvgIcon svgDefinition={ pencil }/>,\n        label: 'Edit file name',\n        disable: false,\n        buttonStyle: {\n          variant: 'icon-only',\n          size: 'compact',\n        }\n      }\n    },\n    heading: {\n      isVisible: false,\n      prefix: 'Attached files',\n      includeFileCount: true\n    }\n  }\n};\n\nexport const FileAttachmentsList: FC<FileAttachmentsProps> = (\n  {\n    customFileListSettings,\n    onFilesRemoved = () => {},\n    onFilesEdited = () => {},\n    files\n  }\n) => {\n  const [adjustedFiles, setAdjustedFiles] = useState<File[]>(files);\n  const [editingIndex, setEditingIndex] = useState<number | null>(null);\n  const filesList = React.createRef<HTMLUListElement>();\n\n  const fileListSettings: FileAttachmentListSettingsProps = deepMergeObjects({\n    baseObject: DefaultFileListSettings,\n    overrideObject: customFileListSettings || {}\n  });\n\n  useEffect(() => {\n    setAdjustedFiles(files);\n  }, [files]);\n\n  const handleFileNameEdit = (index: number, newName?: string) => {\n    const adjustedName = newName || (filesList.current?.children[index].querySelector('input') as HTMLInputElement)?.value.trim();\n\n    const updatedFiles = adjustedFiles.map((file, i) => {\n      if (i === index) {\n        return new File([file], adjustedName, { type: file.type });\n      }\n      return file;\n    });\n    setAdjustedFiles(updatedFiles);\n    setEditingIndex(null);\n    onFilesEdited(updatedFiles);\n  };\n\n  const handleFileRemoved = (index: number) => {\n    const updatedFiles = adjustedFiles.filter((_, i) => i !== index);\n    setAdjustedFiles(updatedFiles);\n    onFilesRemoved(updatedFiles);\n  };\n\n  const EditIcon: FC = () => fileListSettings.design?.editing?.edit?.icon || <SvgIcon svgDefinition={ pencil } />;\n  const DeleteIcon: FC = () => fileListSettings.design?.editing?.delete?.icon || <SvgIcon svgDefinition={ trash } />;\n  const CancelIcon: FC = () => <SvgIcon svgDefinition={ xmark } />;\n  const SaveIcon: FC = () => <SvgIcon svgDefinition={ check } customCssClass=\"saveIcon\" />;\n\n  const isFileNameEditable = fileListSettings.isEditable && !fileListSettings.design?.editing?.edit?.disable;\n  const isFileDeletable = fileListSettings.isEditable && !fileListSettings.design?.editing?.delete?.disable;\n\n  return (\n    <div className=\"fileAttachmentsList\">\n      {\n        fileListSettings.design?.heading?.isVisible && (\n          <h4>\n            {\n              fileListSettings.design?.heading?.prefix || 'Attached files'\n            }\n            {\n              fileListSettings.design?.heading?.includeFileCount && ` (${ adjustedFiles.length })`\n            }\n          </h4>\n        )\n      }\n      <div className={ `fileUploadList ${ adjustedFiles.length > 0 ? 'withFiles' : 'noFiles' }` }>\n        { adjustedFiles.length > 0 && (\n          <ul className=\"noBullet\" ref={ filesList }>\n            { adjustedFiles.map((file, index) => (\n              <li key={ index }>\n                {\n                  editingIndex === index && isFileNameEditable ? (\n                    <span className=\"editFileNameContainer\">\n                      <input\n                        type=\"text\"\n                        aria-label={ `Edit file name (${ file.name })` }\n                        defaultValue={ file.name }\n                        className=\"fileNameInput\"\n                        onKeyDown={ (e) => {\n                          if (e.key === 'Enter') {\n                            const newName = (e.target as HTMLInputElement).value.trim();\n                            if (newName && newName !== file.name) {\n                              handleFileNameEdit(index, newName);\n                            }\n                          } else if (e.key === 'Escape' || e.key === 'Tab') {\n                            setEditingIndex(null);\n                          }\n                        } }\n                        autoFocus\n                      />\n                      <SimpleButton\n                        label=\"Cancel\"\n                        hideLabel\n                        buttonStyle={ { variant: 'icon-only', size: 'compact' } }\n                        leftIcon={ { icon: <CancelIcon /> } }\n                        id={ `cancelEditFileButton${ index }` }\n                        onClickHandler={ () => setEditingIndex(null) }\n                      />\n                      <SimpleButton\n                        label=\"Save\"\n                        hideLabel\n                        buttonStyle={ { variant: 'icon-only', size: 'compact', color: 'primary' } }\n                        leftIcon={ { icon: <SaveIcon /> } }\n                        id={ `saveEditFileButton${ index }` }\n                        onClickHandler={ () => handleFileNameEdit(index) }\n                      />\n                    </span>\n                  ) :\n                    <span className=\"fileNameDisplay\">{ file.name }</span>\n                }\n\n                {\n                  isFileNameEditable && (\n                    <SimpleButton\n                      label=\"Edit file name\"\n                      hideLabel\n                      buttonStyle={ fileListSettings.design?.editing?.edit?.buttonStyle }\n                      leftIcon={ { icon: <EditIcon /> } }\n                      id={ `editFileButton${ index }` }\n                      onClickHandler={ () => setEditingIndex(index) }\n                    />\n                  )\n                }\n\n                {\n                  isFileDeletable && (\n                    <SimpleButton\n                      label=\"Remove file\"\n                      hideLabel\n                      buttonStyle={ fileListSettings.design?.editing?.delete?.buttonStyle }\n                      leftIcon={ { icon: <DeleteIcon /> } }\n                      id={ `removeFileButton${ index }` }\n                      onClickHandler={ () => handleFileRemoved(index) }\n                    />\n                  )\n                }\n              </li>\n            )) }\n          </ul>\n        ) }\n      </div>\n    </div>\n  );\n};\n\nexport default {\n  FileAttachmentsList\n};\n"],"mappings":"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","ignoreList":[]}