@astral/ui 4.73.1 → 4.74.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.
Files changed (7) hide show
  1. package/components/SearchField/types.d.ts +9 -0
  2. package/components/SearchField/useLogic/useLogic.d.ts +1 -1
  3. package/components/SearchField/useLogic/useLogic.js +28 -16
  4. package/node/components/SearchField/types.d.ts +9 -0
  5. package/node/components/SearchField/useLogic/useLogic.d.ts +1 -1
  6. package/node/components/SearchField/useLogic/useLogic.js +27 -15
  7. package/package.json +1 -1
package/components/SearchField/types.d.ts CHANGED
@@ -12,4 +12,13 @@ export type SearchFieldProps = Omit<TextFieldProps, 'startAdornment' | 'endAdorn
12
12
  * Если true, будет отображаться лоадер в конце инпута
13
13
  */
14
14
  isLoading?: boolean;
15
+ /**
16
+ * Если true, вводимое пользователем значение будет применяться с debounce задержкой
17
+ */
18
+ isDebounced?: boolean;
19
+ /**
20
+ * Время, на которое будет откладываться вызов onChange при вводе символов в инпут
21
+ * @default 250
22
+ */
23
+ debounceDelay?: number;
15
24
  };
package/components/SearchField/useLogic/useLogic.d.ts CHANGED
@@ -15,5 +15,5 @@ type UseLogicResult = {
15
15
  onBlur: (event: FocusEvent<HTMLInputElement>) => void;
16
16
  hideHelperText?: boolean;
17
17
  };
18
- export declare const useLogic: ({ onChange: propsOnChange, defaultValue, value, inputRef: externalInputRef, disabled, onBlur: propsOnBlur, fullWidth, isLoading, placeholder, inputComponent, hideHelperText, ...restProps }: SearchFieldProps) => UseLogicResult;
18
+ export declare const useLogic: ({ onChange: propsOnChange, defaultValue, value, inputRef: externalInputRef, disabled, onBlur: propsOnBlur, fullWidth, isLoading, placeholder, inputComponent, hideHelperText, isDebounced, debounceDelay, ...restProps }: SearchFieldProps) => UseLogicResult;
19
19
  export {};
package/components/SearchField/useLogic/useLogic.js CHANGED
@@ -1,7 +1,9 @@
1
- import { useEffect, useState, } from 'react';
1
+ import { useCallback, useEffect, useMemo, useState, } from 'react';
2
2
  import { useFirstMountState } from '../../useFirstMountState';
3
3
  import { useForwardedRef } from '../../useForwardedRef';
