@moysklad/uikit 30.4.0 → 31.20.0

package/dist/components/{FieldLabel → _shared/FieldLabel}/FieldLabel_module.css

@@ -1,42 +1,42 @@
-.container-C1lItd {
+.container-Oy3B6y {
   justify-content: flex-start;
   align-items: center;
   gap: 4px;
   display: flex;
 }
 
-.textWithRequiredMark-ETmaJz {
+.textWithRequiredMark-RgeNds {
   align-items: center;
   display: flex;
   overflow: hidden;
 }
 
-.labelText-EzqZFW {
+.labelText-DXFBW5 {
   flex: 1;
 }
 
-.requiredMark-Mkh961 {
+.requiredMark-DNwhjO {
   color: var(--elements-critical, #e50347);
 }
 
-.overflowText-GKoGmM {
+.overflowText-pVcM4P {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
 
-.overflowText-GKoGmM:after {
+.overflowText-pVcM4P:after {
   content: "";
   display: block;
 }
 
-.hint-omNam8 {
+.hint-nBYA67 {
   box-sizing: border-box;
   overflow-wrap: break-word;
   max-width: 300px;
 }
 
-.hintText-Kbfap2 {
+.hintText-ZiFJHZ {
   overflow-wrap: break-word;
 }
 

package/dist/components/{FieldLabel → _shared/FieldLabel}/components/HelpButton.d.ts

@@ -1,4 +1,4 @@
-import { type HelpProps, type HelpSizeValue } from '../../Help/Help';
+import { type HelpProps, type HelpSizeValue } from '../../../Help/Help';
 interface HelpButtonProps {
     size: HelpSizeValue;
     helpProps: HelpProps;

package/dist/components/{FieldLabel → _shared/FieldLabel}/components/HelpButton.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { cn } from "../../../common/css/cn.js";
-import { Help } from "../../Help/Help.js";
+import { cn } from "../../../../common/css/cn.js";
+import { Help } from "../../../Help/Help.js";
 import HelpButton_module from "./HelpButton.module.js";
 const HelpButton = ({ size, helpProps, className })=>/*#__PURE__*/ jsx("div", {
         className: cn(HelpButton_module.container, className),

package/dist/components/{FieldLabel → _shared/FieldLabel}/components/HelpButton.module.js

@@ -1,5 +1,5 @@
 import "./HelpButton_module.css";
 const HelpButton_module = {
-    container: "container-5gBKoj"
+    container: "container-fOhKnl"
 };
 export default HelpButton_module;

package/dist/components/{FieldLabel → _shared/FieldLabel}/components/HelpButton_module.css

@@ -1,4 +1,4 @@
-.container-5gBKoj {
+.container-fOhKnl {
   -webkit-user-select: none;
   user-select: none;
   justify-content: center;

package/dist/components/{FieldRow → _shared/FieldRow}/FieldRow.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { type IHasTestId } from '../../common';
+import { type IHasTestId } from '../../../common';
 interface RowProps extends IHasTestId {
     children: ReactNode;
     helpComponent?: ReactNode;

package/dist/components/{FieldRow → _shared/FieldRow}/FieldRow.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "../../common/index.js";
+import { cn } from "../../../common/index.js";
 import FieldRow_module from "./FieldRow.module.js";
 const FieldRow = ({ children, helpComponent, className, controlClassName, helpClassName })=>/*#__PURE__*/ jsxs("div", {
         className: cn(FieldRow_module.main, className),

package/dist/components/{FieldRow → _shared/FieldRow}/FieldRow.module.js

@@ -1,7 +1,7 @@
 import "./FieldRow_module.css";
 const FieldRow_module = {
-    main: "main-FJxMD5",
-    control: "control-I_nQoE",
-    help: "help-dIvToq"
+    main: "main-sxY40U",
+    control: "control-H2iwSf",
+    help: "help-M7JGK9"
 };
 export default FieldRow_module;

package/dist/components/{FieldRow → _shared/FieldRow}/FieldRow_module.css

@@ -1,17 +1,17 @@
-.main-FJxMD5 {
+.main-sxY40U {
   align-items: center;
   width: 100%;
   display: flex;
   position: relative;
 }
 
-.control-I_nQoE {
+.control-H2iwSf {
   flex-direction: column;
   flex: 1;
   display: flex;
 }
 
-.help-dIvToq {
+.help-M7JGK9 {
   flex-direction: column;
   align-items: flex-end;
   width: 32px;

package/dist/components/{Info → _shared/Info}/Info.d.ts

@@ -1,4 +1,5 @@
-import { type IHasTestId } from '../../common/types';
+import { type IHasTestId } from '../../../common/types';
+import { type InfoSizeValue } from './types';
 export interface InfoProps extends IHasTestId {
     info?: string;
     error?: boolean;
@@ -6,5 +7,6 @@ export interface InfoProps extends IHasTestId {
     disabled?: boolean;
     isEllipsis?: boolean;
     className?: string;
+    size?: InfoSizeValue;
 }
 export declare const Info: import("react").ForwardRefExoticComponent<InfoProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/{Info → _shared/Info}/Info.js

@@ -1,11 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useState } from "react";
-import { cn } from "../../common/css/cn.js";
-import { Hint } from "../Hint/Hint.js";
-import { Text, TextColor } from "../Text/Text.js";
-import { useIsElementOverflowing } from "../../hooks/useIsElementOverflowing/index.js";
+import { cn } from "../../../common/css/cn.js";
+import { Hint } from "../../Hint/Hint.js";
+import { Text, TextColor, TextVariant } from "../../Text/Text.js";
+import { useIsElementOverflowing } from "../../../hooks/useIsElementOverflowing/index.js";
+import { InfoSize } from "./types/index.js";
 import Info_module from "./Info.module.js";
-const Info = /*#__PURE__*/ forwardRef(({ info, error, warning, disabled, testId, isEllipsis, className }, ref)=>{
+const Info = /*#__PURE__*/ forwardRef(({ info, error, warning, disabled, testId, isEllipsis, className, size = InfoSize.M }, ref)=>{
     const { ref: infoRef, isOverflowing: isOverflowingInfo } = useIsElementOverflowing([
         info
     ], isEllipsis ? ref : null);
@@ -16,7 +17,9 @@ const Info = /*#__PURE__*/ forwardRef(({ info, error, warning, disabled, testId,
         if (!disabled && warning) return TextColor.attention;
         return TextColor.secondary;
     };
-    const caption = /*#__PURE__*/ jsx(Text.Caption, {
+    const textVariant = size === InfoSize.M ? TextVariant.caption : TextVariant.body;
+    const caption = /*#__PURE__*/ jsx(Text, {
+        variant: textVariant,
         ref: isEllipsis ? infoRef : void 0,
         className: cn(Info_module.info, isEllipsis ? Info_module.ellipsis : Info_module.wrap, className),
         colorToken: getColor(),

package/dist/components/_shared/Info/Info.module.js

@@ -0,0 +1,9 @@
+import "./Info_module.css";
+const Info_module = {
+    info: "info-ZKbH17",
+    wrap: "wrap-iIsMFE",
+    ellipsis: "ellipsis-TRaKmy",
+    hint: "hint-GMnBBU",
+    hintText: "hintText-Y3plcB"
+};
+export default Info_module;

package/dist/components/{Info → _shared/Info}/Info_module.css

@@ -1,13 +1,13 @@
-.info-DBaBLp {
+.info-ZKbH17 {
   margin: 0;
   position: relative;
 }
 
-.wrap-RDQclO {
+.wrap-iIsMFE {
   overflow-wrap: break-word;
 }
 
-.ellipsis-DTZwRA {
+.ellipsis-TRaKmy {
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 100%;
@@ -15,18 +15,18 @@
   overflow: hidden;
 }
 
-.ellipsis-DTZwRA:after {
+.ellipsis-TRaKmy:after {
   content: "";
   display: block;
 }
 
-.hint-x4Dujm {
+.hint-GMnBBU {
   box-sizing: border-box;
   overflow-wrap: break-word;
   max-width: 300px;
 }
 
-.hintText-VkgCkI {
+.hintText-Y3plcB {
   overflow-wrap: break-word;
 }
 

package/dist/components/_shared/Info/types/index.d.ts

@@ -0,0 +1,6 @@
+import type { ValueOf } from '../../../../common';
+export declare const InfoSize: {
+    readonly M: "m";
+    readonly L: "l";
+};
+export type InfoSizeValue = ValueOf<typeof InfoSize>;

package/dist/components/_shared/Info/types/index.js

@@ -0,0 +1,5 @@
+const InfoSize = {
+    M: 'm',
+    L: 'l'
+};
+export { InfoSize };

package/dist/components/{InputClear → _shared/InputClear}/InputClear.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { type IHasTestId } from '../../common/types';
+import { type IHasTestId } from '../../../common/types';
 interface InputClearProps extends IHasTestId {
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;

package/dist/components/{InputClear → _shared/InputClear}/InputClear.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { cn } from "../../common/css/cn.js";
-import { RemoveClose12Icon, RemoveCloseIcon16Icon } from "../../icon/index.js";
+import { cn } from "../../../common/css/cn.js";
+import { RemoveClose12Icon, RemoveCloseIcon16Icon } from "../../../icon/index.js";
 import InputClear_module from "./InputClear.module.js";
 const InputClear = ({ testId, tabIndex, className, onClick, onMouseDown, size = 'M' })=>/*#__PURE__*/ jsx("button", {
         type: "button",

package/dist/components/{InputClear → _shared/InputClear}/InputClear.module.js

@@ -1,7 +1,7 @@
 import "./InputClear_module.css";
 const InputClear_module = {
-    main: "main-hfNd9I",
-    icon: "icon-PByNsE",
-    large: "large-tv6rtf"
+    main: "main-wavOVy",
+    icon: "icon-dcuwJd",
+    large: "large-crUG9g"
 };
 export default InputClear_module;

package/dist/components/{InputClear → _shared/InputClear}/InputClear_module.css

@@ -1,4 +1,4 @@
-.main-hfNd9I {
+.main-wavOVy {
   all: unset;
   box-sizing: border-box;
   cursor: pointer;
@@ -11,22 +11,22 @@
   display: flex;
 }
 
-.icon-PByNsE {
+.icon-dcuwJd {
   justify-content: center;
   align-items: center;
   display: flex;
 }
 
-.large-tv6rtf {
+.large-crUG9g {
   width: 28px;
   height: 28px;
 }
 
-.main-hfNd9I:hover, .main-hfNd9I:active {
+.main-wavOVy:hover, .main-wavOVy:active {
   color: var(--elements-hover, #091739);
 }
 
-.main-hfNd9I:focus-visible {
+.main-wavOVy:focus-visible {
   color: var(--elements-hover, #091739);
   border: 1px solid var(--border-focused, #091739);
   border-radius: 4px;

package/dist/components/_shared/utils/polymorphicClickableTypes.d.ts

@@ -0,0 +1,17 @@
+import { type ComponentPropsWithRef, type ElementType, type PropsWithoutRef, type ReactElement } from 'react';
+import type { ValueOf } from '../../../common';
+export declare const ClickableTag: {
+    readonly a: "a";
+    readonly button: "button";
+};
+export type ClickableTagValue = ValueOf<typeof ClickableTag>;
+type MergeProps<Props extends object, As extends ElementType> = Props & Omit<ComponentPropsWithRef<As>, keyof Props>;
+export type PolymorphicClickableProps<Props extends object, As extends ClickableTagValue> = {
+    as?: As;
+} & MergeProps<Props, As>;
+export interface ClickableComponent<Props extends object, DefaultAs extends ClickableTagValue> {
+    <As extends ClickableTagValue = DefaultAs>(props: PolymorphicClickableProps<Props, As>): ReactElement | null;
+    displayName?: string;
+}
+export declare const polymorphicClickableRef: <Props extends object, As extends ClickableTagValue>(render: (props: PropsWithoutRef<PolymorphicClickableProps<Props, As>>, ref: ComponentPropsWithRef<As>["ref"]) => ReactElement | null) => ClickableComponent<Props, As>;
+export {};

package/dist/components/_shared/utils/polymorphicClickableTypes.js

@@ -0,0 +1,7 @@
+import { forwardRef } from "react";
+const ClickableTag = {
+    a: 'a',
+    button: 'button'
+};
+const polymorphicClickableRef = forwardRef;
+export { ClickableTag, polymorphicClickableRef };

package/dist/data-grid/Filters/DateRangeFilter/DropdownContent/index.js

@@ -90,7 +90,7 @@ const DropdownContent = (props)=>{
                     isTimeToggleVisible && /*#__PURE__*/ jsx(Hint, {
                         overlay: /*#__PURE__*/ jsx(Text.Body, {
                             colorToken: TextColor.invert,
-                            children: locale.footer.timeSelectionToggleHint
+                            children: locale.translate.footer.timeSelectionToggleHint
                         }),
                         trigger: isTimeToggleDisabled ? 'hover' : [],
                         overlayClassName: DropdownContent_module.toggleTooltipOverlay,
@@ -106,7 +106,7 @@ const DropdownContent = (props)=>{
                                 checked: props.withTime,
                                 disabled: isTimeToggleDisabled,
                                 onChange: handleChangeTimeSelection,
-                                label: locale.footer.timeSelectionToggle
+                                label: locale.translate.footer.timeSelectionToggle
                             })
                         })
                     }),
@@ -116,7 +116,7 @@ const DropdownContent = (props)=>{
                         onClick: props.onClearButtonClick,
                         children: [
                             /*#__PURE__*/ jsx(FilterUpdate20Icon, {}),
-                            locale.footer.clearFilterButton
+                            locale.translate.footer.clearFilterButton
                         ]
                     })
                 ]

package/dist/data-grid/Filters/DateRangeFilter/InputContent/index.js

@@ -3,7 +3,7 @@ import { format, isSameMonth, isToday, isYesterday } from "date-fns";
 import { cn } from "../../../../common/css/index.js";
 import { Text, TextTag } from "../../../../components/Text/Text.js";
 import { useLocaleContext } from "../../../../context/contexts/index.js";
-import { useLocale } from "../../../locale/index.js";
+import { LocaleKey, useLocale } from "../../../locale/index.js";
 import { Left12Icon, Right12Icon } from "../../../../icon/index.js";
 import { ArrowButton } from "../ArrowButton/index.js";
 import { CalendarVariant } from "../consts.js";
@@ -14,32 +14,32 @@ const removeDots = (str)=>str.replace(/\./g, '');
 const getWeekIntervalText = ({ startDate, endDate }, localeOptions)=>{
     const formatOptions = getFormatOptions(localeOptions.lang);
     if (isSameMonth(startDate, endDate)) {
-        const formatedStartDate = format(startDate, localeOptions.locale.slider.week.dateFormat.sameMonth.firstDate, formatOptions);
-        const formatedTooltipStartDate = format(startDate, localeOptions.locale.slider.week.tooltipDateFormat.sameMonth.firstDate, formatOptions);
-        const formatedEndDate = format(endDate, localeOptions.locale.slider.week.dateFormat.sameMonth.endDate, formatOptions);
-        const formatedTooltipEndDate = format(endDate, localeOptions.locale.slider.week.tooltipDateFormat.sameMonth.endDate, formatOptions);
+        const formatedStartDate = format(startDate, localeOptions.dateFormats.format.slider.week.dateFormat.sameMonth.firstDate, formatOptions);
+        const formatedTooltipStartDate = format(startDate, localeOptions.dateFormats.format.slider.week.tooltipDateFormat.sameMonth.firstDate, formatOptions);
+        const formatedEndDate = format(endDate, localeOptions.dateFormats.format.slider.week.dateFormat.sameMonth.endDate, formatOptions);
+        const formatedTooltipEndDate = format(endDate, localeOptions.dateFormats.format.slider.week.tooltipDateFormat.sameMonth.endDate, formatOptions);
         return {
             text: `${formatedStartDate}–${formatedEndDate}`,
             tooltipText: `${formatedTooltipStartDate}–${formatedTooltipEndDate}`
         };
     }
-    const formatedStartDate = format(startDate, localeOptions.locale.slider.week.dateFormat.differentMonth.firstDate, formatOptions);
-    const formatedTooltipStartDate = format(startDate, localeOptions.locale.slider.week.tooltipDateFormat.differentMonth.firstDate, formatOptions);
-    const formatedEndDate = format(endDate, localeOptions.locale.slider.week.dateFormat.differentMonth.endDate, formatOptions);
-    const formatedTooltipEndDate = format(endDate, localeOptions.locale.slider.week.tooltipDateFormat.differentMonth.endDate, formatOptions);
+    const formatedStartDate = format(startDate, localeOptions.dateFormats.format.slider.week.dateFormat.differentMonth.firstDate, formatOptions);
+    const formatedTooltipStartDate = format(startDate, localeOptions.dateFormats.format.slider.week.tooltipDateFormat.differentMonth.firstDate, formatOptions);
+    const formatedEndDate = format(endDate, localeOptions.dateFormats.format.slider.week.dateFormat.differentMonth.endDate, formatOptions);
+    const formatedTooltipEndDate = format(endDate, localeOptions.dateFormats.format.slider.week.tooltipDateFormat.differentMonth.endDate, formatOptions);
     return {
         text: removeDots(`${formatedStartDate} — ${formatedEndDate}`),
         tooltipText: `${formatedTooltipStartDate} — ${formatedTooltipEndDate}`
     };
 };
 const getDayText = (options, localeOptions)=>{
-    if (!options.value) return localeOptions.locale.slider.day.placeholder;
-    return format(options.value, localeOptions.locale.slider.day.dateFormat, getFormatOptions(localeOptions.lang));
+    if (!options.value) return localeOptions.translates.translate.slider.day.placeholder;
+    return format(options.value, localeOptions.dateFormats.format.slider.day.dateFormat, getFormatOptions(localeOptions.lang));
 };
 const getWeekText = (options, localeOptions)=>{
     const unselectedTexts = {
-        text: localeOptions.locale.slider.week.placeholder,
-        tooltipText: localeOptions.locale.slider.week.placeholder
+        text: localeOptions.translates.translate.slider.week.placeholder,
+        tooltipText: localeOptions.translates.translate.slider.week.placeholder
     };
     if (!options.value) return unselectedTexts;
     const { startDate, endDate } = getRangeDates(options);
@@ -50,11 +50,11 @@ const getWeekText = (options, localeOptions)=>{
     }, localeOptions);
 };
 const getMonthText = (options, localeOptions)=>{
-    const unselectedText = localeOptions.locale.slider.month.placeholder;
+    const unselectedText = localeOptions.translates.translate.slider.month.placeholder;
     if (!options.value) return unselectedText;
     const { startDate, endDate } = getRangeDates(options);
     if (!startDate || !endDate) return unselectedText;
-    const text = format(startDate, localeOptions.locale.slider.month.dateFormat, getFormatOptions(localeOptions.lang));
+    const text = format(startDate, localeOptions.dateFormats.format.slider.month.dateFormat, getFormatOptions(localeOptions.lang));
     return capitalizeFirstLetter(text);
 };
 const getPeriodText = (value, localeOptions)=>{
@@ -76,16 +76,16 @@ const getPeriodText = (value, localeOptions)=>{
     return null;
 };
 const getDayPeriodName = (options, locale)=>{
-    if (options.value && isToday(options.value)) return locale.dayQuickFilters.today;
-    if (options.value && isYesterday(options.value)) return locale.dayQuickFilters.yesterday;
-    return locale.slider.day.title;
+    if (options.value && isToday(options.value)) return locale.translate.dayQuickFilters.today;
+    if (options.value && isYesterday(options.value)) return locale.translate.dayQuickFilters.yesterday;
+    return locale.translate.slider.day.title;
 };
 const getPeriodName = (value, locale)=>{
     if (isDayValue(value)) return getDayPeriodName(value, locale);
-    if (isWeekValue(value)) return locale.slider.week.title;
-    if (isMonthValue(value)) return locale.slider.month.title;
-    if (isAnyDateValue(value)) return locale.radiobuttons.anyDate;
-    if (isNoDateValue(value)) return locale.radiobuttons.noDate;
+    if (isWeekValue(value)) return locale.translate.slider.week.title;
+    if (isMonthValue(value)) return locale.translate.slider.month.title;
+    if (isAnyDateValue(value)) return locale.translate.radiobuttons.anyDate;
+    if (isNoDateValue(value)) return locale.translate.radiobuttons.noDate;
     return null;
 };
 const InputContent = (props)=>{
@@ -94,11 +94,14 @@ const InputContent = (props)=>{
         CalendarVariant.week,
         CalendarVariant.month
     ].includes(props.value.type);
-    const { lang } = useLocaleContext();
-    const locale = useLocale('DateRangeFilter');
+    const { lang, locale } = useLocaleContext();
+    const translates = useLocale('DateRangeFilter');
+    const dateFormats = useLocale('DateRangeFilter', LocaleKey.Locale);
     const periodText = getPeriodText(props.value, {
+        translates,
+        lang,
         locale,
-        lang
+        dateFormats
     });
     return /*#__PURE__*/ jsxs("div", {
         className: cn(InputContent_module.container, showArrowButtons && InputContent_module.withButtons),
@@ -124,7 +127,7 @@ const InputContent = (props)=>{
                 children: [
                     /*#__PURE__*/ jsx(Text.Body, {
                         as: TextTag.span,
-                        children: getPeriodName(props.value, locale)
+                        children: getPeriodName(props.value, translates)
                     }),
                     /*#__PURE__*/ jsx(TooltipedText, {
                         className: InputContent_module.periodValue,

package/dist/data-grid/Filters/DateRangeFilter/PeriodVariantList/index.js

@@ -53,14 +53,16 @@ const PeriodVariantList = /*#__PURE__*/ forwardRef((props, ref)=>{
                                     props.onClickYestardayButton?.();
                                 },
                                 small: true,
-                                children: locale.dayQuickFilters.yesterday
+                                children: locale.translate.dayQuickFilters.yesterday
                             }),
                             /*#__PURE__*/ jsx(Chip, {
                                 className: cn(PeriodVariantList_module.chip, props.todaySelected && PeriodVariantList_module.active),
                                 isActive: props.todaySelected ?? false,
-                                onClick: props.onClickTodayButton ?? (()=>{}),
+                                onClick: ()=>{
+                                    props.onClickTodayButton?.();
+                                },
                                 small: true,
-                                children: locale.dayQuickFilters.today
+                                children: locale.translate.dayQuickFilters.today
                             })
                         ]
                     })

package/dist/data-grid/Filters/DateRangeFilter/Year/index.js

@@ -3,12 +3,12 @@ import { format, isSameMonth, startOfDay } from "date-fns";
 import { cn } from "../../../../common/index.js";
 import { Text } from "../../../../components/Text/Text.js";
 import { useLocaleContext } from "../../../../context/contexts/index.js";
-import { useLocale } from "../../../locale/index.js";
+import { LocaleKey, useLocale } from "../../../locale/index.js";
 import { capitalizeFirstLetter, getFormatOptions, getRangeDates, isMonthValue } from "../utils.js";
 import Year_module from "./Year.module.js";
 const Year = (props)=>{
     const { lang } = useLocaleContext();
-    const locale = useLocale('DateRangeFilter');
+    const locale = useLocale('DateRangeFilter', LocaleKey.Locale);
     const year = props.year.getFullYear();
     const isSelectedMonth = (monthStartDate)=>{
         if (!isMonthValue(props.value)) return false;
@@ -37,7 +37,7 @@ const Year = (props)=>{
                         },
                         children: /*#__PURE__*/ jsx(Text.Body, {
                             className: Year_module.monthText,
-                            children: capitalizeFirstLetter(format(date, locale.monthCalendarFormat, getFormatOptions(lang)))
+                            children: capitalizeFirstLetter(format(date, locale.format.monthCalendarFormat, getFormatOptions(lang)))
                         })
                     }, +date);
                 })

package/dist/data-grid/Filters/DateRangeFilter/consts.js

@@ -9,19 +9,19 @@ const CalendarVariant = {
 const calendarVariants = [
     {
         value: CalendarVariant.period,
-        labelGetter: (locale)=>locale.radiobuttons.period
+        labelGetter: (locale)=>locale.translate.radiobuttons.period
     },
     {
         value: CalendarVariant.day,
-        labelGetter: (locale)=>locale.radiobuttons.day
+        labelGetter: (locale)=>locale.translate.radiobuttons.day
     },
     {
         value: CalendarVariant.week,
-        labelGetter: (locale)=>locale.radiobuttons.week
+        labelGetter: (locale)=>locale.translate.radiobuttons.week
     },
     {
         value: CalendarVariant.month,
-        labelGetter: (locale)=>locale.radiobuttons.month
+        labelGetter: (locale)=>locale.translate.radiobuttons.month
     }
 ];
 const getCalendarVariants = (locale)=>calendarVariants.map((variant)=>({
@@ -31,11 +31,11 @@ const getCalendarVariants = (locale)=>calendarVariants.map((variant)=>({
 const additionalCalendarVariants = [
     {
         value: CalendarVariant.anyDate,
-        labelGetter: (locale)=>locale.radiobuttons.anyDate
+        labelGetter: (locale)=>locale.translate.radiobuttons.anyDate
     },
     {
         value: CalendarVariant.noDate,
-        labelGetter: (locale)=>locale.radiobuttons.noDate
+        labelGetter: (locale)=>locale.translate.radiobuttons.noDate
     }
 ];
 const getAdditionalCalendarVariants = (locale)=>additionalCalendarVariants.map((variant)=>({

package/dist/data-grid/Filters/DateRangeFilter/hooks/useMaskInput.js

@@ -1,20 +1,20 @@
 import { useEffect, useState } from "react";
 import { format, isBefore, isEqual, isValid, parse } from "date-fns";
-import { useLocale } from "../../../locale/index.js";
+import { LocaleKey, useLocale } from "../../../locale/index.js";
 import { getEndOfDay, getPeriodValue, getRangeDates as external_utils_js_getRangeDates, getStartOfDay, isRangeValue } from "../utils.js";
 const DATES_DELIMETER = ' — ';
-const getEmptyMask = (withTime, locale)=>withTime ? locale.emptyDate.withTime : locale.emptyDate.withoutTime;
+const getEmptyMask = (withTime, locale)=>withTime ? locale.format.emptyDate.withTime : locale.format.emptyDate.withoutTime;
 const isDateValuesEqual = (value1, value2)=>{
     if (value1 && value2) return isEqual(value1, value2);
     return value1 === value2;
 };
 const useMaskInput = (args)=>{
-    const locale = useLocale('DateRangeFilter');
-    const getDateFormat = (withTime)=>withTime ? locale.dateWithTimeFormat : locale.dateFormat;
-    const inputMask = args.withTime ? `${locale.inputMask.withTime} — ${locale.inputMask.withTime}` : `${locale.inputMask.withoutTime} — ${locale.inputMask.withoutTime}`;
+    const locale = useLocale('DateRangeFilter', LocaleKey.Locale);
+    const getDateFormat = (withTime)=>withTime ? locale.format.dateWithTimeFormat : locale.format.dateFormat;
+    const inputMask = args.withTime ? `${locale.format.inputMask.withTime} — ${locale.format.inputMask.withTime}` : `${locale.format.inputMask.withoutTime} — ${locale.format.inputMask.withoutTime}`;
     const formatDate = (date, withTime)=>{
         const timeString = format(date, 'HH:mm');
-        return `${format(date, locale.dateFormat)}${withTime ? ` ${timeString}` : ''}`;
+        return `${format(date, locale.format.dateFormat)}${withTime ? ` ${timeString}` : ''}`;
     };
     const getFormatedDate = (date, withTime = false)=>date ? formatDate(date, withTime) : getEmptyMask(withTime, locale);
     const getRangeDates = (options, withTime)=>{

package/dist/data-grid/Filters/DateRangeFilter/hooks/useSideMenu.js

@@ -51,10 +51,7 @@ const useSideMenu = (args)=>{
                 });
                 break;
             default:
-                {
-                    const unknownVariant = variant;
-                    console.error(`неизвестный вариант ${unknownVariant}`);
-                }
+                throw new Error(`неизвестный вариант ${variant}`);
         }
     };
     const yesterdayButtonClickHandler = ()=>{