@astral/ui 4.6.0 → 4.7.0

package/components/MenuOrganization/OrganizationButton/OrganizationButton.d.ts

@@ -1,4 +1,4 @@
-import { type SyntheticEvent } from 'react';
+import { type ReactNode, type SyntheticEvent } from 'react';
 import { type Organization } from '../types';
 export type OrganizationButtonProps = {
     onClick: (event: SyntheticEvent) => void;
@@ -10,5 +10,11 @@ export type OrganizationButtonProps = {
      * Скрытие персональных данных от инструментов мониторинга
      */
     isHidePersonalData?: boolean;
+    /**
+     * Render-props, позволяет кастомизировать содержимое кнопки
+     */
+    renderPreview?: (organization: Organization & Record<string, unknown>, params: {
+        className?: string;
+    }) => ReactNode;
 };
 export declare const OrganizationButton: import("react").ForwardRefExoticComponent<OrganizationButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/components/MenuOrganization/OrganizationButton/OrganizationButton.js

@@ -5,12 +5,14 @@ import { useHidePersonalData } from '../../personalDataSecurity';
 import { Tooltip } from '../../Tooltip';
 import { OrganizationData } from '../styles';
 import { Container, StyledButton, StyledChevron, StyledTypography, } from './styles';
-export const OrganizationButton = forwardRef(({ onClick, isOpen, currentOrganization, isDisabled, disabledReason, isHidePersonalData, }, ref) => {
+export const OrganizationButton = forwardRef(({ onClick, isOpen, currentOrganization, isDisabled, disabledReason, isHidePersonalData, renderPreview, }, ref) => {
     const { name, inn, kpp } = currentOrganization;
     const hidePersonalDataClassname = useHidePersonalData({
         isEnabled: isHidePersonalData,
     });
-    const renderButton = () => (_jsx(StyledButton, { ref: ref, variant: "text", disabled: isDisabled, onClick: onClick, endIcon: _jsx(StyledChevron, { isActive: isOpen, width: 24, height: 24 }), children: _jsxs(Container, { className: hidePersonalDataClassname, children: [_jsx(OverflowTypography, { variant: "h6", component: "div", children: name }), _jsxs(OrganizationData, { children: [_jsxs(StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u0418\u041D\u041D ", inn] }), kpp && (_jsxs(StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u041A\u041F\u041F ", kpp] }))] })] }) }));
+    const renderButton = () => (_jsx(StyledButton, { ref: ref, variant: "text", disabled: isDisabled, onClick: onClick, endIcon: _jsx(StyledChevron, { isActive: isOpen, width: 24, height: 24 }), children: renderPreview ? (renderPreview(currentOrganization, {
+            className: hidePersonalDataClassname,
+        })) : (_jsxs(Container, { className: hidePersonalDataClassname, children: [_jsx(OverflowTypography, { variant: "h6", component: "div", children: name }), _jsxs(OrganizationData, { children: [_jsxs(StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u0418\u041D\u041D ", inn] }), kpp && (_jsxs(StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u041A\u041F\u041F ", kpp] }))] })] })) }));
     if (isDisabled && disabledReason) {
         return (_jsx(Tooltip, { title: disabledReason, withoutContainer: false, placement: "bottom", children: renderButton() }));
     }

package/components/MenuOrganization/types.d.ts

@@ -113,4 +113,17 @@ export type MenuOrganizationProps<TData extends Organization = Organization> = {
      * )}
      */
     renderItem?: (params: RenderItemParams<TData>) => ReactNode;
+    /**
+     * Render-props, позволяет кастомизировать содержимое кнопки OrganizationButton
+     *
+     * @example
+     * renderPreview={(organization) => (
+     *   <Avatar color="#EC4899" size="md">
+     *     {getInitials(organization.name)}
+     *   </Avatar>
+     * )}
+     */
+    renderPreview?: (organization: TData, params: {
+        className?: string;
+    }) => ReactNode;
 };

