@bbl-digital/snorre 2.2.108 → 2.2.111

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 +21 -9
  2. package/esm/core/Autocomplete/index.js +22 -10
  3. package/lib/core/Autocomplete/index.d.ts.map +1 -1
  4. package/lib/core/Autocomplete/index.js +22 -10
  5. package/package.json +1 -1
package/dist/bundle.js CHANGED
@@ -31466,6 +31466,7 @@
31466
31466
  css,
31467
31467
  ...props
31468
31468
  }, ref) => {
31469
+ const customInputReferance = React.useRef(null);
31469
31470
  const {
31470
31471
  optionsHeight,
31471
31472
  optionsRef
@@ -31480,15 +31481,8 @@
31480
31481
  const onInputChange = e => {
31481
31482
  setInputDirty(true);
31482
31483
  setValueChanged(e.target.value);
31483
-
31484
- if (props.values) {
31485
- // Maybe?
31486
- setHighlightedIndex(0);
31487
- }
31488
-
31489
- if (props.onChange) {
31490
- props.onChange(e);
31491
- }
31484
+ if (props.values) setHighlightedIndex(0);
31485
+ if (props.onChange) props.onChange(e);
31492
31486
  };
31493
31487
 
31494
31488
  const handleOnInputClick = () => {
@@ -31636,6 +31630,23 @@
31636
31630
  document.removeEventListener('mousedown', handleClickOutside);
31637
31631
  };
31638
31632
  }, [showValues, valuesRef]);
31633
+ React.useEffect(() => {
31634
+ const handleClickOutside = e => {
31635
+ const node = customInputReferance.current;
31636
+ if (node && node.contains(e.target)) return;
31637
+ setShowValues(false);
31638
+ };
31639
+
31640
+ if (showValues) {
31641
+ document.addEventListener('keydown', handleClickOutside);
31642
+ } else {
31643
+ document.removeEventListener('keydown', handleClickOutside);
31644
+ }
31645
+
31646
+ return () => {
31647
+ document.removeEventListener('keydown', handleClickOutside);
31648
+ };
31649
+ }, [showValues, valuesRef]);
31639
31650
  return jsxRuntime$1.jsxs(jsxRuntime$1.Fragment, {
31640
31651
  children: [jsxRuntime$1.jsxs("label", {
31641
31652
  css: theme => [styles.default(theme), (props.invalid || props.invalidMessage) && styles.invalid(theme), props.validation && styles.validation, height && styles.height(height), css && css],
@@ -31697,6 +31708,7 @@
31697
31708
  children: props.labelFromValues ? item[props.labelFromValues] : item.label
31698
31709
  }, props.keyFromValues ? item[props.keyFromValues] : item.key))
31699
31710
  }), props.renderCustomValueInput && jsxRuntime$1.jsx("div", {
31711
+ ref: customInputReferance,
31700
31712
  children: props.renderCustomValueInput
31701
31713
  })]
31702
31714
  })]
package/esm/core/Autocomplete/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /** @jsxImportSource @emotion/react */
2
- import React, { createRef, useState } from 'react';
2
+ import React, { createRef, useRef, useState } from 'react';
3
3
  import { styles, ErrorMessage } from './styles';
4
4
  import { useEffect } from 'react';
5
5
  import { useDebounce } from '../utils/debounce';
@@ -17,6 +17,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
17
17
  css,
18
18
  ...props
19
19
  }, ref) => {
20
+ const customInputReferance = useRef(null);
20
21
  const {
21
22
  optionsHeight,
22
23
  optionsRef
@@ -31,15 +32,8 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
31
32
  const onInputChange = e => {
32
33
  setInputDirty(true);
33
34
  setValueChanged(e.target.value);
34
-
35
- if (props.values) {
36
- // Maybe?
37
- setHighlightedIndex(0);
38
- }
39
-
40
- if (props.onChange) {
41
- props.onChange(e);
42
- }
35
+ if (props.values) setHighlightedIndex(0);
36
+ if (props.onChange) props.onChange(e);
43
37
  };
44
38
 
45
39
  const handleOnInputClick = () => {
@@ -190,6 +184,23 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
190
184
  document.removeEventListener('mousedown', handleClickOutside);
191
185
  };
192
186
  }, [showValues, valuesRef]);
187
+ useEffect(() => {
188
+ const handleClickOutside = e => {
189
+ const node = customInputReferance.current;
190
+ if (node && node.contains(e.target)) return;
191
+ setShowValues(false);
192
+ };
193
+
194
+ if (showValues) {
195
+ document.addEventListener('keydown', handleClickOutside);
196
+ } else {
197
+ document.removeEventListener('keydown', handleClickOutside);
198
+ }
199
+
200
+ return () => {
201
+ document.removeEventListener('keydown', handleClickOutside);
202
+ };
203
+ }, [showValues, valuesRef]);
193
204
  return _jsxs(_Fragment, {
194
205
  children: [_jsxs("label", {
195
206
  css: theme => [styles.default(theme), (props.invalid || props.invalidMessage) && styles.invalid(theme), props.validation && styles.validation, height && styles.height(height), css && css],
@@ -251,6 +262,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
251
262
  children: props.labelFromValues ? item[props.labelFromValues] : item.label
252
263
  }, props.keyFromValues ? item[props.keyFromValues] : item.key))
253
264
  }), props.renderCustomValueInput && _jsx("div", {
265
+ ref: customInputReferance,
254
266
  children: props.renderCustomValueInput
255
267
  })]
256
268
  })]
package/lib/core/Autocomplete/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Autocomplete/index.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Autocomplete/index.tsx"],"names":[],"mappings":"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"}
package/lib/core/Autocomplete/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /** @jsxImportSource @emotion/react */
2
- import React, { createRef, useState } from 'react';
2
+ import React, { createRef, useRef, useState } from 'react';
3
3
  import { styles, ErrorMessage } from './styles';
4
4
  import { useEffect } from 'react';
5
5
  import { useDebounce } from '../utils/debounce';
@@ -17,6 +17,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
17
17
  css,
18
18
  ...props
19
19
  }, ref) => {
20
+ const customInputReferance = useRef(null);
20
21
  const {
21
22
  optionsHeight,
22
23
  optionsRef
@@ -31,15 +32,8 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
31
32
  const onInputChange = e => {
32
33
  setInputDirty(true);
33
34
  setValueChanged(e.target.value);
34
-
35
- if (props.values) {
36
- // Maybe?
37
- setHighlightedIndex(0);
38
- }
39
-
40
- if (props.onChange) {
41
- props.onChange(e);
42
- }
35
+ if (props.values) setHighlightedIndex(0);
36
+ if (props.onChange) props.onChange(e);
43
37
  };
44
38
 
45
39
  const handleOnInputClick = () => {
@@ -190,6 +184,23 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
190
184
  document.removeEventListener('mousedown', handleClickOutside);
191
185
  };
192
186
  }, [showValues, valuesRef]);
187
+ useEffect(() => {
188
+ const handleClickOutside = e => {
189
+ const node = customInputReferance.current;
190
+ if (node && node.contains(e.target)) return;
191
+ setShowValues(false);
192
+ };
193
+
194
+ if (showValues) {
195
+ document.addEventListener('keydown', handleClickOutside);
196
+ } else {
197
+ document.removeEventListener('keydown', handleClickOutside);
198
+ }
199
+
200
+ return () => {
201
+ document.removeEventListener('keydown', handleClickOutside);
202
+ };
203
+ }, [showValues, valuesRef]);
193
204
  return _jsxs(_Fragment, {
194
205
  children: [_jsxs("label", {
195
206
  css: theme => [styles.default(theme), (props.invalid || props.invalidMessage) && styles.invalid(theme), props.validation && styles.validation, height && styles.height(height), css && css],
@@ -251,6 +262,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
251
262
  children: props.labelFromValues ? item[props.labelFromValues] : item.label
252
263
  }, props.keyFromValues ? item[props.keyFromValues] : item.key))
253
264
  }), props.renderCustomValueInput && _jsx("div", {
265
+ ref: customInputReferance,
254
266
  children: props.renderCustomValueInput
255
267
  })]
256
268
  })]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bbl-digital/snorre",
3
- "version": "2.2.108",
3
+ "version": "2.2.111",
4
4
  "description": "Design library for BBL Digital",
5
5
  "license": "MIT",
6
6
  "main": "./lib/index.js",