@astral/ui 1.34.0 → 1.35.0

package/DataGrid/DataGrid.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { DataGridColumns, DataGridRow, DataGridSort } from './types';
 export declare type DataGridProps<Data extends object = DataGridRow, SortField extends keyof Data = keyof Data> = {
+    className?: string;
     /**
      * @example <DataGrid rows={[{name: 'test'}]} />
      * Массив данных для таблицы
@@ -74,5 +75,11 @@ export declare type DataGridProps<Data extends object = DataGridRow, SortField e
      *  Используется для отображения переданного кол-ва строк при отсутствии данных
      */
     minDisplayRows?: number;
+    /**
+     * @default 50
+     * @example <DateGrid Footer={Footer} footerHeight={50} />
+     * Высота Footer, по-умолчанию указана высота Footer из кита
+     */
+    footerHeight?: number;
 };
-export declare function DataGrid<Data extends object = DataGridRow, SortField extends keyof Data = keyof Data>({ columns, rows, selectedRows, sorting, maxHeight, minDisplayRows, onRowClick, onSelectRow, Footer, noDataPlaceholder, loading, onSort, keyId, emptyCellValue, }: DataGridProps<Data, SortField>): JSX.Element;
+export declare function DataGrid<Data extends object = DataGridRow, SortField extends keyof Data = keyof Data>({ columns, rows, selectedRows, sorting, maxHeight, minDisplayRows, onRowClick, onSelectRow, Footer, noDataPlaceholder, loading, onSort, keyId, emptyCellValue, className, footerHeight, }: DataGridProps<Data, SortField>): JSX.Element;

package/DataGrid/DataGrid.js

@@ -12,8 +12,9 @@ const DataGridBody_1 = require("./DataGridBody");
 const DataGridLoader_1 = __importDefault(require("./DataGridLoader/DataGridLoader"));
 const DataGridNoData_1 = require("./DataGridNoData");
 const styles_1 = require("./styles");
-function DataGrid({ columns, rows = [], selectedRows = [], sorting, maxHeight, minDisplayRows = 10, onRowClick, onSelectRow, Footer, noDataPlaceholder, loading, onSort, keyId, emptyCellValue, }) {
+function DataGrid({ columns, rows = [], selectedRows = [], sorting, maxHeight, minDisplayRows = 10, onRowClick, onSelectRow, Footer, noDataPlaceholder, loading, onSort, keyId, emptyCellValue, className, footerHeight = 50, }) {
     const selectable = Boolean(onSelectRow);
+    const withFooter = Boolean(Footer);
     const handleSelectAllRows = (event) => {
         if (!onSelectRow) {
             return;
@@ -43,6 +44,6 @@ function DataGrid({ columns, rows = [], selectedRows = [], sorting, maxHeight, m
         }
         return null;
     }, [noDataPlaceholder, loading]);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.DataGridContainer, { children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledTableContainer, Object.assign({ maxHeight: maxHeight }, { children: [(0, jsx_runtime_1.jsxs)(Table_1.Table, Object.assign({ stickyHeader: true }, { children: [(0, jsx_runtime_1.jsx)(DataGridHead_1.DataGridHead, { onSort: onSort, rowsCount: rows.length, uncheckedRowsCount: uncheckedRowsCount, onSelectAllRows: handleSelectAllRows, selectable: selectable, sorting: sorting, columns: columns }), (0, jsx_runtime_1.jsx)(DataGridBody_1.DataGridBody, { keyId: keyId, selectedRows: selectedRows, minDisplayRows: minDisplayRows, onRowClick: onRowClick, onSelectRow: handleSelectRow, selectable: selectable, rows: rows, columns: columns, emptyCellValue: emptyCellValue, noDataPlaceholder: renderedPlaceholder() })] })), (0, jsx_runtime_1.jsx)(DataGridLoader_1.default, { loading: loading })] })), rows.length ? Footer : null] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.DataGridContainer, Object.assign({ maxHeight: maxHeight, className: className }, { children: [(0, jsx_runtime_1.jsx)(styles_1.StyledTableContainer, { children: (0, jsx_runtime_1.jsxs)(Table_1.Table, Object.assign({ stickyHeader: true }, { children: [(0, jsx_runtime_1.jsx)(DataGridHead_1.DataGridHead, { onSort: onSort, rowsCount: rows.length, uncheckedRowsCount: uncheckedRowsCount, onSelectAllRows: handleSelectAllRows, selectable: selectable, sorting: sorting, columns: columns }), (0, jsx_runtime_1.jsx)(DataGridBody_1.DataGridBody, { keyId: keyId, selectedRows: selectedRows, minDisplayRows: minDisplayRows, onRowClick: onRowClick, onSelectRow: handleSelectRow, selectable: selectable, rows: rows, columns: columns, emptyCellValue: emptyCellValue, noDataPlaceholder: renderedPlaceholder() })] })) }), (0, jsx_runtime_1.jsx)(DataGridLoader_1.default, { footerHeight: footerHeight, withFooter: withFooter, loading: loading }), Footer] })));
 }
 exports.DataGrid = DataGrid;

