@astral/ui 4.18.0-rc.1 → 4.18.0-rc.2

package/node/components/DashboardSidebar/styles.js

@@ -0,0 +1,127 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Footer = exports.SidebarContent = exports.SidebarHeader = exports.SidebarRoot = exports.StyledPaper = exports.Wrapper = void 0;
+const constants_1 = require("../DashboardLayout/constants");
+const Paper_1 = require("../Paper");
+const PinButton_1 = require("../PinButton");
+const styled_1 = require("../styled");
+exports.Wrapper = (0, styled_1.styled)('div', {
+    shouldForwardProp: (prop) => !['$isPinned', '$alertHeight'].includes(prop),
+}) `
+  position: relative;
+
+  grid-column: 1;
+  grid-row: 2 / -1;
+
+  width: ${({ $isPinned }) => ($isPinned ? '242px' : '58px')};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    position: absolute;
+    z-index: ${({ theme }) => theme.zIndex.appBar - 1};
+    top: ${({ $alertHeight }) => `calc(${$alertHeight}px + ${constants_1.HEADER_HEIGHT_MOBILE}) `};
+    bottom: 0;
+    transform: ${({ $isPinned }) => $isPinned ? 'translateX(0px)' : 'translateX(-100vw)'};
+
+    overflow: hidden auto;
+
+    width: 100vw;
+    min-width: 100vw;
+
+    transition: ${({ theme }) => {
+    return theme.transitions.create(['transform'], {
+        duration: theme.transitions.duration.standard,
+    });
+}};
+  }
+`;
+exports.StyledPaper = (0, styled_1.styled)(Paper_1.Paper) `
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
+  
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    border: unset;
+    border-radius: 0;
+  }
+`;
+exports.SidebarRoot = (0, styled_1.styled)('aside', {
+    shouldForwardProp: (prop) => !['$isPinned', '$collapsedIn'].includes(prop),
+}) `
+  position: ${({ $isPinned }) => ($isPinned ? 'relative' : 'absolute')};
+  z-index: ${({ theme }) => theme.zIndex.appBar - 1};
+
+  width: ${({ $collapsedIn, $isPinned }) => $isPinned || (!$isPinned && $collapsedIn) ? '242px' : '58px'};
+  height: 100%;
+
+  background-color: ${({ theme }) => theme.palette.background.default};;
+  border-radius: ${({ theme }) => theme.shape.medium};
+  box-shadow: ${({ theme, $isPinned, $collapsedIn }) => ($isPinned || !$collapsedIn ? 'unset' : theme.elevation[300])};
+  
+  transition: ${({ theme }) => {
+    return theme.transitions.create(['min-width', 'width', 'box-shadow'], {
+        duration: theme.transitions.duration.standard,
+        easing: theme.transitions.easing.easeInOut,
+    });
+}};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    position: relative;
+
+    width: 100vw;
+    min-width: 100vw;
+
+    background-color: ${({ theme }) => theme.palette.background.default};
+    border-radius: 0;
+  }
+`;
+exports.SidebarHeader = styled_1.styled.header `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(4)};
+
+    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  }
+`;
+exports.SidebarContent = styled_1.styled.div `
+  overflow: hidden auto;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: ${({ theme }) => theme.spacing(4)};
+
+  width: ${({ $collapsedIn, $isPinned }) => $isPinned || (!$isPinned && $collapsedIn) ? '240px' : '56px'};
+  padding: ${({ theme }) => theme.spacing(4, 2, 2)};
+
+  transition: ${({ theme }) => {
+    return theme.transitions.create(['width'], {
+        duration: theme.transitions.duration.standard,
+        easing: theme.transitions.easing.easeInOut,
+    });
+}};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: inherit;
+    padding: ${({ theme, $hasHeader }) => theme.spacing($hasHeader ? 0 : 2, 0, 0, 0)};
+  }
+`;
+exports.Footer = styled_1.styled.footer `
+  display: flex;
+  flex-shrink: 0;
+
+  box-sizing: content-box;
+  height: 64px;
+  margin-top: auto;
+
+  background-color: ${({ theme }) => theme.palette.background.default};
+  border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-bottom-right-radius: ${({ theme }) => theme.shape.medium};
+  border-bottom-left-radius: ${({ theme }) => theme.shape.medium};
+  
+  .${PinButton_1.pinButtonClassnames.root} {
+    padding-left: ${({ theme }) => theme.microSpacing(9)};;
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

package/node/components/DashboardSidebar/types.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import type { NavMenuProps } from '../NavMenu';
+export type DashboardSidebarProps = {
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+    /**
+     * Пропс для передачи контента в заголовок сайдбара
+     * @example <Sidebar header={<SidebarButton />>} >
+     */
+    header?: ReactNode;
+    /**
+     * Описание меню
+     */
+    menu: {
+        /**
+         * Пункты меню
+         */
+        items: NavMenuProps['items'];
+    };
+    /**
+     * Если true, отображается skeleton
+     */
+    isLoading?: boolean;
+};

package/node/components/DashboardSidebar/useLogic/useLogic.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { type DashboardSidebarProps } from '../types';
+export declare const useLogic: (props: DashboardSidebarProps) => {
+    isPinned: boolean;
+    isMobile: boolean;
+    collapsedIn: boolean;
+    onTogglePin: () => void;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    alertHeight: number;
+    className: string | undefined;
+    menu: {
+        items: [key: string, value: {
+            icon: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+            text: import("react").ReactNode;
+            counter?: import("../../NavMenu/Item").CounterProps | undefined;
+            active?: boolean | undefined;
+            items?: [key: string, value: {
+                text: import("react").ReactNode;
+                active: boolean;
+                component: import("react").ElementType;
+                counter?: import("../../NavMenu/Item").CounterProps | undefined;
+            }][] | undefined;
+            component?: import("react").ElementType | undefined;
+        } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & {
+            component?: import("react").ElementType | undefined;
+        }][];
+    };
+    header: import("react").ReactNode;
+    isLoading: boolean;
+};

package/node/components/DashboardSidebar/useLogic/useLogic.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const DashboardContext_1 = require("../../DashboardContext");
+const DashboardLayout_1 = require("../../DashboardLayout");
+const DashboardSidebarProvider_1 = require("../../DashboardSidebarProvider");
+const hooks_1 = require("../../hooks");
+const theme_1 = require("../../theme");
+const useLogic = (props) => {
+    const { className, menu, header, isLoading } = props;
+    const { onToggleSidebar, isPinned, onTogglePin, collapsedIn, setIsPopupOpen, } = (0, react_1.useContext)(DashboardSidebarProvider_1.DashboardSidebarContext);
+    const { alertHeight, isLoading: isDashboardLoading } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
+    const { isMobile } = (0, hooks_1.useViewportType)();
+    const hoverTimerRef = (0, react_1.useRef)(null);
+    const theme = (0, theme_1.useTheme)();
+    const onMouseEnter = () => {
+        if (isMobile) {
+            return;
+        }
+        if (hoverTimerRef.current) {
+            clearTimeout(hoverTimerRef.current);
+        }
+        //Задержка 200ms
+        hoverTimerRef.current = window.setTimeout(() => {
+            onToggleSidebar(true);
+        }, theme.transitions.duration.shorter);
+    };
+    const onMouseLeave = () => {
+        if (isMobile) {
+            return;
+        }
+        if (hoverTimerRef.current) {
+            clearTimeout(hoverTimerRef.current);
+            hoverTimerRef.current = null;
+        }
+        onToggleSidebar(false);
+        setIsPopupOpen(false);
+    };
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (hoverTimerRef.current) {
+                clearTimeout(hoverTimerRef.current);
+            }
+        };
+    }, []);
+    /**
+     * Функция закрытия sidebar
+     * Для избежания ситуации, когда sidebar не закреплен, но курсор увели за пределы его контейнера и
+     * событие onMouseLeave на элементе sidebar не выполнилось
+     */
+    (0, react_1.useEffect)(() => {
+        //Не подписываемся на изменения если мобильное устройство, если sidebar закреплен или свернут
+        if (isMobile || isPinned || (!collapsedIn && !isPinned)) {
+            return;
+        }
+        const handleMouseEnter = () => onToggleSidebar(false);
+        //Основные элементы DashboardLayout
+        const mainElement = document.querySelector(`.${DashboardLayout_1.dashboardLayoutMainClassnames.main}`);
+        const pageAlertElement = document.querySelector(`.${DashboardLayout_1.dashboardLayoutMainClassnames.alert}`);
+        const headerElement = document.querySelector(`.${DashboardLayout_1.dashboardLayoutHeaderClassnames.root}`);
+        if (mainElement) {
+            mainElement.addEventListener('mouseenter', handleMouseEnter);
+        }
+        if (pageAlertElement) {
+            pageAlertElement.addEventListener('mouseenter', handleMouseEnter);
+        }
+        if (headerElement) {
+            headerElement.addEventListener('mouseenter', handleMouseEnter);
+        }
+        return () => {
+            if (mainElement) {
+                mainElement.removeEventListener('mouseenter', handleMouseEnter);
+            }
+            if (pageAlertElement) {
+                pageAlertElement.removeEventListener('mouseenter', handleMouseEnter);
+            }
+            if (headerElement) {
+                headerElement.removeEventListener('mouseenter', handleMouseEnter);
+            }
+        };
+    }, [collapsedIn, isPinned]);
+    return {
+        isPinned,
+        isMobile,
+        collapsedIn,
+        onTogglePin,
+        onMouseEnter,
+        onMouseLeave,
+        alertHeight,
+        className,
+        menu,
+        header,
+        isLoading: isLoading || isDashboardLoading,
+    };
+};
+exports.useLogic = useLogic;

package/node/components/DashboardSidebarButton/DashboardSidebarButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type ButtonProps } from '../Button';
+export declare const DashboardSidebarButton: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/node/components/DashboardSidebarButton/DashboardSidebarButton.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardSidebarButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Collapse_1 = require("../Collapse");
+const DashboardSidebarProvider_1 = require("../DashboardSidebarProvider");
+const styles_1 = require("./styles");
+exports.DashboardSidebarButton = (0, react_1.forwardRef)((props, ref) => {
+    const { children } = props;
+    const { collapsedIn } = (0, react_1.useContext)(DashboardSidebarProvider_1.DashboardSidebarContext);
+    return ((0, jsx_runtime_1.jsx)(styles_1.SidebarButton, { ref: ref, "$isOpen": collapsedIn, ...props, children: (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { orientation: "horizontal", in: collapsedIn, children: children }) }));
+});

package/node/components/DashboardSidebarButton/index.d.ts

@@ -0,0 +1 @@
+export * from './DashboardSidebarButton';

package/node/components/DashboardSidebarButton/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DashboardSidebarButton"), exports);

package/node/components/DashboardSidebarButton/public.d.ts

@@ -0,0 +1 @@
+export { DashboardSidebarButton } from './DashboardSidebarButton';

package/node/components/DashboardSidebarButton/public.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardSidebarButton = void 0;
+var DashboardSidebarButton_1 = require("./DashboardSidebarButton");
+Object.defineProperty(exports, "DashboardSidebarButton", { enumerable: true, get: function () { return DashboardSidebarButton_1.DashboardSidebarButton; } });

package/node/components/DashboardSidebarButton/styles.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const SidebarButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "variant"> & {
+    variant?: "light" | "link" | "outlined" | "contained" | "text" | undefined;
+    loading?: boolean | undefined;
+    color?: "grey" | "error" | "success" | "warning" | "primary" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    $isOpen?: boolean | undefined;
+}, {}, {}>;

package/node/components/DashboardSidebarButton/styles.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarButton = void 0;
+const Button_1 = require("../Button");
+const styled_1 = require("../styled");
+exports.SidebarButton = (0, styled_1.styled)(Button_1.Button, {
+    shouldForwardProp: (prop) => !['$isOpen'].includes(prop),
+}) `
+  min-width: ${({ $isOpen }) => (!$isOpen ? '40px' : '100%')};
+  max-width: ${({ $isOpen }) => (!$isOpen ? '40px' : '100%')};
+  height: 40px;
+  max-height: 40px;
+  margin-bottom: 0;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  transition: ${({ theme }) => {
+    return theme.transitions.create(['max-width', 'min-width'], {
+        duration: theme.transitions.duration.standard,
+    });
+}};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    height: 48px;
+    max-height: 48px;
+  }
+
+  && > .MuiButton-startIcon {
+    margin-right: ${({ theme, $isOpen }) => !$isOpen ? theme.spacing(-2) : theme.spacing(0)};
+
+    transition: ${({ theme }) => {
+    return theme.transitions.create('margin-right', {
+        duration: theme.transitions.duration.standard,
+    });
+}};
+  }
+
+  && > .MuiButton-endIcon {
+    margin-right: ${({ theme, $isOpen }) => !$isOpen ? theme.spacing(2) : theme.spacing(0)};
+
+    transition: ${({ theme }) => {
+    return theme.transitions.create('margin-right', {
+        duration: theme.transitions.duration.standard,
+    });
+}};
+  }
+`;

package/node/components/DashboardSidebarCounter/Badge/styles.d.ts

@@ -0,0 +1,7 @@
+export declare const StyledBadge: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").BadgeProps>, "color"> & {
+    color: import("../../Badge").BadgeColor;
+    withBorder?: boolean | undefined;
+    variantColor?: import("../../Badge").BadgeVariantsColor | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/node/components/DashboardSidebarCounter/Badge/styles.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledBadge = void 0;
+const material_1 = require("@mui/material");
+const Badge_1 = require("../../Badge");
+const styled_1 = require("../../styled");
+exports.StyledBadge = (0, styled_1.styled)(Badge_1.Badge) `
+  .${material_1.badgeClasses.dot} {
+    width: 8px;
+    height: 8px;
+
+    border: none;
+    border-radius: ${({ theme }) => theme.shape.large};
+  }
+`;

package/node/components/DashboardSidebarCounter/DashboardSidebarCounter.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { type CounterProps } from '../Counter';
+export type DashboardSidebarCounterProps = Pick<CounterProps, 'max'> & {
+    /**
+     * Число счетчика
+     */
+    count?: number;
+};
+/**
+ * Компонент для отображения счетчика в элементах меню Sidebar
+ */
+export declare const DashboardSidebarCounter: {
+    ({ count, max, }: DashboardSidebarCounterProps): JSX.Element | null;
+    Badge: ({ invisible, children }: {
+        invisible: boolean;
+        children: import("react").ReactNode;
+    }) => JSX.Element;
+};

package/node/components/DashboardSidebarCounter/DashboardSidebarCounter.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardSidebarCounter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const DashboardSidebarProvider_1 = require("../DashboardSidebarProvider");
+const Badge_1 = require("./Badge");
+const styles_1 = require("./styles");
+/**
+ * Компонент для отображения счетчика в элементах меню Sidebar
+ */
+const DashboardSidebarCounter = ({ count, max, }) => {
+    const { collapsedIn } = (0, react_1.useContext)(DashboardSidebarProvider_1.DashboardSidebarContext);
+    if (!count) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledCounter, { color: "error", content: count, max: max, "$collapsedIn": collapsedIn }));
+};
+exports.DashboardSidebarCounter = DashboardSidebarCounter;
+// Реализовано для того, что бы не грузить код Badge, если SidebarCounter не используется.
+// SidebarCounter.Badge достается внутри Sidebar компонента
+exports.DashboardSidebarCounter.Badge = Badge_1.Badge;

package/node/components/DashboardSidebarCounter/index.d.ts

@@ -0,0 +1 @@
+export * from './DashboardSidebarCounter';

package/node/components/DashboardSidebarCounter/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DashboardSidebarCounter"), exports);

package/node/components/DashboardSidebarCounter/public.d.ts

@@ -0,0 +1 @@
+export { DashboardSidebarCounter, type DashboardSidebarCounterProps, } from './DashboardSidebarCounter';

package/node/components/DashboardSidebarCounter/public.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardSidebarCounter = void 0;
+var DashboardSidebarCounter_1 = require("./DashboardSidebarCounter");
+Object.defineProperty(exports, "DashboardSidebarCounter", { enumerable: true, get: function () { return DashboardSidebarCounter_1.DashboardSidebarCounter; } });

package/node/components/DashboardSidebarCounter/styles.d.ts

@@ -0,0 +1,9 @@
+export declare const StyledCounter: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("..").WithoutEmotionSpecific<import("@mui/material").BadgeProps>, "color" | "content" | "children" | "variant" | "invisible" | "anchorOrigin" | "overlap" | "badgeContent" | "withBorder"> & {
+    color: import("../Counter/types").CounterColor;
+    variant?: import("../Counter/types").CounterVariants | undefined;
+    content?: number | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    $collapsedIn: boolean;
+}, {}, {}>;

package/node/components/DashboardSidebarCounter/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledCounter = void 0;
+const Counter_1 = require("../Counter");
+const styled_1 = require("../styled");
+exports.StyledCounter = (0, styled_1.styled)(Counter_1.Counter, {
+    shouldForwardProp: (prop) => !['$collapsedIn'].includes(prop),
+}) `
+  transform: ${({ $collapsedIn }) => ($collapsedIn ? 'scale(1)' : 'scale(0)')};
+
+  transition: ${({ theme }) => theme.transitions.create(['transform'], {
+    duration: theme.transitions.duration.standard,
+})};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin-left: auto;
+  }
+`;

package/node/components/DashboardSidebarPopover/DashboardSidebarPopover.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+export type DashboardSidebarPopoverProps = {
+    /**
+     * Заголовок списка
+     */
+    title: string;
+    /**
+     * Элементы SidebarPopover.Item
+     */
+    children: ReactNode;
+};
+export declare const DashboardSidebarPopover: {
+    ({ title, children, }: DashboardSidebarPopoverProps): JSX.Element;
+    Item: import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<unknown>>;
+};

package/node/components/DashboardSidebarPopover/DashboardSidebarPopover.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardSidebarPopover = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FadePopup_1 = require("./FadePopup");
+const SidebarPopoverItem_1 = require("./SidebarPopoverItem");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+const DashboardSidebarPopover = ({ title, children, }) => {
+    const { handleClosePopover, isPopupOpen } = (0, useLogic_1.useLogic)();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(FadePopup_1.FadePopup, { isOpen: isPopupOpen, children: [(0, jsx_runtime_1.jsx)(styles_1.Title, { component: "h4", color: "textSecondary", variant: "subtitle2", children: title }), (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { children: children })] }), (0, jsx_runtime_1.jsx)(styles_1.StyledBottomDrawer, { title: title, open: isPopupOpen, onClose: handleClosePopover, children: (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { children: children }) })] }));
+};
+exports.DashboardSidebarPopover = DashboardSidebarPopover;
+exports.DashboardSidebarPopover.Item = SidebarPopoverItem_1.SidebarPopoverItem;

package/node/components/DashboardSidebarPopover/FadePopup/styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const PopupContainer: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $isOpen?: boolean | undefined;
+    $topPosition?: number | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/DashboardSidebarPopover/FadePopup/styles.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopupContainer = void 0;
+const styled_1 = require("../../styled");
+const mixins_1 = require("../../styled/mixins");
+exports.PopupContainer = styled_1.styled.div `
+  position: absolute;
+  top: ${({ $topPosition }) => ($topPosition ? `${$topPosition}px` : '16px')};
+  left: ${({ theme }) => `calc(100% - ${theme.spacing(1)})`};
+
+  overflow: hidden;
+
+  padding: ${({ theme }) => theme.spacing(1, 0)};
+
+  background-color: ${({ theme }) => theme.palette.background.default};
+  border-radius: ${({ theme }) => theme.shape.medium};
+  box-shadow: ${({ theme }) => theme.elevation[200]};
+
+  ${({ $isOpen }) => (0, mixins_1.fadeDropDownTransition)($isOpen)}
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