4
- export const useLogic = ({ onChange: propsOnChange, defaultValue, value, inputRef: externalInputRef, disabled, onBlur: propsOnBlur, fullWidth, isLoading, placeholder = 'Поиск', inputComponent, hideHelperText = true, ...restProps }) => {
4
+ import { debounce } from '../../utils/debounce';
5
+ const DEFAULT_DEBOUNCE_TIME = 250;
6
+ export const useLogic = ({ onChange: propsOnChange, defaultValue, value, inputRef: externalInputRef, disabled, onBlur: propsOnBlur, fullWidth, isLoading, placeholder = 'Поиск', inputComponent, hideHelperText = true, isDebounced, debounceDelay = DEFAULT_DEBOUNCE_TIME, ...restProps }) => {
5
7
  const inputRef = useForwardedRef(externalInputRef);
6
8
  const [internalValue, setInternalValue] = useState(defaultValue || value || '');
7
9
  const isFirstRender = useFirstMountState();
@@ -13,13 +15,29 @@ export const useLogic = ({ onChange: propsOnChange, defaultValue, value, inputRe
13
15
  setInternalValue('');
14
16
  }
15
17
  }, [value]);
18
+ const createChangeEvent = useCallback((eventValue) => ({
19
+ target: {
20
+ value: eventValue,
21
+ },
22
+ }), []);
23
+ const debouncedOnChange = useMemo(() => isDebounced
24
+ ? debounce((targetValue) => propsOnChange?.(createChangeEvent(targetValue)), {
25
+ waitMs: debounceDelay,
26
+ }).call
27
+ : () => undefined, [createChangeEvent, propsOnChange, isDebounced]);
16
28
  const onChange = (event) => {
17
- const trimmedEvent = {
18
- ...event,
19
- target: { ...event.target, value: event.target.value.trim() },
20
- };
21
- propsOnChange?.(trimmedEvent);
22
- setInternalValue(event.target.value);
29
+ const originalValue = event.target.value;
30
+ setInternalValue(originalValue);
31
+ if (!propsOnChange) {
32
+ return;
33
+ }
34
+ const trimmedValue = originalValue.trim();
35
+ return isDebounced
36
+ ? debouncedOnChange(trimmedValue)
37
+ : propsOnChange({
38
+ ...event,
39
+ target: { ...event.target, value: trimmedValue },
40
+ });
23
41
  };
24
42
  const onBlur = (event) => {
25
43
  propsOnBlur?.(event);
@@ -27,15 +45,9 @@ export const useLogic = ({ onChange: propsOnChange, defaultValue, value, inputRe
27
45
  setInternalValue(value);
28
46
  }
29
47
  };
30
- const createChangeEvent = (eventValue) => {
31
- return {
32
- target: {
33
- value: eventValue,
34
- },
35
- };
36
- };
37
48
  const onClearValue = () => {
38
- onChange?.(createChangeEvent(''));
49
+ setInternalValue('');
50
+ propsOnChange?.(createChangeEvent(''));
39
51
  inputRef.current.value = '';
40
52
  inputRef.current?.focus();
41
53
  };
package/node/components/SearchField/types.d.ts CHANGED
@@ -12,4 +12,13 @@ export type SearchFieldProps = Omit<TextFieldProps, 'startAdornment' | 'endAdorn
12
12
  * Если true, будет отображаться лоадер в конце инпута
13
13
  */
14
14
  isLoading?: boolean;
15
+ /**
16
+ * Если true, вводимое пользователем значение будет применяться с debounce задержкой
17
+ */
18
+ isDebounced?: boolean;
19
+ /**
20
+ * Время, на которое будет откладываться вызов onChange при вводе символов в инпут
21
+ * @default 250
22
+ */
23
+ debounceDelay?: number;
15
24
  };
package/node/components/SearchField/useLogic/useLogic.d.ts CHANGED
@@ -15,5 +15,5 @@ type UseLogicResult = {
15
15
  onBlur: (event: FocusEvent<HTMLInputElement>) => void;
16
16
  hideHelperText?: boolean;
17
17
  };
18
- export declare const useLogic: ({ onChange: propsOnChange, defaultValue, value, inputRef: externalInputRef, disabled, onBlur: propsOnBlur, fullWidth, isLoading, placeholder, inputComponent, hideHelperText, ...restProps }: SearchFieldProps) => UseLogicResult;
18
+ export declare const useLogic: ({ onChange: propsOnChange, defaultValue, value, inputRef: externalInputRef, disabled, onBlur: propsOnBlur, fullWidth, isLoading, placeholder, inputComponent, hideHelperText, isDebounced, debounceDelay, ...restProps }: SearchFieldProps) => UseLogicResult;
19
19
  export {};
package/node/components/SearchField/useLogic/useLogic.js CHANGED
@@ -4,7 +4,9 @@ exports.useLogic = void 0;
4
4
  const react_1 = require("react");
5
5
  const useFirstMountState_1 = require("../../useFirstMountState");
6
6
  const useForwardedRef_1 = require("../../useForwardedRef");
7
- const useLogic = ({ onChange: propsOnChange, defaultValue, value, inputRef: externalInputRef, disabled, onBlur: propsOnBlur, fullWidth, isLoading, placeholder = 'Поиск', inputComponent, hideHelperText = true, ...restProps }) => {
7
+ const debounce_1 = require("../../utils/debounce");
8
+ const DEFAULT_DEBOUNCE_TIME = 250;
9
+ const useLogic = ({ onChange: propsOnChange, defaultValue, value, inputRef: externalInputRef, disabled, onBlur: propsOnBlur, fullWidth, isLoading, placeholder = 'Поиск', inputComponent, hideHelperText = true, isDebounced, debounceDelay = DEFAULT_DEBOUNCE_TIME, ...restProps }) => {
8
10
  const inputRef = (0, useForwardedRef_1.useForwardedRef)(externalInputRef);
9
11
  const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue || value || '');
10
12
  const isFirstRender = (0, useFirstMountState_1.useFirstMountState)();
@@ -16,13 +18,29 @@ const useLogic = ({ onChange: propsOnChange, defaultValue, value, inputRef: exte
16
18
  setInternalValue('');
17
19
  }
18
20
  }, [value]);
21
+ const createChangeEvent = (0, react_1.useCallback)((eventValue) => ({
22
+ target: {
23
+ value: eventValue,
24
+ },
25
+ }), []);
26
+ const debouncedOnChange = (0, react_1.useMemo)(() => isDebounced
27
+ ? (0, debounce_1.debounce)((targetValue) => propsOnChange?.(createChangeEvent(targetValue)), {
28
+ waitMs: debounceDelay,
29
+ }).call
30
+ : () => undefined, [createChangeEvent, propsOnChange, isDebounced]);
19
31
  const onChange = (event) => {
20
- const trimmedEvent = {
21
- ...event,
22
- target: { ...event.target, value: event.target.value.trim() },
23
- };
24
- propsOnChange?.(trimmedEvent);
25
- setInternalValue(event.target.value);
32
+ const originalValue = event.target.value;
33
+ setInternalValue(originalValue);
34
+ if (!propsOnChange) {
35
+ return;
36
+ }
37
+ const trimmedValue = originalValue.trim();
38
+ return isDebounced
39
+ ? debouncedOnChange(trimmedValue)
40
+ : propsOnChange({
41
+ ...event,
42
+ target: { ...event.target, value: trimmedValue },
43
+ });
26
44
  };
27
45
  const onBlur = (event) => {
28
46
  propsOnBlur?.(event);
@@ -30,15 +48,9 @@ const useLogic = ({ onChange: propsOnChange, defaultValue, value, inputRef: exte
30
48
  setInternalValue(value);
31
49
  }
32
50
  };
33
- const createChangeEvent = (eventValue) => {
34
- return {
35
- target: {
36
- value: eventValue,
37
- },
38
- };
39
- };
40
51
  const onClearValue = () => {
41
- onChange?.(createChangeEvent(''));
52
+ setInternalValue('');
53
+ propsOnChange?.(createChangeEvent(''));
42
54
  inputRef.current.value = '';
43
55
  inputRef.current?.focus();
44
56
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astral/ui",
3
- "version": "4.73.1",
3
+ "version": "4.74.0",
4
4
  "browser": "./index.js",
5
5
  "main": "./node/index.js",
6
6
  "dependencies": {