intelicoreact 1.6.7 → 1.6.8

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

@@ -0,0 +1,304 @@
+"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, {
+    InputTemplate: function() {
+        return InputTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _Input = /*#__PURE__*/ _interop_require_default(require("./Input"));
+require("../../../../../scss/main.scss");
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+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;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+global.lng = 'en';
+const _default = {
+    title: 'Form Elements/Input',
+    component: _Input.default,
+    argTypes: {
+        disabled: {
+            description: 'Disable input. Default is false.',
+            control: 'boolean'
+        },
+        error: {
+            description: 'Display validation error. Expect error message.',
+            control: 'text'
+        },
+        isPriceInput: {
+            description: 'Style the input as PriceInput. Default is false.',
+            control: 'boolean'
+        },
+        withDelete: {
+            description: 'Show clear (x) icon on hover. Default is false.',
+            control: 'boolean'
+        },
+        onlyNumbers: {
+            description: 'Only allow numeric value. Default is false.',
+            control: 'boolean'
+        },
+        blurTrim: {
+            description: 'Trim value on blur. Default is false.',
+            control: {
+                type: 'object',
+                options: {
+                    trimStart: true,
+                    trimEnd: true,
+                    characters: /\s12345/
+                }
+            }
+        },
+        isTwoDigitAfterDot: {
+            description: 'Allow only two digits after the decimal point. Default is true.',
+            control: 'boolean'
+        },
+        isFocusDefault: {
+            description: 'Automatically focus input on initial load. Default is false.',
+            control: 'boolean'
+        },
+        isCropFirstNool: {
+            description: 'Remove leading zeros. Work only if isPriceInput is true. Default is false.',
+            control: 'boolean'
+        },
+        placeholder: {
+            description: 'Placeholder text for the input.',
+            control: 'text'
+        },
+        type: {
+            description: 'Defines the type of the input.',
+            control: {
+                type: 'select',
+                options: [
+                    'text',
+                    'number',
+                    'password',
+                    'pseudoPassword',
+                    'color',
+                    'date',
+                    'datetime-local',
+                    'month',
+                    'time',
+                    'email',
+                    'range'
+                ]
+            }
+        },
+        icon: {
+            description: 'JSX: Add an icon inside the input',
+            control: 'object'
+        },
+        value: {
+            description: 'Value of the input. This is a required prop.',
+            control: 'text'
+        },
+        className: {
+            description: 'Add additional CSS classes to the input.',
+            control: 'text'
+        },
+        mask: {
+            description: 'Define an input mask. See more at: https://www.npmjs.com/package/react-input-mask',
+            control: 'text'
+        },
+        symbolsLimit: {
+            description: 'Set limit of symbols in input, overhead will be ignored',
+            control: 'number'
+        },
+        onBlur: {
+            description: 'Custom onBlur function',
+            action: 'onBlur'
+        },
+        onFocus: {
+            description: 'Custom onFocus function',
+            action: 'onFocus'
+        },
+        onKeyUp: {
+            description: 'Custom onKeyUp function, returns event keyCode',
+            action: 'onKeyUp'
+        },
+        isNumericMobileKeyboard: {
+            description: 'Enable Mobile Numeric Keyboard',
+            control: 'boolean'
+        },
+        attributesOfNativeInput: {
+            description: 'Object. Optional. This is list of attributes to add in native input',
+            control: 'object'
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: 'Input component for capturing user text input. Supports different styles, behaviors and also validation errors'
+            }
+        }
+    }
+};
+const styles = {
+    with: '200px'
+};
+const Template = (args)=>{
+    const [value, setValue] = (0, _react.useState)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, _object_spread_props(_object_spread({}, args), {
+        style: styles,
+        value: value,
+        onChange: setValue
+    }));
+};
+const InputTemplate = Template.bind({});
+InputTemplate.args = {
+    onlyNumbers: {
+        type: 'float',
+        decimalPlaces: 2
+    },
+    isPriceInput: true,
+    inputMode: "decimal",
+    type: 'text',
+    isLoading: false,
+    isFocusDefault: false,
+    // onlyNumbers: {type: 'float', decimalPlaces: 2, min: 0, max: 1000, isNoEmptyValues: true},
+    isPriceInput: false,
+    isTwoDigitAfterDot: false,
+    isReadOnly: false,
+    disabled: false,
+    error: '',
+    mask: '',
+    withDelete: true,
+    symbolsLimit: 255,
+    placeholder: 'Placeholder',
+    // icon: <User className="mr5" />,
+    isNumericMobileKeyboard: false,
+    isNotValidateASCII: false,
+    isCropFirstNool: false,
+    name: 'test-name',
+    fieldKey: 'test-fieldKey',
+    key: 'test-key',
+    id: 'test-id',
+    // action: (
+    //   <div onClick={() => console.log('input action')} className="mr5 color--primary pointer">
+    //     Generate
+    //   </div>
+    // ),
+    iconKey: 'Anchor',
+    iconKeyProps: {
+        size: 16,
+        color: 'red',
+        strokeWidth: 2
+    },
+    blurTrim: {
+        trimStart: true,
+        trimEnd: false,
+        characters: [
+            '5',
+            '6',
+            '0',
+            ' '
+        ]
+    }
+};
+
+//# sourceMappingURL=Input.stories.js.map

