@synerise/ds-factors 0.18.4 → 0.18.5

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/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.18.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@0.18.4...@synerise/ds-factors@0.18.5) (2023-06-28)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **factors:** fixes debounced onchange for text field ([00df476](https://github.com/Synerise/synerise-design/commit/00df4764521cfb1c3cffa9b3240fd7a8e86d28bc))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [0.18.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@0.18.3...@synerise/ds-factors@0.18.4) (2023-06-14)
7
18
 
8
19
  **Note:** Version bump only for package @synerise/ds-factors
@@ -3,7 +3,7 @@ import Dropdown from '@synerise/ds-dropdown';
3
3
  import Icon, { CheckS } from '@synerise/ds-icon';
4
4
  import Tooltip from '@synerise/ds-tooltip';
5
5
  import Menu from '@synerise/ds-menu';
6
- import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
6
+ import { theme } from '@synerise/ds-core';
7
7
  import * as S from './FactorTypeSelector.styles';
8
8
  import { ALL_FACTOR_TYPES } from '../Factors.types';
9
9
  import { factorTypes } from '../Factors';
@@ -6,7 +6,7 @@ import Icon, { SearchM } from '@synerise/ds-icon';
6
6
  import Tabs from '@synerise/ds-tabs';
7
7
  import { focusWithArrowKeys, useOnClickOutside, getClosest } from '@synerise/ds-utils';
8
8
  import Result from '@synerise/ds-result';
9
- import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
9
+ import { theme } from '@synerise/ds-core';
10
10
  import Scrollbar from '@synerise/ds-scrollbar';
11
11
  import { v4 as uuid } from 'uuid';
12
12
  import Loader from '@synerise/ds-loader';
@@ -1,4 +1,4 @@
1
- import * as React from 'react';
1
+ import { FC } from 'react';
2
2
  import { InputProps } from '../../Factors.types';
3
- declare const TextInput: React.FC<InputProps>;
3
+ declare const TextInput: FC<InputProps>;
4
4
  export default TextInput;
@@ -1,14 +1,14 @@
1
1
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import * as React from 'react';
4
+ import { useCallback, useEffect, useMemo, useState, useRef } from 'react';
5
+ import { debounce } from 'lodash';
4
6
  import Icon, { FullScreenM } from '@synerise/ds-icon';
5
- import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
7
+ import { theme } from '@synerise/ds-core';
6
8
  import Autocomplete from '@synerise/ds-autocomplete'; // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
7
9
  // @ts-ignore
8
10
 
9
11
  import { Input } from '@synerise/ds-input';
10
- import { useState } from 'react';
11
- import { debounce } from 'lodash';
12
12
  import * as S from './Text.styles';
13
13
  import TextModal from './TextModal';
14
14
 
@@ -26,54 +26,61 @@ var TextInput = function TextInput(_ref) {
26
26
  _ref$readOnly = _ref.readOnly,
27
27
  readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
28
28
 
29
- var _React$useState = React.useState(false),
30
- openExpanseEditor = _React$useState[0],
31
- setOpenExpanseEditor = _React$useState[1];
29
+ var _useState = useState(false),
30
+ openExpanseEditor = _useState[0],
31
+ setOpenExpanseEditor = _useState[1];
32
32
 
33
- var _useState = useState(),
34
- inputRef = _useState[0],
35
- setInputRef = _useState[1];
33
+ var _useState2 = useState(),
34
+ inputRef = _useState2[0],
35
+ setInputRef = _useState2[1];
36
36
 
37
- var _React$useState2 = React.useState(value),
38
- localValue = _React$useState2[0],
39
- setLocalValue = _React$useState2[1];
37
+ var _useState3 = useState(value),
38
+ localValue = _useState3[0],
39
+ setLocalValue = _useState3[1];
40
40
 
41
- var _React$useState3 = React.useState(false),
42
- localError = _React$useState3[0],
43
- setLocalError = _React$useState3[1];
41
+ var _useState4 = useState(false),
42
+ localError = _useState4[0],
43
+ setLocalError = _useState4[1];
44
44
 
45
- var onChangeDebounce = React.useRef(debounce(onChange, 300)).current;
46
- React.useEffect(function () {
45
+ var onChangeRef = useRef(onChange);
46
+ useEffect(function () {
47
47
  if (inputRef != null && inputRef.current && opened) {
48
48
  inputRef.current.focus();
49
49
  }
50
50
  }, [inputRef, opened]);
51
- React.useEffect(function () {
51
+ useEffect(function () {
52
52
  setLocalValue(value);
53
53
  }, [value]);
54
- var handleChange = React.useCallback(function (event) {
55
- onChangeDebounce.cancel();
54
+ useEffect(function () {
55
+ onChangeRef.current = onChange;
56
+ }, [localValue, onChange]);
57
+ var debouncedOnChange = useMemo(function () {
58
+ var persistentOnChange = function persistentOnChange(inputValue) {
59
+ onChangeRef.current && onChangeRef.current(inputValue);
60
+ };
61
+
62
+ return debounce(persistentOnChange, 300);
63
+ }, []);
64
+ var handleChange = useCallback(function (event) {
56
65
  setLocalValue(event.target.value);
57
- onChangeDebounce(event.target.value);
66
+ debouncedOnChange(event.target.value);
58
67
 
59
68
  if (!event.target.value.length) {
60
69
  setLocalError(true);
61
70
  } else {
62
71
  setLocalError(false);
63
72
  }
64
- }, [onChangeDebounce]);
65
- var handleApply = React.useCallback(function (val) {
73
+ }, [setLocalValue, setLocalError, debouncedOnChange]);
74
+ var handleApply = useCallback(function (val) {
66
75
  setOpenExpanseEditor(false);
67
- onChangeDebounce.cancel();
68
76
  setLocalValue(val);
69
- onChangeDebounce(val);
70
- }, [onChangeDebounce]);
71
- var handleAutocomplete = React.useCallback(function (val) {
72
- onChangeDebounce.cancel();
77
+ debouncedOnChange(val);
78
+ }, [debouncedOnChange]);
79
+ var handleAutocomplete = useCallback(function (val) {
73
80
  setLocalValue(val);
74
- onChangeDebounce(val);
75
- }, [onChangeDebounce]);
76
- var autocompleteOptions = React.useMemo(function () {
81
+ debouncedOnChange(val);
82
+ }, [debouncedOnChange]);
83
+ var autocompleteOptions = useMemo(function () {
77
84
  return autocompleteText && autocompleteText.options.filter(function (option) {
78
85
  return option.toLowerCase().includes(String(localValue).toLowerCase());
79
86
  }) || [];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-factors",
3
- "version": "0.18.4",
3
+ "version": "0.18.5",
4
4
  "description": "Factors UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -32,22 +32,22 @@
32
32
  ],
33
33
  "types": "dist/index.d.ts",
34
34
  "dependencies": {
35
- "@synerise/ds-autocomplete": "^0.4.42",
36
- "@synerise/ds-badge": "^0.6.28",
37
- "@synerise/ds-button": "^0.17.18",
38
- "@synerise/ds-date-picker": "^0.10.2",
39
- "@synerise/ds-date-range-picker": "^0.21.12",
40
- "@synerise/ds-dropdown": "^0.17.67",
41
- "@synerise/ds-icon": "^0.56.0",
42
- "@synerise/ds-information-card": "^0.3.18",
43
- "@synerise/ds-inline-edit": "^0.6.65",
44
- "@synerise/ds-input": "^0.18.43",
45
- "@synerise/ds-input-number": "^0.8.11",
46
- "@synerise/ds-menu": "^0.17.11",
47
- "@synerise/ds-modal": "^0.16.16",
48
- "@synerise/ds-result": "^0.6.25",
49
- "@synerise/ds-tabs": "^0.13.63",
50
- "@synerise/ds-typography": "^0.12.7",
35
+ "@synerise/ds-autocomplete": "^0.4.43",
36
+ "@synerise/ds-badge": "^0.6.29",
37
+ "@synerise/ds-button": "^0.17.19",
38
+ "@synerise/ds-date-picker": "^0.10.3",
39
+ "@synerise/ds-date-range-picker": "^0.21.13",
40
+ "@synerise/ds-dropdown": "^0.17.68",
41
+ "@synerise/ds-icon": "^0.57.0",
42
+ "@synerise/ds-information-card": "^0.3.19",
43
+ "@synerise/ds-inline-edit": "^0.6.66",
44
+ "@synerise/ds-input": "^0.18.44",
45
+ "@synerise/ds-input-number": "^0.8.12",
46
+ "@synerise/ds-menu": "^0.17.12",
47
+ "@synerise/ds-modal": "^0.16.17",
48
+ "@synerise/ds-result": "^0.6.26",
49
+ "@synerise/ds-tabs": "^0.13.64",
50
+ "@synerise/ds-typography": "^0.12.8",
51
51
  "@synerise/ds-utils": "^0.19.0",
52
52
  "classnames": "^2.2.6",
53
53
  "react-window": "1.8.5"
@@ -56,5 +56,5 @@
56
56
  "@synerise/ds-core": "*",
57
57
  "react": ">=16.9.0 < 17.0.0"
58
58
  },
59
- "gitHead": "4fa463dee08db3befeec954d744ec3c44aeecd9d"
59
+ "gitHead": "948b33abd56086fc73880204892f90bd6ddc0a72"
60
60
  }