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

package/node/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/node/components/DashboardLayout/Sidebar/styles.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Footer = exports.SidebarContent = exports.SidebarHeader = exports.SidebarRoot = exports.Wrapper = void 0;
+exports.Footer = exports.SidebarContent = exports.SidebarHeader = exports.SidebarRoot = exports.StyledPaper = exports.Wrapper = void 0;
+const Paper_1 = require("../../Paper");
 const styles_1 = require("../../styles");
 const constants_1 = require("../constants");
 const PinButton_1 = require("../PinButton");
@@ -33,23 +34,30 @@ exports.Wrapper = (0, styles_1.styled)('div', {
 }};
   }
 `;
+exports.StyledPaper = (0, styles_1.styled)(Paper_1.Paper) `
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
+  
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    border: unset;
+    border-radius: 0;
+  }
+`;
 exports.SidebarRoot = (0, styles_1.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,
@@ -64,7 +72,6 @@ exports.SidebarRoot = (0, styles_1.styled)('aside', {
     min-width: 100vw;
 
     background-color: ${({ theme }) => theme.palette.background.default};
-    border: unset;
     border-radius: 0;
   }
 `;

package/node/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/node/components/DatePicker/DatePicker.js

@@ -12,6 +12,6 @@ const useLogic_1 = require("./useLogic");
 const YearMonthDayPicker_1 = require("./YearMonthDayPicker");
 exports.DatePicker = (0, react_1.forwardRef)((props, forwardedRef) => {
     const { ref, pickerProps, handleOpen, onAccept, confirmButtonProps, isMobile, DatePickerInputProps, datePickerProps, } = (0, useLogic_1.useLogic)(Object.assign(Object.assign({}, props), { forwardedRef }));
-    const { className, startAdornment, label, required, helperText, inputProps, mask = constants_1.DEFAULT_DATE_MASK, size, disabled, inputRef, minDate = MinMaxDateContext_1.DEFAULT_MIN_DATE, maxDate = MinMaxDateContext_1.DEFAULT_MAX_DATE, isMondayFirst, isDoubleNavigationButtonsEnabled, } = props;
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: className, children: [(0, jsx_runtime_1.jsx)(DatePickerInput_1.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 })), (0, jsx_runtime_1.jsx)(DatePickerPopover_1.DatePickerPopover, Object.assign({ placement: "bottom-start" }, datePickerProps, { children: (0, jsx_runtime_1.jsx)(MinMaxDateContext_1.MinMaxDateContextProvider, { minDate: minDate, maxDate: maxDate, children: (0, jsx_runtime_1.jsxs)(styles_1.StyledPaper, { children: [(0, jsx_runtime_1.jsx)(YearMonthDayPicker_1.YearMonthDayPicker, Object.assign({ isMondayFirst: isMondayFirst, isDoubleNavigationButtonsEnabled: isDoubleNavigationButtonsEnabled }, pickerProps)), isMobile && ((0, jsx_runtime_1.jsx)(styles_1.ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(styles_1.ConfirmButton, Object.assign({}, confirmButtonProps, { size: "large" })) }))] }) }) }))] }));
+    const { className, startAdornment, label, required, helperText, inputProps, mask = constants_1.DEFAULT_DATE_MASK, size, disabled, inputRef, minDate = MinMaxDateContext_1.DEFAULT_MIN_DATE, maxDate = MinMaxDateContext_1.DEFAULT_MAX_DATE, isMondayFirst, isDoubleNavigationButtonsEnabled, hideHelperText = false, } = props;
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: className, children: [(0, jsx_runtime_1.jsx)(DatePickerInput_1.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 })), (0, jsx_runtime_1.jsx)(DatePickerPopover_1.DatePickerPopover, Object.assign({ placement: "bottom-start" }, datePickerProps, { children: (0, jsx_runtime_1.jsx)(MinMaxDateContext_1.MinMaxDateContextProvider, { minDate: minDate, maxDate: maxDate, children: (0, jsx_runtime_1.jsxs)(styles_1.StyledPaper, { children: [(0, jsx_runtime_1.jsx)(YearMonthDayPicker_1.YearMonthDayPicker, Object.assign({ isMondayFirst: isMondayFirst, isDoubleNavigationButtonsEnabled: isDoubleNavigationButtonsEnabled }, pickerProps)), isMobile && ((0, jsx_runtime_1.jsx)(styles_1.ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(styles_1.ConfirmButton, Object.assign({}, confirmButtonProps, { size: "large" })) }))] }) }) }))] }));
 });

