intelicoreact 0.0.63 → 0.0.64

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

@@ -86,6 +86,25 @@ var InputDateRange = function InputDateRange(props) {
   var internalContainerRef = (0, _react.useRef)(null);
   var isEndDateNearFuture = (0, _momentTimezone.default)(actualValues === null || actualValues === void 0 ? void 0 : actualValues.end).isSameOrAfter((0, _momentTimezone.default)());
 
+  var handleChange = function handleChange(input) {
+    var newValue = (0, _dependencies.getActualDateRange)(input);
+
+    var formatedValue = _objectSpread(_objectSpread(_objectSpread({
+      intervalKey: newValue.intervalKey,
+      start: newValue.start ? (0, _momentTimezone.default)(newValue.start).format('YYYY-MM-DDTHH:mm') : newValue.start,
+      end: newValue.end ? (0, _momentTimezone.default)(newValue.end).format('YYYY-MM-DDTHH:mm') : newValue.end
+    }, newValue.compare ? {
+      compare: newValue.compare
+    } : {}), newValue.startPrevDate ? {
+      startPrevDate: (0, _momentTimezone.default)(newValue.startPrevDate).format('YYYY-MM-DDTHH:mm')
+    } : {}), newValue.endPrevDate ? {
+      endPrevDate: (0, _momentTimezone.default)(newValue.endPrevDate).format('YYYY-MM-DDTHH:mm')
+    } : {});
+
+    onChange(formatedValue);
+    return formatedValue;
+  };
+
   var Range = function Range() {
     var SYMBOLS_QUANTITY_IF_TIME_ADDED = 13;
     var start = actualValues.start,
@@ -116,8 +135,7 @@ var InputDateRange = function InputDateRange(props) {
     var start = actualValues.start,
         end = actualValues.end;
     var intervalHoursCount = (0, _momentTimezone.default)(end).diff(start, 'hours');
-    var newEnd;
-    var newStart;
+    var newEnd, newStart;
     var endHours = (0, _momentTimezone.default)(end).hours();
     var startHours = (0, _momentTimezone.default)(start).hours();
 
@@ -131,7 +149,7 @@ var InputDateRange = function InputDateRange(props) {
 
     var startPrevDate = (0, _momentTimezone.default)(newStart).subtract(intervalHoursCount, 'hours').subtract(1, 'seconds');
     var endPrevDate = (0, _momentTimezone.default)(newEnd).subtract(1, 'seconds');
-    onChange(_objectSpread(_objectSpread({}, value), {}, {
+    handleChange(_objectSpread(_objectSpread({}, value), {}, {
       intervalKey: (_getActualDateRange = (0, _dependencies.getActualDateRange)({
         start: newStart,
         end: newEnd
@@ -146,36 +164,34 @@ var InputDateRange = function InputDateRange(props) {
   var handleArrowClick = function handleArrowClick(type) {
     slideInterval(type === 'right' ? 'forward' : 'back');
     toggleOff();
-  };
+  }; // const absData = useMemo(
+  //     () => ({
+  //         body: OpenedPart,
+  //         props: {
+  //             ...props,
+  //             key: `${actualValues.start}-${actualValues.end}-${actualValues.intervalKey}-${current}-${isCompare}`,
+  //             actualValues,
+  //             current,
+  //             setCurrent,
+  //             isCompare,
+  //             setIsCompare,
+  //             toggleOff,
+  //             onChange,
+  //         },
+  //         clickOutsideCallback: () => toggleOff(),
+  //         top: internalContainerRef.current?.getBoundingClientRect()?.bottom || 0,
+  //         left: internalContainerRef.current?.getBoundingClientRect()?.left || 0,
+  //     }),
+  //     [isToggled, value, actualValues, current, isCompare],
+  // );
+  // useEffect(() => {
+  //     if (current && isUseAbs && absTooltip) onChange(current, 'absTooltip/props/current');
+  // }, [current]);
+  // useEffect(() => {
+  //     if (isUseAbs) onChange(isToggled ? absData : null, 'absTooltip');
+  // }, [isToggled]);
+
 
-  var absData = (0, _react.useMemo)(function () {
-    var _internalContainerRef, _internalContainerRef2, _internalContainerRef3, _internalContainerRef4;
-
-    return {
-      body: _OpenedPart.default,
-      props: _objectSpread(_objectSpread({}, props), {}, {
-        key: "".concat(actualValues.start, "-").concat(actualValues.end, "-").concat(actualValues.intervalKey, "-").concat(current, "-").concat(isCompare),
-        actualValues: actualValues,
-        current: current,
-        setCurrent: setCurrent,
-        isCompare: isCompare,
-        setIsCompare: setIsCompare,
-        toggleOff: toggleOff,
-        onChange: onChange
-      }),
-      clickOutsideCallback: function clickOutsideCallback() {
-        return toggleOff();
-      },
-      top: ((_internalContainerRef = internalContainerRef.current) === null || _internalContainerRef === void 0 ? void 0 : (_internalContainerRef2 = _internalContainerRef.getBoundingClientRect()) === null || _internalContainerRef2 === void 0 ? void 0 : _internalContainerRef2.bottom) || 0,
-      left: ((_internalContainerRef3 = internalContainerRef.current) === null || _internalContainerRef3 === void 0 ? void 0 : (_internalContainerRef4 = _internalContainerRef3.getBoundingClientRect()) === null || _internalContainerRef4 === void 0 ? void 0 : _internalContainerRef4.left) || 0
-    };
-  }, [isToggled, value, actualValues, current, isCompare]);
-  (0, _react.useEffect)(function () {
-    if (current && isUseAbs && absTooltip) onChange(current, 'absTooltip/props/current');
-  }, [current]);
-  (0, _react.useEffect)(function () {
-    if (isUseAbs) onChange(isToggled ? absData : null, 'absTooltip');
-  }, [isToggled]);
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: internalContainerRef,
     className: (0, _classnames.default)('date-range-input', className, {
@@ -220,14 +236,14 @@ var InputDateRange = function InputDateRange(props) {
     type: "left",
     className: "date-range-input__arrow",
     onClick: function onClick() {
-      return handleArrowClick('left');
+      return handleArrowClick("left");
     },
     disabled: disabled || (actualValues === null || actualValues === void 0 ? void 0 : actualValues.intervalKey) === _dependencies.ALL_TIME_KEY
   }), /*#__PURE__*/_react.default.createElement(_Arrow.default, {
     type: "right",
     className: "date-range-input__arrow",
     onClick: function onClick() {
-      return handleArrowClick('right');
+      return handleArrowClick("right");
     },
     disabled: disabled || (actualValues === null || actualValues === void 0 ? void 0 : actualValues.intervalKey) === _dependencies.ALL_TIME_KEY || (actualValues === null || actualValues === void 0 ? void 0 : actualValues.intervalKey) === 'today' || (0, _momentTimezone.default)(actualValues === null || actualValues === void 0 ? void 0 : actualValues.end).add((0, _momentTimezone.default)(actualValues === null || actualValues === void 0 ? void 0 : actualValues.end).diff(actualValues === null || actualValues === void 0 ? void 0 : actualValues.start, 'hours'), 'hours').isAfter((0, _momentTimezone.default)().add(1, 'day').startOf('day'))
   }))), isToggled && !isUseAbs && /*#__PURE__*/_react.default.createElement(_OpenedPart.default, (0, _extends2.default)({}, props, {
@@ -238,7 +254,7 @@ var InputDateRange = function InputDateRange(props) {
     isCompare: isCompare,
     setIsCompare: setIsCompare,
     toggleOff: toggleOff,
-    onChange: onChange
+    onChange: handleChange
   })))), error && /*#__PURE__*/_react.default.createElement("span", {
     className: "date-range-input__error-block"
   }, error));

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

@@ -11,6 +11,8 @@ exports.InputDateRangeTemplate = exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -19,12 +21,18 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _InputDateRange = _interopRequireDefault(require("./InputDateRange"));
 
+var _Table = _interopRequireDefault(require("../Table/Table"));
+
 var _excluded = ["dateRange"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(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 = {}; 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 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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else 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';
 var _default = {
   title: 'Form Elements/InputDateRange',
@@ -38,23 +46,171 @@ var _default = {
   }
 };
 exports.default = _default;
+var tableData = {
+  header: [{
+    id: 1,
+    label: 'state'
+  }, {
+    id: 2,
+    label: 'Tags'
+  }, {
+    id: 3,
+    label: 'status'
+  }, {
+    id: 4,
+    label: 'loanAmountApproved'
+  }, {
+    id: 5,
+    label: 'loanAmountRejected'
+  }, {
+    id: 6,
+    label: 'approveRate'
+  }, {
+    id: 7,
+    label: 'actions',
+    type: 'actions'
+  }],
+  rows: [{
+    id: 1,
+    link: {
+      label: 'CA',
+      link: '#s'
+    },
+    tags: [{
+      label: 'Label 1'
+    }],
+    status: {
+      value: '90',
+      status: 'active'
+    },
+    loanAmountApproved: {
+      value: '$70,000'
+    },
+    loanAmountRejected: {
+      value: '$30,000'
+    },
+    approveRate: {
+      value: '70%'
+    }
+  }, {
+    id: 2,
+    link: {
+      label: 'NY',
+      link: '#s'
+    },
+    advancedTags: [{
+      labelLeft: 'home',
+      labelRight: 'hoods',
+      active: 3,
+      pause: 1,
+      merchants: 5
+    }, {
+      labelRight: 'jewelry',
+      active: 3,
+      pause: 1,
+      merchants: 5
+    }, {
+      labelLeft: 'home',
+      labelRight: 'improvement',
+      active: 0,
+      pause: 0,
+      warnLeft: true,
+      warnLeftMsg: 'landerNotIncluded',
+      warnRightMsg: 'noMerchants'
+    }, {
+      labelLeft: 'home',
+      labelRight: 'hoods',
+      active: 3,
+      pause: 1,
+      merchants: 5
+    }, {
+      labelRight: 'jewelry',
+      active: 3,
+      pause: 1,
+      merchants: 5
+    }],
+    status: {
+      label: 'Active',
+      className: 'color--green-haze'
+    },
+    loanAmountApproved: {
+      value: '$3,000'
+    },
+    loanAmountRejected: {
+      value: '$7,000'
+    },
+    approveRate: {
+      value: '30%'
+    }
+  }, {
+    id: 3,
+    link: {
+      label: 'NH',
+      link: '#s'
+    },
+    tags: [{
+      label: 'Label 1'
+    }, {
+      label: 'Label 2'
+    }, {
+      label: 'Label 3'
+    }],
+    status: {
+      status: 'error'
+    },
+    loanAmountApproved: {
+      value: '$70,000'
+    },
+    loanAmountRejected: {
+      value: '$30,000'
+    },
+    approveRate: {
+      value: '70%'
+    }
+  }]
+};
 
 var Template = function Template(args) {
+  var _state$rows;
+
   var dateRange = args.dateRange,
       restOfProps = (0, _objectWithoutProperties2.default)(args, _excluded);
 
   var _useState = (0, _react.useState)(dateRange),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       value = _useState2[0],
-      setValue = _useState2[1]; // return <InputDateRange {...restOfProps} value={value} onChange={setValue} />;
-
+      setValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(tableData),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      state = _useState4[0],
+      setState = _useState4[1];
+
+  var rowsWithActions = state === null || state === void 0 ? void 0 : (_state$rows = state.rows) === null || _state$rows === void 0 ? void 0 : _state$rows.map(function (row) {
+    return _objectSpread(_objectSpread({}, row), {}, {
+      actions: row.isDeleted ? [{
+        type: 'undo'
+      }] : [{
+        type: 'download'
+      }, {
+        type: 'edit'
+      }, {
+        type: 'delete'
+      }]
+    });
+  }); // useEffect(() => console.log(value), [value]);
+  // return <InputDateRange {...restOfProps} value={value} onChange={setValue} />;
 
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     className: "mb20"
   }, /*#__PURE__*/_react.default.createElement(_InputDateRange.default, (0, _extends2.default)({}, restOfProps, {
     value: value,
     onChange: setValue
-  }))));
+  }))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Table.default, {
+    header: state.header,
+    rows: rowsWithActions,
+    onChange: setState
+  })));
 };
 
 var InputDateRangeTemplate = Template.bind({});

package/dist/Atomic/FormElements/InputDateRange/dependencies.js

@@ -221,6 +221,14 @@ var getActualDateRange = function getActualDateRange(inputDateRange) {
     return null;
   }();
 
+  if (actualIntervalKey === ALL_TIME_KEY) return {
+    intervalKey: ALL_TIME_KEY,
+    start: null,
+    end: null,
+    compare: inputDateRange.compare,
+    startPrevDate: null,
+    endPrevDate: null
+  };
   var actualValues = {
     // intervalKey: inputDateRange.intervalKey || customIntervalKey,
     intervalKey: actualIntervalKey || CUSTOM_INTERVAL_KEY,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.0.63",
+  "version": "0.0.64",
   "description": "Range selector fixes",
   "main": "dist/index.js",
   "scripts": {

package/src/Atomic/FormElements/InputDateRange/InputDateRange.js

@@ -7,228 +7,241 @@ import { useClickOutside, useToggle, getActualDateRange, INTERVALS, ALL_TIME_KEY
 import OpenedPart from './components/OpenedPart';
 import Arrow from '../../UI/Arrow/Arrow';
 
-import './InputDateRange.scss';
+import './InputDateRange.scss'
 
 const InputDateRange = props => {
-  const {
-    txt,
-    id,
-    label,
-    className,
-    buttonsTypes,
-    value,
-    onChange = () => {},
-    error,
-    disabled,
-    isHoverable,
-    short,
-    isCompact = false,
-    // isFocused = false,
-    isIntervalsHidden = false,
-    isCompareHidden = false,
-    hideArrows = false,
-    isOptionsRight,
-    limitRange,
-    isUseAbs,
-    absTooltip
-  } = props;
-
-  const actualValues = getActualDateRange(value);
-  const { isToggled, toggle, toggleOn, toggleOff } = useToggle(false);
-  const [current, setCurrent] = useState(actualValues?.intervalKey);
-  const [isCompare, setIsCompare] = useState(actualValues?.compare);
-
-  const ref = !isUseAbs ? useClickOutside(toggleOff) : useRef(null);
-  const internalContainerRef = useRef(null);
-  const isEndDateNearFuture = moment(actualValues?.end).isSameOrAfter(moment());
-
-  const Range = () => {
-    const SYMBOLS_QUANTITY_IF_TIME_ADDED = 13;
-    const { start, end } = actualValues;
-    if (!start || !end) return null;
-
-    const startTime = moment(start).format('HH:mm');
-    const endTime = moment(end).format('HH:mm');
-
-    const firstPart = `${moment(start).format('ll')} ${startTime !== '00:00' ? `(${startTime})` : ''}`;
-    const secondPart = `${(endTime !== '00:00' ? moment(end) : moment(end).subtract(1, 'days')).format('ll')} ${
-      endTime !== '00:00' ? `(${endTime})` : ''
-    }`;
-
-    const getClasses = base =>
-      cn('date-range-input__range-text', {
-        'date-range-input__range-text_little': base.length > SYMBOLS_QUANTITY_IF_TIME_ADDED
-      });
+    const {
+        txt,
+        id,
+        label,
+        className,
+        buttonsTypes,
+        value,
+        onChange = () => {},
+        error,
+        disabled,
+        isHoverable,
+        short,
+        isCompact = false,
+        // isFocused = false,
+        isIntervalsHidden = false,
+        isCompareHidden = false,
+        hideArrows = false,
+        isOptionsRight,
+        limitRange,
+        isUseAbs,
+        absTooltip,
+    } = props;
+
+    const actualValues = getActualDateRange(value);
+    const { isToggled, toggle, toggleOn, toggleOff } = useToggle(false);
+    const [current, setCurrent] = useState(actualValues?.intervalKey);
+    const [isCompare, setIsCompare] = useState(actualValues?.compare);
+
+    const ref = !isUseAbs ? useClickOutside(toggleOff) : useRef(null);
+    const internalContainerRef = useRef(null);
+    const isEndDateNearFuture = moment(actualValues?.end).isSameOrAfter(moment());
+
+    const handleChange = input => {
+        const newValue = getActualDateRange(input);
+        const formatedValue = {
+            intervalKey: newValue.intervalKey,
+            start: newValue.start ? moment(newValue.start).format('YYYY-MM-DDTHH:mm') : newValue.start,
+            end: newValue.end ? moment(newValue.end).format('YYYY-MM-DDTHH:mm') : newValue.end,
+            ...(newValue.compare ? {compare: newValue.compare} : {}),
+            ...(newValue.startPrevDate ? {startPrevDate: moment(newValue.startPrevDate).format('YYYY-MM-DDTHH:mm')} : {}),
+            ...(newValue.endPrevDate ? {endPrevDate: moment(newValue.endPrevDate).format('YYYY-MM-DDTHH:mm')} : {}),
+        };
+
+        onChange(formatedValue);
+        return formatedValue;
+    };
+
+    const Range = () => {
+        const  SYMBOLS_QUANTITY_IF_TIME_ADDED = 13;
+        const { start, end } = actualValues;
+        if (!start || !end) return null;
+
+        const startTime = moment(start).format('HH:mm');
+        const endTime = moment(end).format('HH:mm');
+
+        const firstPart = `${moment(start).format('ll')} ${startTime !== '00:00' ? `(${startTime})` : ''}`;
+        const secondPart = `${(endTime !== '00:00' ? moment(end) : moment(end).subtract(1, 'days')).format('ll')} ${
+            endTime !== '00:00' ? `(${endTime})` : ''
+        }`;
+
+        const getClasses = base => cn('date-range-input__range-text', {
+            'date-range-input__range-text_little': base.length > SYMBOLS_QUANTITY_IF_TIME_ADDED
+        });
+
+        return (
+            <>
+                <span className={getClasses(firstPart)}>
+                    {firstPart}
+                    {endTime === '00:00' && moment(end).isSame(moment(start).add(1, 'days'), 'day') ? '' : ` - `}
+                </span>
+                {endTime === '00:00' && moment(end).isSame(moment(start).add(1, 'days'), 'day')
+                    ? null
+                    :<span className={getClasses(secondPart)}>{secondPart}</span>
 
-    return (
-      <>
-        <span className={getClasses(firstPart)}>
-          {firstPart}
-          {endTime === '00:00' && moment(end).isSame(moment(start).add(1, 'days'), 'day') ? '' : ` - `}
-        </span>
-        {endTime === '00:00' && moment(end).isSame(moment(start).add(1, 'days'), 'day') ? null : (
-          <span className={getClasses(secondPart)}>{secondPart}</span>
-        )}
-      </>
-    );
-  };
-
-  const slideInterval = (direction = 'forward') => {
-    const { start, end } = actualValues;
-    const intervalHoursCount = moment(end).diff(start, 'hours');
-    let newEnd;
-    let newStart;
-    const endHours = moment(end).hours();
-    const startHours = moment(start).hours();
-    if (direction === 'forward') {
-      newStart = moment(end)
-        .add(endHours === 0 ? 0 : 1, 'day')
-        .hours(startHours)
-        .toDate();
-      newEnd = moment(newStart).add(intervalHoursCount, 'hours');
-    } else {
-      newEnd = moment(start)
-        .subtract(endHours === 0 ? 0 : 1, 'day')
-        .hours(endHours)
-        .toDate();
-      newStart = moment(newEnd).subtract(intervalHoursCount, 'hours');
+                }
+            </>
+        )
     }
-    const startPrevDate = moment(newStart).subtract(intervalHoursCount, 'hours').subtract(1, 'seconds');
-    const endPrevDate = moment(newEnd).subtract(1, 'seconds');
-    onChange({
-      ...value,
-      intervalKey: getActualDateRange({
-        start: newStart,
-        end: newEnd
-      })?.intervalKey,
-      start: newStart,
-      end: newEnd,
-      startPrevDate,
-      endPrevDate
-    });
-  };
-
-  const handleArrowClick = type => {
-    slideInterval(type === 'right' ? 'forward' : 'back');
-    toggleOff();
-  };
-
-  const absData = useMemo(
-    () => ({
-      body: OpenedPart,
-      props: {
-        ...props,
-        key: `${actualValues.start}-${actualValues.end}-${actualValues.intervalKey}-${current}-${isCompare}`,
-        actualValues,
-        current,
-        setCurrent,
-        isCompare,
-        setIsCompare,
-        toggleOff,
-        onChange
-      },
-      clickOutsideCallback: () => toggleOff(),
-      top: internalContainerRef.current?.getBoundingClientRect()?.bottom || 0,
-      left: internalContainerRef.current?.getBoundingClientRect()?.left || 0
-    }),
-    [isToggled, value, actualValues, current, isCompare]
-  );
-
-  useEffect(() => {
-    if (current && isUseAbs && absTooltip) onChange(current, 'absTooltip/props/current');
-  }, [current]);
-
-  useEffect(() => {
-    if (isUseAbs) onChange(isToggled ? absData : null, 'absTooltip');
-  }, [isToggled]);
-
-  return (
-    <div
-      ref={internalContainerRef}
-      className={cn('date-range-input', className, {
-        'date-range-input_compact': isCompact,
-        'date-range-input_hide-arrows': hideArrows,
-        'date-range-input_focused': isToggled,
-        'date-range-input_error': error,
-        'date-range-input_disabled': disabled
-      })}
-    >
-      <span className="date-range-input__label">{label}</span>
-      <div className="date-range-input__wraper" ref={ref} onMouseEnter={isHoverable && toggleOn} onMouseLeave={isHoverable && toggleOff}>
+
+    const slideInterval = (direction = 'forward') => {
+        const { start, end } = actualValues;
+        const intervalHoursCount = moment(end).diff(start, 'hours');
+        let newEnd, newStart;
+        const endHours = moment(end).hours();
+        const startHours = moment(start).hours();
+        if (direction === 'forward') {
+            newStart = moment(end)
+                .add(endHours === 0 ? 0 : 1, 'day')
+                .hours(startHours)
+                .toDate();
+            newEnd = moment(newStart).add(intervalHoursCount, 'hours');
+        } else {
+            newEnd = moment(start)
+                .subtract(endHours === 0 ? 0 : 1, 'day')
+                .hours(endHours)
+                .toDate();
+            newStart = moment(newEnd).subtract(intervalHoursCount, 'hours');
+        }
+        const startPrevDate = moment(newStart).subtract(intervalHoursCount, 'hours').subtract(1, 'seconds');
+        const endPrevDate = moment(newEnd).subtract(1, 'seconds');
+        handleChange({
+            ...value,
+            intervalKey: getActualDateRange({
+                start: newStart,
+                end: newEnd,
+            })?.intervalKey,
+            start: newStart,
+            end: newEnd,
+            startPrevDate,
+            endPrevDate,
+        });
+    };
+
+    const handleArrowClick = type => {
+        slideInterval(type === 'right' ? 'forward' : 'back');
+        toggleOff();
+    };
+
+    // const absData = useMemo(
+    //     () => ({
+    //         body: OpenedPart,
+    //         props: {
+    //             ...props,
+    //             key: `${actualValues.start}-${actualValues.end}-${actualValues.intervalKey}-${current}-${isCompare}`,
+    //             actualValues,
+    //             current,
+    //             setCurrent,
+    //             isCompare,
+    //             setIsCompare,
+    //             toggleOff,
+    //             onChange,
+    //         },
+    //         clickOutsideCallback: () => toggleOff(),
+    //         top: internalContainerRef.current?.getBoundingClientRect()?.bottom || 0,
+    //         left: internalContainerRef.current?.getBoundingClientRect()?.left || 0,
+    //     }),
+    //     [isToggled, value, actualValues, current, isCompare],
+    // );
+
+    // useEffect(() => {
+    //     if (current && isUseAbs && absTooltip) onChange(current, 'absTooltip/props/current');
+    // }, [current]);
+
+    // useEffect(() => {
+    //     if (isUseAbs) onChange(isToggled ? absData : null, 'absTooltip');
+    // }, [isToggled]);
+
+    return (
         <div
-          className={cn('date-range-input__absolut-wraper', {
-            'date-range-input__absolut-wraper_right-position': isOptionsRight
-          })}
+            ref={internalContainerRef}
+            className={cn('date-range-input', className, {
+                'date-range-input_compact': isCompact,
+                'date-range-input_hide-arrows': hideArrows,
+                'date-range-input_focused': isToggled,
+                'date-range-input_error': error,
+                'date-range-input_disabled': disabled,
+            })}
         >
-          <div className={cn('date-range-input__static-part')}>
-            <button
-              id={id}
-              className={cn('date-range-input__toggle-button')}
-              // className={cn(
-              //     'date-range-input__toggle-button',
-              //     { 'form-select__input--disabled': disabled },
-              //     { 'form-select__input--opened': isToggled },
-              //     { 'form-select__input--focused': isToggled },
-              //     className,
-              // )}
-              disabled={disabled}
-              onClick={!disabled && !isHoverable ? toggle : undefined}
+            <span className="date-range-input__label" >{label}</span>
+            <div
+                className="date-range-input__wraper"
+                ref={ref}
+                onMouseEnter={isHoverable && toggleOn}
+                onMouseLeave={isHoverable && toggleOff}
             >
-              <div className="date-range-input__interval-key">
-                <span>
-                  {(txt?.labels && txt.labels[actualValues?.intervalKey]) ??
-                    (INTERVALS[actualValues?.intervalKey]?.label || CUSTOM_INTERVAL_KEY_TEXT)}
-                </span>
-                {current !== ALL_TIME_KEY && <span>:</span>}
-              </div>
-              {!isCompact && (
-                <div className={cn('date-range-input__range', {})}>
-                  <Range />
+                <div className={cn('date-range-input__absolut-wraper', {
+                    'date-range-input__absolut-wraper_right-position': isOptionsRight,
+                })}>
+                    <div className={cn('date-range-input__static-part')}>
+                        <button
+                            id={id}
+                            className={cn('date-range-input__toggle-button')}
+                            // className={cn(
+                            //     'date-range-input__toggle-button',
+                            //     { 'form-select__input--disabled': disabled },
+                            //     { 'form-select__input--opened': isToggled },
+                            //     { 'form-select__input--focused': isToggled },
+                            //     className,
+                            // )}
+                            disabled={disabled}
+                            onClick={!disabled && !isHoverable ? toggle : undefined}
+                        >
+                            <div className="date-range-input__interval-key">
+                                <span>
+                                    {(txt?.labels && txt.labels[actualValues?.intervalKey]) ?? (INTERVALS[actualValues?.intervalKey]?.label || CUSTOM_INTERVAL_KEY_TEXT)}
+                                </span>
+                                {current !== ALL_TIME_KEY && <span>:</span>}
+                            </div>
+                            {!isCompact && <div className={cn('date-range-input__range', {})}><Range /></div>}
+                        </button>
+                        {!isCompact && !hideArrows && (
+                            <div className={cn('date-range-input__arrows-block')}>
+                                <Arrow 
+                                    type="left" 
+                                    className="date-range-input__arrow" 
+                                    onClick={() => handleArrowClick("left")} 
+                                    disabled={disabled || actualValues?.intervalKey === ALL_TIME_KEY} 
+                                />
+                                <Arrow 
+                                    type="right" 
+                                    className="date-range-input__arrow" 
+                                    onClick={() => handleArrowClick("right")} 
+                                    disabled={
+                                        disabled || 
+                                        actualValues?.intervalKey === ALL_TIME_KEY || 
+                                        actualValues?.intervalKey === 'today' || 
+                                        moment(actualValues?.end)
+                                            .add(moment(actualValues?.end).diff(actualValues?.start, 'hours'), 'hours')
+                                            .isAfter(moment().add(1, 'day').startOf('day'))
+                                    }
+                                />
+                            </div>
+                        )}
+                    </div>
+                    {isToggled && !isUseAbs && (
+                        <OpenedPart
+                            {...props}
+                            ref={internalContainerRef}
+                            actualValues={actualValues}
+                            current={current}
+                            setCurrent={setCurrent}
+                            isCompare={isCompare}
+                            setIsCompare={setIsCompare}
+                            toggleOff={toggleOff}
+                            onChange={handleChange}
+                        />
+                    )}
                 </div>
-              )}
-            </button>
-            {!isCompact && !hideArrows && (
-              <div className={cn('date-range-input__arrows-block')}>
-                <Arrow
-                  type="left"
-                  className="date-range-input__arrow"
-                  onClick={() => handleArrowClick('left')}
-                  disabled={disabled || actualValues?.intervalKey === ALL_TIME_KEY}
-                />
-                <Arrow
-                  type="right"
-                  className="date-range-input__arrow"
-                  onClick={() => handleArrowClick('right')}
-                  disabled={
-                    disabled ||
-                    actualValues?.intervalKey === ALL_TIME_KEY ||
-                    actualValues?.intervalKey === 'today' ||
-                    moment(actualValues?.end)
-                      .add(moment(actualValues?.end).diff(actualValues?.start, 'hours'), 'hours')
-                      .isAfter(moment().add(1, 'day').startOf('day'))
-                  }
-                />
-              </div>
-            )}
-          </div>
-          {isToggled && !isUseAbs && (
-            <OpenedPart
-              {...props}
-              ref={internalContainerRef}
-              actualValues={actualValues}
-              current={current}
-              setCurrent={setCurrent}
-              isCompare={isCompare}
-              setIsCompare={setIsCompare}
-              toggleOff={toggleOff}
-              onChange={onChange}
-            />
-          )}
+            </div>
+            {error && <span className="date-range-input__error-block">{error}</span>}
         </div>
-      </div>
-      {error && <span className="date-range-input__error-block">{error}</span>}
-    </div>
-  );
+    );
 };
 
 export default React.memo(InputDateRange);

package/src/Atomic/FormElements/InputDateRange/InputDateRange.stories.js

@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
+import React, { /*useEffect,*/ useState } from 'react';
 import InputDateRange from './InputDateRange';
+import Table from '../Table/Table';
 
 global.lng = 'en';
 
@@ -16,18 +17,107 @@ export default {
   }
 };
 
+const tableData = {
+  header: [
+    { id: 1, label: 'state' },
+    { id: 2, label: 'Tags' },
+    { id: 3, label: 'status' },
+    { id: 4, label: 'loanAmountApproved' },
+    { id: 5, label: 'loanAmountRejected' },
+    { id: 6, label: 'approveRate' },
+    { id: 7, label: 'actions', type: 'actions' }
+  ],
+  rows: [
+    {
+      id: 1,
+      link: { label: 'CA', link: '#s' },
+      tags: [{ label: 'Label 1' }],
+      status: { value: '90', status: 'active' },
+      loanAmountApproved: { value: '$70,000' },
+      loanAmountRejected: { value: '$30,000' },
+      approveRate: { value: '70%' }
+    },
+    {
+      id: 2,
+      link: { label: 'NY', link: '#s' },
+      advancedTags: [
+        {
+          labelLeft: 'home',
+          labelRight: 'hoods',
+          active: 3,
+          pause: 1,
+          merchants: 5
+        },
+        {
+          labelRight: 'jewelry',
+          active: 3,
+          pause: 1,
+          merchants: 5
+        },
+        {
+          labelLeft: 'home',
+          labelRight: 'improvement',
+          active: 0,
+          pause: 0,
+          warnLeft: true,
+          warnLeftMsg: 'landerNotIncluded',
+          warnRightMsg: 'noMerchants'
+        },
+        {
+          labelLeft: 'home',
+          labelRight: 'hoods',
+          active: 3,
+          pause: 1,
+          merchants: 5
+        },
+        {
+          labelRight: 'jewelry',
+          active: 3,
+          pause: 1,
+          merchants: 5
+        }
+      ],
+      status: { label: 'Active', className: 'color--green-haze' },
+      loanAmountApproved: { value: '$3,000' },
+      loanAmountRejected: { value: '$7,000' },
+      approveRate: { value: '30%' }
+    },
+    {
+      id: 3,
+      link: { label: 'NH', link: '#s' },
+      tags: [{ label: 'Label 1' }, { label: 'Label 2' }, { label: 'Label 3' }],
+      status: { status: 'error' },
+      loanAmountApproved: { value: '$70,000' },
+      loanAmountRejected: { value: '$30,000' },
+      approveRate: { value: '70%' }
+    }
+  ]
+};
+
 const Template = args => {
-  const { dateRange, ...restOfProps } = args;
-  const [value, setValue] = useState(dateRange);
-
-  // return <InputDateRange {...restOfProps} value={value} onChange={setValue} />;
-  return (
-    <div>
-      <div className="mb20">
-        <InputDateRange {...restOfProps} value={value} onChange={setValue} />
+    const { dateRange, ...restOfProps } = args;
+    const [value, setValue] = useState(dateRange);
+
+    const [state, setState] = useState(tableData);
+
+    const rowsWithActions = state?.rows?.map(row => ({
+      ...row,
+      actions: row.isDeleted ? [{ type: 'undo' }] : [{ type: 'download' }, { type: 'edit' }, { type: 'delete' }]
+    }));
+
+    // useEffect(() => console.log(value), [value]);
+
+    // return <InputDateRange {...restOfProps} value={value} onChange={setValue} />;
+    return (
+      <div>
+        <div className="mb20">
+          <InputDateRange {...restOfProps} value={value} onChange={setValue} />
+        </div>
+        <div>
+          <Table header={state.header} rows={rowsWithActions} onChange={setState} />
+        </div>
       </div>
-    </div>
-  );
+    );
 };
 
 export const InputDateRangeTemplate = Template.bind({});

package/src/Atomic/FormElements/InputDateRange/dependencies.js

@@ -130,6 +130,14 @@ export const getActualDateRange = inputDateRange => {
         }
         return null;
     })();
+    if (actualIntervalKey === ALL_TIME_KEY) return {
+        intervalKey: ALL_TIME_KEY,
+        start: null,
+        end: null,
+        compare: inputDateRange.compare,
+        startPrevDate: null,
+        endPrevDate:null
+    };
     const actualValues = {
         // intervalKey: inputDateRange.intervalKey || customIntervalKey,
         intervalKey: actualIntervalKey || CUSTOM_INTERVAL_KEY,