@astral/ui 4.107.0 → 4.108.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/AsyncAutocomplete/useLogic/useLogic.d.ts +1 -0
- package/components/Autocomplete/Autocomplete.d.ts +1 -0
- package/components/Autocomplete/Autocomplete.js +10 -5
- package/components/Autocomplete/constants.d.ts +1 -0
- package/components/Autocomplete/constants.js +1 -0
- package/components/Autocomplete/styles.d.ts +4 -0
- package/components/Autocomplete/styles.js +9 -0
- package/components/Autocomplete/types.d.ts +4 -0
- package/components/Autocomplete/useLogic/useLogic.d.ts +11 -4
- package/components/Autocomplete/useLogic/useLogic.js +77 -11
- package/components/Autocomplete/useLogic/utils/checkIsFocusedHelperChange/checkIsFocusedHelperChange.d.ts +4 -0
- package/components/Autocomplete/useLogic/utils/checkIsFocusedHelperChange/checkIsFocusedHelperChange.js +17 -0
- package/components/Autocomplete/useLogic/utils/checkIsFocusedHelperChange/index.d.ts +1 -0
- package/components/Autocomplete/useLogic/utils/checkIsFocusedHelperChange/index.js +1 -0
- package/components/Autocomplete/useLogic/utils/checkIsPopperVisible/checkIsPopperVisible.d.ts +8 -0
- package/components/Autocomplete/useLogic/utils/checkIsPopperVisible/checkIsPopperVisible.js +6 -0
- package/components/Autocomplete/useLogic/utils/checkIsPopperVisible/index.d.ts +1 -0
- package/components/Autocomplete/useLogic/utils/checkIsPopperVisible/index.js +1 -0
- package/components/Autocomplete/useLogic/utils/index.d.ts +2 -0
- package/components/Autocomplete/useLogic/utils/index.js +2 -0
- package/components/Autocomplete/utils/checkIsFocusedHelperOption/checkIsFocusedHelperOption.d.ts +5 -0
- package/components/Autocomplete/utils/checkIsFocusedHelperOption/checkIsFocusedHelperOption.js +7 -0
- package/components/Autocomplete/utils/checkIsFocusedHelperOption/index.d.ts +1 -0
- package/components/Autocomplete/utils/checkIsFocusedHelperOption/index.js +1 -0
- package/components/Autocomplete/utils/index.d.ts +1 -0
- package/components/Autocomplete/utils/index.js +1 -0
- package/node/components/AsyncAutocomplete/useLogic/useLogic.d.ts +1 -0
- package/node/components/Autocomplete/Autocomplete.d.ts +1 -0
- package/node/components/Autocomplete/Autocomplete.js +9 -4
- package/node/components/Autocomplete/constants.d.ts +1 -0
- package/node/components/Autocomplete/constants.js +2 -1
- package/node/components/Autocomplete/styles.d.ts +4 -0
- package/node/components/Autocomplete/styles.js +10 -1
- package/node/components/Autocomplete/types.d.ts +4 -0
- package/node/components/Autocomplete/useLogic/useLogic.d.ts +11 -4
- package/node/components/Autocomplete/useLogic/useLogic.js +77 -11
- package/node/components/Autocomplete/useLogic/utils/checkIsFocusedHelperChange/checkIsFocusedHelperChange.d.ts +4 -0
- package/node/components/Autocomplete/useLogic/utils/checkIsFocusedHelperChange/checkIsFocusedHelperChange.js +21 -0
- package/node/components/Autocomplete/useLogic/utils/checkIsFocusedHelperChange/index.d.ts +1 -0
- package/node/components/Autocomplete/useLogic/utils/checkIsFocusedHelperChange/index.js +17 -0
- package/node/components/Autocomplete/useLogic/utils/checkIsPopperVisible/checkIsPopperVisible.d.ts +8 -0
- package/node/components/Autocomplete/useLogic/utils/checkIsPopperVisible/checkIsPopperVisible.js +10 -0
- package/node/components/Autocomplete/useLogic/utils/checkIsPopperVisible/index.d.ts +1 -0
- package/node/components/Autocomplete/useLogic/utils/checkIsPopperVisible/index.js +5 -0
- package/node/components/Autocomplete/useLogic/utils/index.d.ts +2 -0
- package/node/components/Autocomplete/useLogic/utils/index.js +2 -0
- package/node/components/Autocomplete/utils/checkIsFocusedHelperOption/checkIsFocusedHelperOption.d.ts +5 -0
- package/node/components/Autocomplete/utils/checkIsFocusedHelperOption/checkIsFocusedHelperOption.js +11 -0
- package/node/components/Autocomplete/utils/checkIsFocusedHelperOption/index.d.ts +1 -0
- package/node/components/Autocomplete/utils/checkIsFocusedHelperOption/index.js +17 -0
- package/node/components/Autocomplete/utils/index.d.ts +1 -0
- package/node/components/Autocomplete/utils/index.js +17 -0
- package/package.json +1 -1
|
@@ -366,6 +366,7 @@ export declare const useLogic: <TOptions, TMultiple extends boolean, TDisableCle
|
|
|
366
366
|
openOnFocus?: boolean | undefined;
|
|
367
367
|
selectOnFocus?: boolean | undefined;
|
|
368
368
|
loadedDataError?: string | undefined;
|
|
369
|
+
focusedHelperText?: string | undefined;
|
|
369
370
|
overflowOption?: import("../..").OverflowedElementProps | undefined;
|
|
370
371
|
options: TOptions[];
|
|
371
372
|
disabled: boolean | undefined;
|
|
@@ -18,4 +18,5 @@ export declare const Autocomplete: <TAutocompleteValueProps, TMultiple extends b
|
|
|
18
18
|
openText?: string | undefined;
|
|
19
19
|
clearText?: string | undefined;
|
|
20
20
|
hideHelperText?: boolean | undefined;
|
|
21
|
+
focusedHelperText?: string | undefined;
|
|
21
22
|
} & import("react").RefAttributes<unknown>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
|
|
@@ -10,14 +10,16 @@ import { Loader } from '../Loader';
|
|
|
10
10
|
import { OverflowTypography } from '../OverflowTypography';
|
|
11
11
|
import { TagsList } from '../TagsList';
|
|
12
12
|
import { TextField } from '../TextField';
|
|
13
|
+
import { Typography } from '../Typography';
|
|
13
14
|
import { cn } from '../utils/cn';
|
|
14
15
|
import { DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT, DEFAULT_PLACEHOLDER, INPUT_MIN_WIDTH, } from './constants';
|
|
15
|
-
import { StyledAutocomplete, StyledMenuItem } from './styles';
|
|
16
|
+
import { StyledAutocomplete, StyledFocusedHelperOption, StyledMenuItem, } from './styles';
|
|
16
17
|
import { useLogic } from './useLogic';
|
|
18
|
+
import { checkIsFocusedHelperOption } from './utils';
|
|
17
19
|
const AutocompleteInner = (props, ref) => {
|
|
18
20
|
const { isValueEmpty, isPopperVisible, autocompleteProps } = useLogic(props);
|
|
19
21
|
const inputBaseRef = useRef(null);
|
|
20
|
-
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;
|
|
22
|
+
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;
|
|
21
23
|
const renderInput = useCallback((inputParams) => {
|
|
22
24
|
const createStartAdornment = () => {
|
|
23
25
|
if (!multiple || !Array.isArray(value)) {
|
|
@@ -93,13 +95,16 @@ const AutocompleteInner = (props, ref) => {
|
|
|
93
95
|
onChange,
|
|
94
96
|
]);
|
|
95
97
|
const renderOption = useCallback((optionProps, option, optionState, ownerState) => {
|
|
98
|
+
const { key, ...restOptionProps } = optionProps;
|
|
99
|
+
if (checkIsFocusedHelperOption(option)) {
|
|
100
|
+
return (_jsx(StyledFocusedHelperOption, { role: "presentation", ...restOptionProps, children: _jsx(Typography, { variant: "body1", color: "grey", colorIntensity: "600", children: focusedHelperText }) }, key));
|
|
101
|
+
}
|
|
96
102
|
if (externalRenderOption) {
|
|
97
103
|
return externalRenderOption(optionProps, option, optionState, ownerState);
|
|
98
104
|
}
|
|
99
105
|
const isSelected = Boolean(optionProps['aria-selected']);
|
|
100
|
-
const { key, ...restOptionProps } = optionProps;
|
|
101
106
|
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));
|
|
102
|
-
}, [multiple, overflowOption, externalRenderOption]);
|
|
107
|
+
}, [focusedHelperText, multiple, overflowOption, externalRenderOption]);
|
|
103
108
|
const renderPopper = useCallback((popperProps) => {
|
|
104
109
|
if (!isPopperVisible) {
|
|
105
110
|
return null;
|
|
@@ -116,6 +121,6 @@ const AutocompleteInner = (props, ref) => {
|
|
|
116
121
|
popper: {
|
|
117
122
|
component: renderPopper,
|
|
118
123
|
},
|
|
119
|
-
},
|
|
124
|
+
}, renderInput: renderInput, renderTags: renderTags, renderOption: renderOption, value: value, ...autocompleteProps }));
|
|
120
125
|
};
|
|
121
126
|
export const Autocomplete = forwardRefWithGeneric(AutocompleteInner);
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export declare const DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;
|
|
2
2
|
export declare const INPUT_MIN_WIDTH = 110;
|
|
3
3
|
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";
|
|
4
|
+
export declare const FOCUSED_HELPER_OPTION: unique symbol;
|
|
4
5
|
export declare const autocompleteClassnames: {
|
|
5
6
|
root: string;
|
|
6
7
|
multiple: string;
|
|
@@ -2,6 +2,7 @@ import { createUIKitClassname } from '../utils/createUIKitClassname';
|
|
|
2
2
|
export const DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;
|
|
3
3
|
export const INPUT_MIN_WIDTH = 110;
|
|
4
4
|
export const DEFAULT_PLACEHOLDER = 'Начните вводить для поиска';
|
|
5
|
+
export const FOCUSED_HELPER_OPTION = Symbol('focusedHelperOption');
|
|
5
6
|
export const autocompleteClassnames = {
|
|
6
7
|
root: createUIKitClassname('autocomplete'),
|
|
7
8
|
multiple: createUIKitClassname('autocomplete_multiple'),
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import MuiAutocomplete from '@mui/material/Autocomplete';
|
|
3
|
+
export declare const StyledFocusedHelperOption: import("../styled").StyledComponent<{
|
|
4
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
5
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
6
|
+
}, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
|
|
3
7
|
export declare const StyledMenuItem: import("../styled").StyledComponent<import("..").WithoutEmotionSpecific<Omit<import("@mui/material").MenuItemProps, "component">> & {
|
|
4
8
|
disabledReason?: string | undefined;
|
|
5
9
|
note?: string | undefined;
|
|
@@ -7,6 +7,15 @@ import { MenuItem } from '../MenuItem';
|
|
|
7
7
|
import { svgIconClassnames } from '../SvgIcon';
|
|
8
8
|
import { styled } from '../styled';
|
|
9
9
|
import { autocompleteClassnames, INPUT_MIN_WIDTH } from './constants';
|
|
10
|
+
export const StyledFocusedHelperOption = styled.li `
|
|
11
|
+
&&.${autocompleteClasses.option} {
|
|
12
|
+
display: flex;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
align-items: center;
|
|
15
|
+
height: 48px;
|
|
16
|
+
opacity: 1;
|
|
17
|
+
}
|
|
18
|
+
`;
|
|
10
19
|
export const StyledMenuItem = styled(MenuItem) `
|
|
11
20
|
max-height: ${({ theme }) => theme.spacing(13)};
|
|
12
21
|
|
|
@@ -48,4 +48,8 @@ export type AutocompleteProps<TAutocompleteValueProps, TMultiple extends boolean
|
|
|
48
48
|
* Включает/отключает резервирование места под helperText
|
|
49
49
|
*/
|
|
50
50
|
hideHelperText?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* Текст подсказки в popover при фокусе
|
|
53
|
+
*/
|
|
54
|
+
focusedHelperText?: string;
|
|
51
55
|
};
|
|
@@ -1,16 +1,23 @@
|
|
|
1
|
-
import { type AutocompleteInputChangeReason } from '@mui/material
|
|
1
|
+
import { type AutocompleteChangeDetails, type AutocompleteChangeReason, type AutocompleteFreeSoloValueMapping, type AutocompleteInputChangeReason, type AutocompleteValue } from '@mui/material';
|
|
2
2
|
import { type SyntheticEvent } from 'react';
|
|
3
3
|
import { type AutocompleteProps } from '../types';
|
|
4
4
|
type UseLogicParams<TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean> = AutocompleteProps<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo>;
|
|
5
|
-
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>) => {
|
|
5
|
+
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>) => {
|
|
6
6
|
isValueEmpty: boolean;
|
|
7
|
-
isPopperVisible: boolean
|
|
7
|
+
isPopperVisible: boolean;
|
|
8
8
|
autocompleteProps: {
|
|
9
9
|
className: string;
|
|
10
10
|
isOptionEqualToValue: (option: TAutocompleteValueProps, currentValue: TAutocompleteValueProps) => boolean;
|
|
11
|
+
getOptionDisabled: (option: TAutocompleteValueProps) => boolean;
|
|
11
12
|
autoHighlight: boolean;
|
|
12
|
-
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;
|
|
13
|
+
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;
|
|
14
|
+
options: readonly TAutocompleteValueProps[];
|
|
15
|
+
getOptionLabel: (option: TAutocompleteValueProps | AutocompleteFreeSoloValueMapping<TFreeSolo>) => string;
|
|
16
|
+
filterOptions: ((options: TAutocompleteValueProps[], state: import("@mui/material").FilterOptionsState<TAutocompleteValueProps>) => TAutocompleteValueProps[]) | undefined;
|
|
17
|
+
groupBy: ((option: TAutocompleteValueProps) => string) | undefined;
|
|
18
|
+
onChange: (event: SyntheticEvent, newValue: AutocompleteValue<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo>, reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<TAutocompleteValueProps> | undefined) => void;
|
|
13
19
|
onInputChange: (event: SyntheticEvent, currentValue: string, reason: AutocompleteInputChangeReason) => void;
|
|
20
|
+
openOnFocus: boolean;
|
|
14
21
|
};
|
|
15
22
|
};
|
|
16
23
|
export {};
|
|
@@ -1,22 +1,81 @@
|
|
|
1
1
|
import { useCallback, useMemo, useState } from 'react';
|
|
2
2
|
import { cn } from '../../utils/cn';
|
|
3
|
-
import { autocompleteClassnames } from '../constants';
|
|
4
|
-
import {
|
|
5
|
-
|
|
3
|
+
import { autocompleteClassnames, FOCUSED_HELPER_OPTION } from '../constants';
|
|
4
|
+
import { checkIsFocusedHelperOption } from '../utils';
|
|
5
|
+
import { checkIsFocusedHelperChange, checkIsInputEmpty, checkIsPopperVisible, } from './utils';
|
|
6
|
+
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, }) => {
|
|
6
7
|
const [innerInputValue, setInnerInputValue] = useState('');
|
|
7
8
|
const isValueEmpty = checkIsInputEmpty(value);
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
9
|
+
const isInputTextEmpty = (inputValue ?? '').length === 0 && innerInputValue.length === 0;
|
|
10
|
+
const hasOptions = options.length > 0;
|
|
11
|
+
const hasFocusedHelperText = Boolean(focusedHelperText);
|
|
12
|
+
const shouldShowFocusedHelper = hasFocusedHelperText &&
|
|
13
|
+
isInputTextEmpty &&
|
|
14
|
+
!hasOptions &&
|
|
15
|
+
!loading &&
|
|
16
|
+
!isLoadedDataError;
|
|
17
|
+
const isPopperVisible = checkIsPopperVisible({
|
|
18
|
+
loading,
|
|
19
|
+
hasOptions,
|
|
20
|
+
isInputValueNotEmpty: !isInputTextEmpty,
|
|
21
|
+
isLoadedDataError,
|
|
22
|
+
shouldShowFocusedHelper,
|
|
23
|
+
});
|
|
24
|
+
const hasFocusedHelperOption = shouldShowFocusedHelper && Boolean(freeSolo);
|
|
25
|
+
const resolvedNoOptionsText = useMemo(() => {
|
|
26
|
+
if (isLoadedDataError) {
|
|
27
|
+
return loadedDataError;
|
|
28
|
+
}
|
|
29
|
+
if (shouldShowFocusedHelper) {
|
|
30
|
+
return focusedHelperText;
|
|
31
|
+
}
|
|
32
|
+
return noOptionsText;
|
|
33
|
+
}, [
|
|
34
|
+
isLoadedDataError,
|
|
35
|
+
loadedDataError,
|
|
36
|
+
shouldShowFocusedHelper,
|
|
37
|
+
focusedHelperText,
|
|
38
|
+
noOptionsText,
|
|
39
|
+
]);
|
|
40
|
+
const autocompleteOptions = useMemo(() => {
|
|
41
|
+
if (hasFocusedHelperOption) {
|
|
42
|
+
return [FOCUSED_HELPER_OPTION];
|
|
43
|
+
}
|
|
44
|
+
return options;
|
|
45
|
+
}, [hasFocusedHelperOption, options]);
|
|
46
|
+
const resolveGetOptionLabel = useCallback((option) => {
|
|
47
|
+
if (checkIsFocusedHelperOption(option)) {
|
|
48
|
+
return focusedHelperText ?? '';
|
|
49
|
+
}
|
|
50
|
+
if (externalGetOptionLabel) {
|
|
51
|
+
return externalGetOptionLabel(option);
|
|
52
|
+
}
|
|
53
|
+
const optionWithLabel = option;
|
|
54
|
+
return optionWithLabel.label ?? String(option);
|
|
55
|
+
}, [externalGetOptionLabel, focusedHelperText]);
|
|
56
|
+
const handleChange = useCallback((event, newValue, reason, details) => {
|
|
57
|
+
if (checkIsFocusedHelperChange(newValue, details?.option)) {
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
onChange?.(event, newValue, reason, details);
|
|
61
|
+
}, [onChange]);
|
|
14
62
|
const isOptionEqualToValue = useCallback((option, currentValue) => {
|
|
63
|
+
if (checkIsFocusedHelperOption(option) ||
|
|
64
|
+
checkIsFocusedHelperOption(currentValue)) {
|
|
65
|
+
return false;
|
|
66
|
+
}
|
|
15
67
|
if (externalOptionEqualToValue) {
|
|
16
68
|
return externalOptionEqualToValue(option, currentValue);
|
|
17
69
|
}
|
|
18
70
|
return JSON.stringify(option) === JSON.stringify(currentValue);
|
|
19
71
|
}, [externalOptionEqualToValue]);
|
|
72
|
+
const resolveGetOptionDisabled = useCallback((option) => {
|
|
73
|
+
if (checkIsFocusedHelperOption(option)) {
|
|
74
|
+
return true;
|
|
75
|
+
}
|
|
76
|
+
return externalGetOptionDisabled?.(option) ?? false;
|
|
77
|
+
}, [externalGetOptionDisabled]);
|
|
78
|
+
const resolvedOpenOnFocus = hasFocusedHelperText || Boolean(openOnFocus);
|
|
20
79
|
const handleInputChange = (event, currentValue, reason) => {
|
|
21
80
|
onInputChange?.(event, currentValue, reason);
|
|
22
81
|
if (!loading) {
|
|
@@ -28,16 +87,23 @@ export const useLogic = ({ value, isOptionEqualToValue: externalOptionEqualToVal
|
|
|
28
87
|
[autocompleteClassnames.multiple]: multiple,
|
|
29
88
|
[autocompleteClassnames.emptyValue]: isValueEmpty,
|
|
30
89
|
});
|
|
31
|
-
}, [multiple, isValueEmpty]);
|
|
90
|
+
}, [className, multiple, isValueEmpty]);
|
|
32
91
|
return {
|
|
33
92
|
isValueEmpty,
|
|
34
93
|
isPopperVisible,
|
|
35
94
|
autocompleteProps: {
|
|
36
95
|
className: classnames,
|
|
37
96
|
isOptionEqualToValue,
|
|
97
|
+
getOptionDisabled: resolveGetOptionDisabled,
|
|
38
98
|
autoHighlight: freeSolo ? false : autoHighlight,
|
|
39
|
-
noOptionsText:
|
|
99
|
+
noOptionsText: resolvedNoOptionsText,
|
|
100
|
+
options: autocompleteOptions,
|
|
101
|
+
getOptionLabel: resolveGetOptionLabel,
|
|
102
|
+
filterOptions: hasFocusedHelperOption ? undefined : externalFilterOptions,
|
|
103
|
+
groupBy: hasFocusedHelperOption ? undefined : externalGroupBy,
|
|
104
|
+
onChange: handleChange,
|
|
40
105
|
onInputChange: handleInputChange,
|
|
106
|
+
openOnFocus: resolvedOpenOnFocus,
|
|
41
107
|
},
|
|
42
108
|
};
|
|
43
109
|
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { checkIsFocusedHelperOption } from '../../../utils';
|
|
2
|
+
/**
|
|
3
|
+
* Проверяет, является ли значение при onChange focusedHelper-опцией (freeSolo)
|
|
4
|
+
*/
|
|
5
|
+
export const checkIsFocusedHelperChange = (newValue, changedOption) => {
|
|
6
|
+
if (checkIsFocusedHelperOption(changedOption)) {
|
|
7
|
+
return true;
|
|
8
|
+
}
|
|
9
|
+
if (checkIsFocusedHelperOption(newValue)) {
|
|
10
|
+
return true;
|
|
11
|
+
}
|
|
12
|
+
if (Array.isArray(newValue) &&
|
|
13
|
+
newValue.some((item) => checkIsFocusedHelperOption(item))) {
|
|
14
|
+
return true;
|
|
15
|
+
}
|
|
16
|
+
return false;
|
|
17
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './checkIsFocusedHelperChange';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './checkIsFocusedHelperChange';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export type CheckIsPopperVisibleParams = {
|
|
2
|
+
loading?: boolean;
|
|
3
|
+
hasOptions: boolean;
|
|
4
|
+
isInputValueNotEmpty: boolean;
|
|
5
|
+
isLoadedDataError?: boolean;
|
|
6
|
+
shouldShowFocusedHelper: boolean;
|
|
7
|
+
};
|
|
8
|
+
export declare const checkIsPopperVisible: ({ loading, hasOptions, isInputValueNotEmpty, isLoadedDataError, shouldShowFocusedHelper, }: CheckIsPopperVisibleParams) => boolean;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export const checkIsPopperVisible = ({ loading = false, hasOptions, isInputValueNotEmpty, isLoadedDataError = false, shouldShowFocusedHelper, }) => {
|
|
2
|
+
if (shouldShowFocusedHelper || hasOptions || isLoadedDataError) {
|
|
3
|
+
return true;
|
|
4
|
+
}
|
|
5
|
+
return !loading && isInputValueNotEmpty;
|
|
6
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { checkIsPopperVisible, type CheckIsPopperVisibleParams, } from './checkIsPopperVisible';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { checkIsPopperVisible, } from './checkIsPopperVisible';
|
package/components/Autocomplete/utils/checkIsFocusedHelperOption/checkIsFocusedHelperOption.d.ts
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { FOCUSED_HELPER_OPTION } from '../../constants';
|
|
2
|
+
/**
|
|
3
|
+
* Определяет, является ли опция специальной опцией для отображения focusedHelperText при freeSolo=true
|
|
4
|
+
*/
|
|
5
|
+
export declare const checkIsFocusedHelperOption: (option: unknown) => option is typeof FOCUSED_HELPER_OPTION;
|
package/components/Autocomplete/utils/checkIsFocusedHelperOption/checkIsFocusedHelperOption.js
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { FOCUSED_HELPER_OPTION } from '../../constants';
|
|
2
|
+
/**
|
|
3
|
+
* Определяет, является ли опция специальной опцией для отображения focusedHelperText при freeSolo=true
|
|
4
|
+
*/
|
|
5
|
+
export const checkIsFocusedHelperOption = (option) => {
|
|
6
|
+
return option === FOCUSED_HELPER_OPTION;
|
|
7
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './checkIsFocusedHelperOption';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './checkIsFocusedHelperOption';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './checkIsFocusedHelperOption';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './checkIsFocusedHelperOption';
|
|
@@ -366,6 +366,7 @@ export declare const useLogic: <TOptions, TMultiple extends boolean, TDisableCle
|
|
|
366
366
|
openOnFocus?: boolean | undefined;
|
|
367
367
|
selectOnFocus?: boolean | undefined;
|
|
368
368
|
loadedDataError?: string | undefined;
|
|
369
|
+
focusedHelperText?: string | undefined;
|
|
369
370
|
overflowOption?: import("../..").OverflowedElementProps | undefined;
|
|
370
371
|
options: TOptions[];
|
|
371
372
|
disabled: boolean | undefined;
|
|
@@ -18,4 +18,5 @@ export declare const Autocomplete: <TAutocompleteValueProps, TMultiple extends b
|
|
|
18
18
|
openText?: string | undefined;
|
|
19
19
|
clearText?: string | undefined;
|
|
20
20
|
hideHelperText?: boolean | undefined;
|
|
21
|
+
focusedHelperText?: string | undefined;
|
|
21
22
|
} & import("react").RefAttributes<unknown>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
|
|
@@ -16,14 +16,16 @@ const Loader_1 = require("../Loader");
|
|
|
16
16
|
const OverflowTypography_1 = require("../OverflowTypography");
|
|
17
17
|
const TagsList_1 = require("../TagsList");
|
|
18
18
|
const TextField_1 = require("../TextField");
|
|
19
|
+
const Typography_1 = require("../Typography");
|
|
19
20
|
const cn_1 = require("../utils/cn");
|
|
20
21
|
const constants_1 = require("./constants");
|
|
21
22
|
const styles_1 = require("./styles");
|
|
22
23
|
const useLogic_1 = require("./useLogic");
|
|
24
|
+
const utils_1 = require("./utils");
|
|
23
25
|
const AutocompleteInner = (props, ref) => {
|
|
24
26
|
const { isValueEmpty, isPopperVisible, autocompleteProps } = (0, useLogic_1.useLogic)(props);
|
|
25
27
|
const inputBaseRef = (0, react_1.useRef)(null);
|
|
26
|
-
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;
|
|
28
|
+
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;
|
|
27
29
|
const renderInput = (0, react_1.useCallback)((inputParams) => {
|
|
28
30
|
const createStartAdornment = () => {
|
|
29
31
|
if (!multiple || !Array.isArray(value)) {
|
|
@@ -99,13 +101,16 @@ const AutocompleteInner = (props, ref) => {
|
|
|
99
101
|
onChange,
|
|
100
102
|
]);
|
|
101
103
|
const renderOption = (0, react_1.useCallback)((optionProps, option, optionState, ownerState) => {
|
|
104
|
+
const { key, ...restOptionProps } = optionProps;
|
|
105
|
+
if ((0, utils_1.checkIsFocusedHelperOption)(option)) {
|
|
106
|
+
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));
|
|
107
|
+
}
|
|
102
108
|
if (externalRenderOption) {
|
|
103
109
|
return externalRenderOption(optionProps, option, optionState, ownerState);
|
|
104
110
|
}
|
|
105
111
|
const isSelected = Boolean(optionProps['aria-selected']);
|
|
106
|
-
const { key, ...restOptionProps } = optionProps;
|
|
107
112
|
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));
|
|
108
|
-
}, [multiple, overflowOption, externalRenderOption]);
|
|
113
|
+
}, [focusedHelperText, multiple, overflowOption, externalRenderOption]);
|
|
109
114
|
const renderPopper = (0, react_1.useCallback)((popperProps) => {
|
|
110
115
|
if (!isPopperVisible) {
|
|
111
116
|
return null;
|
|
@@ -122,6 +127,6 @@ const AutocompleteInner = (props, ref) => {
|
|
|
122
127
|
popper: {
|
|
123
128
|
component: renderPopper,
|
|
124
129
|
},
|
|
125
|
-
},
|
|
130
|
+
}, renderInput: renderInput, renderTags: renderTags, renderOption: renderOption, value: value, ...autocompleteProps }));
|
|
126
131
|
};
|
|
127
132
|
exports.Autocomplete = (0, forwardRefWithGeneric_1.forwardRefWithGeneric)(AutocompleteInner);
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export declare const DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;
|
|
2
2
|
export declare const INPUT_MIN_WIDTH = 110;
|
|
3
3
|
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";
|
|
4
|
+
export declare const FOCUSED_HELPER_OPTION: unique symbol;
|
|
4
5
|
export declare const autocompleteClassnames: {
|
|
5
6
|
root: string;
|
|
6
7
|
multiple: string;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.autocompleteClassnames = exports.DEFAULT_PLACEHOLDER = exports.INPUT_MIN_WIDTH = exports.DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = void 0;
|
|
3
|
+
exports.autocompleteClassnames = exports.FOCUSED_HELPER_OPTION = exports.DEFAULT_PLACEHOLDER = exports.INPUT_MIN_WIDTH = exports.DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = void 0;
|
|
4
4
|
const createUIKitClassname_1 = require("../utils/createUIKitClassname");
|
|
5
5
|
exports.DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;
|
|
6
6
|
exports.INPUT_MIN_WIDTH = 110;
|
|
7
7
|
exports.DEFAULT_PLACEHOLDER = 'Начните вводить для поиска';
|
|
8
|
+
exports.FOCUSED_HELPER_OPTION = Symbol('focusedHelperOption');
|
|
8
9
|
exports.autocompleteClassnames = {
|
|
9
10
|
root: (0, createUIKitClassname_1.createUIKitClassname)('autocomplete'),
|
|
10
11
|
multiple: (0, createUIKitClassname_1.createUIKitClassname)('autocomplete_multiple'),
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import MuiAutocomplete from '@mui/material/Autocomplete';
|
|
3
|
+
export declare const StyledFocusedHelperOption: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
|
|
4
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
5
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
6
|
+
}, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
|
|
3
7
|
export declare const StyledMenuItem: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("..").WithoutEmotionSpecific<Omit<import("@mui/material").MenuItemProps, "component">> & {
|
|
4
8
|
disabledReason?: string | undefined;
|
|
5
9
|
note?: string | undefined;
|
|
@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
23
23
|
return result;
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
exports.StyledAutocomplete = exports.StyledMenuItem = void 0;
|
|
26
|
+
exports.StyledAutocomplete = exports.StyledMenuItem = exports.StyledFocusedHelperOption = void 0;
|
|
27
27
|
const Autocomplete_1 = __importStar(require("@mui/material/Autocomplete"));
|
|
28
28
|
const FormControl_1 = require("@mui/material/FormControl");
|
|
29
29
|
const IconButton_1 = require("@mui/material/IconButton");
|
|
@@ -33,6 +33,15 @@ const MenuItem_1 = require("../MenuItem");
|
|
|
33
33
|
const SvgIcon_1 = require("../SvgIcon");
|
|
34
34
|
const styled_1 = require("../styled");
|
|
35
35
|
const constants_2 = require("./constants");
|
|
36
|
+
exports.StyledFocusedHelperOption = styled_1.styled.li `
|
|
37
|
+
&&.${Autocomplete_1.autocompleteClasses.option} {
|
|
38
|
+
display: flex;
|
|
39
|
+
justify-content: center;
|
|
40
|
+
align-items: center;
|
|
41
|
+
height: 48px;
|
|
42
|
+
opacity: 1;
|
|
43
|
+
}
|
|
44
|
+
`;
|
|
36
45
|
exports.StyledMenuItem = (0, styled_1.styled)(MenuItem_1.MenuItem) `
|
|
37
46
|
max-height: ${({ theme }) => theme.spacing(13)};
|
|
38
47
|
|
|
@@ -48,4 +48,8 @@ export type AutocompleteProps<TAutocompleteValueProps, TMultiple extends boolean
|
|
|
48
48
|
* Включает/отключает резервирование места под helperText
|
|
49
49
|
*/
|
|
50
50
|
hideHelperText?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* Текст подсказки в popover при фокусе
|
|
53
|
+
*/
|
|
54
|
+
focusedHelperText?: string;
|
|
51
55
|
};
|
|
@@ -1,16 +1,23 @@
|
|
|
1
|
-
import { type AutocompleteInputChangeReason } from '@mui/material
|
|
1
|
+
import { type AutocompleteChangeDetails, type AutocompleteChangeReason, type AutocompleteFreeSoloValueMapping, type AutocompleteInputChangeReason, type AutocompleteValue } from '@mui/material';
|
|
2
2
|
import { type SyntheticEvent } from 'react';
|
|
3
3
|
import { type AutocompleteProps } from '../types';
|
|
4
4
|
type UseLogicParams<TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean> = AutocompleteProps<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo>;
|
|
5
|
-
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>) => {
|
|
5
|
+
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>) => {
|
|
6
6
|
isValueEmpty: boolean;
|
|
7
|
-
isPopperVisible: boolean
|
|
7
|
+
isPopperVisible: boolean;
|
|
8
8
|
autocompleteProps: {
|
|
9
9
|
className: string;
|
|
10
10
|
isOptionEqualToValue: (option: TAutocompleteValueProps, currentValue: TAutocompleteValueProps) => boolean;
|
|
11
|
+
getOptionDisabled: (option: TAutocompleteValueProps) => boolean;
|
|
11
12
|
autoHighlight: boolean;
|
|
12
|
-
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;
|
|
13
|
+
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;
|
|
14
|
+
options: readonly TAutocompleteValueProps[];
|
|
15
|
+
getOptionLabel: (option: TAutocompleteValueProps | AutocompleteFreeSoloValueMapping<TFreeSolo>) => string;
|
|
16
|
+
filterOptions: ((options: TAutocompleteValueProps[], state: import("@mui/material").FilterOptionsState<TAutocompleteValueProps>) => TAutocompleteValueProps[]) | undefined;
|
|
17
|
+
groupBy: ((option: TAutocompleteValueProps) => string) | undefined;
|
|
18
|
+
onChange: (event: SyntheticEvent, newValue: AutocompleteValue<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo>, reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<TAutocompleteValueProps> | undefined) => void;
|
|
13
19
|
onInputChange: (event: SyntheticEvent, currentValue: string, reason: AutocompleteInputChangeReason) => void;
|
|
20
|
+
openOnFocus: boolean;
|
|
14
21
|
};
|
|
15
22
|
};
|
|
16
23
|
export {};
|
|
@@ -4,22 +4,81 @@ exports.useLogic = void 0;
|
|
|
4
4
|
const react_1 = require("react");
|
|
5
5
|
const cn_1 = require("../../utils/cn");
|
|
6
6
|
const constants_1 = require("../constants");
|
|
7
|
-
const utils_1 = require("
|
|
8
|
-
const
|
|
7
|
+
const utils_1 = require("../utils");
|
|
8
|
+
const utils_2 = require("./utils");
|
|
9
|
+
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, }) => {
|
|
9
10
|
const [innerInputValue, setInnerInputValue] = (0, react_1.useState)('');
|
|
10
|
-
const isValueEmpty = (0,
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
11
|
+
const isValueEmpty = (0, utils_2.checkIsInputEmpty)(value);
|
|
12
|
+
const isInputTextEmpty = (inputValue ?? '').length === 0 && innerInputValue.length === 0;
|
|
13
|
+
const hasOptions = options.length > 0;
|
|
14
|
+
const hasFocusedHelperText = Boolean(focusedHelperText);
|
|
15
|
+
const shouldShowFocusedHelper = hasFocusedHelperText &&
|
|
16
|
+
isInputTextEmpty &&
|
|
17
|
+
!hasOptions &&
|
|
18
|
+
!loading &&
|
|
19
|
+
!isLoadedDataError;
|
|
20
|
+
const isPopperVisible = (0, utils_2.checkIsPopperVisible)({
|
|
21
|
+
loading,
|
|
22
|
+
hasOptions,
|
|
23
|
+
isInputValueNotEmpty: !isInputTextEmpty,
|
|
24
|
+
isLoadedDataError,
|
|
25
|
+
shouldShowFocusedHelper,
|
|
26
|
+
});
|
|
27
|
+
const hasFocusedHelperOption = shouldShowFocusedHelper && Boolean(freeSolo);
|
|
28
|
+
const resolvedNoOptionsText = (0, react_1.useMemo)(() => {
|
|
29
|
+
if (isLoadedDataError) {
|
|
30
|
+
return loadedDataError;
|
|
31
|
+
}
|
|
32
|
+
if (shouldShowFocusedHelper) {
|
|
33
|
+
return focusedHelperText;
|
|
34
|
+
}
|
|
35
|
+
return noOptionsText;
|
|
36
|
+
}, [
|
|
37
|
+
isLoadedDataError,
|
|
38
|
+
loadedDataError,
|
|
39
|
+
shouldShowFocusedHelper,
|
|
40
|
+
focusedHelperText,
|
|
41
|
+
noOptionsText,
|
|
42
|
+
]);
|
|
43
|
+
const autocompleteOptions = (0, react_1.useMemo)(() => {
|
|
44
|
+
if (hasFocusedHelperOption) {
|
|
45
|
+
return [constants_1.FOCUSED_HELPER_OPTION];
|
|
46
|
+
}
|
|
47
|
+
return options;
|
|
48
|
+
}, [hasFocusedHelperOption, options]);
|
|
49
|
+
const resolveGetOptionLabel = (0, react_1.useCallback)((option) => {
|
|
50
|
+
if ((0, utils_1.checkIsFocusedHelperOption)(option)) {
|
|
51
|
+
return focusedHelperText ?? '';
|
|
52
|
+
}
|
|
53
|
+
if (externalGetOptionLabel) {
|
|
54
|
+
return externalGetOptionLabel(option);
|
|
55
|
+
}
|
|
56
|
+
const optionWithLabel = option;
|
|
57
|
+
return optionWithLabel.label ?? String(option);
|
|
58
|
+
}, [externalGetOptionLabel, focusedHelperText]);
|
|
59
|
+
const handleChange = (0, react_1.useCallback)((event, newValue, reason, details) => {
|
|
60
|
+
if ((0, utils_2.checkIsFocusedHelperChange)(newValue, details?.option)) {
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
onChange?.(event, newValue, reason, details);
|
|
64
|
+
}, [onChange]);
|
|
17
65
|
const isOptionEqualToValue = (0, react_1.useCallback)((option, currentValue) => {
|
|
66
|
+
if ((0, utils_1.checkIsFocusedHelperOption)(option) ||
|
|
67
|
+
(0, utils_1.checkIsFocusedHelperOption)(currentValue)) {
|
|
68
|
+
return false;
|
|
69
|
+
}
|
|
18
70
|
if (externalOptionEqualToValue) {
|
|
19
71
|
return externalOptionEqualToValue(option, currentValue);
|
|
20
72
|
}
|
|
21
73
|
return JSON.stringify(option) === JSON.stringify(currentValue);
|
|
22
74
|
}, [externalOptionEqualToValue]);
|
|
75
|
+
const resolveGetOptionDisabled = (0, react_1.useCallback)((option) => {
|
|
76
|
+
if ((0, utils_1.checkIsFocusedHelperOption)(option)) {
|
|
77
|
+
return true;
|
|
78
|
+
}
|
|
79
|
+
return externalGetOptionDisabled?.(option) ?? false;
|
|
80
|
+
}, [externalGetOptionDisabled]);
|
|
81
|
+
const resolvedOpenOnFocus = hasFocusedHelperText || Boolean(openOnFocus);
|
|
23
82
|
const handleInputChange = (event, currentValue, reason) => {
|
|
24
83
|
onInputChange?.(event, currentValue, reason);
|
|
25
84
|
if (!loading) {
|
|
@@ -31,16 +90,23 @@ const useLogic = ({ value, isOptionEqualToValue: externalOptionEqualToValue, aut
|
|
|
31
90
|
[constants_1.autocompleteClassnames.multiple]: multiple,
|
|
32
91
|
[constants_1.autocompleteClassnames.emptyValue]: isValueEmpty,
|
|
33
92
|
});
|
|
34
|
-
}, [multiple, isValueEmpty]);
|
|
93
|
+
}, [className, multiple, isValueEmpty]);
|
|
35
94
|
return {
|
|
36
95
|
isValueEmpty,
|
|
37
96
|
isPopperVisible,
|
|
38
97
|
autocompleteProps: {
|
|
39
98
|
className: classnames,
|
|
40
99
|
isOptionEqualToValue,
|
|
100
|
+
getOptionDisabled: resolveGetOptionDisabled,
|
|
41
101
|
autoHighlight: freeSolo ? false : autoHighlight,
|
|
42
|
-
noOptionsText:
|
|
102
|
+
noOptionsText: resolvedNoOptionsText,
|
|
103
|
+
options: autocompleteOptions,
|
|
104
|
+
getOptionLabel: resolveGetOptionLabel,
|
|
105
|
+
filterOptions: hasFocusedHelperOption ? undefined : externalFilterOptions,
|
|
106
|
+
groupBy: hasFocusedHelperOption ? undefined : externalGroupBy,
|
|
107
|
+
onChange: handleChange,
|
|
43
108
|
onInputChange: handleInputChange,
|
|
109
|
+
openOnFocus: resolvedOpenOnFocus,
|
|
44
110
|
},
|
|
45
111
|
};
|
|
46
112
|
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.checkIsFocusedHelperChange = void 0;
|
|
4
|
+
const utils_1 = require("../../../utils");
|
|
5
|
+
/**
|
|
6
|
+
* Проверяет, является ли значение при onChange focusedHelper-опцией (freeSolo)
|
|
7
|
+
*/
|
|
8
|
+
const checkIsFocusedHelperChange = (newValue, changedOption) => {
|
|
9
|
+
if ((0, utils_1.checkIsFocusedHelperOption)(changedOption)) {
|
|
10
|
+
return true;
|
|
11
|
+
}
|
|
12
|
+
if ((0, utils_1.checkIsFocusedHelperOption)(newValue)) {
|
|
13
|
+
return true;
|
|
14
|
+
}
|
|
15
|
+
if (Array.isArray(newValue) &&
|
|
16
|
+
newValue.some((item) => (0, utils_1.checkIsFocusedHelperOption)(item))) {
|
|
17
|
+
return true;
|
|
18
|
+
}
|
|
19
|
+
return false;
|
|
20
|
+
};
|
|
21
|
+
exports.checkIsFocusedHelperChange = checkIsFocusedHelperChange;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './checkIsFocusedHelperChange';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./checkIsFocusedHelperChange"), exports);
|
package/node/components/Autocomplete/useLogic/utils/checkIsPopperVisible/checkIsPopperVisible.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export type CheckIsPopperVisibleParams = {
|
|
2
|
+
loading?: boolean;
|
|
3
|
+
hasOptions: boolean;
|
|
4
|
+
isInputValueNotEmpty: boolean;
|
|
5
|
+
isLoadedDataError?: boolean;
|
|
6
|
+
shouldShowFocusedHelper: boolean;
|
|
7
|
+
};
|
|
8
|
+
export declare const checkIsPopperVisible: ({ loading, hasOptions, isInputValueNotEmpty, isLoadedDataError, shouldShowFocusedHelper, }: CheckIsPopperVisibleParams) => boolean;
|
package/node/components/Autocomplete/useLogic/utils/checkIsPopperVisible/checkIsPopperVisible.js
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.checkIsPopperVisible = void 0;
|
|
4
|
+
const checkIsPopperVisible = ({ loading = false, hasOptions, isInputValueNotEmpty, isLoadedDataError = false, shouldShowFocusedHelper, }) => {
|
|
5
|
+
if (shouldShowFocusedHelper || hasOptions || isLoadedDataError) {
|
|
6
|
+
return true;
|
|
7
|
+
}
|
|
8
|
+
return !loading && isInputValueNotEmpty;
|
|
9
|
+
};
|
|
10
|
+
exports.checkIsPopperVisible = checkIsPopperVisible;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { checkIsPopperVisible, type CheckIsPopperVisibleParams, } from './checkIsPopperVisible';
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.checkIsPopperVisible = void 0;
|
|
4
|
+
var checkIsPopperVisible_1 = require("./checkIsPopperVisible");
|
|
5
|
+
Object.defineProperty(exports, "checkIsPopperVisible", { enumerable: true, get: function () { return checkIsPopperVisible_1.checkIsPopperVisible; } });
|
|
@@ -15,3 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
17
|
__exportStar(require("./checkIsInputEmpty"), exports);
|
|
18
|
+
__exportStar(require("./checkIsPopperVisible"), exports);
|
|
19
|
+
__exportStar(require("./checkIsFocusedHelperChange"), exports);
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { FOCUSED_HELPER_OPTION } from '../../constants';
|
|
2
|
+
/**
|
|
3
|
+
* Определяет, является ли опция специальной опцией для отображения focusedHelperText при freeSolo=true
|
|
4
|
+
*/
|
|
5
|
+
export declare const checkIsFocusedHelperOption: (option: unknown) => option is typeof FOCUSED_HELPER_OPTION;
|
package/node/components/Autocomplete/utils/checkIsFocusedHelperOption/checkIsFocusedHelperOption.js
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.checkIsFocusedHelperOption = void 0;
|
|
4
|
+
const constants_1 = require("../../constants");
|
|
5
|
+
/**
|
|
6
|
+
* Определяет, является ли опция специальной опцией для отображения focusedHelperText при freeSolo=true
|
|
7
|
+
*/
|
|
8
|
+
const checkIsFocusedHelperOption = (option) => {
|
|
9
|
+
return option === constants_1.FOCUSED_HELPER_OPTION;
|
|
10
|
+
};
|
|
11
|
+
exports.checkIsFocusedHelperOption = checkIsFocusedHelperOption;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './checkIsFocusedHelperOption';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./checkIsFocusedHelperOption"), exports);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './checkIsFocusedHelperOption';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./checkIsFocusedHelperOption"), exports);
|