intelicoreact 2.0.18 → 2.0.19

package/dist/es/Atomic/FormElements/DropdownLiveSearch/DropdownLiveSearch.styles.css

@@ -0,0 +1,411 @@
+/* COLORS*/
+/*GRID*/
+/*FONTS*/
+/*Z-INDEX*/
+/*OTHER*/
+/* THEME COLORS */
+/* COLORS */
+/* GRID */
+/* FONTS */
+:export {
+  primaryColor: #3f51b5;
+  secondaryColor: #f50057;
+  successColor: #4caf50;
+  warningColor: #ff9800;
+  errorColor: #f44336;
+  infoColor: #2196f3;
+  backgroundColor: #ffffff;
+  textColor: #212121;
+  textSecondaryColor: #757575;
+}
+
+.dropdown-live-search {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+  border-radius: 7px;
+}
+.dropdown-live-search__trigger {
+  position: relative;
+  display: block;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  height: 28px;
+  font-weight: 400;
+  cursor: pointer;
+  text-align: left;
+  border: 1px solid #e2e5ec;
+  border-radius: 3px;
+  background: #fff;
+}
+.dropdown-live-search__trigger .text {
+  display: block;
+  overflow: hidden;
+  max-width: calc(100% - 5px);
+  padding: 0 16px 0 8px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.dropdown-live-search__trigger.error {
+  border-color: #f06d8d;
+}
+.dropdown-live-search__trigger.placeholder .text {
+  opacity: 0.7;
+}
+.dropdown-live-search--focused .dropdown-live-search__trigger {
+  border-color: #6b81dd;
+  filter: drop-shadow(0 0 4px rgba(93, 120, 255, 0.5));
+}
+.dropdown-live-search__input {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 0 16px 0 8px;
+  font-weight: 400;
+  text-overflow: ellipsis;
+  border: none;
+  background: none;
+}
+.dropdown-live-search__list {
+  position: relative;
+  z-index: 6;
+  top: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
+  min-width: 100%;
+  max-height: 320px;
+  padding: 5px 0;
+  border: 1px solid #e2e5ec;
+  background: #fff;
+  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
+}
+.dropdown-live-search__list::-webkit-scrollbar {
+  width: 4px;
+}
+.dropdown-live-search__list::-webkit-scrollbar-track {
+  background: transparent;
+}
+.dropdown-live-search__list::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background: #9aa0b9;
+}
+.dropdown-live-search__list-top {
+  top: auto !important;
+  bottom: calc(100% + 4px);
+}
+.dropdown-live-search__list-item {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  width: 100%;
+  height: 24px;
+  padding: 0 20px 0 30px;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 24px;
+  cursor: pointer;
+  white-space: nowrap;
+  color: #1e1e2d;
+  border: none;
+  background: transparent;
+}
+.dropdown-live-search__list-item--modal {
+  position: relative;
+  width: 100%;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: left;
+  letter-spacing: 0.2px;
+  color: #1f7499;
+}
+.dropdown-live-search__list-item--modal::after {
+  position: absolute;
+  bottom: -2px;
+  width: 300%;
+  height: 1px;
+  content: "";
+  background-color: #e8e9ec;
+  transform: translateX(-50%);
+}
+.dropdown-live-search__list-item--no-options {
+  box-sizing: border-box;
+  padding-left: 8px;
+}
+.dropdown-live-search__list-item:hover, .dropdown-live-search__list-item_active {
+  background: #f2f2f8;
+}
+.dropdown-live-search__list-item_disabled {
+  pointer-events: none;
+  opacity: 0.3;
+}
+.dropdown-live-search__list-item-postfix {
+  margin-left: 5px;
+}
+.dropdown-live-search__list-item p {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.dropdown-live-search__list--with-label {
+  top: 45px;
+}
+.dropdown-live-search__arrow {
+  position: absolute;
+  top: 50%;
+  right: 4px;
+  display: flex;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  transform: translate(0, -50%);
+}
+.dropdown-live-search__arrow svg {
+  width: 16px;
+  height: 16px;
+}
+.dropdown-live-search__active-icon {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 9px;
+  display: none;
+  align-items: center;
+  margin: auto;
+}
+.dropdown-live-search__active-icon_active {
+  display: flex;
+}
+.dropdown-live-search__active-icon_active svg {
+  width: 16px;
+  height: 16px;
+}
+.dropdown-live-search__container {
+  position: absolute;
+  z-index: 99999;
+  top: 30px;
+  display: block;
+  box-sizing: border-box;
+  background-color: #ffffff;
+}
+.dropdown-live-search.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.dropdown-live-search-mobile .dropdown-live-search__arrow {
+  top: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: rotate(90deg) translateX(-50%);
+}
+.dropdown-live-search-mobile .dropdown-live-search__arrow svg {
+  width: 12px;
+  height: 12px;
+  color: #9aa0b9;
+}
+.dropdown-live-search-mobile .dropdown-live-search__container-wrapper {
+  position: fixed;
+  top: 0 !important;
+  left: 0 !important;
+  overflow: hidden !important;
+  width: 100dvw;
+  height: 100dvh;
+  max-height: 100dvh;
+  background: rgba(23, 29, 51, 0.5);
+  animation-name: fadeIn;
+  animation-duration: 0.25s;
+  animation-timing-function: ease;
+  animation-fill-mode: forwards;
+}
+.dropdown-live-search-mobile .dropdown-live-search__list-wrapper {
+  position: fixed;
+  top: 0 !important;
+  left: 0 !important;
+  overflow: hidden !important;
+  box-sizing: border-box;
+  width: 100dvw;
+  height: 100dvh;
+  max-height: 100dvh;
+  padding: 8px;
+  animation-name: slideup;
+  animation-duration: 0.4s;
+}
+.dropdown-live-search-mobile .dropdown-live-search__container {
+  --spacing: vars.$spacing-s;
+  position: absolute;
+  z-index: auto;
+  top: auto;
+  bottom: var(--spacing);
+  overflow: hidden;
+  box-sizing: border-box;
+  width: calc(100% - 2 * var(--spacing));
+  max-height: 500px;
+  margin: 0;
+  border-radius: 24px !important;
+}
+.dropdown-live-search-mobile .dropdown-live-search__container--with-bottom-shadow::after {
+  position: absolute;
+  z-index: 6;
+  bottom: 0;
+  width: 100%;
+  height: 15px;
+  content: "";
+  opacity: 1;
+  background: linear-gradient(180deg, rgba(212, 218, 230, 0.5) 0%, rgba(212, 218, 230, 0.3) 21.35%, rgba(247, 248, 250, 0) 100%);
+  transition: all 0.2s;
+  transform: rotate(180deg);
+}
+.dropdown-live-search-mobile .dropdown-live-search__container--with-bottom-shadow-hidden::after {
+  opacity: 0;
+}
+.dropdown-live-search-mobile .dropdown-live-search__container--fixed-height {
+  height: 500px !important;
+}
+.dropdown-live-search-mobile .dropdown-live-search__list {
+  max-height: 500px;
+  padding: 0 16px 16px !important;
+  box-shadow: none;
+}
+.dropdown-live-search-mobile .dropdown-live-search__list-header {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  letter-spacing: 0.1px;
+  color: #3b414b;
+}
+.dropdown-live-search-mobile .dropdown-live-search__list-header-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: 24px;
+}
+.dropdown-live-search-mobile .dropdown-live-search__list-header-row:first-child {
+  padding-right: 50px;
+}
+.dropdown-live-search-mobile .dropdown-live-search__list-header-row .input__wrap {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding-right: 8px;
+  border: 1px solid var(--form-input-border, #e1e8f1);
+  border-radius: 6px;
+  background: var(--black-bg-color, #f8fbff) !important;
+}
+.dropdown-live-search-mobile .dropdown-live-search__list-header-row .input__wrap input {
+  background: unset !important;
+}
+.dropdown-live-search-mobile .dropdown-live-search__list-header-row .input__close {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+  padding: 4px;
+  border-radius: 2px;
+  background: var(--bg-gray-box, #f0f1f4);
+}
+.dropdown-live-search-mobile .dropdown-live-search__list-header-row .input__close::before, .dropdown-live-search-mobile .dropdown-live-search__list-header-row .input__close::after {
+  top: 50%;
+  height: 12px;
+  border-radius: 8px;
+  background-color: #171d33;
+  transform: translateY(-50%) rotate(45deg);
+}
+.dropdown-live-search-mobile .dropdown-live-search__list-header-row .input__close::after {
+  transform: translateY(-50%) rotate(-45deg);
+}
+.dropdown-live-search-mobile .dropdown-live-search__list-header-with-shadow::after {
+  position: absolute;
+  z-index: 10;
+  bottom: -15px;
+  left: 0;
+  width: 100%;
+  height: 15px;
+  content: "";
+  opacity: 1;
+  background: linear-gradient(180deg, rgba(212, 218, 230, 0.5) 0%, rgba(212, 218, 230, 0.3) 21.35%, rgba(247, 248, 250, 0) 100%);
+  transition: all 0.2s;
+}
+.dropdown-live-search-mobile .dropdown-live-search__list-header-with-shadow-hidden::after {
+  opacity: 0;
+}
+.dropdown-live-search-mobile .dropdown-live-search__list-header .dropdown-live-search__input {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 28px;
+  padding-right: 8px;
+  border: 1px solid var(--form-input-border, #e1e8f1);
+  border-radius: 6px;
+  background: var(--black-bg-color, #f8fbff) !important;
+}
+.dropdown-live-search-mobile .dropdown-live-search__list-header .dropdown-live-search__input input {
+  background: unset !important;
+}
+.dropdown-live-search-mobile .dropdown-live-search__list-close-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  width: 50px;
+  height: 50px;
+  padding: 16px;
+}
+.dropdown-live-search-mobile .dropdown-live-search__list-close-icon svg {
+  width: 16px;
+  height: 16px;
+  color: #a0a4b0;
+}
+.dropdown-live-search-mobile .dropdown-live-search__list-item {
+  display: flex;
+  justify-content: space-between;
+  height: auto !important;
+  padding: 10px 8px !important;
+  line-height: 24px;
+}
+.dropdown-live-search-mobile .dropdown-live-search__list-item p {
+  margin: 0;
+}
+.dropdown-live-search-mobile .dropdown-live-search__list-item-label {
+  white-space: wrap !important;
+}
+.dropdown-live-search-mobile .dropdown-live-search__list-item-label span.bg--yellow {
+  font-weight: 600;
+  background-color: unset !important;
+}
+.dropdown-live-search-mobile .dropdown-live-search__list-item_active {
+  border-radius: 6px;
+  background: var(--bg-gray-box, #f0f1f4) !important;
+}
+
+@keyframes slideup {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/dist/es/Atomic/FormElements/FileLoader/FileLoader.js

@@ -0,0 +1,55 @@
+import '../../../styles/base.css';
+import './FileLoader.styles.css';/* empty css                */
+import LoadedContent from "./partial/LoadedContent.js";
+import LoadZone from "./partial/LoadZone.js";
+import cn from "classnames";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Atomic/FormElements/FileLoader/FileLoader.tsx
+var RC = "file-loader";
+var FileLoader = (props) => {
+	const { fieldKey, value, disabled, error, className, placeholder, onChange, doLoad, filterFiles, processErrors, isBlockNullValues, isDisableErrorsClass = true, uploadIcon, downloadIcon, deleteIcon, spiner, isIconAfter, isLinkTypeDownload = false, isUseLinkTitle = false, attributesOfNativeInput = {} } = props;
+	const [isLoadContent, setIsLoadContent] = useState(false);
+	const [dragenter, setDragenter] = useState(false);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(RC, className, {
+			[`${RC}_load-content`]: isLoadContent,
+			[`${RC}_load-zone`]: !value,
+			[`${RC}_hover`]: dragenter,
+			[`${RC}_disabled`]: disabled,
+			[`${RC}_error`]: !isDisableErrorsClass && Boolean(error)
+		}),
+		children: [
+			isLoadContent && spiner,
+			!doLoad && "develop error: no doLoad",
+			!!doLoad && value && /* @__PURE__ */ jsx(LoadedContent, {
+				RC,
+				value,
+				onDelete: () => onChange(null),
+				icon: downloadIcon,
+				isIconAfter,
+				deleteIcon,
+				isUseLinkTitle,
+				isLinkTypeDownload
+			}),
+			doLoad && !value && /* @__PURE__ */ jsx(LoadZone, {
+				RC,
+				fieldKey,
+				onChange,
+				icon: uploadIcon,
+				doLoad,
+				setDragenter,
+				setIsLoadContent,
+				placeholder,
+				filterFiles,
+				processErrors,
+				isBlockNullValues,
+				attributesOfNativeInput
+			})
+		]
+	});
+};
+//#endregion
+export { FileLoader as default };
+
+//# sourceMappingURL=FileLoader.js.map

package/dist/es/Atomic/FormElements/FileLoader/FileLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileLoader.js","names":[],"sources":["../../../../../src/Atomic/FormElements/FileLoader/FileLoader.tsx"],"sourcesContent":["import type {\n  FileLoaderProps,\n} from './FileLoader.interface';\nimport cn from 'classnames';\n\nimport React, { useState } from 'react';\nimport LoadedContent from './partial/LoadedContent';\n\nimport LoadZone from './partial/LoadZone';\nimport './FileLoader.scss';\n\nconst RC = 'file-loader';\n\nconst FileLoader: React.FC<FileLoaderProps> = (props) => {\n  const {\n    fieldKey,\n    value,\n    disabled,\n    error,\n    className,\n    placeholder,\n    onChange,\n    doLoad,\n    filterFiles,\n    processErrors,\n    isBlockNullValues,\n    isDisableErrorsClass = true,\n    uploadIcon,\n    downloadIcon,\n    deleteIcon,\n    spiner,\n    isIconAfter,\n    isLinkTypeDownload = false,\n    isUseLinkTitle = false,\n    attributesOfNativeInput = {},\n  } = props;\n\n  const [isLoadContent, setIsLoadContent] = useState(false);\n  const [dragenter, setDragenter] = useState(false);\n\n  return (\n    <div\n      className={cn(RC, className, {\n        [`${RC}_load-content`]: isLoadContent,\n        [`${RC}_load-zone`]: !value,\n        [`${RC}_hover`]: dragenter,\n        [`${RC}_disabled`]: disabled,\n        [`${RC}_error`]: !isDisableErrorsClass && Boolean(error),\n      })}\n    >\n      {isLoadContent && spiner}\n\n      {!doLoad && 'develop error: no doLoad'}\n\n      {!!doLoad && value && (\n        <LoadedContent\n          RC={RC}\n          value={value}\n          onDelete={() => onChange(null)}\n          icon={downloadIcon}\n          isIconAfter={isIconAfter}\n          deleteIcon={deleteIcon}\n          isUseLinkTitle={isUseLinkTitle}\n          isLinkTypeDownload={isLinkTypeDownload}\n        />\n      )}\n\n      {doLoad && !value && (\n        <LoadZone\n          RC={RC}\n          fieldKey={fieldKey}\n          onChange={onChange}\n          icon={uploadIcon}\n          doLoad={doLoad}\n          setDragenter={setDragenter}\n          setIsLoadContent={setIsLoadContent}\n          placeholder={placeholder}\n          filterFiles={filterFiles}\n          processErrors={processErrors}\n          isBlockNullValues={isBlockNullValues}\n          attributesOfNativeInput={attributesOfNativeInput}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default FileLoader;\n"],"mappings":";;;;;;;AAWA,IAAM,KAAK;AAEX,IAAM,cAAyC,UAAU;CACvD,MAAM,EACJ,UACA,OACA,UACA,OACA,WACA,aACA,UACA,QACA,aACA,eACA,mBACA,uBAAuB,MACvB,YACA,cACA,YACA,QACA,aACA,qBAAqB,OACrB,iBAAiB,OACjB,0BAA0B,CAAC,MACzB;CAEJ,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CACxD,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAEhD,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,IAAI,WAAW;IAC1B,GAAG,GAAG,iBAAiB;IACvB,GAAG,GAAG,cAAc,CAAC;IACrB,GAAG,GAAG,UAAU;IAChB,GAAG,GAAG,aAAa;IACnB,GAAG,GAAG,UAAU,CAAC,wBAAwB,QAAQ,KAAK;EACzD,CAAC;YAPH;GASG,iBAAiB;GAEjB,CAAC,UAAU;GAEX,CAAC,CAAC,UAAU,SACX,oBAAC,eAAD;IACM;IACG;IACP,gBAAgB,SAAS,IAAI;IAC7B,MAAM;IACO;IACD;IACI;IACI;GACrB,CAAA;GAGF,UAAU,CAAC,SACV,oBAAC,UAAD;IACM;IACM;IACA;IACV,MAAM;IACE;IACM;IACI;IACL;IACA;IACE;IACI;IACM;GAC1B,CAAA;EAEA;;AAET"}

package/dist/es/Atomic/FormElements/FileLoader/FileLoader.styles.css

@@ -0,0 +1,127 @@
+.file-loader {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  height: 28px;
+  padding: 4px 6px 4px 5px;
+  border: 1px solid #e2e5ec;
+  border-radius: 3px;
+  background-color: #fff;
+}
+.file-loader_hover {
+  border-color: #6b81dd;
+  filter: drop-shadow(0 0 4px rgba(93, 120, 255, 0.5));
+}
+.file-loader_load-zone {
+  padding: 0;
+}
+.file-loader_load-content {
+  pointer-events: none;
+}
+.file-loader_load-content .file-loader__input-label {
+  opacity: 0.5;
+}
+.file-loader__value-link {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  width: calc(100% - 16px);
+  height: 100%;
+  font-size: 13px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 20px;
+  text-decoration: none;
+  color: #166ead;
+  outline: none;
+}
+.file-loader__value-link svg {
+  width: 16px;
+  height: 16px;
+  color: #9aa0b9;
+}
+.file-loader__value-name {
+  overflow: hidden;
+  width: calc(100% - 20px);
+  margin-left: 4px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.file-loader__value-link_icon-after .file-loader__value-name {
+  margin-right: 4px;
+  margin-left: 0;
+}
+.file-loader__delete-value-button {
+  width: 16px;
+  min-width: 16px;
+  height: 16px;
+  min-height: 16px;
+  cursor: pointer;
+}
+.file-loader__delete-value-button svg {
+  width: auto;
+  height: 100%;
+  color: #f06d8d;
+}
+.file-loader__icon-block {
+  position: absolute;
+  top: calc(50% - 8px);
+  left: 5px;
+  width: 16px;
+  height: 16px;
+  pointer-events: none;
+  color: #9aa0b9;
+}
+.file-loader__icon-block svg {
+  width: auto;
+  height: 100%;
+}
+.file-loader__input-label {
+  overflow: hidden;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 4px 6px 4px 25px;
+  font-size: 13px;
+  font-weight: 300;
+  font-style: normal;
+  line-height: 20px;
+  cursor: pointer;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #1e1e2d;
+}
+.file-loader__input-label_no-icon {
+  padding-left: 5px;
+}
+.file-loader__input {
+  display: none;
+}
+.file-loader .loader-box {
+  opacity: 0.2;
+}
+.file-loader .loader-box .lds-ring.lds-ring_small {
+  top: calc(50% - 10px);
+  width: 20px;
+  height: 20px;
+}
+.file-loader .loader-box .lds-ring.lds-ring_small div {
+  top: 0;
+  left: 0;
+  margin: 0;
+  border-width: 2px !important;
+}
+.file-loader_error {
+  border-color: #f06d8d;
+}
+.file-loader_disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}

package/dist/es/Atomic/FormElements/FileLoader/partial/LoadZone.js

@@ -0,0 +1,86 @@
+import '../../../../styles/base.css';
+import '../FileLoader.styles.css';/* empty css                 */
+import cn from "classnames";
+import { useEffect } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/Atomic/FormElements/FileLoader/partial/LoadZone.tsx
+var DEFAULT_MAX_FILE_SIZE = 1024 * 1024;
+function FILTER_FILES_DEFAULT(file) {
+	return file.size <= DEFAULT_MAX_FILE_SIZE ? file : null;
+}
+var LoadZone = ({ RC, fieldKey, onChange, doLoad, setDragenter, setIsLoadContent, icon, placeholder = "", filterFiles = FILTER_FILES_DEFAULT, processErrors, isBlockNullValues, attributesOfNativeInput = {} }) => {
+	const dropZoneId = `dropZone-${fieldKey}`;
+	const handle = {
+		change: async (e) => {
+			setIsLoadContent?.(true);
+			const file = "dataTransfer" in e ? e.dataTransfer?.files?.[0] : e.target.files?.[0];
+			if (!file) {
+				setIsLoadContent?.(false);
+				return;
+			}
+			const validatedFile = filterFiles ? await filterFiles(file) : file;
+			if (processErrors && !validatedFile) await processErrors(file);
+			if (!isBlockNullValues || validatedFile) onChange(await doLoad(validatedFile).catch(() => null));
+			setIsLoadContent?.(false);
+		},
+		dragover: (e) => {
+			e.stopPropagation();
+			e.preventDefault();
+			return false;
+		},
+		dragenter: (e) => {
+			e.stopPropagation();
+			e.preventDefault();
+			setDragenter?.(true);
+			return false;
+		},
+		dragleave: (e) => {
+			e.stopPropagation();
+			e.preventDefault();
+			setDragenter?.(false);
+			return false;
+		},
+		drop: (e) => {
+			e.stopPropagation();
+			e.preventDefault();
+			setDragenter?.(false);
+			handle.change(e);
+			return false;
+		}
+	};
+	useEffect(() => {
+		const dropbox = document.getElementById(dropZoneId);
+		if (!dropbox) return;
+		dropbox.addEventListener("dragenter", handle.dragenter, false);
+		dropbox.addEventListener("dragover", handle.dragover, false);
+		dropbox.addEventListener("dragleave", handle.dragleave, false);
+		dropbox.addEventListener("drop", handle.drop, false);
+		dropbox.addEventListener("dragend", handle.dragleave, false);
+		return () => {
+			dropbox.removeEventListener("dragenter", handle.dragenter, false);
+			dropbox.removeEventListener("dragover", handle.dragover, false);
+			dropbox.removeEventListener("dragleave", handle.dragleave, false);
+			dropbox.removeEventListener("drop", handle.drop, false);
+			dropbox.removeEventListener("dragend", handle.dragleave, false);
+		};
+	}, [fieldKey, doLoad]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [icon && /* @__PURE__ */ jsx("div", {
+		className: cn(`${RC}__icon-block`),
+		children: icon
+	}), /* @__PURE__ */ jsxs("label", {
+		id: dropZoneId,
+		className: cn(`${RC}__input-label`, { [`${RC}__input-label_no-icon`]: !icon }),
+		htmlFor: fieldKey,
+		children: [placeholder, /* @__PURE__ */ jsx("input", {
+			id: fieldKey,
+			className: cn(`${RC}__input`),
+			type: "file",
+			onChange: handle.change,
+			...attributesOfNativeInput
+		})]
+	})] });
+};
+//#endregion
+export { LoadZone as default };
+
+//# sourceMappingURL=LoadZone.js.map

package/dist/es/Atomic/FormElements/FileLoader/partial/LoadZone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadZone.js","names":[],"sources":["../../../../../../src/Atomic/FormElements/FileLoader/partial/LoadZone.tsx"],"sourcesContent":["import type { LoadZoneProps } from './LoadZone.interface';\nimport cn from 'classnames';\n\nimport React, { useEffect } from 'react';\nimport '../FileLoader.scss';\n\nconst DEFAULT_MAX_FILE_SIZE = 1024 * 1024; // 1MB\n\nfunction FILTER_FILES_DEFAULT(file: File): File | null {\n  return file.size <= DEFAULT_MAX_FILE_SIZE ? file : null\n}\n\nconst LoadZone: React.FC<LoadZoneProps> = ({\n  RC,\n  fieldKey,\n  onChange,\n  doLoad,\n  setDragenter,\n  setIsLoadContent,\n  icon,\n  placeholder = '',\n  filterFiles = FILTER_FILES_DEFAULT,\n  processErrors,\n  isBlockNullValues,\n  attributesOfNativeInput = {},\n}) => {\n  const dropZoneId = `dropZone-${fieldKey}`;\n\n  const handle = {\n    change: async (\n      e: React.ChangeEvent<HTMLInputElement> | DragEvent,\n    ): Promise<void> => {\n      setIsLoadContent?.(true);\n\n      const file\n        = 'dataTransfer' in e\n          ? e.dataTransfer?.files?.[0]\n          : (e.target as HTMLInputElement).files?.[0];\n\n      if (!file) {\n        setIsLoadContent?.(false);\n        return;\n      }\n\n      const validatedFile = filterFiles ? await filterFiles(file) : file;\n\n      if (processErrors && !validatedFile) {\n        await processErrors(file);\n      }\n\n      if (!isBlockNullValues || validatedFile) {\n        const result = await doLoad(validatedFile).catch(() => null);\n        onChange(result);\n      }\n\n      setIsLoadContent?.(false);\n    },\n\n    dragover: (e: DragEvent): boolean => {\n      e.stopPropagation();\n      e.preventDefault();\n      return false;\n    },\n\n    dragenter: (e: DragEvent): boolean => {\n      e.stopPropagation();\n      e.preventDefault();\n      setDragenter?.(true);\n      return false;\n    },\n\n    dragleave: (e: DragEvent): boolean => {\n      e.stopPropagation();\n      e.preventDefault();\n      setDragenter?.(false);\n      return false;\n    },\n\n    drop: (e: DragEvent): boolean => {\n      e.stopPropagation();\n      e.preventDefault();\n      setDragenter?.(false);\n      void handle.change(e);\n      return false;\n    },\n  };\n\n  useEffect(() => {\n    const dropbox = document.getElementById(dropZoneId);\n    if (!dropbox) return;\n\n    dropbox.addEventListener('dragenter', handle.dragenter, false);\n    dropbox.addEventListener('dragover', handle.dragover, false);\n    dropbox.addEventListener('dragleave', handle.dragleave, false);\n    dropbox.addEventListener('drop', handle.drop, false);\n    dropbox.addEventListener('dragend', handle.dragleave, false);\n\n    return () => {\n      dropbox.removeEventListener('dragenter', handle.dragenter, false);\n      dropbox.removeEventListener('dragover', handle.dragover, false);\n      dropbox.removeEventListener('dragleave', handle.dragleave, false);\n      dropbox.removeEventListener('drop', handle.drop, false);\n      dropbox.removeEventListener('dragend', handle.dragleave, false);\n    };\n  }, [fieldKey, doLoad]);\n\n  return (\n    <>\n      {icon && <div className={cn(`${RC}__icon-block`)}>{icon}</div>}\n      <label\n        id={dropZoneId}\n        className={cn(`${RC}__input-label`, {\n          [`${RC}__input-label_no-icon`]: !icon,\n        })}\n        htmlFor={fieldKey}\n      >\n        {placeholder}\n        <input\n          id={fieldKey}\n          className={cn(`${RC}__input`)}\n          type=\"file\"\n          onChange={handle.change as React.ChangeEventHandler<HTMLInputElement>}\n          {...attributesOfNativeInput}\n        />\n      </label>\n    </>\n  );\n};\n\nexport default LoadZone;\n"],"mappings":";;;;;AAMA,IAAM,wBAAwB,OAAO;AAErC,SAAS,qBAAqB,MAAyB;CACrD,OAAO,KAAK,QAAQ,wBAAwB,OAAO;AACrD;AAEA,IAAM,YAAqC,EACzC,IACA,UACA,UACA,QACA,cACA,kBACA,MACA,cAAc,IACd,cAAc,sBACd,eACA,mBACA,0BAA0B,CAAC,QACvB;CACJ,MAAM,aAAa,YAAY;CAE/B,MAAM,SAAS;EACb,QAAQ,OACN,MACkB;GAClB,mBAAmB,IAAI;GAEvB,MAAM,OACF,kBAAkB,IAChB,EAAE,cAAc,QAAQ,KACvB,EAAE,OAA4B,QAAQ;GAE7C,IAAI,CAAC,MAAM;IACT,mBAAmB,KAAK;IACxB;GACF;GAEA,MAAM,gBAAgB,cAAc,MAAM,YAAY,IAAI,IAAI;GAE9D,IAAI,iBAAiB,CAAC,eACpB,MAAM,cAAc,IAAI;GAG1B,IAAI,CAAC,qBAAqB,eAExB,SAAS,MADY,OAAO,aAAa,CAAC,CAAC,YAAY,IAAI,CAC5C;GAGjB,mBAAmB,KAAK;EAC1B;EAEA,WAAW,MAA0B;GACnC,EAAE,gBAAgB;GAClB,EAAE,eAAe;GACjB,OAAO;EACT;EAEA,YAAY,MAA0B;GACpC,EAAE,gBAAgB;GAClB,EAAE,eAAe;GACjB,eAAe,IAAI;GACnB,OAAO;EACT;EAEA,YAAY,MAA0B;GACpC,EAAE,gBAAgB;GAClB,EAAE,eAAe;GACjB,eAAe,KAAK;GACpB,OAAO;EACT;EAEA,OAAO,MAA0B;GAC/B,EAAE,gBAAgB;GAClB,EAAE,eAAe;GACjB,eAAe,KAAK;GACpB,OAAY,OAAO,CAAC;GACpB,OAAO;EACT;CACF;CAEA,gBAAgB;EACd,MAAM,UAAU,SAAS,eAAe,UAAU;EAClD,IAAI,CAAC,SAAS;EAEd,QAAQ,iBAAiB,aAAa,OAAO,WAAW,KAAK;EAC7D,QAAQ,iBAAiB,YAAY,OAAO,UAAU,KAAK;EAC3D,QAAQ,iBAAiB,aAAa,OAAO,WAAW,KAAK;EAC7D,QAAQ,iBAAiB,QAAQ,OAAO,MAAM,KAAK;EACnD,QAAQ,iBAAiB,WAAW,OAAO,WAAW,KAAK;EAE3D,aAAa;GACX,QAAQ,oBAAoB,aAAa,OAAO,WAAW,KAAK;GAChE,QAAQ,oBAAoB,YAAY,OAAO,UAAU,KAAK;GAC9D,QAAQ,oBAAoB,aAAa,OAAO,WAAW,KAAK;GAChE,QAAQ,oBAAoB,QAAQ,OAAO,MAAM,KAAK;GACtD,QAAQ,oBAAoB,WAAW,OAAO,WAAW,KAAK;EAChE;CACF,GAAG,CAAC,UAAU,MAAM,CAAC;CAErB,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,QAAQ,oBAAC,OAAD;EAAK,WAAW,GAAG,GAAG,GAAG,aAAa;YAAI;CAAU,CAAA,GAC7D,qBAAC,SAAD;EACE,IAAI;EACJ,WAAW,GAAG,GAAG,GAAG,gBAAgB,GACjC,GAAG,GAAG,yBAAyB,CAAC,KACnC,CAAC;EACD,SAAS;YALX,CAOG,aACD,oBAAC,SAAD;GACE,IAAI;GACJ,WAAW,GAAG,GAAG,GAAG,QAAQ;GAC5B,MAAK;GACL,UAAU,OAAO;GACjB,GAAI;EACL,CAAA,CACI;GACP,EAAA,CAAA;AAEN"}