@astral/ui 4.34.1 → 4.35.0

package/components/Badge/styles.js

@@ -9,6 +9,7 @@ const getBgColor = ({ $customColor, theme, $variantColor, }) => {
             success: theme.palette.green[800],
             warning: theme.palette.yellow[800],
             white: theme.palette.primary.contrastText,
+            transparent: 'transparent',
         },
         light: {
             grey: theme.palette.grey[300],
@@ -17,6 +18,7 @@ const getBgColor = ({ $customColor, theme, $variantColor, }) => {
             success: theme.palette.green[100],
             warning: theme.palette.yellow[100],
             white: theme.palette.grey[100],
+            transparent: 'transparent',
         },
     };
     return colors[$variantColor][$customColor];
@@ -30,6 +32,9 @@ const getTextColor = ({ $customColor, theme, $variantColor, }) => {
         warning: theme.palette.yellow[800],
         default: theme.palette.primary.contrastText,
     };
+    if ($customColor === 'transparent') {
+        return theme.palette.grey[900];
+    }
     if ($customColor === 'white') {
         return theme.palette.grey[900];
     }

package/components/Badge/types.d.ts

@@ -1,2 +1,2 @@
-export type BadgeColor = 'primary' | 'grey' | 'white' | 'warning' | 'error' | 'success';
+export type BadgeColor = 'primary' | 'grey' | 'white' | 'warning' | 'error' | 'success' | 'transparent';
 export type BadgeVariantsColor = 'contained' | 'light';

package/components/Chip/Chip.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography } from '../Typography';
 import { ChipStatusIcon } from './ChipStatusIcon';
 import { chipClassnames } from './constants';
