@astral/ui 0.37.0 → 0.40.1

package/esm/CircularProgress/CircularProgress.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { CircularProgressProps } from './types';
-export declare const CircularProgress: import("react").ForwardRefExoticComponent<Pick<CircularProgressProps, "tabIndex" | "className" | "slot" | "style" | "title" | "css" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "variant" | "classes" | "sx" | "disableShrink" | "thickness"> & import("react").RefAttributes<HTMLElement>>;
+export declare const CircularProgress: import("react").ForwardRefExoticComponent<Pick<CircularProgressProps, "tabIndex" | "className" | "slot" | "style" | "title" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant" | "size" | "classes" | "sx" | "disableShrink" | "thickness"> & import("react").RefAttributes<HTMLElement>>;
 export default CircularProgress;

package/esm/CircularProgress/CircularProgress.js

@@ -28,6 +28,6 @@ export var CircularProgress = forwardRef(function (props, ref) {
     var size = useMemo(function () {
         return sizeProp === 'small' ? 16 : 24;
     }, [sizeProp]);
-    return (_jsx(MuiCircularProgress, __assign({ ref: ref }, restProps, { size: size, color: "inherit", "data-color": color }), void 0));
+    return (_jsx(MuiCircularProgress, __assign({ ref: ref }, restProps, { size: size, color: "inherit", "data-color": color })));
 });
 export default CircularProgress;

package/esm/CircularProgress/CircularProgressStory.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { CircularProgress } from '../CircularProgress';
 export var CircularProgressStory = function (props) {
     var size = props.size, color = props.color;
-    return _jsx(CircularProgress, { size: size, color: color }, void 0);
+    return _jsx(CircularProgress, { size: size, color: color });
 };
 export default CircularProgressStory;

package/esm/CircularProgress/CircularProgressStoryTemplate.js

@@ -12,6 +12,6 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CircularProgressStory } from './CircularProgressStory';
 export var CircularProgressStoryTemplate = function (args) {
-    return _jsx(CircularProgressStory, __assign({}, args), void 0);
+    return _jsx(CircularProgressStory, __assign({}, args));
 };
 export default CircularProgressStoryTemplate;

package/esm/ContentState/ContentState.js

@@ -9,21 +9,23 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Fragment } from 'react';
 import { Button, CircularProgress, Placeholder, Typography } from '..';
+import { LoadingContainer } from './styles';
 export var ContentState = function (props) {
-    var isLoading = props.isLoading, _a = props.loadingContent, LoadingContent = _a === void 0 ? _jsx(CircularProgress, { color: "primary" }, void 0) : _a, isError = props.isError, errorState = props.errorState, isCustom = props.isCustom, customState = props.customState, children = props.children;
-    if (isLoading)
-        return _jsx(Fragment, { children: LoadingContent }, void 0);
+    var isLoading = props.isLoading, _a = props.loadingContent, LoadingContent = _a === void 0 ? _jsx(CircularProgress, { color: "primary" }) : _a, isError = props.isError, errorState = props.errorState, isCustom = props.isCustom, customState = props.customState, children = props.children;
+    if (isLoading) {
+        return _jsx(LoadingContainer, { children: LoadingContent });
+    }
     if (isCustom && customState) {
-        return _jsx(Placeholder, __assign({}, customState), void 0);
+        return _jsx(Placeholder, __assign({}, customState));
     }
     if (isError && errorState) {
-        var _b = errorState.title, title = _b === void 0 ? 'Произошла ошибка' : _b, imgAlt = errorState.imgAlt, imgSrc = errorState.imgSrc, errorList = errorState.errorList, onRetry = errorState.onRetry, _c = errorState.actions, actions = _c === void 0 ? _jsx(Button, __assign({ onClick: onRetry }, { children: "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0441\u043D\u043E\u0432\u0430" }), void 0) : _c;
-        var description = errorList.map(function (item, index) { return (_jsxs(Fragment, { children: [_jsx(Typography, __assign({ component: "span" }, { children: item }), void 0), _jsx("br", {}, void 0)] }, index)); });
-        return (_jsx(Placeholder, { title: title, description: description, imgAlt: imgAlt, imgSrc: imgSrc, Actions: actions }, void 0));
+        var _b = errorState.title, title = _b === void 0 ? 'Произошла ошибка' : _b, imgAlt = errorState.imgAlt, imgSrc = errorState.imgSrc, errorList = errorState.errorList, onRetry = errorState.onRetry, _c = errorState.actions, actions = _c === void 0 ? _jsx(Button, __assign({ onClick: onRetry }, { children: "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0441\u043D\u043E\u0432\u0430" })) : _c;
+        var description = errorList.map(function (item, index) { return (_jsxs(Fragment, { children: [_jsx(Typography, __assign({ component: "span" }, { children: item })), _jsx("br", {})] }, index)); });
+        return (_jsx(Placeholder, { title: title, description: description, imgAlt: imgAlt, imgSrc: imgSrc, Actions: actions }));
     }
-    return _jsx(Fragment, { children: children }, void 0);
+    return _jsx(_Fragment, { children: children });
 };
 export default ContentState;