package/DataGrid/DataGridBody/styles.js

@@ -9,5 +9,5 @@ exports.StyledTableBody = (0, styles_1.styled)(Table_1.TableBody, {
 }) `
   position: relative;
 
-  height: ${({ empty, minDisplayRows }) => empty ? `${TABLE_ROW_HEIGHT * minDisplayRows}px` : 'auto'};
+  height: ${({ empty, minDisplayRows }) => empty ? `${TABLE_ROW_HEIGHT * minDisplayRows}px` : '100%'};
 `;

package/DataGrid/DataGridLoader/DataGridLoader.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 export declare type DataGridLoaderProps = {
     loading?: boolean;
+    withFooter: boolean;
+    footerHeight: number;
 };
-declare const DataGridLoader: ({ loading }: DataGridLoaderProps) => JSX.Element;
+declare const DataGridLoader: ({ loading, withFooter, footerHeight, }: DataGridLoaderProps) => JSX.Element;
 export default DataGridLoader;

package/DataGrid/DataGridLoader/DataGridLoader.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styles_1 = require("./styles");
-const DataGridLoader = ({ loading = false }) => {
-    return ((0, jsx_runtime_1.jsxs)(styles_1.LoaderWrapper, { children: [loading && (0, jsx_runtime_1.jsx)(styles_1.Backdrop, {}), loading ? (0, jsx_runtime_1.jsx)(styles_1.StyledLinearProgress, {}) : (0, jsx_runtime_1.jsx)(styles_1.StyledDivider, {})] }));
+const DataGridLoader = ({ loading = false, withFooter, footerHeight, }) => {
+    return ((0, jsx_runtime_1.jsxs)(styles_1.LoaderWrapper, { children: [loading && ((0, jsx_runtime_1.jsx)(styles_1.Backdrop, { withFooter: withFooter, footerHeight: footerHeight })), loading && (0, jsx_runtime_1.jsx)(styles_1.StyledLinearProgress, {}), !loading && (0, jsx_runtime_1.jsx)(styles_1.StyledDivider, {})] }));
 };
 exports.default = DataGridLoader;

package/DataGrid/DataGridLoader/styles.d.ts

@@ -1,8 +1,12 @@
 /// <reference types="react" />
+declare type BackdropProps = {
+    withFooter: boolean;
+    footerHeight: number;
+};
 export declare const Backdrop: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & BackdropProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledDivider: import("@emotion/styled").StyledComponent<import("../../Divider").DividerProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -13,3 +17,4 @@ export declare const LoaderWrapper: import("@emotion/styled").StyledComponent<{
 export declare const StyledLinearProgress: import("@emotion/styled").StyledComponent<import("@mui/material").LinearProgressProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
+export {};

package/DataGrid/DataGridLoader/styles.js

@@ -9,7 +9,9 @@ exports.Backdrop = styles_1.styled.div `
   top: 0;
 
   width: 100%;
-  height: 100%;
+
+  /* Если в DataGrid передан Footer, нужно чтобы Backdrop не перекрывал его в состоянии loading, поэтому тут его высота вычитается из всей высоты бэкдропа */
+  height: ${({ withFooter, footerHeight }) => withFooter ? `calc(100% - ${footerHeight}px) ` : '100%'};
 
   background-color: ${({ theme }) => theme.palette.grey['100']};
   opacity: 0.6;

package/DataGrid/styles.d.ts

@@ -2,6 +2,14 @@
 export declare const DataGridContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
+} & {
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TableContainerClasses> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "css" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "sx" | "children" | keyof import("@mui/material/OverridableComponent").CommonProps> & {
+    maxHeight?: number | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledTableContainer: import("@emotion/styled").StyledComponent<import("../Table").TableContainerProps & {
     theme?: import("@emotion/react").Theme | undefined;

package/DataGrid/styles.js

@@ -4,13 +4,17 @@ exports.StyledTableContainer = exports.DataGridContainer = void 0;
 const styles_1 = require("../styles");
 const Table_1 = require("../Table");
 exports.DataGridContainer = styles_1.styled.div `
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
   width: 100%;
+  height: 100%;
+  max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : 'initial')};
   overflow: hidden;
 `;
 exports.StyledTableContainer = (0, styles_1.styled)(Table_1.TableContainer, {
     shouldForwardProp: (prop) => prop !== 'maxHeight',
 }) `
-  position: relative;
-
-  max-height: ${({ maxHeight }) => `${maxHeight}px` || 'auto'};
+  height: 100%;
 `;

package/NavMenu/NavMenuItem/NavMenuItem.d.ts

@@ -1,5 +1,5 @@
 import { ElementType, ReactElement } from 'react';
-import { NavMenuItemListProps } from './NavMenuItemList/NavMenuItemList';
+import { NavMenuItemListProps } from './NavMenuItemList';
 export declare type NavMenuItemProps = {
     collapsedIn: boolean;
     item: [

package/NavMenu/NavMenuItem/NavMenuItem.js

@@ -4,8 +4,8 @@ exports.NavMenuItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Collapse_1 = require("../../Collapse");
+const NavMenuItemList_1 = require("./NavMenuItemList");
 const NavMenuItemButton_1 = require("./NavMenuItemButton");
-const NavMenuItemList_1 = require("./NavMenuItemList/NavMenuItemList");
 const NavMenuItem = (props) => {
     var _a;
     const { collapsedIn, item: [key, value], } = props;

package/NavMenu/NavMenuItem/NavMenuItemButton/styles.js

@@ -11,6 +11,41 @@ exports.NavMenuItemButtonRoot = (0, styles_1.styled)(ListItemButton_1.ListItemBu
   padding: ${({ theme }) => theme.spacing(2)};
 
   border-radius: ${({ theme }) => theme.shape.medium};
+
+  .MuiListItemIcon-root {
+    color: ${({ theme, selected }) => {
+    return selected ? theme.palette.primary['800'] : 'inherit';
+}};
+
+    transition: ${({ theme }) => {
+    return theme.transitions.create('color', {
+        easing: theme.transitions.easing.easeIn,
+        duration: theme.transitions.duration.shortest,
+    });
+}};
+  }
+
+  &.Mui-selected:hover {
+    background-color: inherit;
+  }
+
+  &:hover {
+    color: ${({ theme }) => theme.palette.primary['800']};
+
+    background-color: inherit;
+
+    .MuiListItemIcon-root {
+      color: ${({ theme }) => theme.palette.primary['800']};
+    }
+  }
+
+  &:active {
+    color: ${({ theme }) => theme.palette.primary['900']};
+
+    .MuiListItemIcon-root {
+      color: ${({ theme }) => theme.palette.primary['900']};
+    }
+  }
 `;
 exports.NavMenuItemButtonIcon = (0, styles_1.styled)(ListItemIcon_1.ListItemIcon) `
   min-width: unset;

package/esm/DataGrid/DataGrid.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { DataGridColumns, DataGridRow, DataGridSort } from './types';
 export declare type DataGridProps<Data extends object = DataGridRow, SortField extends keyof Data = keyof Data> = {
+    className?: string;
     /**
      * @example <DataGrid rows={[{name: 'test'}]} />
      * Массив данных для таблицы
@@ -74,5 +75,11 @@ export declare type DataGridProps<Data extends object = DataGridRow, SortField e
      *  Используется для отображения переданного кол-ва строк при отсутствии данных
      */
     minDisplayRows?: number;
+    /**
+     * @default 50
+     * @example <DateGrid Footer={Footer} footerHeight={50} />
+     * Высота Footer, по-умолчанию указана высота Footer из кита
+     */
+    footerHeight?: number;
 };
-export declare function DataGrid<Data extends object = DataGridRow, SortField extends keyof Data = keyof Data>({ columns, rows, selectedRows, sorting, maxHeight, minDisplayRows, onRowClick, onSelectRow, Footer, noDataPlaceholder, loading, onSort, keyId, emptyCellValue, }: DataGridProps<Data, SortField>): JSX.Element;
+export declare function DataGrid<Data extends object = DataGridRow, SortField extends keyof Data = keyof Data>({ columns, rows, selectedRows, sorting, maxHeight, minDisplayRows, onRowClick, onSelectRow, Footer, noDataPlaceholder, loading, onSort, keyId, emptyCellValue, className, footerHeight, }: DataGridProps<Data, SortField>): JSX.Element;

package/esm/DataGrid/DataGrid.js

@@ -6,8 +6,9 @@ import { DataGridBody } from './DataGridBody';
 import DataGridLoader from './DataGridLoader/DataGridLoader';
 import { DataGridNoData } from './DataGridNoData';
 import { DataGridContainer, StyledTableContainer } from './styles';
-export function DataGrid({ columns, rows = [], selectedRows = [], sorting, maxHeight, minDisplayRows = 10, onRowClick, onSelectRow, Footer, noDataPlaceholder, loading, onSort, keyId, emptyCellValue, }) {
+export function DataGrid({ columns, rows = [], selectedRows = [], sorting, maxHeight, minDisplayRows = 10, onRowClick, onSelectRow, Footer, noDataPlaceholder, loading, onSort, keyId, emptyCellValue, className, footerHeight = 50, }) {
     const selectable = Boolean(onSelectRow);
+    const withFooter = Boolean(Footer);
     const handleSelectAllRows = (event) => {
         if (!onSelectRow) {
             return;
@@ -37,5 +38,5 @@ export function DataGrid({ columns, rows = [], selectedRows = [], sorting, maxHe
         }
         return null;
     }, [noDataPlaceholder, loading]);
-    return (_jsxs(DataGridContainer, { children: [_jsxs(StyledTableContainer, Object.assign({ maxHeight: maxHeight }, { children: [_jsxs(Table, Object.assign({ stickyHeader: true }, { children: [_jsx(DataGridHead, { onSort: onSort, rowsCount: rows.length, uncheckedRowsCount: uncheckedRowsCount, onSelectAllRows: handleSelectAllRows, selectable: selectable, sorting: sorting, columns: columns }), _jsx(DataGridBody, { keyId: keyId, selectedRows: selectedRows, minDisplayRows: minDisplayRows, onRowClick: onRowClick, onSelectRow: handleSelectRow, selectable: selectable, rows: rows, columns: columns, emptyCellValue: emptyCellValue, noDataPlaceholder: renderedPlaceholder() })] })), _jsx(DataGridLoader, { loading: loading })] })), rows.length ? Footer : null] }));
+    return (_jsxs(DataGridContainer, Object.assign({ maxHeight: maxHeight, className: className }, { children: [_jsx(StyledTableContainer, { children: _jsxs(Table, Object.assign({ stickyHeader: true }, { children: [_jsx(DataGridHead, { onSort: onSort, rowsCount: rows.length, uncheckedRowsCount: uncheckedRowsCount, onSelectAllRows: handleSelectAllRows, selectable: selectable, sorting: sorting, columns: columns }), _jsx(DataGridBody, { keyId: keyId, selectedRows: selectedRows, minDisplayRows: minDisplayRows, onRowClick: onRowClick, onSelectRow: handleSelectRow, selectable: selectable, rows: rows, columns: columns, emptyCellValue: emptyCellValue, noDataPlaceholder: renderedPlaceholder() })] })) }), _jsx(DataGridLoader, { footerHeight: footerHeight, withFooter: withFooter, loading: loading }), Footer] })));
 }

package/esm/DataGrid/DataGridBody/styles.js

@@ -6,5 +6,5 @@ export const StyledTableBody = styled(TableBody, {
 }) `
   position: relative;
 
