@astral/ui 4.36.1 → 4.37.1

package/node/components/JsonViewer/NodeValue/styles.d.ts

@@ -341,6 +341,7 @@ export declare const Value: import("@emotion/styled/dist/declarations/src/types"
     colorIntensity?: import("../..").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement> & {
@@ -354,6 +355,7 @@ export declare const CopyWrapper: import("@emotion/styled/dist/declarations/src/
     colorIntensity?: import("../..").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & {
     copyText?: string | undefined;
     copyPosition?: "left" | "right" | undefined;
@@ -1037,6 +1039,7 @@ export declare const GuidValue: import("@emotion/styled/dist/declarations/src/ty
     colorIntensity?: import("../..").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & {
     children?: import("react").ReactNode;
 } & {

package/node/components/LegacyNotification/NotificationTemplate/styles.d.ts

@@ -28,6 +28,7 @@ export declare const Content: import("@emotion/styled/dist/declarations/src/type
     colorIntensity?: import("../../Typography").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -50,6 +51,7 @@ export declare const Title: import("@emotion/styled/dist/declarations/src/types"
     colorIntensity?: import("../../Typography").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/node/components/MaskField/MaskField.js

@@ -4,10 +4,10 @@ exports.MaskField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_imask_1 = require("react-imask");
-const TextField_1 = require("../TextField");
+const styles_1 = require("./styles");
 const MaskedTextField = (0, react_imask_1.IMaskMixin)(({ ...props }) => {
     const textFieldProps = props;
-    return (0, jsx_runtime_1.jsx)(TextField_1.TextField, { ...textFieldProps });
+    return (0, jsx_runtime_1.jsx)(styles_1.StyledTextField, { ...textFieldProps });
 });
 exports.MaskField = (0, react_1.forwardRef)(({ onChange, onAccept, ...props }, ref) => {
     const maskFieldProps = { unmask: true, ...props };

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledTextField: import("@emotion/styled").StyledComponent<Omit<import("../TextField").TextFieldProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/node/components/MaskField/styles.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledTextField = void 0;
+const styles_1 = require("@mui/material/styles");
+const TextField_1 = require("../TextField");
+exports.StyledTextField = (0, styles_1.styled)(TextField_1.TextField) `
+  font-feature-settings: "calt" 0;
+`;

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

@@ -5,6 +5,7 @@ export declare const Label: import("@emotion/styled/dist/declarations/src/types"
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

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

@@ -24,6 +24,7 @@ export declare const StyledTypography: import("@emotion/styled/dist/declarations
     colorIntensity?: import("../../Typography").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {

package/node/components/MenuOrganization/OrganizationGroup/styles.d.ts

@@ -5,6 +5,7 @@ export declare const Label: import("@emotion/styled/dist/declarations/src/types"
     colorIntensity?: import("../../Typography").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

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

@@ -22,6 +22,7 @@ export declare const StyledTypography: import("@emotion/styled/dist/declarations
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

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

@@ -5,6 +5,7 @@ export declare const PageItem: import("@emotion/styled/dist/declarations/src/typ
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/node/components/NavMenu/Item/ItemButton/styles.d.ts

@@ -632,6 +632,7 @@ export declare const NavMenuItemButtonText: import("@emotion/styled/dist/declara
     colorIntensity?: import("../../..").Intensity | undefined;
     component?: import("../../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement> & {

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

@@ -9,6 +9,7 @@ export declare const Header: import("@emotion/styled/dist/declarations/src/types
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -18,6 +19,7 @@ export declare const Subheader: import("@emotion/styled/dist/declarations/src/ty
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/node/components/Notification/NotificationTemplate/styles.d.ts

@@ -20,6 +20,7 @@ export declare const Content: import("@emotion/styled/dist/declarations/src/type
     colorIntensity?: import("../../Typography").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -46,6 +47,7 @@ export declare const Title: import("@emotion/styled/dist/declarations/src/types"
     colorIntensity?: import("../../Typography").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/node/components/NotificationList/ListItem/styles.d.ts

@@ -10,6 +10,7 @@ export declare const Title: import("@emotion/styled/dist/declarations/src/types"
     colorIntensity?: import("../../Typography").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -19,6 +20,7 @@ export declare const DateText: import("@emotion/styled/dist/declarations/src/typ
     colorIntensity?: import("../../Typography").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/node/components/OverflowTypography/OverflowTypography.d.ts

@@ -342,6 +342,7 @@ export declare const OverflowTypography: import("react").ForwardRefExoticCompone
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -9,6 +9,7 @@ export declare const StyledTypography: import("@emotion/styled/dist/declarations
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & OverflowTypographyWrapperProps, {}, {}>;
@@ -18,6 +19,7 @@ export declare const Wrapper: import("@emotion/styled/dist/declarations/src/type
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {

package/node/components/PageContent/PageContentHeader/Title/styles.d.ts

@@ -5,6 +5,7 @@ export declare const TitleWrapper: import("@emotion/styled/dist/declarations/src
     colorIntensity?: import("../../../Typography").Intensity | undefined;
     component?: import("../../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/node/components/PageHeader/HeaderContent/Description/styles.d.ts

@@ -5,6 +5,7 @@ export declare const StyledTypography: import("@emotion/styled/dist/declarations
     colorIntensity?: import("../../../Typography").Intensity | undefined;
     component?: import("../../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/node/components/PageHeader/Title/styles.d.ts

@@ -5,6 +5,7 @@ export declare const TitleWrapper: import("@emotion/styled/dist/declarations/src
     colorIntensity?: import("../../Typography").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {

package/node/components/Pagination/PaginationItem/styles.d.ts

@@ -5,6 +5,7 @@ export declare const Ellipsis: import("@emotion/styled/dist/declarations/src/typ
     colorIntensity?: import("../../Typography").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {

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

@@ -14,6 +14,7 @@ export declare const Content: import("@emotion/styled/dist/declarations/src/type
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/node/components/ProductSwitcher/Content/styles.d.ts

@@ -19,6 +19,7 @@ export declare const ProductName: import("@emotion/styled/dist/declarations/src/
     colorIntensity?: import("../../Typography").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/node/components/TagsList/Tag/Tag.d.ts

@@ -20,7 +20,7 @@ export type TagProps = {
     /**
      * Хендлер клика по тегу
      */
-    onClick: (value: MouseEvent<HTMLDivElement>) => void;
+    onClick?: (value: MouseEvent<HTMLDivElement>) => void;
     /**
      * Название класса, применяется к корневому компоненту
      */

package/node/components/TagsList/Tag/constants.d.ts

@@ -0,0 +1 @@
+export declare const MAX_TAG_WIDTH = "246px";

package/node/components/TagsList/Tag/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAX_TAG_WIDTH = void 0;
+exports.MAX_TAG_WIDTH = '246px';

package/node/components/TagsList/Tag/index.d.ts

@@ -1 +1,2 @@
 export * from './Tag';
+export * from './constants';

package/node/components/TagsList/Tag/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Tag"), exports);
+__exportStar(require("./constants"), exports);

package/node/components/TagsList/Tag/styles.js

@@ -6,6 +6,8 @@ const Tag_1 = require("../../Tag");
 exports.StyledTag = (0, styled_1.styled)(Tag_1.Tag, {
     shouldForwardProp: (prop) => prop !== '$shrinks',
 }) `
+  overflow: hidden;
+
   /* 4em ширина необходима для отображения двух букв и избежания перекрытия кнопкой сброса всего текста тега */
   min-width: ${({ $shrinks }) => ($shrinks ? 'calc(2em + 20px)' : 'unset')};
   max-width: 246px;

package/node/components/TagsList/TagsList.js

@@ -11,11 +11,11 @@ const utils_1 = require("./utils");
  * Не предназначен для использования в продуктах, не экспортируется из пакета
  */
 const TagsList = (props) => {
-    const { maxItems, tagsContainerRef, visibleOptions, getTagProps } = (0, useLogic_1.useLogic)(props);
-    const { className, data, keyId, isDisabled, onClick } = props;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: className, ref: tagsContainerRef, children: [visibleOptions?.map((option, index) => {
-                const tagProps = getTagProps(option, index);
-                return ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { isDisabled: isDisabled, onClick: onClick, ...tagProps }, (0, utils_1.getKey)(option, keyId)));
-            }), data && maxItems < data.length && ((0, jsx_runtime_1.jsx)(styles_1.CounterTag, { isDisabled: isDisabled, label: `+${data.length - maxItems}`, onClick: onClick }, "more"))] }));
+    const { hiddenCount, tagsContainerRef, visibleOptions, getTagProps, showCounter, } = (0, useLogic_1.useLogic)(props);
+    const { className, keyId, isDisabled, onClick, getOptionLabel } = props;
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: className, ref: tagsContainerRef, children: [visibleOptions?.map((option) => {
+                const tagProps = getTagProps(option);
+                return ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { isDisabled: isDisabled, onClick: onClick, ...tagProps }, (0, utils_1.getKey)(option, keyId, getOptionLabel)));
+            }), showCounter && ((0, jsx_runtime_1.jsx)(styles_1.CounterTag, { isDisabled: isDisabled, label: `+${hiddenCount}`, onClick: onClick }, "more"))] }));
 };
 exports.TagsList = TagsList;

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

@@ -0,0 +1,2 @@
+export declare const MIN_AVAILABLE_WIDTH = 50;
+export declare const GAP_BETWEEN_TAGS = 4;

package/node/components/TagsList/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GAP_BETWEEN_TAGS = exports.MIN_AVAILABLE_WIDTH = void 0;
+exports.MIN_AVAILABLE_WIDTH = 50;
+exports.GAP_BETWEEN_TAGS = 4; // 4px

package/node/components/TagsList/styles.js

@@ -3,12 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CounterTag = exports.Wrapper = void 0;
 const styled_1 = require("../styled");
 const Tag_1 = require("../Tag");
+const constants_1 = require("./constants");
 const Tag_2 = require("./Tag");
 exports.Wrapper = styled_1.styled.div `
+  overflow: hidden;
   display: flex;
-  column-gap: ${({ theme }) => theme.spacing(1)};
+  column-gap: ${constants_1.GAP_BETWEEN_TAGS}px;
 `;
 exports.CounterTag = (0, styled_1.styled)(Tag_2.Tag) `
+  overflow: unset;
+
   .${Tag_1.tagClassnames.label} {
     min-width: unset;
   }

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

@@ -1,4 +1,4 @@
-import { type MouseEvent } from 'react';
+import { type MouseEvent, type RefObject } from 'react';
 export type TagValue = string | Record<string, unknown>;
 export type TagsListProps<TData extends TagValue = TagValue> = {
     /**
@@ -14,16 +14,25 @@ export type TagsListProps<TData extends TagValue = TagValue> = {
      */
     isDisabled?: boolean;
     /**
-     * Поле, используемое в качестве ключа списка
+     * Поле, используемое в качестве ключа списка.
+     * Если не передано, для генерации ключа будет использоваться getOptionLabel
      */
-    keyId: TData extends string ? never : keyof TData;
+    keyId?: TData extends string ? never : keyof TData;
     /**
      * Используется для определения строкового значения опции
      */
     getOptionLabel: (value: TData) => string | number;
     onChange: (value: TData[] | undefined) => void;
     /**
-     * Функция, вызываемая при клике не тэг
+     * Функция, вызываемая при клике на тэг
      */
-    onClick: (value: MouseEvent<HTMLDivElement>) => void;
+    onClick?: (value: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Ref на внешний контейнер, чья ширина используется как база для расчёта доступного пространства..
+     */
+    inputContainerRef?: RefObject<HTMLElement | null>;
+    /**
+     * Зарезервированная ширина, которая будет вычтена из доступной ширины при расчете количества отображаемых тегов
+     */
+    reservedWidth?: number;
 };

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

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import type { TagValue } from '../types';
-import { type TagsListProps } from '../types';
+import type { TagsListProps, TagValue } from '../types';
 type UseLogicParams<TData extends TagValue> = TagsListProps<TData>;
-export declare const useLogic: <TData extends TagValue>({ data, keyId, getOptionLabel, onChange, }: UseLogicParams<TData>) => {
-    maxItems: number;
+export declare const useLogic: <TData extends TagValue>({ data, keyId, getOptionLabel, onChange, inputContainerRef, reservedWidth, }: UseLogicParams<TData>) => {
     visibleOptions: TData[];
+    hiddenCount: number;
+    showCounter: boolean;
     tagsContainerRef: import("react").RefObject<HTMLDivElement | null>;
-    getTagProps: (option: TData, index: number) => {
+    getTagProps: (option: TData) => {
         label: string | number;
         shrinks: boolean;
         onDelete: () => void;