package/components/MenuOrganization/useLogic/useLogic.d.ts

@@ -1,7 +1,7 @@
 import { type ChangeEvent, type SyntheticEvent } from 'react';
 import { type MenuOrganizationProps, type Organization } from '../types';
 type UseLogicParams<TData extends Organization & Record<string, unknown>> = MenuOrganizationProps<TData>;
-export declare const useLogic: <TData extends Organization & Record<string, unknown>>({ organizations, onChangeSearch, onChange, currentOrganizationGroupLabel, currentOrganization, groupBy, onClose, onOpen, isOpen: isOpenPopover, isDisabled, disabledReason, isHidePersonalData, action, isLoading, isError, onRetry, renderItem, }: UseLogicParams<TData>) => {
+export declare const useLogic: <TData extends Organization & Record<string, unknown>>({ organizations, onChangeSearch, onChange, currentOrganizationGroupLabel, currentOrganization, groupBy, onClose, onOpen, isOpen: isOpenPopover, isDisabled, disabledReason, isHidePersonalData, action, isLoading, isError, onRetry, renderItem, renderPreview, }: UseLogicParams<TData>) => {
     action: ({
         text: string;
     } & Pick<import("../..").ButtonProps, "onClick" | "href" | "endIcon" | "startIcon" | "variant" | "component">) | undefined;
@@ -19,6 +19,9 @@ export declare const useLogic: <TData extends Organization & Record<string, unkn
         isDisabled: boolean | undefined;
         disabledReason: string | undefined;
         isHidePersonalData: boolean | undefined;
+        renderPreview: ((organization: Organization & Record<string, unknown>, params: {
+            className?: string;
+        }) => import("react").ReactNode) | undefined;
         ref: (node: HTMLButtonElement | null) => void;
     };
     searchProps: {

package/components/MenuOrganization/useLogic/useLogic.js

@@ -2,7 +2,7 @@ import { useCallback, useContext, useMemo, useState, } from 'react';
 import { DashboardContext } from '../../DashboardLayout';
 import { usePopover } from '../../hooks';
 import { useHidePersonalData } from '../../personalDataSecurity';
-export const useLogic = ({ organizations = [], onChangeSearch, onChange, currentOrganizationGroupLabel, currentOrganization, groupBy, onClose, onOpen, isOpen: isOpenPopover, isDisabled, disabledReason, isHidePersonalData, action, isLoading, isError, onRetry, renderItem, }) => {
+export const useLogic = ({ organizations = [], onChangeSearch, onChange, currentOrganizationGroupLabel, currentOrganization, groupBy, onClose, onOpen, isOpen: isOpenPopover, isDisabled, disabledReason, isHidePersonalData, action, isLoading, isError, onRetry, renderItem, renderPreview, }) => {
     const { isLoading: isDashboardLoading } = useContext(DashboardContext);
     const [searchValue, setSearchValue] = useState('');
     const [anchorButtonEl, setAnchorButtonEl] = useState(null);
@@ -50,6 +50,9 @@ export const useLogic = ({ organizations = [], onChangeSearch, onChange, current
         }
         return !isError && !isLoading && organizations.length > 10;
     }, [searchValue.length, isError, isLoading, organizations.length]);
+    const renderPreviewWrapper = useMemo(() => renderPreview
+        ? (organization, params) => renderPreview(organization, params)
+        : undefined, [renderPreview]);
     return {
         action,
         isLoading,
@@ -64,6 +67,7 @@ export const useLogic = ({ organizations = [], onChangeSearch, onChange, current
             isDisabled,
             disabledReason,
             isHidePersonalData,
+            renderPreview: renderPreviewWrapper,
             ref: buttonRef,
         },
         searchProps: {

package/node/components/MenuOrganization/OrganizationButton/OrganizationButton.d.ts

@@ -1,4 +1,4 @@
-import { type SyntheticEvent } from 'react';
+import { type ReactNode, type SyntheticEvent } from 'react';
 import { type Organization } from '../types';
 export type OrganizationButtonProps = {
     onClick: (event: SyntheticEvent) => void;
@@ -10,5 +10,11 @@ export type OrganizationButtonProps = {
      * Скрытие персональных данных от инструментов мониторинга
      */
     isHidePersonalData?: boolean;
+    /**
+     * Render-props, позволяет кастомизировать содержимое кнопки
+     */
+    renderPreview?: (organization: Organization & Record<string, unknown>, params: {
+        className?: string;
+    }) => ReactNode;
 };
 export declare const OrganizationButton: import("react").ForwardRefExoticComponent<OrganizationButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/node/components/MenuOrganization/OrganizationButton/OrganizationButton.js

@@ -8,12 +8,14 @@ const personalDataSecurity_1 = require("../../personalDataSecurity");
 const Tooltip_1 = require("../../Tooltip");
 const styles_1 = require("../styles");
 const styles_2 = require("./styles");
-exports.OrganizationButton = (0, react_1.forwardRef)(({ onClick, isOpen, currentOrganization, isDisabled, disabledReason, isHidePersonalData, }, ref) => {
+exports.OrganizationButton = (0, react_1.forwardRef)(({ onClick, isOpen, currentOrganization, isDisabled, disabledReason, isHidePersonalData, renderPreview, }, ref) => {
     const { name, inn, kpp } = currentOrganization;
     const hidePersonalDataClassname = (0, personalDataSecurity_1.useHidePersonalData)({
         isEnabled: isHidePersonalData,
     });
-    const renderButton = () => ((0, jsx_runtime_1.jsx)(styles_2.StyledButton, { ref: ref, variant: "text", disabled: isDisabled, onClick: onClick, endIcon: (0, jsx_runtime_1.jsx)(styles_2.StyledChevron, { isActive: isOpen, width: 24, height: 24 }), children: (0, jsx_runtime_1.jsxs)(styles_2.Container, { className: hidePersonalDataClassname, children: [(0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { variant: "h6", component: "div", children: name }), (0, jsx_runtime_1.jsxs)(styles_1.OrganizationData, { children: [(0, jsx_runtime_1.jsxs)(styles_2.StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u0418\u041D\u041D ", inn] }), kpp && ((0, jsx_runtime_1.jsxs)(styles_2.StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u041A\u041F\u041F ", kpp] }))] })] }) }));
+    const renderButton = () => ((0, jsx_runtime_1.jsx)(styles_2.StyledButton, { ref: ref, variant: "text", disabled: isDisabled, onClick: onClick, endIcon: (0, jsx_runtime_1.jsx)(styles_2.StyledChevron, { isActive: isOpen, width: 24, height: 24 }), children: renderPreview ? (renderPreview(currentOrganization, {
+            className: hidePersonalDataClassname,
+        })) : ((0, jsx_runtime_1.jsxs)(styles_2.Container, { className: hidePersonalDataClassname, children: [(0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { variant: "h6", component: "div", children: name }), (0, jsx_runtime_1.jsxs)(styles_1.OrganizationData, { children: [(0, jsx_runtime_1.jsxs)(styles_2.StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u0418\u041D\u041D ", inn] }), kpp && ((0, jsx_runtime_1.jsxs)(styles_2.StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u041A\u041F\u041F ", kpp] }))] })] })) }));
     if (isDisabled && disabledReason) {
         return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: disabledReason, withoutContainer: false, placement: "bottom", children: renderButton() }));
     }

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

@@ -113,4 +113,17 @@ export type MenuOrganizationProps<TData extends Organization = Organization> = {
      * )}
      */
     renderItem?: (params: RenderItemParams<TData>) => ReactNode;
+    /**
+     * Render-props, позволяет кастомизировать содержимое кнопки OrganizationButton
+     *
+     * @example
+     * renderPreview={(organization) => (
+     *   <Avatar color="#EC4899" size="md">
+     *     {getInitials(organization.name)}
+     *   </Avatar>
+     * )}
+     */
+    renderPreview?: (organization: TData, params: {
+        className?: string;
+    }) => ReactNode;
 };

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

