intelicoreact 1.3.21 → 1.3.23

package/dist/Atomic/FormElements/InputDateRange/InputDateRange.scss

@@ -2,8 +2,8 @@
   --input-height: 28px;
   --label-line-height: 16px;
   // --border-color: rgba(0, 0, 0, 0.3);
-  --border-color: #E2E5EC;
-  --calendar-range-point-color: #6B81DD;
+  --border-color: #e2e5ec;
+  --calendar-range-point-color: #6b81dd;
   --font-family: roboto, sans-serif;
   --font-size: 13px;
   --line-height: 20px;
@@ -47,9 +47,9 @@
     z-index: 1;
 
     display: flex;
-    align-items: flex-start;
     flex-flow: column nowrap;
     justify-content: flex-start;
+    align-items: flex-start;
 
     width: 100%;
     height: fit-content;
@@ -64,9 +64,9 @@
 
   &__static-part {
     display: flex;
-    align-items: flex-start;
     flex-flow: row nowrap;
     justify-content: flex-end;
+    align-items: flex-start;
 
     box-sizing: border-box;
     width: 100%;
@@ -74,8 +74,7 @@
 
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius);
-
-    background: #FFF;
+    background: #fff;
   }
 
   &_focused {
@@ -88,10 +87,10 @@
 
   &__toggle-button {
     display: flex;
-    align-items: center;
-    flex-flow: row nowrap;
     flex-direction: row;
+    flex-flow: row nowrap;
     justify-content: flex-start;
+    align-items: center;
 
     width: 100%;
     height: 100%;
@@ -112,12 +111,10 @@
   }
 
   &__range {
-    display: inline-block;
-
     display: flex;
-    align-items: center;
     flex-flow: row wrap;
     justify-content: flex-start;
+    align-items: center;
 
     word-wrap: break-word;
     pointer-events: none;
@@ -137,9 +134,9 @@
 
   &__arrows-block {
     display: flex;
-    align-items: center;
     flex-flow: row nowrap;
     justify-content: flex-start;
+    align-items: center;
 
     box-sizing: border-box;
     width: fit-content;
@@ -167,7 +164,7 @@
 
   &_error {
     .date-range-input__wraper {
-      border-color: #FA564C;
+      border-color: #fa564c;
     }
   }
 
@@ -188,10 +185,10 @@
     bottom: -20px;
     left: 8px;
 
-    color: #FA564C;
-
     font-size: var(--font-size);
     line-height: var(--line-height);
+
+    color: #fa564c;
   }
 
   &__opened-part {
@@ -209,13 +206,13 @@
 
   &__wrapper {
     display: flex;
-    align-items: stretch;
     flex-flow: row nowrap;
     justify-content: flex-start;
+    align-items: stretch;
 
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius);
-    background: #FFF;
+    background: #fff;
     box-shadow: 0 4px 25px rgb(0 0 0 / 25%);
 
     &_right-position-once-element {
@@ -234,33 +231,30 @@
     position: relative;
 
     display: flex;
-    align-items: center;
     flex-flow: row nowrap;
     justify-content: flex-start;
+    align-items: center;
 
     box-sizing: border-box;
-
     width: 100%;
     padding: 0 20px 0 30px;
 
-    cursor: pointer;
-    white-space: nowrap;
-
-    text-transform: capitalize;
-
     font-family: var(--font-family);
     font-size: 12px;
     font-weight: 300;
     font-style: normal;
     line-height: 24px;
+    cursor: pointer;
+    white-space: nowrap;
+    text-transform: capitalize;
 
     &:hover {
       // background-color: rgba(128, 128, 128, 0.1);
-      background-color: #F2F2F8;
+      background-color: #f2f2f8;
     }
 
     &_active {
-      background: #F2F2F8;
+      background: #f2f2f8;
     }
 
     &-icon-active {
@@ -295,15 +289,15 @@
 
 .date-picker {
   display: flex;
-  align-items: flex-start;
   flex-flow: column nowrap;
   justify-content: space-between;
+  align-items: flex-start;
 
   &__header {
     display: flex;
-    align-items: flex-start;
     flex-flow: column nowrap;
     justify-content: flex-start;
+    align-items: flex-start;
 
     box-sizing: border-box;
     width: 100%;
@@ -311,24 +305,25 @@
     padding: 7.5px 15px;
 
     border: none;
-    background-color: #F7FAFC;
+    background-color: #f7fafc;
   }
 
   &__date-row {
-    margin-right: 0!important;
     gap: 8px;
 
+    margin-right: 0 !important;
+
     .input__wrap {
-      width: 100%!important;
-      margin: 0!important;
+      width: 100% !important;
+      margin: 0 !important;
     }
   }
 
   &__inputs-block {
     display: flex;
-    align-items: center;
     flex-flow: row nowrap;
     justify-content: flex-start;
+    align-items: center;
     gap: 8px;
 
     width: 100%;
@@ -337,7 +332,8 @@
     font-size: var(--font-size);
     line-height: var(--line-height);
 
-    .date-picker__date-row > div:not(.date-picker__inputs-separator):not(.date-picker__date-input) {
+    .date-picker__date-row
+      > div:not(.date-picker__inputs-separator):not(.date-picker__date-input) {
       box-sizing: border-box;
       min-width: 100px;
       min-height: 100%;
@@ -369,7 +365,7 @@
     }
 
     .date-picker__inputs-separator {
-      margin: 0!important;
+      margin: 0 !important;
     }
 
     input {
@@ -379,15 +375,16 @@
 
   &__date-row {
     display: flex;
-    width: 100%;
     align-items: stretch;
+
+    width: 100%;
   }
 
-  &__hour-select-input{
+  &__hour-select-input {
     box-sizing: border-box;
 
     button {
-      min-height: 38px!important;
+      min-height: 38px !important;
     }
   }
 
@@ -395,10 +392,6 @@
     box-sizing: border-box;
     padding: 3px 10px;
 
-    color: inherit;
-    background-color: #FFF;
-    border-radius: var(--border-radius);
-
     font-family: var(--font-family);
     font-size: var(--font-size);
     font-weight: 300;
@@ -406,6 +399,10 @@
     line-height: calc(var(--input-height) / 2);
     letter-spacing: inherit;
 
+    color: inherit;
+    border-radius: var(--border-radius);
+    background-color: #fff;
+
     &-interactive {
       // &.input-mask3_wrapper>div {
       //   width: 100%;
@@ -421,35 +418,39 @@
       flex-flow: row nowrap;
       justify-content: flex-start;
       align-items: center;
+
+      width: 100%;
+      height: 100%;
+      min-height: 40px;
       padding: 0px 15px !important;
-      letter-spacing: 0.2px;
+
       font-family: inherit;
       font-size: 16px;
       font-weight: 500;
       font-style: normal;
       line-height: 22px;
-      color: #3b414b;
-
-      width: 100%;
-      height: 100%;
-      min-height: 40px;
-      background-color: #FFF;
-
       cursor: pointer;
       white-space: nowrap;
+      letter-spacing: 0.2px;
+
+      color: #3b414b;
+      background-color: #fff;
 
       span {
         display: block;
+
         width: 100%;
         height: 100%;
-        line-height: 24px;
         padding-top: 2px;
+
+        line-height: 24px;
       }
 
       &_disabled {
-        opacity: 0.5;
-        pointer-events: none;
         cursor: auto;
+        pointer-events: none;
+
+        opacity: 0.5;
       }
     }
   }
@@ -468,17 +469,16 @@
       padding-right: 15px;
       padding-left: 10px;
 
-      letter-spacing: inherit;
-
-      color: inherit;
-      border: none;
-      box-shadow: none;
-
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;
       font-style: inherit;
       line-height: inherit;
+      letter-spacing: inherit;
+
+      color: inherit;
+      border: none;
+      box-shadow: none;
 
       & > .text {
         padding: 0;
@@ -486,15 +486,14 @@
     }
 
     & .dropdown__list-item {
-      letter-spacing: inherit;
-
-      color: inherit;
-
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;
       font-style: inherit;
       line-height: inherit;
+      letter-spacing: inherit;
+
+      color: inherit;
     }
   }
 
@@ -504,9 +503,9 @@
 
   &__calendars {
     display: flex;
-    align-items: flex-start;
     flex-flow: row nowrap;
     justify-content: center;
+    align-items: flex-start;
 
     box-sizing: border-box;
     width: 100%;
@@ -515,14 +514,14 @@
 
     border-top: 1px solid var(--border-color);
     border-bottom: 1px solid var(--border-color);
-    background-color: #FFF;
+    background-color: #fff;
 
     &-wrapper {
       // width: fit-content;
       display: flex;
-      align-items: flex-start;
       flex-flow: row nowrap;
       justify-content: space-between;
+      align-items: flex-start;
 
       width: 100%;
     }
@@ -540,15 +539,14 @@
 
       &-header {
         display: flex;
-        align-items: center;
         justify-content: space-between;
+        align-items: center;
 
         height: fit-content;
         margin-bottom: 12px;
 
         font-size: calc(var(--font-size) + 2px);
         font-weight: 500;
-
         font-style: normal;
         line-height: calc(var(--line-height) + 4px);
 
@@ -576,27 +574,26 @@
         position: relative;
 
         display: flex;
-        align-items: center;
-        flex-basis: 0;
         flex-grow: 1;
+        flex-basis: 0;
         justify-content: center;
+        align-items: center;
 
         box-sizing: border-box;
         width: 29px;
         height: 22px;
         margin: 1px 0;
 
-        user-select: none;
-        text-align: center;
-
         font-size: var(--font-size);
         line-height: var(--line-height);
+        user-select: none;
+        text-align: center;
 
         &--clickable {
           cursor: pointer;
 
           &:hover {
-            background: #E2E6F8;
+            background: #e2e6f8;
           }
         }
 
@@ -640,28 +637,28 @@
         &--range-end {
           box-sizing: border-box;
 
-          color: #F8FBFF;
+          color: #f8fbff;
           border: 1px solid var(--calendar-range-point-color);
           border-radius: var(--border-radius);
           background: var(--calendar-range-point-color);
 
           &:hover {
-            color: #F8FBFF;
+            color: #f8fbff;
             background: var(--calendar-range-point-color);
           }
         }
 
         &--range-inside {
-          background: #EAF2FF;
+          background: #eaf2ff;
         }
 
         &--prev-range-end {
           border-radius: var(--border-radius);
-          background: #E2E5EC;
+          background: #e2e5ec;
         }
 
         &--prev-range-inside {
-          background: #F7F8FA;
+          background: #f7f8fa;
         }
 
         &--title {
@@ -678,9 +675,9 @@
 
   &__footer {
     display: flex;
-    align-items: center;
     flex-flow: row nowrap;
     justify-content: space-between;
+    align-items: center;
 
     box-sizing: border-box;
     width: 100%;
@@ -688,7 +685,7 @@
 
     border: none;
     border-radius: 0 0 var(--border-radius) 0;
-    background-color: #F7FAFC;
+    background-color: #f7fafc;
 
     &_once-element {
       justify-content: flex-end;
@@ -708,9 +705,9 @@
       width: 80px;
       margin-right: 16px;
 
-      border: 1px solid #A6ACB1;
+      border: 1px solid #a6acb1;
       border-radius: var(--border-radius);
-      background-color: #FFF;
+      background-color: #fff;
     }
 
     &:last-child {
@@ -744,29 +741,32 @@
     .modal__footer {
       button {
         height: 40px;
+
         box-shadow: none;
 
         &.button_dark-outline {
-          color: #171D33;
-          text-align: center;
           font-family: Sarabun;
           font-size: 14.4px;
-          font-style: normal;
           font-weight: 500;
+          font-style: normal;
           line-height: 150%;
+          text-align: center;
+
+          color: #171d33;
+          border: 1px solid #e1e8f1;
           border-radius: 32px;
-          border: 1px solid #E1E8F1;
-          background: var(--white, #FFF);
+          background: var(--white, #fff);
         }
 
         &.button_primary {
-          color: var(--white, #FFF);
-          text-align: center;
           font-family: Sarabun;
           font-size: 14.4px;
-          font-style: normal;
           font-weight: 600;
+          font-style: normal;
           line-height: 150%; /* 21.6px */
+          text-align: center;
+
+          color: var(--white, #fff);
         }
       }
     }
@@ -780,7 +780,7 @@
     }
 
     &__header {
-      padding: 0!important;
+      padding: 0 !important;
     }
 
     &__inputs-block {
@@ -793,11 +793,11 @@
       display: none;
     }
 
-    &__hour-select-input{
+    &__hour-select-input {
       box-sizing: border-box;
 
       button {
-        min-height: 38px!important;
+        min-height: 38px !important;
       }
     }
 
@@ -813,7 +813,7 @@
     }
 
     &__calendar {
-      margin: 0!important;
+      margin: 0 !important;
     }
   }
 }

package/dist/Atomic/FormElements/InputDateRange/components/DateInput.js

@@ -1,86 +1,61 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 var _mobileKeyboardTypesPresets = require("../../../../Functions/presets/mobileKeyboardTypesPresets");
-
 var _Input = _interopRequireDefault(require("../../Input/Input"));
-
-var handleDateInputOnChange = function handleDateInputOnChange(value) {
-  var replace = function replace(val) {
-    return val === null || val === void 0 ? void 0 : val.replace(/[^0-9\/]/g, '');
-  };
-
-  var input = replace(value);
-  var lastSymbol = input ? input.slice(-1) : '';
-  var previousValue = input ? input.slice(0, input.length - 1) : '';
-  if (value.length > 10 || lastSymbol === '/') return previousValue;
-  return previousValue.length === 2 || previousValue.length === 5 ? previousValue + '/' + lastSymbol : input;
+const handleDateInputOnChange = value => {
+  const replace = val => val === null || val === void 0 ? void 0 : val.replace(/[^0-9\/]/g, "");
+  const input = replace(value);
+  const lastSymbol = input ? input.slice(-1) : "";
+  const previousValue = input ? input.slice(0, input.length - 1) : "";
+  if (value.length > 10 || lastSymbol === "/") return previousValue;
+  return previousValue.length === 2 || previousValue.length === 5 ? previousValue + "/" + lastSymbol : input;
 };
-
-var DateInput = function DateInput(props, ref) {
-  var RC = props.RC,
-      className = props.className,
-      testId = props.testId,
-      isFocused = props.isFocused,
-      disabled = props.disabled,
-      value = props.value,
-      _props$valueParseForm = props.valueParseFormat,
-      valueParseFormat = _props$valueParseForm === void 0 ? 'MM/DD/YYYY' : _props$valueParseForm,
-      date = props.date,
-      prepareDate = props.prepareDate,
-      _onChange = props.onChange,
-      onFocus = props.onFocus,
-      onBlur = props.onBlur,
-      onKeyUp = props.onKeyUp;
-
-  var preparedDate = function () {
-    var _prepareDate, _output$toString;
-
-    var prepareDateDefault = function prepareDateDefault(date) {
-      return (0, _momentTimezone.default)(date).format('MM/DD/YYYY');
-    };
-
-    var output = (_prepareDate = prepareDate === null || prepareDate === void 0 ? void 0 : prepareDate(date)) !== null && _prepareDate !== void 0 ? _prepareDate : prepareDateDefault(date);
-    return ((output === null || output === void 0 ? void 0 : (_output$toString = output.toString) === null || _output$toString === void 0 ? void 0 : _output$toString.call(output).toLowerCase()) || '') !== 'invalid date' ? output : '';
-  }();
-
+const DateInput = (props, ref) => {
+  const {
+    RC,
+    className,
+    testId,
+    isFocused,
+    disabled,
+    value,
+    valueParseFormat = "MM/DD/YYYY",
+    date,
+    prepareDate,
+    onChange,
+    onFocus,
+    onBlur,
+    onKeyUp
+  } = props;
+  const preparedDate = ((_prepareDate, _output$toString) => {
+    const prepareDateDefault = date => (0, _momentTimezone.default)(date).format("MM/DD/YYYY");
+    const output = (_prepareDate = prepareDate === null || prepareDate === void 0 ? void 0 : prepareDate(date)) !== null && _prepareDate !== void 0 ? _prepareDate : prepareDateDefault(date);
+    return ((output === null || output === void 0 || (_output$toString = output.toString) === null || _output$toString === void 0 ? void 0 : _output$toString.call(output).toLowerCase()) || "") !== "invalid date" ? output : "";
+  })();
   return isFocused ? /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
     ref: ref,
     testId: testId,
     className: (0, _classnames.default)(className, "".concat(RC, "-interactive")),
     value: value,
     disabled: disabled,
-    onChange: function onChange(value) {
-      return _onChange(handleDateInputOnChange(value));
-    },
+    onChange: value => onChange(handleDateInputOnChange(value)),
     onBlur: onBlur,
     onKeyUp: onKeyUp
   }, _mobileKeyboardTypesPresets.NUMERIC_KEYBOARD)) : /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(className, "".concat(RC, "-emulation"), (0, _defineProperty2.default)({}, "".concat(RC, "-emulation_disabled"), disabled)),
-    onClick: disabled ? null : function () {
-      return onFocus();
-    }
+    className: (0, _classnames.default)(className, "".concat(RC, "-emulation"), {
+      ["".concat(RC, "-emulation_disabled")]: disabled
+    }),
+    onClick: disabled ? null : () => onFocus()
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)('')
+    className: (0, _classnames.default)("")
   }, preparedDate));
 };
-
-var _default = /*#__PURE__*/_react.default.forwardRef(DateInput);
-
-exports.default = _default;
+var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(DateInput);