@astral/ui 4.107.0 → 4.109.0

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

@@ -366,6 +366,7 @@ export declare const useLogic: <TOptions, TMultiple extends boolean, TDisableCle
         openOnFocus?: boolean | undefined;
         selectOnFocus?: boolean | undefined;
         loadedDataError?: string | undefined;
+        focusedHelperText?: string | undefined;
         overflowOption?: import("../..").OverflowedElementProps | undefined;
         options: TOptions[];
         disabled: boolean | undefined;

package/components/Autocomplete/Autocomplete.d.ts

@@ -18,4 +18,5 @@ export declare const Autocomplete: <TAutocompleteValueProps, TMultiple extends b
     openText?: string | undefined;
     clearText?: string | undefined;
     hideHelperText?: boolean | undefined;
+    focusedHelperText?: string | undefined;
 } & import("react").RefAttributes<unknown>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

package/components/Autocomplete/Autocomplete.js

@@ -10,14 +10,16 @@ import { Loader } from '../Loader';
 import { OverflowTypography } from '../OverflowTypography';
 import { TagsList } from '../TagsList';
 import { TextField } from '../TextField';
+import { Typography } from '../Typography';
 import { cn } from '../utils/cn';
 import { DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT, DEFAULT_PLACEHOLDER, INPUT_MIN_WIDTH, } from './constants';
-import { StyledAutocomplete, StyledMenuItem } from './styles';
+import { StyledAutocomplete, StyledFocusedHelperOption, StyledMenuItem, } from './styles';
 import { useLogic } from './useLogic';
+import { checkIsFocusedHelperOption } from './utils';
 const AutocompleteInner = (props, ref) => {
     const { isValueEmpty, isPopperVisible, autocompleteProps } = useLogic(props);
     const inputBaseRef = useRef(null);
-    const { required, success, error, label, getOptionLabel, helperText, inputRef, multiple, size = 'medium', placeholder = DEFAULT_PLACEHOLDER, overflowOption, closeText = 'Закрыть', openText = 'Открыть', clearText = 'Очистить', loadingText = _jsx(Loader, {}), isLoadedDataError, loadedDataError, noOptionsText, autoHighlight, renderInput: externalRenderInput, renderTags: externalRenderTags, renderOption: externalRenderOption, inputProps, hideHelperText = false, loading, value, onChange, ...restProps } = props;
+    const { required, success, error, label, getOptionLabel, helperText, inputRef, multiple, size = 'medium', placeholder = DEFAULT_PLACEHOLDER, overflowOption, closeText = 'Закрыть', openText = 'Открыть', clearText = 'Очистить', loadingText = _jsx(Loader, {}), isLoadedDataError, loadedDataError, noOptionsText, autoHighlight, renderInput: externalRenderInput, renderTags: externalRenderTags, renderOption: externalRenderOption, inputProps, hideHelperText = false, focusedHelperText, loading, value, onChange, ...restProps } = props;
     const renderInput = useCallback((inputParams) => {
         const createStartAdornment = () => {
             if (!multiple || !Array.isArray(value)) {
@@ -93,13 +95,16 @@ const AutocompleteInner = (props, ref) => {
         onChange,
     ]);
     const renderOption = useCallback((optionProps, option, optionState, ownerState) => {
+        const { key, ...restOptionProps } = optionProps;
+        if (checkIsFocusedHelperOption(option)) {
+            return (_jsx(StyledFocusedHelperOption, { role: "presentation", ...restOptionProps, children: _jsx(Typography, { variant: "body1", color: "grey", colorIntensity: "600", children: focusedHelperText }) }, key));
+        }
         if (externalRenderOption) {
             return externalRenderOption(optionProps, option, optionState, ownerState);
         }
         const isSelected = Boolean(optionProps['aria-selected']);
-        const { key, ...restOptionProps } = optionProps;
         return (_jsxs(StyledMenuItem, { selected: isSelected, ...restOptionProps, children: [multiple && (_jsx(ListItemIcon, { children: _jsx(Checkbox, { role: "menuitemcheckbox", checked: isSelected }) })), _jsx(OverflowTypography, { rowsCount: DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT, ...overflowOption, children: optionProps.key })] }, key));
-    }, [multiple, overflowOption, externalRenderOption]);
+    }, [focusedHelperText, multiple, overflowOption, externalRenderOption]);
     const renderPopper = useCallback((popperProps) => {
         if (!isPopperVisible) {
             return null;
@@ -116,6 +121,6 @@ const AutocompleteInner = (props, ref) => {
             popper: {
                 component: renderPopper,
             },
-        }, getOptionLabel: getOptionLabel, renderInput: renderInput, renderTags: renderTags, renderOption: renderOption, value: value, onChange: onChange, ...autocompleteProps }));
+        }, renderInput: renderInput, renderTags: renderTags, renderOption: renderOption, value: value, ...autocompleteProps }));
 };
 export const Autocomplete = forwardRefWithGeneric(AutocompleteInner);

package/components/Autocomplete/constants.d.ts

@@ -1,6 +1,7 @@
 export declare const DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;
 export declare const INPUT_MIN_WIDTH = 110;
 export declare const DEFAULT_PLACEHOLDER = "\u041D\u0430\u0447\u043D\u0438\u0442\u0435 \u0432\u0432\u043E\u0434\u0438\u0442\u044C \u0434\u043B\u044F \u043F\u043E\u0438\u0441\u043A\u0430";
