@bolttech/molecules-dropdown 0.5.0 → 0.5.1

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 (3) hide show
  1. package/index.cjs +18 -4
  2. package/package.json +1 -1
  3. package/src/lib/molecules-dropdown.type.d.ts +2 -2
package/index.cjs CHANGED
@@ -2660,7 +2660,8 @@ const Dropdown = ({
2660
2660
  const [currentOptionList, setCurrentOptionList] = react.useState([]);
2661
2661
  const [inputValue, setInputValue] = react.useState('');
2662
2662
  const [inputLabel, setInputLabel] = react.useState('');
2663
- const [internalSelectedOption, setInternalSelectedOption] = react.useState(value);
2663
+ const [internalSelectedOption, setInternalSelectedOption] = react.useState();
2664
+ const [isFirstRender, setIsFirstRender] = react.useState(true);
2664
2665
  const inputRef = react.useRef(null);
2665
2666
  react.useEffect(() => {
2666
2667
  const normalizeOptionList = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -2685,7 +2686,12 @@ const Dropdown = ({
2685
2686
  react.useEffect(() => {
2686
2687
  setSelectedOptionOnInputValue();
2687
2688
  // eslint-disable-next-line react-hooks/exhaustive-deps
2688
- }, []);
2689
+ }, [internalSelectedOption]);
2690
+ react.useEffect(() => {
2691
+ if (!isFirstRender || currentOptionList.length === 0) return;
2692
+ setInternalSelectedOption(currentOptionList.find(option => option.id === value));
2693
+ setIsFirstRender(false);
2694
+ }, [currentOptionList, isFirstRender, setSelectedOptionOnInputValue, value]);
2689
2695
  return jsxRuntime.jsxs(SectionContainer, Object.assign({
2690
2696
  onClick: () => {
2691
2697
  var _a;
@@ -2758,7 +2764,8 @@ const DropdownWithHeaders = ({
2758
2764
  const [currentOptionList, setCurrentOptionList] = react.useState([]);
2759
2765
  const [inputValue, setInputValue] = react.useState('');
2760
2766
  const [inputLabel, setInputLabel] = react.useState('');
2761
- const [internalSelectedOption, setInternalSelectedOption] = react.useState(value);
2767
+ const [internalSelectedOption, setInternalSelectedOption] = react.useState();
2768
+ const [isFirstRender, setIsFirstRender] = react.useState(true);
2762
2769
  const inputRef = react.useRef(null);
2763
2770
  react.useEffect(() => {
2764
2771
  const normalizeOptionList = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -2787,7 +2794,14 @@ const DropdownWithHeaders = ({
2787
2794
  react.useEffect(() => {
2788
2795
  setSelectedOptionOnInputValue();
2789
2796
  // eslint-disable-next-line react-hooks/exhaustive-deps
2790
- }, []);
2797
+ }, [internalSelectedOption]);
2798
+ react.useEffect(() => {
2799
+ if (!isFirstRender || currentOptionList.length === 0) return;
2800
+ setInternalSelectedOption(currentOptionList.map(optionsList => {
2801
+ return optionsList.options.find(option => option.id === value);
2802
+ })[0] || undefined);
2803
+ setIsFirstRender(false);
2804
+ }, [currentOptionList, isFirstRender, setSelectedOptionOnInputValue, value]);
2791
2805
  return jsxRuntime.jsxs(SectionContainer, Object.assign({
2792
2806
  onClick: () => {
2793
2807
  var _a;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bolttech/molecules-dropdown",
3
- "version": "0.5.0",
3
+ "version": "0.5.1",
4
4
  "main": "./index.cjs",
5
5
  "type": "commonjs",
6
6
  "types": "./src/index.d.ts",
package/src/lib/molecules-dropdown.type.d.ts CHANGED
@@ -86,7 +86,7 @@ export type DropdownProps = DefaultProps & {
86
86
  * <Dropdown setSelectedOption={manipulateData} />
87
87
  */
88
88
  onChange: (selectedOption?: OptionType) => void | React.Dispatch<React.SetStateAction<OptionType>>;
89
- value?: OptionType;
89
+ value?: string;
90
90
  };
91
91
  /**
92
92
  Props for DropdownOptionsWithHeaders component
@@ -152,7 +152,7 @@ export type DropdownWithHeadersProps = DefaultProps & {
152
152
  * <Dropdown setSelectedOption={manipulateData} />
153
153
  */
154
154
  onChange: (selectedOption?: OptionType) => void | React.Dispatch<React.SetStateAction<OptionType>>;
155
- value?: OptionType;
155
+ value?: string;
156
156
  };
157
157
  /**
158
158
  Props for ReusableDropdownComponent component