@mailstep/design-system 0.8.25 → 0.8.26-beta.0

package/ui/Blocks/Scheduler/components/TimeSlots/hooks/useRangeSelection.js

@@ -1,47 +0,0 @@
-import { useCallback, useState } from 'react';
-import { convertIndexToISOString } from '../../../utils/convertIndexToISOString';
-export var useRangeSelection = function (_a) {
-    var handleSelectTimeSlot = _a.handleSelectTimeSlot, date = _a.date;
-    var _b = useState(false), isSelecting = _b[0], setIsSelecting = _b[1];
-    var _c = useState([]), selectionRange = _c[0], setSelectionRange = _c[1];
-    var _d = useState(null), selectedGroup = _d[0], setSelectedGroup = _d[1];
-    var handleMouseDown = useCallback(function (index, groupId) { return function () {
-        setSelectionRange([index]);
-        setIsSelecting(true);
-        setSelectedGroup(groupId);
-    }; }, []);
-    var handleMouseOver = useCallback(function (index) { return function () {
-        if (!isSelecting)
-            return;
-        setSelectionRange(function (prevRange) {
-            var start = prevRange[0];
-            var end = prevRange.at(-1);
-            if (end && (end < index ? end + 1 !== index : end - 1 !== index)) {
-                return [index];
-            }
-            return Array.from({ length: Math.abs(index - start) + 1 }, function (_, i) { return (start < index ? start + i : start - i); });
-        });
-    }; }, [isSelecting]);
-    var handleMouseUp = useCallback(function () {
-        var _a;
-        setIsSelecting(false);
-        if (selectedGroup && (selectionRange === null || selectionRange === void 0 ? void 0 : selectionRange.length)) {
-            var start = selectionRange[0];
-            var end = ((_a = selectionRange.at(-1)) !== null && _a !== void 0 ? _a : 0) + 1;
-            handleSelectTimeSlot === null || handleSelectTimeSlot === void 0 ? void 0 : handleSelectTimeSlot({
-                groupId: selectedGroup,
-                from: convertIndexToISOString(start, date),
-                to: convertIndexToISOString(end, date)
-            });
-        }
-        setSelectedGroup(null);
-        setSelectionRange([]);
-    }, [date, handleSelectTimeSlot, selectedGroup, selectionRange]);
-    var isSlotSelected = useCallback(function (index, groupId) { return groupId === selectedGroup && selectionRange.includes(index); }, [selectionRange, selectedGroup]);
-    return {
-        handleMouseDown: handleMouseDown,
-        handleMouseOver: handleMouseOver,
-        handleMouseUp: handleMouseUp,
-        isSlotSelected: isSlotSelected
-    };
-};

package/ui/Blocks/Scheduler/components/TimeSlots/hooks/useScroll.js

@@ -1,16 +0,0 @@
-import { useEffect, useRef } from 'react';
-export var useScroll = function () {
-    var containerRef = useRef(null);
-    useEffect(function () {
-        var _a;
-        var now = new Date();
-        var hours = String(now.getHours()).padStart(2, '0');
-        var timeElement = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-time=\"".concat(hours, ":00\"]"));
-        if (timeElement) {
-            timeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        }
-    }, []);
-    return {
-        containerRef: containerRef
-    };
-};

package/ui/Blocks/Scheduler/components/TimeSlots/index.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isActiveTime } from '../../utils/isActiveTime';
-import { BookedTimeSlots } from '../BookedTimeSlots';
-import { CurrentTimeMarker } from '../CurrentTimeMarker';
-import { useRangeSelection } from './hooks/useRangeSelection';
-import { useScroll } from './hooks/useScroll';
-import { EmptyTimeSlot, TimeInterval, TimeRow, TimeSlotsContainer } from './styles';
-export var TimeSlots = function (_a) {
-    var timeArray = _a.timeArray, groups = _a.groups, activeHours = _a.activeHours, timeSlots = _a.timeSlots, handleSelectTimeSlot = _a.handleSelectTimeSlot, handleTimeSlotClick = _a.handleTimeSlotClick, isTodayDate = _a.isTodayDate, date = _a.date, timeSlotDefinitions = _a.timeSlotDefinitions;
-    var containerRef = useScroll().containerRef;
-    var _b = useRangeSelection({ handleSelectTimeSlot: handleSelectTimeSlot, date: date }), handleMouseUp = _b.handleMouseUp, handleMouseDown = _b.handleMouseDown, handleMouseOver = _b.handleMouseOver, isSlotSelected = _b.isSlotSelected;
-    return (_jsxs(TimeSlotsContainer, { ref: containerRef, children: [timeArray.map(function (time, index) {
-                var activeTime = isActiveTime({ activeHours: activeHours, time: time });
-                return (_jsxs(TimeRow, { disabled: !activeTime, "data-time": time, children: [_jsx(TimeInterval, { children: time }), groups === null || groups === void 0 ? void 0 : groups.map(function (group) {
-                            var _a;
-                            var bookedTimeSlots = (_a = timeSlots === null || timeSlots === void 0 ? void 0 : timeSlots["".concat(group.id, "-").concat(time)]) !== null && _a !== void 0 ? _a : [];
-                            var canSelectSlot = !bookedTimeSlots.length && activeTime;
-                            return (_jsx(EmptyTimeSlot, { groupsCount: groups === null || groups === void 0 ? void 0 : groups.length, activeTime: activeTime, isSlotSelected: canSelectSlot && isSlotSelected(index, group.id), onMouseDown: canSelectSlot ? handleMouseDown(index, group.id) : undefined, onMouseOver: canSelectSlot ? handleMouseOver(index) : undefined, onMouseUp: canSelectSlot ? handleMouseUp : undefined, children: _jsx(BookedTimeSlots, { bookedTimeSlots: bookedTimeSlots, timeSlotDefinitions: timeSlotDefinitions, time: time, handleTimeSlotClick: handleTimeSlotClick }) }, group.id));
-                        })] }, time));
-            }), isTodayDate && _jsx(CurrentTimeMarker, {})] }));
-};

package/ui/Blocks/Scheduler/components/TimeSlots/styles.js

@@ -1,23 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { minuteHeight, stepInMinutes, timeIntervalWidth } from '../../utils/constants';
-import styled, { th } from '@xstyled/styled-components';
-export var TimeSlotsContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  overflow-y: auto;\n  flex-grow: 1;\n  width: fit-content;\n\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  scroll-behavior: smooth;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  position: relative;\n  overflow-y: auto;\n  flex-grow: 1;\n  width: fit-content;\n\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  scroll-behavior: smooth;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])));
-export var TimeRow = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  width: fit-content;\n  border-bottom: 1px solid ", ";\n"], ["\n  background-color: ", ";\n  display: flex;\n  width: fit-content;\n  border-bottom: 1px solid ", ";\n"])), function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? th.color('lightGray7') : 'white');
-}, th.color('lightGray6'));
-export var EmptyTimeSlot = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: ", "px;\n  flex-shrink: 0;\n  min-width: 350px;\n  box-sizing: border-box;\n  position: relative;\n  background-color: ", ";\n  cursor: ", ";\n  border-right: 1px solid ", ";\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  height: ", "px;\n  flex-shrink: 0;\n  min-width: 350px;\n  box-sizing: border-box;\n  position: relative;\n  background-color: ", ";\n  cursor: ", ";\n  border-right: 1px solid ", ";\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), minuteHeight * stepInMinutes, function (_a) {
-    var isSlotSelected = _a.isSlotSelected;
-    return (isSlotSelected ? th.color('blue20') : '');
-}, function (_a) {
-    var isSlotSelected = _a.isSlotSelected, activeTime = _a.activeTime;
-    return (isSlotSelected || !activeTime ? 'default' : 'pointer');
-}, th.color('lightGray6'), function (_a) {
-    var isSlotSelected = _a.isSlotSelected, activeTime = _a.activeTime;
-    return (!isSlotSelected && activeTime ? th.color('blue10') : '');
-});
-export var TimeInterval = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 12px;\n  font-weight: 500;\n  height: ", "px;\n  width: ", "px;\n  border-right: 1px solid ", ";\n  padding: 10px;\n  min-width: ", "px;\n"], ["\n  font-size: 12px;\n  font-weight: 500;\n  height: ", "px;\n  width: ", "px;\n  border-right: 1px solid ", ";\n  padding: 10px;\n  min-width: ", "px;\n"])), minuteHeight * stepInMinutes, timeIntervalWidth, th.color('lightGray6'), timeIntervalWidth);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Blocks/Scheduler/hooks/useChangeDate.js

@@ -1,34 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { isToday } from '../utils/isToday';
-export var useChangeDate = function (_a) {
-    var closeDatePicker = _a.closeDatePicker, handleReloadTimeSlots = _a.handleReloadTimeSlots;
-    var _b = useState(new Date()), date = _b[0], setDate = _b[1];
-    var handlePrevDay = useCallback(function () {
-        var newDate = new Date(date);
-        newDate.setDate(date.getDate() - 1);
-        setDate(newDate);
-    }, [date]);
-    var handleNextDay = useCallback(function () {
-        var newDate = new Date(date);
-        newDate.setDate(date.getDate() + 1);
-        setDate(newDate);
-    }, [date]);
-    var handleChangeDate = useCallback(function (dateValue) {
-        var date = new Date(dateValue);
-        date && setDate(date);
-        closeDatePicker();
-    }, []);
-    var isTodayDate = isToday(date);
-    useEffect(function () {
-        if (!handleReloadTimeSlots)
-            return;
-        handleReloadTimeSlots(date).catch(console.error);
-    }, [date]);
-    return {
-        handlePrevDay: handlePrevDay,
-        handleNextDay: handleNextDay,
-        handleChangeDate: handleChangeDate,
-        isTodayDate: isTodayDate,
-        date: date
-    };
-};

package/ui/Blocks/Scheduler/index.js

@@ -1 +0,0 @@
-export { Scheduler as default } from './Scheduler';

package/ui/Blocks/Scheduler/stories/Scheduler.stories.js

@@ -1,114 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Pallet } from '../../../Elements/Icon';
-import { LinguiContainer } from '../../../utils/LinguiContainer';
-import { Scheduler } from '../Scheduler';
-import { x } from '@xstyled/styled-components';
-var groups = [
-    { id: 'group1', name: 'Inbound DEA', color: '#DCEFFF' },
-    { id: 'group2', name: 'Aktin', color: '#FFEBE6' },
-    { id: 'group3', name: 'Top4Sport', color: '#F0EDFF' },
-    { id: 'group4', name: 'Wendys', color: '#DEFBE6' }
-];
-var activeHours = {
-    start: '07:00',
-    end: '19:00'
-};
-var timeSlots = [
-    {
-        id: '1',
-        from: '2025-02-06T07:30:00Z',
-        to: '2025-02-06T08:00:00Z',
-        groupId: 'group1',
-        count: 2,
-        organisation: 'Deagostiny',
-        carrier: 'Česká pošta'
-    },
-    {
-        id: '2',
-        from: '2025-02-06T14:35:00Z',
-        to: '2025-02-06T16:30:00Z',
-        groupId: 'group1',
-        count: 5,
-        organisation: 'Wendys',
-        carrier: 'Česká pošta'
-    },
-    {
-        id: '3',
-        from: '2025-02-06T09:40:00Z',
-        to: '2025-02-06T11:45:00Z',
-        groupId: 'group2',
-        count: 1,
-        organisation: 'Deagostiny',
-        carrier: 'Česká pošta'
-    },
-    {
-        id: '4',
-        from: '2025-02-06T12:05:00Z',
-        to: '2025-02-06T15:30:00Z',
-        groupId: 'group2',
-        count: 2,
-        organisation: 'Top4Sport',
-        carrier: 'Česká pošta'
-    },
-    {
-        id: '5',
-        from: '2025-02-06T08:15:00Z',
-        to: '2025-02-06T09:45:00Z',
-        groupId: 'group3',
-        count: 2,
-        organisation: 'Aktin',
-        carrier: 'Česká pošta'
-    },
-    {
-        id: '6',
-        from: '2025-02-06T11:30:00Z',
-        to: '2025-02-06T13:15:00Z',
-        groupId: 'group3',
-        count: 2,
-        organisation: 'Wendys',
-        carrier: 'DPL'
-    },
-    {
-        id: '7',
-        from: '2025-02-06T07:30:00Z',
-        to: '2025-02-06T09:15:00Z',
-        groupId: 'group4',
-        count: 2,
-        organisation: 'Top4Sport',
-        carrier: 'DPL'
-    },
-    {
-        id: '8',
-        from: '2025-02-06T09:30:00Z',
-        to: '2025-02-06T11:30:00Z',
-        groupId: 'group4',
-        count: 2,
-        organisation: 'Aktin',
-        carrier: 'DPL'
-    },
-    {
-        id: '9',
-        from: '2025-02-06T13:30:00Z',
-        to: '2025-02-06T15:00:00Z',
-        groupId: 'group4',
-        count: 2,
-        organisation: 'Wendys',
-        carrier: 'DPL'
-    }
-];
-var timeSlotDefinitions = {
-    count: 'count',
-    icon: _jsx(Pallet, { height: "22px", width: "22px" }),
-    data: ['organisation', 'carrier']
-};
-var handleSelectTimeSlot = function (data) {
-    console.log(data);
-};
-var meta = {
-    title: 'Blocks/Scheduler',
-    tags: ['autodocs']
-};
-export default meta;
-export var Default = function () {
-    return (_jsx(LinguiContainer, { children: _jsx(x.div, { display: "flex", h: "700px", overflow: "hidden", children: _jsx(Scheduler, { groups: groups, activeHours: activeHours, data: timeSlots, handleSelectTimeSlot: handleSelectTimeSlot, timeSlotDefinitions: timeSlotDefinitions }) }) }));
-};

package/ui/Blocks/Scheduler/styles.js

@@ -1,8 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled, { th } from '@xstyled/styled-components';
-export var Block = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: white;\n  color: ", ";\n  overflow-x: auto;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid ", ";\n  user-select: none;\n  width: fit-content;\n  height: 100%;\n}\n"], ["\n  background-color: white;\n  color: ", ";\n  overflow-x: auto;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid ", ";\n  user-select: none;\n  width: fit-content;\n  height: 100%;\n}\n"])), th.color('typoPrimary'), th.color('lightGray6'));
-export var Container = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  overflow-y: hidden;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  overflow-y: hidden;\n  width: 100%;\n"])));
-var templateObject_1, templateObject_2;

package/ui/Blocks/Scheduler/types.js

@@ -1 +0,0 @@
-export {};

package/ui/Blocks/Scheduler/utils/constants.js

@@ -1,6 +0,0 @@
-export var groupsHeight = 38;
-export var timeIntervalWidth = 53;
-export var minuteHeight = 5;
-export var stepInMinutes = 15;
-export var currentTimeHeight = 22;
-export var currentTimeWidth = 35;

package/ui/Blocks/Scheduler/utils/convertDateToTime.js

@@ -1,5 +0,0 @@
-export var convertDateToTime = function (date) {
-    var hours = String(date.getHours()).padStart(2, '0');
-    var minutes = String(date.getMinutes()).padStart(2, '0');
-    return "".concat(hours, ":").concat(minutes);
-};

package/ui/Blocks/Scheduler/utils/convertIndexToISOString.js

@@ -1,8 +0,0 @@
-import { stepInMinutes } from './constants';
-export var convertIndexToISOString = function (index, date) {
-    var totalMinutes = stepInMinutes * index;
-    var hours = Math.floor(totalMinutes / 60);
-    var minutes = totalMinutes % 60;
-    date.setHours(hours, minutes, 0, 0);
-    return date.toISOString();
-};

package/ui/Blocks/Scheduler/utils/convertMinutesToDuration.js

@@ -1,11 +0,0 @@
-export var convertMinutesToDuration = function (minutes) {
-    var hours = Math.floor(minutes / 60);
-    var minutesLeft = minutes % 60;
-    if (!hours) {
-        return "".concat(minutesLeft, " min");
-    }
-    if (!minutesLeft) {
-        return "".concat(hours, "h");
-    }
-    return "".concat(hours, "h ").concat(minutesLeft, "m");
-};

package/ui/Blocks/Scheduler/utils/formatDate.js

@@ -1,4 +0,0 @@
-export var formatDate = function (date, locale) {
-    if (locale === void 0) { locale = 'en-GB'; }
-    return date.toLocaleDateString(locale, { day: '2-digit', month: 'long', year: 'numeric' });
-};

package/ui/Blocks/Scheduler/utils/generateTimeArray.js

@@ -1,16 +0,0 @@
-import { stepInMinutes } from './constants';
-export var generateTimeArray = function () {
-    var times = [];
-    var hours = 0;
-    var minutes = 0;
-    while (hours < 24 || (hours === 24 && minutes === 0)) {
-        var time = "".concat(String(hours).padStart(2, '0'), ":").concat(String(minutes).padStart(2, '0'));
-        times.push(time);
-        minutes += stepInMinutes;
-        if (minutes === 60) {
-            minutes = 0;
-            hours += 1;
-        }
-    }
-    return times;
-};

package/ui/Blocks/Scheduler/utils/getClosestStep.js

@@ -1,9 +0,0 @@
-import { stepInMinutes } from './constants';
-import { getMinutesFromString } from './getMinutesFromString';
-export var getClosestStep = function (date) {
-    var totalMinutes = getMinutesFromString(date);
-    var closestStep = Math.round(totalMinutes / stepInMinutes) * stepInMinutes;
-    var hours = Math.floor(closestStep / 60);
-    var minutes = closestStep % 60;
-    return "".concat(String(hours).padStart(2, '0'), ":").concat(String(minutes).padStart(2, '0'));
-};

package/ui/Blocks/Scheduler/utils/getMinutesFromString.js

@@ -1,3 +0,0 @@
-import { convertDateToTime } from './convertDateToTime';
-import { getMinutesFromTime } from './getMinutesFromTime';
-export var getMinutesFromString = function (date) { return getMinutesFromTime(convertDateToTime(new Date(date))); };

package/ui/Blocks/Scheduler/utils/getMinutesFromTime.js

@@ -1,4 +0,0 @@
-export var getMinutesFromTime = function (time) {
-    var _a = time.split(':').map(Number), hours = _a[0], minutes = _a[1];
-    return hours * 60 + minutes;
-};

package/ui/Blocks/Scheduler/utils/isActiveTime.js

@@ -1,10 +0,0 @@
-import { getMinutesFromTime } from './getMinutesFromTime';
-export var isActiveTime = function (_a) {
-    var activeHours = _a.activeHours, time = _a.time;
-    if (!activeHours)
-        return true;
-    var startMinutes = getMinutesFromTime(activeHours.start);
-    var endMinutes = getMinutesFromTime(activeHours.end);
-    var timeInMinutes = getMinutesFromTime(time);
-    return timeInMinutes >= startMinutes && timeInMinutes <= endMinutes;
-};

package/ui/Blocks/Scheduler/utils/isToday.js

@@ -1,4 +0,0 @@
-export var isToday = function (date) {
-    var today = new Date();
-    return date.getDate() === today.getDate() && date.getMonth() === today.getMonth() && date.getFullYear() === today.getFullYear();
-};

package/ui/Blocks/SideMenu/MenuItem.js

@@ -1,54 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useCallback, useMemo, useRef } from 'react';
-import { matchPath } from 'react-router';
-import Icon from '../../Elements/Icon/Icon';
-import { Paragraph3, Paragraph5 } from '../../Elements/Typography/Typography';
-import SubitemTooltip from './components/SubitemTooltip';
-import { useLeftMenuContext } from './context/useLeftMenuContext';
-import useOutSideHover from './hooks/useOutsideHover';
-import { ItemLinkWrap, ItemIcon, ItemDropdownArrow, SubItemsWrap, OverflowWithEllipsis, MenuItemContainer, ItemLabel, ItemsSeparator } from './styles';
-var removeOptionalEnd = /\?$/;
-var MenuItem = function (_a) {
-    var icon = _a.icon, title = _a.title, _b = _a.link, link = _b === void 0 ? '' : _b, items = _a.items, id = _a.id, isSubitem = _a.isSubitem, isCompact = _a.isCompact, _c = _a.lightMode, lightMode = _c === void 0 ? false : _c, _d = _a.separator, separator = _d === void 0 ? false : _d, isLeftMenuOpen = _a.isLeftMenuOpen, onCloseLeftMenu = _a.onCloseLeftMenu;
-    var hasChildren = useMemo(function () { return items && (items === null || items === void 0 ? void 0 : items.length) > 0; }, [items]);
-    var _e = useLeftMenuContext(), expandedItem = _e.expandedItem, expandItem = _e.expandItem;
-    var isExpanded = expandedItem === id;
-    var toggleChildren = useCallback(function () {
-        hasChildren && expandItem(isExpanded ? null : id !== null && id !== void 0 ? id : null);
-        !hasChildren && !lightMode && onCloseLeftMenu && onCloseLeftMenu();
-    }, [hasChildren, expandItem, isExpanded, id, lightMode, onCloseLeftMenu]);
-    var linkProps = useMemo(function () { return (link.startsWith('https://') ? { to: { pathname: link }, target: '_blank' } : { to: link }); }, [link]);
-    var Title = isCompact ? Paragraph5 : Paragraph3;
-    var listExpandedItems = isExpanded && !isCompact;
-    var parentRef = useRef(null);
-    var _f = useOutSideHover({ parentRef: parentRef }), childRef = _f.ref, isHovering = _f.isHovering, handleMouseOver = _f.handleMouseOver;
-    var itemLinkWrapClassName = !isSubitem ? 'toplevel' : 'nestedlevel';
-    if (isExpanded) {
-        itemLinkWrapClassName += ' expanded';
-    }
-    if (separator) {
-        itemLinkWrapClassName += ' separator';
-    }
-    var isActive = useCallback(function (match, location) {
-        var childSelected = !!(items === null || items === void 0 ? void 0 : items.find(function (item) { var _a; return ((_a = item.link) === null || _a === void 0 ? void 0 : _a.replace(removeOptionalEnd, '')) === location.pathname; }));
-        var isActive = !!matchPath(location.pathname, { path: match === null || match === void 0 ? void 0 : match.path });
-        // partial match helps to match paths with parameters which are not matched by matchPath above
-        var partialMatch = location.pathname.startsWith(link.slice(0, -1)) && location.pathname.includes('/settings/');
-        return isActive || childSelected || partialMatch;
-    }, [items, link]);
-    return (_jsxs(_Fragment, { children: [separator && _jsx(ItemsSeparator, {}), _jsxs(MenuItemContainer, { ref: parentRef, "$isCompact": isCompact, "$lightMode": lightMode, hasChildren: hasChildren, isHovering: isHovering, children: [_jsxs(ItemLinkWrap, __assign({}, linkProps, { onMouseOver: handleMouseOver, exact: true, activeClassName: hasChildren ? 'selected' : undefined, onClick: toggleChildren, "$isCompact": isCompact, className: itemLinkWrapClassName, 
-                        // @ts-expect-error
-                        isActive: isActive, "$lightMode": lightMode, children: [_jsxs(ItemLabel, { "$isCompact": isCompact, isSubitem: isSubitem, children: [!isSubitem && icon && (_jsx(ItemIcon, { className: "mainIcon", "$isCompact": isCompact, children: typeof icon === 'string' ? _jsx(Icon, { icon: icon, fill: "none" }) : icon })), _jsx(Title, { variant: "semiBold", mt: 0, mb: 0, textAlign: isCompact ? 'center' : 'left', children: _jsx(OverflowWithEllipsis, { children: title }) })] }), !isCompact && hasChildren && _jsx(ItemDropdownArrow, { icon: "goDown", "$lightMode": lightMode })] })), isHovering && isCompact && hasChildren && !listExpandedItems && (_jsx(SubitemTooltip, { items: items, childRef: childRef, parentRef: parentRef, isLeftMenuOpen: isLeftMenuOpen, onCloseLeftMenu: onCloseLeftMenu, lightMode: lightMode }))] }), hasChildren && listExpandedItems && (_jsx(SubItemsWrap, { children: items === null || items === void 0 ? void 0 : items.map(function (item, index) { return (_jsx(MenuItem, __assign({ isCompact: isCompact, lightMode: lightMode }, item, { onCloseLeftMenu: onCloseLeftMenu, isSubitem: true }), "".concat(index))); }) }))] }));
-};
-export default memo(MenuItem);

package/ui/Blocks/SideMenu/SideMenu.js

@@ -1,27 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useClickOutside } from '../Modal/hooks/useClickOutside';
-import FooterRow from './components/Footer';
-import { LeftMenuProvider } from './context/LeftMenuContext';
-import MenuItem from './MenuItem';
-import { TopLevelWrap, ScrollWrap, BodyWrap, Overlay, Container } from './styles';
-var SideMenu = function (_a) {
-    var menuItems = _a.menuItems, isCompact = _a.isCompact, setIsCompact = _a.setIsCompact, isLeftMenuOpen = _a.isLeftMenuOpen, onCloseLeftMenu = _a.onCloseLeftMenu, _b = _a.variant, variant = _b === void 0 ? 'dark' : _b, children = _a.children;
-    var lightMode = variant === 'light';
-    var pickerRef = useClickOutside({ onClose: onCloseLeftMenu });
-    return (_jsx(LeftMenuProvider, { children: _jsxs(Container, { isLeftMenuOpen: isLeftMenuOpen, children: [_jsxs(TopLevelWrap, { isCompact: isCompact, isLeftMenuOpen: isLeftMenuOpen, ref: pickerRef, lightMode: lightMode, children: [_jsx(ScrollWrap, { children: _jsxs(BodyWrap, { isCompact: isCompact, children: [menuItems.map(function (item, index) {
-                                        var _a;
-                                        return (_jsx(MenuItem, __assign({ isCompact: isCompact, isLeftMenuOpen: isLeftMenuOpen, onCloseLeftMenu: onCloseLeftMenu, lightMode: lightMode, separator: !!item.separator }, item), "".concat((_a = item.id) !== null && _a !== void 0 ? _a : item.title, "-").concat(index)));
-                                    }), children] }) }), _jsx(FooterRow, { isCompact: isCompact, setIsCompact: setIsCompact, lightMode: lightMode })] }), _jsx(Overlay, {})] }) }));
-};
-export default SideMenu;

package/ui/Blocks/SideMenu/components/Footer.js

@@ -1,28 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import { MenuItems } from '../../../Elements/Icon/icons/MenuItems';
-import { Paragraph4 } from '../../../Elements/Typography';
-import { Trans } from '@lingui/react';
-import styled, { css } from '@xstyled/styled-components';
-import { th } from '@xstyled/system';
-export var FooterWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  height: 24px;\n  width: 100%;\n  margin-bottom: 24px;\n  justify-content: ", ";\n  padding-left: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  height: 24px;\n  width: 100%;\n  margin-bottom: 24px;\n  justify-content: ", ";\n  padding-left: ", ";\n"])), function (props) { return (props.isCompact ? 'center' : 'flex-start'); }, function (props) { return (props.isCompact ? '0' : '22px'); });
-export var SizeToggle = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: none;\n  @media (min-width: 1024px) {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    color: ", ";\n    font-size: 11px;\n    & svg {\n      transform: ", ";\n      ", "\n\n      & > path {\n        stroke: ", ";\n      }\n    }\n  }\n"], ["\n  display: none;\n  @media (min-width: 1024px) {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    color: ", ";\n    font-size: 11px;\n    & svg {\n      transform: ", ";\n      ", "\n\n      & > path {\n        stroke: ", ";\n      }\n    }\n  }\n"])), function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('typoPrimary') : th.color('gray'));
-}, function (props) { return (props.isCompact ? 'rotate(180deg)' : 'rotate(0deg)'); }, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return $lightMode && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          fill: ", ";\n        "], ["\n          fill: ", ";\n        "])), th.color('neutral20'));
-}, th.color('lightGray5'));
-var MenuFooter = function (_a) {
-    var isCompact = _a.isCompact, setIsCompact = _a.setIsCompact, lightMode = _a.lightMode;
-    var toggleIsCompact = useCallback(function () {
-        setIsCompact === null || setIsCompact === void 0 ? void 0 : setIsCompact(!isCompact);
-    }, [setIsCompact, isCompact]);
-    return (_jsx(FooterWrap, { isCompact: isCompact, children: _jsxs(SizeToggle, { onClick: toggleIsCompact, isCompact: isCompact, "$lightMode": lightMode, children: [_jsx(MenuItems, { stroke: "none", width: "24px" }), !isCompact && (_jsx(Paragraph4, { ml: 2, variant: "semiBold", children: _jsx(Trans, { id: "footer.collapse", message: "Collapse" }) }))] }) }));
-};
-export default MenuFooter;
-var templateObject_1, templateObject_2, templateObject_3;

package/ui/Blocks/SideMenu/components/HamburgerMenu.js

@@ -1,23 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from 'styled-components';
-import { HamburgerMenu as HamburgerMenuIcon } from '../../../Elements/Icon/icons/HamburgerMenu';
-import { MobileCancel } from '../../../Elements/Icon/icons/MobileCancel';
-import { css, x, useTheme } from '@xstyled/styled-components';
-import { th } from '@xstyled/system';
-var HamburgerMenuWrapper = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 36px;\n  height: 36px;\n  border-radius: 70px;\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-shadow: ", ";\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", ";\n\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"], ["\n  width: 36px;\n  height: 36px;\n  border-radius: 70px;\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-shadow: ", ";\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", ";\n\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"])), th.color('neutral20'), th.shadow('dropShadow'), function (_a) {
-    var isLeftMenuOpen = _a.isLeftMenuOpen;
-    return isLeftMenuOpen
-        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          position: absolute;\n          left: 92%;\n          top: 7px;\n          z-index: 6;\n        "], ["\n          position: absolute;\n          left: 92%;\n          top: 7px;\n          z-index: 6;\n        "]))) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          & > svg > path {\n            stroke: ", ";\n          }\n        "], ["\n          & > svg > path {\n            stroke: ", ";\n          }\n        "])), th.color('blue2'));
-});
-export var HamburgerMenuButton = function (_a) {
-    var isLeftMenuOpen = _a.isLeftMenuOpen, onClick = _a.onClick;
-    var theme = useTheme();
-    var neutralColor = th.color('neutral20')({ theme: theme });
-    var dispalyedIcon = isLeftMenuOpen ? (_jsx(MobileCancel, { fill: neutralColor })) : (_jsx(HamburgerMenuIcon, { fill: neutralColor, stroke: 'none' }));
-    return (_jsx(HamburgerMenuWrapper, { mr: "8px", onClick: onClick, isLeftMenuOpen: !!isLeftMenuOpen, children: dispalyedIcon }));
-};
-var templateObject_1, templateObject_2, templateObject_3;

package/ui/Blocks/SideMenu/components/SubitemTooltip.js

