@x15ventures/x15-ui-library 3.11.4

package/dist/cjs/components/form/formFields/subComponents/inputs/date/InputDate.js

@@ -0,0 +1,70 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputDate = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _InputText = require("../text/InputText");
+var _NativeDateCalendarPopupTrigger = require("./NativeDateCalendarPopupTrigger");
+var _dateHelpers = require("../../../../../../helpers/dateHelpers");
+const InputDate = props => {
+  const {
+    field,
+    validation,
+    customContent
+  } = props;
+  const minDate = field.min;
+  const maxDate = field.max;
+  const minDateMessage = () => {
+    if (!minDate) {
+      return '';
+    }
+    return typeof validation?.min === 'string' ? validation.min : `Please select a date on or after ${(0, _dateHelpers.dateToShortReadableDate)(minDate)}.`;
+  };
+  const maxDateMessage = () => {
+    if (!maxDate) {
+      return '';
+    }
+    return typeof validation?.max === 'string' ? validation.max : `Please select a date on or before ${(0, _dateHelpers.dateToShortReadableDate)(maxDate)}.`;
+  };
+
+  // Use the min max logic above but allow them to override with custom logic if they prefer
+  const customValidation = {
+    ...validation,
+    ...(minDate && {
+      min: {
+        value: minDate,
+        message: minDateMessage()
+      }
+    }),
+    ...(maxDate && {
+      max: {
+        value: maxDate,
+        message: maxDateMessage()
+      }
+    })
+  };
+  const fieldProps = {
+    ...field,
+    type: 'date'
+  };
+  const adjustedProps = {
+    ...props,
+    field: fieldProps,
+    validation: customValidation
+  };
+  return /*#__PURE__*/_react.default.createElement(_InputText.InputText, (0, _extends2.default)({}, adjustedProps, {
+    customContent: {
+      ...customContent,
+      postField: /*#__PURE__*/_react.default.createElement(_NativeDateCalendarPopupTrigger.NativeDateCalendarPopupTrigger, {
+        dateInputElementId: field.id
+      })
+    }
+  }));
+};
+exports.InputDate = InputDate;
+//# sourceMappingURL=InputDate.js.map