package/esm/ContentState/styles.d.ts

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

package/esm/ContentState/styles.js

@@ -0,0 +1,7 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { styled } from '../styles';
+export var LoadingContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n"])));
+var templateObject_1;

package/esm/DashboardLayout/DashboardLayout.js

@@ -5,7 +5,7 @@ import { Main } from './Main';
 import { DashboardLayoutRoot } from './styled';
 export var DashboardLayout = function (props) {
     var children = props.children;
-    return _jsx(DashboardLayoutRoot, { children: children }, void 0);
+    return _jsx(DashboardLayoutRoot, { children: children });
 };
 DashboardLayout.Header = Header;
 DashboardLayout.Sidebar = Sidebar;

package/esm/DashboardLayout/DashboardLayoutStory.js

@@ -18,6 +18,6 @@ import { ListItemText } from '../ListItemText';
 import { DashboardLayout } from '../DashboardLayout';
 export var DashboardLayoutStory = function (props) {
     var header = props.header;
-    return (_jsxs(DashboardLayout, { children: [_jsx(DashboardLayout.Header, __assign({}, header), void 0), _jsx(DashboardLayout.Sidebar, { children: _jsxs(List, { children: [_jsxs(ListItemButton, { children: [_jsx(ListItemIcon, { children: _jsx(ProfileOutlineMd, {}, void 0) }, void 0), _jsx(ListItemText, { children: "\u0413\u043B\u0430\u0432\u043D\u0430\u044F" }, void 0)] }, void 0), _jsxs(ListItemButton, { children: [_jsx(ListItemIcon, { children: _jsx(CompanyOutlineMd, {}, void 0) }, void 0), _jsx(ListItemText, { children: "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u044B" }, void 0)] }, void 0), _jsxs(ListItemButton, { children: [_jsx(ListItemIcon, { children: _jsx(SettingsFillMd, {}, void 0) }, void 0), _jsx(ListItemText, { children: "\u041A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u044B" }, void 0)] }, void 0)] }, void 0) }, void 0), _jsx(DashboardLayout.Main, { children: "main-content" }, void 0)] }, void 0));
+    return (_jsxs(DashboardLayout, { children: [_jsx(DashboardLayout.Header, __assign({}, header)), _jsx(DashboardLayout.Sidebar, { children: _jsxs(List, { children: [_jsxs(ListItemButton, { children: [_jsx(ListItemIcon, { children: _jsx(ProfileOutlineMd, {}) }), _jsx(ListItemText, { children: "\u0413\u043B\u0430\u0432\u043D\u0430\u044F" })] }), _jsxs(ListItemButton, { children: [_jsx(ListItemIcon, { children: _jsx(CompanyOutlineMd, {}) }), _jsx(ListItemText, { children: "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u044B" })] }), _jsxs(ListItemButton, { children: [_jsx(ListItemIcon, { children: _jsx(SettingsFillMd, {}) }), _jsx(ListItemText, { children: "\u041A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u044B" })] })] }) }), _jsx(DashboardLayout.Main, { children: "main-content" })] }));
 };
 export default DashboardLayoutStory;

package/esm/DashboardLayout/DashboardLayoutStoryTemplate.js