@@ -1,42 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { Popper } from 'react-popper';
-import styled from 'styled-components';
-import Portal from '../../../Elements/Portal';
-import { H6 } from '../../../Elements/Typography/Typography';
-import { ItemLinkWrap, TooltipWrap, TooltipItemLabel } from '../styles';
-var TooltipItem = function (_a) {
-    var title = _a.title, _b = _a.link, link = _b === void 0 ? '' : _b, lightMode = _a.lightMode;
-    var linkProps = useMemo(function () {
-        return link.startsWith('https://') ? { to: { pathname: link }, target: '_blank' } : { to: link };
-    }, [link]);
-    return (_jsx(ItemLinkWrap, __assign({}, linkProps, { exact: true, "$lightMode": lightMode, children: _jsx(TooltipItemLabel, { children: _jsx(H6, { variant: "medium", children: title }) }) })));
-};
-var PopoverWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 5;\n  display: ", ";\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"], ["\n  z-index: 5;\n  display: ", ";\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"])), function (_a) {
-    var isLeftMenuOpen = _a.isLeftMenuOpen;
-    return (isLeftMenuOpen ? 'block' : 'none');
-});
-var SubitemTooltip = function (_a) {
-    var items = _a.items, childRef = _a.childRef, parentRef = _a.parentRef, isLeftMenuOpen = _a.isLeftMenuOpen, onCloseLeftMenu = _a.onCloseLeftMenu, lightMode = _a.lightMode;
-    return (_jsx(Portal, { children: _jsx(Popper, { innerRef: childRef, referenceElement: parentRef.current, placement: "right-start", children: function (_a) {
-                var ref = _a.ref, style = _a.style;
-                return (_jsx(PopoverWrapper, { ref: ref, style: style, onClick: onCloseLeftMenu, isLeftMenuOpen: isLeftMenuOpen, children: _jsx(TooltipWrap, { "$lightMode": lightMode, children: items === null || items === void 0 ? void 0 : items.map(function (item, index) { return (_jsx(TooltipItem, __assign({}, item, { lightMode: lightMode }), "".concat(index))); }) }) }));
-            } }) }));
-};
-export default SubitemTooltip;
-var templateObject_1;

package/ui/Blocks/SideMenu/context/LeftMenuContext.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useMemo, useState } from 'react';
-export var LeftMenuContext = createContext(null);
-export var LeftMenuProvider = function (_a) {
-    var children = _a.children, _b = _a.defaultItemSelected, defaultItemSelected = _b === void 0 ? null : _b;
-    var _c = useState(defaultItemSelected), expandedItem = _c[0], setExpandedItem = _c[1];
-    var expandItem = useCallback(function (item) {
-        setExpandedItem(item);
-    }, []);
-    var value = useMemo(function () { return ({
-        expandedItem: expandedItem,
-        expandItem: expandItem,
-    }); }, [expandedItem, expandItem]);
-    return _jsx(LeftMenuContext.Provider, { value: value, children: children });
-};

package/ui/Blocks/SideMenu/context/useLeftMenuContext.js

@@ -1,8 +0,0 @@
-import { useContext } from 'react';
-import { LeftMenuContext } from './LeftMenuContext';
-export var useLeftMenuContext = function () {
-    var context = useContext(LeftMenuContext);
-    if (!context)
-        throw new Error('useLeftMenuContext context must be use inside LeftMenuProvider');
-    return context;
-};

package/ui/Blocks/SideMenu/hooks/useOutsideHover.js

@@ -1,23 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-var useOutSideHover = function (_a) {
-    var parentRef = _a.parentRef;
-    var ref = useRef(null);
-    var _b = useState(false), isHovering = _b[0], setIsHovering = _b[1];
-    var handleMouseOver = useCallback(function () {
-        setIsHovering(true);
-    }, []);
-    var handleMouseOut = useCallback(function (e) {
-        var _a, _b;
-        if (!((_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) && !((_b = ref.current) === null || _b === void 0 ? void 0 : _b.contains(e.target))) {
-            setIsHovering(false);
-        }
-    }, [parentRef]);
-    useEffect(function () {
-        document.addEventListener('mouseover', handleMouseOut);
-        return function () {
-            document.removeEventListener('mouseover', handleMouseOut);
-        };
-    }, [handleMouseOut]);
-    return { isHovering: isHovering, handleMouseOver: handleMouseOver, ref: ref };
-};
-export default useOutSideHover;

package/ui/Blocks/SideMenu/index.js

@@ -1,5 +0,0 @@
-import { HamburgerMenuButton } from './components/HamburgerMenu';
-import { compactMenuWidth, expandedMenuWidth } from './utils/constants';
-import SideMenu from './SideMenu';
-export { HamburgerMenuButton, compactMenuWidth, expandedMenuWidth };
-export default SideMenu;