intelicoreact 1.6.22 → 1.6.24

package/dist/Atomic/FormElements/FileLoaderLocal/FileLoaderLocal.js

@@ -1 +1,160 @@
-function e(e,l,a){return l in e?Object.defineProperty(e,l,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[l]=a,e}import{jsx as l,jsxs as a}from"react/jsx-runtime";import"react";import r from"classnames";import{Download as o,Paperclip as i,Trash2 as t}from"react-feather";import{getUniqueFileExtensions as n,renderFileSize as c}from"../../../Functions/utils";import"./FileLoaderLocal.scss";export default function(s){var d=s.groupId,u=s.id,f=s.fieldId,p=s.fieldKey,m=s.label,v=s.error,_=s.outerError,g=s.isRequired,b=s.accept,h=s.onChange,N=s.className,y=s.value,x=s.isNoTrashIcon,I=s.maxItemSizeBytes,O=s.testId,j=s.attributesOfNativeInput,F=function(e){var l=e.match(/[^\\]+$/);return null==l?void 0:l[0]},P=function(e){var l;return l=e.size>I,l};return a("div",{"data-testid":void 0===O?"file-loader-local":O,className:r("file-loader-local",N,e({},"file-loader-local_outer-error",!!_)),children:[("uploadTrigger"===f||!y)&&l("input",function(l){for(var a=1;a<arguments.length;a++){var r=null!=arguments[a]?arguments[a]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),o.forEach(function(a){e(l,a,r[a])})}return l}({onChange:function(e){var l=F(e.target.value),a=null==l||null==(i=l.match(/[^\.]+$/))?void 0:i[0],r=null==(t=l.split("."))?void 0:t[0],o=null==(f=e.target)||null==(s=f.files)?void 0:s[0];if(P(null==(m=e.target)||null==(p=m.files)?void 0:p[0]))h({id:u,name:l,valueExtension:a,e:e,file:o,groupId:d,error:"Max file size is ".concat(c(I))});else if(b.includes(a))/^[A-Za-z\u00C0-\u00FF0-9!@#\$%\^\&*\)\(+=._-\s]+$/.test(r)?h({id:u,groupId:d,name:l,valueExtension:a,e:e,file:o}):h({id:u,groupId:d,name:l,valueExtension:a,e:e,file:o,error:"File name must be Latin characters only."});else{var i,t,s,f,p,m,v,_=n((null==b||null==(v=b.replace(/\./g,""))?void 0:v.toUpperCase())||"JPG, PNG, PDF");h({id:u,groupId:d,name:l,valueExtension:a,e:e,file:o,error:"Only ".concat(_," are allowed")})}},className:"file-loader-local__file-input",id:p||"file-input-".concat(u).concat(d?"-".concat(d):""),type:"file",name:p||u,required:g,accept:b},void 0===j?{}:j),u),a("label",{className:r("file-loader-local__label-box",{"file-loader-local__label-box--upload-trigger":"uploadTrigger"===f||!y}),htmlFor:p||"file-input-".concat(u).concat(d?"-".concat(d):""),children:[!y&&l(o,{className:"file-loader-local__upload-icon"}),y&&l(i,{className:"file-loader-local__upload-icon"}),l("div",{title:y||m,className:"file-loader-local__label-wrapper",children:a("div",{className:r("file-loader-local__label",{"file-loader-local__label-filled":y}),children:[l("span",{className:"file-loader-local__label-text",children:y||m}),v&&l("span",{className:"file-loader-local__error",children:v}),"string"==typeof _&&l("span",{className:"file-loader-local__error",children:_})]})}),y&&!(void 0!==x&&x)&&l(t,{className:"file-loader-local__trash-icon",onClick:function(){return h({id:f,groupId:d})}}),function(){if(!y)if(g)return l("div",{className:"file-loader-local--required",children:"Required"});else return l("div",{className:"file-loader-local--optional",children:"Optional"})}()]})]})}
+import React from "react";
+
+import cn from "classnames";
+import { Download, Paperclip, Trash2 } from "react-feather";
+
+import {
+  getUniqueFileExtensions,
+  renderFileSize,
+} from "../../../Functions/utils";
+
+import "./FileLoaderLocal.scss";
+
+const MAX_FILE_SIZE = 10 * 1024 * 1024;
+
+const FileLoaderLocal = ({
+  groupId,
+  id,
+  fieldId,
+  fieldKey,
+  label,
+  error,
+  outerError,
+  isRequired,
+  accept,
+  onChange,
+  className,
+  value,
+  isNoTrashIcon = false,
+  maxItemSizeBytes,
+  testId = "file-loader-local",
+  attributesOfNativeInput = {},
+}) => {
+  const getFileName = (value) => {
+    const result = value.match(/[^\\]+$/);
+    return result?.[0];
+  };
+
+  const renderRequiredLabel = () => {
+    if (!value) {
+      if (isRequired)
+        return <div className="file-loader-local--required">Required</div>;
+      else return <div className="file-loader-local--optional">Optional</div>;
+    }
+  };
+
+  const isFileSizeOutOfLimit = (file) => {
+    return file.size > maxItemSizeBytes ?? MAX_FILE_SIZE;
+  };
+
+  const checkExtension = (valueExtension) => {
+    return accept.includes(valueExtension);
+  };
+
+  const handle = {
+    change: (e) => {
+      const name = getFileName(e.target.value);
+      const valueExtension = name?.match(/[^\.]+$/)?.[0];
+      const fileName = name.split(".")?.[0];
+      const latinRegex = /^[A-Za-z\u00C0-\u00FF0-9!@#\$%\^\&*\)\(+=._-\s]+$/;
+      const file = e.target?.files?.[0];
+
+      if (isFileSizeOutOfLimit(e.target?.files?.[0])) {
+        onChange({
+          id,
+          name,
+          valueExtension,
+          e,
+          file,
+          groupId,
+          error: `Max file size is ${renderFileSize(maxItemSizeBytes)}`,
+        });
+      } else if (!checkExtension(valueExtension)) {
+        const allowedExtensions =
+          accept?.replace(/\./g, "")?.toUpperCase() || "JPG, PNG, PDF";
+        const uniqExts = getUniqueFileExtensions(allowedExtensions);
+
+        onChange({
+          id,
+          groupId,
+          name,
+          valueExtension,
+          e,
+          file,
+          error: `Only ${uniqExts} are allowed`,
+        });
+      } else if (!latinRegex.test(fileName)) {
+        onChange({
+          id,
+          groupId,
+          name,
+          valueExtension,
+          e,
+          file,
+          error: `File name must be Latin characters only.`,
+        });
+      } else onChange({ id, groupId, name, valueExtension, e, file });
+    },
+  };
+
+  return (
+    <div
+      data-testid={testId}
+      className={cn("file-loader-local", className, {
+        ["file-loader-local_outer-error"]: Boolean(outerError),
+      })}
+    >
+      {(fieldId === "uploadTrigger" || !value) && (
+        <input
+          key={id}
+          onChange={handle.change}
+          className="file-loader-local__file-input"
+          id={fieldKey || `file-input-${id}${groupId ? `-${groupId}` : ""}`}
+          type="file"
+          name={fieldKey || id}
+          required={isRequired}
+          accept={accept}
+          {...attributesOfNativeInput}
+        />
+      )}
+      <label
+        className={cn("file-loader-local__label-box", {
+          "file-loader-local__label-box--upload-trigger":
+            fieldId === "uploadTrigger" || !value,
+        })}
+        htmlFor={fieldKey || `file-input-${id}${groupId ? `-${groupId}` : ""}`}
+      >
+        {!value && <Download className="file-loader-local__upload-icon" />}
+        {value && <Paperclip className="file-loader-local__upload-icon" />}
+        <div
+          title={value || label}
+          className="file-loader-local__label-wrapper"
+        >
+          <div
+            className={cn("file-loader-local__label", {
+              "file-loader-local__label-filled": value,
+            })}
+          >
+            <span className="file-loader-local__label-text">
+              {value || label}
+            </span>
+            {error && <span className="file-loader-local__error">{error}</span>}
+            {typeof outerError === "string" && (
+              <span className="file-loader-local__error">{outerError}</span>
+            )}
+          </div>
+        </div>
+
+        {value && !isNoTrashIcon && (
+          <Trash2
+            className="file-loader-local__trash-icon"
+            onClick={() => onChange({ id: fieldId, groupId })}
+          />
+        )}
+        {renderRequiredLabel()}
+      </label>
+    </div>
+  );
+};
+
+export default FileLoaderLocal;

package/dist/Atomic/FormElements/FileLoaderLocalGroup/FileLoaderLocalGroup.js

@@ -1 +1,193 @@
-function e(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=Array(r);t<r;t++)n[t]=e[t];return n}function r(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.forEach(function(r){var n;n=t[r],r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n})}return e}function t(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):(function(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t})(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}),e}function n(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){var t,n,l=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=l){var o=[],i=!0,a=!1;try{for(l=l.call(e);!(i=(t=l.next()).done)&&(o.push(t.value),!r||o.length!==r);i=!0);}catch(e){a=!0,n=e}finally{try{i||null==l.return||l.return()}finally{if(a)throw n}}return o}}(e,r)||o(e,r)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function l(r){return function(r){if(Array.isArray(r))return e(r)}(r)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(r)||o(r)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(r,t){if(r){if("string"==typeof r)return e(r,t);var n=Object.prototype.toString.call(r).slice(8,-1);if("Object"===n&&r.constructor&&(n=r.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return e(r,t)}}import{jsx as i,jsxs as a}from"react/jsx-runtime";import{useEffect as u,useState as c}from"react";import s from"classnames";import{Info as d}from"react-feather";import{clone as f,getBase64 as p,getUniqueFileExtensions as v}from"../../../Functions/utils";import m from"../../UI/Alert/Alert";import g from"../FileLoaderLocal/FileLoaderLocal";import"./FileLoaderLocalGroup.scss";export default function(e){var o=e.className,y=e.groupsArray,b=void 0===y?[]:y,h=e.isSingleGroup,O=e.onChange,j=e.labelPrefix,S=void 0===j?"Please attach":j,I=e.testId,x=void 0===I?"file-loader-local-group":I;e.alertText;var N=n(c(f(b)),2),P=N[0],w=N[1],A=function(e){var r,t,n,l,o;return{id:isNaN((null==(r=e.files)?void 0:r.at(-1).id)+1)?1:(null==(t=e.files)?void 0:t.at(-1).id)+1,value:"",base64:"",error:"",accept:e.accept||".jpg, .jpeg, .png, .pdf",maxItemSizeBytes:null!=(o=e.maxItemSizeBytes)?o:0xa00000,isRequired:(null==e?void 0:e.isRequired)||!1,fieldKey:isNaN((null==(n=e.files)?void 0:n.at(-1).id)+1)?1:(null==(l=e.files)?void 0:l.at(-1).id)+1}},_=function(e,r){for(var t=r,l=n(r.split(/(?=\.[^.]+$)/),2),o=l[0],i=l[1],a=1;e.some(function(e){return e.value===t});)t="".concat(o,"(").concat(a,")").concat(i),a+=1;return t};u(function(){w(null==b?void 0:b.map(function(e){return t(r({},e),{files:[A(e)]})}))},[]);var T={change:function(e){e.e;var n=e.groupId,o=e.name,i=e.id,a=e.error,u=(e.valueExtension,e.file),c=null==P?void 0:P.find(function(e){return e.groupId===n.toString()}),s=null==c?void 0:c.files,d=s.find(function(e){return Number(e.id)===Number(i)});if(a)d.value=o,d.error=a,w(l(P)),O(P);else if(o&&!a){var f=_(s,o);p(u).then(function(e){d.value=f,d.base64=e,d.error="";var o=null==P?void 0:P.map(function(e){return(null==e?void 0:e.groupId)===n.toString()&&h?t(r({},e),{files:l(e.files)}):(null==e?void 0:e.groupId)===n.toString()&&e.files.length<10&&!h?t(r({},e),{files:l(e.files).concat([t(r({},A(e)),{isRequired:e.files.length>1})])}):e});w(l(o)),O(o)}).catch(function(e){})}else{var v=null==P?void 0:P.map(function(e){return h&&(null==e?void 0:e.groupId)===n.toString()?t(r({},e),{files:[t(r({},A(e)),{value:"",base64:""})]}):(null==e?void 0:e.groupId)!==n.toString()||h?e:t(r({},e),{files:e.files.filter(function(e){return e.id!==i})})});w(l(v)),O(v)}}};return null==P?void 0:P.map(function(e){var r,t;return a("div",{"data-testid":x,className:s("file-loader-local-groups",o),children:[i("span",{className:"file-loader-local-groups__label",children:a("div",{className:"file-loader-local-groups__label-text",children:[S," ",null==e?void 0:e.groupTitleDescription," ",a("span",{className:"file-loader-local-groups__label-extension",children:["(",v(null==(t=null==e?void 0:e.accept)?void 0:t.replace(/\./g,"")),"):"]})]})}),(null==e?void 0:e.alertText)&&i(m,{className:"file-loader-local-groups__alert",noDismiss:!0,icon:i(d,{}),message:null==e?void 0:e.alertText}),i("div",{className:"file-loader-local-groups__item",children:null==e||null==(r=e.files)?void 0:r.map(function(r,t){var n,l;return i(g,{groupId:null==e?void 0:e.groupId,fieldKey:(null==r?void 0:r.fieldKey)?"".concat(r.fieldKey,":").concat(null==e?void 0:e.groupId,":").concat(Math.random().toString().slice(-4)):null==r?void 0:r.id,id:(null==r?void 0:r.id)||t,error:null==r?void 0:r.error,label:"Upload document",accept:null==r?void 0:r.accept,value:null==r?void 0:r.value,maxItemSizeBytes:null==r?void 0:r.maxItemSizeBytes,onChange:function(e){return T.change(e,null==r?void 0:r.id)},isRequired:(null==(n=e.files)?void 0:n.length)<=1,isNoTrashIcon:(null==(l=e.files)?void 0:l.length)<=1&&!h},(null==r?void 0:r.id)||t)})})]},e.groupId)})}
+import React, { useEffect, useState } from "react";
+
+import cn from "classnames";
+import { Info } from "react-feather";
+
+import {
+  clone,
+  getBase64,
+  getUniqueFileExtensions,
+} from "../../../Functions/utils";
+import Alert from "../../UI/Alert/Alert";
+import FileLoaderLocal from "../FileLoaderLocal/FileLoaderLocal";
+
+import "./FileLoaderLocalGroup.scss";
+
+const DEFAULT_LABEL_PREFIX = "Please attach";
+const MAX_FILE_SIZE = 10 * 1024 * 1024;
+
+const FileLoaderLocalGroup = ({
+  className,
+  groupsArray = [],
+  isSingleGroup,
+  onChange,
+  labelPrefix = DEFAULT_LABEL_PREFIX,
+  testId = "file-loader-local-group",
+  alertText,
+}) => {
+  const [groups, setGroups] = useState(clone(groupsArray));
+
+  const getNewFile = (group) => {
+    return {
+      id: isNaN(group.files?.at(-1).id + 1) ? 1 : group.files?.at(-1).id + 1,
+      value: "",
+      base64: "",
+      error: "",
+      accept: group.accept || ".jpg, .jpeg, .png, .pdf",
+      maxItemSizeBytes: group.maxItemSizeBytes ?? MAX_FILE_SIZE,
+      isRequired: group?.isRequired || false,
+      fieldKey: isNaN(group.files?.at(-1).id + 1) ? 1 : group.files?.at(-1).id + 1,
+    };
+  };
+
+  const generateUniqueFileName = (files, name) => {
+    let fileName = name;
+    const [nameWithoutExtension, extension] = name.split(/(?=\.[^.]+$)/);
+    let count = 1;
+
+    while (files.some(file => file.value === fileName)) {
+      fileName = `${nameWithoutExtension}(${count})${extension}`;
+      count += 1;
+    }
+
+    return fileName;
+  };
+
+  useEffect(() => {
+    const mergedGroups = groupsArray?.map((group) => {
+      return {
+        ...group,
+        files: [getNewFile(group)],
+      };
+    });
+
+    setGroups(mergedGroups);
+  }, []);
+
+  const handle = {
+    change: ({ e, groupId, name, id, error, valueExtension, file }) => {
+      const currentGroup = groups?.find(
+        (group) => group.groupId === groupId.toString(),
+      );
+      const files = currentGroup?.files;
+      const changedField = files.find((item) => Number(item.id) === Number(id));
+
+      if (error) {
+        changedField.value = name;
+        changedField.error = error;
+        setGroups([...groups]);
+        onChange(groups);
+      } else if (name && !error) {
+        const uniqueFileName = generateUniqueFileName(files, name);
+        getBase64(file)
+          .then((result) => {
+            changedField.value = uniqueFileName;
+            changedField.base64 = result;
+            changedField.error = "";
+
+            const oldDataWithNewFile = groups?.map((group) => {
+              if (group?.groupId === groupId.toString() && isSingleGroup) {
+                return {
+                  ...group,
+                  files: [...group.files],
+                };
+              } else if (
+                group?.groupId === groupId.toString() &&
+                group.files.length < 10 &&
+                !isSingleGroup
+              ) {
+                return {
+                  ...group,
+                  files: [
+                    ...group.files,
+                    {
+                      ...getNewFile(group),
+                      isRequired: group.files.length > 1,
+                    },
+                  ],
+                };
+              }
+              return group;
+            });
+            setGroups([...oldDataWithNewFile]);
+            onChange(oldDataWithNewFile);
+          })
+          .catch((e) => console.error(e));
+      } else {
+        const oldDataWithRemovedFile = groups?.map((group) => {
+          if (isSingleGroup && group?.groupId === groupId.toString()) {
+            return {
+              ...group,
+              files: [{ ...getNewFile(group), value: "", base64: "" }],
+            };
+          } else if (group?.groupId === groupId.toString() && !isSingleGroup) {
+            return {
+              ...group,
+              files: group.files.filter((item) => item.id !== id),
+            };
+          }
+          return group;
+        });
+        setGroups([...oldDataWithRemovedFile]);
+        onChange(oldDataWithRemovedFile);
+      }
+    },
+  };
+
+  const getUniqueExts = (acceptExts) =>
+    getUniqueFileExtensions(acceptExts?.replace(/\./g, ""));
+
+  return groups?.map((group) => {
+    return (
+      <div
+        data-testid={testId}
+        key={group.groupId}
+        className={cn("file-loader-local-groups", className)}
+      >
+        <span className="file-loader-local-groups__label">
+          <div className="file-loader-local-groups__label-text">
+            {labelPrefix} {group?.groupTitleDescription}{" "}
+            <span className="file-loader-local-groups__label-extension">
+              ({getUniqueExts(group?.accept)}):
+            </span>
+          </div>
+        </span>
+
+        {group?.alertText && (
+          <Alert
+            className="file-loader-local-groups__alert"
+            noDismiss
+            icon={<Info />}
+            message={group?.alertText}
+          />
+        )}
+        <div className="file-loader-local-groups__item">
+          {group?.files?.map((file, index) => {
+            return (
+              <FileLoaderLocal
+                groupId={group?.groupId}
+                fieldKey={
+                  file?.fieldKey
+                    ? `${file.fieldKey}:${group?.groupId}:${Math.random().toString().slice(-4)}`
+                    : file?.id
+                }
+                key={file?.id || index}
+                id={file?.id || index}
+                error={file?.error}
+                label="Upload document"
+                accept={file?.accept}
+                value={file?.value}
+                maxItemSizeBytes={file?.maxItemSizeBytes}
+                onChange={(value) => handle.change(value, file?.id)}
+                isRequired={group.files?.length <= 1 || false}
+                isNoTrashIcon={group.files?.length <= 1 && !isSingleGroup}
+              />
+            );
+          })}
+        </div>
+      </div>
+    );
+  });
+};
+
+export default FileLoaderLocalGroup;

package/dist/Atomic/FormElements/FormattedRawSSN/FormattedRawSSN.js

@@ -1 +1,135 @@
-function t(t,r){(null==r||r>t.length)&&(r=t.length);for(var e=0,n=Array(r);e<r;e++)n[e]=t[e];return n}import{jsx as r,jsxs as e}from"react/jsx-runtime";import{useRef as n,useState as i}from"react";import{Eye as o,EyeOff as a}from"react-feather";import{getLimitedMask as s}from"../../../Functions/utils";import l from"../InputMask3/InputMask3";import"./FormattedRawSSN.scss";var c=["D"];export default function(u){var f,d,m,p=u.value,y=u.onChange,b=void 0===y?function(){}:y,h=u.testId,O=void 0===h?"formatted-raw-ssn":h,v=u.fullSnnMask,g=u.significantChars,j=void 0===g?c:g,k=u.maskChar,w=u.isHiddenDefault,S=void 0===w||w,D=u.maxLen,C=u.countOfFirstDigitsToHide,P=void 0===C?5:C,x=u.postfix,N=void 0===x?"":x,I=function(t,r){if(null==t)return{};var e,n,i=function(t,r){if(null==t)return{};var e,n,i={},o=Object.keys(t);for(n=0;n<o.length;n++)e=o[n],r.indexOf(e)>=0||(i[e]=t[e]);return i}(t,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);for(n=0;n<o.length;n++)e=o[n],!(r.indexOf(e)>=0)&&Object.prototype.propertyIsEnumerable.call(t,e)&&(i[e]=t[e])}return i}(u,["value","onChange","testId","fullSnnMask","significantChars","maskChar","isHiddenDefault","maxLen","countOfFirstDigitsToHide","postfix"]),M=(f=i(S),function(t){if(Array.isArray(t))return t}(f)||function(t,r){var e,n,i=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=i){var o=[],a=!0,s=!1;try{for(i=i.call(t);!(a=(e=i.next()).done)&&(o.push(e.value),o.length!==r);a=!0);}catch(t){s=!0,n=t}finally{try{a||null==i.return||i.return()}finally{if(s)throw n}}return o}}(f,2)||function(r,e){if(r){if("string"==typeof r)return t(r,2);var n=Object.prototype.toString.call(r).slice(8,-1);if("Object"===n&&r.constructor&&(n=r.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return t(r,e)}}(f,2)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),H=M[0],A=M[1],E=n(null),F=s({mask:void 0===v?"DDD-DD-DDDD":v,significantChars:j,limit:void 0===D?9:D,isOnlyMask:!1}),T=function(){if(isNaN(Number(P))||!Number(P))return -1;if(P>F.countOfSignificantChars)return F.mask.length;var t=s({mask:F.mask,significantChars:j,limit:P,isOnlyMask:!1});return P+t.countOfNotSignificantChars-1}();return e("div",{"data-testid":O,className:"formatted-raw-ssn",ref:E,children:[r(l,(d=function(t){for(var r=1;r<arguments.length;r++){var e=null!=arguments[r]?arguments[r]:{},n=Object.keys(e);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(e).filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.forEach(function(r){var n;n=e[r],r in t?Object.defineProperty(t,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[r]=n})}return t}({},I),m=m={value:void 0===p?"":p,onChange:function(t){b(t||""===t?null==t?void 0:t.toString():"")},testId:"formattedRawSNN--input--key-".concat(O),maskPattern:F.mask,maskPlaceholder:"X",focusSelector:"input",isNumericMobileKeyboard:!0,blinkErrors:!0,showErrors:!1,withHiddenMode:!0,isValueHiddenDefault:S,hiddenChar:void 0===k?"*":k,maxHiddenIndex:T,isHide:H},Object.getOwnPropertyDescriptors?Object.defineProperties(d,Object.getOwnPropertyDescriptors(m)):(function(t,r){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e.push.apply(e,n)}return e})(Object(m)).forEach(function(t){Object.defineProperty(d,t,Object.getOwnPropertyDescriptor(m,t))}),d)),N&&r("span",{className:"formatted-raw-ssn-postfix",onClick:function(){var t,r;return null==E||null==(r=E.current)||null==(t=r.querySelector("input"))?void 0:t.focus()},children:N}),e("span",{className:"formatted-raw-ssn-eye-holder",onClick:function(){return A(!H)},children:[" ",H?r(o,{strokeWidth:1,className:"password-icon"}):r(a,{strokeWidth:1,className:"password-icon"})]})]})}
+import React, { useRef, useState } from "react";
+
+import { Eye, EyeOff } from "react-feather";
+
+import { getLimitedMask, setCarretToEnd } from "../../../Functions/utils";
+import InputMask3 from "../InputMask3/InputMask3";
+
+import "./FormattedRawSSN.scss";
+
+const DEFAULT_SSN_MASK = "DDD-DD-DDDD";
+const SIGNIFICANT_CHARACTERS = ["D"];
+
+const FormattedRawSSN = ({
+  value = "",
+  onChange: onChangeProp = () => {},
+  testId = "formatted-raw-ssn",
+
+  // ! ВСЕ "пляшет" от fullSnnMask и significantChars
+  // Маска для полного snn (технически ограничений нет, НО нужно передавать то, что понимает InputMask3)
+  fullSnnMask = DEFAULT_SSN_MASK,
+  // Значащие символы в fullSnnMask
+  // Технически ограничений нет, НО нужно передавать
+  //    - массив ОДИНОЧНЫХ символов
+  //    - массив тех символов, которые правильно трактуются в InputMask3 (смотри InputMask3/config)
+  significantChars = SIGNIFICANT_CHARACTERS,
+  // Символ для маскировки
+  maskChar = "*",
+  // Инициализационное значение (сразу скрывать или нет)
+  isHiddenDefault = true,
+  // Максимальное значение ВВОДИМЫХ цифр
+  maxLen = 9, // ? Речь о значащих символах
+  // Сколько из ПЕРВЫХ вводимых нужно прятать при включении мода маскировки
+  countOfFirstDigitsToHide = 5, // ? Речь о значащих символах
+  // Статическая часть
+  postfix = "",
+
+  ...args
+}) => {
+  // ? Будем пользоваться своим (верхним относительно InputMask3) стейтом
+  // ? Это потребует отрисовки триггера "поверх" InputMask3.
+  const [isHidden, setIsHidden] = useState(isHiddenDefault);
+  const wrapperRef = useRef(null);
+
+  const onChange = (value) => {
+    const newValue = !value && value !== "" ? "" : value?.toString();
+    onChangeProp(newValue);
+  };
+
+  // ? Пересчитываем маску с учетом переданного maxLen.
+  // ? Если maxLen меньше количества значащих символов в fullSnnMask, то маска корректно обрежется.
+  // ? Передаем опцию isOnlyMask: false, чтобы получить НЕ только новую маску, а еще и статистику.
+  // ? В этом случае приходит объект формата: { mask, countOfSignificantChars, countOfNotSignificantChars }
+  const infoAboutMask = getLimitedMask({
+    mask: fullSnnMask,
+    significantChars: significantChars,
+    limit: maxLen,
+    isOnlyMask: false,
+  });
+
+  // ? Расчитываем ИНДЕКС крайнего символа части маски, которая подлежит скрытию,
+  // ? исходя из countOfFirstDigitsToHide
+  const maxHiddenIndex = (() => {
+    // если не приводится к числу или ноль (передавать ноль лишено смысла)
+    if (
+      isNaN(Number(countOfFirstDigitsToHide)) ||
+      !Number(countOfFirstDigitsToHide)
+    )
+      return -1;
+    // если больше чем значимых символов
+    if (countOfFirstDigitsToHide > infoAboutMask.countOfSignificantChars)
+      return infoAboutMask.mask.length;
+
+    // ? Для расчетов получаем дополнительно корректно "обрезанную" маску (до уровня скрываемой части)
+    // ? на основе ранее полученной "обрезанной" по maxLen. Нам нужна НЕ сама маска, а статистика по ней.
+    // ? В частности - количество "незначащих" символов содержащихся в скрываемой части
+    const infoAboutMaskOfHidden = getLimitedMask({
+      mask: infoAboutMask.mask,
+      significantChars: significantChars,
+      limit: countOfFirstDigitsToHide,
+      isOnlyMask: false,
+    });
+
+    // ? Для InputMask3 maxHiddenIndex должен быть передан относительно длины ВСЕЙ применяемой маски (наша "обрезанная" по maxLen).
+    // ? Поэтому к количеству "скрываемых" символов добавляем количество "незначащих", входящих в скрываемую часть маски.
+    // ? Т.к. расчитываем НЕ длинну, а индекс - отнимаем 1
+    return (
+      countOfFirstDigitsToHide +
+      infoAboutMaskOfHidden.countOfNotSignificantChars -
+      1
+    );
+  })();
+
+  return (
+    <div data-testid={testId} className="formatted-raw-ssn" ref={wrapperRef}>
+      <InputMask3
+        {...args}
+        value={value}
+        onChange={onChange}
+        testId={`formattedRawSNN--input--key-${testId}`}
+        maskPattern={infoAboutMask.mask}
+        maskPlaceholder="X"
+        focusSelector="input"
+        isNumericMobileKeyboard={true}
+        blinkErrors={true}
+        showErrors={false}
+        withHiddenMode={true}
+        isValueHiddenDefault={isHiddenDefault}
+        hiddenChar={maskChar}
+        maxHiddenIndex={maxHiddenIndex}
+        isHide={isHidden}
+      />
+      {postfix && (
+        <span
+          className="formatted-raw-ssn-postfix"
+          onClick={() => wrapperRef?.current?.querySelector("input")?.focus()}
+        >
+          {postfix}
+        </span>
+      )}
+      <span
+        className="formatted-raw-ssn-eye-holder"
+        onClick={() => setIsHidden(!isHidden)}
+      >
+        {" "}
+        {isHidden ? (
+          <Eye strokeWidth={1} className="password-icon" />
+        ) : (
+          <EyeOff strokeWidth={1} className="password-icon" />
+        )}
+      </span>
+    </div>
+  );
+};
+
+export default FormattedRawSSN;

package/dist/Atomic/FormElements/FormattedRawSSN/FormattedRawSSN_old.js

@@ -1 +1,116 @@
-function t(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=Array(e);r<e;r++)n[r]=t[r];return n}function e(e,r){return function(t){if(Array.isArray(t))return t}(e)||function(t,e){var r,n,o=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=o){var l=[],i=!0,c=!1;try{for(o=o.call(t);!(i=(r=o.next()).done)&&(l.push(r.value),!e||l.length!==e);i=!0);}catch(t){c=!0,n=t}finally{try{i||null==o.return||o.return()}finally{if(c)throw n}}return l}}(e,r)||function(e,r){if(e){if("string"==typeof e)return t(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);if("Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return t(e,r)}}(e,r)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}import{jsx as r,jsxs as n}from"react/jsx-runtime";import{useEffect as o,useRef as l,useState as i}from"react";import{Eye as c,EyeOff as a}from"react-feather";import{setCarretToEnd as u}from"../../../Functions/utils";import s from"../Input/Input";import"./FormattedRawSSN.scss";export default function(t){var f,p,d,m,y,g=t.value,b=void 0===g?"":g,v=t.postfix,h=void 0===v?"":v,O=t.onChange,j=void 0===O?function(){}:O,w=t.maskChar,S=t.testId,P=t.isHiddenDefault,x=t.maxLen,k=void 0===x?9:x,C=function(t,e){if(null==t)return{};var r,n,o=function(t,e){if(null==t)return{};var r,n,o={},l=Object.keys(t);for(n=0;n<l.length;n++)r=l[n],e.indexOf(r)>=0||(o[r]=t[r]);return o}(t,e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(n=0;n<l.length;n++)r=l[n],!(e.indexOf(r)>=0)&&Object.prototype.propertyIsEnumerable.call(t,r)&&(o[r]=t[r])}return o}(t,["value","postfix","onChange","maskChar","testId","isHiddenDefault","maxLen"]),I=e(i(null!=(y=null==b?void 0:b.substring(0,k))?y:""),2),D=I[0],A=I[1],N=e(i(void 0===P||P),2),E=N[0],q=N[1],F=l(null);return o(function(){var t,e;A(null!=(e=null==b||null==(t=b.toString())?void 0:t.substring(0,k))?e:"")},[b]),o(function(){D&&(null==j||j(D.concat(D.length===k?h:"").replace(/-/g,"")))},[D]),n("div",{"data-testid":void 0===S?"formatted-raw-ssn":S,className:"formatted-raw-ssn",ref:F,children:[r(s,(d=function(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter(function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable}))),n.forEach(function(e){var n;n=r[e],e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n})}return t}({},C),m=m={value:(p=(f=D)?(f=f.slice(0,11).replace(/-/g,"")).length<=3?f:f.length>3&&f.length<=5?"".concat(f.slice(0,3),"-").concat(f.slice(3)):f.length>5?"".concat(f.slice(0,3),"-").concat(f.slice(3,5),"-").concat(f.slice(5)):void 0:"",E?p.slice(0,7).replace(/[0-9]/g,void 0===w?"*":w).concat(p.slice(7)):p),onChange:function(t){if(!t&&""!==t)return"";if(t.replace(/-/g,"").length<D.length){var e=D.length-1;A(D.slice(0,e));return}var r=t.replace(/\D/g,""),n="";(n=E?D.length>5?D.slice(0,5)+r:D+r:r).length>k||A(n)}},Object.getOwnPropertyDescriptors?Object.defineProperties(d,Object.getOwnPropertyDescriptors(m)):(function(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);r.push.apply(r,n)}return r})(Object(m)).forEach(function(t){Object.defineProperty(d,t,Object.getOwnPropertyDescriptor(m,t))}),d)),h&&r("span",{className:"formatted-raw-ssn-postfix",onClick:function(){var t,e;return null==F||null==(e=F.current)||null==(t=e.querySelector("input"))?void 0:t.focus()},children:h}),n("span",{className:"formatted-raw-ssn-eye-holder",onClick:function(){var t,e=null==F||null==(t=F.current)?void 0:t.querySelector("input");null==e||e.focus(),u(e),q(!E)},children:[" ",E?r(c,{strokeWidth:1,className:"password-icon"}):r(a,{strokeWidth:1,className:"password-icon"})]})]})}
+import React, { useEffect, useRef, useState } from "react";
+
+import { Eye, EyeOff } from "react-feather";
+
+import { setCarretToEnd } from "../../../Functions/utils";
+import Input from "../Input/Input";
+
+import "./FormattedRawSSN.scss";
+
+const FormattedRawSSN = ({
+  value = "",
+  postfix = "",
+  onChange: onChangeProp = () => {},
+  maskChar = "*",
+  testId = "formatted-raw-ssn",
+  isHiddenDefault = true,
+  maxLen = 9,
+  ...args
+}) => {
+  const [SSN, setSSN] = useState(value?.substring(0, maxLen) ?? "");
+  const [isHidden, setIsHidden] = useState(isHiddenDefault);
+  const wrapperRef = useRef(null);
+
+  useEffect(() => {
+    setSSN(value?.toString()?.substring(0, maxLen) ?? "");
+  }, [value]);
+
+  const onChange = (value) => {
+    if (!value && value !== "") return "";
+
+    if (value.replace(/-/g, "").length < SSN.length) {
+      const last = SSN.length - 1;
+      setSSN(SSN.slice(0, last));
+      return;
+    }
+
+    const numValue = value.replace(/\D/g, "");
+    let newSSN = "";
+
+    if (isHidden) {
+      if (SSN.length > 5) {
+        newSSN = SSN.slice(0, 5) + numValue;
+      } else {
+        newSSN = SSN + numValue;
+      }
+    } else {
+      newSSN = numValue;
+    }
+
+    if (newSSN.length > maxLen) {
+      return;
+    }
+    setSSN(newSSN);
+  };
+  const switchView = () => {
+    const input = wrapperRef?.current?.querySelector("input");
+    input?.focus();
+    setCarretToEnd(input);
+    setIsHidden(!isHidden);
+  };
+
+  const getFormatedValue = (v) => {
+    if (!v) return "";
+
+    v = v.slice(0, 11).replace(/-/g, "");
+    if (v.length <= 3) {
+      return v;
+    }
+    if (v.length > 3 && v.length <= 5) {
+      return `${v.slice(0, 3)}-${v.slice(3)}`;
+    }
+    if (v.length > 5) {
+      return `${v.slice(0, 3)}-${v.slice(3, 5)}-${v.slice(5)}`;
+    }
+  };
+  const getMaskedValue = (v) => {
+    return isHidden
+      ? v.slice(0, 7).replace(/[0-9]/g, maskChar).concat(v.slice(7))
+      : v;
+  };
+
+  useEffect(() => {
+    if (SSN)
+      onChangeProp?.(
+        SSN.concat(SSN.length === maxLen ? postfix : "").replace(/-/g, ""),
+      );
+  }, [SSN]);
+
+  return (
+    <div data-testid={testId} className="formatted-raw-ssn" ref={wrapperRef}>
+      <Input
+        {...args}
+        value={getMaskedValue(getFormatedValue(SSN))}
+        onChange={onChange}
+      />
+      {postfix && (
+        <span
+          className="formatted-raw-ssn-postfix"
+          onClick={() => wrapperRef?.current?.querySelector("input")?.focus()}
+        >
+          {postfix}
+        </span>
+      )}
+      <span className="formatted-raw-ssn-eye-holder" onClick={switchView}>
+        {" "}
+        {isHidden ? (
+          <Eye strokeWidth={1} className="password-icon" />
+        ) : (
+          <EyeOff strokeWidth={1} className="password-icon" />
+        )}
+      </span>
+    </div>
+  );
+};
+
+export default FormattedRawSSN;