@@ -12,6 +12,6 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DashboardLayoutStory } from './DashboardLayoutStory';
 export var DashboardLayoutStoryTemplate = function (args) {
-    return _jsx(DashboardLayoutStory, __assign({}, args), void 0);
+    return _jsx(DashboardLayoutStory, __assign({}, args));
 };
 export default DashboardLayoutStoryTemplate;

package/esm/DashboardLayout/Header/Header.js

@@ -19,6 +19,6 @@ export var Header = forwardRef(function (props, ref) {
     var ProductSwitcher = props.productSwitcher, product = props.product, 
     // menu: Menu,
     profile = props.profile;
-    return (_jsxs(HeaderRoot, __assign({ ref: ref }, { children: [_jsxs(HeaderNav, { children: [ProductSwitcher && _jsx(ProductSwitcher, {}, void 0), _jsx(Product, __assign({}, product), void 0)] }, void 0), _jsx(Profile, __assign({}, profile), void 0)] }), void 0));
+    return (_jsxs(HeaderRoot, __assign({ ref: ref }, { children: [_jsxs(HeaderNav, { children: [ProductSwitcher && _jsx(ProductSwitcher, {}), _jsx(Product, __assign({}, product))] }), _jsx(Profile, __assign({}, profile))] })));
 });
 export default Header;

package/esm/DashboardLayout/Main/Main.js

@@ -14,6 +14,6 @@ import { forwardRef } from 'react';
 import { MainRoot } from './styled';
 export var Main = forwardRef(function (_a, ref) {
     var children = _a.children;
-    return _jsx(MainRoot, __assign({ ref: ref }, { children: children }), void 0);
+    return _jsx(MainRoot, __assign({ ref: ref }, { children: children }));
 });
 export default Main;

package/esm/DashboardLayout/Sidebar/Sidebar.js

@@ -14,6 +14,6 @@ import { forwardRef } from 'react';
 import { SidebarRoot, SidebarToggler } from './styled';
 export var Sidebar = forwardRef(function (_a, ref) {
     var children = _a.children;
-    return (_jsxs(SidebarRoot, __assign({ ref: ref }, { children: [_jsx("nav", { children: children }, void 0), _jsx(SidebarToggler, __assign({ variant: "text" }, { children: "\u0421\u0432\u0435\u0440\u043D\u0443\u0442\u044C \u043C\u0435\u043D\u044E" }), void 0)] }), void 0));
+    return (_jsxs(SidebarRoot, __assign({ ref: ref }, { children: [_jsx("nav", { children: children }), _jsx(SidebarToggler, __assign({ variant: "text" }, { children: "\u0421\u0432\u0435\u0440\u043D\u0443\u0442\u044C \u043C\u0435\u043D\u044E" }))] })));
 });
 export default Sidebar;

package/esm/DashboardLayout/Sidebar/styled.d.ts

@@ -3,6 +3,6 @@ export declare const SidebarRoot: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export declare const SidebarToggler: import("@emotion/styled").StyledComponent<Pick<import("../../Button").ButtonProps, "disabled" | "component" | "href" | "onFocusVisible" | "tabIndex" | "type" | "action" | "children" | "form" | "slot" | "title" | "key" | "css" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "variant" | "selected" | keyof import("@mui/material/OverridableComponent").CommonProps | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon" | "loading" | "loadingIndicator" | "loadingPosition"> & import("react").RefAttributes<HTMLButtonElement> & {
+export declare const SidebarToggler: import("@emotion/styled").StyledComponent<Pick<import("../../Button").ButtonProps, "disabled" | "href" | "onFocusVisible" | "tabIndex" | "type" | "action" | "children" | "form" | "slot" | "title" | "key" | "css" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant" | "size" | "component" | "selected" | keyof import("@mui/material/OverridableComponent").CommonProps | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon" | "loading" | "loadingIndicator" | "loadingPosition"> & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/esm/DataGrid/DataGrid.d.ts

