intelicoreact 1.5.41 → 1.6.0

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

@@ -1,121 +1,165 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactFeather = require("react-feather");
-var _utils = require("../../../Functions/utils");
-var _InputMask = _interopRequireDefault(require("../InputMask3/InputMask3"));
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactfeather = require("react-feather");
+const _utils = require("../../../Functions/utils");
+const _InputMask3 = /*#__PURE__*/ _interop_require_default(require("../InputMask3/InputMask3"));
 require("./FormattedRawSSN.scss");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
 const DEFAULT_SSN_MASK = "DDD-DD-DDDD";
-const SIGNIFICANT_CHARACTERS = ["D"];
-const FormattedRawSSN = _ref => {
-  let {
-    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
-  } = _ref;
-  // ? Будем пользоваться своим (верхним относительно InputMask3) стейтом
-  // ? Это потребует отрисовки триггера "поверх" InputMask3.
-  const [isHidden, setIsHidden] = (0, _react.useState)(isHiddenDefault);
-  const wrapperRef = (0, _react.useRef)(null);
-  const onChange = value => {
-    const newValue = !value && value !== "" ? "" : value?.toString();
-    onChangeProp(newValue);
-  };
-
-  // ? Пересчитываем маску с учетом переданного maxLen.
-  // ? Если maxLen меньше количества значащих символов в fullSnnMask, то маска корректно обрежется.
-  // ? Передаем опцию isOnlyMask: false, чтобы получить НЕ только новую маску, а еще и статистику.
-  // ? В этом случае приходит объект формата: { mask, countOfSignificantChars, countOfNotSignificantChars }
-  const infoAboutMask = (0, _utils.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 = (0, _utils.getLimitedMask)({
-      mask: infoAboutMask.mask,
-      significantChars: significantChars,
-      limit: countOfFirstDigitsToHide,
-      isOnlyMask: false
+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] = (0, _react.useState)(isHiddenDefault);
+    const wrapperRef = (0, _react.useRef)(null);
+    const onChange = (value)=>{
+        const newValue = !value && value !== "" ? "" : value === null || value === void 0 ? void 0 : value.toString();
+        onChangeProp(newValue);
+    };
+    // ? Пересчитываем маску с учетом переданного maxLen.
+    // ? Если maxLen меньше количества значащих символов в fullSnnMask, то маска корректно обрежется.
+    // ? Передаем опцию isOnlyMask: false, чтобы получить НЕ только новую маску, а еще и статистику.
+    // ? В этом случае приходит объект формата: { mask, countOfSignificantChars, countOfNotSignificantChars }
+    const infoAboutMask = (0, _utils.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 = (0, _utils.getLimitedMask)({
+            mask: infoAboutMask.mask,
+            significantChars: significantChars,
+            limit: countOfFirstDigitsToHide,
+            isOnlyMask: false
+        });
+        // ? Для InputMask3 maxHiddenIndex должен быть передан относительно длины ВСЕЙ применяемой маски (наша "обрезанная" по maxLen).
+        // ? Поэтому к количеству "скрываемых" символов добавляем количество "незначащих", входящих в скрываемую часть маски.
+        // ? Т.к. расчитываем НЕ длинну, а индекс - отнимаем 1
+        return countOfFirstDigitsToHide + infoAboutMaskOfHidden.countOfNotSignificantChars - 1;
+    })();
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        "data-testid": testId,
+        className: "formatted-raw-ssn",
+        ref: wrapperRef,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_InputMask3.default, {
+                ...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 && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                className: "formatted-raw-ssn-postfix",
+                onClick: ()=>{
+                    var _wrapperRef_current_querySelector, _wrapperRef_current;
+                    return wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef_current = wrapperRef.current) === null || _wrapperRef_current === void 0 ? void 0 : (_wrapperRef_current_querySelector = _wrapperRef_current.querySelector("input")) === null || _wrapperRef_current_querySelector === void 0 ? void 0 : _wrapperRef_current_querySelector.focus();
+                },
+                children: postfix
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+                className: "formatted-raw-ssn-eye-holder",
+                onClick: ()=>setIsHidden(!isHidden),
+                children: [
+                    " ",
+                    isHidden ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Eye, {
+                        strokeWidth: 1,
+                        className: "password-icon"
+                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.EyeOff, {
+                        strokeWidth: 1,
+                        className: "password-icon"
+                    })
+                ]
+            })
+        ]
     });