-  height: ${({ empty, minDisplayRows }) => empty ? `${TABLE_ROW_HEIGHT * minDisplayRows}px` : 'auto'};
+  height: ${({ empty, minDisplayRows }) => empty ? `${TABLE_ROW_HEIGHT * minDisplayRows}px` : '100%'};
 `;

package/esm/DataGrid/DataGridLoader/DataGridLoader.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 export declare type DataGridLoaderProps = {
     loading?: boolean;
+    withFooter: boolean;
+    footerHeight: number;
 };
-declare const DataGridLoader: ({ loading }: DataGridLoaderProps) => JSX.Element;
+declare const DataGridLoader: ({ loading, withFooter, footerHeight, }: DataGridLoaderProps) => JSX.Element;
 export default DataGridLoader;

package/esm/DataGrid/DataGridLoader/DataGridLoader.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Backdrop, LoaderWrapper, StyledDivider, StyledLinearProgress, } from './styles';
-const DataGridLoader = ({ loading = false }) => {
-    return (_jsxs(LoaderWrapper, { children: [loading && _jsx(Backdrop, {}), loading ? _jsx(StyledLinearProgress, {}) : _jsx(StyledDivider, {})] }));
+const DataGridLoader = ({ loading = false, withFooter, footerHeight, }) => {
+    return (_jsxs(LoaderWrapper, { children: [loading && (_jsx(Backdrop, { withFooter: withFooter, footerHeight: footerHeight })), loading && _jsx(StyledLinearProgress, {}), !loading && _jsx(StyledDivider, {})] }));
 };
 export default DataGridLoader;

package/esm/DataGrid/DataGridLoader/styles.d.ts

@@ -1,8 +1,12 @@
 /// <reference types="react" />
+declare type BackdropProps = {
+    withFooter: boolean;
+    footerHeight: number;
+};
 export declare const Backdrop: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & BackdropProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledDivider: import("@emotion/styled").StyledComponent<import("../../Divider").DividerProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -13,3 +17,4 @@ export declare const LoaderWrapper: import("@emotion/styled").StyledComponent<{
 export declare const StyledLinearProgress: import("@emotion/styled").StyledComponent<import("@mui/material").LinearProgressProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
+export {};

package/esm/DataGrid/DataGridLoader/styles.js

@@ -6,7 +6,9 @@ export const Backdrop = styled.div `
   top: 0;
 
   width: 100%;