package/dist/cjs/components/form/formFields/subComponents/inputs/date/InputDate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputDate.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","InputDate","_extends2","_react","_InputText","_NativeDateCalendarPopupTrigger","_dateHelpers","props","field","validation","customContent","minDate","min","maxDate","max","minDateMessage","dateToShortReadableDate","maxDateMessage","customValidation","message","fieldProps","type","adjustedProps","default","createElement","InputText","postField","NativeDateCalendarPopupTrigger","dateInputElementId","id"],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/date/InputDate.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { InputText, InputTextProps } from '../text/InputText';\nimport { NativeDateCalendarPopupTrigger } from './NativeDateCalendarPopupTrigger';\nimport { dateToShortReadableDate } from '../../../../../../helpers/dateHelpers';\n\nexport const InputDate: React.FC<InputTextProps> = (props) => {\n  const {\n    field,\n    validation,\n    customContent\n  } = props;\n\n  const minDate = field.min;\n  const maxDate = field.max;\n\n  const minDateMessage = () => {\n    if (!minDate) {\n      return '';\n    }\n    return typeof validation?.min === 'string' ? validation.min : `Please select a date on or after ${ dateToShortReadableDate(minDate) }.`;\n  };\n\n  const maxDateMessage = () => {\n    if (!maxDate) {\n      return '';\n    }\n    return typeof validation?.max === 'string' ? validation.max : `Please select a date on or before ${ dateToShortReadableDate(maxDate) }.`;\n  };\n\n  // Use the min max logic above but allow them to override with custom logic if they prefer\n  const customValidation = {\n    ...validation,\n    ...(minDate && {\n      min: {\n        value: minDate,\n        message: minDateMessage(),\n      }\n    }),\n    ...(maxDate && {\n      max: {\n        value: maxDate,\n        message: maxDateMessage(),\n      }\n    })\n  };\n\n  const fieldProps = {\n    ...field,\n    type: 'date',\n  };\n\n  const adjustedProps = {\n    ...props,\n    field: fieldProps,\n    validation: customValidation\n  };\n\n  return (\n    <InputText\n      { ...adjustedProps }\n      customContent={\n        {\n          ...customContent,\n          postField: <NativeDateCalendarPopupTrigger dateInputElementId={ field.id } />\n        }\n      }\n    />\n  );\n};\n"],"mappings":";AAAA,YAAY;;AAAC,IAAAA,sBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,SAAA;AAAA,IAAAC,SAAA,GAAAP,sBAAA,CAAAC,OAAA;AAEb,IAAAO,MAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,UAAA,GAAAR,OAAA;AACA,IAAAS,+BAAA,GAAAT,OAAA;AACA,IAAAU,YAAA,GAAAV,OAAA;AAEO,MAAMK,SAAmC,GAAIM,KAAK,IAAK;EAC5D,MAAM;IACJC,KAAK;IACLC,UAAU;IACVC;EACF,CAAC,GAAGH,KAAK;EAET,MAAMI,OAAO,GAAGH,KAAK,CAACI,GAAG;EACzB,MAAMC,OAAO,GAAGL,KAAK,CAACM,GAAG;EAEzB,MAAMC,cAAc,GAAGA,CAAA,KAAM;IAC3B,IAAI,CAACJ,OAAO,EAAE;MACZ,OAAO,EAAE;IACX;IACA,OAAO,OAAOF,UAAU,EAAEG,GAAG,KAAK,QAAQ,GAAGH,UAAU,CAACG,GAAG,GAAG,oCAAqC,IAAAI,oCAAuB,EAACL,OAAO,CAAC,GAAI;EACzI,CAAC;EAED,MAAMM,cAAc,GAAGA,CAAA,KAAM;IAC3B,IAAI,CAACJ,OAAO,EAAE;MACZ,OAAO,EAAE;IACX;IACA,OAAO,OAAOJ,UAAU,EAAEK,GAAG,KAAK,QAAQ,GAAGL,UAAU,CAACK,GAAG,GAAG,qCAAsC,IAAAE,oCAAuB,EAACH,OAAO,CAAC,GAAI;EAC1I,CAAC;;EAED;EACA,MAAMK,gBAAgB,GAAG;IACvB,GAAGT,UAAU;IACb,IAAIE,OAAO,IAAI;MACbC,GAAG,EAAE;QACHZ,KAAK,EAAEW,OAAO;QACdQ,OAAO,EAAEJ,cAAc,CAAC;MAC1B;IACF,CAAC,CAAC;IACF,IAAIF,OAAO,IAAI;MACbC,GAAG,EAAE;QACHd,KAAK,EAAEa,OAAO;QACdM,OAAO,EAAEF,cAAc,CAAC;MAC1B;IACF,CAAC;EACH,CAAC;EAED,MAAMG,UAAU,GAAG;IACjB,GAAGZ,KAAK;IACRa,IAAI,EAAE;EACR,CAAC;EAED,MAAMC,aAAa,GAAG;IACpB,GAAGf,KAAK;IACRC,KAAK,EAAEY,UAAU;IACjBX,UAAU,EAAES;EACd,CAAC;EAED,oBACEf,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACpB,UAAA,CAAAqB,SAAS,MAAAvB,SAAA,CAAAqB,OAAA,MACHD,aAAa;IAClBZ,aAAa,EACX;MACE,GAAGA,aAAa;MAChBgB,SAAS,eAAEvB,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACnB,+BAAA,CAAAsB,8BAA8B;QAACC,kBAAkB,EAAGpB,KAAK,CAACqB;MAAI,CAAE;IAC9E;EACD,EACF,CAAC;AAEN,CAAC;AAAC9B,OAAA,CAAAE,SAAA,GAAAA,SAAA","ignoreList":[]}

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

@@ -0,0 +1,35 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NativeDateCalendarPopupTrigger = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SimpleButton = require("../../../../buttons/SimpleButton");
+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.default.createElement(_SimpleButton.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'
+    }
+  });
+};
+exports.NativeDateCalendarPopupTrigger = NativeDateCalendarPopupTrigger;
+//# sourceMappingURL=NativeDateCalendarPopupTrigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NativeDateCalendarPopupTrigger.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","NativeDateCalendarPopupTrigger","_react","_SimpleButton","dateInputElementId","onPopupOpen","ShowCalendarPopup","event","preventDefault","dateInputElement","document","getElementById","showPicker","default","createElement","SimpleButton","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;;AAAC,IAAAA,sBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,8BAAA;AAEb,IAAAC,MAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,aAAA,GAAAP,OAAA;AAQO,MAAMK,8BAA6E,GAAGA,CAC3F;EACEG,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,oBACEH,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACX,aAAA,CAAAY,YAAY;IACXC,SAAS;IACTC,KAAK,EAAC,+DAA+D;IACrEC,KAAK,EAAC,qBAAqB;IAC3BC,EAAE,EAAG,GAAIf,kBAAkB,kBAAqB;IAChDgB,cAAc,EAAGd,iBAAmB;IACpCe,SAAS,EAAG;MAAEC,IAAI,EAAE;IAAW;EAAG,CACnC,CAAC;AAEN,CAAC;AAACvB,OAAA,CAAAE,8BAAA,GAAAA,8BAAA","ignoreList":[]}

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

@@ -0,0 +1,25 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.InputFile = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _InputText = require("../text/InputText");
+require("./inputFile.css");
+// PRIVATE COMPONENT
+// Do not use this directly. It must be created via a FormField component
+
+const InputFile = ({
+  ...props
+}) => /*#__PURE__*/_react.default.createElement(_InputText.InputText, (0, _extends2.default)({}, props, {
+  type: "file"
+}));
+exports.InputFile = InputFile;
+var _default = exports.default = {
+  InputFile
+};
+//# sourceMappingURL=InputFile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputFile.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","default","InputFile","_extends2","_react","_InputText","props","createElement","InputText","type","_default"],"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,IAAAA,sBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,OAAA,GAAAF,OAAA,CAAAG,SAAA;AAAA,IAAAC,SAAA,GAAAR,sBAAA,CAAAC,OAAA;AAEb,IAAAQ,MAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,UAAA,GAAAT,OAAA;AAIAA,OAAA;AAEA;AACA;;AAEO,MAAMM,SAAmC,GAAGA,CACjD;EACE,GAAGI;AACL,CAAC,kBAEDF,MAAA,CAAAH,OAAA,CAAAM,aAAA,CAACF,UAAA,CAAAG,SAAS,MAAAL,SAAA,CAAAF,OAAA,MACHK,KAAK;EACVG,IAAI,EAAC;AAAM,EACZ,CACF;AAACV,OAAA,CAAAG,SAAA,GAAAA,SAAA;AAAA,IAAAQ,QAAA,GAAAX,OAAA,CAAAE,OAAA,GAEa;EAAEC;AAAU,CAAC","ignoreList":[]}

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

@@ -0,0 +1,218 @@
+"use strict";
+'use client';
+
+/* eslint-disable no-unused-vars */
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DragAndDropFileUpload = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _iconDefinitions = require("@x15ventures/x15-ui-library-icons/iconDefinitions");
+var _SvgIcon = require("@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon");
+var _reactHookForm = require("react-hook-form");
+var _HookFormWrapper = require("../../../../../hookFormWrapper/HookFormWrapper");
+var _Spinner = require("../../../../../../design/spinner/Spinner");
+var _FormFieldLabel = require("../../../../subComponents/labels/FormFieldLabel");
+var _InputFile = require("../../../../subComponents/inputs/file/InputFile");
+var _ValidationMessages = require("../../../../../validation/ValidationMessages");
+var _formUtilities = require("../../../../utilities/formUtilities");
+var _button = require("../../../../../buttons/button.helpers");
+var _FileAttachmentsList = require("../fileAttachmentList/FileAttachmentsList");
+var _constants = require("../../../../../../../constants");
+require("./dragAndDropFileUpload.css");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const DragAndDropFileUpload = ({
+  label,
+  field,
+  showSpinner,
+  fileDisplayStyle = 'names',
+  fileListSettings,
+  fileList,
+  validation,
+  customContent,
+  customCssClasses,
+  labelStyle = 'dragArea',
+  labelAsButtonStyles = {
+    color: 'primary',
+    variant: 'outline'
+  },
+  labelUploadIcon = /*#__PURE__*/_react.default.createElement(_SvgIcon.SvgIcon, {
+    svgDefinition: _iconDefinitions.arrowUpFromBracket
+  }),
+  multiple = false,
+  restrictionsTxt = '',
+  validFiles = {
+    extensions: _constants.DEFAULT_UPLOAD_FILE_EXTENSIONS,
+    fileTypes: _constants.DEFAULT_UPLOAD_FILE_TYPES,
+    maxFileCount: 5,
+    maxFileSize: 52428800 // 50 MB
+  },
+  onFilesChange = () => {}
+}) => {
+  const {
+    setValue,
+    trigger,
+    setError
+  } = (0, _reactHookForm.useFormContext)() || _formUtilities.NoHookFormContext;
+  const [activeFileList, setFileList] = (0, _react.useState)(fileList || []);
+  const [isTouched, setIsTouched] = (0, _react.useState)(false);
+  const [isDragActive, setIsDragActive] = (0, _react.useState)(false);
+  const inputId = field.id;
+  const inputElRef = (0, _react.useRef)(null);
+  const dialogOpenRef = (0, _react.useRef)(false);
+  (0, _react.useEffect)(() => {
+    inputElRef.current = document.getElementById(inputId);
+  }, [inputId]);
+
+  // Detect “Cancel” -> dialog closes, window regains focus, but input had no change.
+  (0, _react.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 = (0, _react.useMemo)(() => validFiles?.fileTypes?.join(', ') || '', [validFiles?.fileTypes]);
+  const validateAndCommit = (0, _react.useCallback)(files => {
+    // basic validations
+    const validated = files.filter(file => {
+      const ext = file.name.split('.').pop()?.toLowerCase() || '';
+      const isBlacklisted = _constants.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 = (0, _react.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 = (0, _react.useCallback)(dropped => {
+    validateAndCommit(dropped);
+    trigger(field.name);
+  }, [trigger, field.name, validateAndCommit]);
+  const handleFilesEdited = (0, _react.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 = (0, _button.generateButtonClass)({
+    cssClass: 'button dragAndDropFileUploadButtonLabel',
+    buttonStyle: labelAsButtonStyles,
+    hideLabel: label.hide
+  });
+  const labelCssClass = `
+    ${labelStyle === 'button' ? labelStyleAsButtonClasses : ''}
+    ${customCssClasses?.label || ''} 
+    ${showSpinner ? 'withSpinner' : ''} 
+    ${label.hide ? 'hiddenLabel' : ''}
+  `;
+  return /*#__PURE__*/_react.default.createElement(_HookFormWrapper.HookFormWrapper, null, /*#__PURE__*/_react.default.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.default.createElement("label", {
+    id: label.labelId || `${inputId}_label`,
+    className: labelCssClass,
+    htmlFor: inputId,
+    onClick: () => {
+      dialogOpenRef.current = true;
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "dragAndDropFileUploadLabel"
+  }, labelUploadIcon || null, /*#__PURE__*/_react.default.createElement(_FormFieldLabel.FormFieldLabel, labelProps), restrictionsTxt && /*#__PURE__*/_react.default.createElement("span", {
+    className: "fileRestrictionsText"
+  }, restrictionsTxt)), /*#__PURE__*/_react.default.createElement("span", {
+    className: "inputContainer"
+  }, /*#__PURE__*/_react.default.createElement(_InputFile.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.default.createElement(_Spinner.Spinner, null), fileDisplayStyle === 'names' && activeFileList.length > 0 && /*#__PURE__*/_react.default.createElement("span", {
+    className: "uploadedFileNames"
+  }, activeFileList.map((file, index) => /*#__PURE__*/_react.default.createElement("small", {
+    key: index,
+    className: "uploadedFileName"
+  }, file.name, index < activeFileList.length - 1 ? ', ' : ''))), /*#__PURE__*/_react.default.createElement(_ValidationMessages.ValidationMessages, {
+    name: field.name,
+    validation: validation
+  })), fileDisplayStyle === 'list' && activeFileList.length > 0 && /*#__PURE__*/_react.default.createElement(_FileAttachmentsList.FileAttachmentsList, {
+    customFileListSettings: fileListSettings,
+    files: activeFileList,
+    onFilesRemoved: handleFilesEdited,
+    onFilesEdited: handleFilesEdited
+  })));
+};
+exports.DragAndDropFileUpload = DragAndDropFileUpload;
+var _default = exports.default = {
+  DragAndDropFileUpload
+};
+//# sourceMappingURL=DragAndDropFileUpload.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DragAndDropFileUpload.js","names":["Object","defineProperty","exports","value","default","DragAndDropFileUpload","_react","_interopRequireWildcard","require","_iconDefinitions","_SvgIcon","_reactHookForm","_HookFormWrapper","_Spinner","_FormFieldLabel","_InputFile","_ValidationMessages","_formUtilities","_button","_FileAttachmentsList","_constants","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","label","field","showSpinner","fileDisplayStyle","fileListSettings","fileList","validation","customContent","customCssClasses","labelStyle","labelAsButtonStyles","color","variant","labelUploadIcon","createElement","SvgIcon","svgDefinition","arrowUpFromBracket","multiple","restrictionsTxt","validFiles","extensions","DEFAULT_UPLOAD_FILE_EXTENSIONS","fileTypes","DEFAULT_UPLOAD_FILE_TYPES","maxFileCount","maxFileSize","onFilesChange","setValue","trigger","setError","useFormContext","NoHookFormContext","activeFileList","setFileList","useState","isTouched","setIsTouched","isDragActive","setIsDragActive","inputId","id","inputElRef","useRef","dialogOpenRef","useEffect","current","document","getElementById","onFocus","noneSelected","files","length","name","window","addEventListener","removeEventListener","supportedFileTypes","useMemo","join","validateAndCommit","useCallback","validated","filter","file","ext","split","pop","toLowerCase","isBlacklisted","BLACKLISTED_FILE_TYPES","includes","isValidExt","isValidSize","size","clipped","slice","shouldValidate","shouldDirty","shouldTouch","handleFileInputChange","event","target","Array","from","handleDrop","dropped","handleFilesEdited","wrapperCssClass","wrapper","position","labelProps","isRequired","required","labelStyleAsButtonClasses","generateButtonClass","cssClass","buttonStyle","hideLabel","hide","labelCssClass","HookFormWrapper","className","onDragOver","preventDefault","onDragLeave","currentTarget","onDrop","dataTransfer","labelId","htmlFor","onClick","FormFieldLabel","InputFile","type","defaultValue","accept","onInput","Spinner","map","index","key","ValidationMessages","FileAttachmentsList","customFileListSettings","onFilesRemoved","onFilesEdited","_default"],"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/cjs/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;
+}