+export declare const FOCUSED_HELPER_OPTION: unique symbol;
 export declare const autocompleteClassnames: {
     root: string;
     multiple: string;

package/components/Autocomplete/constants.js

@@ -2,6 +2,7 @@ import { createUIKitClassname } from '../utils/createUIKitClassname';
 export const DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;
 export const INPUT_MIN_WIDTH = 110;
 export const DEFAULT_PLACEHOLDER = 'Начните вводить для поиска';
+export const FOCUSED_HELPER_OPTION = Symbol('focusedHelperOption');
 export const autocompleteClassnames = {
     root: createUIKitClassname('autocomplete'),
     multiple: createUIKitClassname('autocomplete_multiple'),

package/components/Autocomplete/styles.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 import MuiAutocomplete from '@mui/material/Autocomplete';
+export declare const StyledFocusedHelperOption: 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").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
 export declare const StyledMenuItem: import("../styled").StyledComponent<import("..").WithoutEmotionSpecific<Omit<import("@mui/material").MenuItemProps, "component">> & {
     disabledReason?: string | undefined;
     note?: string | undefined;

package/components/Autocomplete/styles.js

@@ -7,6 +7,15 @@ import { MenuItem } from '../MenuItem';
 import { svgIconClassnames } from '../SvgIcon';
 import { styled } from '../styled';
 import { autocompleteClassnames, INPUT_MIN_WIDTH } from './constants';
+export const StyledFocusedHelperOption = styled.li `
+  &&.${autocompleteClasses.option} {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 48px;
+    opacity: 1;
+  }
+`;
 export const StyledMenuItem = styled(MenuItem) `
     max-height: ${({ theme }) => theme.spacing(13)};
 

package/components/Autocomplete/types.d.ts

@@ -48,4 +48,8 @@ export type AutocompleteProps<TAutocompleteValueProps, TMultiple extends boolean
      * Включает/отключает резервирование места под helperText
      */
     hideHelperText?: boolean;
+    /**
+     * Текст подсказки в popover при фокусе
+     */
+    focusedHelperText?: string;
 };

package/components/Autocomplete/useLogic/useLogic.d.ts

@@ -1,16 +1,23 @@
-import { type AutocompleteInputChangeReason } from '@mui/material/Autocomplete';
+import { type AutocompleteChangeDetails, type AutocompleteChangeReason, type AutocompleteFreeSoloValueMapping, type AutocompleteInputChangeReason, type AutocompleteValue } from '@mui/material';
 import { type SyntheticEvent } from 'react';
 import { type AutocompleteProps } from '../types';
 type UseLogicParams<TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean> = AutocompleteProps<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo>;
-export declare const useLogic: <TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean>({ value, isOptionEqualToValue: externalOptionEqualToValue, autoHighlight, freeSolo, options, multiple, className, loading, isLoadedDataError, loadedDataError, noOptionsText, onInputChange, }: UseLogicParams<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo>) => {
+export declare const useLogic: <TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean>({ value, inputValue, getOptionLabel: externalGetOptionLabel, isOptionEqualToValue: externalOptionEqualToValue, getOptionDisabled: externalGetOptionDisabled, filterOptions: externalFilterOptions, groupBy: externalGroupBy, openOnFocus, autoHighlight, freeSolo, options, multiple, className, loading, isLoadedDataError, loadedDataError, noOptionsText, focusedHelperText, onInputChange, onChange, }: UseLogicParams<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo>) => {
     isValueEmpty: boolean;
-    isPopperVisible: boolean | undefined;
+    isPopperVisible: boolean;
     autocompleteProps: {
         className: string;
         isOptionEqualToValue: (option: TAutocompleteValueProps, currentValue: TAutocompleteValueProps) => boolean;
+        getOptionDisabled: (option: TAutocompleteValueProps) => boolean;
         autoHighlight: boolean;
-        noOptionsText: string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null;
+        noOptionsText: string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null | undefined;
+        options: readonly TAutocompleteValueProps[];
+        getOptionLabel: (option: TAutocompleteValueProps | AutocompleteFreeSoloValueMapping<TFreeSolo>) => string;
+        filterOptions: ((options: TAutocompleteValueProps[], state: import("@mui/material").FilterOptionsState<TAutocompleteValueProps>) => TAutocompleteValueProps[]) | undefined;
+        groupBy: ((option: TAutocompleteValueProps) => string) | undefined;
+        onChange: (event: SyntheticEvent, newValue: AutocompleteValue<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo>, reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<TAutocompleteValueProps> | undefined) => void;
         onInputChange: (event: SyntheticEvent, currentValue: string, reason: AutocompleteInputChangeReason) => void;
+        openOnFocus: boolean;
     };
 };
 export {};

package/components/Autocomplete/useLogic/useLogic.js

@@ -1,22 +1,81 @@
 import { useCallback, useMemo, useState } from 'react';
 import { cn } from '../../utils/cn';
-import { autocompleteClassnames } from '../constants';
-import { checkIsInputEmpty } from './utils';
-export const useLogic = ({ value, isOptionEqualToValue: externalOptionEqualToValue, autoHighlight = true, freeSolo, options, multiple, className, loading, isLoadedDataError, loadedDataError = 'Ошибка загрузки данных', noOptionsText = 'Нет данных', onInputChange, }) => {
+import { autocompleteClassnames, FOCUSED_HELPER_OPTION } from '../constants';
+import { checkIsFocusedHelperOption } from '../utils';
+import { checkIsFocusedHelperChange, checkIsInputEmpty, checkIsPopperVisible, } from './utils';
+export const useLogic = ({ value, inputValue, getOptionLabel: externalGetOptionLabel, isOptionEqualToValue: externalOptionEqualToValue, getOptionDisabled: externalGetOptionDisabled, filterOptions: externalFilterOptions, groupBy: externalGroupBy, openOnFocus, autoHighlight = true, freeSolo, options, multiple, className, loading, isLoadedDataError, loadedDataError = 'Ошибка загрузки данных', noOptionsText = 'Нет данных', focusedHelperText, onInputChange, onChange, }) => {
     const [innerInputValue, setInnerInputValue] = useState('');
     const isValueEmpty = checkIsInputEmpty(value);
-    const isInnerInputValueNotEmpty = innerInputValue.length >= 1;
-    const isOptionsAvailable = options.length > 0;
-    const isPopperVisible = (loading && isOptionsAvailable) ||
-        (!loading && !isOptionsAvailable && isInnerInputValueNotEmpty) ||
-        isOptionsAvailable ||
-        isLoadedDataError;
+    const isInputTextEmpty = (inputValue ?? '').length === 0 && innerInputValue.length === 0;
+    const hasOptions = options.length > 0;
+    const hasFocusedHelperText = Boolean(focusedHelperText);
+    const shouldShowFocusedHelper = hasFocusedHelperText &&
+        isInputTextEmpty &&
+        !hasOptions &&
+        !loading &&
+        !isLoadedDataError;
+    const isPopperVisible = checkIsPopperVisible({
+        loading,
+        hasOptions,
+        isInputValueNotEmpty: !isInputTextEmpty,
+        isLoadedDataError,
+        shouldShowFocusedHelper,
+    });
+    const hasFocusedHelperOption = shouldShowFocusedHelper && Boolean(freeSolo);
+    const resolvedNoOptionsText = useMemo(() => {
+        if (isLoadedDataError) {
+            return loadedDataError;
+        }
+        if (shouldShowFocusedHelper) {
+            return focusedHelperText;
+        }
+        return noOptionsText;
+    }, [
+        isLoadedDataError,
+        loadedDataError,
+        shouldShowFocusedHelper,
+        focusedHelperText,
+        noOptionsText,
+    ]);
+    const autocompleteOptions = useMemo(() => {
+        if (hasFocusedHelperOption) {
+            return [FOCUSED_HELPER_OPTION];
+        }
+        return options;
+    }, [hasFocusedHelperOption, options]);
+    const resolveGetOptionLabel = useCallback((option) => {
+        if (checkIsFocusedHelperOption(option)) {
+            return focusedHelperText ?? '';
+        }
+        if (externalGetOptionLabel) {
+            return externalGetOptionLabel(option);
+        }
+        const optionWithLabel = option;
+        return optionWithLabel.label ?? String(option);
+    }, [externalGetOptionLabel, focusedHelperText]);
+    const handleChange = useCallback((event, newValue, reason, details) => {
+        if (checkIsFocusedHelperChange(newValue, details?.option)) {
+            return;
+        }
+        onChange?.(event, newValue, reason, details);
+    }, [onChange]);
     const isOptionEqualToValue = useCallback((option, currentValue) => {
+        if (checkIsFocusedHelperOption(option) ||
+            checkIsFocusedHelperOption(currentValue)) {
+            return false;
+        }
         if (externalOptionEqualToValue) {
             return externalOptionEqualToValue(option, currentValue);
         }
         return JSON.stringify(option) === JSON.stringify(currentValue);
     }, [externalOptionEqualToValue]);
+    const resolveGetOptionDisabled = useCallback((option) => {
+        if (checkIsFocusedHelperOption(option)) {
+            return true;
+        }
+        return externalGetOptionDisabled?.(option) ?? false;
+    }, [externalGetOptionDisabled]);
+    const resolvedOpenOnFocus = hasFocusedHelperText || Boolean(openOnFocus);
     const handleInputChange = (event, currentValue, reason) => {
         onInputChange?.(event, currentValue, reason);
         if (!loading) {
@@ -28,16 +87,23 @@ export const useLogic = ({ value, isOptionEqualToValue: externalOptionEqualToVal
             [autocompleteClassnames.multiple]: multiple,
             [autocompleteClassnames.emptyValue]: isValueEmpty,
         });
-    }, [multiple, isValueEmpty]);
+    }, [className, multiple, isValueEmpty]);
     return {
         isValueEmpty,
         isPopperVisible,
         autocompleteProps: {
             className: classnames,
             isOptionEqualToValue,
+            getOptionDisabled: resolveGetOptionDisabled,
             autoHighlight: freeSolo ? false : autoHighlight,
-            noOptionsText: isLoadedDataError ? loadedDataError : noOptionsText,
+            noOptionsText: resolvedNoOptionsText,
+            options: autocompleteOptions,
+            getOptionLabel: resolveGetOptionLabel,
+            filterOptions: hasFocusedHelperOption ? undefined : externalFilterOptions,
+            groupBy: hasFocusedHelperOption ? undefined : externalGroupBy,
+            onChange: handleChange,
             onInputChange: handleInputChange,
+            openOnFocus: resolvedOpenOnFocus,
         },
     };
 };

package/components/Autocomplete/useLogic/utils/checkIsFocusedHelperChange/checkIsFocusedHelperChange.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Проверяет, является ли значение при onChange focusedHelper-опцией (freeSolo)
+ */
+export declare const checkIsFocusedHelperChange: (newValue: unknown, changedOption?: unknown) => boolean;

package/components/Autocomplete/useLogic/utils/checkIsFocusedHelperChange/checkIsFocusedHelperChange.js

@@ -0,0 +1,17 @@
+import { checkIsFocusedHelperOption } from '../../../utils';
+/**
+ * Проверяет, является ли значение при onChange focusedHelper-опцией (freeSolo)
+ */
+export const checkIsFocusedHelperChange = (newValue, changedOption) => {
+    if (checkIsFocusedHelperOption(changedOption)) {
+        return true;
+    }
+    if (checkIsFocusedHelperOption(newValue)) {
+        return true;
+    }
+    if (Array.isArray(newValue) &&
+        newValue.some((item) => checkIsFocusedHelperOption(item))) {
+        return true;
+    }
+    return false;
+};

package/components/Autocomplete/useLogic/utils/checkIsFocusedHelperChange/index.d.ts

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

package/components/Autocomplete/useLogic/utils/checkIsFocusedHelperChange/index.js

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

package/components/Autocomplete/useLogic/utils/checkIsPopperVisible/checkIsPopperVisible.d.ts

@@ -0,0 +1,8 @@
+export type CheckIsPopperVisibleParams = {
+    loading?: boolean;
+    hasOptions: boolean;
+    isInputValueNotEmpty: boolean;
+    isLoadedDataError?: boolean;
+    shouldShowFocusedHelper: boolean;
+};
+export declare const checkIsPopperVisible: ({ loading, hasOptions, isInputValueNotEmpty, isLoadedDataError, shouldShowFocusedHelper, }: CheckIsPopperVisibleParams) => boolean;

package/components/Autocomplete/useLogic/utils/checkIsPopperVisible/checkIsPopperVisible.js

@@ -0,0 +1,6 @@
+export const checkIsPopperVisible = ({ loading = false, hasOptions, isInputValueNotEmpty, isLoadedDataError = false, shouldShowFocusedHelper, }) => {
+    if (shouldShowFocusedHelper || hasOptions || isLoadedDataError) {
+        return true;
+    }
+    return !loading && isInputValueNotEmpty;
+};

package/components/Autocomplete/useLogic/utils/checkIsPopperVisible/index.d.ts

@@ -0,0 +1 @@
+export { checkIsPopperVisible, type CheckIsPopperVisibleParams, } from './checkIsPopperVisible';

package/components/Autocomplete/useLogic/utils/checkIsPopperVisible/index.js

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

package/components/Autocomplete/useLogic/utils/index.d.ts

@@ -1 +1,3 @@
 export * from './checkIsInputEmpty';
+export * from './checkIsPopperVisible';
+export * from './checkIsFocusedHelperChange';

package/components/Autocomplete/useLogic/utils/index.js

@@ -1 +1,3 @@
 export * from './checkIsInputEmpty';
+export * from './checkIsPopperVisible';
+export * from './checkIsFocusedHelperChange';

package/components/Autocomplete/utils/checkIsFocusedHelperOption/checkIsFocusedHelperOption.d.ts

@@ -0,0 +1,5 @@
+import { FOCUSED_HELPER_OPTION } from '../../constants';
+/**
+ * Определяет, является ли опция специальной опцией для отображения focusedHelperText при freeSolo=true
+ */
+export declare const checkIsFocusedHelperOption: (option: unknown) => option is typeof FOCUSED_HELPER_OPTION;

package/components/Autocomplete/utils/checkIsFocusedHelperOption/checkIsFocusedHelperOption.js

@@ -0,0 +1,7 @@
+import { FOCUSED_HELPER_OPTION } from '../../constants';
+/**
+ * Определяет, является ли опция специальной опцией для отображения focusedHelperText при freeSolo=true
+ */
+export const checkIsFocusedHelperOption = (option) => {
+    return option === FOCUSED_HELPER_OPTION;
+};

package/components/Autocomplete/utils/checkIsFocusedHelperOption/index.d.ts

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

package/components/Autocomplete/utils/checkIsFocusedHelperOption/index.js

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

package/components/Autocomplete/utils/index.d.ts

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

package/components/Autocomplete/utils/index.js

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

package/components/DonutChart/DonutChart.d.ts

@@ -1,2 +1,2 @@
 import type { DonutChartProps } from './types';
-export declare const DonutChart: ({ value, maxValue, children, color, colorIntensity, className, style, }: DonutChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DonutChart: ({ value, maxValue, children, color, colorIntensity, trackColorIntensity, className, style, }: DonutChartProps) => import("react/jsx-runtime").JSX.Element;

package/components/DonutChart/DonutChart.js

@@ -3,7 +3,7 @@ import { cn } from '../utils/cn';
 import { donutChartClassnames } from './constants';
 import { Content, ProgressArc, Svg, TrackArc, Wrapper } from './styles';
 import { useLogic } from './useLogic';
-export const DonutChart = ({ value, maxValue, children, color = 'primary', colorIntensity = '700', className, style, }) => {
-    const { rootRef, svgViewBox, arcCx, arcCy, donutParams, meterAriaValue } = useLogic({ value, maxValue, color, colorIntensity });
+export const DonutChart = ({ value, maxValue, children, color = 'primary', colorIntensity = '700', trackColorIntensity = '100', className, style, }) => {
+    const { rootRef, svgViewBox, arcCx, arcCy, donutParams, meterAriaValue } = useLogic({ value, maxValue, color, colorIntensity, trackColorIntensity });
     return (_jsxs(Wrapper, { ref: rootRef, className: cn(donutChartClassnames.root, className), role: "meter", "aria-label": meterAriaValue.label, "aria-valuemin": meterAriaValue.min, "aria-valuemax": meterAriaValue.max, "aria-valuenow": meterAriaValue.now, style: { ...donutParams?.cssVars, ...style }, children: [donutParams && (_jsxs(Svg, { className: donutChartClassnames.svg, viewBox: svgViewBox, "aria-hidden": true, children: [_jsx(TrackArc, { className: donutChartClassnames.track, cx: arcCx, cy: arcCy, r: donutParams.arcR }), _jsx(ProgressArc, { className: donutChartClassnames.progress, d: donutParams.arcPath, pathLength: 1, strokeDasharray: 1, strokeDashoffset: donutParams.progressOffset })] })), children && (_jsx(Content, { className: donutChartClassnames.content, children: children }))] }));
 };

package/components/DonutChart/styles.js

@@ -16,7 +16,7 @@ export const Svg = styled.svg `
 `;
 export const TrackArc = styled.circle `
   fill: none;
-  stroke: ${({ theme }) => theme.palette.grey[100]};
+  stroke: var(--donut-chart-track-color);
   stroke-linecap: round;
   stroke-width: var(--donut-chart-stroke-width);
 `;

package/components/DonutChart/types.d.ts

@@ -16,6 +16,11 @@ export type DonutChartProps = {
      * Интенсивность цвета.
      */
     colorIntensity?: DonutChartColorIntensity;
+    /**
+     * Интенсивность цвета для фонового кольца.
+     * @default '100'
+     */
+    trackColorIntensity?: DonutChartColorIntensity;
     /**
      * CSS-класс для корневого элемента.
      */

package/components/DonutChart/useLogic/useLogic.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { DonutChartProps } from '../types';
-export declare const useLogic: ({ value, maxValue, color, colorIntensity, }: DonutChartProps) => {
+export declare const useLogic: ({ value, maxValue, color, colorIntensity, trackColorIntensity, }: DonutChartProps) => {
     rootRef: import("react").RefObject<HTMLDivElement | null>;
     svgViewBox: "0 0 100 100";
     arcCx: number;

package/components/DonutChart/useLogic/useLogic.js

@@ -8,7 +8,7 @@ import { getMeterAriaValue } from './utils/getMeterAriaValue';
 import { getProgressCirclePath } from './utils/getProgressCirclePath';
 import { getProgressOffset } from './utils/getProgressOffset';
 import { getProgressPercent } from './utils/getProgressPercent';
-export const useLogic = ({ value, maxValue, color = 'primary', colorIntensity = '700', }) => {
+export const useLogic = ({ value, maxValue, color = 'primary', colorIntensity = '700', trackColorIntensity = '100', }) => {
     const theme = useTheme();
     const { rootRef, renderWidth } = useRenderWidth();
     const progressPercent = getProgressPercent(value, maxValue);
@@ -25,10 +25,18 @@ export const useLogic = ({ value, maxValue, color = 'primary', colorIntensity =
             cssVars: getDonutChartCssVars(theme, {
                 color,
                 colorIntensity,
+                trackColorIntensity,
                 strokeWidth: stroke,
             }),
         };
-    }, [renderWidth, progressPercent, color, colorIntensity, theme]);
+    }, [
+        renderWidth,
+        progressPercent,
+        color,
+        colorIntensity,
+        trackColorIntensity,
+        theme,
+    ]);
     return {
         rootRef,
         svgViewBox: DONUT_CHART_SVG_VIEWBOX,

package/components/DonutChart/useLogic/utils/getDonutChartCssVars/getDonutChartCssVars.d.ts

@@ -4,13 +4,14 @@ import type { DonutChartColor, DonutChartColorIntensity } from '../../../types';
 type GetDonutChartCssVarsParams = {
     color: DonutChartColor;
     colorIntensity: DonutChartColorIntensity;
+    trackColorIntensity: DonutChartColorIntensity;
     strokeWidth: number;
 };
 /**
  * Генерирует CSS переменные для стилизации DonutChart по теме и цвету.
  * @param theme - Объект темы с палитрой цветов
- * @param params - Параметры цвета, интенсивности и ширины stroke
+ * @param params - Параметры цвета, интенсивности дуги и трека, ширины stroke
  * @returns CSS свойства для диаграммы
  */
-export declare const getDonutChartCssVars: (theme: Theme, { color, colorIntensity, strokeWidth }: GetDonutChartCssVarsParams) => CSSProperties;
+export declare const getDonutChartCssVars: (theme: Theme, { color, colorIntensity, trackColorIntensity, strokeWidth, }: GetDonutChartCssVarsParams) => CSSProperties;
 export {};

package/components/DonutChart/useLogic/utils/getDonutChartCssVars/getDonutChartCssVars.js

@@ -1,10 +1,11 @@
 /**
  * Генерирует CSS переменные для стилизации DonutChart по теме и цвету.
  * @param theme - Объект темы с палитрой цветов
- * @param params - Параметры цвета, интенсивности и ширины stroke
+ * @param params - Параметры цвета, интенсивности дуги и трека, ширины stroke
  * @returns CSS свойства для диаграммы
  */
-export const getDonutChartCssVars = (theme, { color, colorIntensity, strokeWidth }) => ({
+export const getDonutChartCssVars = (theme, { color, colorIntensity, trackColorIntensity, strokeWidth, }) => ({
     '--donut-chart-stroke-width': String(strokeWidth),
     '--donut-chart-progress-color': theme.palette[color][colorIntensity],
+    '--donut-chart-track-color': theme.palette.grey[trackColorIntensity],
 });

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

@@ -366,6 +366,7 @@ export declare const useLogic: <TOptions, TMultiple extends boolean, TDisableCle
         openOnFocus?: boolean | undefined;
         selectOnFocus?: boolean | undefined;
         loadedDataError?: string | undefined;
+        focusedHelperText?: string | undefined;
         overflowOption?: import("../..").OverflowedElementProps | undefined;
         options: TOptions[];
         disabled: boolean | undefined;

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

@@ -18,4 +18,5 @@ export declare const Autocomplete: <TAutocompleteValueProps, TMultiple extends b
     openText?: string | undefined;
     clearText?: string | undefined;
     hideHelperText?: boolean | undefined;
+    focusedHelperText?: string | undefined;
 } & import("react").RefAttributes<unknown>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

package/node/components/Autocomplete/Autocomplete.js

@@ -16,14 +16,16 @@ const Loader_1 = require("../Loader");
 const OverflowTypography_1 = require("../OverflowTypography");
 const TagsList_1 = require("../TagsList");
 const TextField_1 = require("../TextField");
+const Typography_1 = require("../Typography");
 const cn_1 = require("../utils/cn");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
+const utils_1 = require("./utils");
 const AutocompleteInner = (props, ref) => {
     const { isValueEmpty, isPopperVisible, autocompleteProps } = (0, useLogic_1.useLogic)(props);
     const inputBaseRef = (0, react_1.useRef)(null);
-    const { required, success, error, label, getOptionLabel, helperText, inputRef, multiple, size = 'medium', placeholder = constants_1.DEFAULT_PLACEHOLDER, overflowOption, closeText = 'Закрыть', openText = 'Открыть', clearText = 'Очистить', loadingText = (0, jsx_runtime_1.jsx)(Loader_1.Loader, {}), isLoadedDataError, loadedDataError, noOptionsText, autoHighlight, renderInput: externalRenderInput, renderTags: externalRenderTags, renderOption: externalRenderOption, inputProps, hideHelperText = false, loading, value, onChange, ...restProps } = props;
+    const { required, success, error, label, getOptionLabel, helperText, inputRef, multiple, size = 'medium', placeholder = constants_1.DEFAULT_PLACEHOLDER, overflowOption, closeText = 'Закрыть', openText = 'Открыть', clearText = 'Очистить', loadingText = (0, jsx_runtime_1.jsx)(Loader_1.Loader, {}), isLoadedDataError, loadedDataError, noOptionsText, autoHighlight, renderInput: externalRenderInput, renderTags: externalRenderTags, renderOption: externalRenderOption, inputProps, hideHelperText = false, focusedHelperText, loading, value, onChange, ...restProps } = props;
     const renderInput = (0, react_1.useCallback)((inputParams) => {
         const createStartAdornment = () => {
             if (!multiple || !Array.isArray(value)) {
@@ -99,13 +101,16 @@ const AutocompleteInner = (props, ref) => {
         onChange,
     ]);
     const renderOption = (0, react_1.useCallback)((optionProps, option, optionState, ownerState) => {
+        const { key, ...restOptionProps } = optionProps;
+        if ((0, utils_1.checkIsFocusedHelperOption)(option)) {
+            return ((0, jsx_runtime_1.jsx)(styles_1.StyledFocusedHelperOption, { role: "presentation", ...restOptionProps, children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "body1", color: "grey", colorIntensity: "600", children: focusedHelperText }) }, key));
+        }
         if (externalRenderOption) {
             return externalRenderOption(optionProps, option, optionState, ownerState);
         }
         const isSelected = Boolean(optionProps['aria-selected']);
-        const { key, ...restOptionProps } = optionProps;
         return ((0, jsx_runtime_1.jsxs)(styles_1.StyledMenuItem, { selected: isSelected, ...restOptionProps, children: [multiple && ((0, jsx_runtime_1.jsx)(ListItemIcon_1.default, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { role: "menuitemcheckbox", checked: isSelected }) })), (0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { rowsCount: constants_1.DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT, ...overflowOption, children: optionProps.key })] }, key));
-    }, [multiple, overflowOption, externalRenderOption]);
+    }, [focusedHelperText, multiple, overflowOption, externalRenderOption]);
     const renderPopper = (0, react_1.useCallback)((popperProps) => {
         if (!isPopperVisible) {
             return null;
@@ -122,6 +127,6 @@ const AutocompleteInner = (props, ref) => {
             popper: {
                 component: renderPopper,
             },
-        }, getOptionLabel: getOptionLabel, renderInput: renderInput, renderTags: renderTags, renderOption: renderOption, value: value, onChange: onChange, ...autocompleteProps }));
+        }, renderInput: renderInput, renderTags: renderTags, renderOption: renderOption, value: value, ...autocompleteProps }));
 };
 exports.Autocomplete = (0, forwardRefWithGeneric_1.forwardRefWithGeneric)(AutocompleteInner);

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

@@ -1,6 +1,7 @@
 export declare const DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;
 export declare const INPUT_MIN_WIDTH = 110;
 export declare const DEFAULT_PLACEHOLDER = "\u041D\u0430\u0447\u043D\u0438\u0442\u0435 \u0432\u0432\u043E\u0434\u0438\u0442\u044C \u0434\u043B\u044F \u043F\u043E\u0438\u0441\u043A\u0430";
+export declare const FOCUSED_HELPER_OPTION: unique symbol;
 export declare const autocompleteClassnames: {
     root: string;
     multiple: string;

package/node/components/Autocomplete/constants.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.autocompleteClassnames = exports.DEFAULT_PLACEHOLDER = exports.INPUT_MIN_WIDTH = exports.DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = void 0;
+exports.autocompleteClassnames = exports.FOCUSED_HELPER_OPTION = exports.DEFAULT_PLACEHOLDER = exports.INPUT_MIN_WIDTH = exports.DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;
 exports.INPUT_MIN_WIDTH = 110;
 exports.DEFAULT_PLACEHOLDER = 'Начните вводить для поиска';
+exports.FOCUSED_HELPER_OPTION = Symbol('focusedHelperOption');
 exports.autocompleteClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('autocomplete'),
     multiple: (0, createUIKitClassname_1.createUIKitClassname)('autocomplete_multiple'),

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

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 import MuiAutocomplete from '@mui/material/Autocomplete';
+export declare const StyledFocusedHelperOption: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
 export declare const StyledMenuItem: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("..").WithoutEmotionSpecific<Omit<import("@mui/material").MenuItemProps, "component">> & {
     disabledReason?: string | undefined;
     note?: string | undefined;

package/node/components/Autocomplete/styles.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledAutocomplete = exports.StyledMenuItem = void 0;
+exports.StyledAutocomplete = exports.StyledMenuItem = exports.StyledFocusedHelperOption = void 0;
 const Autocomplete_1 = __importStar(require("@mui/material/Autocomplete"));
 const FormControl_1 = require("@mui/material/FormControl");
 const IconButton_1 = require("@mui/material/IconButton");
@@ -33,6 +33,15 @@ const MenuItem_1 = require("../MenuItem");
 const SvgIcon_1 = require("../SvgIcon");
 const styled_1 = require("../styled");
 const constants_2 = require("./constants");
+exports.StyledFocusedHelperOption = styled_1.styled.li `
+  &&.${Autocomplete_1.autocompleteClasses.option} {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 48px;
+    opacity: 1;
+  }
+`;
 exports.StyledMenuItem = (0, styled_1.styled)(MenuItem_1.MenuItem) `
     max-height: ${({ theme }) => theme.spacing(13)};
 

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

@@ -48,4 +48,8 @@ export type AutocompleteProps<TAutocompleteValueProps, TMultiple extends boolean
      * Включает/отключает резервирование места под helperText
      */
     hideHelperText?: boolean;
+    /**
+     * Текст подсказки в popover при фокусе
+     */
+    focusedHelperText?: string;
 };

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

@@ -1,16 +1,23 @@
-import { type AutocompleteInputChangeReason } from '@mui/material/Autocomplete';
+import { type AutocompleteChangeDetails, type AutocompleteChangeReason, type AutocompleteFreeSoloValueMapping, type AutocompleteInputChangeReason, type AutocompleteValue } from '@mui/material';
 import { type SyntheticEvent } from 'react';
 import { type AutocompleteProps } from '../types';
 type UseLogicParams<TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean> = AutocompleteProps<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo>;
-export declare const useLogic: <TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean>({ value, isOptionEqualToValue: externalOptionEqualToValue, autoHighlight, freeSolo, options, multiple, className, loading, isLoadedDataError, loadedDataError, noOptionsText, onInputChange, }: UseLogicParams<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo>) => {
+export declare const useLogic: <TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean>({ value, inputValue, getOptionLabel: externalGetOptionLabel, isOptionEqualToValue: externalOptionEqualToValue, getOptionDisabled: externalGetOptionDisabled, filterOptions: externalFilterOptions, groupBy: externalGroupBy, openOnFocus, autoHighlight, freeSolo, options, multiple, className, loading, isLoadedDataError, loadedDataError, noOptionsText, focusedHelperText, onInputChange, onChange, }: UseLogicParams<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo>) => {
     isValueEmpty: boolean;
-    isPopperVisible: boolean | undefined;
+    isPopperVisible: boolean;
     autocompleteProps: {
         className: string;
         isOptionEqualToValue: (option: TAutocompleteValueProps, currentValue: TAutocompleteValueProps) => boolean;
+        getOptionDisabled: (option: TAutocompleteValueProps) => boolean;
         autoHighlight: boolean;
-        noOptionsText: string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null;
+        noOptionsText: string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null | undefined;
+        options: readonly TAutocompleteValueProps[];
+        getOptionLabel: (option: TAutocompleteValueProps | AutocompleteFreeSoloValueMapping<TFreeSolo>) => string;
+        filterOptions: ((options: TAutocompleteValueProps[], state: import("@mui/material").FilterOptionsState<TAutocompleteValueProps>) => TAutocompleteValueProps[]) | undefined;
+        groupBy: ((option: TAutocompleteValueProps) => string) | undefined;
+        onChange: (event: SyntheticEvent, newValue: AutocompleteValue<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo>, reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<TAutocompleteValueProps> | undefined) => void;
         onInputChange: (event: SyntheticEvent, currentValue: string, reason: AutocompleteInputChangeReason) => void;
+        openOnFocus: boolean;
     };
 };
 export {};

package/node/components/Autocomplete/useLogic/useLogic.js

@@ -4,22 +4,81 @@ exports.useLogic = void 0;
 const react_1 = require("react");
 const cn_1 = require("../../utils/cn");
 const constants_1 = require("../constants");
-const utils_1 = require("./utils");
-const useLogic = ({ value, isOptionEqualToValue: externalOptionEqualToValue, autoHighlight = true, freeSolo, options, multiple, className, loading, isLoadedDataError, loadedDataError = 'Ошибка загрузки данных', noOptionsText = 'Нет данных', onInputChange, }) => {
+const utils_1 = require("../utils");
+const utils_2 = require("./utils");
+const useLogic = ({ value, inputValue, getOptionLabel: externalGetOptionLabel, isOptionEqualToValue: externalOptionEqualToValue, getOptionDisabled: externalGetOptionDisabled, filterOptions: externalFilterOptions, groupBy: externalGroupBy, openOnFocus, autoHighlight = true, freeSolo, options, multiple, className, loading, isLoadedDataError, loadedDataError = 'Ошибка загрузки данных', noOptionsText = 'Нет данных', focusedHelperText, onInputChange, onChange, }) => {
     const [innerInputValue, setInnerInputValue] = (0, react_1.useState)('');
-    const isValueEmpty = (0, utils_1.checkIsInputEmpty)(value);
-    const isInnerInputValueNotEmpty = innerInputValue.length >= 1;
-    const isOptionsAvailable = options.length > 0;
-    const isPopperVisible = (loading && isOptionsAvailable) ||
-        (!loading && !isOptionsAvailable && isInnerInputValueNotEmpty) ||
-        isOptionsAvailable ||
-        isLoadedDataError;
+    const isValueEmpty = (0, utils_2.checkIsInputEmpty)(value);
+    const isInputTextEmpty = (inputValue ?? '').length === 0 && innerInputValue.length === 0;
+    const hasOptions = options.length > 0;
+    const hasFocusedHelperText = Boolean(focusedHelperText);
+    const shouldShowFocusedHelper = hasFocusedHelperText &&
+        isInputTextEmpty &&
+        !hasOptions &&
+        !loading &&
+        !isLoadedDataError;
+    const isPopperVisible = (0, utils_2.checkIsPopperVisible)({
+        loading,
+        hasOptions,
+        isInputValueNotEmpty: !isInputTextEmpty,
+        isLoadedDataError,
+        shouldShowFocusedHelper,
+    });
+    const hasFocusedHelperOption = shouldShowFocusedHelper && Boolean(freeSolo);
+    const resolvedNoOptionsText = (0, react_1.useMemo)(() => {
+        if (isLoadedDataError) {
+            return loadedDataError;
+        }
+        if (shouldShowFocusedHelper) {
+            return focusedHelperText;
+        }
+        return noOptionsText;
+    }, [
+        isLoadedDataError,
+        loadedDataError,
+        shouldShowFocusedHelper,
+        focusedHelperText,
+        noOptionsText,
+    ]);
+    const autocompleteOptions = (0, react_1.useMemo)(() => {
+        if (hasFocusedHelperOption) {
+            return [constants_1.FOCUSED_HELPER_OPTION];
+        }
+        return options;
+    }, [hasFocusedHelperOption, options]);
+    const resolveGetOptionLabel = (0, react_1.useCallback)((option) => {
+        if ((0, utils_1.checkIsFocusedHelperOption)(option)) {
+            return focusedHelperText ?? '';
+        }
+        if (externalGetOptionLabel) {
+            return externalGetOptionLabel(option);
+        }
+        const optionWithLabel = option;
+        return optionWithLabel.label ?? String(option);
+    }, [externalGetOptionLabel, focusedHelperText]);
+    const handleChange = (0, react_1.useCallback)((event, newValue, reason, details) => {
+        if ((0, utils_2.checkIsFocusedHelperChange)(newValue, details?.option)) {
+            return;
+        }
+        onChange?.(event, newValue, reason, details);
+    }, [onChange]);
     const isOptionEqualToValue = (0, react_1.useCallback)((option, currentValue) => {
+        if ((0, utils_1.checkIsFocusedHelperOption)(option) ||
+            (0, utils_1.checkIsFocusedHelperOption)(currentValue)) {
+            return false;
+        }
         if (externalOptionEqualToValue) {
             return externalOptionEqualToValue(option, currentValue);
         }
         return JSON.stringify(option) === JSON.stringify(currentValue);
     }, [externalOptionEqualToValue]);
+    const resolveGetOptionDisabled = (0, react_1.useCallback)((option) => {
+        if ((0, utils_1.checkIsFocusedHelperOption)(option)) {
+            return true;
+        }
+        return externalGetOptionDisabled?.(option) ?? false;
+    }, [externalGetOptionDisabled]);
+    const resolvedOpenOnFocus = hasFocusedHelperText || Boolean(openOnFocus);
     const handleInputChange = (event, currentValue, reason) => {
         onInputChange?.(event, currentValue, reason);
         if (!loading) {
@@ -31,16 +90,23 @@ const useLogic = ({ value, isOptionEqualToValue: externalOptionEqualToValue, aut
             [constants_1.autocompleteClassnames.multiple]: multiple,
             [constants_1.autocompleteClassnames.emptyValue]: isValueEmpty,
         });
-    }, [multiple, isValueEmpty]);
+    }, [className, multiple, isValueEmpty]);
     return {
         isValueEmpty,
         isPopperVisible,
         autocompleteProps: {
             className: classnames,
             isOptionEqualToValue,
+            getOptionDisabled: resolveGetOptionDisabled,
             autoHighlight: freeSolo ? false : autoHighlight,
-            noOptionsText: isLoadedDataError ? loadedDataError : noOptionsText,
+            noOptionsText: resolvedNoOptionsText,
+            options: autocompleteOptions,
+            getOptionLabel: resolveGetOptionLabel,
+            filterOptions: hasFocusedHelperOption ? undefined : externalFilterOptions,
+            groupBy: hasFocusedHelperOption ? undefined : externalGroupBy,
+            onChange: handleChange,
             onInputChange: handleInputChange,
+            openOnFocus: resolvedOpenOnFocus,
         },
     };
 };

package/node/components/Autocomplete/useLogic/utils/checkIsFocusedHelperChange/checkIsFocusedHelperChange.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Проверяет, является ли значение при onChange focusedHelper-опцией (freeSolo)
+ */
+export declare const checkIsFocusedHelperChange: (newValue: unknown, changedOption?: unknown) => boolean;

package/node/components/Autocomplete/useLogic/utils/checkIsFocusedHelperChange/checkIsFocusedHelperChange.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkIsFocusedHelperChange = void 0;
+const utils_1 = require("../../../utils");
+/**
+ * Проверяет, является ли значение при onChange focusedHelper-опцией (freeSolo)
+ */
+const checkIsFocusedHelperChange = (newValue, changedOption) => {
+    if ((0, utils_1.checkIsFocusedHelperOption)(changedOption)) {
+        return true;
+    }
+    if ((0, utils_1.checkIsFocusedHelperOption)(newValue)) {
+        return true;
+    }
+    if (Array.isArray(newValue) &&
+        newValue.some((item) => (0, utils_1.checkIsFocusedHelperOption)(item))) {
+        return true;
+    }
+    return false;
+};
+exports.checkIsFocusedHelperChange = checkIsFocusedHelperChange;

package/node/components/Autocomplete/useLogic/utils/checkIsFocusedHelperChange/index.d.ts

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

package/node/components/Autocomplete/useLogic/utils/checkIsFocusedHelperChange/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./checkIsFocusedHelperChange"), exports);

package/node/components/Autocomplete/useLogic/utils/checkIsPopperVisible/checkIsPopperVisible.d.ts

@@ -0,0 +1,8 @@
+export type CheckIsPopperVisibleParams = {
+    loading?: boolean;
+    hasOptions: boolean;
+    isInputValueNotEmpty: boolean;
+    isLoadedDataError?: boolean;
+    shouldShowFocusedHelper: boolean;
+};
+export declare const checkIsPopperVisible: ({ loading, hasOptions, isInputValueNotEmpty, isLoadedDataError, shouldShowFocusedHelper, }: CheckIsPopperVisibleParams) => boolean;

package/node/components/Autocomplete/useLogic/utils/checkIsPopperVisible/checkIsPopperVisible.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkIsPopperVisible = void 0;
+const checkIsPopperVisible = ({ loading = false, hasOptions, isInputValueNotEmpty, isLoadedDataError = false, shouldShowFocusedHelper, }) => {
+    if (shouldShowFocusedHelper || hasOptions || isLoadedDataError) {
+        return true;
+    }
+    return !loading && isInputValueNotEmpty;
+};
+exports.checkIsPopperVisible = checkIsPopperVisible;

package/node/components/Autocomplete/useLogic/utils/checkIsPopperVisible/index.d.ts

@@ -0,0 +1 @@
+export { checkIsPopperVisible, type CheckIsPopperVisibleParams, } from './checkIsPopperVisible';

package/node/components/Autocomplete/useLogic/utils/checkIsPopperVisible/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkIsPopperVisible = void 0;
+var checkIsPopperVisible_1 = require("./checkIsPopperVisible");
+Object.defineProperty(exports, "checkIsPopperVisible", { enumerable: true, get: function () { return checkIsPopperVisible_1.checkIsPopperVisible; } });

package/node/components/Autocomplete/useLogic/utils/index.d.ts

@@ -1 +1,3 @@
 export * from './checkIsInputEmpty';
+export * from './checkIsPopperVisible';
+export * from './checkIsFocusedHelperChange';

package/node/components/Autocomplete/useLogic/utils/index.js

@@ -15,3 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./checkIsInputEmpty"), exports);
+__exportStar(require("./checkIsPopperVisible"), exports);
+__exportStar(require("./checkIsFocusedHelperChange"), exports);

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

@@ -0,0 +1,5 @@
+import { FOCUSED_HELPER_OPTION } from '../../constants';
+/**
+ * Определяет, является ли опция специальной опцией для отображения focusedHelperText при freeSolo=true
+ */
+export declare const checkIsFocusedHelperOption: (option: unknown) => option is typeof FOCUSED_HELPER_OPTION;

package/node/components/Autocomplete/utils/checkIsFocusedHelperOption/checkIsFocusedHelperOption.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkIsFocusedHelperOption = void 0;
+const constants_1 = require("../../constants");
+/**
+ * Определяет, является ли опция специальной опцией для отображения focusedHelperText при freeSolo=true
+ */
+const checkIsFocusedHelperOption = (option) => {
+    return option === constants_1.FOCUSED_HELPER_OPTION;
+};
+exports.checkIsFocusedHelperOption = checkIsFocusedHelperOption;

package/node/components/Autocomplete/utils/checkIsFocusedHelperOption/index.d.ts

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

package/node/components/Autocomplete/utils/checkIsFocusedHelperOption/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./checkIsFocusedHelperOption"), exports);

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

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

package/node/components/Autocomplete/utils/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./checkIsFocusedHelperOption"), exports);

package/node/components/DonutChart/DonutChart.d.ts

@@ -1,2 +1,2 @@
 import type { DonutChartProps } from './types';
-export declare const DonutChart: ({ value, maxValue, children, color, colorIntensity, className, style, }: DonutChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DonutChart: ({ value, maxValue, children, color, colorIntensity, trackColorIntensity, className, style, }: DonutChartProps) => import("react/jsx-runtime").JSX.Element;

package/node/components/DonutChart/DonutChart.js

@@ -6,8 +6,8 @@ const cn_1 = require("../utils/cn");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
-const DonutChart = ({ value, maxValue, children, color = 'primary', colorIntensity = '700', className, style, }) => {
-    const { rootRef, svgViewBox, arcCx, arcCy, donutParams, meterAriaValue } = (0, useLogic_1.useLogic)({ value, maxValue, color, colorIntensity });
+const DonutChart = ({ value, maxValue, children, color = 'primary', colorIntensity = '700', trackColorIntensity = '100', className, style, }) => {
+    const { rootRef, svgViewBox, arcCx, arcCy, donutParams, meterAriaValue } = (0, useLogic_1.useLogic)({ value, maxValue, color, colorIntensity, trackColorIntensity });
     return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { ref: rootRef, className: (0, cn_1.cn)(constants_1.donutChartClassnames.root, className), role: "meter", "aria-label": meterAriaValue.label, "aria-valuemin": meterAriaValue.min, "aria-valuemax": meterAriaValue.max, "aria-valuenow": meterAriaValue.now, style: { ...donutParams?.cssVars, ...style }, children: [donutParams && ((0, jsx_runtime_1.jsxs)(styles_1.Svg, { className: constants_1.donutChartClassnames.svg, viewBox: svgViewBox, "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)(styles_1.TrackArc, { className: constants_1.donutChartClassnames.track, cx: arcCx, cy: arcCy, r: donutParams.arcR }), (0, jsx_runtime_1.jsx)(styles_1.ProgressArc, { className: constants_1.donutChartClassnames.progress, d: donutParams.arcPath, pathLength: 1, strokeDasharray: 1, strokeDashoffset: donutParams.progressOffset })] })), children && ((0, jsx_runtime_1.jsx)(styles_1.Content, { className: constants_1.donutChartClassnames.content, children: children }))] }));
 };
 exports.DonutChart = DonutChart;

package/node/components/DonutChart/styles.js

@@ -19,7 +19,7 @@ exports.Svg = styled_1.styled.svg `
 `;
 exports.TrackArc = styled_1.styled.circle `
   fill: none;
-  stroke: ${({ theme }) => theme.palette.grey[100]};
+  stroke: var(--donut-chart-track-color);
   stroke-linecap: round;
   stroke-width: var(--donut-chart-stroke-width);
 `;

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

@@ -16,6 +16,11 @@ export type DonutChartProps = {
      * Интенсивность цвета.
      */
     colorIntensity?: DonutChartColorIntensity;
+    /**
+     * Интенсивность цвета для фонового кольца.
+     * @default '100'
+     */
+    trackColorIntensity?: DonutChartColorIntensity;
     /**
      * CSS-класс для корневого элемента.
      */

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { DonutChartProps } from '../types';
-export declare const useLogic: ({ value, maxValue, color, colorIntensity, }: DonutChartProps) => {
+export declare const useLogic: ({ value, maxValue, color, colorIntensity, trackColorIntensity, }: DonutChartProps) => {
     rootRef: import("react").RefObject<HTMLDivElement | null>;
     svgViewBox: "0 0 100 100";
     arcCx: number;

package/node/components/DonutChart/useLogic/useLogic.js

@@ -11,7 +11,7 @@ const getMeterAriaValue_1 = require("./utils/getMeterAriaValue");
 const getProgressCirclePath_1 = require("./utils/getProgressCirclePath");
 const getProgressOffset_1 = require("./utils/getProgressOffset");
 const getProgressPercent_1 = require("./utils/getProgressPercent");
-const useLogic = ({ value, maxValue, color = 'primary', colorIntensity = '700', }) => {
+const useLogic = ({ value, maxValue, color = 'primary', colorIntensity = '700', trackColorIntensity = '100', }) => {
     const theme = (0, useTheme_1.useTheme)();
     const { rootRef, renderWidth } = (0, hooks_1.useRenderWidth)();
     const progressPercent = (0, getProgressPercent_1.getProgressPercent)(value, maxValue);
@@ -28,10 +28,18 @@ const useLogic = ({ value, maxValue, color = 'primary', colorIntensity = '700',
             cssVars: (0, getDonutChartCssVars_1.getDonutChartCssVars)(theme, {
                 color,
                 colorIntensity,
+                trackColorIntensity,
                 strokeWidth: stroke,
             }),
         };
-    }, [renderWidth, progressPercent, color, colorIntensity, theme]);
+    }, [
+        renderWidth,
+        progressPercent,
+        color,
+        colorIntensity,
+        trackColorIntensity,
+        theme,
+    ]);
     return {
         rootRef,
         svgViewBox: constants_1.DONUT_CHART_SVG_VIEWBOX,

package/node/components/DonutChart/useLogic/utils/getDonutChartCssVars/getDonutChartCssVars.d.ts

@@ -4,13 +4,14 @@ import type { DonutChartColor, DonutChartColorIntensity } from '../../../types';
 type GetDonutChartCssVarsParams = {
     color: DonutChartColor;
     colorIntensity: DonutChartColorIntensity;
+    trackColorIntensity: DonutChartColorIntensity;
     strokeWidth: number;
 };
 /**
  * Генерирует CSS переменные для стилизации DonutChart по теме и цвету.
  * @param theme - Объект темы с палитрой цветов
- * @param params - Параметры цвета, интенсивности и ширины stroke
+ * @param params - Параметры цвета, интенсивности дуги и трека, ширины stroke
  * @returns CSS свойства для диаграммы
  */
-export declare const getDonutChartCssVars: (theme: Theme, { color, colorIntensity, strokeWidth }: GetDonutChartCssVarsParams) => CSSProperties;
+export declare const getDonutChartCssVars: (theme: Theme, { color, colorIntensity, trackColorIntensity, strokeWidth, }: GetDonutChartCssVarsParams) => CSSProperties;
 export {};

package/node/components/DonutChart/useLogic/utils/getDonutChartCssVars/getDonutChartCssVars.js

@@ -4,11 +4,12 @@ exports.getDonutChartCssVars = void 0;
 /**
  * Генерирует CSS переменные для стилизации DonutChart по теме и цвету.
  * @param theme - Объект темы с палитрой цветов
- * @param params - Параметры цвета, интенсивности и ширины stroke
+ * @param params - Параметры цвета, интенсивности дуги и трека, ширины stroke
  * @returns CSS свойства для диаграммы
  */
-const getDonutChartCssVars = (theme, { color, colorIntensity, strokeWidth }) => ({
+const getDonutChartCssVars = (theme, { color, colorIntensity, trackColorIntensity, strokeWidth, }) => ({
     '--donut-chart-stroke-width': String(strokeWidth),
     '--donut-chart-progress-color': theme.palette[color][colorIntensity],
+    '--donut-chart-track-color': theme.palette.grey[trackColorIntensity],
 });
 exports.getDonutChartCssVars = getDonutChartCssVars;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.107.0",
+  "version": "4.109.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {