@bbl-digital/snorre 3.0.13 → 3.0.14

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 (5) hide show
  1. package/dist/bundle.js +15 -23
  2. package/esm/core/Autocomplete/hooks/useAutocomplete.js +15 -23
  3. package/lib/core/Autocomplete/hooks/useAutocomplete.d.ts.map +1 -1
  4. package/lib/core/Autocomplete/hooks/useAutocomplete.js +15 -23
  5. package/package.json +1 -1
package/dist/bundle.js CHANGED
@@ -31850,25 +31850,22 @@
31850
31850
  const [inputDirty, setInputDirty] = React.useState(false);
31851
31851
  const debouncedValue = useDebounce(value, props.debounceDelay ?? 0);
31852
31852
  const [inputValues, setInputValues] = React.useState(props.values);
31853
+ const labelKey = props.labelFromValues ?? 'label';
31853
31854
 
31854
31855
  const handleValueClick = value => {
31855
31856
  props.onSelectItem?.(value);
31856
-
31857
- if (props.fuzzy) {
31858
- setValueChanged(value[props.labelFromValues ?? 'label']);
31859
- }
31860
-
31857
+ if (props.fuzzy) setValueChanged(value[labelKey]);
31861
31858
  setShowValues(false);
31862
31859
  };
31863
31860
 
31864
31861
  const clearSelectedItem = () => handleValueClick({
31865
- [props.labelFromValues ?? 'label']: '',
31862
+ [labelKey]: '',
31866
31863
  [props.keyFromValues ?? 'key']: ''
31867
31864
  });
31868
31865
 
31869
31866
  const onInputChange = e => {
31870
31867
  setInputDirty(true);
31871
- if (inputValues) setHighlightedIndex(0);
31868
+ if (renderedValues) setHighlightedIndex(0);
31872
31869
  setValueChanged(e.target.value); // Should not use onChange whenever we have fuzzy search on
31873
31870
 
31874
31871
  if (props.fuzzy) {
@@ -31880,23 +31877,18 @@
31880
31877
  };
31881
31878
 
31882
31879
  const handleOnInputClick = () => {
31883
- if (inputValues?.length) setHighlightedIndex(0);
31880
+ if (renderedValues?.length) setHighlightedIndex(0);
31884
31881
  setShowValues(true);
31885
31882
  };
31886
31883
 
31887
31884
  const onFuzzyBlur = e => {
31888
- // If the value of the input is changed, and does not match the value of the values array,
31889
- // we should revert back the input value to the original value
31890
- if (e.target.value === props.value) {
31891
- return;
31892
- } // If target value is the same as a value from the values array, we should set the value for the user
31893
-
31885
+ if (e.target.value === props.value) return; // If target value is the same as a value from the values array, we should set the value for the user
31894
31886
 
31895
31887
  if (inputValues?.length) {
31896
- const valueInInputValues = inputValues.find(item => item[props.labelFromValues ?? 'label'].length && item[props.labelFromValues ?? 'label'].toLowerCase() === e.target.value.toLowerCase());
31888
+ const valueInInputValues = inputValues.find(item => item[labelKey].length && item[labelKey].toLowerCase() === e.target.value.toLowerCase());
31897
31889
 
31898
31890
  if (valueInInputValues) {
31899
- const val = valueInInputValues[props.labelFromValues ?? 'label'];
31891
+ const val = valueInInputValues[labelKey];
31900
31892
  setValueChanged(val);
31901
31893
  handleValueClick(valueInInputValues);
31902
31894
  return;
@@ -31914,7 +31906,7 @@
31914
31906
 
31915
31907
  if (props.fuzzy) {
31916
31908
  const fuzzyOptions = {
31917
- keys: [props.labelFromValues ?? 'label']
31909
+ keys: [labelKey]
31918
31910
  };
31919
31911
  return matchSorter.matchSorter(props.values, value ?? '', fuzzyOptions);
31920
31912
  }
@@ -31944,11 +31936,11 @@
31944
31936
  });
31945
31937
  }
31946
31938
 
31947
- if (highlightedIndex === null || !inputValues?.length) {
31939
+ if (highlightedIndex === null || !renderedValues?.length) {
31948
31940
  return;
31949
31941
  }
31950
31942
 
31951
- const item = inputValues[highlightedIndex];
31943
+ const item = renderedValues[highlightedIndex];
31952
31944
  handleValueClick(item);
31953
31945
  setShowValues(false);
31954
31946
  };
@@ -31958,7 +31950,7 @@
31958
31950
  e.stopPropagation();
31959
31951
  if (!showValues) return;
31960
31952
 
31961
- if (highlightedIndex === null || !inputValues?.length) {
31953
+ if (highlightedIndex === null || !renderedValues?.length) {
31962
31954
  return;
31963
31955
  }
31964
31956
 
@@ -31978,13 +31970,13 @@
31978
31970
  e.preventDefault();
31979
31971
  e.stopPropagation();
31980
31972
 
31981
- if (highlightedIndex === null || !inputValues?.length) {
31973
+ if (highlightedIndex === null || !renderedValues?.length) {
31982
31974
  return;
31983
31975
  }
31984
31976
 
31985
31977
  const newHighlightIndex = highlightedIndex + 1;
31986
31978
 
31987
- if (newHighlightIndex === inputValues.length) {
31979
+ if (newHighlightIndex === renderedValues.length) {
31988
31980
  setHighlightedIndex(null);
31989
31981
  setShowValues(false);
31990
31982
  return;
@@ -32012,7 +32004,7 @@
32012
32004
  key
32013
32005
  } = e;
32014
32006
 
32015
- if (showValues && inputValues?.length) {
32007
+ if (showValues && renderedValues?.length) {
32016
32008
  setHighlightedIndex(0);
32017
32009
  } else {
32018
32010
  setHighlightedIndex(null);
package/esm/core/Autocomplete/hooks/useAutocomplete.js CHANGED
@@ -10,25 +10,22 @@ const useAutocomplete = props => {
10
10
  const [inputDirty, setInputDirty] = useState(false);
11
11
  const debouncedValue = useDebounce(value, props.debounceDelay ?? 0);
12
12
  const [inputValues, setInputValues] = useState(props.values);
13
+ const labelKey = props.labelFromValues ?? 'label';
13
14
 
14
15
  const handleValueClick = value => {
15
16
  props.onSelectItem?.(value);
16
-
17
- if (props.fuzzy) {
18
- setValueChanged(value[props.labelFromValues ?? 'label']);
19
- }
20
-
17
+ if (props.fuzzy) setValueChanged(value[labelKey]);
21
18
  setShowValues(false);
22
19
  };
23
20
 
24
21
  const clearSelectedItem = () => handleValueClick({
25
- [props.labelFromValues ?? 'label']: '',
22
+ [labelKey]: '',
26
23
  [props.keyFromValues ?? 'key']: ''
27
24
  });
28
25
 
29
26
  const onInputChange = e => {
30
27
  setInputDirty(true);
31
- if (inputValues) setHighlightedIndex(0);
28
+ if (renderedValues) setHighlightedIndex(0);
32
29
  setValueChanged(e.target.value); // Should not use onChange whenever we have fuzzy search on
33
30
 
34
31
  if (props.fuzzy) {
@@ -40,23 +37,18 @@ const useAutocomplete = props => {
40
37
  };
41
38
 
42
39
  const handleOnInputClick = () => {
43
- if (inputValues?.length) setHighlightedIndex(0);
40
+ if (renderedValues?.length) setHighlightedIndex(0);
44
41
  setShowValues(true);
45
42
  };
46
43
 
47
44
  const onFuzzyBlur = e => {
48
- // If the value of the input is changed, and does not match the value of the values array,
49
- // we should revert back the input value to the original value
50
- if (e.target.value === props.value) {
51
- return;
52
- } // If target value is the same as a value from the values array, we should set the value for the user
53
-
45
+ if (e.target.value === props.value) return; // If target value is the same as a value from the values array, we should set the value for the user
54
46
 
55
47
  if (inputValues?.length) {
56
- const valueInInputValues = inputValues.find(item => item[props.labelFromValues ?? 'label'].length && item[props.labelFromValues ?? 'label'].toLowerCase() === e.target.value.toLowerCase());
48
+ const valueInInputValues = inputValues.find(item => item[labelKey].length && item[labelKey].toLowerCase() === e.target.value.toLowerCase());
57
49
 
58
50
  if (valueInInputValues) {
59
- const val = valueInInputValues[props.labelFromValues ?? 'label'];
51
+ const val = valueInInputValues[labelKey];
60
52
  setValueChanged(val);
61
53
  handleValueClick(valueInInputValues);
62
54
  return;
@@ -74,7 +66,7 @@ const useAutocomplete = props => {
74
66
 
75
67
  if (props.fuzzy) {
76
68
  const fuzzyOptions = {
77
- keys: [props.labelFromValues ?? 'label']
69
+ keys: [labelKey]
78
70
  };
79
71
  return matchSorter(props.values, value ?? '', fuzzyOptions);
80
72
  }
@@ -104,11 +96,11 @@ const useAutocomplete = props => {
104
96
  });
105
97
  }
106
98
 
107
- if (highlightedIndex === null || !inputValues?.length) {
99
+ if (highlightedIndex === null || !renderedValues?.length) {
108
100
  return;
109
101
  }
110
102
 
111
- const item = inputValues[highlightedIndex];
103
+ const item = renderedValues[highlightedIndex];
112
104
  handleValueClick(item);
113
105
  setShowValues(false);
114
106
  };
@@ -118,7 +110,7 @@ const useAutocomplete = props => {
118
110
  e.stopPropagation();
119
111
  if (!showValues) return;
120
112
 
121
- if (highlightedIndex === null || !inputValues?.length) {
113
+ if (highlightedIndex === null || !renderedValues?.length) {
122
114
  return;
123
115
  }
124
116
 
@@ -138,13 +130,13 @@ const useAutocomplete = props => {
138
130
  e.preventDefault();
139
131
  e.stopPropagation();
140
132
 
141
- if (highlightedIndex === null || !inputValues?.length) {
133
+ if (highlightedIndex === null || !renderedValues?.length) {
142
134
  return;
143
135
  }
144
136
 
145
137
  const newHighlightIndex = highlightedIndex + 1;
146
138
 
147
- if (newHighlightIndex === inputValues.length) {
139
+ if (newHighlightIndex === renderedValues.length) {
148
140
  setHighlightedIndex(null);
149
141
  setShowValues(false);
150
142
  return;
@@ -172,7 +164,7 @@ const useAutocomplete = props => {
172
164
  key
173
165
  } = e;
174
166
 
175
- if (showValues && inputValues?.length) {
167
+ if (showValues && renderedValues?.length) {
176
168
  setHighlightedIndex(0);
177
169
  } else {
178
170
  setHighlightedIndex(null);
package/lib/core/Autocomplete/hooks/useAutocomplete.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useAutocomplete.d.ts","sourceRoot":"","sources":["../../../../src/packages/core/Autocomplete/hooks/useAutocomplete.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAE1D,QAAA,MAAM,eAAe,UAAW,MAAM;;;;;;uBA4BV,MAAM,WAAW,CAAC,gBAAgB,CAAC;yBAqJjC,mBAAmB,CAAC,gBAAgB,CAAC;+BAZ/B,mBAAmB,CAAC,gBAAgB,CAAC;;qBArH/C,gBAAgB,CAAC,gBAAgB,EAAE,OAAO,CAAC;;;;;;CA+MpE,CAAA;AAED,eAAe,eAAe,CAAA"}
1
+ {"version":3,"file":"useAutocomplete.d.ts","sourceRoot":"","sources":["../../../../src/packages/core/Autocomplete/hooks/useAutocomplete.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAE1D,QAAA,MAAM,eAAe,UAAW,MAAM;;;;;;uBA2BV,MAAM,WAAW,CAAC,gBAAgB,CAAC;yBA6IjC,mBAAmB,CAAC,gBAAgB,CAAC;+BAZ/B,mBAAmB,CAAC,gBAAgB,CAAC;;qBA7G/C,gBAAgB,CAAC,gBAAgB,EAAE,OAAO,CAAC;;;;;;CAuMpE,CAAA;AAED,eAAe,eAAe,CAAA"}
package/lib/core/Autocomplete/hooks/useAutocomplete.js CHANGED
@@ -10,25 +10,22 @@ const useAutocomplete = props => {
10
10
  const [inputDirty, setInputDirty] = useState(false);
11
11
  const debouncedValue = useDebounce(value, props.debounceDelay ?? 0);
12
12
  const [inputValues, setInputValues] = useState(props.values);
13
+ const labelKey = props.labelFromValues ?? 'label';
13
14
 
14
15
  const handleValueClick = value => {
15
16
  props.onSelectItem?.(value);
16
-
17
- if (props.fuzzy) {
18
- setValueChanged(value[props.labelFromValues ?? 'label']);
19
- }
20
-
17
+ if (props.fuzzy) setValueChanged(value[labelKey]);
21
18
  setShowValues(false);
22
19
  };
23
20
 
24
21
  const clearSelectedItem = () => handleValueClick({
25
- [props.labelFromValues ?? 'label']: '',
22
+ [labelKey]: '',
26
23
  [props.keyFromValues ?? 'key']: ''
27
24
  });
28
25
 
29
26
  const onInputChange = e => {
30
27
  setInputDirty(true);
31
- if (inputValues) setHighlightedIndex(0);
28
+ if (renderedValues) setHighlightedIndex(0);
32
29
  setValueChanged(e.target.value); // Should not use onChange whenever we have fuzzy search on
33
30
 
34
31
  if (props.fuzzy) {
@@ -40,23 +37,18 @@ const useAutocomplete = props => {
40
37
  };
41
38
 
42
39
  const handleOnInputClick = () => {
43
- if (inputValues?.length) setHighlightedIndex(0);
40
+ if (renderedValues?.length) setHighlightedIndex(0);
44
41
  setShowValues(true);
45
42
  };
46
43
 
47
44
  const onFuzzyBlur = e => {
48
- // If the value of the input is changed, and does not match the value of the values array,
49
- // we should revert back the input value to the original value
50
- if (e.target.value === props.value) {
51
- return;
52
- } // If target value is the same as a value from the values array, we should set the value for the user
53
-
45
+ if (e.target.value === props.value) return; // If target value is the same as a value from the values array, we should set the value for the user
54
46
 
55
47
  if (inputValues?.length) {
56
- const valueInInputValues = inputValues.find(item => item[props.labelFromValues ?? 'label'].length && item[props.labelFromValues ?? 'label'].toLowerCase() === e.target.value.toLowerCase());
48
+ const valueInInputValues = inputValues.find(item => item[labelKey].length && item[labelKey].toLowerCase() === e.target.value.toLowerCase());
57
49
 
58
50
  if (valueInInputValues) {
59
- const val = valueInInputValues[props.labelFromValues ?? 'label'];
51
+ const val = valueInInputValues[labelKey];
60
52
  setValueChanged(val);
61
53
  handleValueClick(valueInInputValues);
62
54
  return;
@@ -74,7 +66,7 @@ const useAutocomplete = props => {
74
66
 
75
67
  if (props.fuzzy) {
76
68
  const fuzzyOptions = {
77
- keys: [props.labelFromValues ?? 'label']
69
+ keys: [labelKey]
78
70
  };
79
71
  return matchSorter(props.values, value ?? '', fuzzyOptions);
80
72
  }
@@ -104,11 +96,11 @@ const useAutocomplete = props => {
104
96
  });
105
97
  }
106
98
 
107
- if (highlightedIndex === null || !inputValues?.length) {
99
+ if (highlightedIndex === null || !renderedValues?.length) {
108
100
  return;
109
101
  }
110
102
 
111
- const item = inputValues[highlightedIndex];
103
+ const item = renderedValues[highlightedIndex];
112
104
  handleValueClick(item);
113
105
  setShowValues(false);
114
106
  };
@@ -118,7 +110,7 @@ const useAutocomplete = props => {
118
110
  e.stopPropagation();
119
111
  if (!showValues) return;
120
112
 
121
- if (highlightedIndex === null || !inputValues?.length) {
113
+ if (highlightedIndex === null || !renderedValues?.length) {
122
114
  return;
123
115
  }
124
116
 
@@ -138,13 +130,13 @@ const useAutocomplete = props => {
138
130
  e.preventDefault();
139
131
  e.stopPropagation();
140
132
 
141
- if (highlightedIndex === null || !inputValues?.length) {
133
+ if (highlightedIndex === null || !renderedValues?.length) {
142
134
  return;
143
135
  }
144
136
 
145
137
  const newHighlightIndex = highlightedIndex + 1;
146
138
 
147
- if (newHighlightIndex === inputValues.length) {
139
+ if (newHighlightIndex === renderedValues.length) {
148
140
  setHighlightedIndex(null);
149
141
  setShowValues(false);
150
142
  return;
@@ -172,7 +164,7 @@ const useAutocomplete = props => {
172
164
  key
173
165
  } = e;
174
166
 
175
- if (showValues && inputValues?.length) {
167
+ if (showValues && renderedValues?.length) {
176
168
  setHighlightedIndex(0);
177
169
  } else {
178
170
  setHighlightedIndex(null);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bbl-digital/snorre",
3
- "version": "3.0.13",
3
+ "version": "3.0.14",
4
4
  "description": "Design library for BBL Digital",
5
5
  "license": "MIT",
6
6
  "main": "./lib/index.js",