forstok-ui-lib 5.2.44 → 5.2.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.2.44",
+  "version": "5.2.46",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",
@@ -37,14 +37,14 @@
     "@svgr/rollup": "^8.1.0",
     "@types/html-to-text": "^9.0.4",
     "@types/react": "^19.0.2",
-    "@types/react-daterange-picker": "^2.0.8",
+    "@types/react-datepicker": "^6.2.0",
     "@types/react-dom": "^19.0.2",
     "html-to-text": "^9.0.5",
     "moment-range": "^4.0.2",
     "npm-force-resolutions": "^0.0.10",
     "react": "^19.0.0",
     "react-content-loader": "^7.0.2",
-    "react-daterange-picker": "^2.0.1",
+    "react-datepicker": "^8.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.1.1",
     "react-select": "^5.10.0",
@@ -58,11 +58,5 @@
     "typescript-plugin-styled-components": "^3.0.0",
     "use-state-with-callback": "^3.0.2"
   },
-  "overrides": {
-    "react-daterange-picker": {
-      "moment-range": "^4.0.2",
-      "react": "^19.0.0",
-      "react-dom": "^19.0.0"
-    }
-  }
+  "overrides": {}
 }

package/src/components/date/index.tsx

@@ -0,0 +1,69 @@
+import { forwardRef, useState, useEffect } from 'react';
+import DatePicker from 'react-datepicker';
+import moment from 'moment';
+import 'react-datepicker/dist/react-datepicker.css';
+import './styles.css';
+import { DateContainer, DateIndicatorContainer } from './styles';
+import type { TState } from '../../typeds/base.typed'
+
+type TDate = {
+  dateFormat?: string
+  name: string
+  evChange?: (name: string, value: Date | null) => void
+  isField?: boolean
+  evChangeCustom? : (key: string, value: any) => void
+  saveFormat?: string
+  showFormat?: string
+  isForceUpdate?: boolean
+  value?: Date
+  isError?: boolean
+  allowEmpty?: boolean
+  setForceUpdate?: TState<boolean>
+  showTimeInput?: boolean
+  'data-qa-id'?: string
+  'data-tip'?: string
+  'data-place'?: string
+  'data-type'?: string
+}
+
+const DateComponent = forwardRef(({ dateFormat='MMM dd, yyyy', name, evChange, isField, saveFormat, showFormat, evChangeCustom, value, isForceUpdate, setForceUpdate, isError=false, showTimeInput=false, allowEmpty=false, ...props }:TDate, ref) => {
+  const [ _date , setDate ] = useState<Date | null>(value ? value : (allowEmpty ? null : new Date()));
+
+  const handleChange = (value: Date | null) => {
+    setDate(value);
+    evChange && evChange(name, value);
+    (isField && evChangeCustom) && evChangeCustom(name, value ? moment(value).format(saveFormat) : value);;
+  }
+
+  useEffect(() => {
+    if (isForceUpdate) {
+      const newValue = value ? value : (allowEmpty ? null : new Date());
+      setDate(newValue);
+      setForceUpdate && setForceUpdate(false);
+    }
+  }, [isForceUpdate, setForceUpdate, value, allowEmpty])
+
+  return (
+    <DateContainer $isError={isError} {...props['data-qa-id'] && { 'data-qa-id': props['data-qa-id'] }}>
+      <DatePicker
+        selected={_date}
+        name={name}
+        portalId='popup-portal'
+        dateFormat={dateFormat}
+        onChange={handleChange}
+        showTimeInput={showTimeInput}
+        onKeyDown={(e) => e.preventDefault()}
+        ref={ref as any} 
+      />
+      {
+        (allowEmpty && _date) ? (
+          <DateIndicatorContainer onClick={() => handleChange(null)} title='clear'>
+            <svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"></path></svg>
+          </DateIndicatorContainer>
+        ) : null
+      }
+    </DateContainer>
+  )
+})
+
+export default DateComponent

package/src/components/icon/styles.ts

