@astral/ui 4.17.5 → 4.17.6

package/components/DashboardSidebar/useLogic/useLogic.js

@@ -0,0 +1,93 @@
+import { useContext, useEffect, useRef } from 'react';
+import { DashboardContext } from '../../DashboardContext';
+import { dashboardLayoutHeaderClassnames, dashboardLayoutMainClassnames, } from '../../DashboardLayout';
+import { DashboardSidebarContext } from '../../DashboardSidebarProvider';
+import { useViewportType } from '../../hooks';
+import { useTheme } from '../../theme';
+export const useLogic = (props) => {
+    const { className, menu, header, isLoading } = props;
+    const { onToggleSidebar, isPinned, onTogglePin, collapsedIn, setIsPopupOpen, } = useContext(DashboardSidebarContext);
+    const { alertHeight, isLoading: isDashboardLoading } = useContext(DashboardContext);
+    const { isMobile } = useViewportType();
+    const hoverTimerRef = useRef(null);
+    const theme = 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);
+    };
+    useEffect(() => {
+        return () => {
+            if (hoverTimerRef.current) {
+                clearTimeout(hoverTimerRef.current);
+            }
+        };
+    }, []);
+    /**
+     * Функция закрытия sidebar
+     * Для избежания ситуации, когда sidebar не закреплен, но курсор увели за пределы его контейнера и
+     * событие onMouseLeave на элементе sidebar не выполнилось
+     */
+    useEffect(() => {
+        //Не подписываемся на изменения если мобильное устройство, если sidebar закреплен или свернут
+        if (isMobile || isPinned || (!collapsedIn && !isPinned)) {
+            return;
+        }
+        const handleMouseEnter = () => onToggleSidebar(false);
+        //Основные элементы DashboardLayout
+        const mainElement = document.querySelector(`.${dashboardLayoutMainClassnames.main}`);
+        const pageAlertElement = document.querySelector(`.${dashboardLayoutMainClassnames.alert}`);
+        const headerElement = document.querySelector(`.${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,
+    };
+};

package/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/components/DashboardSidebarButton/DashboardSidebarButton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useContext } from 'react';
+import { Collapse } from '../Collapse';
+import { DashboardSidebarContext } from '../DashboardSidebarProvider';
+import { SidebarButton as Button } from './styles';
+export const DashboardSidebarButton = forwardRef((props, ref) => {
+    const { children } = props;
+    const { collapsedIn } = useContext(DashboardSidebarContext);
+    return (_jsx(Button, { ref: ref, "$isOpen": collapsedIn, ...props, children: _jsx(Collapse, { orientation: "horizontal", in: collapsedIn, children: children }) }));
+});

package/components/DashboardSidebarButton/index.d.ts

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

package/components/DashboardSidebarButton/index.js

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

package/components/DashboardSidebarButton/public.d.ts

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

package/components/DashboardSidebarButton/public.js

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

package/components/DashboardSidebarButton/styles.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const SidebarButton: import("../styled").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/components/DashboardSidebarButton/styles.js

@@ -0,0 +1,45 @@
+import { Button as UIKitButton, } from '../Button';
+import { styled } from '../styled';
+export const SidebarButton = styled(UIKitButton, {
+    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/components/DashboardSidebarCounter/Badge/styles.d.ts

@@ -0,0 +1,7 @@
+export declare const StyledBadge: import("../../styled").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/components/DashboardSidebarCounter/Badge/styles.js

@@ -0,0 +1,12 @@
+import { badgeClasses } from '@mui/material';
+import { Badge } from '../../Badge';
+import { styled } from '../../styled';
+export const StyledBadge = styled(Badge) `
+  .${badgeClasses.dot} {
+    width: 8px;
+    height: 8px;
+
+    border: none;
+    border-radius: ${({ theme }) => theme.shape.large};
+  }
+`;

package/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/components/DashboardSidebarCounter/DashboardSidebarCounter.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { DashboardSidebarContext } from '../DashboardSidebarProvider';
+import { Badge } from './Badge';
+import { StyledCounter } from './styles';
+/**
+ * Компонент для отображения счетчика в элементах меню Sidebar
+ */
+export const DashboardSidebarCounter = ({ count, max, }) => {
+    const { collapsedIn } = useContext(DashboardSidebarContext);
+    if (!count) {
+        return null;
+    }
+    return (_jsx(StyledCounter, { color: "error", content: count, max: max, "$collapsedIn": collapsedIn }));
+};
+// Реализовано для того, что бы не грузить код Badge, если SidebarCounter не используется.
+// SidebarCounter.Badge достается внутри Sidebar компонента
+DashboardSidebarCounter.Badge = Badge;

package/components/DashboardSidebarCounter/index.d.ts

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

package/components/DashboardSidebarCounter/index.js

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

package/components/DashboardSidebarCounter/public.d.ts

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

package/components/DashboardSidebarCounter/public.js

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

package/components/DashboardSidebarCounter/styles.d.ts

@@ -0,0 +1,9 @@
+export declare const StyledCounter: import("../styled").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/components/DashboardSidebarCounter/styles.js

@@ -0,0 +1,15 @@
+import { Counter } from '../Counter';
+import { styled } from '../styled';
+export const StyledCounter = styled(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/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/components/DashboardSidebarPopover/DashboardSidebarPopover.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { FadePopup } from './FadePopup';
+import { SidebarPopoverItem } from './SidebarPopoverItem';
+import { StyledBottomDrawer, Title, Wrapper } from './styles';
+import { useLogic } from './useLogic';
+export const DashboardSidebarPopover = ({ title, children, }) => {
+    const { handleClosePopover, isPopupOpen } = useLogic();
+    return (_jsxs(_Fragment, { children: [_jsxs(FadePopup, { isOpen: isPopupOpen, children: [_jsx(Title, { component: "h4", color: "textSecondary", variant: "subtitle2", children: title }), _jsx(Wrapper, { children: children })] }), _jsx(StyledBottomDrawer, { title: title, open: isPopupOpen, onClose: handleClosePopover, children: _jsx(Wrapper, { children: children }) })] }));
+};
+DashboardSidebarPopover.Item = SidebarPopoverItem;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const PopupContainer: import("../../styled").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/components/DashboardSidebarPopover/FadePopup/styles.js

@@ -0,0 +1,21 @@
+import { styled } from '../../styled';
+import { fadeDropDownTransition } from '../../styled/mixins';
+export const PopupContainer = 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 }) => fadeDropDownTransition($isOpen)}
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

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

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { DashboardSidebarContext } from '../../../DashboardSidebarProvider';
+import { usePopoverAnimation } from '../../../hooks';
+export const useLogic = ({ isOpen }) => {
+    const { popoverAnchorRef } = useContext(DashboardSidebarContext);
+    const topPosition = popoverAnchorRef.current?.offsetTop;
+    const { shouldRender, handleAnimationEnd } = usePopoverAnimation(isOpen);
+    return { handleAnimationEnd, shouldRender, topPosition };
+};

package/components/DashboardSidebarPopover/SidebarPopoverItem/SidebarPopoverItem.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Tooltip } from '../../Tooltip';
+import { Typography } from '../../Typography';
+import { sidebarPopoverItemClassnames } from './constants';
+import { IconWrapper, Item, ItemWrapper, Wrapper } from './styles';
+import { useLogic } from './useLogic';
+export const SidebarPopoverItem = forwardRef(({ icon, title, description, component, isDisabled, disabledReason, onClick, ...props }, ref) => {
+    const Component = component ?? 'div';
+    const { handleItemClick } = useLogic({ onClick });
+    return (_jsx("li", { children: _jsx(Tooltip, { withoutContainer: !isDisabled, title: isDisabled && disabledReason, placement: "bottom", children: _jsx(Item, { onClick: handleItemClick, inert: isDisabled ? '' : undefined, "$isDisabled": isDisabled, children: _jsx(Component, { ref: ref, ...props, className: sidebarPopoverItemClassnames.content, children: _jsxs(Wrapper, { "$hasDescription": Boolean(description), children: [icon && _jsx(IconWrapper, { children: icon }), _jsxs(ItemWrapper, { children: [_jsx(Typography, { variant: "subtitle1", children: title }), description && (_jsx(Typography, { color: "textSecondary", variant: "body1", children: description }))] })] }) }) }) }) }));
+});

package/components/DashboardSidebarPopover/SidebarPopoverItem/constants.js

@@ -0,0 +1,4 @@
+import { createUIKitClassname } from '../../utils';
+export const sidebarPopoverItemClassnames = {
+    content: createUIKitClassname('sidebar-popover-item__content'),
+};

package/components/DashboardSidebarPopover/SidebarPopoverItem/styles.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export declare const Item: import("../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $isDisabled?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Wrapper: import("../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $hasDescription?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconWrapper: import("../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ItemWrapper: import("../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/DashboardSidebarPopover/SidebarPopoverItem/styles.js

@@ -0,0 +1,55 @@
+import { styled } from '../../styled';
+import { sidebarPopoverItemClassnames } from './constants';
+export const Item = styled.div `
+  pointer-events: ${({ $isDisabled }) => ($isDisabled ? 'none' : 'auto')};
+
+  opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};
+  background-color: ${({ theme }) => theme.palette.background.default};
+  mix-blend-mode: ${({ $isDisabled }) => $isDisabled ? 'luminosity' : 'normal'};
+
+  transition: ${({ theme }) => {
+    return theme.transitions.create(['background-color'], {
+        duration: theme.transitions.duration.short,
+    });
+}};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.background.elementHover};
+  }
+
+  &:active {
+    background-color: ${({ theme }) => theme.palette.primary[100]};
+  }
+
+  &:has(.${sidebarPopoverItemClassnames.content}:focus-visible) {
+    border-radius: ${({ theme }) => theme.shape.small};
+    outline: 2px solid ${({ theme }) => theme.palette.components.focused};
+    outline-offset: -2px;
+  }
+
+  a {
+    all: unset;
+  }
+`;
+export const Wrapper = styled.div `
+  cursor: pointer;
+
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  align-items: ${({ $hasDescription }) => $hasDescription ? 'normal' : 'center'};
+
+  padding: ${({ theme }) => theme.spacing(3, 4)};
+`;
+export const IconWrapper = styled.div `
+  height: 32px;
+  padding: ${({ theme }) => theme.microSpacing(1, 0)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;
+export const ItemWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;

package/components/DashboardSidebarPopover/SidebarPopoverItem/useLogic/useLogic.js

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { DashboardSidebarContext } from '../../../DashboardSidebarProvider';
+export const useLogic = ({ onClick }) => {
+    const { setIsPopupOpen, isPinned, onToggleSidebar } = useContext(DashboardSidebarContext);
+    const handleItemClick = () => {
+        onClick?.();
+        setIsPopupOpen(false);
+        if (!isPinned) {
+            onToggleSidebar(false);
+        }
+    };
+    return { handleItemClick };
+};

package/components/DashboardSidebarPopover/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DashboardSidebarPopover';
+export * from './SidebarPopoverItem';

package/components/DashboardSidebarPopover/index.js

@@ -0,0 +1,2 @@
+export * from './DashboardSidebarPopover';
+export * from './SidebarPopoverItem';

package/components/DashboardSidebarPopover/public.d.ts

@@ -0,0 +1,2 @@
+export { DashboardSidebarPopover, type DashboardSidebarPopoverProps, } from './DashboardSidebarPopover';
+export type { SidebarPopoverItemProps as DashboardSidebarPopoverItemProps } from './SidebarPopoverItem';

package/components/DashboardSidebarPopover/public.js

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

package/components/DashboardSidebarPopover/styles.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+export declare const Wrapper: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const Title: import("../styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+} & {
+    color?: import("../Typography").TypographyColor | undefined;
+    variant?: import("../Typography").TypographyVariant | undefined;
+    colorIntensity?: import("../Typography").Intensity | undefined;
+    component?: ("symbol" | "object" | "main" | "body" | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "caption" | "button" | "link" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "clipPath" | "filter" | "marker" | "mask" | "center" | "text" | "big" | "keygen" | "menuitem" | "noindex" | "param" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentType<any>) | undefined;
+    isUpperCase?: boolean | undefined;
+} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledBottomDrawer: import("../styled").StyledComponent<{
+    title?: string | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>[] | undefined;
+    drawerHeaderHeight?: number | undefined;
+} & import("..").WithoutEmotionSpecific<Omit<import("@mui/material").DrawerProps, "title" | "anchor" | "variant">> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/DashboardSidebarPopover/styles.js

@@ -0,0 +1,25 @@
+import { BottomDrawer } from '../BottomDrawer';
+import { styled } from '../styled';
+import { Typography } from '../Typography';
+import { LIST_WIDTH } from './constants';
+export const Wrapper = styled.ul `
+  display: flex;
+  flex-direction: column;
+
+  width: ${LIST_WIDTH};
+  margin: 0;
+  padding: ${({ theme }) => theme.spacing(0)};
+
+  list-style-type: none;
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: unset;
+  }
+`;
+export const Title = styled(Typography) `
+  padding: ${({ theme }) => theme.spacing(2, 4)};
+`;
+export const StyledBottomDrawer = styled(BottomDrawer) `
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    display: none;
+  }
+`;

package/components/DashboardSidebarPopover/useLogic/useLogic.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { DashboardSidebarContext } from '../../DashboardSidebarProvider';
+export const useLogic = () => {
+    const { setIsPopupOpen, isPopupOpen } = useContext(DashboardSidebarContext);
+    const handleClosePopover = () => {
+        setIsPopupOpen(false);
+    };
+    return { handleClosePopover, isPopupOpen };
+};

package/components/DashboardSidebarProvider/DashboardSidebarProvider.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode, type RefObject } from 'react';
-export type SidebarContextProps = {
+export type DashboardSidebarContextProps = {
     collapsedIn: boolean;
     onToggleSidebar: (newValue?: boolean) => void;
     isPinned: boolean;
@@ -22,7 +22,7 @@ export type DashboardSidebarProviderProps = {
     localStorageKey?: string;
     isFocusedMode?: boolean;
 };
-export declare const SidebarContext: import("react").Context<SidebarContextProps>;
+export declare const DashboardSidebarContext: import("react").Context<DashboardSidebarContextProps>;
 /**
  * Провайдер предназначен для проброса состояния боковой панел, а так же управления этим состоянием.
  * В данный провайдер обернут компонент DashboardLayout.

package/components/DashboardSidebarProvider/DashboardSidebarProvider.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, createRef, useRef, useState, } from 'react';
 import { LOCAL_STORAGE_KEY } from './constants';
 import { useSidebar } from './hooks';
-export const SidebarContext = createContext({
+export const DashboardSidebarContext = createContext({
     collapsedIn: false,
     onToggleSidebar: () => undefined,
     isPinned: true,
@@ -25,5 +25,5 @@ export const DashboardSidebarProvider = ({ children, localStorageKey = LOCAL_STO
         setIsPopupOpen,
         popoverAnchorRef,
     };
-    return (_jsx(SidebarContext.Provider, { value: value, children: children }));
+    return (_jsx(DashboardSidebarContext.Provider, { value: value, children: children }));
 };

package/components/DashboardSidebarSkeleton/DashboardSidebarSkeleton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const DashboardSidebarSkeleton: () => JSX.Element;

package/components/DashboardSidebarSkeleton/DashboardSidebarSkeleton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { dashboardSidebarClassnames } from '../DashboardSidebar';
+import { Skeleton } from '../Skeleton';
+import { classNames } from '../utils';
+import { ItemWrapper, ListWrapper, SkeletonDescription, Wrapper, } from './styles';
+import { useLogic } from './useLogic';
+export const DashboardSidebarSkeleton = () => {
+    const { isPinned } = useLogic();
+    return (_jsxs(Wrapper, { "$isPinned": isPinned, className: classNames(dashboardSidebarClassnames.root), children: [_jsx(Skeleton, { shapeSize: isPinned ? 'medium' : 'small', height: 40, variant: "rounded" }), _jsxs(ListWrapper, { "$isPinned": isPinned, children: [_jsxs(ItemWrapper, { children: [_jsx(Skeleton, { height: 20, width: 20, variant: "rounded", shapeSize: "small" }), _jsx(SkeletonDescription, { height: 14, width: 174, variant: "rounded", "$isPinned": isPinned })] }), _jsxs(ItemWrapper, { children: [_jsx(Skeleton, { height: 20, width: 20, variant: "rounded", shapeSize: "small" }), _jsx(SkeletonDescription, { height: 14, width: 174, variant: "rounded", "$isPinned": isPinned })] }), _jsxs(ItemWrapper, { children: [_jsx(Skeleton, { height: 20, width: 20, variant: "rounded", shapeSize: "small" }), _jsx(SkeletonDescription, { height: 14, width: 174, variant: "rounded", "$isPinned": isPinned })] }), isPinned && (_jsxs(ItemWrapper, { children: [_jsx(Skeleton, { height: 20, width: 20, variant: "rounded", shapeSize: "small" }), _jsx(SkeletonDescription, { height: 14, width: 174, variant: "rounded", "$isPinned": isPinned })] }))] })] }));
+};

package/components/DashboardSidebarSkeleton/index.d.ts

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

package/components/DashboardSidebarSkeleton/index.js

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

package/components/DashboardSidebarSkeleton/public.d.ts

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

package/components/DashboardSidebarSkeleton/public.js

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