-import { AdornmentWrapper, Counter, HiddenInput, Label, Wrapper, } from './styles';
+import { AdornmentWrapper, HiddenInput, Label, StyledCounter, Wrapper, } from './styles';
 import { useLogic } from './useLogic';
 export const Chip = (props) => {
-    const { classnames, inputProps, label, status, icon, counter, endAdornment, hasStartAdornment, hasEndAdornment, } = useLogic(props);
+    const { classnames, inputProps, label, status, icon, counter, endAdornment, hasStartAdornment, hasEndAdornment, maxCount, } = useLogic(props);
     const renderStartAdornment = () => {
         if (status) {
             return _jsx(ChipStatusIcon, { status: status });
@@ -17,7 +17,7 @@ export const Chip = (props) => {
     };
     const renderEndAdornment = () => {
         if (counter) {
-            return _jsx(Counter, { children: counter });
+            return (_jsx(StyledCounter, { color: "transparent", content: counter, max: maxCount, withBorder: false }));
         }
         if (endAdornment) {
             return endAdornment;

package/components/Chip/ChipProvider/ChipProvider.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from 'react';
+export type ChipMode = 'single' | 'multiple';
+export type ChipContextValue = {
+    mode: ChipMode;
+    /**
+     * Общий `name` для нативных `radio`/`checkbox` в группе (стрелки и семантика радио).
+     */
+    name?: string;
+};
+export declare const ChipContext: import("react").Context<ChipContextValue>;
+type ChipProviderProps = {
+    mode: ChipMode;
+    name?: string;
+    children: ReactNode;
+};
+/**
+ * Задаёт режим скрытого input для вложенных `Chip`:
+ * - `single` — `radio`; повторный клик по выбранному чипу вызывает `onChange` со снятием выбора
+ * - `multiple` — `checkbox`
+ *
+ * Параметр `name` задаёт общий атрибут `name` у инпутов (группа радио, стрелки вверх/вниз между опциями).
+ *
+ * Вне провайдера используется режим `single`.
+ */
+export declare const ChipProvider: ({ mode, name, children }: ChipProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/components/Chip/ChipProvider/ChipProvider.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext } from 'react';
+export const ChipContext = createContext({ mode: 'single' });
+/**
+ * Задаёт режим скрытого input для вложенных `Chip`:
+ * - `single` — `radio`; повторный клик по выбранному чипу вызывает `onChange` со снятием выбора
+ * - `multiple` — `checkbox`
+ *
+ * Параметр `name` задаёт общий атрибут `name` у инпутов (группа радио, стрелки вверх/вниз между опциями).
+ *
+ * Вне провайдера используется режим `single`.
+ */
+export const ChipProvider = ({ mode, name, children }) => (_jsx(ChipContext.Provider, { value: { mode, name }, children: children }));

package/components/Chip/ChipProvider/index.d.ts

@@ -0,0 +1 @@
+export * from './ChipProvider';

package/components/Chip/ChipProvider/index.js

@@ -0,0 +1 @@
+export * from './ChipProvider';

package/components/Chip/index.d.ts

@@ -1,2 +1,3 @@
 export { Chip } from './Chip';
-export type { ChipProps } from './types';
+export { type ChipContextValue, type ChipMode, ChipProvider, } from './ChipProvider';
+export type { ChipProps, ChipStatus } from './types';

package/components/Chip/index.js

@@ -1 +1,2 @@
 export { Chip } from './Chip';
+export { ChipProvider, } from './ChipProvider';

package/components/Chip/public.d.ts

@@ -1,2 +1,3 @@
 export { Chip } from './Chip';
-export type { ChipProps } from './types';
+export { type ChipContextValue, type ChipMode, ChipProvider, } from './ChipProvider';
+export type { ChipProps, ChipStatus } from './types';

package/components/Chip/public.js

@@ -1 +1,2 @@
 export { Chip } from './Chip';
+export { ChipProvider, } from './ChipProvider';

package/components/Chip/styles.d.ts

@@ -7,10 +7,14 @@ export declare const HiddenInput: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
-export declare const Counter: import("../styled").StyledComponent<{
+export declare const StyledCounter: import("../styled").StyledComponent<Omit<import("..").WithoutEmotionSpecific<import("@mui/material/Badge").BadgeProps>, "content" | "color" | "children" | "variant" | "invisible" | "anchorOrigin" | "badgeContent" | "overlap" | "withBorder"> & {
+    color: import("../Counter/types").CounterColor;
+    variant?: import("../Counter/types").CounterVariants | undefined;
+    content?: number | undefined;
+    withBorder?: boolean | undefined;
+} & {
     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 AdornmentWrapper: import("../styled").StyledComponent<import("../Typography/types").TypographyPropsBase & {
     color?: import("../Typography").TypographyColor | undefined;
     variant?: import("../Typography").TypographyVariant | undefined;

package/components/Chip/styles.js

@@ -1,3 +1,5 @@
+import { badgeClasses } from '@mui/material/Badge';
+import { Counter } from '../Counter';
 import { styled } from '../styled';
 import { Typography } from '../Typography';
 import { chipClassnames, chipSize } from './constants';
@@ -110,9 +112,12 @@ export const Wrapper = styled.div `
   }
 `;
 export const HiddenInput = styled.input `
-  display: none;
+  position: absolute;
+
+  width: 0;
+  height: 0;
 `;
-export const Counter = styled.div `
+export const StyledCounter = styled(Counter) `
   display: flex;
   align-items: center;
 
@@ -131,6 +136,18 @@ export const Counter = styled.div `
     background-color: ${({ theme }) => theme.palette.grey[800]};
     border-radius: 50%;
   }
+
+  .${badgeClasses.badge} {
+    min-width: unset;
+    padding: 0;
+
+    font-size: ${({ theme }) => theme.typography.body1.fontSize};
+    font-weight: ${({ theme }) => theme.typography.body1.fontWeight};
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      font-size: ${({ theme }) => theme.typography.body2.fontSize};
+    }
+  }
 `;
 export const AdornmentWrapper = styled(Typography) `
   display: flex;
@@ -139,4 +156,11 @@ export const AdornmentWrapper = styled(Typography) `
 export const Label = styled.label `
   /* Убираем подсветку при нажатии на компонент */
   -webkit-tap-highlight-color: transparent;
+
+  /* Причина игнора: Не критично для отображения */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  &:has(> input:focus-visible) .${chipClassnames.root} {
+    outline: 2px solid ${({ theme }) => theme.palette.components.focused};
+    outline-offset: 2px;
+  }
 `;

package/components/Chip/types.d.ts

@@ -1,4 +1,11 @@
 import type { ChangeEvent, ReactElement, ReactNode } from 'react';
+export type ChipStatus = 'success' | 'warning' | 'error';
+/**
+ * Пропсы `Chip`.
+ *
+ * Тип скрытого поля (`radio` или `checkbox`) задаётся через `ChipProvider` (`mode`).
+ * Без провайдера используется `single`.
+ */
 export type ChipProps = {
     /**
      * Содержимое компонента
@@ -11,7 +18,7 @@ export type ChipProps = {
     /**
      * Статус компонента. Заменяет параметр `icon`
      */
-    status?: 'success' | 'warning' | 'error';
+    status?: ChipStatus;
     /**
      * Иконка слева от `label`
      */
@@ -32,6 +39,10 @@ export type ChipProps = {
      * Число счетчика справа от `label`. Заменяет параметр `endAdornment`
      */
     counter?: number;
+    /**
+     * Максимальное число которое отобразится в счетчике
+     */
+    maxCount?: number;
     /**
      * Элемент, который добавляется в конец компонента
      */
@@ -40,4 +51,13 @@ export type ChipProps = {
      * Обработчик изменения состояния компонента
      */
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Атрибут `name` скрытого `input` (для группы `radio` — одинаковый `name` у всех вариантов).
+     * Пробрасывается из `ChipProvider`, если задан там.
+     */
+    name?: string;
+    /**
+     * Атрибут `value` скрытого `input` (отметка в группе, отправка формы).
+     */
+    value?: string | number;
 };

package/components/Chip/useLogic/useLogic.d.ts

@@ -1,20 +1,21 @@
 /// <reference types="react" />
 import { type ChipProps } from '../types';
-type UseLogicParams = ChipProps;
-export declare const useLogic: ({ className, isDisabled, isSelected, onChange, size, label, status, icon, counter, endAdornment, }: UseLogicParams) => {
+export declare const useLogic: ({ className, isDisabled, isSelected, onChange, size, label, status, icon, counter, endAdornment, maxCount, name: nameProp, value: valueProp, }: ChipProps) => {
     classnames: string;
     inputProps: {
+        value?: string | number | undefined;
+        name?: string | undefined;
         checked: boolean | undefined;
         onChange: ((event: import("react").ChangeEvent<HTMLInputElement, Element>) => void) | undefined;
         type: string;
         disabled: boolean | undefined;
     };
     label: import("react").ReactNode;
-    status: "success" | "warning" | "error" | undefined;
+    status: import("../types").ChipStatus | undefined;
     icon: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
     counter: number | undefined;
     endAdornment: import("react").ReactNode;
     hasStartAdornment: boolean;
     hasEndAdornment: boolean;
+    maxCount: number | undefined;
 };
-export {};

package/components/Chip/useLogic/useLogic.js

@@ -1,7 +1,11 @@
-import { useMemo } from 'react';
+import { useContext, useMemo } from 'react';
 import { classNames } from '../../utils/classNames';
+import { ChipContext } from '../ChipProvider';
 import { chipClassnames } from '../constants';
-export const useLogic = ({ className, isDisabled, isSelected, onChange, size = 'medium', label, status, icon, counter, endAdornment, }) => {
+export const useLogic = ({ className, isDisabled, isSelected, onChange, size = 'medium', label, status, icon, counter, endAdornment, maxCount, name: nameProp, value: valueProp, }) => {
+    const { mode, name: contextName } = useContext(ChipContext);
+    const isMultiple = mode === 'multiple';
+    const inputName = nameProp ?? contextName;
     const classnames = useMemo(() => classNames(className, chipClassnames.root, {
         [chipClassnames.disabled]: isDisabled,
         [chipClassnames.selected]: isSelected,
@@ -15,13 +19,16 @@ export const useLogic = ({ className, isDisabled, isSelected, onChange, size = '
     }), [isSelected, isDisabled, size, status, counter, endAdornment, icon]);
     const hasStartAdornment = Boolean(status || icon);
     const hasEndAdornment = Boolean(endAdornment || counter);
+    const inputType = isMultiple ? 'checkbox' : 'radio';
     return {
         classnames,
         inputProps: {
             checked: isSelected,
             onChange,
-            type: 'checkbox',
+            type: inputType,
             disabled: isDisabled,
+            ...(inputName !== undefined ? { name: inputName } : {}),
+            ...(valueProp !== undefined ? { value: valueProp } : {}),
         },
         label,
         status,
@@ -30,5 +37,6 @@ export const useLogic = ({ className, isDisabled, isSelected, onChange, size = '
         endAdornment,
         hasStartAdornment,
         hasEndAdornment,
+        maxCount,
     };
 };

package/components/Counter/Counter.d.ts

@@ -14,5 +14,9 @@ export type CounterProps = Omit<WithoutEmotionSpecific<MuiBadgeProps>, 'color' |
      * Контент
      */
     content?: number;
+    /**
+     * Наличие белой рамки
+     */
+    withBorder?: boolean;
 };
-export declare const Counter: ({ content, color, max, variant, ...props }: CounterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Counter: ({ content, color, max, variant, withBorder, ...props }: CounterProps) => import("react/jsx-runtime").JSX.Element;

package/components/Counter/Counter.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StyledCounter } from './styles';
-export const Counter = ({ content, color, max = 99, variant = 'contained', ...props }) => (_jsx(StyledCounter, { badgeContent: content, max: max, variantColor: variant, color: color, ...props }));
+export const Counter = ({ content, color, max = 99, variant = 'contained', withBorder = true, ...props }) => (_jsx(StyledCounter, { badgeContent: content, max: max, variantColor: variant, color: color, withBorder: withBorder, ...props }));

package/components/Counter/types.d.ts

@@ -1,2 +1,2 @@
-export type CounterColor = 'primary' | 'grey' | 'white' | 'warning' | 'error' | 'success';
+export type CounterColor = 'primary' | 'grey' | 'white' | 'warning' | 'error' | 'success' | 'transparent';
 export type CounterVariants = 'contained' | 'light';

package/components/DashboardSidebarCounter/styles.d.ts

@@ -2,6 +2,7 @@ export declare const StyledCounter: import("../styled").StyledComponent<Omit<imp
     color: import("../Counter/types").CounterColor;
     variant?: import("../Counter/types").CounterVariants | undefined;
     content?: number | undefined;
+    withBorder?: boolean | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {

package/components/PageHeader/HeaderContent/FormFiltersProvider/FormFiltersProvider.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+type FormFiltersLayoutContextValue = {
+    filtersClassName?: string;
+    quickFiltersClassName?: string;
+};
+export declare const FormFiltersLayoutContext: import("react").Context<FormFiltersLayoutContextValue | undefined>;
+type FormFiltersProviderProps = FormFiltersLayoutContextValue & {
+    children: ReactNode;
+};
+/**
+ * Задаёт дополнительные классы для корня фильтров и блока быстрых фильтров
+ * (например, из разметки PageHeader).
+ */
+export declare const FormFiltersProvider: ({ children, filtersClassName, quickFiltersClassName, }: FormFiltersProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/components/PageHeader/HeaderContent/FormFiltersProvider/FormFiltersProvider.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext } from 'react';
+export const FormFiltersLayoutContext = createContext(undefined);
+/**
+ * Задаёт дополнительные классы для корня фильтров и блока быстрых фильтров
+ * (например, из разметки PageHeader).
+ */
+export const FormFiltersProvider = ({ children, filtersClassName, quickFiltersClassName, }) => (_jsx(FormFiltersLayoutContext.Provider, { value: { filtersClassName, quickFiltersClassName }, children: children }));

package/components/PageHeader/HeaderContent/FormFiltersProvider/index.d.ts

@@ -0,0 +1 @@
+export { FormFiltersProvider, FormFiltersLayoutContext, } from './FormFiltersProvider';

package/components/PageHeader/HeaderContent/FormFiltersProvider/index.js

@@ -0,0 +1 @@
+export { FormFiltersProvider, FormFiltersLayoutContext, } from './FormFiltersProvider';

package/components/PageHeader/HeaderContent/HeaderContent.js

@@ -5,7 +5,8 @@ import { pageHeaderClassnames } from '../constants';
 import { PageActions } from '../PageActions';
 import { Title } from '../Title';
 import { Description } from './Description';
-import { BreadcrumbsWrapper, DesktopTitleWrapper, PageFilters, PageSubheader, } from './styles';
+import { FormFiltersProvider } from './FormFiltersProvider';
+import { BreadcrumbsWrapper, DesktopTitleWrapper, PageSubheader, } from './styles';
 export const HeaderContent = ({ backButton, description, subheader, breadcrumbs, actions, title, filters, isLoading, }) => {
     const renderBreadcrumbs = () => {
         if (!breadcrumbs) {
@@ -13,5 +14,5 @@ export const HeaderContent = ({ backButton, description, subheader, breadcrumbs,
         }
         return (_jsx(BreadcrumbsWrapper, { children: Array.isArray(breadcrumbs) ? (_jsx(Breadcrumbs, { children: breadcrumbs })) : (breadcrumbs) }));
     };
-    return (_jsxs(_Fragment, { children: [renderBreadcrumbs(), _jsx(DesktopTitleWrapper, { children: _jsx(Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), _jsx(Description, { description: description, isLoading: isLoading }), actions && (_jsx(PageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", withCollapseOnLaptop: Boolean(filters), ...actions })), filters && _jsx(PageFilters, { children: filters }), subheader && _jsx(PageSubheader, { children: subheader })] }));
+    return (_jsxs(_Fragment, { children: [renderBreadcrumbs(), _jsx(DesktopTitleWrapper, { children: _jsx(Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), _jsx(Description, { description: description, isLoading: isLoading }), actions && (_jsx(PageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", withCollapseOnLaptop: Boolean(filters), ...actions })), filters && (_jsx(FormFiltersProvider, { filtersClassName: pageHeaderClassnames.filters, quickFiltersClassName: pageHeaderClassnames.quickFilters, children: filters })), subheader && _jsx(PageSubheader, { children: subheader })] }));
 };

package/components/PageHeader/HeaderContent/index.d.ts

@@ -1 +1,2 @@
 export * from './HeaderContent';
+export * from './FormFiltersProvider';

package/components/PageHeader/HeaderContent/index.js

@@ -1 +1,2 @@
 export * from './HeaderContent';
+export * from './FormFiltersProvider';

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

@@ -7,10 +7,6 @@ export declare const PageSubheader: import("../../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 PageFilters: import("../../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 DesktopTitleWrapper: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

package/components/PageHeader/HeaderContent/styles.js

@@ -11,7 +11,7 @@ export const BreadcrumbsWrapper = styled.div `
 `;
 export const PageSubheader = styled.div `
   grid-column: 1 / -1;
-  grid-row: 5;
+  grid-row: 6;
 
   padding-top: ${({ theme }) => theme.spacing(4)};
 
@@ -19,15 +19,6 @@ export const PageSubheader = styled.div `
     padding: ${({ theme }) => theme.spacing(0, 4, 4, 4)};
   }
 `;
-export const PageFilters = styled.div `
-  grid-column: 1 / -1;
-  grid-row: 4;
-
-  ${({ theme }) => theme.breakpoints.down('laptop')} {
-    grid-column: 3;
-    grid-row: 1 / 4;
-  }
-`;
 export const DesktopTitleWrapper = styled.div `
   display: contents;
 

package/components/PageHeader/PageActions/PageActions.js

@@ -15,6 +15,6 @@ const PageActionsInner = (props, ref) => {
     if (isLoading) {
         return (_jsx(Wrapper, { children: _jsx(PageActionSkeleton, { size: size }) }));
     }
-    return (_jsx(Wrapper, { className: className, ref: ref, children: _jsxs(ActionWrapper, { "$spacing": spacing, children: [_jsx(Tooltip, { title: tooltipTitle, enterDelay: 400, enterNextDelay: 400, placement: "bottom-end", children: _jsx(FocusModeButton, { className: buttonClassnames, variant: "outlined", onClick: handleClick, "aria-label": tooltipTitle, color: "grey", children: isFocusedMode ? _jsx(MinimizeOutlineMd, {}) : _jsx(FullSizeOutlineMd, {}) }) }), _jsx(MainActionsWrapper, { "$spacing": spacing, className: classnames, children: _jsx(MainActions, { isDisabled: disabledAction, actions: main, size: size, spacing: spacing }) }), _jsxs(SecondaryVisibleWrapper, { "$spacing": spacing, className: classnames, children: [secondaryVisible && (_jsx(SecondaryVisibleActions, { actions: secondaryVisible, size: size })), secondary && (_jsx(SecondaryActions, { isDisabled: disabledAction, actions: secondary, size: size }))] }), collapsedActions.length > 0 && (_jsx(CollapsedActionsWrapper, { className: classnames, children: _jsx(SecondaryActions, { isDisabled: disabledAction, actions: collapsedActions, size: size }) }))] }) }));
+    return (_jsx(Wrapper, { className: className, ref: ref, children: _jsxs(ActionWrapper, { "$spacing": spacing, children: [_jsx(Tooltip, { title: tooltipTitle, enterDelay: 400, enterNextDelay: 400, placement: "bottom-end", children: _jsx(FocusModeButton, { className: buttonClassnames, variant: "outlined", onClick: handleClick, "aria-label": tooltipTitle, color: "grey", children: isFocusedMode ? _jsx(MinimizeOutlineMd, {}) : _jsx(FullSizeOutlineMd, {}) }) }), _jsx(MainActionsWrapper, { "$spacing": spacing, className: classnames, children: _jsx(MainActions, { isDisabled: disabledAction, actions: main, size: size, spacing: spacing }) }), (secondaryVisible || secondary) && (_jsxs(SecondaryVisibleWrapper, { "$spacing": spacing, className: classnames, children: [secondaryVisible && (_jsx(SecondaryVisibleActions, { actions: secondaryVisible, size: size })), secondary && (_jsx(SecondaryActions, { isDisabled: disabledAction, actions: secondary, size: size }))] })), collapsedActions.length > 0 && (_jsx(CollapsedActionsWrapper, { className: classnames, children: _jsx(SecondaryActions, { isDisabled: disabledAction, actions: collapsedActions, size: size }) }))] }) }));
 };
 export const PageActions = forwardRefWithGeneric(PageActionsInner);

package/components/PageHeader/constants.d.ts

@@ -3,5 +3,7 @@ export declare const pageHeaderClassnames: {
     pageHeaderActions: string;
     hasBackButton: string;
     hasTitle: string;
+    filters: string;
+    quickFilters: string;
 };
 export declare const PAGE_HEADER_HEIGHT_MOBILE = "48px";

package/components/PageHeader/constants.js

@@ -4,5 +4,7 @@ export const pageHeaderClassnames = {
     pageHeaderActions: createUIKitClassname('page-header__actions'),
     hasBackButton: createUIKitClassname('page-header_has-back-button'),
     hasTitle: createUIKitClassname('page-header_has-title'),
+    filters: createUIKitClassname('page-header__filters'),
+    quickFilters: createUIKitClassname('page-header__quick-filters'),
 };
 export const PAGE_HEADER_HEIGHT_MOBILE = '48px';

package/components/PageHeader/index.d.ts

@@ -2,3 +2,4 @@ export { pageHeaderClassnames } from './constants';
 export { PageActionSkeleton, PageActions, type PageActionsProps, } from './PageActions';
 export * from './PageHeader';
 export * from './types';
+export { FormFiltersLayoutContext } from './HeaderContent';

package/components/PageHeader/index.js

@@ -2,3 +2,4 @@ export { pageHeaderClassnames } from './constants';
 export { PageActionSkeleton, PageActions, } from './PageActions';
 export * from './PageHeader';
 export * from './types';
+export { FormFiltersLayoutContext } from './HeaderContent';

package/components/PageHeader/styles.js

@@ -22,6 +22,31 @@ export const Wrapper = styled.header `
 
     background-color: ${({ theme }) => theme.palette.background.default};
   }
+
+  .${pageHeaderClassnames.filters} {
+    grid-column: 1 / -1;
+    grid-row: 4;
+
+    ${({ theme }) => theme.breakpoints.down('laptop')} {
+      grid-column: 3;
+      grid-row: 1 / -1;
+    }
+  }
+
+  .${pageHeaderClassnames.quickFilters} {
+    grid-column: 1 / -1;
+    grid-row: 5;
+
+    margin-top: ${({ theme }) => theme.spacing(4)};
+
+    ${({ theme }) => theme.breakpoints.down('laptop')} {
+      margin-top: ${({ theme }) => theme.spacing(3)};
+    }
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      display: none;
+    }
+  }
 `;
 export const MobileTitleWrapper = styled.div `
   display: none;

package/components/TagBadge/styles.js

@@ -11,6 +11,7 @@ const getBadgeBgColor = ({ color, theme, variant, }) => {
         warning: theme.palette.warning[800],
         error: theme.palette.error[800],
         white: theme.palette.grey[300],
+        transparent: 'transparent',
     };
     return bgColor[color];
 };
@@ -24,7 +25,7 @@ const getBadgeColor = ({ color, theme, variant, isChecked, isDisabled, }) => {
     if (color === 'white') {
         return theme.palette.grey[900];
     }
-    if (color === 'grey') {
+    if (color === 'grey' || color === 'transparent') {
         return variant === 'text'
             ? theme.palette.primary.contrastText
             : theme.palette.grey[900];

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

@@ -17,6 +17,7 @@ export declare const StyledCounter: import("../../../components/styled").StyledC
     color: import("../../../components/Counter/types").CounterColor;
     variant?: import("../../../components/Counter/types").CounterVariants | undefined;
     content?: number | undefined;
+    withBorder?: boolean | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

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

@@ -5,4 +5,5 @@ export type AllFiltersButtonProps<TFieldValues extends Record<string, unknown>>
     hasMainFilters: boolean;
     hasSecondaryFilters: boolean;
     hasSearch: boolean;
+    hasQuickFilters: boolean;
 };

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

@@ -1,5 +1,5 @@
 import { type AllFiltersButtonProps } from '../types';
-export declare const useLogic: <TFieldValues extends Record<string, unknown>>({ form, onOpenModal, hasMainFilters, hasSecondaryFilters, hasSearch, }: AllFiltersButtonProps<TFieldValues>) => {
+export declare const useLogic: <TFieldValues extends Record<string, unknown>>({ form, onOpenModal, hasMainFilters, hasSecondaryFilters, hasSearch, hasQuickFilters, }: AllFiltersButtonProps<TFieldValues>) => {
     allFiltersButtonClassName: string;
     counter: number;
     onOpenModal: () => void;

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

@@ -1,22 +1,38 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useWatch } from 'react-hook-form';
+import { useViewportType } from '../../../../components/useViewportType';
 import { classNames } from '../../../../components/utils/classNames';
 import { FORM_FILTERS_SEARCH_FIELD_ID } from '../../../FormFiltersSearchField/constants';
+import { FORM_FILTERS_QUICK_FILTERS_ID } from '../../../FormQuickFilters/constants';
 import { formFiltersClassnames } from '../../constants';
-export const useLogic = ({ form, onOpenModal, hasMainFilters, hasSecondaryFilters, hasSearch, }) => {
+import { checkIsFilledValue, getFilledCount } from '../../utils';
+export const useLogic = ({ form, onOpenModal, hasMainFilters, hasSecondaryFilters, hasSearch, hasQuickFilters, }) => {
+    const { isMobile } = useViewportType();
     const formValues = useWatch({
         control: form.control,
     });
     const [searchName, setSearchName] = useState('');
+    const [quickFiltersName, setQuickFiltersName] = useState('');
     useEffect(() => {
         const searchFieldName = document
             .getElementById(FORM_FILTERS_SEARCH_FIELD_ID)
             ?.getAttribute('name') || '';
         setSearchName(searchFieldName);
     }, [hasSearch]);
-    // Исключаем поиск из счетчика фильтров
-    const counter = Object.values(formValues || {}).filter(Boolean).length -
-        (formValues?.[searchName] ? 1 : 0);
+    useEffect(() => {
+        const quickFiltersFieldName = document
+            .getElementById(FORM_FILTERS_QUICK_FILTERS_ID)
+            ?.getAttribute('name') || '';
+        setQuickFiltersName(quickFiltersFieldName);
+    }, [hasQuickFilters]);
+    const getCounter = () => {
+        const filledValuesCount = getFilledCount(formValues);
+        // Исключаем поиск и quickFilters из счётчика — они видны на странице
+        // quickFilters учитывается только на мобильных устройствах
+        const searchValue = formValues?.[searchName];
+        const quickFiltersValue = !isMobile && checkIsFilledValue(formValues?.[quickFiltersName]);
+        return (filledValuesCount - (searchValue ? 1 : 0) - (quickFiltersValue ? 1 : 0));
+    };
     const allFiltersButtonClassName = useMemo(() => {
         return classNames({
             [formFiltersClassnames.showAllFiltersButtonOnDesktop]: hasSecondaryFilters,
@@ -28,7 +44,7 @@ export const useLogic = ({ form, onOpenModal, hasMainFilters, hasSecondaryFilter
     }, [hasMainFilters, hasSecondaryFilters, hasSearch]);
     return {
         allFiltersButtonClassName,
-        counter,
+        counter: getCounter(),
         onOpenModal,
     };
 };