@@ -26,6 +26,7 @@ import IconArrowLeft from '../../assets/images/icons/arrow-left.svg'
 import IconArrowLeftDouble from '../../assets/images/icons/arrow-left-double.svg'
 import IconArrowRight from '../../assets/images/icons/arrow-right.svg'
 import IconArrowRightDouble from '../../assets/images/icons/arrow-right-double.svg'
+import IconCalendar from '../../assets/images/icons/calendar.svg'
 
 const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: string, $name: string, $width?: string | number, onClick?: (e: MouseEvent<HTMLElement>) => void }) => {
   let style = ``;
@@ -212,6 +213,13 @@ const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: stri
         }
       `
       break
+    case 'calendar': 
+      style += `
+        &:before { 
+          content: url(${IconCalendar}); 
+        }
+      `
+      break
     default: 
       break;
   }

package/src/components/index.ts

@@ -20,14 +20,13 @@ export { default as UploadComponent } from './upload';
 export { default as UploadDragDropComponent } from './upload/drag_drop';
 export { default as TextAreaComponent } from './textarea';
 export { default as TextAreaRefComponent } from './textarea/ref'; 
-export { default as DateRangeComponent } from './date/daterange';
+export { default as DateComponent } from './date';
 export { default as DateTimeComponent } from './datetime';
 
 export * from './dropdown/typed';
 export * from './message/typed';
 export * from './popup/typed';
 export * from './select/typed';
-export * from './date/typed';
 
 export * from './form/styles';
 

package/src/assets/images/icons/warning copy.svg

@@ -1,5 +0,0 @@
-<svg width="auto" height="auto" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="4" y="4" width="48" height="48" rx="24" fill="#FEE4E2"/>
-<rect x="4" y="4" width="48" height="48" rx="24" stroke="#FEF3F2" stroke-width="8"/>
-<path d="M28 24V28M28 32H28.01M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z" stroke="#D92D20" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/components/date/daterange.css

@@ -1,229 +0,0 @@
-.DateRangePicker {
-  display: inline-block;
-  margin-bottom: 10px;
-  padding: 0;
-  position: relative;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none; }
-  .DateRangePicker__Legend {
-    color: #52575e;
-    font-size: 14px;
-    line-height: 16px;
-    list-style-type: none;
-    margin: 20px 0;
-    padding: 0; }
-  .DateRangePicker__LegendItem {
-    display: inline-block;
-    margin: 0 20px; }
-  .DateRangePicker__LegendItemColor {
-    border-radius: 50%;
-    display: inline-block;
-    height: 14px;
-    margin-right: 6px;
-    vertical-align: text-bottom;
-    width: 14px;
-    border: 1px solid rgba(0, 0, 0, 0.25); }
-    .DateRangePicker__LegendItemColor--selection {
-      background-color: #ed5434; }
-  .DateRangePicker__PaginationArrow {
-    border: 0;
-    cursor: pointer;
-    display: block;
-    height: 35px;
-    outline: none;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    text-align: center;
-    top: 0;
-    white-space: nowrap;
-    width: 35px;
-    z-index: 1; }
-    .DateRangePicker__PaginationArrow--previous {
-      left: 20px; }
-    .DateRangePicker__PaginationArrow--next {
-      right: 20px; }
-    .DateRangePicker__PaginationArrow:hover {
-      background-color: #ccc; }
-  .DateRangePicker__PaginationArrowIcon {
-    border-bottom: 8px solid transparent;
-    border-top: 8px solid transparent;
-    height: 0;
-    position: absolute;
-    top: 10px;
-    width: 0; }
-    .DateRangePicker__PaginationArrowIcon--is-disabled {
-      opacity: .25; }
-    .DateRangePicker__PaginationArrowIcon--previous {
-      border-left: 8px solid transparent;
-      border-right: 8px solid #aaa;
-      right: 11px; }
-    .DateRangePicker__PaginationArrowIcon--next {
-      border-left: 8px solid #aaa;
-      border-right: 8px solid transparent;
-      left: 11px; }
-  .DateRangePicker__Month {
-    color: #333;
-    display: inline-block;
-    margin: 0 20px;
-    position: relative;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
-    width: 275px; }
-  .DateRangePicker__MonthHeader {
-    color: #000;
-    font-size: 14px;
-    font-weight: bold;
-    height: 35px;
-    line-height: 35px;
-    position: relative;
-    text-align: center; }
-  .DateRangePicker__MonthHeaderLabel {
-    display: inline-block;
-    position: relative; }
-  .DateRangePicker__MonthHeaderSelect {
-    background: #e4e4e4;
-    border: 0;
-    cursor: pointer;
-    display: inline-block;
-    height: 100%;
-    left: 0;
-    margin: 0;
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    z-index: 5; }
-  .DateRangePicker__MonthDates {
-    border-bottom: 1px solid #f4f5f6;
-    border-collapse: separate;
-    border-spacing: 0 1px;
-    margin: 0;
-    width: 100%; }
-  .DateRangePicker__WeekdayHeading, .DateRangePicker__Date {
-    font-size: 12px;
-    line-height: 1;
-    padding: 10px 0;
-    text-align: center;
-    width: 14.285714285714286%; }
-  .DateRangePicker__WeekdayHeading {
-    border-bottom: 1px solid #f4f5f6;
-    color: #000;
-    font-weight: bold; }
-    .DateRangePicker__WeekdayHeading abbr[title] {
-      border-bottom-width: 0;
-      color: #000;
-      cursor: pointer;
-      font-size: inherit;
-      text-decoration: none; }
-  .DateRangePicker__Date {
-    border: 0 solid #f4f5f6;
-    border-right-width: 1px;
-    cursor: pointer;
-    overflow: hidden;
-    position: relative; }
-    .DateRangePicker__Date:first-child {
-      border-left-width: 1px; }
-    .DateRangePicker__Date--weekend {
-      background-color: #f6f7f9; }
-    .DateRangePicker__Date--otherMonth {
-      opacity: .25; }
-    .DateRangePicker__Date--is-disabled {
-      color: #cdcdd1;
-      cursor: default; }
-    .DateRangePicker__Date--is-selected {
-      color: #fff; }
-    .DateRangePicker__Date--is-highlighted {
-      color: #333; }
-  .DateRangePicker__CalendarDatePeriod {
-    bottom: 0;
-    position: absolute;
-    top: 0; }
-    .DateRangePicker__CalendarDatePeriod--am {
-      left: 0;
-      right: 50%; }
-    .DateRangePicker__CalendarDatePeriod--pm {
-      left: 50%;
-      right: 0; }
-  .DateRangePicker__CalendarSelection {
-    background-color: #ed5434;
-    border: 1px solid #eb401d;
-    bottom: 5px;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 5px; }
-    .DateRangePicker__CalendarSelection--inOtherMonth {
-      opacity: .5; }
-    .DateRangePicker__CalendarSelection--start {
-      border-bottom-left-radius: 5px;
-      border-right-width: 0;
-      border-top-left-radius: 5px;
-      left: 5px; }
-    .DateRangePicker__CalendarSelection--end {
-      border-bottom-right-radius: 5px;
-      border-left-width: 0;
-      border-top-right-radius: 5px;
-      right: 5px; }
-    .DateRangePicker__CalendarSelection--segment {
-      border-left-width: 0;
-      border-right-width: 0; }
-    .DateRangePicker__CalendarSelection--single {
-      border-radius: 5px;
-      left: 5px;
-      right: 5px; }
-    .DateRangePicker__CalendarSelection--is-pending {
-      background-color: rgba(237, 84, 52, 0.75);
-      border-width: 0; }
-  .DateRangePicker__CalendarHighlight {
-    background-color: rgba(255, 255, 255, 0.25);
-    border: 1px solid rgba(0, 0, 0, 0.25);
-    bottom: 5px;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 5px; }
-    .DateRangePicker__CalendarHighlight--inOtherMonth {
-      opacity: .5; }
-    .DateRangePicker__CalendarHighlight--start {
-      border-bottom-left-radius: 5px;
-      border-right-width: 0;
-      border-top-left-radius: 5px;
-      left: 5px; }
-    .DateRangePicker__CalendarHighlight--end {
-      border-bottom-right-radius: 5px;
-      border-left-width: 0;
-      border-top-right-radius: 5px;
-      right: 5px; }
-    .DateRangePicker__CalendarHighlight--segment {
-      border-left-width: 0;
-      border-right-width: 0; }
-    .DateRangePicker__CalendarHighlight--single {
-      background-color: #fff;
-      border: 1px solid #eb401d;
-      border-radius: 5px;
-      left: 5px;
-      right: 5px; }
-  .DateRangePicker__HalfDateStates {
-    bottom: -50px;
-    left: -50px;
-    position: absolute;
-    right: -50px;
-    top: -50px;
-    transform: rotate(30deg); }
-  .DateRangePicker__FullDateStates {
-    bottom: 0;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0; }
-  .DateRangePicker__DateLabel {
-    display: block;
-    position: relative;
-    text-align: center;
-    width: 100%;
-    z-index: 1; }

package/src/components/date/daterange.tsx

@@ -1,284 +0,0 @@
-import { useEffect, useState, useRef } from 'react';
-import DateRangePicker from 'react-daterange-picker';
-import moment from 'moment';
-import { extendMoment } from 'moment-range';
-import { configDateRange } from '../../maps/common';
-import IconComponent from '../icon';
-import ButtonComponent from '../button';
-import CheckboxComponent from '../checkbox';
-import ReactPortalComponent from '../portal';
-import TextComponent from '../text';
-import { dateRangeDays, dateRangeStatus } from '../../assets/javascripts/helper';
-import './daterange.css';
-import './styles.css';
-import { DateRangeContainer, DateRangeControl, DateRangeLabelContainer, DateRangeLabel, DateRangeIndicatorsContainer, DateRangeIndicatorsArrowIconSvg, DateRangeMenuContainer, DateRangeMenu, DateRangeSelection, SelectionDate, DateRangeAside, DateRangePortalContainer, DateRangeIconContainer } from './styles';
-import type { TMouseEvent, TState } from '../../typeds';
-import type { TModerateDateFunction } from './typed';
-
-type TDateRange = {
-  mode: string
-  placeholder?: string
-  startDate?: string | null
-  endDate?: string | null
-  rangeDate?: string
-  minDate?: string
-  evModDate: TModerateDateFunction
-  portalId?: string
-  isForceUpdate?: boolean
-  setForceUpdate?: TState<boolean>
-  isCheckType?: boolean
-  size?: string
-}
-
-const DateRangeComponent = ({ mode='default', placeholder, startDate, endDate, rangeDate, minDate, evModDate, portalId, isForceUpdate, setForceUpdate, isCheckType, size }: TDateRange) => {
-  const _placeholder = placeholder || configDateRange.placeholder;
-  const _rangeDate = rangeDate || configDateRange.rangeDate;
-  const _startDate = startDate || configDateRange.startDate;
-  const _endDate = endDate || configDateRange.endDate;
-  const _minDate = minDate || configDateRange.minDate;
-
-  const [isOpen, setOpen] = useState<boolean>(false) ;
-  const [offsetLeft, setOffsetLeft] = useState<number>(0);
-  const [isLoadOffsetLeft, setLoadOffsetLeft] = useState<boolean>(false);
-  const [startDateSelected, setStartDateSelected] = useState<string>(_startDate);
-  const [endDateSelected, setEndDateSelected] = useState<string>(_endDate);
-  const [rangeDateSelected, setRangeDateSelected] = useState<string>(_rangeDate);
-
-  const daterangeContainerRef = useRef<HTMLElement | null>(null);
-  const buttonRef = useRef<HTMLDivElement | null>(null);
-  const newMoment = extendMoment(moment as any);
-
-  const callback = () => {
-    setOpen(false);
-  }
-
-  useEffect(() => {
-    if (offsetLeft && mode === 'filter' && isLoadOffsetLeft) {
-      const _offsetLeft = daterangeContainerRef.current && daterangeContainerRef.current ? daterangeContainerRef.current.getBoundingClientRect().x : 0;
-      setOffsetLeft(_offsetLeft);
-      setLoadOffsetLeft(true);
-    }
-    if (isForceUpdate) {
-      _startDate && setStartDateSelected(_startDate);
-      _endDate && setEndDateSelected(_endDate);
-      _rangeDate && setRangeDateSelected(_rangeDate);
-      setForceUpdate && setForceUpdate(false);
-    }
-  },[offsetLeft, isLoadOffsetLeft, mode, isForceUpdate, setForceUpdate, _startDate, _endDate, _rangeDate])
-
-  const evResetFilter = () => {
-    setStartDateSelected(_startDate || '');
-    setEndDateSelected(_endDate || '');
-    setRangeDateSelected(_rangeDate || '');
-  }
-
-  const evToogleDateRangePicker: TMouseEvent = e => {
-    const refEl = (buttonRef && buttonRef.current) ? buttonRef.current : null;
-    const buttonEl = refEl && (e.target as HTMLDivElement).closest(`.${refEl.classList[0]}`) as HTMLDivElement;
-    if (!buttonEl) {
-      return;
-    }
-    const containerEl = buttonEl.closest('._refContainer')  as HTMLElement;
-    const isCurOpen = containerEl.classList.contains('is-shown');
-    const offsetPos = containerEl.getBoundingClientRect();
-    if (!isCurOpen) {
-      const containerRef = document.getElementsByClassName('_refContainer is-shown') as HTMLCollectionOf<HTMLElement>;
-      if (containerRef.length) {
-        for (var i = 0; i < containerRef.length; i++) {
-          containerRef[i].classList.remove('is-shown');
-        }
-      }  
-      setTimeout(() => {
-        if (portalId) {
-          const portalContainerRef = document.getElementsByClassName('._refDateRangePickerPortal is-shown') as HTMLCollectionOf<HTMLElement>;
-          if (portalContainerRef.length) {
-            for (var i = 0; i < portalContainerRef.length; i++) {
-              portalContainerRef[i].classList.remove('is-shown');
-              portalContainerRef[i].style.left = '0';
-              portalContainerRef[i].style.top = '0';
-            }
-          } 
-        }
-      },10)
-    }
-    setOpen(!isCurOpen);
-    if (!isCurOpen) {
-      evResetFilter();
-      containerEl && containerEl.classList.add('is-shown');
-      setTimeout(() => {
-        if (portalId) {
-          const portalContainerRef = document.querySelector('._refDateRangePickerPortal') as HTMLDivElement;
-          if (portalContainerRef) {
-            if (offsetPos) {
-              portalContainerRef.style.left = offsetPos.left + 'px';
-              portalContainerRef.style.top = (offsetPos.top + offsetPos.height) + 'px';
-            }
-            portalContainerRef.classList.add('is-shown');
-          }
-        }
-      }, 10)
-    } else {
-      containerEl && containerEl.classList.remove('is-shown');
-      setTimeout(() => {
-        if (portalId) {
-          const portalContainerRef = document.querySelector('._refDateRangePickerPortal') as HTMLDivElement;
-          if (portalContainerRef) {
-            portalContainerRef.classList.remove('is-shown');
-            portalContainerRef.style.left = '0';
-            portalContainerRef.style.top = '0';
-          }
-        }
-      }, 10)
-    }
-  }
-
-  const handleSelect = (value: any) => {
-    const startDate: string = value.start.format('YYYY-MM-DD');
-    const endDate: string = value.end.format('YYYY-MM-DD');
-    setStartDateSelected(startDate);
-    setEndDateSelected(endDate);
-    setRangeDateSelected('custom');
-  }
-
-  const evApplyDateRange = () => {
-    let _start_date = '';
-    let _end_date = '';
-    if (startDateSelected && endDateSelected) {
-      _start_date = startDateSelected;
-      _end_date = endDateSelected;
-    } else if (_rangeDate) {
-      _start_date = newMoment().clone().subtract(dateRangeDays(_rangeDate), 'days').format('YYYY-MM-DD');
-      _end_date = newMoment().clone().format('YYYY-MM-DD');
-    } else if (_startDate && _endDate ) {
-      _start_date = _startDate;
-      _end_date = _endDate;
-    }
-    evModDate(_start_date, _end_date, 'custom', callback);
-  }
-
-  const evCancelDateRange = () => {
-    setOpen(false);
-  }
-
-  const setRange: TMouseEvent = e => {
-    const type = (e.target as HTMLDivElement).dataset.type || '';
-    let startDate: string = '';
-    let endDate: string = newMoment().clone().format('YYYY-MM-DD');
-    switch (type) {
-      case 'today': 
-        startDate= newMoment().clone().format('YYYY-MM-DD');
-        break;
-      case 'lastweek':
-        startDate= newMoment().clone().subtract(6, 'days').format('YYYY-MM-DD');
-        break;
-      case 'lastsecondweek':
-        startDate= newMoment().clone().subtract(13, 'days').format('YYYY-MM-DD');
-        break;
-      case 'lastmonth':
-        startDate= newMoment().clone().subtract(29, 'days').format('YYYY-MM-DD');
-        break;
-      case 'lastquart':
-        startDate= newMoment().clone().subtract(89, 'days').format('YYYY-MM-DD');
-        break;
-      case 'custom': 
-        startDate = '';
-        endDate= '';
-        break
-      default: 
-        startDate = '';
-        endDate= '';
-        break
-    }
-    setStartDateSelected(startDate);
-    setEndDateSelected(endDate);
-    setRangeDateSelected(type);
-    evModDate(startDate, endDate, type, callback);
-  }
-
-  const startDateMoment: moment.Moment = newMoment(_startDate, 'YYYY-MM-DD');
-  const endDateMoment: moment.Moment = newMoment(_endDate, 'YYYY-MM-DD');
-  const _minDateMoment: string = newMoment(_minDate, 'YYYY-MM-DD').format('YYYY-MM-DD'); 
-  const startDateSelectedMoment: moment.Moment = newMoment(startDateSelected, 'YYYY-MM-DD').startOf('day'); 
-  const endDateSelectedMoment: moment.Moment = newMoment(endDateSelected, 'YYYY-MM-DD').endOf('day');
-  const minDateMoment: Date | null = _minDate ? new Date(_minDateMoment) : null;
-  const openClass = isOpen ? 'is-shown' : ''
-
-  let value;
-  if (startDateSelected && endDateSelected) {
-    value = newMoment.range(startDateSelectedMoment, endDateSelectedMoment);
-  } else if (_startDate && _endDate) {
-    value =  newMoment.range(newMoment(_startDate, 'YYYY-MM-DD').startOf('day'), newMoment(_endDate, 'YYYY-MM-DD').endOf('day'));
-  } else if (_rangeDate) {
-    value = newMoment.range(newMoment().clone().subtract(dateRangeDays(_rangeDate), 'days').startOf('day'), newMoment().clone().endOf('day'));
-  }
-
-  const dateRangeEl = (
-    <DateRangeMenuContainer $mode={mode} style={{ 'left': '-'+offsetLeft+'px' }}>
-      <DateRangeMenu>
-        <DateRangeSelection>
-          <SelectionDate data-type='today' $activated={rangeDateSelected === 'today'} onClick={setRange} data-qa-id='daterange-picker-today'>Today</SelectionDate>
-          <SelectionDate data-type='lastweek' $activated={rangeDateSelected === 'lastweek'} onClick={setRange} data-qa-id='daterange-picker-7d'>Last 7 days</SelectionDate>
-          <SelectionDate data-type='lastsecondweek' $activated={rangeDateSelected === 'lastsecondweek'} onClick={setRange} data-qa-id='daterange-picker-14d'>Last 14 days</SelectionDate>
-          <SelectionDate data-type='lastmonth' $activated={rangeDateSelected === 'lastmonth'} onClick={setRange} data-qa-id='daterange-picker-30d'>Last 30 days</SelectionDate>
-          <SelectionDate data-type='lastquart' $activated={rangeDateSelected === 'lastquart'} onClick={setRange} data-qa-id='daterange-picker-90d'>Last 90 days</SelectionDate>
-          <SelectionDate data-type='custom' $activated={rangeDateSelected === 'custom'} data-qa-id='daterange-picker-custom'>Custom Range</SelectionDate>
-        </DateRangeSelection>
-        <DateRangePicker
-          bemNamespace='DateRangePicker'
-          numberOfCalendars={2}
-          onSelect={handleSelect}
-          selectionType='range'
-          maximumDate={new Date()}
-          value={value} 
-          initialMonth={newMoment().add(-1, 'month').month()}
-          initialYear={newMoment().add(0, 'year').year()}
-          singleDateRange={true}
-          {...minDateMoment && { minimumDate: minDateMoment }}
-        />
-      </DateRangeMenu>
-      <DateRangeAside>
-        <TextComponent>{startDateSelected && endDateSelected ? startDateSelectedMoment.format('LL') +' - '+ endDateSelectedMoment.format('LL') : ' '}</TextComponent>
-        <div>
-          <ButtonComponent $mode='white' $size='small' onClick={evCancelDateRange} data-qa-id='daterange-picker-cancel'>Cancel</ButtonComponent>
-          <ButtonComponent $mode='red' $size='small' onClick={evApplyDateRange} data-qa-id='daterange-picker-apply'>Apply</ButtonComponent>
-        </div>
-      </DateRangeAside>
-    </DateRangeMenuContainer>
-  )
-
-  return (
-    <DateRangeContainer className={'_refContainer '+ openClass} $mode={mode} ref={daterangeContainerRef} data-qa-id='daterange-picker'>
-      <DateRangeControl ref={buttonRef} onClick={evToogleDateRangePicker} $mode={mode} $size={size}>
-        {
-          mode === 'filterorder' || mode === 'filterordertofulfill' || mode === 'filterdashboard' ? (
-            <ButtonComponent $iconLeft='calendar' $mode='nude' $isIndicatorArrow={true} isIndicatorArrowColor='#494949'>{ (_startDate && _endDate && _rangeDate === 'custom') ? (startDateMoment.format('MMM D, YYYY') + ' - ' +endDateMoment.format('MMM D, YYYY')) : (_rangeDate ? dateRangeStatus(_rangeDate) :  _placeholder) }</ButtonComponent>
-          ) : (
-            <>
-              { mode === 'filter' ? <CheckboxComponent name='checkbox-date' id='checkbox-date' className='_refCheckboxContainer'  defaultChecked={isCheckType} disabled={true} /> : null }
-              {
-                mode === 'popuppayment' ? (
-                  <DateRangeIconContainer>
-                    <IconComponent $name='calendar' $width='14px' />
-                  </DateRangeIconContainer>
-                ) : null
-              }
-              <DateRangeLabelContainer>
-                <DateRangeLabel $size={size}>
-                  { (_startDate && _endDate && _rangeDate === 'custom') ? (startDateMoment.format('LL') + ' - ' +endDateMoment.format('LL')) :  (_rangeDate ? dateRangeStatus(_rangeDate) :  _placeholder) }
-                </DateRangeLabel>
-              </DateRangeLabelContainer>
-              <DateRangeIndicatorsContainer>
-                <DateRangeIndicatorsArrowIconSvg height='20' width='20' viewBox='0 0 20 20' aria-hidden='true' focusable='false'>
-                  <path d='M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z'></path>
-                </DateRangeIndicatorsArrowIconSvg>
-              </DateRangeIndicatorsContainer>
-            </>
-          )
-        }
-      </DateRangeControl>
-      { isOpen && ( portalId ? <ReactPortalComponent><DateRangePortalContainer className='_refDateRangePickerPortal'>{dateRangeEl}</DateRangePortalContainer></ReactPortalComponent> : dateRangeEl ) }
-    </DateRangeContainer>
-  )
-}
-
-export default DateRangeComponent

package/src/components/date/typed.ts

@@ -1 +0,0 @@
-export type TModerateDateFunction = (startDateObj: string, endDateObj: string, rangeDateObj: string, callback: () => void) => void;