-  height: 100%;
+
+  /* Если в DataGrid передан Footer, нужно чтобы Backdrop не перекрывал его в состоянии loading, поэтому тут его высота вычитается из всей высоты бэкдропа */
+  height: ${({ withFooter, footerHeight }) => withFooter ? `calc(100% - ${footerHeight}px) ` : '100%'};
 
   background-color: ${({ theme }) => theme.palette.grey['100']};
   opacity: 0.6;

package/esm/DataGrid/styles.d.ts

@@ -2,6 +2,14 @@
 export declare const DataGridContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
+} & {
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TableContainerClasses> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "css" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "sx" | "children" | keyof import("@mui/material/OverridableComponent").CommonProps> & {
+    maxHeight?: number | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledTableContainer: import("@emotion/styled").StyledComponent<import("../Table").TableContainerProps & {
     theme?: import("@emotion/react").Theme | undefined;

package/esm/DataGrid/styles.js

@@ -1,13 +1,17 @@
 import { styled } from '../styles';
 import { TableContainer } from '../Table';
 export const DataGridContainer = styled.div `
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
   width: 100%;
+  height: 100%;
+  max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : 'initial')};
   overflow: hidden;
 `;
 export const StyledTableContainer = styled(TableContainer, {
     shouldForwardProp: (prop) => prop !== 'maxHeight',
 }) `
-  position: relative;
-
-  max-height: ${({ maxHeight }) => `${maxHeight}px` || 'auto'};
+  height: 100%;
 `;

package/esm/NavMenu/NavMenuItem/NavMenuItem.d.ts

@@ -1,5 +1,5 @@
 import { ElementType, ReactElement } from 'react';
-import { NavMenuItemListProps } from './NavMenuItemList/NavMenuItemList';
+import { NavMenuItemListProps } from './NavMenuItemList';
 export declare type NavMenuItemProps = {
     collapsedIn: boolean;
     item: [

package/esm/NavMenu/NavMenuItem/NavMenuItem.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState, } from 'react';
 import { Collapse } from '../../Collapse';
+import { NavMenuItemList } from './NavMenuItemList';
 import { NavMenuItemButton } from './NavMenuItemButton';
-import { NavMenuItemList } from './NavMenuItemList/NavMenuItemList';
 export const NavMenuItem = (props) => {
     var _a;
     const { collapsedIn, item: [key, value], } = props;

package/esm/NavMenu/NavMenuItem/NavMenuItemButton/styles.js

@@ -8,6 +8,41 @@ export const NavMenuItemButtonRoot = styled(ListItemButton) `
   padding: ${({ theme }) => theme.spacing(2)};
 
   border-radius: ${({ theme }) => theme.shape.medium};
+
+  .MuiListItemIcon-root {
+    color: ${({ theme, selected }) => {
+    return selected ? theme.palette.primary['800'] : 'inherit';
+}};
+
+    transition: ${({ theme }) => {
+    return theme.transitions.create('color', {
+        easing: theme.transitions.easing.easeIn,
+        duration: theme.transitions.duration.shortest,
+    });
+}};
+  }
+
+  &.Mui-selected:hover {
+    background-color: inherit;
+  }
+
+  &:hover {
+    color: ${({ theme }) => theme.palette.primary['800']};
+
+    background-color: inherit;
+
+    .MuiListItemIcon-root {
+      color: ${({ theme }) => theme.palette.primary['800']};
+    }
+  }
+
+  &:active {
+    color: ${({ theme }) => theme.palette.primary['900']};
+
+    .MuiListItemIcon-root {
+      color: ${({ theme }) => theme.palette.primary['900']};
+    }
+  }
 `;
 export const NavMenuItemButtonIcon = styled(ListItemIcon) `
   min-width: unset;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@astral/ui",
-  "version": "1.34.0",
+  "version": "1.35.0",
   "browser": "./esm/index.js",
   "main": "./index.js",
   "dependencies": {
-    "@astral/icons": "^1.34.0",
+    "@astral/icons": "^1.35.0",
     "@emotion/cache": "11.7.1",
     "@emotion/react": "11.9.0",
     "@emotion/server": "11.4.0",