@astral/ui 4.5.0 → 4.6.0

package/components/DataGrid/Head/Head.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { Checkbox } from '../../Checkbox';
 import { dataGridClassnames } from '../constants';
@@ -9,13 +9,14 @@ export const Head = (props) => {
     const { checkboxProps, handleSort } = useLogic(props);
     const { columns, gridColumns, isSelectable, sorting, onSelectAllRows, isHideSelectAll, } = props;
     const renderColumns = useMemo(() => {
-        return columns.map(({ field, label, sortable, align }, index) => {
+        return columns.map(({ field, label, sortable, align, columnHint }, index) => {
             const isFirstCell = !index;
             const startAdornmentRender = () => {
-                if (isHideSelectAll || !isFirstCell || !isSelectable) {
+                const showCheckbox = isFirstCell && isSelectable && !isHideSelectAll;
+                if (!showCheckbox && !columnHint) {
                     return null;
                 }
-                return (_jsx(CheckboxCell, { children: _jsx(Checkbox, { ...checkboxProps, onChange: onSelectAllRows }) }));
+                return (_jsxs(_Fragment, { children: [showCheckbox && (_jsx(CheckboxCell, { children: _jsx(Checkbox, { ...checkboxProps, onChange: onSelectAllRows }) })), columnHint] }));
             };
             return (_jsx(HeadCell, { sorting: sorting, field: field, label: label, isSortable: sortable, align: align, startAdornment: startAdornmentRender(), onSort: handleSort }, label));
         });

package/components/DataGrid/HeadCell/styles.js

@@ -1,3 +1,4 @@
+import { hintIconClassnames } from '../../HintIcon';
 import { styled } from '../../styles';
 import { alignToJustifyContent } from '../utils';
 export const Wrapper = styled('div', {
@@ -20,4 +21,8 @@ export const Wrapper = styled('div', {
     width: 16px;
     height: 16px;
   }
+
+  .${hintIconClassnames.iconWrapper}  {
+    margin-right: ${({ theme }) => theme.spacing(1)};
+  }
 `;

package/components/DataGrid/types.d.ts

@@ -223,6 +223,10 @@ export type DataGridColumns<TData extends Record<string, CellValue>> = {
      * Скрывает содержимое столбца от инструментов мониторинга
      */
     isHidePersonalData?: boolean;
+    /**
+     * Принимает компонент DataGridColumnHintIcon - подсказка в шапке колонки
+     */
+    columnHint?: ReactNode;
 };
 export type DataGridRowOptionColumns<TData extends Record<string, CellValue>> = {
     /**

package/components/DataGridColumnHintIcon/DataGridColumnHintIcon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type HintIconProps } from '../HintIcon';
+export type DataGridColumnHintIconProps = Omit<HintIconProps, 'renderIcon' | 'variant' | 'iconOption'>;
+export declare const DataGridColumnHintIcon: (props: DataGridColumnHintIconProps) => JSX.Element;

package/components/DataGridColumnHintIcon/DataGridColumnHintIcon.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InfoOutlineSm } from '../../icons';
+import { HintIcon } from '../HintIcon';
+export const DataGridColumnHintIcon = (props) => {
+    return (_jsx(HintIcon, { renderIcon: () => _jsx(InfoOutlineSm, {}), variant: "info", ...props }));
+};

package/components/DataGridColumnHintIcon/index.d.ts

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

package/components/DataGridColumnHintIcon/index.js

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

package/components/HintIcon/HintIcon.d.ts

@@ -1,36 +1,3 @@
 /// <reference types="react" />
-import { type TooltipPlacement } from './types';
-export type HintIconProps = {
-    /**
-     * Определяет иконку отображения
-     */
-    variant: 'question' | 'info';
-    /**
-     * Опции для иконки
-     */
-    iconOption?: {
-        /**
-         * Определяет тип иконки
-         * @default fill
-         */
-        variant?: 'fill' | 'outline';
-        /**
-         * Определяет цвет иконки
-         * @default lightGrey
-         */
-        color?: 'warning' | 'grey' | 'lightGrey';
-    };
-    /**
-     *  Текст заголовка BottomDrawer
-     */
-    title: string;
-    /**
-     *  Текст тултипа или контента BottomDrawer
-     */
-    note: string;
-    /**
-     *  Положение тултипа
-     */
-    tooltipPlacement?: TooltipPlacement;
-};
-export declare const HintIcon: ({ variant, title, note, iconOption, tooltipPlacement, }: HintIconProps) => JSX.Element;
+import { type HintIconProps } from './types';
+export declare const HintIcon: ({ variant, title, note, iconOption, tooltipPlacement, renderIcon, }: HintIconProps) => JSX.Element;

package/components/HintIcon/HintIcon.js

@@ -3,7 +3,7 @@ import { BottomDrawer } from '../BottomDrawer';
 import { Icon } from './Icon';
 import { DrawerContent } from './styles';
 import { useLogic } from './useLogic';
-export const HintIcon = ({ variant, title, note, iconOption, tooltipPlacement = 'bottom', }) => {
+export const HintIcon = ({ variant, title, note, iconOption, tooltipPlacement = 'bottom', renderIcon, }) => {
     const { handleClose, handleOpen, open } = useLogic();
-    return (_jsxs(_Fragment, { children: [_jsx(Icon, { onClick: handleOpen, variant: variant, iconOption: iconOption, note: note, tooltipPlacement: tooltipPlacement }), _jsx(BottomDrawer, { title: title, open: open, onClose: handleClose, children: _jsx(DrawerContent, { children: note }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Icon, { onClick: handleOpen, variant: variant, iconOption: iconOption, note: note, tooltipPlacement: tooltipPlacement, renderIcon: renderIcon }), _jsx(BottomDrawer, { title: title, open: open, onClose: handleClose, children: _jsx(DrawerContent, { children: note }) })] }));
 };

package/components/HintIcon/Icon/Icon.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-import { type HintIconProps } from '../HintIcon';
-import type { TooltipPlacement } from '../types';
-export type IconProps = Pick<HintIconProps, 'variant' | 'iconOption' | 'note'> & {
-    onClick: () => void;
+import type { SyntheticEvent } from 'react';
+import type { HintIconProps, TooltipPlacement } from '../types';
+export type IconProps = Pick<HintIconProps, 'variant' | 'iconOption' | 'note' | 'renderIcon'> & {
+    onClick: (e: SyntheticEvent) => void;
     tooltipPlacement: TooltipPlacement;
 };
 export declare const Icon: (props: IconProps) => JSX.Element;

package/components/HintIcon/Icon/Icon.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Tooltip } from '../../Tooltip';
+import { hintIconClassnames } from '../constants';
 import { IconWrapper } from './styles';
 import { useLogic } from './useLogic';
 export const Icon = (props) => {
     const { getIcon, iconColor } = useLogic(props);
     const { onClick, note, tooltipPlacement } = props;
-    return (_jsx(Tooltip, { title: note, placement: tooltipPlacement, children: _jsx(IconWrapper, { onClick: onClick, "$color": iconColor, children: getIcon() }) }));
+    return (_jsx(Tooltip, { title: note, placement: tooltipPlacement, children: _jsx(IconWrapper, { onClick: onClick, "$color": iconColor, className: hintIconClassnames.iconWrapper, children: getIcon() }) }));
 };

package/components/HintIcon/Icon/useLogic/hooks/useIconColor/useIconColor.d.ts

@@ -1,5 +1,7 @@
+import { type ReactNode } from 'react';
 type UseIconColorParams = {
     color?: 'warning' | 'grey' | 'lightGrey';
+    renderIcon?: () => ReactNode;
 };
-export declare const useIconColor: ({ color }: UseIconColorParams) => string;
+export declare const useIconColor: ({ color, renderIcon }: UseIconColorParams) => string;
 export {};

package/components/HintIcon/Icon/useLogic/hooks/useIconColor/useIconColor.js

@@ -1,11 +1,14 @@
 import { useTheme } from '../../../../../theme';
-export const useIconColor = ({ color }) => {
+export const useIconColor = ({ color, renderIcon }) => {
     const theme = useTheme();
     const colorMap = {
         warning: theme.palette.yellow[800],
         grey: theme.palette.grey[800],
         lightGrey: theme.palette.grey[400],
     };
+    if (renderIcon) {
+        return 'currentColor';
+    }
     if (color) {
         return colorMap[color];
     }

package/components/HintIcon/Icon/useLogic/useLogic.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import { type ReactNode } from 'react';
 import { type IconProps } from '../Icon';
 type UseLogicParams = IconProps;
-export declare const useLogic: ({ iconOption, variant }: UseLogicParams) => {
-    getIcon: () => JSX.Element;
+export declare const useLogic: ({ iconOption, variant, renderIcon, }: UseLogicParams) => {
+    getIcon: () => ReactNode;
     iconColor: string;
 };
 export {};

package/components/HintIcon/Icon/useLogic/useLogic.js

@@ -1,9 +1,12 @@
 import { ICONS } from '../../constants';
 import { useIconColor } from './hooks';
-export const useLogic = ({ iconOption, variant }) => {
-    const iconColor = useIconColor({ color: iconOption?.color });
+export const useLogic = ({ iconOption, variant, renderIcon, }) => {
+    const iconColor = useIconColor({ color: iconOption?.color, renderIcon });
     const { variant: iconOptionVariant = 'fill' } = iconOption || {};
     const getIcon = () => {
+        if (renderIcon) {
+            return renderIcon();
+        }
         const icon = ICONS[variant][iconOptionVariant];
         if (icon) {
             return icon;

package/components/HintIcon/constants.d.ts

@@ -1,4 +1,7 @@
 /// <reference types="react" />
+export declare const hintIconClassnames: {
+    iconWrapper: string;
+};
 export declare const ICONS: {
     question: {
         fill: JSX.Element;

package/components/HintIcon/constants.js

@@ -1,5 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { InfoFillMd, InfoOutlineMd, QuestionFillMd, QuestionOutlineMd, } from '../../icons';
+import { createUIKitClassname } from '../utils';
+export const hintIconClassnames = {
+    iconWrapper: createUIKitClassname('hint-icon__icon-wrapper'),
+};
 export const ICONS = {
     question: {
         fill: _jsx(QuestionFillMd, {}),

package/components/HintIcon/index.d.ts

@@ -1 +1,3 @@
 export * from './HintIcon';
+export type { HintIconProps } from './types';
+export { hintIconClassnames } from './constants';

package/components/HintIcon/index.js

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

package/components/HintIcon/styles.d.ts

@@ -3,9 +3,3 @@ export declare const DrawerContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    $color: string;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/HintIcon/styles.js

@@ -2,10 +2,3 @@ import { styled } from '../styles';
 export const DrawerContent = styled.div `
   padding: ${({ theme }) => theme.spacing(5, 4)};
 `;
-export const IconWrapper = styled('div', {
-    shouldForwardProp: (prop) => !['$color'].includes(prop),
-}) `
-  display: flex;
-
-  color: ${({ $color }) => $color};
-`;

package/components/HintIcon/types.d.ts

@@ -1 +1,39 @@
+import { type ReactNode } from 'react';
 export type TooltipPlacement = 'left' | 'top' | 'right' | 'bottom';
+export type HintIconProps = {
+    /**
+     * Определяет иконку отображения
+     */
+    variant: 'question' | 'info';
+    /**
+     * Опции для иконки
+     */
+    iconOption?: {
+        /**
+         * Определяет тип иконки
+         * @default fill
+         */
+        variant?: 'fill' | 'outline';
+        /**
+         * Определяет цвет иконки
+         * @default lightGrey
+         */
+        color?: 'warning' | 'grey' | 'lightGrey';
+    };
+    /**
+     *  Текст заголовка BottomDrawer
+     */
+    title: string;
+    /**
+     *  Текст тултипа или контента BottomDrawer
+     */
+    note: string;
+    /**
+     *  Положение тултипа
+     */
+    tooltipPlacement?: TooltipPlacement;
+    /**
+     * Задание кастомной иконки
+     */
+    renderIcon?: () => ReactNode;
+};

package/components/HintIcon/useLogic/useLogic.d.ts

@@ -1,5 +1,6 @@
+import { type SyntheticEvent } from 'react';
 export declare const useLogic: () => {
     open: boolean;
-    handleOpen: () => void;
-    handleClose: () => void;
+    handleOpen: (e: SyntheticEvent) => void;
+    handleClose: (e: SyntheticEvent) => void;
 };

package/components/HintIcon/useLogic/useLogic.js

@@ -3,12 +3,14 @@ import { useViewportType } from '../../hooks';
 export const useLogic = () => {
     const [open, setOpen] = useState(false);
     const { isMobile } = useViewportType();
-    const handleOpen = () => {
+    const handleOpen = (e) => {
+        e.stopPropagation();
         if (isMobile) {
             setOpen((prevState) => !prevState);
         }
     };
-    const handleClose = () => {
+    const handleClose = (e) => {
+        e.stopPropagation();
         if (isMobile) {
             setOpen(false);
         }

package/components/index.d.ts

@@ -94,6 +94,7 @@ export { MinimalisticPagination, type MinimalisticPaginationProps, } from './Min
 export * from './NavMenu';
 export { type DataGridColumns, type DataGridRow, type DataGridRowOptions, type DataGridSort, DataGrid, type DataGridProps, } from './DataGrid';
 export { DataGridInfinite, type DataGridInfiniteProps, } from './DataGridInfinite';
+export { DataGridColumnHintIcon, type DataGridColumnHintIconProps, } from './DataGridColumnHintIcon';
 export { type DateItemProps, type DateRangePickerProps, type DateRangePickerValue, DateRangePicker, } from './DateRangePicker';
 export { MenuOrganization, type MenuOrganizationProps, MenuOrganizationSkeleton, } from './MenuOrganization';
 export { NotFoundPage, type NotFoundPageProps, notFoundPageClassnames, } from './NotFoundPage';

package/components/index.js

@@ -94,6 +94,7 @@ export { MinimalisticPagination, } from './MinimalisticPagination';
 export * from './NavMenu';
 export { DataGrid, } from './DataGrid';
 export { DataGridInfinite, } from './DataGridInfinite';
+export { DataGridColumnHintIcon, } from './DataGridColumnHintIcon';
 export { DateRangePicker, } from './DateRangePicker';
 export { MenuOrganization, MenuOrganizationSkeleton, } from './MenuOrganization';
 export { NotFoundPage, notFoundPageClassnames, } from './NotFoundPage';

package/node/components/DataGrid/Head/Head.js

@@ -12,13 +12,14 @@ const Head = (props) => {
     const { checkboxProps, handleSort } = (0, useLogic_1.useLogic)(props);
     const { columns, gridColumns, isSelectable, sorting, onSelectAllRows, isHideSelectAll, } = props;
     const renderColumns = (0, react_1.useMemo)(() => {
-        return columns.map(({ field, label, sortable, align }, index) => {
+        return columns.map(({ field, label, sortable, align, columnHint }, index) => {
             const isFirstCell = !index;
             const startAdornmentRender = () => {
-                if (isHideSelectAll || !isFirstCell || !isSelectable) {
+                const showCheckbox = isFirstCell && isSelectable && !isHideSelectAll;
+                if (!showCheckbox && !columnHint) {
                     return null;
                 }
-                return ((0, jsx_runtime_1.jsx)(styles_1.CheckboxCell, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { ...checkboxProps, onChange: onSelectAllRows }) }));
+                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showCheckbox && ((0, jsx_runtime_1.jsx)(styles_1.CheckboxCell, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { ...checkboxProps, onChange: onSelectAllRows }) })), columnHint] }));
             };
             return ((0, jsx_runtime_1.jsx)(HeadCell_1.HeadCell, { sorting: sorting, field: field, label: label, isSortable: sortable, align: align, startAdornment: startAdornmentRender(), onSort: handleSort }, label));
         });

package/node/components/DataGrid/HeadCell/styles.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
+const HintIcon_1 = require("../../HintIcon");
 const styles_1 = require("../../styles");
 const utils_1 = require("../utils");
 exports.Wrapper = (0, styles_1.styled)('div', {
@@ -23,4 +24,8 @@ exports.Wrapper = (0, styles_1.styled)('div', {
     width: 16px;
     height: 16px;
   }
+
+  .${HintIcon_1.hintIconClassnames.iconWrapper}  {
+    margin-right: ${({ theme }) => theme.spacing(1)};
+  }
 `;

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

@@ -223,6 +223,10 @@ export type DataGridColumns<TData extends Record<string, CellValue>> = {
      * Скрывает содержимое столбца от инструментов мониторинга
      */
     isHidePersonalData?: boolean;
+    /**
+     * Принимает компонент DataGridColumnHintIcon - подсказка в шапке колонки
+     */
+    columnHint?: ReactNode;
 };
 export type DataGridRowOptionColumns<TData extends Record<string, CellValue>> = {
     /**

package/node/components/DataGridColumnHintIcon/DataGridColumnHintIcon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type HintIconProps } from '../HintIcon';
+export type DataGridColumnHintIconProps = Omit<HintIconProps, 'renderIcon' | 'variant' | 'iconOption'>;
+export declare const DataGridColumnHintIcon: (props: DataGridColumnHintIconProps) => JSX.Element;

package/node/components/DataGridColumnHintIcon/DataGridColumnHintIcon.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridColumnHintIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("../../icons");
+const HintIcon_1 = require("../HintIcon");
+const DataGridColumnHintIcon = (props) => {
+    return ((0, jsx_runtime_1.jsx)(HintIcon_1.HintIcon, { renderIcon: () => (0, jsx_runtime_1.jsx)(icons_1.InfoOutlineSm, {}), variant: "info", ...props }));
+};
+exports.DataGridColumnHintIcon = DataGridColumnHintIcon;

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

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

package/node/components/DataGridColumnHintIcon/index.js

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

package/node/components/HintIcon/HintIcon.d.ts

@@ -1,36 +1,3 @@
 /// <reference types="react" />
-import { type TooltipPlacement } from './types';
-export type HintIconProps = {
-    /**
-     * Определяет иконку отображения
-     */
-    variant: 'question' | 'info';
-    /**
-     * Опции для иконки
-     */
-    iconOption?: {
-        /**
-         * Определяет тип иконки
-         * @default fill
-         */
-        variant?: 'fill' | 'outline';
-        /**
-         * Определяет цвет иконки
-         * @default lightGrey
-         */
-        color?: 'warning' | 'grey' | 'lightGrey';
-    };
-    /**
-     *  Текст заголовка BottomDrawer
-     */
-    title: string;
-    /**
-     *  Текст тултипа или контента BottomDrawer
-     */
-    note: string;
-    /**
-     *  Положение тултипа
-     */
-    tooltipPlacement?: TooltipPlacement;
-};
-export declare const HintIcon: ({ variant, title, note, iconOption, tooltipPlacement, }: HintIconProps) => JSX.Element;
+import { type HintIconProps } from './types';
+export declare const HintIcon: ({ variant, title, note, iconOption, tooltipPlacement, renderIcon, }: HintIconProps) => JSX.Element;

package/node/components/HintIcon/HintIcon.js

@@ -6,8 +6,8 @@ const BottomDrawer_1 = require("../BottomDrawer");
 const Icon_1 = require("./Icon");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
-const HintIcon = ({ variant, title, note, iconOption, tooltipPlacement = 'bottom', }) => {
+const HintIcon = ({ variant, title, note, iconOption, tooltipPlacement = 'bottom', renderIcon, }) => {
     const { handleClose, handleOpen, open } = (0, useLogic_1.useLogic)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { onClick: handleOpen, variant: variant, iconOption: iconOption, note: note, tooltipPlacement: tooltipPlacement }), (0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { title: title, open: open, onClose: handleClose, children: (0, jsx_runtime_1.jsx)(styles_1.DrawerContent, { children: note }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { onClick: handleOpen, variant: variant, iconOption: iconOption, note: note, tooltipPlacement: tooltipPlacement, renderIcon: renderIcon }), (0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { title: title, open: open, onClose: handleClose, children: (0, jsx_runtime_1.jsx)(styles_1.DrawerContent, { children: note }) })] }));
 };
 exports.HintIcon = HintIcon;

package/node/components/HintIcon/Icon/Icon.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-import { type HintIconProps } from '../HintIcon';
-import type { TooltipPlacement } from '../types';
-export type IconProps = Pick<HintIconProps, 'variant' | 'iconOption' | 'note'> & {
-    onClick: () => void;
+import type { SyntheticEvent } from 'react';
+import type { HintIconProps, TooltipPlacement } from '../types';
+export type IconProps = Pick<HintIconProps, 'variant' | 'iconOption' | 'note' | 'renderIcon'> & {
+    onClick: (e: SyntheticEvent) => void;
     tooltipPlacement: TooltipPlacement;
 };
 export declare const Icon: (props: IconProps) => JSX.Element;

package/node/components/HintIcon/Icon/Icon.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Icon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Tooltip_1 = require("../../Tooltip");
+const constants_1 = require("../constants");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const Icon = (props) => {
     const { getIcon, iconColor } = (0, useLogic_1.useLogic)(props);
     const { onClick, note, tooltipPlacement } = props;
-    return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: note, placement: tooltipPlacement, children: (0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { onClick: onClick, "$color": iconColor, children: getIcon() }) }));
+    return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: note, placement: tooltipPlacement, children: (0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { onClick: onClick, "$color": iconColor, className: constants_1.hintIconClassnames.iconWrapper, children: getIcon() }) }));
 };
 exports.Icon = Icon;

package/node/components/HintIcon/Icon/useLogic/hooks/useIconColor/useIconColor.d.ts

@@ -1,5 +1,7 @@
+import { type ReactNode } from 'react';
 type UseIconColorParams = {
     color?: 'warning' | 'grey' | 'lightGrey';
+    renderIcon?: () => ReactNode;
 };
-export declare const useIconColor: ({ color }: UseIconColorParams) => string;
+export declare const useIconColor: ({ color, renderIcon }: UseIconColorParams) => string;
 export {};

package/node/components/HintIcon/Icon/useLogic/hooks/useIconColor/useIconColor.js

@@ -2,13 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIconColor = void 0;
 const theme_1 = require("../../../../../theme");
-const useIconColor = ({ color }) => {
+const useIconColor = ({ color, renderIcon }) => {
     const theme = (0, theme_1.useTheme)();
     const colorMap = {
         warning: theme.palette.yellow[800],
         grey: theme.palette.grey[800],
         lightGrey: theme.palette.grey[400],
     };
+    if (renderIcon) {
+        return 'currentColor';
+    }
     if (color) {
         return colorMap[color];
     }

package/node/components/HintIcon/Icon/useLogic/useLogic.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import { type ReactNode } from 'react';
 import { type IconProps } from '../Icon';
 type UseLogicParams = IconProps;
-export declare const useLogic: ({ iconOption, variant }: UseLogicParams) => {
-    getIcon: () => JSX.Element;
+export declare const useLogic: ({ iconOption, variant, renderIcon, }: UseLogicParams) => {
+    getIcon: () => ReactNode;
     iconColor: string;
 };
 export {};

package/node/components/HintIcon/Icon/useLogic/useLogic.js

@@ -3,10 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const constants_1 = require("../../constants");
 const hooks_1 = require("./hooks");
-const useLogic = ({ iconOption, variant }) => {
-    const iconColor = (0, hooks_1.useIconColor)({ color: iconOption?.color });
+const useLogic = ({ iconOption, variant, renderIcon, }) => {
+    const iconColor = (0, hooks_1.useIconColor)({ color: iconOption?.color, renderIcon });
     const { variant: iconOptionVariant = 'fill' } = iconOption || {};
     const getIcon = () => {
+        if (renderIcon) {
+            return renderIcon();
+        }
         const icon = constants_1.ICONS[variant][iconOptionVariant];
         if (icon) {
             return icon;

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

@@ -1,4 +1,7 @@
 /// <reference types="react" />
+export declare const hintIconClassnames: {
+    iconWrapper: string;
+};
 export declare const ICONS: {
     question: {
         fill: JSX.Element;

package/node/components/HintIcon/constants.js

@@ -1,8 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ICONS = void 0;
+exports.ICONS = exports.hintIconClassnames = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_1 = require("../../icons");
+const utils_1 = require("../utils");
+exports.hintIconClassnames = {
+    iconWrapper: (0, utils_1.createUIKitClassname)('hint-icon__icon-wrapper'),
+};
 exports.ICONS = {
     question: {
         fill: (0, jsx_runtime_1.jsx)(icons_1.QuestionFillMd, {}),

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

@@ -1 +1,3 @@
 export * from './HintIcon';
+export type { HintIconProps } from './types';
+export { hintIconClassnames } from './constants';

package/node/components/HintIcon/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.hintIconClassnames = void 0;
 __exportStar(require("./HintIcon"), exports);
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "hintIconClassnames", { enumerable: true, get: function () { return constants_1.hintIconClassnames; } });

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

@@ -3,9 +3,3 @@ export declare const DrawerContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    $color: string;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/HintIcon/styles.js

@@ -1,14 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconWrapper = exports.DrawerContent = void 0;
+exports.DrawerContent = void 0;
 const styles_1 = require("../styles");
 exports.DrawerContent = styles_1.styled.div `
   padding: ${({ theme }) => theme.spacing(5, 4)};
 `;
-exports.IconWrapper = (0, styles_1.styled)('div', {
-    shouldForwardProp: (prop) => !['$color'].includes(prop),
-}) `
-  display: flex;
-
-  color: ${({ $color }) => $color};
-`;

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

@@ -1 +1,39 @@
+import { type ReactNode } from 'react';
 export type TooltipPlacement = 'left' | 'top' | 'right' | 'bottom';
+export type HintIconProps = {
+    /**
+     * Определяет иконку отображения
+     */
+    variant: 'question' | 'info';
+    /**
+     * Опции для иконки
+     */
+    iconOption?: {
+        /**
+         * Определяет тип иконки
+         * @default fill
+         */
+        variant?: 'fill' | 'outline';
+        /**
+         * Определяет цвет иконки
+         * @default lightGrey
+         */
+        color?: 'warning' | 'grey' | 'lightGrey';
+    };
+    /**
+     *  Текст заголовка BottomDrawer
+     */
+    title: string;
+    /**
+     *  Текст тултипа или контента BottomDrawer
+     */
+    note: string;
+    /**
+     *  Положение тултипа
+     */
+    tooltipPlacement?: TooltipPlacement;
+    /**
+     * Задание кастомной иконки
+     */
+    renderIcon?: () => ReactNode;
+};

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

@@ -1,5 +1,6 @@
+import { type SyntheticEvent } from 'react';
 export declare const useLogic: () => {
     open: boolean;
-    handleOpen: () => void;
-    handleClose: () => void;
+    handleOpen: (e: SyntheticEvent) => void;
+    handleClose: (e: SyntheticEvent) => void;
 };

package/node/components/HintIcon/useLogic/useLogic.js

@@ -6,12 +6,14 @@ const hooks_1 = require("../../hooks");
 const useLogic = () => {
     const [open, setOpen] = (0, react_1.useState)(false);
     const { isMobile } = (0, hooks_1.useViewportType)();
-    const handleOpen = () => {
+    const handleOpen = (e) => {
+        e.stopPropagation();
         if (isMobile) {
             setOpen((prevState) => !prevState);
         }
     };
-    const handleClose = () => {
+    const handleClose = (e) => {
+        e.stopPropagation();
         if (isMobile) {
             setOpen(false);
         }

package/node/components/index.d.ts

@@ -94,6 +94,7 @@ export { MinimalisticPagination, type MinimalisticPaginationProps, } from './Min
 export * from './NavMenu';
 export { type DataGridColumns, type DataGridRow, type DataGridRowOptions, type DataGridSort, DataGrid, type DataGridProps, } from './DataGrid';
 export { DataGridInfinite, type DataGridInfiniteProps, } from './DataGridInfinite';
+export { DataGridColumnHintIcon, type DataGridColumnHintIconProps, } from './DataGridColumnHintIcon';
 export { type DateItemProps, type DateRangePickerProps, type DateRangePickerValue, DateRangePicker, } from './DateRangePicker';
 export { MenuOrganization, type MenuOrganizationProps, MenuOrganizationSkeleton, } from './MenuOrganization';
 export { NotFoundPage, type NotFoundPageProps, notFoundPageClassnames, } from './NotFoundPage';

package/node/components/index.js

@@ -15,8 +15,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFileUploader = exports.PreviewFileUploaderFile = exports.PreviewFileUploaderDropZone = exports.PreviewFileUploader = exports.FileUploaderFile = exports.FileUploaderDropzone = exports.FileUploader = exports.Filename = exports.Fieldset = exports.Grow = exports.Slide = exports.Zoom = exports.Fade = exports.expansionPanelClassnames = exports.ExpansionPanel = exports.EmailOrPhoneField = exports.EmailField = exports.DescriptionList = exports.DescriptionCell = exports.datePickerClassnames = exports.DatePicker = exports.DataGridMinimalisticPagination = exports.DataGridActionCell = exports.SidebarContext = exports.SidebarSkeleton = exports.DashboardContext = exports.SidebarPopover = exports.SidebarCounter = exports.SidebarButton = exports.MenuSidebarButton = exports.DashboardLayout = exports.DashboardAlert = exports.Counter = exports.CopyTypography = exports.ConfirmAction = exports.ComplianceStatus = exports.CodeField = exports.BulletListItem = exports.BulletListInlineItem = exports.BulletList = exports.Breadcrumbs = exports.AvatarGroup = exports.Avatar = exports.AutoSaveIndicator = exports.AsyncAutocomplete = exports.Alert = exports.alertClassnames = exports.AddressAutocomplete = exports.useMainActions = exports.ActionGroup = void 0;
-exports.RadioField = exports.radioCardClassnames = exports.RadioCard = exports.Radio = exports.radioClassnames = exports.Placeholder = exports.LoadingPlaceholder = exports.useHidePersonalData = exports.PersonalData = exports.Pagination = exports.pageHeaderClassnames = exports.pageContentClassnames = exports.PagePinnableAside = exports.PageLayoutLoader = exports.PageLayoutFooter = exports.PageLayoutContainer = exports.PageLayout = exports.PageHeader = exports.PageContextProvider = exports.PageContext = exports.PageContentHeaderActions = exports.PageContentHeader = exports.PageContent = exports.PageAsideBlock = exports.PageAside = exports.PageAlert = exports.PageActions = exports.PageActionSkeleton = exports.NumberField = exports.NumberedListItem = exports.NumberedList = exports.notFoundPageClassnames = exports.NotFoundPage = exports.MenuOrganizationSkeleton = exports.MenuOrganization = exports.DateRangePicker = exports.DataGridInfinite = exports.DataGrid = exports.MinimalisticPagination = exports.loaderClassnames = exports.Loader = exports.Link = exports.InfiniteDataList = exports.InputGroup = exports.Iframe = exports.HintIcon = exports.GuidTypography = exports.previewFileUploaderClassnames = exports.fileUploaderClassnames = exports.usePreviewFileUploader = void 0;
-exports.WelcomeScreen = exports.redirectToLink = exports.createUIKitClassname = exports.classNames = exports.TreeLikeList = exports.TreeLikeAutocomplete = exports.TreeAutocomplete = exports.TreeList = exports.MultipleTreeList = exports.UNSTABLE_SecondsCountdownService = exports.svgIconClassnames = exports.SvgIcon = exports.StepSlider = exports.StepperWizard = exports.staticDaysCalendarClassnames = exports.StaticDaysCalendar = exports.Skeleton = exports.SearchField = exports.ScrollToTopButton = exports.RadioGroupContext = exports.RadioGroup = void 0;
+exports.radioCardClassnames = exports.RadioCard = exports.Radio = exports.radioClassnames = exports.Placeholder = exports.LoadingPlaceholder = exports.useHidePersonalData = exports.PersonalData = exports.Pagination = exports.pageHeaderClassnames = exports.pageContentClassnames = exports.PagePinnableAside = exports.PageLayoutLoader = exports.PageLayoutFooter = exports.PageLayoutContainer = exports.PageLayout = exports.PageHeader = exports.PageContextProvider = exports.PageContext = exports.PageContentHeaderActions = exports.PageContentHeader = exports.PageContent = exports.PageAsideBlock = exports.PageAside = exports.PageAlert = exports.PageActions = exports.PageActionSkeleton = exports.NumberField = exports.NumberedListItem = exports.NumberedList = exports.notFoundPageClassnames = exports.NotFoundPage = exports.MenuOrganizationSkeleton = exports.MenuOrganization = exports.DateRangePicker = exports.DataGridColumnHintIcon = exports.DataGridInfinite = exports.DataGrid = exports.MinimalisticPagination = exports.loaderClassnames = exports.Loader = exports.Link = exports.InfiniteDataList = exports.InputGroup = exports.Iframe = exports.HintIcon = exports.GuidTypography = exports.previewFileUploaderClassnames = exports.fileUploaderClassnames = exports.usePreviewFileUploader = void 0;
+exports.WelcomeScreen = exports.redirectToLink = exports.createUIKitClassname = exports.classNames = exports.TreeLikeList = exports.TreeLikeAutocomplete = exports.TreeAutocomplete = exports.TreeList = exports.MultipleTreeList = exports.UNSTABLE_SecondsCountdownService = exports.svgIconClassnames = exports.SvgIcon = exports.StepSlider = exports.StepperWizard = exports.staticDaysCalendarClassnames = exports.StaticDaysCalendar = exports.Skeleton = exports.SearchField = exports.ScrollToTopButton = exports.RadioGroupContext = exports.RadioGroup = exports.RadioField = void 0;
 __exportStar(require("./Accordion"), exports);
 var ActionGroup_1 = require("./ActionGroup");
 Object.defineProperty(exports, "ActionGroup", { enumerable: true, get: function () { return ActionGroup_1.ActionGroup; } });
@@ -177,6 +177,8 @@ var DataGrid_1 = require("./DataGrid");
 Object.defineProperty(exports, "DataGrid", { enumerable: true, get: function () { return DataGrid_1.DataGrid; } });
 var DataGridInfinite_1 = require("./DataGridInfinite");
 Object.defineProperty(exports, "DataGridInfinite", { enumerable: true, get: function () { return DataGridInfinite_1.DataGridInfinite; } });
+var DataGridColumnHintIcon_1 = require("./DataGridColumnHintIcon");
+Object.defineProperty(exports, "DataGridColumnHintIcon", { enumerable: true, get: function () { return DataGridColumnHintIcon_1.DataGridColumnHintIcon; } });
 var DateRangePicker_1 = require("./DateRangePicker");
 Object.defineProperty(exports, "DateRangePicker", { enumerable: true, get: function () { return DateRangePicker_1.DateRangePicker; } });
 var MenuOrganization_1 = require("./MenuOrganization");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {