@astral/ui 4.12.0 → 4.13.1

package/components/MenuOrganization/MenuOrganization.js

@@ -12,11 +12,12 @@ import { OrganizationListSkeleton } from './OrganizationListSkeleton';
 import { ActionWrapper, OrganizationsWrapper, SearchWrapper, StyledTypography, } from './styles';
 import { useLogic } from './useLogic';
 export const MenuOrganization = (props) => {
+    const { anchorOrigin = { vertical: 'bottom', horizontal: 'right' }, transformOrigin = { vertical: 'top', horizontal: 'right' }, } = props;
     const { action, isLoading, isError, onRetry, isComponentLoading, isShowOrganizationList, searchProps, popoverProps, organizationListProps, organizationButtonProps, isShowSearchField, } = useLogic(props);
     if (isComponentLoading) {
         return _jsx(MenuOrganizationSkeleton, {});
     }
-    return (_jsxs(_Fragment, { children: [_jsx(OrganizationButton, { ...organizationButtonProps }), _jsxs(Popover, { ...popoverProps, anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'right' }, children: [isShowSearchField && (_jsx(SearchWrapper, { children: _jsx(SearchField, { fullWidth: true, ...searchProps }) })), _jsx(OrganizationsWrapper, { "$isLoading": isLoading, className: menuOrganizationClassnames.root, children: _jsx(ContentState, { isLoading: isLoading, isCustom: isError, customState: {
+    return (_jsxs(_Fragment, { children: [_jsx(OrganizationButton, { ...organizationButtonProps }), _jsxs(Popover, { ...popoverProps, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, children: [isShowSearchField && (_jsx(SearchWrapper, { children: _jsx(SearchField, { fullWidth: true, ...searchProps }) })), _jsx(OrganizationsWrapper, { "$isLoading": isLoading, className: menuOrganizationClassnames.root, children: _jsx(ContentState, { isLoading: isLoading, isCustom: isError, customState: {
                                 title: (_jsx(StyledTypography, { children: "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435" })),
                                 Actions: (_jsx(Button, { variant: "light", color: "grey", onClick: onRetry, children: "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0441\u043D\u043E\u0432\u0430" })),
                                 className: menuOrganizationClassnames.errorPlaceholder,

package/components/MenuOrganization/types.d.ts

@@ -1,3 +1,4 @@
+import type { PopoverOrigin } from '@mui/material';
 import type { ComponentProps, ElementType, ReactNode } from 'react';
 import type { ButtonProps } from '../Button';
 export type Organization = {
@@ -126,4 +127,16 @@ export type MenuOrganizationProps<TData extends Organization = Organization> = {
     renderPreview?: (organization: TData, params: {
         className?: string;
     }) => ReactNode;
+    /**
+     * Позиция точки привязки на кнопке
+     * @example
+     * anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+     */
+    anchorOrigin?: PopoverOrigin;
+    /**
+     * Позиция точки привязки на Popover
+     * @example
+     * transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+     */
+    transformOrigin?: PopoverOrigin;
 };

package/components/Tag/styles.js

@@ -262,4 +262,6 @@ export const Wrapper = styled.div `
 `;
 export const LabelWrapper = styled.span `
   overflow: hidden;
+
+  text-overflow: ellipsis;
 `;

package/node/components/MenuOrganization/MenuOrganization.js

@@ -15,11 +15,12 @@ const OrganizationListSkeleton_1 = require("./OrganizationListSkeleton");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const MenuOrganization = (props) => {
+    const { anchorOrigin = { vertical: 'bottom', horizontal: 'right' }, transformOrigin = { vertical: 'top', horizontal: 'right' }, } = props;
     const { action, isLoading, isError, onRetry, isComponentLoading, isShowOrganizationList, searchProps, popoverProps, organizationListProps, organizationButtonProps, isShowSearchField, } = (0, useLogic_1.useLogic)(props);
     if (isComponentLoading) {
         return (0, jsx_runtime_1.jsx)(MenuOrganizationSkeleton_1.MenuOrganizationSkeleton, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrganizationButton_1.OrganizationButton, { ...organizationButtonProps }), (0, jsx_runtime_1.jsxs)(Popover_1.Popover, { ...popoverProps, anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'right' }, children: [isShowSearchField && ((0, jsx_runtime_1.jsx)(styles_1.SearchWrapper, { children: (0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { fullWidth: true, ...searchProps }) })), (0, jsx_runtime_1.jsx)(styles_1.OrganizationsWrapper, { "$isLoading": isLoading, className: constants_1.menuOrganizationClassnames.root, children: (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { isLoading: isLoading, isCustom: isError, customState: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrganizationButton_1.OrganizationButton, { ...organizationButtonProps }), (0, jsx_runtime_1.jsxs)(Popover_1.Popover, { ...popoverProps, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, children: [isShowSearchField && ((0, jsx_runtime_1.jsx)(styles_1.SearchWrapper, { children: (0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { fullWidth: true, ...searchProps }) })), (0, jsx_runtime_1.jsx)(styles_1.OrganizationsWrapper, { "$isLoading": isLoading, className: constants_1.menuOrganizationClassnames.root, children: (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { isLoading: isLoading, isCustom: isError, customState: {
                                 title: ((0, jsx_runtime_1.jsx)(styles_1.StyledTypography, { children: "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435" })),
                                 Actions: ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "light", color: "grey", onClick: onRetry, children: "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0441\u043D\u043E\u0432\u0430" })),
                                 className: constants_1.menuOrganizationClassnames.errorPlaceholder,

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

@@ -1,3 +1,4 @@
+import type { PopoverOrigin } from '@mui/material';
 import type { ComponentProps, ElementType, ReactNode } from 'react';
 import type { ButtonProps } from '../Button';
 export type Organization = {
@@ -126,4 +127,16 @@ export type MenuOrganizationProps<TData extends Organization = Organization> = {
     renderPreview?: (organization: TData, params: {
         className?: string;
     }) => ReactNode;
+    /**
+     * Позиция точки привязки на кнопке
+     * @example
+     * anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+     */
+    anchorOrigin?: PopoverOrigin;
+    /**
+     * Позиция точки привязки на Popover
+     * @example
+     * transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+     */
+    transformOrigin?: PopoverOrigin;
 };

package/node/components/Tag/styles.js

@@ -267,4 +267,6 @@ exports.Wrapper = styles_1.styled.div `
 `;
 exports.LabelWrapper = styles_1.styled.span `
   overflow: hidden;
+
+  text-overflow: ellipsis;
 `;

package/package.json

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