@astral/ui 4.28.1 → 4.30.0

package/hook-form/FormFilters/constants.js

@@ -1,7 +1,6 @@
 import { createUIKitClassname } from '../../components/utils/createUIKitClassname';
 export const formFiltersClassnames = {
     modalFilters: createUIKitClassname('form-filters__modal-filters'),
-    pageHeaderFilters: createUIKitClassname('form-filters__page-header-filters'),
     submitButton: createUIKitClassname('form-filters__submit-button'),
     allFiltersButton: createUIKitClassname('form-filters__all-filters-button'),
     showAllFiltersButtonOnDesktop: createUIKitClassname('form-filters_show-all-filters-button_desktop'),

package/hook-form/FormFilters/styles.d.ts

@@ -3,30 +3,12 @@ export declare const Wrapper: import("../../components/styled").StyledComponent<
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const AllFiltersButtonWrapper: import("../../components/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const MainFiltersWrapper: import("../../components/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     columns?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledBadge: import("../../components/styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material/Badge").BadgeProps>, "color"> & {
-    color: import("../../components/Badge").BadgeColor;
-    withBorder?: boolean | undefined;
-    variantColor?: import("../../components/Badge").BadgeVariantsColor | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare const StyledCounter: import("../../components/styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material/Badge").BadgeProps>, "content" | "color" | "children" | "variant" | "invisible" | "anchorOrigin" | "badgeContent" | "overlap" | "withBorder"> & {
-    color: import("../../components/Counter/types").CounterColor;
-    variant?: import("../../components/Counter/types").CounterVariants | undefined;
-    content?: number | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
 export declare const SubmitButtonWrapper: import("../../components/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

package/hook-form/FormFilters/styles.js

@@ -1,8 +1,5 @@
-import { badgeClasses } from '@mui/material/Badge';
 import { formLabelClasses } from '@mui/material/FormLabel';
 import { inputBaseClasses } from '@mui/material/InputBase';
-import { Badge } from '../../components/Badge';
-import { Counter } from '../../components/Counter';
 import { styled } from '../../components/styled';
 import { formFiltersClassnames } from './constants';
 export const Wrapper = styled.div `
@@ -32,41 +29,6 @@ export const Wrapper = styled.div `
     }
   }
 `;
-export const AllFiltersButtonWrapper = styled.div `
-  display: none;
-
-  white-space: nowrap;
-
-  &.${formFiltersClassnames.showAllFiltersButtonOnDesktop} {
-    display: flex;
-  }
-
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    margin-right: 0;
-    &.${formFiltersClassnames.showAllFiltersButtonOnMobile} {
-      display: flex;
-    }
-
-    &.${formFiltersClassnames.withoutSearch} {
-      width: 100%;
-
-      .${formFiltersClassnames.allFiltersButton} {
-        width: 100%;
-      }
-    }
-
-    &.${formFiltersClassnames.withSearch} {
-      .${formFiltersClassnames.allFiltersButton} {
-         display: unset;
-         gap: 0;
-
-         padding: 8px;
-
-         font-size: 0;
-      }
-    }
-  }
-`;
 export const MainFiltersWrapper = styled.div `
   display: grid;
   grid-auto-flow: column;
@@ -79,19 +41,6 @@ export const MainFiltersWrapper = styled.div `
     display: none;
   }
 `;
-export const StyledBadge = styled(Badge) `
-   width: 100%; 
-  .${badgeClasses.dot} {
-      ${({ theme }) => theme.breakpoints.up('sm')} {
-        display: none;
-      }
-    }
-`;
-export const StyledCounter = styled(Counter) `
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    display: none;
-  }
-`;
 export const SubmitButtonWrapper = styled.div `
   white-space: nowrap;
 

package/hook-form/FormFilters/types.d.ts

@@ -1,45 +1,36 @@
 import { type ObjectAsyncGuard, type ObjectGuard } from '@astral/validations';
 import { type ReactNode } from 'react';
-import { type Control } from 'react-hook-form';
+import { type Control, type UseFormReturn } from 'react-hook-form';
 import type { ButtonProps } from '../../components/Button';
 type InputsProps<TFieldValues extends Record<string, unknown>> = {
     control: Control<TFieldValues>;
 };
 export type FormFiltersProps<TFieldValues extends Record<string, unknown>> = {
+    form: UseFormReturn<TFieldValues>;
+    onSubmit?: (values: TFieldValues) => void;
     /**
      * Схема валидации из @astral/validations
      */
     validationSchema?: ObjectGuard<TFieldValues> | ObjectAsyncGuard<TFieldValues>;
-    /**
-     * Значения фильтров
-     */
-    values?: TFieldValues;
-    /**
-     * Callback вызываемый при изменении значений фильтров. Вызывается с debounce (300ms)
-     */
-    onChange: (values: TFieldValues) => void;
     /**
      * Поле поиска
      *
      * @example
      * ```ts
      * <FormFilters
-     *   SearchField={(props) => <FormFiltersSearchField {...props} placeholder="Поиск..." />}
+     *   SearchField={({control}) => <FormFiltersSearchField control={control} placeholder="Поиск..." />}
      * />
      * ```
      */
-    searchField?: (props: InputsProps<TFieldValues> & {
-        fullWidth?: boolean;
-    }) => ReactNode;
+    searchField?: (props: InputsProps<TFieldValues>) => ReactNode;
     /**
      * Основные фильтры
      *
      * @example
      * ```ts
      * <FormFilters
-     *   MainFilters={({ control, isModal, ...props }) =>
+     *   MainFilters={({ control, isModal }) =>
      *    <FormTextField
-     *      {...props}
      *      control={control}
      *      name="name"
      *      label="Название"
@@ -57,7 +48,7 @@ export type FormFiltersProps<TFieldValues extends Record<string, unknown>> = {
      * @example
      * ```ts
      * <FormFilters
-     *   SecondaryFilters={({ control, ...props }) => <FormTextField {...props} control={control} placeholder="Введите название" />}
+     *   SecondaryFilters={({ control }) => <FormTextField control={control} name="name" label="Название" placeholder="Введите название" />}
      * />
      * ```
      */

package/hook-form/FormFilters/useLogic/useLogic.d.ts

@@ -1,18 +1,17 @@
-import { type UseFormReturn } from '../../useForm';
+import { type UseFormReturn } from 'react-hook-form';
 import { type FormFiltersDialogProps } from '../FormFiltersDialog/types';
 import { type FormFiltersProps } from '../types';
 type UseLogicReturn<TFieldValues extends Record<string, unknown>> = {
-    headerForm: UseFormReturn<TFieldValues>;
+    form: UseFormReturn<TFieldValues>;
+    onSubmit?: (values: TFieldValues) => void;
     searchField: FormFiltersProps<TFieldValues>['searchField'];
     mainFilters: FormFiltersProps<TFieldValues>['mainFilters'];
     submitButton: FormFiltersProps<TFieldValues>['submitButton'];
-    counter: number;
-    onSubmit: (submittedValues: TFieldValues) => void;
+    secondaryFilters: FormFiltersProps<TFieldValues>['secondaryFilters'];
     onOpenModal: () => void;
     dialogProps: FormFiltersDialogProps<TFieldValues>;
     mainFiltersColumns?: string;
     isLoading?: boolean;
-    allFiltersButtonClassName: string;
 };
-export declare const useLogic: <TFieldValues extends Record<string, unknown>>({ validationSchema, values, onChange, searchField, mainFilters, secondaryFilters, submitButton, mainFiltersColumns, isLoading, }: FormFiltersProps<TFieldValues>) => UseLogicReturn<TFieldValues>;
+export declare const useLogic: <TFieldValues extends Record<string, unknown>>({ form, onSubmit, validationSchema, searchField, mainFilters, secondaryFilters, submitButton, mainFiltersColumns, isLoading, }: FormFiltersProps<TFieldValues>) => UseLogicReturn<TFieldValues>;
 export {};

package/hook-form/FormFilters/useLogic/useLogic.js

@@ -1,120 +1,32 @@
-import { debounce } from '@astral/utils/debounce';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { useWatch } from 'react-hook-form';
-import { checkIsDeepEqual } from '../../../components/utils/checkIsDeepEqual';
-import { classNames } from '../../../components/utils/classNames';
-import { FORM_FILTERS_SEARCH_FIELD_ID } from '../../FormFiltersSearchField/constants';
-import { useForm } from '../../useForm';
-import { formFiltersClassnames } from '../constants';
-import { useFirstMountAfterLoading } from './hooks';
-export const useLogic = ({ validationSchema, values, onChange, searchField, mainFilters, secondaryFilters, submitButton, mainFiltersColumns, isLoading, }) => {
+import { useState } from 'react';
+export const useLogic = ({ form, onSubmit, validationSchema, searchField, mainFilters, secondaryFilters, submitButton, mainFiltersColumns, isLoading, }) => {
     const [isModalOpen, setIsModalOpen] = useState(false);
-    const isFirstMount = useFirstMountAfterLoading(isLoading);
     const onOpenModal = () => {
         setIsModalOpen(true);
     };
-    const headerForm = useForm({
-        validationSchema,
-        defaultValues: values,
-    });
-    const headerFormValues = useWatch({
-        control: headerForm.control,
-    });
-    // Ref для хранения debounced функции, чтобы можно было её отменить
-    const debouncedOnChangeRef = useRef(null);
-    // Ref для отслеживания внешнего reset (чтобы не вызывать onChange при внешнем reset)
-    const isExternalResetRef = useRef(false);
-    // Ref для хранения предыдущих внешних values (для сравнения)
-    const previousValuesRef = useRef(values);
-    // Отменяет предыдущий debounced вызов onChange, если он есть
-    const clearPreviousDebouncedOnChange = () => {
-        if (debouncedOnChangeRef.current) {
-            debouncedOnChangeRef.current.clear();
-        }
-    };
-    const hasSubmitButton = Boolean(submitButton);
-    useEffect(() => {
-        // Если есть submitButton, не вызываем onChange при изменении значений
-        if (hasSubmitButton || isLoading || isFirstMount) {
-            return;
-        }
-        clearPreviousDebouncedOnChange();
-        // Пропускаем onChange если это внешний reset
-        if (isExternalResetRef.current) {
-            isExternalResetRef.current = false;
-            return;
-        }
-        // Создаем новый debounced вызов
-        const debouncedOnChange = debounce(() => {
-            onChange(headerFormValues);
-        }, 300);
-        debouncedOnChangeRef.current = debouncedOnChange;
-        debouncedOnChange();
-        return () => {
-            debouncedOnChange.clear();
-        };
-    }, [headerFormValues, onChange, hasSubmitButton, isLoading]);
-    const searchName = document
-        .getElementById(FORM_FILTERS_SEARCH_FIELD_ID)
-        ?.getAttribute('name') || '';
-    // Исключаем поиск из счетчика фильтров
-    const counter = Object.values(headerFormValues).filter(Boolean).length -
-        (headerFormValues[searchName] ? 1 : 0);
-    const setFiltersValues = (newValues) => headerForm.reset(newValues);
-    // Функция отправки формы на SubmitButton. Приводит к вызову onChange без debounce.
-    const onSubmit = (submittedValues) => {
-        clearPreviousDebouncedOnChange();
-        onChange?.(submittedValues);
-    };
     // Функция отправки формы на кнопку "Применить" в модальном окне
     const onSubmitModal = (submittedValues) => {
-        setFiltersValues(submittedValues);
-        onSubmit(submittedValues);
+        form.reset(submittedValues);
     };
-    // Синхронизация внешних values с формой
-    useEffect(() => {
-        if (isFirstMount) {
-            return;
-        }
-        // Сравниваем значения, чтобы избежать лишних reset
-        const valuesChanged = !checkIsDeepEqual(previousValuesRef.current, values);
-        if (!valuesChanged) {
-            return;
-        }
-        clearPreviousDebouncedOnChange();
-        isExternalResetRef.current = true;
-        previousValuesRef.current = values;
-        setFiltersValues(values);
-    }, [values, headerForm]);
-    const allFiltersButtonClassName = useMemo(() => {
-        return classNames({
-            [formFiltersClassnames.showAllFiltersButtonOnDesktop]: Boolean(secondaryFilters),
-            [formFiltersClassnames.showAllFiltersButtonOnMobile]: Boolean(mainFilters) || Boolean(secondaryFilters),
-            [formFiltersClassnames.withSearch]: Boolean(searchField),
-            [formFiltersClassnames.withoutSearch]: !searchField,
-        });
-    }, [mainFilters, secondaryFilters, searchField]);
     const dialogProps = {
         validationSchema,
-        values,
+        form,
         mainFilters,
         secondaryFilters,
-        defaultValues: headerFormValues,
         onSubmit: onSubmitModal,
         isModalOpen,
         setIsModalOpen,
     };
     return {
-        headerForm,
+        form,
+        onSubmit,
         searchField,
         mainFilters,
+        secondaryFilters,
         submitButton,
-        counter,
-        onSubmit,
         onOpenModal,
         dialogProps,
         mainFiltersColumns,
         isLoading,
-        allFiltersButtonClassName,
     };
 };

package/hook-form/FormFiltersSearchField/FormFiltersSearchField.js

@@ -12,6 +12,6 @@ function FormFiltersSearchFieldInner({ width, ...props }, ref) {
         ...props,
         defaultValue: props.defaultValue || '',
     });
-    return (_jsx(Wrapper, { "$width": width, children: _jsx(SearchField, { ...fieldProps, ref: ref, inputProps: { id: FORM_FILTERS_SEARCH_FIELD_ID } }) }));
+    return (_jsx(Wrapper, { "$width": width, children: _jsx(SearchField, { ...fieldProps, ref: ref, inputProps: { id: FORM_FILTERS_SEARCH_FIELD_ID }, fullWidth: true }) }));
 }
 export const FormFiltersSearchField = forwardRefWithGeneric(FormFiltersSearchFieldInner);

package/node/components/AddressAutocomplete/AddressAutocomplete.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type Address } from './types';
-export declare const AddressAutocomplete: <TOptions extends Address = Address>(props: Pick<import("../AsyncAutocomplete").AsyncAutocompleteProps<TOptions, false, false, boolean>, "defaultValue" | "className" | "id" | "role" | "ref" | "label" | "open" | "size" | "disablePortal" | "onClose" | "onOpen" | "isDisabled" | "isError" | "inputRef" | "hideHelperText" | "helperText" | "placeholder" | "readOnly" | "loadingText" | "noOptionsText" | "renderOption" | "autoHighlight" | "getOptionDisabled" | "onInputChange" | "fetchOptions" | "fetchDelayMs" | "minSymbolsToFetch" | "isFullWidth" | "isSuccess" | "isLoading" | "isRequired"> & {
+export declare const AddressAutocomplete: <TOptions extends Address = Address>(props: Pick<import("../AsyncAutocomplete").AsyncAutocompleteProps<TOptions, false, false, boolean>, "defaultValue" | "className" | "id" | "role" | "ref" | "label" | "open" | "size" | "disablePortal" | "onClose" | "onOpen" | "placeholder" | "readOnly" | "isDisabled" | "isError" | "inputRef" | "hideHelperText" | "helperText" | "loadingText" | "noOptionsText" | "renderOption" | "autoHighlight" | "getOptionDisabled" | "onInputChange" | "fetchOptions" | "fetchDelayMs" | "minSymbolsToFetch" | "isFullWidth" | "isSuccess" | "isLoading" | "isRequired"> & {
     value?: TOptions | undefined;
     onChange: (value: TOptions) => void;
     freeSolo?: boolean | undefined;

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

@@ -307,14 +307,14 @@ export declare const useLogic: <TOptions, TMultiple extends boolean, TDisableCle
         disabledItemsFocusable?: boolean | undefined;
         disableListWrap?: boolean | undefined;
         PopperComponent?: import("react").JSXElementConstructor<import("@mui/material").PopperProps> | undefined;
-        inputRef?: import("react").Ref<any> | undefined;
         autoComplete?: boolean | undefined;
         multiple?: TMultiple | undefined;
+        placeholder?: string | undefined;
+        readOnly?: boolean | undefined;
+        inputRef?: import("react").Ref<any> | undefined;
         hideHelperText?: boolean | undefined;
         helperText?: import("react").ReactNode;
         inputProps?: import("@mui/material").InputBaseComponentProps | undefined;
-        placeholder?: string | undefined;
-        readOnly?: boolean | undefined;
         ChipProps?: import("@mui/material").ChipProps<"div"> | undefined;
         clearIcon?: import("react").ReactNode;
         clearText?: string | undefined;

package/node/components/Autocomplete/Autocomplete.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type AutocompleteRenderInputParams } from './types';
-export declare const Autocomplete: <TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean>(props: Omit<import("..").WithoutEmotionSpecific<import("@mui/material/Autocomplete/Autocomplete").AutocompleteProps<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo, "div">>, "size" | "clearText" | "closeText" | "noOptionsText" | "openText" | "renderInput"> & Pick<import("../TextField").TextFieldProps, "label" | "success" | "error" | "inputRef" | "required" | "helperText" | "inputProps" | "placeholder"> & {
+export declare const Autocomplete: <TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean>(props: Omit<import("..").WithoutEmotionSpecific<import("@mui/material/Autocomplete/Autocomplete").AutocompleteProps<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo, "div">>, "size" | "clearText" | "closeText" | "noOptionsText" | "openText" | "renderInput"> & Pick<import("../TextField").TextFieldProps, "label" | "success" | "error" | "placeholder" | "required" | "inputRef" | "helperText" | "inputProps"> & {
     renderInput?: ((props: Omit<import("..").WithoutEmotionSpecific<import("@mui/material").TextFieldProps>, "color" | "select" | "margin" | "variant" | "multiline" | "SelectProps"> & {
         success?: boolean | undefined;
         startAdornment?: import("react").ReactNode;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type AvatarSize } from './types';
-export declare const StyledAvatar: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("@mui/material/Avatar").AvatarOwnProps & import("@mui/material/Avatar").AvatarSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "sx" | "classes" | "className" | "style" | "children" | "variant" | "slots" | "slotProps" | "alt" | "src" | "sizes" | "srcSet" | "imgProps"> & {
+export declare const StyledAvatar: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("@mui/material/Avatar").AvatarOwnProps & import("@mui/material/Avatar").AvatarSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "sx" | "classes" | "className" | "style" | "children" | "variant" | "slots" | "slotProps" | "alt" | "sizes" | "src" | "srcSet" | "imgProps"> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {
     $size?: AvatarSize | undefined;

package/node/components/CopyTypography/CopyTypography.js

@@ -8,11 +8,11 @@ const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const CopyTypography = (props) => {
-    const { handleMouseLeave, handleClick, tooltipTitle, isIconOnLeft, isIconOnRight, restProps, copyPosition, color, showCopyIcon, isOverflow, children, } = (0, useLogic_1.useLogic)(props);
+    const { handleMouseLeave, handleClick, tooltipTitle, isIconOnLeft, isIconOnRight, restProps, copyPosition, color, showCopyIcon, isOverflow, children, tooltipProps, } = (0, useLogic_1.useLogic)(props);
     const renderIcon = () => ((0, jsx_runtime_1.jsx)(styles_1.StyledCopyIcon, { size: "sm", "$copyPosition": copyPosition, color: color, className: (0, classNames_1.classNames)({
             [constants_1.copyTypographyClassnames.showIconOnHover]: showCopyIcon === 'onHover',
         }) }));
-    return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: tooltipTitle, disableInteractive: true, placement: "bottom", children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { onMouseLeave: handleMouseLeave, onClick: handleClick, component: "div", color: color, ...restProps, children: [isIconOnLeft && renderIcon(), (0, jsx_runtime_1.jsx)(styles_1.TypographyWrapper, { className: (0, classNames_1.classNames)({
+    return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: tooltipTitle, disableInteractive: true, placement: "bottom", ...tooltipProps, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { onMouseLeave: handleMouseLeave, onClick: handleClick, component: "div", color: color, ...restProps, children: [isIconOnLeft && renderIcon(), (0, jsx_runtime_1.jsx)(styles_1.TypographyWrapper, { className: (0, classNames_1.classNames)({
                         [constants_1.copyTypographyClassnames.overflow]: isOverflow,
                     }), children: children }), isIconOnRight && renderIcon()] }) }));
 };

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

@@ -1,4 +1,6 @@
+import { type TooltipProps as BasicTooltipProps } from '../Tooltip';
 import { type TypographyProps } from '../Typography';
+type TooltipProps = Omit<BasicTooltipProps, 'ref'>;
 export type CopyTypographyProps = TypographyProps & {
     /**
      * Текст, который будет скопирован. Перекрывает обычное копирование если children является строкой
@@ -20,4 +22,10 @@ export type CopyTypographyProps = TypographyProps & {
      * Если `true`, включается скрытие текста под троеточие (...) при overflow
      */
     isOverflow?: boolean;
+    /**
+     * Пропс для кастомизации тултипа
+     * @example <CopyTypography tooltipProps={{placement: 'top-start'}} />
+     */
+    tooltipProps?: Omit<TooltipProps, 'children' | 'title'>;
 };
+export {};