intelicoreact 1.6.22 → 1.6.24

package/dist/Atomic/FormElements/MobileCalendar/MobileCalendar.js

@@ -1 +1,506 @@
-function n(n,e){(null==e||e>n.length)&&(e=n.length);for(var t=0,r=Array(e);t<e;t++)r[t]=n[t];return r}function e(e,t){return function(n){if(Array.isArray(n))return n}(e)||function(n,e){var t,r,a=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null!=a){var o=[],l=!0,i=!1;try{for(a=a.call(n);!(l=(t=a.next()).done)&&(o.push(t.value),!e||o.length!==e);l=!0);}catch(n){i=!0,r=n}finally{try{l||null==a.return||a.return()}finally{if(i)throw r}}return o}}(e,t)||function(e,t){if(e){if("string"==typeof e)return n(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);if("Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return n(e,t)}}(e,t)||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 t,jsxs as r}from"react/jsx-runtime";import{useEffect as a,useRef as o,useState as l}from"react";import i from"moment";import{ChevronDown as c,ChevronUp as u}from"react-feather";import"./MobileCalendar.scss";require("../../../Functions/customEventListener");export default function(n){var s,d,m,v=n.min,p=void 0===v?i().subtract("10","years"):v,f=n.max,y=void 0===f?i().add("10","years"):f,h=n.value,b=void 0===h?i():h,_=n.rows,w=void 0===_?5:_,L=n.label,M=n.timeout,I=void 0===M?75:M,N=n.isMobile,g=void 0===N||N,E=n.showSelectedDate,k=n.listItemHeight,S=void 0===k?32:k,x=n.classes,Y=void 0===x?{wrapper:"",label:"",body:"",yearsBlock:"",yearsList:"",yearsListItem:"",monthsBlock:"",monthsList:"",monthsListItem:"",daysBlock:"",daysList:"",daysListItem:"",prevItem:"",nextItem:"",activeItem:""}:x,C=n.onChange,D=void 0===C?function(){}:C,T=n.onMinDateReached,A=void 0===T?function(){}:T,B=n.onMaxDateReached,U=void 0===B?function(){}:B;document.querySelector("body"),document.querySelector(".mobile-calendar_wrapper_body_months-list--item");var j=e(l(b?i(b):i()),2),q=j[0],z=j[1],O=e(l(i(p)),2),R=O[0];O[1];var F=e(l(i(y)),2),H=F[0];F[1];var X=e(l(!1),2),$=(X[0],X[1]),G=e(l(null),2),J=(G[0],G[1]),K=e(l(null),2);K[0],K[1];var P=e(l(null),2),Q=P[0],V=P[1],W=e(l(null),2),Z=W[0],nn=W[1],ne=e(l(null),2),nt=(ne[0],ne[1]),nr=e(l(0),2),na=nr[0],no=nr[1],nl=o(null),ni=o(null),nc=o(null),nu=o(null),ns=o(null),nd=function(n,e){no(e),z(function(t){var r=i(t).add(e,n);return i(r).isBefore(R)?R:i(r).isAfter(H)?H:r}),setTimeout(function(){no(0)},50)},nm=function(n,e){if(!(null==nu?void 0:nu.current))return!1;var t=i(null==nu?void 0:nu.current).add(e,n);return!(i(t).isBefore(R)||i(t).isAfter(H))},nv=function(n,e){$(!0),J({type:n,value:e})},np=function(){$(!1),J(null)},nf=function(n,e){n.preventDefault();var t=n.deltaY,r=window.scrollX,a=window.scrollY;window.scrollTo({top:r,left:a}),nd(e,t<0?-1:1)},ny=function(n,e){n.preventDefault(),(null==ns?void 0:ns.current)&&(clearInterval(null==ns?void 0:ns.current),ns.current=null);var t=n.timeStamp,r=n.changedTouches[0].pageY;V(r),nt(t),nn(e),window.addEventListener("touchend",function(n){return nh(n,r,t,e)},{once:!0})},nh=function(n,e,t,r){var a=n.timeStamp,o=n.changedTouches[0].pageY;Math.abs(e-o)/(a-t)>.65?nb({startY:e,pageY:o,timeStamp:a,startTime:t,touchType:r}):nn(null),V(null)},nb=function(n){var e=n.startY,t=n.pageY,r=n.timeStamp,a=n.startTime,o=n.touchType,l=r-a,i=Math.ceil(Math.abs(e-t)/l),c=Math.ceil(i/2*l/S*i),u=1;ns.current=setInterval(function(){nm(o,e-t<0?-1:1,q)&&u<=c?nd(o,e-t<0?-1:1):(nn(null),clearInterval(null==ns?void 0:ns.current),ns.current=null),++u},I)},n_=function(n,e){for(var t=[],r=(w-1)/2;r>=-((w-1)/2*1);--r)t.push(i(q).subtract(r,n).format(e));return t};a(function(){i(q.format("L")).isBefore(R.format("L"))&&z(R),i(q.format("L")).isAfter(H.format("L"))&&z(H)},[]),a(function(){return document.addEventListener("mouseup",np),function(){document.removeEventListener("mouseup",np)}},[]),a(function(){D(q),nu.current=q,i(q.format("L")).isSame(R.format("L"))&&A(R),i(q.format("L")).isSame(H.format("L"))&&U(H)},[q]),a(function(){if(null==nl?void 0:nl.current){var n,e;null==nl||null==(n=nl.current)||n.addEventListener("mousewheel",function(n){return nf(n,"months")},{passive:!1}),null==nl||null==(e=nl.current)||e.addEventListener("touchstart",function(n){return ny(n,"months")},{passive:!1})}return function(){var n,e;null==nl||null==(n=nl.current)||n.clearEventListeners("mousewheel"),null==nl||null==(e=nl.current)||e.clearEventListeners("touchstart")}},[nl]),a(function(){if(null==ni?void 0:ni.current){var n,e;null==ni||null==(n=ni.current)||n.addEventListener("mousewheel",function(n){return nf(n,"days")},{passive:!1}),null==ni||null==(e=ni.current)||e.addEventListener("touchstart",function(n){return ny(n,"days")},{passive:!1})}return function(){var n,e;null==ni||null==(n=ni.current)||n.clearEventListeners("mousewheel"),null==ni||null==(e=ni.current)||e.clearEventListeners("touchstart")}},[ni]),a(function(){if(null==nc?void 0:nc.current){var n,e;null==nc||null==(n=nc.current)||n.addEventListener("mousewheel",function(n){return nf(n,"years")},{passive:!1}),null==nc||null==(e=nc.current)||e.addEventListener("touchstart",function(n){return ny(n,"years")},{passive:!1})}return function(){var n,e;null==nc||null==(n=nc.current)||n.clearEventListeners("mousewheel"),null==nc||null==(e=nc.current)||e.clearEventListeners("touchstart")}},[nc]);return r("div",{className:"mobile-calendar_wrapper ".concat(null==Y?void 0:Y.wrapper),onTouchMove:function(n){if(Q&&Z){var e=n.timeStamp,t=n.changedTouches[0].pageY,r=Q-t;if(!(Math.abs(r)<S)){var a=r<0?-1:1;no(a),nd(Z,a),V(t),nt(e)}}},children:[t("div",{className:"mobile-calendar_wrapper_label ".concat(null==Y?void 0:Y.label),children:void 0===L?"":L}),void 0!==E&&E&&t("div",{className:"mobile-calendar_wrapper_label  ".concat(null==Y?void 0:Y.label),children:i(q).format("LL")}),r("div",{className:"mobile-calendar_wrapper_body  ".concat(null==Y?void 0:Y.body),children:[r("div",{className:"mobile-calendar_wrapper_body_months ".concat(null==Y?void 0:Y.monthsBlock),children:[t("div",{className:"mobile-calendar_wrapper_body_months--prev ".concat(null==Y?void 0:Y.prevItem),children:t(u,{onClick:function(){return nd("months",-1)},onMouseDown:function(){return nv("months",-1)},onMouseUp:np})}),r("div",{className:"mobile-calendar_wrapper_body_months-list ".concat(null==Y?void 0:Y.monthsList),ref:nl,children:[(s=(w-1)/2,n_("months","MMMM").map(function(n,e){return t("div",{className:"mobile-calendar_wrapper_body_months-list--item ".concat(e===s?"active":""," ").concat(0===e||e===w-1?"transparent":""," ").concat(null==Y?void 0:Y.monthsListItem," ").concat(e===s?null==Y?void 0:Y.activeItem:""),onClick:Q?null:function(){return e-s==0?{}:nd("months",e-s)},"attr-scroll-direction":"months"===Z?na:0,"attr-is-scrolling":+("months"===Z),children:n},"month-".concat(n))})),g&&t("div",{className:"mobile-calendar_wrapper_body_months-list_touch-zone"})]}),t("div",{className:"mobile-calendar_wrapper_body_months--next ".concat(null==Y?void 0:Y.nextItem),children:t(c,{onClick:function(){return nd("months",1)},onMouseDown:function(){return nv("months",1)},onMouseUp:np})})]}),r("div",{className:"mobile-calendar_wrapper_body_days ".concat(null==Y?void 0:Y.daysBlock),children:[t("div",{className:"mobile-calendar_wrapper_body_days--prev ".concat(null==Y?void 0:Y.prevItem),children:t(u,{onClick:function(){return nd("days",-1)},onMouseDown:function(){return nv("days",-1)},onMouseUp:np})}),r("div",{className:"mobile-calendar_wrapper_body_days-list ".concat(null==Y?void 0:Y.daysList),ref:ni,children:[(d=(w-1)/2,n_("days","D").map(function(n,e){return t("div",{className:"mobile-calendar_wrapper_body_days-list--item ".concat(e===d?"active":""," ").concat(0===e||e===w-1?"transparent":""," ").concat(null==Y?void 0:Y.daysListItem," ").concat(e===d?null==Y?void 0:Y.activeItem:""),onClick:function(){return e-d==0?{}:nd("days",e-d)},"attr-scroll-direction":"days"===Z?na:0,"attr-is-scrolling":+("days"===Z),children:n},"day-".concat(n))})),g&&t("div",{className:"mobile-calendar_wrapper_body_days-list_touch-zone"})]}),t("div",{className:"mobile-calendar_wrapper_body_days--next ".concat(null==Y?void 0:Y.nextItem),children:t(c,{onClick:function(){return nd("days",1)},onMouseDown:function(){return nv("days",1)},onMouseUp:np})})]}),r("div",{className:"mobile-calendar_wrapper_body_years ".concat(null==Y?void 0:Y.yearsBlock),children:[t("div",{className:"mobile-calendar_wrapper_body_years--prev ".concat(null==Y?void 0:Y.prevItem),children:t(u,{onClick:function(){return nd("years",-1)},onMouseDown:function(){return nv("years",-1)},onMouseUp:np})}),r("div",{className:"mobile-calendar_wrapper_body_years-list ".concat(null==Y?void 0:Y.yearsList),ref:nc,children:[(m=(w-1)/2,n_("years","YYYY").map(function(n,e){return t("div",{className:"mobile-calendar_wrapper_body_years-list--item ".concat(e===m?"active":""," ").concat(0===e||e===w-1?"transparent":""," ").concat(null==Y?void 0:Y.yearsListItem," ").concat(e===m?null==Y?void 0:Y.activeItem:""),onClick:function(){return e-m==0?{}:nd("years",e-m)},"attr-scroll-direction":"years"===Z?na:0,"attr-is-scrolling":+("years"===Z),children:n},"year-".concat(n))})),g&&t("div",{className:"mobile-calendar_wrapper_body_years-list_touch-zone"})]}),t("div",{className:"mobile-calendar_wrapper_body_years--next ".concat(null==Y?void 0:Y.nextItem),children:t(c,{onClick:function(){return nd("years",1)},onMouseDown:function(){return nv("years",1)},onMouseUp:np})})]})]})]})}
+import React, { useEffect, useRef, useState } from "react";
+
+import moment from "moment";
+import { ChevronDown, ChevronUp } from "react-feather";
+
+import "./MobileCalendar.scss";
+
+require("../../../Functions/customEventListener");
+
+const MobileCalendar = ({
+  min = moment().subtract("10", "years"),
+  max = moment().add("10", "years"),
+  value = moment(),
+  rows = 5,
+  label = "",
+  timeout = 75,
+  isMobile = true,
+  showSelectedDate = false,
+  listItemHeight = 32,
+
+  classes = {
+    wrapper: "",
+    label: "",
+    body: "",
+
+    yearsBlock: "",
+    yearsList: "",
+    yearsListItem: "",
+
+    monthsBlock: "",
+    monthsList: "",
+    monthsListItem: "",
+
+    daysBlock: "",
+    daysList: "",
+    daysListItem: "",
+
+    prevItem: "",
+    nextItem: "",
+    activeItem: "",
+  },
+  onChange = () => {},
+  onMinDateReached = () => {},
+  onMaxDateReached = () => {},
+}) => {
+  const Body = document.querySelector("body");
+  const listItem = document.querySelector(
+    ".mobile-calendar_wrapper_body_months-list--item",
+  );
+
+  const [date, setDate] = useState(value ? moment(value) : moment());
+  const [minDate, setMinDate] = useState(moment(min));
+  const [maxDate, setMaxDate] = useState(moment(max));
+
+  const [isMouseDown, setIsMouseDown] = useState(false);
+  const [mouseDownOn, setMouseDownOn] = useState(null);
+  const [changeInterval, setChangeInterval] = useState(null);
+
+  const [touchY, setTouchY] = useState(null);
+  const [touchType, setTouchType] = useState(null);
+  const [touchTimestamp, setTouchTimestamp] = useState(null);
+
+  const [scrollDirection, setScrollDirection] = useState(0);
+
+  const monthsListRef = useRef(null);
+  const daysListRef = useRef(null);
+  const yearsListRef = useRef(null);
+
+  const dateRef = useRef(null);
+  const intervalRef = useRef(null);
+
+  //--HANDLERS--//
+  const changeItem = (type, value) => {
+    setScrollDirection(value);
+    setDate((date) => {
+      const newDate = moment(date).add(value, type);
+
+      if (moment(newDate).isBefore(minDate)) return minDate;
+      if (moment(newDate).isAfter(maxDate)) return maxDate;
+
+      return newDate;
+    });
+    setTimeout(() => {
+      setScrollDirection(0);
+    }, 50);
+  };
+
+  const checkAvailability = (type, value) => {
+    if (!dateRef?.current) return false;
+
+    const newDate = moment(dateRef?.current).add(value, type);
+
+    if (moment(newDate).isBefore(minDate)) return false;
+    if (moment(newDate).isAfter(maxDate)) return false;
+
+    return true;
+  };
+  const onArrowMouseDown = (type, value) => {
+    setIsMouseDown(true);
+    setMouseDownOn({ type, value });
+  };
+  const onArrowMouseUp = () => {
+    setIsMouseDown(false);
+    setMouseDownOn(null);
+  };
+  const onWheel = (e, type) => {
+    e.preventDefault();
+
+    const { deltaY } = e;
+    const top = window.scrollX;
+    const left = window.scrollY;
+
+    window.scrollTo({ top, left });
+
+    changeItem(type, deltaY < 0 ? -1 : 1);
+  };
+  const onTouchStart = (e, type) => {
+    e.preventDefault();
+
+    if (intervalRef?.current) {
+      clearInterval(intervalRef?.current);
+      intervalRef.current = null;
+    }
+
+    const { timeStamp, changedTouches } = e;
+    const { pageY } = changedTouches[0];
+
+    setTouchY(pageY);
+    setTouchTimestamp(timeStamp);
+    setTouchType(type);
+
+    window.addEventListener(
+      "touchend",
+      (e) => onTouchEnd(e, pageY, timeStamp, type),
+      { once: true },
+    );
+  };
+  const onTouchMove = (e) => {
+    if (!touchY || !touchType) return;
+
+    const { timeStamp, changedTouches } = e;
+    const { pageY } = changedTouches[0];
+
+    const deltaY = touchY - pageY;
+
+    if (Math.abs(deltaY) < listItemHeight) return;
+
+    const direction = deltaY < 0 ? -1 : 1;
+
+    setScrollDirection(direction);
+
+    changeItem(touchType, direction);
+    setTouchY(pageY);
+    setTouchTimestamp(timeStamp);
+  };
+  const onTouchEnd = (e, startY, startTime, touchType) => {
+    const { timeStamp, changedTouches } = e;
+    const { pageY } = changedTouches[0];
+
+    const path = Math.abs(startY - pageY); //in px
+    const time = timeStamp - startTime; //ms
+    const pxPerMs = path / time;
+
+    if (pxPerMs > 0.65)
+      innertionScroll({ startY, pageY, timeStamp, startTime, touchType });
+    else setTouchType(null);
+
+    setTouchY(null);
+  };
+  const innertionScroll = ({
+    startY,
+    pageY,
+    timeStamp,
+    startTime,
+    touchType,
+  }) => {
+    const path = Math.abs(startY - pageY); //in px
+    const time = timeStamp - startTime; //ms
+    const pxPerMs = Math.ceil(path / time); //speed
+
+    const S = (pxPerMs / 2) * time;
+    const blocks = Math.ceil((S / listItemHeight) * pxPerMs);
+
+    let i = 1;
+
+    intervalRef.current = setInterval(() => {
+      if (
+        checkAvailability(touchType, startY - pageY < 0 ? -1 : 1, date) &&
+        i <= blocks
+      ) {
+        changeItem(touchType, startY - pageY < 0 ? -1 : 1);
+      } else {
+        setTouchType(null);
+        clearInterval(intervalRef?.current);
+        intervalRef.current = null;
+      }
+
+      ++i;
+    }, timeout);
+
+    // for(let i = 1; i <= blocks; ++i){
+    //   // timeout = i*pxPerMs+Math.pow(i,2)*10;
+    //   timeout += 80;
+    //   if(checkAvailability(touchType, startY-pageY < 0 ? -1 : 1, date)){
+    //     setTimeout(() => {
+    //       console.log({timeout})
+    //       changeItem(touchType, startY-pageY < 0 ? -1 : 1);
+    //     }, timeout)
+    //   }
+
+    // }
+  };
+
+  //--FUNCTIONS--//
+  const intervalWorker = () => {
+    if (!mouseDownOn) return;
+
+    const { type, value } = mouseDownOn;
+    changeItem(type, value);
+  };
+  const getList = (type, format) => {
+    const list = [];
+
+    const renderRows = rows;
+
+    for (let i = (renderRows - 1) / 2; i >= ((renderRows - 1) / 2) * -1; --i) {
+      list.push(moment(date).subtract(i, type).format(format));
+    }
+
+    return list;
+  };
+  const getMonthList = () => getList("months", "MMMM");
+  const getDaysList = () => getList("days", "D");
+  const getYearsList = () => getList("years", "YYYY");
+
+  //--OBSERVERS--//
+  useEffect(() => {
+    if (moment(date.format("L")).isBefore(minDate.format("L")))
+      setDate(minDate);
+    if (moment(date.format("L")).isAfter(maxDate.format("L"))) setDate(maxDate);
+  }, []);
+
+  //Events Observer
+  useEffect(() => {
+    document.addEventListener("mouseup", onArrowMouseUp);
+    return () => {
+      document.removeEventListener("mouseup", onArrowMouseUp);
+    };
+  }, []);
+
+  useEffect(() => {
+    onChange(date);
+    dateRef.current = date;
+
+    if (moment(date.format("L")).isSame(minDate.format("L")))
+      onMinDateReached(minDate);
+    if (moment(date.format("L")).isSame(maxDate.format("L")))
+      onMaxDateReached(maxDate);
+  }, [date]);
+
+  //monthList Events
+  useEffect(() => {
+    if (monthsListRef?.current) {
+      monthsListRef?.current?.addEventListener(
+        "mousewheel",
+        (e) => onWheel(e, "months"),
+        { passive: false },
+      );
+      monthsListRef?.current?.addEventListener(
+        "touchstart",
+        (e) => onTouchStart(e, "months"),
+        { passive: false },
+      );
+    }
+
+    return () => {
+      monthsListRef?.current?.clearEventListeners("mousewheel");
+      monthsListRef?.current?.clearEventListeners("touchstart");
+    };
+  }, [monthsListRef]);
+
+  //daysList Events
+  useEffect(() => {
+    if (daysListRef?.current) {
+      daysListRef?.current?.addEventListener(
+        "mousewheel",
+        (e) => onWheel(e, "days"),
+        { passive: false },
+      );
+      daysListRef?.current?.addEventListener(
+        "touchstart",
+        (e) => onTouchStart(e, "days"),
+        { passive: false },
+      );
+    }
+
+    return () => {
+      daysListRef?.current?.clearEventListeners("mousewheel");
+      daysListRef?.current?.clearEventListeners("touchstart");
+    };
+  }, [daysListRef]);
+
+  //yearsList Events
+  useEffect(() => {
+    if (yearsListRef?.current) {
+      yearsListRef?.current?.addEventListener(
+        "mousewheel",
+        (e) => onWheel(e, "years"),
+        { passive: false },
+      );
+      yearsListRef?.current?.addEventListener(
+        "touchstart",
+        (e) => onTouchStart(e, "years"),
+        { passive: false },
+      );
+    }
+
+    return () => {
+      yearsListRef?.current?.clearEventListeners("mousewheel");
+      yearsListRef?.current?.clearEventListeners("touchstart");
+    };
+  }, [yearsListRef]);
+
+  //--RENDER--//
+  const renderMonthsList = () => {
+    const half = (rows - 1) / 2;
+    return getMonthList().map((month, i) => (
+      <div
+        className={`mobile-calendar_wrapper_body_months-list--item ${i === half ? "active" : ""} ${
+          i === 0 || i === rows - 1 ? "transparent" : ""
+        } ${classes?.monthsListItem} ${i === half ? classes?.activeItem : ""}`}
+        key={`month-${month}`}
+        onClick={
+          touchY
+            ? null
+            : () => (i - half === 0 ? {} : changeItem("months", i - half))
+        }
+        attr-scroll-direction={touchType === "months" ? scrollDirection : 0}
+        attr-is-scrolling={touchType === "months" ? 1 : 0}
+      >
+        {month}
+      </div>
+    ));
+  };
+  const renderDaysList = () => {
+    const half = (rows - 1) / 2;
+    return getDaysList().map((day, i) => (
+      <div
+        className={`mobile-calendar_wrapper_body_days-list--item ${i === half ? "active" : ""} ${
+          i === 0 || i === rows - 1 ? "transparent" : ""
+        } ${classes?.daysListItem} ${i === half ? classes?.activeItem : ""}`}
+        key={`day-${day}`}
+        onClick={() => (i - half === 0 ? {} : changeItem("days", i - half))}
+        attr-scroll-direction={touchType === "days" ? scrollDirection : 0}
+        attr-is-scrolling={touchType === "days" ? 1 : 0}
+      >
+        {day}
+      </div>
+    ));
+  };
+  const renderYearsList = () => {
+    const half = (rows - 1) / 2;
+    return getYearsList().map((year, i) => (
+      <div
+        className={`mobile-calendar_wrapper_body_years-list--item ${i === half ? "active" : ""} ${
+          i === 0 || i === rows - 1 ? "transparent" : ""
+        } ${classes?.yearsListItem} ${i === half ? classes?.activeItem : ""}`}
+        key={`year-${year}`}
+        onClick={() => (i - half === 0 ? {} : changeItem("years", i - half))}
+        attr-scroll-direction={touchType === "years" ? scrollDirection : 0}
+        attr-is-scrolling={touchType === "years" ? 1 : 0}
+      >
+        {year}
+      </div>
+    ));
+  };
+
+  const renderMonthsBlock = () => {
+    return (
+      <div
+        className={`mobile-calendar_wrapper_body_months ${classes?.monthsBlock}`}
+      >
+        <div
+          className={`mobile-calendar_wrapper_body_months--prev ${classes?.prevItem}`}
+        >
+          <ChevronUp
+            onClick={() => changeItem("months", -1)}
+            onMouseDown={() => onArrowMouseDown("months", -1)}
+            onMouseUp={onArrowMouseUp}
+          />
+        </div>
+        <div
+          className={`mobile-calendar_wrapper_body_months-list ${classes?.monthsList}`}
+          ref={monthsListRef}
+        >
+          {renderMonthsList()}
+          {isMobile && (
+            <div className="mobile-calendar_wrapper_body_months-list_touch-zone"></div>
+          )}
+        </div>
+        <div
+          className={`mobile-calendar_wrapper_body_months--next ${classes?.nextItem}`}
+        >
+          <ChevronDown
+            onClick={() => changeItem("months", 1)}
+            onMouseDown={() => onArrowMouseDown("months", 1)}
+            onMouseUp={onArrowMouseUp}
+          />
+        </div>
+      </div>
+    );
+  };
+  const renderDaysBlock = () => {
+    return (
+      <div
+        className={`mobile-calendar_wrapper_body_days ${classes?.daysBlock}`}
+      >
+        <div
+          className={`mobile-calendar_wrapper_body_days--prev ${classes?.prevItem}`}
+        >
+          <ChevronUp
+            onClick={() => changeItem("days", -1)}
+            onMouseDown={() => onArrowMouseDown("days", -1)}
+            onMouseUp={onArrowMouseUp}
+          />
+        </div>
+        <div
+          className={`mobile-calendar_wrapper_body_days-list ${classes?.daysList}`}
+          ref={daysListRef}
+        >
+          {renderDaysList()}
+          {isMobile && (
+            <div className="mobile-calendar_wrapper_body_days-list_touch-zone"></div>
+          )}
+        </div>
+        <div
+          className={`mobile-calendar_wrapper_body_days--next ${classes?.nextItem}`}
+        >
+          <ChevronDown
+            onClick={() => changeItem("days", 1)}
+            onMouseDown={() => onArrowMouseDown("days", 1)}
+            onMouseUp={onArrowMouseUp}
+          />
+        </div>
+      </div>
+    );
+  };
+  const renderYearsBlock = () => {
+    return (
+      <div
+        className={`mobile-calendar_wrapper_body_years ${classes?.yearsBlock}`}
+      >
+        <div
+          className={`mobile-calendar_wrapper_body_years--prev ${classes?.prevItem}`}
+        >
+          <ChevronUp
+            onClick={() => changeItem("years", -1)}
+            onMouseDown={() => onArrowMouseDown("years", -1)}
+            onMouseUp={onArrowMouseUp}
+          />
+        </div>
+        <div
+          className={`mobile-calendar_wrapper_body_years-list ${classes?.yearsList}`}
+          ref={yearsListRef}
+        >
+          {renderYearsList()}
+          {isMobile && (
+            <div className="mobile-calendar_wrapper_body_years-list_touch-zone"></div>
+          )}
+        </div>
+        <div
+          className={`mobile-calendar_wrapper_body_years--next ${classes?.nextItem}`}
+        >
+          <ChevronDown
+            onClick={() => changeItem("years", 1)}
+            onMouseDown={() => onArrowMouseDown("years", 1)}
+            onMouseUp={onArrowMouseUp}
+          />
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div
+      className={`mobile-calendar_wrapper ${classes?.wrapper}`}
+      onTouchMove={onTouchMove}
+    >
+      <div className={`mobile-calendar_wrapper_label ${classes?.label}`}>
+        {label}
+      </div>
+      {showSelectedDate && (
+        <div className={`mobile-calendar_wrapper_label  ${classes?.label}`}>
+          {moment(date).format("LL")}
+        </div>
+      )}
+      <div className={`mobile-calendar_wrapper_body  ${classes?.body}`}>
+        {renderMonthsBlock()}
+        {renderDaysBlock()}
+        {renderYearsBlock()}
+      </div>
+    </div>
+  );
+};
+
+export default MobileCalendar;

package/dist/Atomic/FormElements/MultiSelect/MultiSelect.js

@@ -1 +1,45 @@
-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}function r(r,e){if(r){if("string"==typeof r)return t(r,e);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)}}import{jsx as e,jsxs as n}from"react/jsx-runtime";import{useState as o}from"react";import a from"../CheckboxInput/CheckboxInput";import i from"../Input/Input";import"./MultiSelect.scss";export default function(l){var u,c=l.options,s=l.chosenOptions,f=l.onChange,m=(u=o(""),function(t){if(Array.isArray(t))return t}(u)||function(t,r){var e,n,o=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=o){var a=[],i=!0,l=!1;try{for(o=o.call(t);!(i=(e=o.next()).done)&&(a.push(e.value),a.length!==r);i=!0);}catch(t){l=!0,n=t}finally{try{i||null==o.return||o.return()}finally{if(l)throw n}}return a}}(u,2)||r(u,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.")}()),p=m[0],y=m[1],d=function(e,n){if(e)f(((function(r){if(Array.isArray(r))return t(r)})(s)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(s)||r(s)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()).concat([n]));else f(s.filter(function(t){return t!==n}))},h=c.filter(function(t){return t.label.toLowerCase().includes(p.toLowerCase())});return n("div",{className:"multiselect",children:[e(i,{value:p,onChange:function(t){return y(t)},placeholder:"Search"}),e("div",{className:"multiselect__list",children:h.map(function(t){var r=t.label,n=t.value,o=t.id;return e(a,{value:s.includes(n),label:r,onChange:function(t){return d(t,n)},className:"multiselect__item"},o)})})]})}
+import React, { useState } from "react";
+
+import CheckboxInput from "../CheckboxInput/CheckboxInput";
+import Input from "../Input/Input";
+
+import "./MultiSelect.scss";
+
+const MultiSelect = ({ options, chosenOptions, onChange }) => {
+  const [searchValue, setSearchValue] = useState("");
+
+  const checkHandler = (state, value) => {
+    if (state) {
+      onChange([...chosenOptions, value]);
+    } else {
+      onChange(chosenOptions.filter((item) => item !== value));
+    }
+  };
+
+  const filteredOptions = options.filter(({ label }) =>
+    label.toLowerCase().includes(searchValue.toLowerCase()),
+  );
+
+  return (
+    <div className="multiselect">
+      <Input
+        value={searchValue}
+        onChange={(value) => setSearchValue(value)}
+        placeholder="Search"
+      />
+      <div className="multiselect__list">
+        {filteredOptions.map(({ label, value, id }) => (
+          <CheckboxInput
+            key={id}
+            value={chosenOptions.includes(value)}
+            label={label}
+            onChange={(state) => checkHandler(state, value)}
+            className="multiselect__item"
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MultiSelect;