package/node/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/node/components/DateRangePicker/DateRangePicker.js

@@ -22,11 +22,11 @@ const useLogic_1 = require("./useLogic");
 const DEFAULT_SPACING = 1;
 exports.DateRangePicker = (0, react_1.forwardRef)((props, forwardedRef) => {
     const { ref, startDatePickerInputProps, endDatePickerInputProps, popoverHoveredContextProviderProps, datePickerPopoverProps, minMaxDateContextProviderProps, startYearMonthDayPickerProps, endYearMonthDayPickerProps, } = (0, useLogic_1.useLogic)(props, forwardedRef);
-    const { startDateProps = {}, endDateProps = {}, mask = DatePicker_1.DEFAULT_DATE_MASK, spacing = DEFAULT_SPACING, size, isMondayFirst, isDisabled, isError, helperText, isDoubleNavigationButtonsEnabled, } = props;
+    const { startDateProps = {}, endDateProps = {}, mask = DatePicker_1.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 ((0, jsx_runtime_1.jsxs)(Grid_1.Grid, { ref: ref, children: [(0, jsx_runtime_1.jsxs)(Grid_1.Grid, { container: true, spacing: spacing, direction: "column", children: [(0, jsx_runtime_1.jsx)(styles_1.StyledDatePickerInput, Object.assign({}, startDateInputProps, restStartDateProps, { 
+    return ((0, jsx_runtime_1.jsxs)(Grid_1.Grid, { ref: ref, children: [(0, jsx_runtime_1.jsxs)(Grid_1.Grid, { container: true, spacing: spacing, direction: "column", columns: "repeat(2, 1fr)", children: [(0, jsx_runtime_1.jsx)(styles_1.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)), (0, jsx_runtime_1.jsx)(styles_1.StyledDatePickerInput, Object.assign({}, endDateInputProps, restEndDateProps, { size: size, mask: mask, disabled: isDisabled, error: isError }, endDatePickerInputProps))] }), (0, jsx_runtime_1.jsx)(FormHelperText_1.FormHelperText, { error: isError, children: helperText && helperText }), (0, jsx_runtime_1.jsx)(DatePicker_1.PopoverHoveredContextProvider, Object.assign({}, popoverHoveredContextProviderProps, { children: (0, jsx_runtime_1.jsx)(DatePicker_1.MinMaxDateContextProvider, Object.assign({}, minMaxDateContextProviderProps, { children: (0, jsx_runtime_1.jsx)(DatePicker_1.DatePickerPopover, Object.assign({}, datePickerPopoverProps, { children: (0, jsx_runtime_1.jsxs)(styles_1.StyledPaper, { children: [(0, jsx_runtime_1.jsx)(DatePicker_1.YearMonthDayPicker, Object.assign({ isMondayFirst: isMondayFirst, isDoubleNavigationButtonsEnabled: isDoubleNavigationButtonsEnabled }, startYearMonthDayPickerProps)), (0, jsx_runtime_1.jsx)(styles_1.PickerSplitter, {}), (0, jsx_runtime_1.jsx)(DatePicker_1.YearMonthDayPicker, Object.assign({ isMondayFirst: isMondayFirst, isDoubleNavigationButtonsEnabled: isDoubleNavigationButtonsEnabled }, endYearMonthDayPickerProps))] }) })) })) }))] }));
+                        mask: mask, size: size, disabled: isDisabled, error: isError }, startDatePickerInputProps)), (0, jsx_runtime_1.jsx)(styles_1.StyledDatePickerInput, Object.assign({}, endDateInputProps, restEndDateProps, { size: size, mask: mask, disabled: isDisabled, error: isError }, endDatePickerInputProps))] }), (0, jsx_runtime_1.jsx)(FormHelperText_1.FormHelperText, { error: isError, hideHelperText: hideHelperText, children: helperText && helperText }), (0, jsx_runtime_1.jsx)(DatePicker_1.PopoverHoveredContextProvider, Object.assign({}, popoverHoveredContextProviderProps, { children: (0, jsx_runtime_1.jsx)(DatePicker_1.MinMaxDateContextProvider, Object.assign({}, minMaxDateContextProviderProps, { children: (0, jsx_runtime_1.jsx)(DatePicker_1.DatePickerPopover, Object.assign({}, datePickerPopoverProps, { children: (0, jsx_runtime_1.jsxs)(styles_1.StyledPaper, { children: [(0, jsx_runtime_1.jsx)(DatePicker_1.YearMonthDayPicker, Object.assign({ isMondayFirst: isMondayFirst, isDoubleNavigationButtonsEnabled: isDoubleNavigationButtonsEnabled }, startYearMonthDayPickerProps)), (0, jsx_runtime_1.jsx)(styles_1.PickerSplitter, {}), (0, jsx_runtime_1.jsx)(DatePicker_1.YearMonthDayPicker, Object.assign({ isMondayFirst: isMondayFirst, isDoubleNavigationButtonsEnabled: isDoubleNavigationButtonsEnabled }, endYearMonthDayPickerProps))] }) })) })) }))] }));
 });

