@astral/ui 4.0.0-alpha.34 → 4.0.0-alpha.35

package/components/AddressAutocomplete/AddressAutocomplete.d.ts

@@ -4,7 +4,7 @@ export type Address = {
     addressString: string;
 };
 export type AddressAutocompleteValue<TOptions extends Address = Address> = TOptions;
-export type AddressAutocompleteProps<TOptions extends Address = AddressAutocompleteValue> = Pick<AsyncAutocompleteProps<TOptions, false, false, boolean>, 'className' | 'ref' | 'id' | 'placeholder' | 'onClose' | 'onOpen' | 'open' | 'disablePortal' | 'loadingText' | 'noOptionsText' | 'readOnly' | 'renderOption' | 'autoHighlight' | 'getOptionDisabled' | 'label' | 'helperText' | 'inputRef' | 'size' | 'isDisabled' | 'isLoading' | 'isFullWidth' | 'isError' | 'isSuccess' | 'isRequired' | 'fetchDelayMs' | 'minSymbolsToFetch' | 'fetchOptions' | 'onInputChange' | 'role' | 'defaultValue'> & {
+export type AddressAutocompleteProps<TOptions extends Address = AddressAutocompleteValue> = Pick<AsyncAutocompleteProps<TOptions, false, false, boolean>, 'className' | 'ref' | 'id' | 'placeholder' | 'onClose' | 'onOpen' | 'open' | 'disablePortal' | 'loadingText' | 'noOptionsText' | 'readOnly' | 'renderOption' | 'autoHighlight' | 'getOptionDisabled' | 'label' | 'helperText' | 'inputRef' | 'size' | 'isDisabled' | 'isLoading' | 'isFullWidth' | 'isError' | 'isSuccess' | 'isRequired' | 'fetchDelayMs' | 'minSymbolsToFetch' | 'fetchOptions' | 'onInputChange' | 'role' | 'defaultValue' | 'hideHelperText'> & {
     /**
      *  Значение для autocomplete
      */
@@ -23,7 +23,7 @@ export type AddressAutocompleteProps<TOptions extends Address = AddressAutocompl
      */
     isHidePersonalData?: boolean;
 };
-export declare const AddressAutocomplete: <TOptions extends Address = Address>(props: Pick<AsyncAutocompleteProps<TOptions, false, false, boolean>, "label" | "size" | "defaultValue" | "className" | "id" | "placeholder" | "role" | "ref" | "open" | "onClose" | "readOnly" | "disablePortal" | "inputRef" | "onOpen" | "loadingText" | "noOptionsText" | "renderOption" | "autoHighlight" | "getOptionDisabled" | "onInputChange" | "helperText" | "isDisabled" | "isError" | "fetchOptions" | "fetchDelayMs" | "minSymbolsToFetch" | "isFullWidth" | "isSuccess" | "isLoading" | "isRequired"> & {
+export declare const AddressAutocomplete: <TOptions extends Address = Address>(props: Pick<AsyncAutocompleteProps<TOptions, false, false, boolean>, "label" | "size" | "defaultValue" | "className" | "id" | "placeholder" | "role" | "ref" | "open" | "onClose" | "readOnly" | "disablePortal" | "inputRef" | "onOpen" | "loadingText" | "noOptionsText" | "renderOption" | "autoHighlight" | "getOptionDisabled" | "onInputChange" | "hideHelperText" | "helperText" | "isDisabled" | "isError" | "fetchOptions" | "fetchDelayMs" | "minSymbolsToFetch" | "isFullWidth" | "isSuccess" | "isLoading" | "isRequired"> & {
     /**
      *  Значение для autocomplete
      */

package/components/AsyncAutocomplete/useLogic/useLogic.d.ts

@@ -315,6 +315,7 @@ export declare const useLogic: <TOptions, TMultiple extends boolean, TDisableCle
             endAdornment?: import("react").ReactNode;
             maxLength?: number | undefined;
             trimmed?: boolean | undefined;
+            hideHelperText?: boolean | undefined;
         } & Omit<import("@mui/material").AutocompleteRenderInputParams, "size">) => import("react").ReactNode) | undefined;
         renderOption?: ((props: import("react").HTMLAttributes<HTMLLIElement>, option: TOptions, state: import("@mui/material").AutocompleteRenderOptionState) => import("react").ReactNode) | undefined;
         renderTags?: ((value: TOptions[], getTagProps: import("@mui/material").AutocompleteRenderGetTagProps, ownerState: import("@mui/material").AutocompleteOwnerState<TOptions, TMultiple, TDisableClearable, TFreeSolo, "div">) => import("react").ReactNode) | undefined;
@@ -339,6 +340,7 @@ export declare const useLogic: <TOptions, TMultiple extends boolean, TDisableCle
         onHighlightChange?: ((event: SyntheticEvent<Element, Event>, option: TOptions | null, reason: import("@mui/material").AutocompleteHighlightChangeReason) => void) | undefined;
         openOnFocus?: boolean | undefined;
         selectOnFocus?: boolean | undefined;
+        hideHelperText?: boolean | undefined;
         helperText?: import("react").ReactNode;
         loadedDataError?: string | undefined;
         overflowOption?: import("../..").OverflowedElementProps | undefined;

package/components/AsyncAutocomplete/useLogic/useLogic.js

@@ -43,7 +43,8 @@ export const useLogic = (_a) => {
         });
     }, fetchDelayMs), [fetchOptions, fetchDelayMs]);
     const handleInputChange = (event, search, reason) => {
-        if (!search || search.length < minSymbolsToFetch) {
+        if ((minSymbolsToFetch > 0 && !search) ||
+            search.length < minSymbolsToFetch) {
             if (debouncedFetchOptions.isPending) {
                 debouncedFetchOptions.clear();
             }

package/components/Autocomplete/Autocomplete.d.ts

@@ -43,6 +43,10 @@ export type AutocompleteProps<TAutocompleteValueProps, TMultiple extends boolean
      * @default Очистить
      */
     clearText?: string;
+    /**
+     * Включает/отключает резервирование места под helperText
+     */
+    hideHelperText?: boolean;
 };
 export declare const Autocomplete: <TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean>(props: Omit<WithoutEmotionSpecific<MuiAutocompleteProps<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo, "div">>, "size" | "clearText" | "closeText" | "noOptionsText" | "openText" | "renderInput"> & Pick<TextFieldProps, "label" | "error" | "success" | "placeholder" | "required" | "inputProps" | "inputRef" | "helperText"> & {
     renderInput?: ((props: TextFieldProps & Omit<AutocompleteRenderInputParams, 'size'>) => ReactNode) | undefined;
@@ -82,4 +86,8 @@ export declare const Autocomplete: <TAutocompleteValueProps, TMultiple extends b
      * @default Очистить
      */
     clearText?: string | undefined;
+    /**
+     * Включает/отключает резервирование места под helperText
+     */
+    hideHelperText?: boolean | undefined;
 } & import("react").RefAttributes<unknown>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

package/components/Autocomplete/Autocomplete.js

@@ -19,19 +19,22 @@ import { Loader } from '../Loader';
 import { OverflowTypography, } from '../OverflowTypography';
 import { Tag } from '../Tag';
 import { TextField } from '../TextField';
+import { classNames } from '../utils';
 import { DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT, DEFAULT_PLACEHOLDER, } from './constants';
 import { StyledMenuItem } from './styles';
 import { useLogic } from './useLogic';
 const AutocompleteInner = (props, ref) => {
     const { isValueEmpty, isPopperVisible, autocompleteProps } = useLogic(props);
-    const { required, success, error, label, getOptionLabel, helperText, inputRef, multiple, size = 'medium', placeholder = DEFAULT_PLACEHOLDER, overflowOption, closeText = 'Закрыть', openText = 'Открыть', clearText = 'Очистить', loadingText = _jsx(Loader, {}), isLoadedDataError, loadedDataError, noOptionsText, autoHighlight, renderInput: externalRenderInput, renderTags: externalRenderTags, renderOption: externalRenderOption, inputProps } = props, restProps = __rest(props, ["required", "success", "error", "label", "getOptionLabel", "helperText", "inputRef", "multiple", "size", "placeholder", "overflowOption", "closeText", "openText", "clearText", "loadingText", "isLoadedDataError", "loadedDataError", "noOptionsText", "autoHighlight", "renderInput", "renderTags", "renderOption", "inputProps"]);
+    const { required, success, error, label, getOptionLabel, helperText, inputRef, multiple, size = 'medium', placeholder = DEFAULT_PLACEHOLDER, overflowOption, closeText = 'Закрыть', openText = 'Открыть', clearText = 'Очистить', loadingText = _jsx(Loader, {}), isLoadedDataError, loadedDataError, noOptionsText, autoHighlight, renderInput: externalRenderInput, renderTags: externalRenderTags, renderOption: externalRenderOption, inputProps, hideHelperText = false } = props, restProps = __rest(props, ["required", "success", "error", "label", "getOptionLabel", "helperText", "inputRef", "multiple", "size", "placeholder", "overflowOption", "closeText", "openText", "clearText", "loadingText", "isLoadedDataError", "loadedDataError", "noOptionsText", "autoHighlight", "renderInput", "renderTags", "renderOption", "inputProps", "hideHelperText"]);
     const renderInput = useCallback((inputParams) => {
-        const generalInputParams = Object.assign(Object.assign({}, inputParams), { inputProps: Object.assign(Object.assign({}, inputParams.inputProps), inputProps), inputRef,
+        var _a;
+        const generalInputParams = Object.assign(Object.assign({}, inputParams), { inputProps: Object.assign(Object.assign({}, inputParams.inputProps), { className: classNames((_a = inputParams === null || inputParams === void 0 ? void 0 : inputParams.inputProps) === null || _a === void 0 ? void 0 : _a.className, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className) }), inputRef,
             required, placeholder: isValueEmpty ? placeholder : '', label,
             success,
             error,
             helperText,
-            size });
+            size,
+            hideHelperText });
         if (externalRenderInput) {
             return externalRenderInput(generalInputParams);
         }
@@ -47,6 +50,7 @@ const AutocompleteInner = (props, ref) => {
         error,
         helperText,
         size,
+        hideHelperText,
     ]);
     const renderOption = useCallback((optionProps, option, optionState) => {
         if (externalRenderOption) {

package/components/CheckboxField/styles.d.ts

@@ -4,6 +4,7 @@ export declare const StyledFormControlledLabel: import("@emotion/styled").Styled
 export declare const StyledFormHelperText: import("@emotion/styled").StyledComponent<import("..").WithoutEmotionSpecific<import("@mui/material").FormHelperTextProps> & {
     success?: boolean | undefined;
     error?: boolean | undefined;
+    hideHelperText?: boolean | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/CheckboxField/styles.js

@@ -15,9 +15,9 @@ export const StyledFormControlledLabel = styled(FormControlLabel) `
   }
 `;
 export const StyledFormHelperText = styled(FormHelperText) `
-  margin-left: ${({ theme }) => theme.spacing(7)};
+  padding-left: ${({ theme }) => theme.spacing(7)};
   
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    margin-left: ${({ theme }) => theme.spacing(9)};
+    padding-left: ${({ theme }) => theme.spacing(9)};
   }
 `;

package/components/CodeField/styles.d.ts

@@ -35,6 +35,7 @@ export declare const FieldLabel: import("@emotion/styled").StyledComponent<{
 export declare const StyledHelperText: import("@emotion/styled").StyledComponent<import("..").WithoutEmotionSpecific<import("@mui/material").FormHelperTextProps> & {
     success?: boolean | undefined;
     error?: boolean | undefined;
+    hideHelperText?: boolean | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/DashboardLayout/Sidebar/Sidebar.js

@@ -6,7 +6,7 @@ import { PinButton } from '../PinButton';
 import { dashboardLayoutSidebarClassnames } from './constants';
 import { SidebarNav } from './SidebarNav';
 import { SidebarSkeleton } from './SidebarSkeleton';
-import { Footer, SidebarContent, SidebarHeader, SidebarRoot, Wrapper, } from './styles';
+import { Footer, SidebarContent, SidebarHeader, SidebarRoot, StyledPaper, Wrapper, } from './styles';
 import { useLogic } from './useLogic';
 /**
  * Основной sidebar приложения
@@ -16,5 +16,5 @@ export const Sidebar = forwardRef((props, ref) => {
     if (isLoading) {
         return _jsx(SidebarSkeleton, {});
     }
-    return (_jsx(Wrapper, { "$isPinned": isPinned, "$alertHeight": alertHeight, children: _jsxs(SidebarRoot, { ref: ref, "$isPinned": isPinned, "$collapsedIn": collapsedIn, className: classNames(className, dashboardLayoutSidebarClassnames.root), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, inert: isMobile && !isPinned ? '' : undefined, children: [_jsxs(SidebarContent, { "$collapsedIn": collapsedIn, "$isPinned": isPinned, "$hasHeader": Boolean(header), children: [header && _jsx(SidebarHeader, { children: header }), _jsx(SidebarNav, { menu: _jsx(NavMenu, { collapsedIn: collapsedIn, items: menu.items }) })] }), _jsx(Footer, { children: _jsx(PinButton, { isPinned: isPinned, collapsedIn: collapsedIn, onClick: onTogglePin }) })] }) }));
+    return (_jsx(Wrapper, { "$isPinned": isPinned, "$alertHeight": alertHeight, children: _jsx(SidebarRoot, { ref: ref, "$isPinned": isPinned, "$collapsedIn": collapsedIn, className: classNames(className, dashboardLayoutSidebarClassnames.root), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, inert: isMobile && !isPinned ? '' : undefined, children: _jsxs(StyledPaper, { variant: "outlined", children: [_jsxs(SidebarContent, { "$collapsedIn": collapsedIn, "$isPinned": isPinned, "$hasHeader": Boolean(header), children: [header && _jsx(SidebarHeader, { children: header }), _jsx(SidebarNav, { menu: _jsx(NavMenu, { collapsedIn: collapsedIn, items: menu.items }) })] }), _jsx(Footer, { children: _jsx(PinButton, { isPinned: isPinned, collapsedIn: collapsedIn, onClick: onTogglePin }) })] }) }) }));
 });

package/components/DashboardLayout/Sidebar/styles.d.ts

@@ -6,6 +6,12 @@ export declare const Wrapper: import("@emotion/styled").StyledComponent<{
     $isPinned: boolean;
     $alertHeight: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledPaper: import("@emotion/styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").PaperProps>, "elevation"> & {
+    elevation?: 0 | 1 | 2 | undefined;
+    shape?: "small" | "medium" | "large" | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
 export declare const SidebarRoot: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/components/DashboardLayout/Sidebar/styles.js

@@ -1,3 +1,4 @@
+import { Paper } from '../../Paper';
 import { styled } from '../../styles';
 import { HEADER_HEIGHT_MOBILE } from '../constants';
 import { pinButtonClassnames } from '../PinButton';
@@ -30,23 +31,30 @@ export const Wrapper = styled('div', {
 }};
   }
 `;
+export const StyledPaper = styled(Paper) `
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
+  
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    border: unset;
+    border-radius: 0;
+  }
+`;
 export const SidebarRoot = styled('aside', {
     shouldForwardProp: (prop) => !['$isPinned', '$collapsedIn'].includes(prop),
 }) `
   position: ${({ $isPinned }) => ($isPinned ? 'relative' : 'absolute')};
   z-index: ${({ theme }) => theme.zIndex.appBar - 1};
 
-  display: flex;
-  flex-direction: column;
-
   width: ${({ $collapsedIn, $isPinned }) => $isPinned || (!$isPinned && $collapsedIn) ? '242px' : '58px'};
   height: 100%;
 
-  background-color: ${({ theme }) => theme.palette.background.default};
-  border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  background-color: ${({ theme }) => theme.palette.background.default};;
   border-radius: ${({ theme }) => theme.shape.medium};
-  box-shadow: ${({ theme, $isPinned, $collapsedIn }) => ($isPinned || !$collapsedIn ? 'unset' : theme.elevation[300])};;
-
+  box-shadow: ${({ theme, $isPinned, $collapsedIn }) => ($isPinned || !$collapsedIn ? 'unset' : theme.elevation[300])};
+  
   transition: ${({ theme }) => {
     return theme.transitions.create(['min-width', 'width', 'box-shadow'], {
         duration: theme.transitions.duration.standard,
@@ -61,7 +69,6 @@ export const SidebarRoot = styled('aside', {
     min-width: 100vw;
 
     background-color: ${({ theme }) => theme.palette.background.default};
-    border: unset;
     border-radius: 0;
   }
 `;

package/components/DatePicker/DatePicker.d.ts

@@ -48,6 +48,10 @@ export type DatePickerProps = MondayFirst & WithDoubleNavigationButtons & Partia
      * Вспомогательный текст под полем ввода
      */
     helperText?: ReactNode;
+    /**
+     * Включает/отключает резервирование места под helperText
+     */
+    hideHelperText?: boolean;
     /**
      * Элемент в начале инпута
      */
@@ -97,6 +101,10 @@ export declare const DatePicker: import("react").ForwardRefExoticComponent<Monda
      * Вспомогательный текст под полем ввода
      */
     helperText?: ReactNode;
+    /**
+     * Включает/отключает резервирование места под helperText
+     */
+    hideHelperText?: boolean | undefined;
     /**
      * Элемент в начале инпута
      */

package/components/DatePicker/DatePicker.js

@@ -9,6 +9,6 @@ import { useLogic } from './useLogic';
 import { YearMonthDayPicker } from './YearMonthDayPicker';
 export const DatePicker = forwardRef((props, forwardedRef) => {
     const { ref, pickerProps, handleOpen, onAccept, confirmButtonProps, isMobile, DatePickerInputProps, datePickerProps, } = useLogic(Object.assign(Object.assign({}, props), { forwardedRef }));
-    const { className, startAdornment, label, required, helperText, inputProps, mask = DEFAULT_DATE_MASK, size, disabled, inputRef, minDate = DEFAULT_MIN_DATE, maxDate = DEFAULT_MAX_DATE, isMondayFirst, isDoubleNavigationButtonsEnabled, } = props;
-    return (_jsxs("div", { ref: ref, className: className, children: [_jsx(DatePickerInput, Object.assign({ startAdornment: startAdornment, label: label, required: required, helperText: helperText }, inputProps, DatePickerInputProps, { onAccept: onAccept, mask: mask, size: size, disabled: disabled, ref: inputRef, onClick: handleOpen })), _jsx(DatePickerPopover, Object.assign({ placement: "bottom-start" }, datePickerProps, { children: _jsx(MinMaxDateContextProvider, { minDate: minDate, maxDate: maxDate, children: _jsxs(StyledPaper, { children: [_jsx(YearMonthDayPicker, Object.assign({ isMondayFirst: isMondayFirst, isDoubleNavigationButtonsEnabled: isDoubleNavigationButtonsEnabled }, pickerProps)), isMobile && (_jsx(ButtonWrapper, { children: _jsx(ConfirmButton, Object.assign({}, confirmButtonProps, { size: "large" })) }))] }) }) }))] }));
+    const { className, startAdornment, label, required, helperText, inputProps, mask = DEFAULT_DATE_MASK, size, disabled, inputRef, minDate = DEFAULT_MIN_DATE, maxDate = DEFAULT_MAX_DATE, isMondayFirst, isDoubleNavigationButtonsEnabled, hideHelperText = false, } = props;
+    return (_jsxs("div", { ref: ref, className: className, children: [_jsx(DatePickerInput, Object.assign({ startAdornment: startAdornment, label: label, required: required, helperText: helperText }, inputProps, DatePickerInputProps, { onAccept: onAccept, mask: mask, size: size, disabled: disabled, ref: inputRef, onClick: handleOpen, hideHelperText: hideHelperText })), _jsx(DatePickerPopover, Object.assign({ placement: "bottom-start" }, datePickerProps, { children: _jsx(MinMaxDateContextProvider, { minDate: minDate, maxDate: maxDate, children: _jsxs(StyledPaper, { children: [_jsx(YearMonthDayPicker, Object.assign({ isMondayFirst: isMondayFirst, isDoubleNavigationButtonsEnabled: isDoubleNavigationButtonsEnabled }, pickerProps)), isMobile && (_jsx(ButtonWrapper, { children: _jsx(ConfirmButton, Object.assign({}, confirmButtonProps, { size: "large" })) }))] }) }) }))] }));
 });

package/components/DatePicker/styles.d.ts

@@ -16,6 +16,7 @@ export declare const ButtonWrapper: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledPaper: import("@emotion/styled").StyledComponent<Omit<import("..").WithoutEmotionSpecific<import("@mui/material").PaperProps>, "elevation"> & {
     elevation?: 0 | 1 | 2 | undefined;
+    shape?: "small" | "medium" | "large" | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/DateRangePicker/DateRangePicker.js

@@ -19,11 +19,11 @@ import { useLogic } from './useLogic';
 const DEFAULT_SPACING = 1;
 export const DateRangePicker = forwardRef((props, forwardedRef) => {
     const { ref, startDatePickerInputProps, endDatePickerInputProps, popoverHoveredContextProviderProps, datePickerPopoverProps, minMaxDateContextProviderProps, startYearMonthDayPickerProps, endYearMonthDayPickerProps, } = useLogic(props, forwardedRef);
-    const { startDateProps = {}, endDateProps = {}, mask = DEFAULT_DATE_MASK, spacing = DEFAULT_SPACING, size, isMondayFirst, isDisabled, isError, helperText, isDoubleNavigationButtonsEnabled, } = props;
+    const { startDateProps = {}, endDateProps = {}, mask = DEFAULT_DATE_MASK, spacing = DEFAULT_SPACING, size, isMondayFirst, isDisabled, isError, helperText, isDoubleNavigationButtonsEnabled, hideHelperText = false, } = props;
     const _a = startDateProps || {}, { inputProps: startDateInputProps } = _a, restStartDateProps = __rest(_a, ["inputProps"]);
     const _b = endDateProps || {}, { inputProps: endDateInputProps } = _b, restEndDateProps = __rest(_b, ["inputProps"]);
-    return (_jsxs(Grid, { ref: ref, children: [_jsxs(Grid, { container: true, spacing: spacing, direction: "column", children: [_jsx(StyledDatePickerInput, Object.assign({}, startDateInputProps, restStartDateProps, { 
+    return (_jsxs(Grid, { ref: ref, children: [_jsxs(Grid, { container: true, spacing: spacing, direction: "column", columns: "repeat(2, 1fr)", children: [_jsx(StyledDatePickerInput, Object.assign({}, startDateInputProps, restStartDateProps, { 
                         // TODO Пропс margin=none пока не работает, поэтому стилизуем компонент
                         // https://track.astral.ru/soft/browse/UIKIT-1333
-                        mask: mask, size: size, disabled: isDisabled, error: isError }, startDatePickerInputProps)), _jsx(StyledDatePickerInput, Object.assign({}, endDateInputProps, restEndDateProps, { size: size, mask: mask, disabled: isDisabled, error: isError }, endDatePickerInputProps))] }), _jsx(FormHelperText, { error: isError, children: helperText && helperText }), _jsx(PopoverHoveredContextProvider, Object.assign({}, popoverHoveredContextProviderProps, { children: _jsx(MinMaxDateContextProvider, Object.assign({}, minMaxDateContextProviderProps, { children: _jsx(DatePickerPopover, Object.assign({}, datePickerPopoverProps, { children: _jsxs(StyledPaper, { children: [_jsx(YearMonthDayPicker, Object.assign({ isMondayFirst: isMondayFirst, isDoubleNavigationButtonsEnabled: isDoubleNavigationButtonsEnabled }, startYearMonthDayPickerProps)), _jsx(PickerSplitter, {}), _jsx(YearMonthDayPicker, Object.assign({ isMondayFirst: isMondayFirst, isDoubleNavigationButtonsEnabled: isDoubleNavigationButtonsEnabled }, endYearMonthDayPickerProps))] }) })) })) }))] }));
+                        mask: mask, size: size, disabled: isDisabled, error: isError }, startDatePickerInputProps)), _jsx(StyledDatePickerInput, Object.assign({}, endDateInputProps, restEndDateProps, { size: size, mask: mask, disabled: isDisabled, error: isError }, endDatePickerInputProps))] }), _jsx(FormHelperText, { error: isError, hideHelperText: hideHelperText, children: helperText && helperText }), _jsx(PopoverHoveredContextProvider, Object.assign({}, popoverHoveredContextProviderProps, { children: _jsx(MinMaxDateContextProvider, Object.assign({}, minMaxDateContextProviderProps, { children: _jsx(DatePickerPopover, Object.assign({}, datePickerPopoverProps, { children: _jsxs(StyledPaper, { children: [_jsx(YearMonthDayPicker, Object.assign({ isMondayFirst: isMondayFirst, isDoubleNavigationButtonsEnabled: isDoubleNavigationButtonsEnabled }, startYearMonthDayPickerProps)), _jsx(PickerSplitter, {}), _jsx(YearMonthDayPicker, Object.assign({ isMondayFirst: isMondayFirst, isDoubleNavigationButtonsEnabled: isDoubleNavigationButtonsEnabled }, endYearMonthDayPickerProps))] }) })) })) }))] }));
 });

package/components/DateRangePicker/styles.d.ts

@@ -7,6 +7,7 @@ export declare const StyledDatePickerInput: import("@emotion/styled").StyledComp
 }, {}, {}>;
 export declare const StyledPaper: import("@emotion/styled").StyledComponent<Omit<import("..").WithoutEmotionSpecific<import("@mui/material").PaperProps>, "elevation"> & {
     elevation?: 0 | 1 | 2 | undefined;
+    shape?: "small" | "medium" | "large" | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/EmailOrPhoneField/useLogic/useLogic.d.ts

@@ -280,6 +280,7 @@ export declare const useLogic: (props: EmailOrPhoneFieldProps) => {
         inputRef?: import("react").Ref<any> | undefined;
         startAdornment?: import("react").ReactNode;
         hiddenLabel?: boolean | undefined;
+        hideHelperText?: boolean | undefined;
         InputProps?: Partial<import("@mui/material").OutlinedInputProps> | Partial<import("@mui/material").FilledInputProps> | Partial<import("@mui/material").InputProps> | undefined;
         FormHelperTextProps?: Partial<import("@mui/material").FormHelperTextProps> | undefined;
         helperText?: import("react").ReactNode;

package/components/FormHelperText/FormHelperText.d.ts

@@ -4,5 +4,6 @@ import { type WithoutEmotionSpecific } from '../types';
 export type FormHelperTextProps = WithoutEmotionSpecific<MuiFormHelperTextProps> & {
     success?: boolean;
     error?: boolean;
+    hideHelperText?: boolean;
 };
-export declare const FormHelperText: ({ children, success, error, ...props }: FormHelperTextProps) => JSX.Element;
+export declare const FormHelperText: ({ children, success, error, hideHelperText, ...props }: FormHelperTextProps) => JSX.Element | null;

package/components/FormHelperText/FormHelperText.js

@@ -13,6 +13,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { FormHelperText as MuiFormHelperText, } from '@mui/material';
 import { FormHelperTextContent } from './FormHelperTextContent';
 export const FormHelperText = (_a) => {
-    var { children, success, error } = _a, props = __rest(_a, ["children", "success", "error"]);
+    var { children, success, error, hideHelperText = false } = _a, props = __rest(_a, ["children", "success", "error", "hideHelperText"]);
+    if (hideHelperText && !children) {
+        return null;
+    }
     return (_jsx(MuiFormHelperText, Object.assign({}, props, { children: _jsx(FormHelperTextContent, { error: error, success: success, children: children }) })));
 };

package/components/PageLayout/PageHeader/HeaderContent/styles.js

@@ -16,7 +16,7 @@ export const PageSubheader = styled.div `
   padding-top: ${({ theme }) => theme.spacing(4)};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    padding: ${({ theme }) => theme.spacing(0, 4)};
+    padding: ${({ theme }) => theme.spacing(0, 4, 4, 4)};
   }
 `;
 export const DesktopTitleWrapper = styled.div `

package/components/PageLayout/PageLayoutContainer/PageLayoutContainer.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { classNames } from '../../utils';
 import { pageLayoutClassnames } from './constants';
-import { Wrapper } from './styles';
+import { StylePaper, Wrapper } from './styles';
 export const PageLayoutContainer = forwardRef(({ children, className }, forwardedRef) => {
-    return (_jsx(Wrapper, { className: classNames(className, pageLayoutClassnames.root), ref: forwardedRef, children: children }));
+    return (_jsx(StylePaper, { variant: "outlined", children: _jsx(Wrapper, { className: classNames(className, pageLayoutClassnames.root), ref: forwardedRef, children: children }) }));
 });

package/components/PageLayout/PageLayoutContainer/styles.d.ts

@@ -3,3 +3,9 @@ export declare const Wrapper: 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 StylePaper: import("@emotion/styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").PaperProps>, "elevation"> & {
+    elevation?: 0 | 1 | 2 | undefined;
+    shape?: "small" | "medium" | "large" | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/PageLayout/PageLayoutContainer/styles.js

@@ -1,3 +1,4 @@
+import { Paper } from '../../Paper';
 import { styled } from '../../styles';
 export const Wrapper = styled.div `
   display: grid;
@@ -11,8 +12,6 @@ export const Wrapper = styled.div `
   padding-top: ${({ theme }) => theme.spacing(4)};
 
   background-color: ${({ theme }) => theme.palette.common.white};
-  border: 1px solid ${({ theme }) => theme.palette.grey[300]};
-  border-radius: ${({ theme }) => theme.shape.medium};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     scroll-behavior: smooth;
@@ -29,3 +28,10 @@ export const Wrapper = styled.div `
     border: unset;
   }
 `;
+export const StylePaper = styled(Paper) `
+  height: 100%;
+  
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    border: unset;
+  }
+`;

package/components/Paper/Paper.d.ts

@@ -11,5 +11,9 @@ export type PaperProps = Omit<WithoutEmotionSpecific<MuiPaperProps>, 'elevation'
      * <Paper elevation={2}> = Тень [300]
      */
     elevation?: 0 | 1 | 2;
+    /**
+     * Определяет скругления для компонента в variant='outlined'
+     */
+    shape?: 'small' | 'medium' | 'large';
 };
-export declare const Paper: (props: PaperProps) => JSX.Element;
+export declare const Paper: ({ shape, ...restProps }: PaperProps) => JSX.Element;

package/components/Paper/Paper.js

@@ -1,5 +1,17 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Paper as MuiPaper, } from '@mui/material';
-export const Paper = (props) => {
-    return _jsx(MuiPaper, Object.assign({}, props));
+import { StyledPaper } from './styles';
+export const Paper = (_a) => {
+    var { shape = 'medium' } = _a, restProps = __rest(_a, ["shape"]);
+    return _jsx(StyledPaper, Object.assign({ "$shape": shape }, restProps));
 };

package/components/Paper/styles.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const StyledPaper: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").PaperClasses> | undefined;
+    elevation?: number | undefined;
+    square?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"elevation" | "outlined", import("@mui/material").PaperPropsVariantOverrides> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "elevation" | "children" | "sx" | "square" | keyof import("@mui/material/OverridableComponent").CommonProps | "variant"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    $shape: 'small' | 'medium' | 'large';
+}, {}, {}>;

package/components/Paper/styles.js

@@ -0,0 +1,9 @@
+import { Paper } from '@mui/material';
+import { styled } from '../styles';
+export const StyledPaper = styled(Paper, {
+    shouldForwardProp: (prop) => !['$shape'].includes(prop),
+}) `
+    overflow: hidden;
+
+    border-radius: ${({ theme, $shape }) => theme.shape[$shape]};
+`;

package/components/SearchField/useLogic/useLogic.d.ts

@@ -278,6 +278,7 @@ export declare const useLogic: ({ onChange: propsOnChange, defaultValue, value,
         maxRows?: string | number | undefined;
         minRows?: string | number | undefined;
         hiddenLabel?: boolean | undefined;
+        hideHelperText?: boolean | undefined;
         InputProps?: Partial<import("@mui/material").OutlinedInputProps> | Partial<import("@mui/material").FilledInputProps> | Partial<import("@mui/material").InputProps> | undefined;
         FormHelperTextProps?: Partial<import("@mui/material").FormHelperTextProps> | undefined;
         helperText?: import("react").ReactNode;

package/components/Select/Select.d.ts

@@ -10,7 +10,7 @@ export type SelectProps<TValue> = WithoutEmotionSpecific<Omit<MuiSelectProps<TVa
      */
     helperText?: ReactNode;
     /**
-     * Скрывает вспомогательный текст под селектом
+     * Включает/отключает резервирование места под helperText
      */
     hideHelperText?: boolean;
     /**
@@ -48,7 +48,7 @@ export declare const Select: <TValue>(props: WithoutEmotionSpecific<Omit<MuiSele
      */
     helperText?: ReactNode;
     /**
-     * Скрывает вспомогательный текст под селектом
+     * Включает/отключает резервирование места под helperText
      */
     hideHelperText?: boolean | undefined;
     /**

package/components/Select/Select.js

@@ -49,6 +49,6 @@ const SelectInner = (_a, ref) => {
         }
         return findMenuItemsLabel(children, selectedOptions);
     };
-    return (_jsxs(FormControl, { error: error, fullWidth: fullWidth, children: [label && (_jsx(InputLabel, { htmlFor: "grouped-select", required: required, disabled: disabled, children: label })), _jsxs(StyledSelect, Object.assign({}, props, { value: value === null ? '' : value, open: isOpened, disabled: disabled, onOpen: openSelect, onClose: closeSelect, renderValue: renderValue, IconComponent: () => null, displayEmpty: true, ref: ref, fullWidth: fullWidth, onChange: handleChangeOption, "$isShowingPlaceholder": isShowingPlaceholder, endAdornment: _jsxs(EndAdornmentWrapper, { children: [isShowingClearButton && (_jsx(ClearButton, { disabled: disabled, ref: resetButtonRef, onClick: onClearAll })), _jsx(IconButton, { variant: "text", disabled: disabled, onClick: openSelect, children: !isOpened ? _jsx(DownOutlineMd, {}) : _jsx(UpOutlineMd, {}) })] }), children: [_jsx(Placeholder, { value: "", children: placeholder }), loading && (_jsx(StateWrapper, { children: _jsx(Loader, {}) })), !loading && isShowingSelectAll && (_jsxs(MenuItem, { className: selectAllClassName, selected: isSelectedAll, value: SELECT_ALL_VALUE, children: [_jsx(ListItemIcon, { children: _jsx(Checkbox, { checked: isSelectedAll, indeterminate: isIndeterminate }) }), "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435"] })), !loading && children, !loading && isNoData && _jsx(StateWrapper, { children: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" })] })), !hideHelperText && (_jsx(FormHelperText, { error: error, success: success, children: helperText }))] }));
+    return (_jsxs(FormControl, { error: error, fullWidth: fullWidth, children: [label && (_jsx(InputLabel, { htmlFor: "grouped-select", required: required, disabled: disabled, children: label })), _jsxs(StyledSelect, Object.assign({}, props, { value: value === null ? '' : value, open: isOpened, disabled: disabled, onOpen: openSelect, onClose: closeSelect, renderValue: renderValue, IconComponent: () => null, displayEmpty: true, ref: ref, fullWidth: fullWidth, onChange: handleChangeOption, "$isShowingPlaceholder": isShowingPlaceholder, endAdornment: _jsxs(EndAdornmentWrapper, { children: [isShowingClearButton && (_jsx(ClearButton, { disabled: disabled, ref: resetButtonRef, onClick: onClearAll })), _jsx(IconButton, { variant: "text", disabled: disabled, onClick: openSelect, children: !isOpened ? _jsx(DownOutlineMd, {}) : _jsx(UpOutlineMd, {}) })] }), children: [_jsx(Placeholder, { value: "", children: placeholder }), loading && (_jsx(StateWrapper, { children: _jsx(Loader, {}) })), !loading && isShowingSelectAll && (_jsxs(MenuItem, { className: selectAllClassName, selected: isSelectedAll, value: SELECT_ALL_VALUE, children: [_jsx(ListItemIcon, { children: _jsx(Checkbox, { checked: isSelectedAll, indeterminate: isIndeterminate }) }), "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435"] })), !loading && children, !loading && isNoData && _jsx(StateWrapper, { children: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" })] })), _jsx(FormHelperText, { error: error, success: success, hideHelperText: hideHelperText, children: helperText })] }));
 };
 export const Select = forwardRefWithGeneric(SelectInner);

package/components/Select/styles.js

@@ -23,7 +23,7 @@ export const StyledSelect = styled(Select, {
 }) `
   padding-right: ${({ theme }) => theme.spacing(2)};
 
-  color: ${({ $isShowingPlaceholder, theme }) => $isShowingPlaceholder ? theme.palette.grey[400] : 'unset'};
+  color: ${({ $isShowingPlaceholder, theme }) => $isShowingPlaceholder ? theme.palette.grey[500] : 'unset'};
 
   .MuiSelect-select.MuiSelect-outlined {
     min-height: 20px;

package/components/TextField/TextField.d.ts

@@ -19,10 +19,13 @@ export type TextFieldProps = Omit<WithoutEmotionSpecific<MuiTextFieldProps>, 'va
      */
     maxLength?: number;
     /**
-     * Параметр для обрезания пробелов в текст филде при вызове onBlur.
-     * @default true
+     * Параметр для обрезания пробелов в текст филде при вызове onBlur
      * @example <TextField trimmed={false} />
      */
     trimmed?: boolean;
+    /**
+     * Включает/отключает резервирование места под helperText
+     */
+    hideHelperText?: boolean;
 };
 export declare const TextField: import("react").ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/components/TextField/TextField.js

@@ -10,11 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { TextField as MuiTextField, } from '@mui/material';
 import { forwardRef, useMemo } from 'react';
 import { FormHelperTextContent } from '../FormHelperText';
+import { classNames } from '../utils';
+import { textFieldClassnames } from './constants';
+import { StyledTextField } from './styles';
 export const TextField = forwardRef((_a, ref) => {
-    var { success, error, helperText: helperTextProp, fullWidth = false, startAdornment, endAdornment, inputProps, InputProps, maxLength, trimmed = true, onBlur } = _a, props = __rest(_a, ["success", "error", "helperText", "fullWidth", "startAdornment", "endAdornment", "inputProps", "InputProps", "maxLength", "trimmed", "onBlur"]);
+    var { success, error, helperText: helperTextProp, fullWidth = false, startAdornment, endAdornment, inputProps, InputProps, maxLength, trimmed = true, onBlur, hideHelperText = false, className } = _a, props = __rest(_a, ["success", "error", "helperText", "fullWidth", "startAdornment", "endAdornment", "inputProps", "InputProps", "maxLength", "trimmed", "onBlur", "hideHelperText", "className"]);
     const color = useMemo(() => {
         if (success) {
             return 'success';
@@ -45,6 +47,9 @@ export const TextField = forwardRef((_a, ref) => {
         }
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     };
-    return (_jsx(MuiTextField, Object.assign({ ref: ref, variant: "outlined", fullWidth: fullWidth, error: error, color: color, helperText: helperText, InputProps: Object.assign({ startAdornment,
-            endAdornment }, InputProps), inputProps: Object.assign({ maxLength }, inputProps), onBlur: handleBlur }, props)));
+    const classes = useMemo(() => {
+        return classNames(className, hideHelperText ? textFieldClassnames.hideHelperText : '');
+    }, [className, hideHelperText]);
+    return (_jsx(StyledTextField, Object.assign({ ref: ref, variant: "outlined", fullWidth: fullWidth, error: error, color: color, helperText: helperText, InputProps: Object.assign({ startAdornment,
+            endAdornment }, InputProps), inputProps: Object.assign({ maxLength }, inputProps), onBlur: handleBlur, className: classes }, props)));
 });

package/components/TextField/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const textFieldClassnames: {
+    hideHelperText: string;
+};

package/components/TextField/constants.js

@@ -0,0 +1,4 @@
+import { createUIKitClassname } from '../utils';
+export const textFieldClassnames = {
+    hideHelperText: createUIKitClassname('text-field__helper-text_hidden'),
+};

package/components/TextField/styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledTextField: import("@emotion/styled").StyledComponent<{
+    variant?: import("@mui/material").TextFieldVariants | undefined;
+} & Omit<import("@mui/material").FilledTextFieldProps | import("@mui/material").OutlinedTextFieldProps | import("@mui/material").StandardTextFieldProps, "variant"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/TextField/styles.js

@@ -0,0 +1,16 @@
+import { formHelperTextClasses, TextField } from '@mui/material';
+import { styled } from '../styles';
+import { textFieldClassnames } from './constants';
+export const StyledTextField = styled(TextField) `
+  &.${textFieldClassnames.hideHelperText}{
+    
+    .${formHelperTextClasses.root}.${formHelperTextClasses.contained} {
+      min-height: 0;
+      margin: 0;
+      
+      &:not(:empty) {
+        margin: ${({ theme }) => theme.spacing(1, 0, 0)};
+      }
+    }
+  }
+`;

package/components/TreeAutocomplete/OptionsModal/OptionsModal.js

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../Button';
 import { Dialog } from '../../Dialog';
 import { DialogActions } from '../../DialogActions';
-import { ScrollWrapper } from '../../ScrollWrapper';
+import { Paper } from '../../Paper';
 import { SearchField } from '../../SearchField';
 import { TreeList } from '../../Tree';
 import { ErrorMessage } from './ErrorMessage';
@@ -36,5 +36,5 @@ export const OptionsModal = (props) => {
         }
         return _jsx(TreeList, Object.assign({}, treeProps, treeListProps));
     };
-    return (_jsxs(Dialog, Object.assign({}, externalDialogProps, { disableRestoreFocus: true, open: isOpen }, modalProps, { children: [_jsxs(StyledDialogContent, { children: [_jsx(SearchField, Object.assign({ fullWidth: true }, searchFieldProps)), _jsx(ScrollWrapper, { children: _jsx(TreeListWrapper, { children: renderComponent() }) })] }), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ variant: "text" }, cancelButtonProps, { children: "\u041E\u0442\u043C\u0435\u043D\u0430" })), _jsx(Button, Object.assign({}, confirmButtonProps, { children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" }))] })] })));
+    return (_jsxs(Dialog, Object.assign({}, externalDialogProps, { disableRestoreFocus: true, open: isOpen }, modalProps, { children: [_jsxs(StyledDialogContent, { children: [_jsx(SearchField, Object.assign({ fullWidth: true }, searchFieldProps)), _jsx(Paper, { variant: "outlined", children: _jsx(TreeListWrapper, { children: renderComponent() }) })] }), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ variant: "text" }, cancelButtonProps, { children: "\u041E\u0442\u043C\u0435\u043D\u0430" })), _jsx(Button, Object.assign({}, confirmButtonProps, { children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" }))] })] })));
 };