@@ -1,7 +1,7 @@
 import { type ChangeEvent, type SyntheticEvent } from 'react';
 import { type MenuOrganizationProps, type Organization } from '../types';
 type UseLogicParams<TData extends Organization & Record<string, unknown>> = MenuOrganizationProps<TData>;
-export declare const useLogic: <TData extends Organization & Record<string, unknown>>({ organizations, onChangeSearch, onChange, currentOrganizationGroupLabel, currentOrganization, groupBy, onClose, onOpen, isOpen: isOpenPopover, isDisabled, disabledReason, isHidePersonalData, action, isLoading, isError, onRetry, renderItem, }: UseLogicParams<TData>) => {
+export declare const useLogic: <TData extends Organization & Record<string, unknown>>({ organizations, onChangeSearch, onChange, currentOrganizationGroupLabel, currentOrganization, groupBy, onClose, onOpen, isOpen: isOpenPopover, isDisabled, disabledReason, isHidePersonalData, action, isLoading, isError, onRetry, renderItem, renderPreview, }: UseLogicParams<TData>) => {
     action: ({
         text: string;
     } & Pick<import("../..").ButtonProps, "onClick" | "href" | "endIcon" | "startIcon" | "variant" | "component">) | undefined;
@@ -19,6 +19,9 @@ export declare const useLogic: <TData extends Organization & Record<string, unkn
         isDisabled: boolean | undefined;
         disabledReason: string | undefined;
         isHidePersonalData: boolean | undefined;
+        renderPreview: ((organization: Organization & Record<string, unknown>, params: {
+            className?: string;
+        }) => import("react").ReactNode) | undefined;
         ref: (node: HTMLButtonElement | null) => void;
     };
     searchProps: {

package/node/components/MenuOrganization/useLogic/useLogic.js

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const DashboardLayout_1 = require("../../DashboardLayout");
 const hooks_1 = require("../../hooks");
 const personalDataSecurity_1 = require("../../personalDataSecurity");
-const useLogic = ({ organizations = [], onChangeSearch, onChange, currentOrganizationGroupLabel, currentOrganization, groupBy, onClose, onOpen, isOpen: isOpenPopover, isDisabled, disabledReason, isHidePersonalData, action, isLoading, isError, onRetry, renderItem, }) => {
+const useLogic = ({ organizations = [], onChangeSearch, onChange, currentOrganizationGroupLabel, currentOrganization, groupBy, onClose, onOpen, isOpen: isOpenPopover, isDisabled, disabledReason, isHidePersonalData, action, isLoading, isError, onRetry, renderItem, renderPreview, }) => {
     const { isLoading: isDashboardLoading } = (0, react_1.useContext)(DashboardLayout_1.DashboardContext);
     const [searchValue, setSearchValue] = (0, react_1.useState)('');
     const [anchorButtonEl, setAnchorButtonEl] = (0, react_1.useState)(null);
@@ -53,6 +53,9 @@ const useLogic = ({ organizations = [], onChangeSearch, onChange, currentOrganiz
         }
         return !isError && !isLoading && organizations.length > 10;
     }, [searchValue.length, isError, isLoading, organizations.length]);
+    const renderPreviewWrapper = (0, react_1.useMemo)(() => renderPreview
+        ? (organization, params) => renderPreview(organization, params)
+        : undefined, [renderPreview]);
     return {
         action,
         isLoading,
@@ -67,6 +70,7 @@ const useLogic = ({ organizations = [], onChangeSearch, onChange, currentOrganiz
             isDisabled,
             disabledReason,
             isHidePersonalData,
+            renderPreview: renderPreviewWrapper,
             ref: buttonRef,
         },
         searchProps: {

package/package.json

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