@bolttech/molecules-dropdown 0.4.0 → 0.4.2

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 (2) hide show
  1. package/index.cjs +33 -17
  2. package/package.json +6 -6
package/index.cjs CHANGED
@@ -2650,7 +2650,15 @@ const Dropdown = ({
2650
2650
  const [currentOptionList, setCurrentOptionList] = react.useState([]);
2651
2651
  const [inputValue, setInputValue] = react.useState('');
2652
2652
  const [inputLabel, setInputLabel] = react.useState('');
2653
+ const [internalSelectedOption, setInternalSelectedOption] = react.useState(selectedOption);
2653
2654
  const inputRef = react.useRef(null);
2655
+ react.useEffect(() => {
2656
+ var _a;
2657
+ if (internalSelectedOption) {
2658
+ (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
2659
+ setSelectedOption(internalSelectedOption);
2660
+ }
2661
+ }, [internalSelectedOption, setSelectedOption]);
2654
2662
  react.useEffect(() => {
2655
2663
  const normalizeOptionList = () => __awaiter(void 0, void 0, void 0, function* () {
2656
2664
  return yield _filterOptionsParam(inputValue, optionList, urlFilterOptions);
@@ -2658,19 +2666,19 @@ const Dropdown = ({
2658
2666
  normalizeOptionList().then(optionsResponse => setCurrentOptionList([...optionsResponse])).catch(error => console.error('An error happens when trying to normalize options', error));
2659
2667
  }, [_filterOptionsParam, optionList, urlFilterOptions, inputValue]);
2660
2668
  const setSelectedOptionOnInputValue = react.useCallback(() => {
2661
- if (!inputValue && selectedOption) {
2662
- setInputValue((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '');
2663
- setInputLabel((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || '');
2669
+ if (!inputValue && internalSelectedOption) {
2670
+ setInputValue((internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.value) || '');
2671
+ setInputLabel((internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.label) || '');
2664
2672
  return;
2665
2673
  }
2666
- if (inputValue !== (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value)) {
2674
+ if (inputValue !== (internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.value)) {
2667
2675
  const isValidValue = currentOptionList.some(currentOption => currentOption.value === inputValue);
2668
2676
  if (!isValidValue) {
2669
- setInputValue((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '');
2670
- setInputLabel((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || '');
2677
+ setInputValue((internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.value) || '');
2678
+ setInputLabel((internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.label) || '');
2671
2679
  }
2672
2680
  }
2673
- }, [currentOptionList, inputValue, selectedOption]);
2681
+ }, [currentOptionList, inputValue, internalSelectedOption]);
2674
2682
  return jsxRuntime.jsxs(SectionContainer, Object.assign({
2675
2683
  onClick: () => {
2676
2684
  var _a;
@@ -2705,9 +2713,9 @@ const Dropdown = ({
2705
2713
  onChange: selectedValue => {
2706
2714
  setInputValue(selectedValue.value);
2707
2715
  setInputLabel(selectedValue.label);
2708
- setSelectedOption(selectedValue);
2716
+ setInternalSelectedOption(Object.assign({}, selectedValue));
2709
2717
  },
2710
- active: selectedOption,
2718
+ active: internalSelectedOption,
2711
2719
  options: currentOptionList
2712
2720
  })
2713
2721
  })]
@@ -2733,7 +2741,15 @@ const DropdownOptionsWithHeaders = ({
2733
2741
  const [currentOptionList, setCurrentOptionList] = react.useState([]);
2734
2742
  const [inputValue, setInputValue] = react.useState('');
2735
2743
  const [inputLabel, setInputLabel] = react.useState('');
2744
+ const [internalSelectedOption, setInternalSelectedOption] = react.useState(selectedOption);
2736
2745
  const inputRef = react.useRef(null);
2746
+ react.useEffect(() => {
2747
+ var _a;
2748
+ if (internalSelectedOption) {
2749
+ (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
2750
+ setSelectedOption(internalSelectedOption);
2751
+ }
2752
+ }, [internalSelectedOption, setSelectedOption]);
2737
2753
  react.useEffect(() => {
2738
2754
  const normalizeOptionList = () => __awaiter(void 0, void 0, void 0, function* () {
2739
2755
  return yield _filterOptionsParam(inputValue, optionList, urlFilterOptions);
@@ -2741,23 +2757,23 @@ const DropdownOptionsWithHeaders = ({
2741
2757
  normalizeOptionList().then(optionsResponse => setCurrentOptionList([...optionsResponse])).catch(error => console.error('An error happens when trying to normalize options', error));
2742
2758
  }, [_filterOptionsParam, optionList, urlFilterOptions, inputValue]);
2743
2759
  const setSelectedOptionOnInputValue = react.useCallback(() => {
2744
- if (!inputValue && selectedOption) {
2745
- setInputValue((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '');
2746
- setInputLabel((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || '');
2760
+ if (!inputValue && internalSelectedOption) {
2761
+ setInputValue((internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.value) || '');
2762
+ setInputLabel((internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.label) || '');
2747
2763
  return;
2748
2764
  }
2749
- if (inputValue !== (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value)) {
2765
+ if (inputValue !== (internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.value)) {
2750
2766
  let isValidValue = false;
2751
2767
  currentOptionList.forEach(currentOptionsGroup => {
2752
2768
  isValidValue = currentOptionsGroup.options.some(currentOption => currentOption.value === inputValue);
2753
2769
  if (isValidValue) return;
2754
2770
  });
2755
2771
  if (!isValidValue) {
2756
- setInputLabel((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || '');
2757
- setInputValue((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '');
2772
+ setInputLabel((internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.label) || '');
2773
+ setInputValue((internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.value) || '');
2758
2774
  }
2759
2775
  }
2760
- }, [currentOptionList, inputValue, selectedOption]);
2776
+ }, [currentOptionList, inputValue, internalSelectedOption]);
2761
2777
  return jsxRuntime.jsxs(SectionContainer, Object.assign({
2762
2778
  onClick: () => {
2763
2779
  var _a;
@@ -2789,7 +2805,7 @@ const DropdownOptionsWithHeaders = ({
2789
2805
  onChange: selectedValue => {
2790
2806
  setInputLabel(selectedValue.label);
2791
2807
  setInputValue(selectedValue.value);
2792
- setSelectedOption(selectedValue);
2808
+ setInternalSelectedOption(Object.assign({}, selectedValue));
2793
2809
  },
2794
2810
  active: selectedOption,
2795
2811
  options: currentOptionList
package/package.json CHANGED
@@ -1,17 +1,17 @@
1
1
  {
2
2
  "name": "@bolttech/molecules-dropdown",
3
- "version": "0.4.0",
3
+ "version": "0.4.2",
4
+ "main": "./index.cjs",
5
+ "type": "commonjs",
6
+ "types": "./src/index.d.ts",
4
7
  "dependencies": {
5
- "@bolttech/atoms-icon": "0.4.0",
6
- "@bolttech/atoms-input": "0.0.1",
8
+ "@bolttech/atoms-icon": "0.5.0",
9
+ "@bolttech/atoms-input": "0.4.0",
7
10
  "@bolttech/atoms-select": "0.5.0",
8
11
  "@edirect/frontend-foundations": "0.0.53",
9
12
  "jest-styled-components": "7.1.1",
10
13
  "react": "18.2.0",
11
14
  "styled-components": "5.3.6"
12
15
  },
13
- "main": "./index.cjs",
14
- "type": "commonjs",
15
- "types": "./src/index.d.ts",
16
16
  "peerDependencies": {}
17
17
  }