-
-    // ? Для InputMask3 maxHiddenIndex должен быть передан относительно длины ВСЕЙ применяемой маски (наша "обрезанная" по maxLen).
-    // ? Поэтому к количеству "скрываемых" символов добавляем количество "незначащих", входящих в скрываемую часть маски.
-    // ? Т.к. расчитываем НЕ длинну, а индекс - отнимаем 1
-    return countOfFirstDigitsToHide + infoAboutMaskOfHidden.countOfNotSignificantChars - 1;
-  })();
-  return /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": testId,
-    className: "formatted-raw-ssn",
-    ref: wrapperRef
-  }, /*#__PURE__*/_react.default.createElement(_InputMask.default, (0, _extends2.default)({}, 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 && /*#__PURE__*/_react.default.createElement("span", {
-    className: "formatted-raw-ssn-postfix",
-    onClick: () => wrapperRef?.current?.querySelector("input")?.focus()
-  }, postfix), /*#__PURE__*/_react.default.createElement("span", {
-    className: "formatted-raw-ssn-eye-holder",
-    onClick: () => setIsHidden(!isHidden)
-  }, " ", isHidden ? /*#__PURE__*/_react.default.createElement(_reactFeather.Eye, {
-    strokeWidth: 1,
-    className: "password-icon"
-  }) : /*#__PURE__*/_react.default.createElement(_reactFeather.EyeOff, {
-    strokeWidth: 1,
-    className: "password-icon"
-  })));
 };