package/node/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/node/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/node/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/node/components/FormHelperText/FormHelperText.js

@@ -16,7 +16,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const FormHelperTextContent_1 = require("./FormHelperTextContent");
 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 ((0, jsx_runtime_1.jsx)(material_1.FormHelperText, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(FormHelperTextContent_1.FormHelperTextContent, { error: error, success: success, children: children }) })));
 };
 exports.FormHelperText = FormHelperText;

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

@@ -19,7 +19,7 @@ exports.PageSubheader = styles_1.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)};
   }
 `;
 exports.DesktopTitleWrapper = styles_1.styled.div `

package/node/components/PageLayout/PageLayoutContainer/PageLayoutContainer.js

@@ -7,5 +7,5 @@ const utils_1 = require("../../utils");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 exports.PageLayoutContainer = (0, react_1.forwardRef)(({ children, className }, forwardedRef) => {
-    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: (0, utils_1.classNames)(className, constants_1.pageLayoutClassnames.root), ref: forwardedRef, children: children }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StylePaper, { variant: "outlined", children: (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: (0, utils_1.classNames)(className, constants_1.pageLayoutClassnames.root), ref: forwardedRef, children: children }) }));
 });

package/node/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/node/components/PageLayout/PageLayoutContainer/styles.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Wrapper = void 0;
+exports.StylePaper = exports.Wrapper = void 0;
+const Paper_1 = require("../../Paper");
 const styles_1 = require("../../styles");
 exports.Wrapper = styles_1.styled.div `
   display: grid;
@@ -14,8 +15,6 @@ exports.Wrapper = styles_1.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;
@@ -32,3 +31,10 @@ exports.Wrapper = styles_1.styled.div `
     border: unset;
   }
 `;
+exports.StylePaper = (0, styles_1.styled)(Paper_1.Paper) `
+  height: 100%;
+  
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    border: unset;
+  }
+`;

package/node/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/node/components/Paper/Paper.js

@@ -1,9 +1,21 @@
 "use strict";
+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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Paper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const Paper = (props) => {
-    return (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({}, props));
+const styles_1 = require("./styles");
+const Paper = (_a) => {
+    var { shape = 'medium' } = _a, restProps = __rest(_a, ["shape"]);
+    return (0, jsx_runtime_1.jsx)(styles_1.StyledPaper, Object.assign({ "$shape": shape }, restProps));
 };
 exports.Paper = Paper;

package/node/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/node/components/Paper/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledPaper = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("../styles");
+exports.StyledPaper = (0, styles_1.styled)(material_1.Paper, {
+    shouldForwardProp: (prop) => !['$shape'].includes(prop),
+}) `
+    overflow: hidden;
+
+    border-radius: ${({ theme, $shape }) => theme.shape[$shape]};
+`;

package/node/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/node/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/node/components/Select/Select.js

@@ -52,6 +52,6 @@ const SelectInner = (_a, ref) => {
         }
         return findMenuItemsLabel(children, selectedOptions);
     };
-    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { error: error, fullWidth: fullWidth, children: [label && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { htmlFor: "grouped-select", required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsxs)(styles_1.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: (0, jsx_runtime_1.jsxs)(styles_1.EndAdornmentWrapper, { children: [isShowingClearButton && ((0, jsx_runtime_1.jsx)(ClearButton, { disabled: disabled, ref: resetButtonRef, onClick: onClearAll })), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", disabled: disabled, onClick: openSelect, children: !isOpened ? (0, jsx_runtime_1.jsx)(icons_1.DownOutlineMd, {}) : (0, jsx_runtime_1.jsx)(icons_1.UpOutlineMd, {}) })] }), children: [(0, jsx_runtime_1.jsx)(styles_1.Placeholder, { value: "", children: placeholder }), loading && ((0, jsx_runtime_1.jsx)(styles_1.StateWrapper, { children: (0, jsx_runtime_1.jsx)(Loader_1.Loader, {}) })), !loading && isShowingSelectAll && ((0, jsx_runtime_1.jsxs)(MenuItem_1.MenuItem, { className: selectAllClassName, selected: isSelectedAll, value: constants_1.SELECT_ALL_VALUE, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: isSelectedAll, indeterminate: isIndeterminate }) }), "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435"] })), !loading && children, !loading && isNoData && (0, jsx_runtime_1.jsx)(styles_1.StateWrapper, { children: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" })] })), !hideHelperText && ((0, jsx_runtime_1.jsx)(FormHelperText_1.FormHelperText, { error: error, success: success, children: helperText }))] }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { error: error, fullWidth: fullWidth, children: [label && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { htmlFor: "grouped-select", required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsxs)(styles_1.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: (0, jsx_runtime_1.jsxs)(styles_1.EndAdornmentWrapper, { children: [isShowingClearButton && ((0, jsx_runtime_1.jsx)(ClearButton, { disabled: disabled, ref: resetButtonRef, onClick: onClearAll })), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", disabled: disabled, onClick: openSelect, children: !isOpened ? (0, jsx_runtime_1.jsx)(icons_1.DownOutlineMd, {}) : (0, jsx_runtime_1.jsx)(icons_1.UpOutlineMd, {}) })] }), children: [(0, jsx_runtime_1.jsx)(styles_1.Placeholder, { value: "", children: placeholder }), loading && ((0, jsx_runtime_1.jsx)(styles_1.StateWrapper, { children: (0, jsx_runtime_1.jsx)(Loader_1.Loader, {}) })), !loading && isShowingSelectAll && ((0, jsx_runtime_1.jsxs)(MenuItem_1.MenuItem, { className: selectAllClassName, selected: isSelectedAll, value: constants_1.SELECT_ALL_VALUE, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: isSelectedAll, indeterminate: isIndeterminate }) }), "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435"] })), !loading && children, !loading && isNoData && (0, jsx_runtime_1.jsx)(styles_1.StateWrapper, { children: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" })] })), (0, jsx_runtime_1.jsx)(FormHelperText_1.FormHelperText, { error: error, success: success, hideHelperText: hideHelperText, children: helperText })] }));
 };
 exports.Select = (0, forwardRefWithGeneric_1.forwardRefWithGeneric)(SelectInner);

package/node/components/Select/styles.js

@@ -26,7 +26,7 @@ exports.StyledSelect = (0, styles_1.styled)(material_1.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/node/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/node/components/TextField/TextField.js

@@ -13,11 +13,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const react_1 = require("react");
 const FormHelperText_1 = require("../FormHelperText");
+const utils_1 = require("../utils");
+const constants_1 = require("./constants");
+const styles_1 = require("./styles");
 exports.TextField = (0, react_1.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 = (0, react_1.useMemo)(() => {
         if (success) {
             return 'success';
@@ -48,6 +50,9 @@ exports.TextField = (0, react_1.forwardRef)((_a, ref) => {
         }
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.TextField, 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 = (0, react_1.useMemo)(() => {
+        return (0, utils_1.classNames)(className, hideHelperText ? constants_1.textFieldClassnames.hideHelperText : '');
+    }, [className, hideHelperText]);
+    return ((0, jsx_runtime_1.jsx)(styles_1.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/node/components/TextField/constants.d.ts

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

package/node/components/TextField/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textFieldClassnames = void 0;
+const utils_1 = require("../utils");
+exports.textFieldClassnames = {
+    hideHelperText: (0, utils_1.createUIKitClassname)('text-field__helper-text_hidden'),
+};

package/node/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/node/components/TextField/styles.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledTextField = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("../styles");
+const constants_1 = require("./constants");
+exports.StyledTextField = (0, styles_1.styled)(material_1.TextField) `
+  &.${constants_1.textFieldClassnames.hideHelperText}{
+    
+    .${material_1.formHelperTextClasses.root}.${material_1.formHelperTextClasses.contained} {
+      min-height: 0;
+      margin: 0;
+      
+      &:not(:empty) {
+        margin: ${({ theme }) => theme.spacing(1, 0, 0)};
+      }
+    }
+  }
+`;

package/node/components/TreeAutocomplete/OptionsModal/OptionsModal.js

@@ -16,7 +16,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const Button_1 = require("../../Button");
 const Dialog_1 = require("../../Dialog");
 const DialogActions_1 = require("../../DialogActions");
-const ScrollWrapper_1 = require("../../ScrollWrapper");
+const Paper_1 = require("../../Paper");
 const SearchField_1 = require("../../SearchField");
 const Tree_1 = require("../../Tree");
 const ErrorMessage_1 = require("./ErrorMessage");
@@ -39,6 +39,6 @@ const OptionsModal = (props) => {
         }
         return (0, jsx_runtime_1.jsx)(Tree_1.TreeList, Object.assign({}, treeProps, treeListProps));
     };
-    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, Object.assign({}, externalDialogProps, { disableRestoreFocus: true, open: isOpen }, modalProps, { children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledDialogContent, { children: [(0, jsx_runtime_1.jsx)(SearchField_1.SearchField, Object.assign({ fullWidth: true }, searchFieldProps)), (0, jsx_runtime_1.jsx)(ScrollWrapper_1.ScrollWrapper, { children: (0, jsx_runtime_1.jsx)(styles_1.TreeListWrapper, { children: renderComponent() }) })] }), (0, jsx_runtime_1.jsxs)(DialogActions_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ variant: "text" }, cancelButtonProps, { children: "\u041E\u0442\u043C\u0435\u043D\u0430" })), (0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({}, confirmButtonProps, { children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" }))] })] })));
+    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, Object.assign({}, externalDialogProps, { disableRestoreFocus: true, open: isOpen }, modalProps, { children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledDialogContent, { children: [(0, jsx_runtime_1.jsx)(SearchField_1.SearchField, Object.assign({ fullWidth: true }, searchFieldProps)), (0, jsx_runtime_1.jsx)(Paper_1.Paper, { variant: "outlined", children: (0, jsx_runtime_1.jsx)(styles_1.TreeListWrapper, { children: renderComponent() }) })] }), (0, jsx_runtime_1.jsxs)(DialogActions_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ variant: "text" }, cancelButtonProps, { children: "\u041E\u0442\u043C\u0435\u043D\u0430" })), (0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({}, confirmButtonProps, { children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" }))] })] })));
 };
 exports.OptionsModal = OptionsModal;

package/node/components/TreeLikeAutocomplete/OptionsModal/OptionsModal.js

@@ -16,7 +16,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const Button_1 = require("../../Button");
 const Dialog_1 = require("../../Dialog");
 const DialogActions_1 = require("../../DialogActions");
-const ScrollWrapper_1 = require("../../ScrollWrapper");
+const Paper_1 = require("../../Paper");
 const SearchField_1 = require("../../SearchField");
 const TreeLikeList_1 = require("../../TreeLikeList");
 const ErrorMessage_1 = require("./ErrorMessage");
@@ -39,6 +39,6 @@ const OptionsModal = (props) => {
         }
         return ((0, jsx_runtime_1.jsx)(TreeLikeList_1.TreeLikeList, Object.assign({ isConfirmChildrenSelection: isConfirmChildrenSelection }, treeProps, treeLikeListProps)));
     };
-    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, Object.assign({}, externalDialogProps, { disableRestoreFocus: true, open: isOpen }, modalProps, { children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledDialogContent, { children: [(0, jsx_runtime_1.jsx)(SearchField_1.SearchField, Object.assign({ fullWidth: true }, searchFieldProps)), (0, jsx_runtime_1.jsx)(ScrollWrapper_1.ScrollWrapper, { children: (0, jsx_runtime_1.jsx)(styles_1.TreeListWrapper, { children: renderComponent() }) })] }), (0, jsx_runtime_1.jsxs)(DialogActions_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ variant: "text" }, cancelButtonProps, { children: "\u041E\u0442\u043C\u0435\u043D\u0430" })), (0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({}, confirmButtonProps, { children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" }))] })] })));
+    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, Object.assign({}, externalDialogProps, { disableRestoreFocus: true, open: isOpen }, modalProps, { children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledDialogContent, { children: [(0, jsx_runtime_1.jsx)(SearchField_1.SearchField, Object.assign({ fullWidth: true }, searchFieldProps)), (0, jsx_runtime_1.jsx)(Paper_1.Paper, { variant: "outlined", children: (0, jsx_runtime_1.jsx)(styles_1.TreeListWrapper, { children: renderComponent() }) })] }), (0, jsx_runtime_1.jsxs)(DialogActions_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ variant: "text" }, cancelButtonProps, { children: "\u041E\u0442\u043C\u0435\u043D\u0430" })), (0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({}, confirmButtonProps, { children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" }))] })] })));
 };
 exports.OptionsModal = OptionsModal;

package/node/components/theme/components/MuiAutocomplete.js

@@ -1,21 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MuiAutocomplete = void 0;
+const material_1 = require("@mui/material");
 const enums_1 = require("../../Autocomplete/enums");
 exports.MuiAutocomplete = {
     styleOverrides: {
+        root({ theme }) {
+            return {
+                [`&.${material_1.autocompleteClasses.hasPopupIcon}.${material_1.autocompleteClasses.hasClearIcon}`]: {
+                    [`.${material_1.autocompleteClasses.inputRoot}`]: {
+                        paddingRight: `${theme.spacing(14)}`,
+                    },
+                },
+            };
+        },
         inputRoot({ theme, ownerState: { size } }) {
             return {
                 paddingTop: `${theme.spacing(1)} !important`,
                 paddingBottom: `${theme.spacing(1)} !important`,
-                paddingLeft: `${theme.spacing(1)} !important`,
+                paddingLeft: `${theme.spacing(3)} !important`,
                 minHeight: size === enums_1.AutocompleteSizes.small ? '32px' : '40px',
             };
         },
-        input({ theme }) {
+        input() {
             return {
                 padding: '0 !important',
-                paddingLeft: `${theme.spacing(1)} !important`,
             };
         },
         popupIndicator({ theme }) {
@@ -31,6 +40,7 @@ exports.MuiAutocomplete = {
                 top: 'unset',
                 gap: theme.spacing(1),
                 color: theme.palette.grey[800],
+                marginRight: `${theme.spacing(1)} !important`,
             };
         },
         paper({ theme }) {
@@ -62,5 +72,13 @@ exports.MuiAutocomplete = {
                 height: '64px',
             };
         },
+        tagSizeMedium({ theme }) {
+            return {
+                margin: `${theme.microSpacing(0, 1)}`,
+                ':first-of-type': {
+                    marginLeft: 0,
+                },
+            };
+        },
     },
 };

package/node/components/theme/components/MuiFormHelperText.js

@@ -6,8 +6,8 @@ exports.MuiFormHelperText = {
         root({ theme }) {
             return {
                 display: 'flex',
-                minHeight: theme.typography.caption.lineHeight,
                 fontSize: theme.typography.caption.fontSize,
+                minHeight: theme.typography.caption.lineHeight,
                 margin: theme.spacing(1, 0, 0),
                 color: theme.palette.grey[600],
                 lineHeight: theme.typography.caption.lineHeight,

package/node/hook-form/EditableText/EditingForm/useLogic/useLogic.js

@@ -25,7 +25,7 @@ const useLogic = ({ initialValue, children, validate, onClose, onSubmit, }) => {
             };
         }
         return {
-            values: formValues,
+            values: {},
             errors: {
                 [constants_1.FIELD_NAME]: {
                     message: validationResult === null || validationResult === void 0 ? void 0 : validationResult.message,

package/node/hook-form/hooks/useForm/index.d.ts

@@ -1 +1,2 @@
 export * from './useForm';
+export type { UseFormProps, UseFormReturn } from './types';

package/node/hook-form/hooks/useForm/types.d.ts

@@ -0,0 +1,23 @@
+import type { ObjectAsyncGuard, ObjectGuard } from '@astral/validations';
+import type { UseFormProps as UseFormPropsRHForm, UseFormReturn } from 'react-hook-form';
+import type { FieldValues } from '../../types';
+export type UseFormProps<TFieldValues extends FieldValues = FieldValues, TContext = any> = UseFormPropsRHForm<TFieldValues, TContext> & {
+    /**
+     * Схема валидации из @astral/validations
+     *
+     * @example
+     * ```ts
+     *  const validationSchema = object<FormValues>({
+     *   lastName: string(),
+     *   name: string(),
+     *   patronymic: optional(string()),
+     *   phone: string(mobilePhone()),
+     *   email: string(email()),
+     * });
+     *
+     * const form = useForm<FormValues>({ validationSchema });
+     * ```
+     */
+    validationSchema?: ObjectGuard<TFieldValues> | ObjectAsyncGuard<TFieldValues>;
+};
+export type { UseFormReturn };

package/node/hook-form/hooks/useForm/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });