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

package/node/components/DashboardLayout/Header/styles.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderContent = exports.ExitButton = exports.ProfileWrapper = exports.ProductSwitcherWrapper = exports.HeaderContentSection = exports.HeaderSection = exports.MobileSidebarTogglerWrapper = exports.HeaderRoot = void 0;
 const material_1 = require("@mui/material");
+const constants_1 = require("../../DashboardSidebar/constants");
 const IconButton_1 = require("../../IconButton");
-const styles_1 = require("../../styles");
-const constants_1 = require("../constants");
-const Sidebar_1 = require("../Sidebar");
-exports.HeaderRoot = (0, styles_1.styled)('header', {
+const styled_1 = require("../../styled");
+const constants_2 = require("../constants");
+exports.HeaderRoot = (0, styled_1.styled)('header', {
     shouldForwardProp: (prop) => !['$isFocusedMode'].includes(prop),
 }) `
   z-index: ${({ theme }) => theme.zIndex.appBar};
@@ -18,8 +18,8 @@ exports.HeaderRoot = (0, styles_1.styled)('header', {
   justify-content: space-between;
 
   width: 100%;
-  height: ${constants_1.HEADER_HEIGHT};
-  margin-top: ${({ $isFocusedMode }) => $isFocusedMode ? `-${constants_1.HEADER_HEIGHT}` : 0};
+  height: ${constants_2.HEADER_HEIGHT};
+  margin-top: ${({ $isFocusedMode }) => $isFocusedMode ? `-${constants_2.HEADER_HEIGHT}` : 0};
   margin-bottom: ${({ theme }) => theme.spacing(4)};
 
   transition: ${({ theme }) => {
@@ -32,7 +32,7 @@ exports.HeaderRoot = (0, styles_1.styled)('header', {
     grid-row: 2;
     justify-content: flex-start;
 
-    height: ${constants_1.HEADER_HEIGHT_MOBILE};
+    height: ${constants_2.HEADER_HEIGHT_MOBILE};
     margin-bottom: 0;
     padding: ${({ theme }) => theme.spacing(0, 2, 0, 1)};
 
@@ -42,7 +42,7 @@ exports.HeaderRoot = (0, styles_1.styled)('header', {
     transition: unset;
   }
 `;
-exports.MobileSidebarTogglerWrapper = styles_1.styled.div `
+exports.MobileSidebarTogglerWrapper = styled_1.styled.div `
   ${({ theme }) => theme.breakpoints.up('sm')} {
     display: none;
   }
@@ -51,12 +51,12 @@ exports.MobileSidebarTogglerWrapper = styles_1.styled.div `
     padding: ${({ theme }) => theme.spacing(2)};
   }
   
-  .${constants_1.dashboardLayoutClassnames.root}:not(:has(.${Sidebar_1.dashboardLayoutSidebarClassnames.root}))
+  .${constants_2.dashboardLayoutClassnames.root}:not(:has(.${constants_1.dashboardSidebarClassnames.root}))
     & {
     display: none;
   }
 `;
-exports.HeaderSection = styles_1.styled.div `
+exports.HeaderSection = styled_1.styled.div `
   display: flex;
   gap: ${({ theme }) => theme.spacing(1)};
   align-items: center;
@@ -65,7 +65,7 @@ exports.HeaderSection = styles_1.styled.div `
     flex-grow: 1;
   }
 `;
-exports.HeaderContentSection = (0, styles_1.styled)(exports.HeaderSection) `
+exports.HeaderContentSection = (0, styled_1.styled)(exports.HeaderSection) `
   gap: ${({ theme }) => theme.spacing(6)};
   justify-content: flex-end;
 
@@ -73,12 +73,12 @@ exports.HeaderContentSection = (0, styles_1.styled)(exports.HeaderSection) `
     gap: ${({ theme }) => theme.spacing(2)};
   }
 `;
-exports.ProductSwitcherWrapper = styles_1.styled.div `
+exports.ProductSwitcherWrapper = styled_1.styled.div `
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: none;
   }
 `;
-exports.ProfileWrapper = (0, styles_1.styled)('div', {
+exports.ProfileWrapper = (0, styled_1.styled)('div', {
     shouldForwardProp: (prop) => !['$isShow'].includes(prop),
 }) `
   display: contents;
@@ -87,7 +87,7 @@ exports.ProfileWrapper = (0, styles_1.styled)('div', {
     display: ${({ $isShow }) => ($isShow ? 'block' : 'none')};
   }
 `;
-exports.ExitButton = (0, styles_1.styled)(IconButton_1.IconButton, {
+exports.ExitButton = (0, styled_1.styled)(IconButton_1.IconButton, {
     shouldForwardProp: (prop) => !['$isShow'].includes(prop),
 }) `
   display: none;
@@ -96,7 +96,7 @@ exports.ExitButton = (0, styles_1.styled)(IconButton_1.IconButton, {
     display: ${({ $isShow }) => (!$isShow ? 'none' : 'flex')};
   }
 `;
-exports.HeaderContent = styles_1.styled.div `
+exports.HeaderContent = styled_1.styled.div `
   display: flex;
   flex-grow: 1;
   justify-content: space-between;

package/node/components/DashboardLayout/Main/index.d.ts

@@ -1 +1,2 @@
 export * from './Main';
+export { dashboardLayoutMainClassnames } from './constants';

package/node/components/DashboardLayout/Main/index.js

@@ -14,4 +14,7 @@ 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 });
+exports.dashboardLayoutMainClassnames = void 0;
 __exportStar(require("./Main"), exports);
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "dashboardLayoutMainClassnames", { enumerable: true, get: function () { return constants_1.dashboardLayoutMainClassnames; } });

package/node/components/DashboardLayout/Main/styles.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-export declare const MainRoot: import("@emotion/styled").StyledComponent<{
+export declare const MainRoot: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export declare const AlertWrapper: import("@emotion/styled").StyledComponent<{
+export declare const AlertWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/DashboardLayout/Main/styles.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertWrapper = exports.MainRoot = void 0;
-const styles_1 = require("../../styles");
-exports.MainRoot = styles_1.styled.main `
+const styled_1 = require("../../styled");
+exports.MainRoot = styled_1.styled.main `
   overflow: hidden;
   display: flex;
   grid-column: 2;
@@ -13,7 +13,7 @@ exports.MainRoot = styles_1.styled.main `
     margin: 0;
   }
 `;
-exports.AlertWrapper = styles_1.styled.div `
+exports.AlertWrapper = styled_1.styled.div `
   grid-column: 2;
   grid-row: 2;
 

package/node/components/DashboardLayout/Main/useLogic/useLogic.js

@@ -2,9 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
-const PageLayout_1 = require("../../../PageLayout");
-const constants_1 = require("../../../PageLayout/PageContent/constants");
-const DashboardContext_1 = require("../../DashboardContext");
+const DashboardContext_1 = require("../../../DashboardContext");
+const constants_1 = require("../../../PageContent/constants");
 const useLogic = () => {
     const { isFocusedMode, setAlertElement } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
     const prevFocusedModeRef = (0, react_1.useRef)(isFocusedMode);
@@ -16,13 +15,13 @@ const useLogic = () => {
     }, [setAlertElement]);
     (0, react_1.useEffect)(() => {
         if (isFocusedMode || (prevFocusedModeRef.current && !isFocusedMode)) {
-            elementRef.current = document.querySelector(`.${PageLayout_1.pageContentClassnames.pageContent}`);
-            elementRef.current?.classList.add(PageLayout_1.pageContentClassnames.animation);
+            elementRef.current = document.querySelector(`.${constants_1.pageContentClassnames.pageContent}`);
+            elementRef.current?.classList.add(constants_1.pageContentClassnames.animation);
         }
     }, [isFocusedMode]);
     const onAnimationEnd = (event) => {
         if (event.animationName === constants_1.PAGE_CONTENT_ANIMATION) {
-            elementRef.current?.classList.remove(PageLayout_1.pageContentClassnames.animation);
+            elementRef.current?.classList.remove(constants_1.pageContentClassnames.animation);
             prevFocusedModeRef.current = isFocusedMode;
         }
     };

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

@@ -1,4 +1,4 @@
 export { type DashboardLayoutProps, DashboardLayout } from './DashboardLayout';
-export { MenuSidebarButton, type MenuSidebarButtonProps, SidebarButton, SidebarCounter, type SidebarCounterProps, SidebarPopover, type SidebarPopoverItemProps, type SidebarPopoverProps, type DashboardSidebarProps, SidebarSkeleton, } from './Sidebar';
-export { DashboardContext, type DashboardContextProps, } from './DashboardContext';
-export { DashboardLayoutSkeleton, type DashboardLayoutSkeletonProps, } from './DashboardLayoutSkeleton';
+export { dashboardLayoutHeaderClassnames } from './Header';
+export { dashboardLayoutMainClassnames } from './Main';
+export { dashboardLayoutClassnames } from './constants';

package/node/components/DashboardLayout/index.js

@@ -1,15 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DashboardLayoutSkeleton = exports.DashboardContext = exports.SidebarSkeleton = exports.SidebarPopover = exports.SidebarCounter = exports.SidebarButton = exports.MenuSidebarButton = exports.DashboardLayout = void 0;
+exports.dashboardLayoutClassnames = exports.dashboardLayoutMainClassnames = exports.dashboardLayoutHeaderClassnames = exports.DashboardLayout = void 0;
 var DashboardLayout_1 = require("./DashboardLayout");
 Object.defineProperty(exports, "DashboardLayout", { enumerable: true, get: function () { return DashboardLayout_1.DashboardLayout; } });
-var Sidebar_1 = require("./Sidebar");
-Object.defineProperty(exports, "MenuSidebarButton", { enumerable: true, get: function () { return Sidebar_1.MenuSidebarButton; } });
-Object.defineProperty(exports, "SidebarButton", { enumerable: true, get: function () { return Sidebar_1.SidebarButton; } });
-Object.defineProperty(exports, "SidebarCounter", { enumerable: true, get: function () { return Sidebar_1.SidebarCounter; } });
-Object.defineProperty(exports, "SidebarPopover", { enumerable: true, get: function () { return Sidebar_1.SidebarPopover; } });
-Object.defineProperty(exports, "SidebarSkeleton", { enumerable: true, get: function () { return Sidebar_1.SidebarSkeleton; } });
-var DashboardContext_1 = require("./DashboardContext");
-Object.defineProperty(exports, "DashboardContext", { enumerable: true, get: function () { return DashboardContext_1.DashboardContext; } });
-var DashboardLayoutSkeleton_1 = require("./DashboardLayoutSkeleton");
-Object.defineProperty(exports, "DashboardLayoutSkeleton", { enumerable: true, get: function () { return DashboardLayoutSkeleton_1.DashboardLayoutSkeleton; } });
+var Header_1 = require("./Header");
+Object.defineProperty(exports, "dashboardLayoutHeaderClassnames", { enumerable: true, get: function () { return Header_1.dashboardLayoutHeaderClassnames; } });
+var Main_1 = require("./Main");
+Object.defineProperty(exports, "dashboardLayoutMainClassnames", { enumerable: true, get: function () { return Main_1.dashboardLayoutMainClassnames; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "dashboardLayoutClassnames", { enumerable: true, get: function () { return constants_1.dashboardLayoutClassnames; } });

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

@@ -1,4 +1,2 @@
-export { DashboardContext, type DashboardContextProps, } from './DashboardContext';
+export type { DashboardSidebarProps } from '../DashboardSidebar';
 export { DashboardLayout, type DashboardLayoutProps } from './DashboardLayout';
-export { DashboardLayoutSkeleton, type DashboardLayoutSkeletonProps, } from './DashboardLayoutSkeleton';
-export { type DashboardSidebarProps, MenuSidebarButton, type MenuSidebarButtonProps, SidebarButton, SidebarCounter, type SidebarCounterProps, SidebarPopover, type SidebarPopoverItemProps, type SidebarPopoverProps, SidebarSkeleton, } from './Sidebar';

package/node/components/DashboardLayout/public.js

@@ -1,15 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidebarSkeleton = exports.SidebarPopover = exports.SidebarCounter = exports.SidebarButton = exports.MenuSidebarButton = exports.DashboardLayoutSkeleton = exports.DashboardLayout = exports.DashboardContext = void 0;
-var DashboardContext_1 = require("./DashboardContext");
-Object.defineProperty(exports, "DashboardContext", { enumerable: true, get: function () { return DashboardContext_1.DashboardContext; } });
+exports.DashboardLayout = void 0;
 var DashboardLayout_1 = require("./DashboardLayout");
 Object.defineProperty(exports, "DashboardLayout", { enumerable: true, get: function () { return DashboardLayout_1.DashboardLayout; } });
-var DashboardLayoutSkeleton_1 = require("./DashboardLayoutSkeleton");
-Object.defineProperty(exports, "DashboardLayoutSkeleton", { enumerable: true, get: function () { return DashboardLayoutSkeleton_1.DashboardLayoutSkeleton; } });
-var Sidebar_1 = require("./Sidebar");
-Object.defineProperty(exports, "MenuSidebarButton", { enumerable: true, get: function () { return Sidebar_1.MenuSidebarButton; } });
-Object.defineProperty(exports, "SidebarButton", { enumerable: true, get: function () { return Sidebar_1.SidebarButton; } });
-Object.defineProperty(exports, "SidebarCounter", { enumerable: true, get: function () { return Sidebar_1.SidebarCounter; } });
-Object.defineProperty(exports, "SidebarPopover", { enumerable: true, get: function () { return Sidebar_1.SidebarPopover; } });
-Object.defineProperty(exports, "SidebarSkeleton", { enumerable: true, get: function () { return Sidebar_1.SidebarSkeleton; } });

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

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

package/node/components/DashboardLayout/styles.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutContent = exports.DecorativeHeaderBackground = exports.Wrapper = void 0;
-const styles_1 = require("../styles");
-const constants_1 = require("./constants");
-const Sidebar_1 = require("./Sidebar");
-exports.Wrapper = (0, styles_1.styled)('div') `
+const constants_1 = require("../DashboardSidebar/constants");
+const styled_1 = require("../styled");
+const constants_2 = require("./constants");
+exports.Wrapper = (0, styled_1.styled)('div') `
   display: flex;
   justify-content: center;
 
@@ -12,7 +12,7 @@ exports.Wrapper = (0, styles_1.styled)('div') `
 
   background-color: ${({ theme }) => theme.palette.background.body};
 `;
-exports.DecorativeHeaderBackground = (0, styles_1.styled)('div', {
+exports.DecorativeHeaderBackground = (0, styled_1.styled)('div', {
     shouldForwardProp: (prop) => !['$isFocusedMode'].includes(prop),
 }) `
   position: absolute;
@@ -22,7 +22,7 @@ exports.DecorativeHeaderBackground = (0, styles_1.styled)('div', {
   left: 0;
 
   width: 100%;
-  height: ${({ $isFocusedMode }) => ($isFocusedMode ? 0 : constants_1.HEADER_HEIGHT)};
+  height: ${({ $isFocusedMode }) => ($isFocusedMode ? 0 : constants_2.HEADER_HEIGHT)};
 
   background-color: ${({ theme }) => theme.palette.background.default};
   border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
@@ -36,7 +36,7 @@ exports.DecorativeHeaderBackground = (0, styles_1.styled)('div', {
     display: none;
   }
 `;
-exports.LayoutContent = (0, styles_1.styled)('div', {
+exports.LayoutContent = (0, styled_1.styled)('div', {
     shouldForwardProp: (prop) => !['$isFocusedMode'].includes(prop),
 }) `
   display: grid;
@@ -55,7 +55,7 @@ exports.LayoutContent = (0, styles_1.styled)('div', {
     });
 }};
 
-  &:has(.${Sidebar_1.dashboardLayoutSidebarClassnames.root}) {
+  &:has(.${constants_1.dashboardSidebarClassnames.root}) {
     column-gap: ${({ theme }) => theme.spacing(4)};
 
     ${({ theme }) => theme.breakpoints.down('sm')} {

package/node/components/DashboardLayoutSkeleton/DashboardLayoutSkeleton.d.ts

@@ -0,0 +1,13 @@
+import type { PropsWithChildren, ReactElement } from 'react';
+import type { ProductProps } from '../Product';
+export type DashboardLayoutSkeletonProps = {
+    product: ProductProps;
+    productSwitcher?: (props: PropsWithChildren<{}>) => ReactElement;
+    hasSidebar?: boolean;
+    hasProfile?: boolean;
+    hasMenuOrganization?: boolean;
+};
+/**
+ * Компонент можно использовать для отображения состояния загрузки дашборда
+ */
+export declare const DashboardLayoutSkeleton: ({ product, productSwitcher, hasSidebar, hasProfile, hasMenuOrganization, }: DashboardLayoutSkeletonProps) => JSX.Element;

package/node/components/DashboardLayoutSkeleton/DashboardLayoutSkeleton.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardLayoutSkeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const constants_1 = require("../DashboardLayout/constants");
+const DashboardLayout_1 = require("../DashboardLayout/DashboardLayout");
+const Header_1 = require("../DashboardLayout/Header");
+const styles_1 = require("../DashboardLayout/styles");
+const DashboardSidebarSkeleton_1 = require("../DashboardSidebarSkeleton");
+const MenuOrganization_1 = require("../MenuOrganization");
+const placeholders_1 = require("../placeholders");
+const styles_2 = require("./styles");
+/**
+ * Компонент можно использовать для отображения состояния загрузки дашборда
+ */
+const DashboardLayoutSkeleton = ({ product, productSwitcher, hasSidebar = true, hasProfile = true, hasMenuOrganization = true, }) => {
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: constants_1.dashboardLayoutClassnames.root, children: [(0, jsx_runtime_1.jsx)(styles_1.DecorativeHeaderBackground, { role: "presentation", "$isFocusedMode": false }), (0, jsx_runtime_1.jsxs)(styles_1.LayoutContent, { "$isFocusedMode": false, children: [hasSidebar && (0, jsx_runtime_1.jsx)(DashboardSidebarSkeleton_1.DashboardSidebarSkeleton, {}), (0, jsx_runtime_1.jsx)(Header_1.Header, { productSwitcher: productSwitcher, product: product, menuOrganization: hasMenuOrganization ? () => (0, jsx_runtime_1.jsx)(MenuOrganization_1.MenuOrganizationSkeleton, {}) : undefined, profile: hasProfile
+                            ? { displayName: '', isLoading: true, menuList: [] }
+                            : undefined }), (0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout.Main, { children: (0, jsx_runtime_1.jsx)(styles_2.Content, { children: (0, jsx_runtime_1.jsx)(placeholders_1.LoadingPlaceholder, { title: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445" }) }) })] })] }));
+};
+exports.DashboardLayoutSkeleton = DashboardLayoutSkeleton;

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

@@ -0,0 +1 @@
+export { DashboardLayoutSkeleton, type DashboardLayoutSkeletonProps, } from './DashboardLayoutSkeleton';

package/node/components/DashboardLayoutSkeleton/public.js

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

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

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

package/node/components/DashboardLayoutSkeleton/styles.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Content = void 0;
+const styled_1 = require("../styled");
+exports.Content = styled_1.styled.div `
+  flex-grow: 1;
+
+  height: 100%;
+  min-height: 0;
+
+  background-color: ${({ theme }) => theme.palette.common.white};
+  border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-radius: ${({ theme }) => theme.shape.medium};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    background-color: unset;
+    border: unset;
+  }
+`;

package/node/components/DashboardMenuSidebarButton/DashboardMenuSidebarButton.d.ts

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

package/node/components/DashboardMenuSidebarButton/DashboardMenuSidebarButton.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardMenuSidebarButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Collapse_1 = require("../Collapse");
+const DashboardSidebarButton_1 = require("../DashboardSidebarButton");
+const DashboardSidebarProvider_1 = require("../DashboardSidebarProvider");
+const useLogic_1 = require("./useLogic");
+exports.DashboardMenuSidebarButton = (0, react_1.forwardRef)((props, ref) => {
+    const { collapsedIn, isPopupOpen, setIsPopupOpen } = (0, react_1.useContext)(DashboardSidebarProvider_1.DashboardSidebarContext);
+    const { handleTogglePopover, popoverAnchorRef } = (0, useLogic_1.useLogic)({
+        isPopupOpen,
+        setIsPopupOpen,
+        ref,
+    });
+    const { children, popover, ...buttonProps } = props;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DashboardSidebarButton_1.DashboardSidebarButton, { ref: popoverAnchorRef, ...buttonProps, onClick: handleTogglePopover, selected: isPopupOpen, children: (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { orientation: "horizontal", in: collapsedIn, children: children }) }), popover] }));
+});

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

@@ -0,0 +1,2 @@
+export * from './DashboardMenuSidebarButton';
+export * from './types';

package/node/components/DashboardMenuSidebarButton/index.js

@@ -0,0 +1,18 @@
+"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("./DashboardMenuSidebarButton"), exports);
+__exportStar(require("./types"), exports);

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

@@ -0,0 +1,2 @@
+export { DashboardMenuSidebarButton } from './DashboardMenuSidebarButton';
+export type { DashboardMenuSidebarButtonProps } from './types';

package/node/components/DashboardMenuSidebarButton/public.js

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

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

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+import { type ButtonProps } from '../Button';
+export type DashboardMenuSidebarButtonProps = Omit<ButtonProps, 'onClick'> & {
+    /**
+     * Контент popover
+     */
+    popover: ReactNode;
+};

package/node/components/DashboardMenuSidebarButton/useLogic/useLogic.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const DashboardSidebarProvider_1 = require("../../DashboardSidebarProvider");
+const useLogic = ({ setIsPopupOpen, isPopupOpen, ref, }) => {
+    const { popoverAnchorRef } = (0, react_1.useContext)(DashboardSidebarProvider_1.DashboardSidebarContext);
+    (0, react_1.useImperativeHandle)(ref, () => popoverAnchorRef.current);
+    const handleTogglePopover = () => {
+        setIsPopupOpen(!isPopupOpen);
+    };
+    return { handleTogglePopover, popoverAnchorRef };
+};
+exports.useLogic = useLogic;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { type DashboardSidebarProps } from './types';
+/**
+ * Основной sidebar приложения
+ */
+export declare const DashboardSidebar: import("react").ForwardRefExoticComponent<DashboardSidebarProps & import("react").RefAttributes<HTMLBaseElement>>;

package/node/components/DashboardSidebar/DashboardSidebar.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardSidebar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const DashboardSidebarSkeleton_1 = require("../DashboardSidebarSkeleton");
+const NavMenu_1 = require("../NavMenu");
+const PinButton_1 = require("../PinButton");
+const utils_1 = require("../utils");
+const constants_1 = require("./constants");
+const SidebarNav_1 = require("./SidebarNav");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+/**
+ * Основной sidebar приложения
+ */
+exports.DashboardSidebar = (0, react_1.forwardRef)((props, ref) => {
+    const { isPinned, isMobile, collapsedIn, onTogglePin, onMouseEnter, onMouseLeave, alertHeight, className, menu, header, isLoading, } = (0, useLogic_1.useLogic)(props);
+    if (isLoading) {
+        return (0, jsx_runtime_1.jsx)(DashboardSidebarSkeleton_1.DashboardSidebarSkeleton, {});
+    }
+    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { "$isPinned": isPinned, "$alertHeight": alertHeight, children: (0, jsx_runtime_1.jsx)(styles_1.SidebarRoot, { ref: ref, "$isPinned": isPinned, "$collapsedIn": collapsedIn, className: (0, utils_1.classNames)(className, constants_1.dashboardSidebarClassnames.root), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, inert: isMobile && !isPinned ? '' : undefined, children: (0, jsx_runtime_1.jsxs)(styles_1.StyledPaper, { variant: "outlined", children: [(0, jsx_runtime_1.jsxs)(styles_1.SidebarContent, { "$collapsedIn": collapsedIn, "$isPinned": isPinned, "$hasHeader": Boolean(header), children: [header && (0, jsx_runtime_1.jsx)(styles_1.SidebarHeader, { children: header }), (0, jsx_runtime_1.jsx)(SidebarNav_1.SidebarNav, { menu: (0, jsx_runtime_1.jsx)(NavMenu_1.NavMenu, { collapsedIn: collapsedIn, items: menu.items }) })] }), (0, jsx_runtime_1.jsx)(styles_1.Footer, { children: (0, jsx_runtime_1.jsx)(PinButton_1.PinButton, { isPinned: isPinned, collapsedIn: collapsedIn, onClick: onTogglePin }) })] }) }) }));
+});

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

@@ -0,0 +1,3 @@
+export declare const dashboardSidebarClassnames: {
+    root: string;
+};

package/node/components/DashboardSidebar/constants.js

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

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

@@ -0,0 +1,3 @@
+export type { DashboardSidebarProps } from './types';
+export { DashboardSidebar } from './DashboardSidebar';
+export { dashboardSidebarClassnames } from './constants';

package/node/components/DashboardSidebar/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dashboardSidebarClassnames = exports.DashboardSidebar = void 0;
+var DashboardSidebar_1 = require("./DashboardSidebar");
+Object.defineProperty(exports, "DashboardSidebar", { enumerable: true, get: function () { return DashboardSidebar_1.DashboardSidebar; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "dashboardSidebarClassnames", { enumerable: true, get: function () { return constants_1.dashboardSidebarClassnames; } });

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

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $isPinned: boolean;
+    $alertHeight: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledPaper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../Paper").PaperProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const SidebarRoot: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $isPinned: boolean;
+    $collapsedIn: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const SidebarHeader: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const SidebarContent: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $collapsedIn: boolean;
+    $isPinned: boolean;
+    $hasHeader: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Footer: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;