@@ -1,3 +1,73 @@
-/// <reference types="react" />
-import { DataGridProps } from './types';
-export declare function DataGrid<T>({ columns, rows, selectedRows, sorting, maxHeight, minDisplayRows, onSelectRow, Footer, loading, onSort, keyId, }: DataGridProps<T>): JSX.Element;
+import { ReactNode } from 'react';
+import { DataGridColumns, DataGridRow, DataGridSort } from './types';
+export declare type DataGridProps<Data = DataGridRow, SortField extends keyof Data = keyof Data> = {
+    /**
+     * @example <DataGrid rows={[{name: 'test'}]} />
+     * Массив данных для таблицы
+     */
+    rows: Data[];
+    /**
+     * @example <DataGrid columns={[
+     *   {
+     *     field: 'test',
+     *     label: 'Тестовая колонка',
+     *     sortable: true,
+     *   }]} />
+     * Конфигурация колонок для таблицы
+     */
+    columns: DataGridColumns<Data>[];
+    keyId: keyof DataGridRow;
+    /**
+     * @example <DataGrid onRowClick={(row) => console.log('clicked')} />
+     * Обработчик клика строки таблицы
+     */
+    onRowClick?: (row: Data) => void;
+    /**
+     * @example <DataGrid selectedRows={[{name: 'test'}]} />
+     * Массив выбранных строк
+     */
+    selectedRows?: Array<Data>;
+    /**
+     * @example <DataGrid onSelectRow={(row) => console.log(select)} />
+     * Обработчик выбора строки
+     */
+    onSelectRow?: (row: Data[]) => void;
+    /**
+     * @example <DataGrid sorting={[{fieldId: 'test', sort: 'asc'}]} />
+     * Массив сортируемых колонок
+     */
+    sorting?: DataGridSort<SortField>[];
+    /**
+     * @example <DataGrid onSort={({fieldId: 'test', sort: 'asc'}) => console.log('sorted')} />
+     * Обработчик сортировки
+     */
+    onSort: (sorting: DataGridSort<SortField>[]) => void;
+    /**
+     * @example <DataGrid  Footer={<DataGridPagination />} />
+     * Компонент кастомного футера (н-р Pagination)
+     */
+    Footer?: ReactNode;
+    /**
+     * @example <DataGrid  maxHeight={900} />
+     * Максимальная высота для таблицы
+     */
+    maxHeight?: number;
+    /**
+     * @example <DataGrid  loading={true} />
+     * Флажок загрузки данных
+     */
+    loading?: boolean;
+    /**
+     * @default '-'
+     * @example <DataGrid  emptyCellValue{'Нет данных'} />
+     * Заглушка для пустых ячеек (если отсутствует field и filter и renderCell)
+     */
+    emptyCellValue?: ReactNode;
+    /**
+     * @default 10
+     * @example <DataGrid  minDisplayRows{10} />
+     *  используется для отображения переданного кол-ва строк при отсутствии данных
+     */
+    minDisplayRows?: number;
+};
+export declare function DataGrid<Data extends object, SortField extends keyof Data>({ columns, rows, selectedRows, sorting, maxHeight, minDisplayRows, onRowClick, onSelectRow, Footer, loading, onSort, keyId, emptyCellValue, }: DataGridProps<Data, SortField>): JSX.Element;

package/esm/DataGrid/DataGrid.js