-var _default = exports.default = FormattedRawSSN;
+const _default = FormattedRawSSN;

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

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    FormattedRawSSNTemplate: function() {
+        return FormattedRawSSNTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _FormattedRawSSN = /*#__PURE__*/ _interop_require_default(require("./FormattedRawSSN"));
+require("../../../../../scss/main.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+global.lng = 'en';
+const _default = {
+    title: 'Form Elements/FormattedRawSSN',
+    component: _FormattedRawSSN.default,
+    argTypes: {
+        onChange: {
+            action: 'onChange'
+        },
+        isHiddenDefault: {
+            control: 'boolean'
+        }
+    }
+};
+const Template = (args)=>{
+    const { value: initialValue, ...restArgs } = args;
+    const [value, setValue] = (0, _react.useState)(initialValue || '');
+    const onChange = (newValue)=>{
+        setValue(newValue);
+        console.log(newValue);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_FormattedRawSSN.default, {
+        ...restArgs,
+        value: value,
+        onChange: onChange
+    });
+};
+const FormattedRawSSNTemplate = Template.bind({});
+FormattedRawSSNTemplate.args = {
+    value: '012345678',
+    fullSnnMask: 'DDD-DD-DDDD',
+    significantChars: [
+        'D'
+    ],
+    maskChar: '*',
+    isHiddenDefault: true,
+    maxLen: 5,
+    countOfFirstDigitsToHide: 5,
+    postfix: '-1111'
+};

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

@@ -1,102 +1,161 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactFeather = require("react-feather");
-var _utils = require("../../../Functions/utils");
-var _Input = _interopRequireDefault(require("../Input/Input"));
-require("./FormattedRawSSN.scss");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const FormattedRawSSN = _ref => {
-  let {
-    value = "",
-    postfix = "",
-    onChange: onChangeProp = () => {},
-    maskChar = "*",
-    testId = "formatted-raw-ssn",
-    isHiddenDefault = true,
-    maxLen = 9,
-    ...args
-  } = _ref;
-  const [SSN, setSSN] = (0, _react.useState)(value?.substring(0, maxLen) ?? "");
-  const [isHidden, setIsHidden] = (0, _react.useState)(isHiddenDefault);
-  const wrapperRef = (0, _react.useRef)(null);
-  (0, _react.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;
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
     }
-    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;
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactfeather = require("react-feather");
+const _utils = require("../../../Functions/utils");
+const _Input = /*#__PURE__*/ _interop_require_default(require("../Input/Input"));
+require("./FormattedRawSSN.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
     }
-    if (newSSN.length > maxLen) {
-      return;
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
     }
-    setSSN(newSSN);
-  };
-  const switchView = () => {
-    const input = wrapperRef?.current?.querySelector("input");
-    input?.focus();
-    (0, _utils.setCarretToEnd)(input);
-    setIsHidden(!isHidden);
-  };
-  const getFormatedValue = v => {
-    if (!v) return "";
-    v = v.slice(0, 11).replace(/-/g, "");
-    if (v.length <= 3) {
-      return v;
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
     }
-    if (v.length > 3 && v.length <= 5) {
-      return `${v.slice(0, 3)}-${v.slice(3)}`;
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
     }
-    if (v.length > 5) {
-      return `${v.slice(0, 3)}-${v.slice(3, 5)}-${v.slice(5)}`;
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
     }
-  };
-  const getMaskedValue = v => {
-    return isHidden ? v.slice(0, 7).replace(/[0-9]/g, maskChar).concat(v.slice(7)) : v;
-  };
-  (0, _react.useEffect)(() => {
-    if (SSN) onChangeProp?.(SSN.concat(SSN.length === maxLen ? postfix : "").replace(/-/g, ""));
-  }, [SSN]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": testId,
-    className: "formatted-raw-ssn",
-    ref: wrapperRef
-  }, /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, args, {
-    value: getMaskedValue(getFormatedValue(SSN)),
-    onChange: onChange
-  })), postfix && /*#__PURE__*/_react.default.createElement("span", {
-    className: "formatted-raw-ssn-postfix",
-    onClick: () => wrapperRef?.current?.querySelector("input")?.focus()
-  }, postfix), /*#__PURE__*/_react.default.createElement("span", {
-    className: "formatted-raw-ssn-eye-holder",
-    onClick: switchView
-  }, " ", isHidden ? /*#__PURE__*/_react.default.createElement(_reactFeather.Eye, {
-    strokeWidth: 1,
-    className: "password-icon"
-  }) : /*#__PURE__*/_react.default.createElement(_reactFeather.EyeOff, {
-    strokeWidth: 1,
-    className: "password-icon"
-  })));
+    return newObj;
+}
+const FormattedRawSSN = ({ value = "", postfix = "", onChange: onChangeProp = ()=>{}, maskChar = "*", testId = "formatted-raw-ssn", isHiddenDefault = true, maxLen = 9, ...args })=>{
+    var _value_substring;
+    const [SSN, setSSN] = (0, _react.useState)((_value_substring = value === null || value === void 0 ? void 0 : value.substring(0, maxLen)) !== null && _value_substring !== void 0 ? _value_substring : "");
+    const [isHidden, setIsHidden] = (0, _react.useState)(isHiddenDefault);
+    const wrapperRef = (0, _react.useRef)(null);
+    (0, _react.useEffect)(()=>{
+        var _value_toString;
+        var _value_toString_substring;
+        setSSN((_value_toString_substring = value === null || value === void 0 ? void 0 : (_value_toString = value.toString()) === null || _value_toString === void 0 ? void 0 : _value_toString.substring(0, maxLen)) !== null && _value_toString_substring !== void 0 ? _value_toString_substring : "");
+    }, [
+        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 = ()=>{
+        var _wrapperRef_current;
+        const input = wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef_current = wrapperRef.current) === null || _wrapperRef_current === void 0 ? void 0 : _wrapperRef_current.querySelector("input");
+        input === null || input === void 0 ? void 0 : input.focus();
+        (0, _utils.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;
+    };
+    (0, _react.useEffect)(()=>{
+        if (SSN) onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(SSN.concat(SSN.length === maxLen ? postfix : "").replace(/-/g, ""));
+    }, [
+        SSN
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        "data-testid": testId,
+        className: "formatted-raw-ssn",
+        ref: wrapperRef,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
+                ...args,
+                value: getMaskedValue(getFormatedValue(SSN)),
+                onChange: onChange
+            }),
+            postfix && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                className: "formatted-raw-ssn-postfix",
+                onClick: ()=>{
+                    var _wrapperRef_current_querySelector, _wrapperRef_current;
+                    return wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef_current = wrapperRef.current) === null || _wrapperRef_current === void 0 ? void 0 : (_wrapperRef_current_querySelector = _wrapperRef_current.querySelector("input")) === null || _wrapperRef_current_querySelector === void 0 ? void 0 : _wrapperRef_current_querySelector.focus();
+                },
+                children: postfix
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+                className: "formatted-raw-ssn-eye-holder",
+                onClick: switchView,
+                children: [
+                    " ",
+                    isHidden ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Eye, {
+                        strokeWidth: 1,
+                        className: "password-icon"
+                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.EyeOff, {
+                        strokeWidth: 1,
+                        className: "password-icon"
+                    })
+                ]
+            })
+        ]
+    });
 };
-var _default = exports.default = FormattedRawSSN;
+const _default = FormattedRawSSN;