package/dist/Atomic/FormElements/Input/Input.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/Atomic/FormElements/Input/Input.stories.js"],"sourcesContent":["import React, { useState } from 'react';\nimport Input from './Input';\n\nimport '../../../../../scss/main.scss';\n\nglobal.lng = 'en';\n\nexport default {\n  title: 'Form Elements/Input',\n  component: Input,\n  argTypes: {\n    disabled: {\n      description: 'Disable input. Default is false.',\n      control: 'boolean',\n    },\n    error: {\n      description: 'Display validation error. Expect error message.',\n      control: 'text',\n    },\n    isPriceInput: {\n      description: 'Style the input as PriceInput. Default is false.',\n      control: 'boolean',\n    },\n    withDelete: {\n      description: 'Show clear (x) icon on hover. Default is false.',\n      control: 'boolean',\n    },\n    onlyNumbers: {\n      description: 'Only allow numeric value. Default is false.',\n      control: 'boolean',\n    },\n    blurTrim: {\n      description: 'Trim value on blur. Default is false.',\n      control: {\n        type: 'object',\n        options: {\n          trimStart: true,\n          trimEnd: true,\n          characters: /\\s12345/,\n      },\n  },\n    },\n    isTwoDigitAfterDot: {\n      description: 'Allow only two digits after the decimal point. Default is true.',\n      control: 'boolean',\n    },\n    isFocusDefault: {\n      description: 'Automatically focus input on initial load. Default is false.',\n      control: 'boolean',\n    },\n    isCropFirstNool: {\n      description: 'Remove leading zeros. Work only if isPriceInput is true. Default is false.',\n      control: 'boolean',\n    },\n    placeholder: {\n      description: 'Placeholder text for the input.',\n      control: 'text',\n    },\n    type: {\n      description: 'Defines the type of the input.',\n      control: {\n        type: 'select',\n        options: ['text', 'number', 'password', 'pseudoPassword', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range'],\n      },\n    },\n    icon: {\n      description: 'JSX: Add an icon inside the input',\n      control: 'object',\n    },\n    value: {\n      description: 'Value of the input. This is a required prop.',\n      control: 'text',\n    },\n    className: {\n      description: 'Add additional CSS classes to the input.',\n      control: 'text',\n    },\n    mask: {\n      description: 'Define an input mask. See more at: https://www.npmjs.com/package/react-input-mask',\n      control: 'text',\n    },\n    symbolsLimit: {\n      description: 'Set limit of symbols in input, overhead will be ignored',\n      control: 'number',\n    },\n    onBlur: {\n      description: 'Custom onBlur function',\n      action: 'onBlur'\n    },\n    onFocus: {\n      description: 'Custom onFocus function',\n      action: 'onFocus'\n    },\n    onKeyUp: {\n      description: 'Custom onKeyUp function, returns event keyCode',\n      action: 'onKeyUp'\n    },\n    isNumericMobileKeyboard: {\n      description: 'Enable Mobile Numeric Keyboard',\n      control: 'boolean',\n    },\n    attributesOfNativeInput: {\n      description: 'Object. Optional. This is list of attributes to add in native input',\n      control: 'object',\n    }\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: 'Input component for capturing user text input. Supports different styles, behaviors and also validation errors',\n      },\n    },\n  },\n};\n\nconst styles = {\n  with: '200px',\n};\n\nconst Template = args => {\n  const [value, setValue] = useState();\n  return <Input {...args} style={styles} value={value} onChange={setValue} />;\n};\n\nexport const InputTemplate = Template.bind({});\n\nInputTemplate.args = {\n  onlyNumbers: { type: 'float', decimalPlaces: 2 },\n  isPriceInput: true,\n  inputMode: \"decimal\",\n  \n  type: 'text',\n  isLoading: false,\n  isFocusDefault: false,\n  // onlyNumbers: {type: 'float', decimalPlaces: 2, min: 0, max: 1000, isNoEmptyValues: true},\n  isPriceInput: false,\n  isTwoDigitAfterDot: false,\n  isReadOnly: false,\n  disabled: false,\n  error: '',\n  mask: '',\n  withDelete: true,\n  symbolsLimit: 255,\n  placeholder: 'Placeholder',\n  // icon: <User className=\"mr5\" />,\n  isNumericMobileKeyboard: false,\n  isNotValidateASCII: false,\n  isCropFirstNool: false,\n  name: 'test-name',\n  fieldKey: 'test-fieldKey',\n  key: 'test-key',\n  id: 'test-id',\n  // action: (\n  //   <div onClick={() => console.log('input action')} className=\"mr5 color--primary pointer\">\n  //     Generate\n  //   </div>\n  // ),\n\n  iconKey: 'Anchor',\n  iconKeyProps: {\n    size: 16,\n    color: 'red',\n    strokeWidth: 2,\n  },\n  blurTrim: {\n    trimStart: true,\n    trimEnd: false,\n    characters: ['5', '6', '0', ' '],\n  }\n};\n"],"names":["InputTemplate","global","lng","title","component","Input","argTypes","disabled","description","control","error","isPriceInput","withDelete","onlyNumbers","blurTrim","type","options","trimStart","trimEnd","characters","isTwoDigitAfterDot","isFocusDefault","isCropFirstNool","placeholder","icon","value","className","mask","symbolsLimit","onBlur","action","onFocus","onKeyUp","isNumericMobileKeyboard","attributesOfNativeInput","parameters","docs","styles","with","Template","args","setValue","useState","style","onChange","bind","decimalPlaces","inputMode","isLoading","isReadOnly","isNotValidateASCII","name","fieldKey","key","id","iconKey","iconKeyProps","size","color","strokeWidth"],"mappings":";;;;;;;;;;;IA4HaA,aAAa;eAAbA;;IArHb,OA0GE;eA1GF;;;;+DAPgC;8DACd;QAEX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEPC,OAAOC,GAAG,GAAG;MAEb,WAAe;IACbC,OAAO;IACPC,WAAWC,cAAK;IAChBC,UAAU;QACRC,UAAU;YACRC,aAAa;YACbC,SAAS;QACX;QACAC,OAAO;YACLF,aAAa;YACbC,SAAS;QACX;QACAE,cAAc;YACZH,aAAa;YACbC,SAAS;QACX;QACAG,YAAY;YACVJ,aAAa;YACbC,SAAS;QACX;QACAI,aAAa;YACXL,aAAa;YACbC,SAAS;QACX;QACAK,UAAU;YACRN,aAAa;YACbC,SAAS;gBACPM,MAAM;gBACNC,SAAS;oBACPC,WAAW;oBACXC,SAAS;oBACTC,YAAY;gBAChB;YACJ;QACE;QACAC,oBAAoB;YAClBZ,aAAa;YACbC,SAAS;QACX;QACAY,gBAAgB;YACdb,aAAa;YACbC,SAAS;QACX;QACAa,iBAAiB;YACfd,aAAa;YACbC,SAAS;QACX;QACAc,aAAa;YACXf,aAAa;YACbC,SAAS;QACX;QACAM,MAAM;YACJP,aAAa;YACbC,SAAS;gBACPM,MAAM;gBACNC,SAAS;oBAAC;oBAAQ;oBAAU;oBAAY;oBAAkB;oBAAS;oBAAQ;oBAAkB;oBAAS;oBAAQ;oBAAS;iBAAQ;YACjI;QACF;QACAQ,MAAM;YACJhB,aAAa;YACbC,SAAS;QACX;QACAgB,OAAO;YACLjB,aAAa;YACbC,SAAS;QACX;QACAiB,WAAW;YACTlB,aAAa;YACbC,SAAS;QACX;QACAkB,MAAM;YACJnB,aAAa;YACbC,SAAS;QACX;QACAmB,cAAc;YACZpB,aAAa;YACbC,SAAS;QACX;QACAoB,QAAQ;YACNrB,aAAa;YACbsB,QAAQ;QACV;QACAC,SAAS;YACPvB,aAAa;YACbsB,QAAQ;QACV;QACAE,SAAS;YACPxB,aAAa;YACbsB,QAAQ;QACV;QACAG,yBAAyB;YACvBzB,aAAa;YACbC,SAAS;QACX;QACAyB,yBAAyB;YACvB1B,aAAa;YACbC,SAAS;QACX;IACF;IACA0B,YAAY;QACVC,MAAM;YACJ5B,aAAa;gBACXJ,WAAW;YACb;QACF;IACF;AACF;AAEA,MAAMiC,SAAS;IACbC,MAAM;AACR;AAEA,MAAMC,WAAWC,CAAAA;IACf,MAAM,CAACf,OAAOgB,SAAS,GAAGC,IAAAA,eAAQ;IAClC,qBAAO,qBAACrC,cAAK,0CAAKmC;QAAMG,OAAON;QAAQZ,OAAOA;QAAOmB,UAAUH;;AACjE;AAEO,MAAMzC,gBAAgBuC,SAASM,IAAI,CAAC,CAAC;AAE5C7C,cAAcwC,IAAI,GAAG;IACnB3B,aAAa;QAAEE,MAAM;QAAS+B,eAAe;IAAE;IAC/CnC,cAAc;IACdoC,WAAW;IAEXhC,MAAM;IACNiC,WAAW;IACX3B,gBAAgB;IAChB,4FAA4F;IAC5FV,cAAc;IACdS,oBAAoB;IACpB6B,YAAY;IACZ1C,UAAU;IACVG,OAAO;IACPiB,MAAM;IACNf,YAAY;IACZgB,cAAc;IACdL,aAAa;IACb,kCAAkC;IAClCU,yBAAyB;IACzBiB,oBAAoB;IACpB5B,iBAAiB;IACjB6B,MAAM;IACNC,UAAU;IACVC,KAAK;IACLC,IAAI;IACJ,YAAY;IACZ,6FAA6F;IAC7F,eAAe;IACf,WAAW;IACX,KAAK;IAELC,SAAS;IACTC,cAAc;QACZC,MAAM;QACNC,OAAO;QACPC,aAAa;IACf;IACA7C,UAAU;QACRG,WAAW;QACXC,SAAS;QACTC,YAAY;YAAC;YAAK;YAAK;YAAK;SAAI;IAClC;AACF"}

package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+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 _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _momenttimezone = /*#__PURE__*/ _interop_require_default(require("moment-timezone"));
+const _reactinputmask = /*#__PURE__*/ _interop_require_default(require("react-input-mask"));
+const _useClickOutside = require("../../../Functions/useClickOutside");
+const _Calendar = /*#__PURE__*/ _interop_require_default(require("../Calendar/Calendar"));
+require("./InputCalendar.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;
+}
+const InputCalendar = ({ value, minDate, maxDate, format = "MM/DD/YYYY", isDontLimitFuture, onChange, className = "", placeholder = "mm/dd/yyyy", mask = "99/99/9999", isListTop, disabled, disabledFormattedMaxDate = false, testId = "input-calendar", onKeyDown: onKeyDownProp = (e)=>{}, onKeyUp: onKeyUpProp = (e)=>{}, onBlur: onBlurProp = (e)=>{} })=>{
+    const [isOpened, setIsOpened] = (0, _react.useState)(null);
+    const [isOpenedByEnter, setOpenedByEnter] = (0, _react.useState)(false);
+    const calendarRef = (0, _react.useRef)(null);
+    const inputRef = (0, _react.useRef)(null);
+    const formattedMinDate = (0, _momenttimezone.default)(minDate, format).format(format) !== "Invalid date" ? (0, _momenttimezone.default)(minDate, format).format(format) : null;
+    const formattedMaxDate = (0, _momenttimezone.default)(maxDate, format).format(format) !== "Invalid date" ? (0, _momenttimezone.default)(maxDate, format).format(format) : null;
+    const momentMinDate = (0, _momenttimezone.default)(formattedMinDate, format).startOf("day");
+    const momentMaxDate = (0, _momenttimezone.default)(formattedMaxDate, format).startOf("day");
+    (0, _useClickOutside.useClickOutside)(calendarRef, ()=>setIsOpened(false));
+    const changeInputValue = (val)=>{
+        if (onChange) onChange(val);
+    };
+    const changeCalendarDay = (val)=>{
+        if (onChange) onChange(val);
+    };
+    const getCalendarValue = (value)=>{
+        const date = (0, _momenttimezone.default)(value).format("L");
+        if (date !== "Invalid date") return date;
+        return (0, _momenttimezone.default)(new Date()).format("L");
+    };
+    (0, _react.useEffect)(()=>{
+        if (typeof isOpened === "boolean" && !isOpened) {
+            handleBlur();
+        }
+    }, [
+        isOpened
+    ]);
+    const handleBlur = (e)=>{
+        var _inputRef_current;
+        let value = inputRef === null || inputRef === void 0 ? void 0 : (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.value;
+        if ((0, _momenttimezone.default)(value, format).format(format) === "Invalid date" || value.indexOf("_") > -1) value = "";
+        if (value && typeof isOpened === "boolean" && (0, _momenttimezone.default)(value, format).startOf("day").isBefore(momentMinDate, "days")) onChange(formattedMinDate);
+        else if (value && typeof isOpened === "boolean" && (0, _momenttimezone.default)(value, format).endOf("day").isAfter(momentMaxDate, "days")) onChange(formattedMaxDate);
+        else if (value) onChange((0, _momenttimezone.default)(value, format).format(format));
+    };
+    const onKeyDown = (e)=>{
+        if (isOpened && [
+            9,
+            13
+        ].includes(e.keyCode)) {
+            setIsOpened(false);
+            setOpenedByEnter(true);
+        }
+        onKeyDownProp(e);
+    };
+    const onKeyUp = (e)=>{
+        var _e_target_value;
+        const isValidLenght = ((_e_target_value = e.target.value) === null || _e_target_value === void 0 ? void 0 : _e_target_value.replace(/[^0-9]/g, "").length) === 8;
+        if ([
+            9,
+            13
+        ].includes(e.keyCode)) {
+            setIsOpened(true);
+            setOpenedByEnter(true);
+        }
+        if (isValidLenght) {
+            setIsOpened(false);
+            handleBlur();
+        } else {
+            setIsOpened(true);
+        }
+        onKeyUpProp(e);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        "data-testid": testId,
+        className: (0, _classnames.default)("input__wrap calendar-container", className, {
+            "calendar-container_disabled": disabled
+        }),
+        ref: calendarRef,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactinputmask.default, {
+                mask: mask,
+                placeholder: placeholder,
+                value: value,
+                onChange: (e)=>changeInputValue(e.target.value),
+                className: "calendar-dropdown",
+                onClick: ()=>setIsOpened(true),
+                onKeyUp: onKeyUp,
+                onKeyDown: onKeyDown,
+                onBlur: onBlurProp,
+                ref: inputRef
+            }),
+            isOpened ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Calendar.default, {
+                date: getCalendarValue(value),
+                setDate: (newDate)=>changeCalendarDay(newDate),
+                params: {
+                    format,
+                    minDate: formattedMinDate,
+                    maxDate: formattedMaxDate,
+                    momentMinDate,
+                    momentMaxDate,
+                    isDontLimitFuture
+                },
+                isListTop: isListTop,
+                setIsOpened: setIsOpened
+            }) : null
+        ]
+    });
+};
+const _default = InputCalendar;
+
+//# sourceMappingURL=InputCalendar.js.map

package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/Atomic/FormElements/InputCalendar/InputCalendar.js"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\n\nimport cn from \"classnames\";\nimport moment from \"moment-timezone\";\nimport InputMask from \"react-input-mask\";\n\nimport { useClickOutside } from \"../../../Functions/useClickOutside\";\nimport Calendar from \"../Calendar/Calendar\";\n\nimport \"./InputCalendar.scss\";\n\nconst InputCalendar = ({\n  value,\n  minDate,\n  maxDate,\n  format = \"MM/DD/YYYY\",\n  isDontLimitFuture,\n  onChange,\n  className = \"\",\n  placeholder = \"mm/dd/yyyy\",\n  mask = \"99/99/9999\",\n  isListTop,\n  disabled,\n  disabledFormattedMaxDate = false,\n  testId = \"input-calendar\",\n\n  onKeyDown: onKeyDownProp = (e) => {},\n  onKeyUp: onKeyUpProp = (e) => {},\n  onBlur: onBlurProp = (e) => {},\n}) => {\n  const [isOpened, setIsOpened] = useState(null);\n  const [isOpenedByEnter, setOpenedByEnter] = useState(false);\n  const calendarRef = useRef(null);\n  const inputRef = useRef(null);\n\n  const formattedMinDate =\n    moment(minDate, format).format(format) !== \"Invalid date\"\n      ? moment(minDate, format).format(format)\n      : null;\n  const formattedMaxDate =\n    moment(maxDate, format).format(format) !== \"Invalid date\"\n      ? moment(maxDate, format).format(format)\n      : null;\n\n  const momentMinDate = moment(formattedMinDate, format).startOf(\"day\");\n  const momentMaxDate = moment(formattedMaxDate, format).startOf(\"day\");\n\n  useClickOutside(calendarRef, () => setIsOpened(false));\n\n  const changeInputValue = (val) => {\n    if (onChange) onChange(val);\n  };\n\n  const changeCalendarDay = (val) => {\n    if (onChange) onChange(val);\n  };\n\n  const getCalendarValue = (value) => {\n    const date = moment(value).format(\"L\");\n\n    if (date !== \"Invalid date\") return date;\n\n    return moment(new Date()).format(\"L\");\n  };\n\n  useEffect(() => {\n    if (typeof isOpened === \"boolean\" && !isOpened) {\n      handleBlur();\n    }\n  }, [isOpened]);\n\n  const handleBlur = (e) => {\n    let value = inputRef?.current?.value;\n    if (\n      moment(value, format).format(format) === \"Invalid date\" ||\n      value.indexOf(\"_\") > -1\n    )\n      value = \"\";\n\n    if (\n      value &&\n      typeof isOpened === \"boolean\" &&\n      moment(value, format).startOf(\"day\").isBefore(momentMinDate, \"days\")\n    )\n      onChange(formattedMinDate);\n    else if (\n      value &&\n      typeof isOpened === \"boolean\" &&\n      moment(value, format).endOf(\"day\").isAfter(momentMaxDate, \"days\")\n    )\n      onChange(formattedMaxDate);\n    else if (value) onChange(moment(value, format).format(format));\n  };\n\n  const onKeyDown = (e) => {\n    if (isOpened && [9, 13].includes(e.keyCode)) {\n      setIsOpened(false);\n      setOpenedByEnter(true);\n    }\n\n    onKeyDownProp(e);\n  };\n\n  const onKeyUp = (e) => {\n    const isValidLenght = e.target.value?.replace(/[^0-9]/g, \"\").length === 8;\n\n    if ([9, 13].includes(e.keyCode)) {\n      setIsOpened(true);\n      setOpenedByEnter(true);\n    }\n\n    if (isValidLenght) {\n      setIsOpened(false);\n      handleBlur();\n    } else {\n      setIsOpened(true);\n    }\n    onKeyUpProp(e);\n  };\n\n  return (\n    <div\n      data-testid={testId}\n      className={cn(\"input__wrap calendar-container\", className, {\n        \"calendar-container_disabled\": disabled,\n      })}\n      ref={calendarRef}\n    >\n      <InputMask\n        mask={mask}\n        placeholder={placeholder}\n        value={value}\n        onChange={(e) => changeInputValue(e.target.value)}\n        className=\"calendar-dropdown\"\n        onClick={() => setIsOpened(true)}\n        onKeyUp={onKeyUp}\n        onKeyDown={onKeyDown}\n        onBlur={onBlurProp}\n        ref={inputRef}\n      />\n      {isOpened ? (\n        <Calendar\n          date={getCalendarValue(value)}\n          setDate={(newDate) => changeCalendarDay(newDate)}\n          params={{\n            format,\n            minDate: formattedMinDate,\n            maxDate: formattedMaxDate,\n            momentMinDate,\n            momentMaxDate,\n            isDontLimitFuture,\n          }}\n          isListTop={isListTop}\n          setIsOpened={setIsOpened}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nexport default InputCalendar;\n"],"names":["InputCalendar","value","minDate","maxDate","format","isDontLimitFuture","onChange","className","placeholder","mask","isListTop","disabled","disabledFormattedMaxDate","testId","onKeyDown","onKeyDownProp","e","onKeyUp","onKeyUpProp","onBlur","onBlurProp","isOpened","setIsOpened","useState","isOpenedByEnter","setOpenedByEnter","calendarRef","useRef","inputRef","formattedMinDate","moment","formattedMaxDate","momentMinDate","startOf","momentMaxDate","useClickOutside","changeInputValue","val","changeCalendarDay","getCalendarValue","date","Date","useEffect","handleBlur","current","indexOf","isBefore","endOf","isAfter","includes","keyCode","isValidLenght","target","replace","length","div","data-testid","cn","ref","InputMask","onClick","Calendar","setDate","newDate","params"],"mappings":"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"}

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

@@ -0,0 +1,168 @@
+"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, {
+    CalendarTemplate: function() {
+        return CalendarTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _InputCalendar = /*#__PURE__*/ _interop_require_default(require("./InputCalendar"));
+require("../../../../../scss/main.scss");
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+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;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+global.lng = 'en';
+const _default = {
+    title: 'Form Elements/Input Calendar',
+    component: _InputCalendar.default,
+    argTypes: {
+        value: {
+            description: 'string (mm.dd.yyyy)'
+        }
+    }
+};
+const Template = (args)=>{
+    const [date, setDate] = (0, _react.useState)('');
+    const [disabled, setDisabled] = (0, _react.useState)(false);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_InputCalendar.default, _object_spread_props(_object_spread({}, args), {
+                value: date,
+                onChange: (val)=>setDate(val),
+                disabled: disabled
+            })),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                style: {
+                    display: 'flex',
+                    flexFlow: 'row nowrap',
+                    justifyContent: 'flex-end',
+                    marginTop: '10px'
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                    style: {
+                        border: 'solid 1px black',
+                        padding: '10px',
+                        width: '80px'
+                    },
+                    onClick: ()=>setDisabled(!disabled),
+                    children: disabled ? 'Enable' : 'Disable'
+                })
+            })
+        ]
+    });
+};
+const CalendarTemplate = Template.bind({});
+CalendarTemplate.args = {
+    minDate: '01/10/1990',
+    maxDate: '04/20/2022'
+};
+
+//# sourceMappingURL=InputCalendar.stories.js.map