@@ -26,11 +26,12 @@ import { DataGridBody } from './DataGridBody';
 import DataGridLoader from './DataGridLoader/DataGridLoader';
 import { DataGridContainer, StyledTableContainer } from './styled';
 export function DataGrid(_a) {
-    var columns = _a.columns, _b = _a.rows, rows = _b === void 0 ? [] : _b, _c = _a.selectedRows, selectedRows = _c === void 0 ? [] : _c, _d = _a.sorting, sorting = _d === void 0 ? [] : _d, maxHeight = _a.maxHeight, _e = _a.minDisplayRows, minDisplayRows = _e === void 0 ? 10 : _e, onSelectRow = _a.onSelectRow, Footer = _a.Footer, loading = _a.loading, onSort = _a.onSort, keyId = _a.keyId;
+    var columns = _a.columns, _b = _a.rows, rows = _b === void 0 ? [] : _b, _c = _a.selectedRows, selectedRows = _c === void 0 ? [] : _c, _d = _a.sorting, sorting = _d === void 0 ? [] : _d, maxHeight = _a.maxHeight, _e = _a.minDisplayRows, minDisplayRows = _e === void 0 ? 10 : _e, onRowClick = _a.onRowClick, onSelectRow = _a.onSelectRow, Footer = _a.Footer, loading = _a.loading, onSort = _a.onSort, keyId = _a.keyId, emptyCellValue = _a.emptyCellValue;
     var selectable = Boolean(onSelectRow);
     var handleSelectAllRows = function (event) {
-        if (!onSelectRow)
+        if (!onSelectRow) {
             return;
+        }
         if (event.target.checked) {
             var mergedSelectedRows = __spreadArray(__spreadArray([], selectedRows, true), rows, true);
             return onSelectRow(mergedSelectedRows);
@@ -40,18 +41,19 @@ export function DataGrid(_a) {
     };
     var handleSelectRow = useCallback(function (row) {
         return function (event) {
-            if (!onSelectRow)
+            if (!onSelectRow) {
                 return;
+            }
             if (event.target.checked) {
                 return onSelectRow(__spreadArray(__spreadArray([], selectedRows, true), [row], false));
             }
             return onSelectRow(selectedRows.filter(function (selectedRow) { return selectedRow[keyId] !== row[keyId]; }));
         };
-    }, [selectedRows, onSelectRow]);
+    }, [selectedRows, onSelectRow, keyId]);
     var uncheckedRowsCount = useMemo(function () {
         return rows.filter(function (row) {
             return !selectedRows.find(function (selectedRow) { return selectedRow[keyId] === row[keyId]; });
         }).length;
     }, [rows, selectedRows, keyId]);
-    return (_jsxs(DataGridContainer, { children: [_jsxs(StyledTableContainer, __assign({ maxHeight: maxHeight }, { children: [_jsxs(Table, __assign({ stickyHeader: true }, { children: [_jsx(DataGridHead, { onSort: onSort, rowsCount: rows.length, uncheckedRowsCount: uncheckedRowsCount, onSelectAllRows: handleSelectAllRows, selectable: selectable, sorting: sorting, columns: columns }, void 0), _jsx(DataGridBody, { keyId: keyId, selectedRows: selectedRows, minDisplayRows: minDisplayRows, onSelectRow: handleSelectRow, selectable: selectable, rows: rows, columns: columns }, void 0)] }), void 0), _jsx(DataGridLoader, { loading: loading }, void 0)] }), void 0), Footer] }, void 0));
+    return (_jsxs(DataGridContainer, { children: [_jsxs(StyledTableContainer, __assign({ maxHeight: maxHeight }, { children: [_jsxs(Table, __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 })] })), _jsx(DataGridLoader, { loading: loading })] })), Footer] }));
 }

package/esm/DataGrid/DataGridBody/DataGridBody.d.ts

@@ -1,3 +1,14 @@
-/// <reference types="react" />
-import { DataGridBodyProps } from './types';
-export declare function DataGridBody<T>({ rows, columns, selectable, onSelectRow, selectedRows, minDisplayRows, keyId, }: DataGridBodyProps<T>): JSX.Element;
+import { ChangeEvent, ReactNode } from 'react';
+import { DataGridColumns, DataGridRow } from '../types';
+export declare type DataGridBodyProps<Data> = {
+    columns: DataGridColumns<Data>[];
+    keyId: keyof DataGridRow;
+    onRowClick?: (row: Data) => void;
+    selectable?: boolean;
+    selectedRows?: Array<Data>;
+    rows: Data[];
+    onSelectRow: (row: Data) => (event: ChangeEvent<HTMLInputElement>) => void;
+    minDisplayRows: number;
+    emptyCellValue?: ReactNode;
+};
+export declare function DataGridBody<Data>({ rows, columns, selectable, onRowClick, onSelectRow, selectedRows, minDisplayRows, keyId, emptyCellValue, }: DataGridBodyProps<Data>): JSX.Element;

package/esm/DataGrid/DataGridBody/DataGridBody.js

@@ -16,20 +16,25 @@ import { DataGridCell } from '../DataGridCell';
 import { Checkbox } from '../../Checkbox';
 import { StyledTableBody } from './styled';
 export function DataGridBody(_a) {
-    var rows = _a.rows, columns = _a.columns, selectable = _a.selectable, onSelectRow = _a.onSelectRow, _b = _a.selectedRows, selectedRows = _b === void 0 ? [] : _b, minDisplayRows = _a.minDisplayRows, keyId = _a.keyId;
+    var rows = _a.rows, columns = _a.columns, selectable = _a.selectable, onRowClick = _a.onRowClick, onSelectRow = _a.onSelectRow, _b = _a.selectedRows, selectedRows = _b === void 0 ? [] : _b, minDisplayRows = _a.minDisplayRows, keyId = _a.keyId, emptyCellValue = _a.emptyCellValue;
     var renderCells = useCallback(function (row, rowId) {
         return columns.map(function (cell, index) {
             var cellId = "".concat(rowId, "-").concat(index);
-            return _jsx(DataGridCell, { row: row, cell: cell }, cellId);
+            return (_jsx(DataGridCell, { row: row, cell: cell, emptyCellValue: emptyCellValue }, cellId));
         });
     }, [columns]);
+    var handleRowClick = function (row) { return function () {
+        if (onRowClick) {
+            onRowClick(row);
+        }
+    }; };
     var renderedRows = useMemo(function () {
         return rows.map(function (row) {
             var rowId = row[keyId];
             var checked = selectable &&
                 Boolean(selectedRows.find(function (selectedRow) { return selectedRow[keyId] === rowId; }));
-            return (_jsxs(TableRow, { children: [selectable && (_jsx(TableCell, __assign({ padding: "checkbox" }, { children: _jsx(Checkbox, { checked: checked, onChange: onSelectRow(row) }, void 0) }), void 0)), renderCells(row, rowId)] }, rowId));
+            return (_jsxs(TableRow, __assign({ hover: Boolean(onRowClick), onClick: handleRowClick(row) }, { children: [selectable && (_jsx(TableCell, __assign({ padding: "checkbox", onClick: function (event) { return event.stopPropagation(); } }, { children: _jsx(Checkbox, { checked: checked, onChange: onSelectRow(row) }) }))), renderCells(row, rowId)] }), rowId));
         });
-    }, [rows, keyId, selectable, selectedRows, onSelectRow, columns]);
-    return (_jsx(StyledTableBody, __assign({ empty: !rows.length, minDisplayRows: minDisplayRows }, { children: renderedRows }), void 0));
+    }, [rows, keyId, selectable, selectedRows, onSelectRow, onRowClick, columns]);
+    return (_jsx(StyledTableBody, __assign({ empty: !rows.length, minDisplayRows: minDisplayRows }, { children: renderedRows })));
 }

package/esm/DataGrid/DataGridBody/styled.d.ts

@@ -3,7 +3,7 @@ export declare const StyledTableBody: import("@emotion/styled").StyledComponent<
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").TableBodyClasses> | undefined;
     sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "tabIndex" | "children" | "className" | "slot" | "style" | "title" | "key" | "css" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "key" | "css" | keyof import("react").HTMLAttributes<HTMLTableSectionElement>> & {
     ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
 }, "children" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx"> & {
     theme?: import("@emotion/react").Theme | undefined;

package/esm/DataGrid/DataGridCell/DataGridCell.d.ts

@@ -1,3 +1,8 @@
-/// <reference types="react" />
-import { CellProps } from './types';
-export declare function DataGridCell<T>({ row, cell: { field, renderCell, format, align }, }: CellProps<T>): JSX.Element;
+import { ReactNode } from 'react';
+import { DataGridColumns } from '../types';
+export declare type CellProps<Data> = {
+    row: Data;
+    cell: DataGridColumns<Data>;
+    emptyCellValue?: ReactNode;
+};
+export declare function DataGridCell<Data>({ row, cell: { field, renderCell, format, align }, emptyCellValue, }: CellProps<Data>): JSX.Element;

package/esm/DataGrid/DataGridCell/DataGridCell.js