package/node/components/DashboardSidebarPopover/FadePopup/useLogic/useLogic.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const DashboardSidebarProvider_1 = require("../../../DashboardSidebarProvider");
+const hooks_1 = require("../../../hooks");
+const useLogic = ({ isOpen }) => {
+    const { popoverAnchorRef } = (0, react_1.useContext)(DashboardSidebarProvider_1.DashboardSidebarContext);
+    const topPosition = popoverAnchorRef.current?.offsetTop;
+    const { shouldRender, handleAnimationEnd } = (0, hooks_1.usePopoverAnimation)(isOpen);
+    return { handleAnimationEnd, shouldRender, topPosition };
+};
+exports.useLogic = useLogic;

package/node/components/DashboardSidebarPopover/SidebarPopoverItem/SidebarPopoverItem.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarPopoverItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Tooltip_1 = require("../../Tooltip");
+const Typography_1 = require("../../Typography");
+const constants_1 = require("./constants");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+exports.SidebarPopoverItem = (0, react_1.forwardRef)(({ icon, title, description, component, isDisabled, disabledReason, onClick, ...props }, ref) => {
+    const Component = component ?? 'div';
+    const { handleItemClick } = (0, useLogic_1.useLogic)({ onClick });
+    return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { withoutContainer: !isDisabled, title: isDisabled && disabledReason, placement: "bottom", children: (0, jsx_runtime_1.jsx)(styles_1.Item, { onClick: handleItemClick, inert: isDisabled ? '' : undefined, "$isDisabled": isDisabled, children: (0, jsx_runtime_1.jsx)(Component, { ref: ref, ...props, className: constants_1.sidebarPopoverItemClassnames.content, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$hasDescription": Boolean(description), children: [icon && (0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { children: icon }), (0, jsx_runtime_1.jsxs)(styles_1.ItemWrapper, { children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "subtitle1", children: title }), description && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { color: "textSecondary", variant: "body1", children: description }))] })] }) }) }) }) }));
+});

package/node/components/DashboardSidebarPopover/SidebarPopoverItem/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sidebarPopoverItemClassnames = void 0;
+const utils_1 = require("../../utils");
+exports.sidebarPopoverItemClassnames = {
+    content: (0, utils_1.createUIKitClassname)('sidebar-popover-item__content'),
+};