@@ -9,17 +9,20 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { TableCell } from '../../Table';
 import { Typography } from '../../Typography';
 export function DataGridCell(_a) {
-    var row = _a.row, _b = _a.cell, field = _b.field, renderCell = _b.renderCell, format = _b.format, _c = _b.align, align = _c === void 0 ? 'left' : _c;
+    var row = _a.row, _b = _a.cell, field = _b.field, renderCell = _b.renderCell, format = _b.format, _c = _b.align, align = _c === void 0 ? 'left' : _c, _d = _a.emptyCellValue, emptyCellValue = _d === void 0 ? '-' : _d;
     var formattedValue = useMemo(function () {
         if (format) {
             return format(row);
         }
-        return row[field];
-    }, [field, format, row]);
-    return (_jsxs(TableCell, __assign({ align: align }, { children: [renderCell && renderCell(row), !renderCell && _jsx(Typography, { children: formattedValue }, void 0)] }), void 0));
+        if (field) {
+            return row[field];
+        }
+        return emptyCellValue;
+    }, [field, format, row, emptyCellValue]);
+    return (_jsxs(TableCell, __assign({ align: align }, { children: [renderCell && renderCell(row), !renderCell && (_jsx(Typography, { children: _jsx(_Fragment, { children: formattedValue }) }))] })));
 }

package/esm/DataGrid/DataGridHead/DataGridHead.d.ts

@@ -1,3 +1,12 @@
-/// <reference types="react" />
-import { DataGridHeadProps } from './types';
-export declare function DataGridHead<T>({ columns, selectable, onSelectAllRows, rowsCount, onSort, sorting, uncheckedRowsCount, }: DataGridHeadProps<T>): JSX.Element;
+import { ChangeEvent } from 'react';
+import { DataGridColumns, DataGridRow, DataGridSort } from '../types';
+export declare type DataGridHeadProps<Data = DataGridRow, SortField extends keyof Data = keyof Data> = {
+    columns: DataGridColumns<Data>[];
+    selectable: boolean;
+    onSelectAllRows: (event: ChangeEvent<HTMLInputElement>) => void;
+    sorting: DataGridSort<SortField>[];
+    onSort: (sorting: DataGridSort<SortField>[]) => void;
+    uncheckedRowsCount: number;
+    rowsCount: number;
+};
+export declare function DataGridHead<Data, SortField extends keyof Data>({ columns, selectable, onSelectAllRows, rowsCount, onSort, sorting, uncheckedRowsCount, }: DataGridHeadProps<Data, SortField>): JSX.Element;

package/esm/DataGrid/DataGridHead/DataGridHead.js

@@ -29,7 +29,7 @@ export function DataGridHead(_a) {
     var columns = _a.columns, selectable = _a.selectable, onSelectAllRows = _a.onSelectAllRows, rowsCount = _a.rowsCount, onSort = _a.onSort, _b = _a.sorting, sorting = _b === void 0 ? [] : _b, uncheckedRowsCount = _a.uncheckedRowsCount;
     var checked = useMemo(function () { return !Boolean(uncheckedRowsCount) && rowsCount > 0; }, [uncheckedRowsCount, rowsCount]);
     var indeterminate = useMemo(function () { return uncheckedRowsCount > 0 && uncheckedRowsCount < rowsCount; }, [uncheckedRowsCount, rowsCount]);
-    var handleSort = useCallback(function (field, sortable) { return function () {
+    var handleSort = useCallback(function (field, sortable) {
         if (sortable) {
             var currentSort = sorting.find(function (_a) {
                 var fieldId = _a.fieldId;
@@ -56,12 +56,12 @@ export function DataGridHead(_a) {
             // если для выбранного столбца нет сортировки - добавляем сортировку ASC
             onSort(__spreadArray(__spreadArray([], sorting, true), [{ fieldId: field, sort: SortStates.ASC }], false));
         }
-    }; }, [sorting]);
+    }, [sorting, onSort]);
     var renderColumns = useMemo(function () {
         return columns.map(function (_a) {
-            var field = _a.field, label = _a.label, sortable = _a.sortable, align = _a.align, renderCell = _a.renderCell;
-            return (_jsx(DataGridHeadColumn, { sorting: sorting, renderCell: renderCell, field: field, onSort: handleSort, label: label, sortable: sortable, align: align }, field));
+            var field = _a.field, label = _a.label, sortable = _a.sortable, align = _a.align, width = _a.width;
+            return (_jsx(DataGridHeadColumn, { sorting: sorting, field: field, onSort: handleSort, label: label, sortable: sortable, align: align, width: width }, label));
         });
     }, [columns, handleSort, sorting]);
-    return (_jsx(TableHead, { children: _jsxs(TableRow, { children: [selectable && (_jsx(TableCell, __assign({ padding: "checkbox" }, { children: _jsx(Checkbox, { checked: checked, indeterminate: indeterminate, onChange: onSelectAllRows }, void 0) }), void 0)), renderColumns] }, void 0) }, void 0));
+    return (_jsx(TableHead, { children: _jsxs(TableRow, { children: [selectable && (_jsx(TableCell, __assign({ padding: "checkbox" }, { children: _jsx(Checkbox, { checked: checked, indeterminate: indeterminate, onChange: onSelectAllRows }) }))), renderColumns] }) }));
 }

package/esm/DataGrid/DataGridHead/index.d.ts

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

package/esm/DataGrid/DataGridHead/index.js

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

package/esm/DataGrid/DataGridHeadColumn/DataGridHeadColumn.d.ts

@@ -1,3 +1,13 @@
-/// <reference types="react" />
-import { DataGridHeadColumnProps } from './types';
-export declare function DataGridHeadColumn<T>({ onSort, field, sortable, align, label, sorting, renderCell, }: DataGridHeadColumnProps<T>): JSX.Element;
+import { CSSProperties } from 'react';
+import { TableCellProps } from '@mui/material';
+import { DataGridRow, DataGridSort } from '../types';
+export declare type DataGridHeadColumnProps<Data = DataGridRow, SortField extends keyof Data = keyof Data> = {
+    onSort: (field: SortField, sortable?: boolean) => void;
+    sorting: DataGridSort<SortField>[];
+    label?: string;
+    sortable?: boolean;
+    align?: TableCellProps['align'];
+    field?: keyof Data;
+    width?: CSSProperties['width'];
+};
+export declare function DataGridHeadColumn<Data, SortField extends keyof Data>({ onSort, field, sortable, align, label, sorting, width, }: DataGridHeadColumnProps<Data, SortField>): JSX.Element;

package/esm/DataGrid/DataGridHeadColumn/DataGridHeadColumn.js

@@ -10,17 +10,22 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { Typography } from '../../Typography/Typography';
 import { SortStates } from '../constants';
 import { StyledTableCell, StyledTableSortLabel } from './styled';
 export function DataGridHeadColumn(_a) {
-    var onSort = _a.onSort, field = _a.field, sortable = _a.sortable, align = _a.align, label = _a.label, sorting = _a.sorting, renderCell = _a.renderCell;
-    var sortParams = sorting.find(function (_a) {
+    var onSort = _a.onSort, field = _a.field, sortable = _a.sortable, align = _a.align, label = _a.label, sorting = _a.sorting, width = _a.width;
+    var sortParams = useMemo(function () { return sorting.find(function (_a) {
         var fieldId = _a.fieldId;
         return field === fieldId;
-    });
-    var hideSortIcon = !Boolean(sortParams);
-    var sortDirection = sortParams ? sortParams.sort : SortStates.ASC;
-    var fitContent = Boolean(renderCell);
-    return (_jsxs(StyledTableCell, __assign({ onClick: onSort(field, sortable), fitContent: fitContent, align: align }, { children: [_jsx(Typography, __assign({ variant: "pointer" }, { children: label }), void 0), sortable && (_jsx(StyledTableSortLabel, { hideSortIcon: hideSortIcon, direction: sortDirection, active: true }, void 0))] }), void 0));
+    }); }, [sorting, field]);
+    var hideSortIcon = useMemo(function () { return !Boolean(sortParams); }, [sortParams]);
+    var sortDirection = useMemo(function () { return (sortParams ? sortParams.sort : SortStates.ASC); }, [sortParams]);
+    var handleSortClick = function () {
+        if (field) {
+            onSort(field, sortable);
+        }
+    };
+    return (_jsxs(StyledTableCell, __assign({ onClick: handleSortClick, align: align, width: width }, { children: [_jsx(Typography, __assign({ variant: "pointer" }, { children: label })), sortable && (_jsx(StyledTableSortLabel, { hideSortIcon: hideSortIcon, direction: sortDirection, active: true }))] })));
 }

package/esm/DataGrid/DataGridHeadColumn/index.d.ts

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

package/esm/DataGrid/DataGridHeadColumn/index.js

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