@sebgroup/green-react 1.0.0-beta.25 → 1.0.0-beta.27

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 (4) hide show
  1. package/index.esm.js +14 -7
  2. package/index.umd.js +14 -7
  3. package/lib/dropdown/dropdown.d.ts +1 -1
  4. package/package.json +3 -3
package/index.esm.js CHANGED
@@ -2696,7 +2696,7 @@ const useDropdown = ({
2696
2696
  const [multiSelectProps, setMultiSelectProps] = useState({}); // When dropdown data changes
2697
2697
 
2698
2698
  useEffect(() => {
2699
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
2699
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
2700
2700
 
2701
2701
  if (!dropdown) return;
2702
2702
  const {
@@ -2707,12 +2707,12 @@ const useDropdown = ({
2707
2707
  } = dropdown;
2708
2708
  const newToggleProps = Object.assign(Object.assign({}, toggler === null || toggler === void 0 ? void 0 : toggler.attributes), {
2709
2709
  className: (_a = toggler === null || toggler === void 0 ? void 0 : toggler.classes) === null || _a === void 0 ? void 0 : _a.join(' '),
2710
- children: ((_b = dropdown === null || dropdown === void 0 ? void 0 : dropdown.texts) === null || _b === void 0 ? void 0 : _b.select) || ((_c = dropdown === null || dropdown === void 0 ? void 0 : dropdown.texts) === null || _c === void 0 ? void 0 : _c.placeholder),
2710
+ children: (_b = dropdown === null || dropdown === void 0 ? void 0 : dropdown.texts) === null || _b === void 0 ? void 0 : _b.select,
2711
2711
  onClick: () => handler === null || handler === void 0 ? void 0 : handler.toggle()
2712
2712
  });
2713
2713
  setTogglerProps(newToggleProps);
2714
2714
  const newListboxProps = Object.assign(Object.assign({}, listbox === null || listbox === void 0 ? void 0 : listbox.attributes), {
2715
- className: (_d = listbox === null || listbox === void 0 ? void 0 : listbox.classes) === null || _d === void 0 ? void 0 : _d.join(' ')
2715
+ className: (_c = listbox === null || listbox === void 0 ? void 0 : listbox.classes) === null || _c === void 0 ? void 0 : _c.join(' ')
2716
2716
  });
2717
2717
  setListboxProps(newListboxProps);
2718
2718
 
@@ -2744,14 +2744,14 @@ const useDropdown = ({
2744
2744
  }));
2745
2745
  const newMultiselect = {
2746
2746
  fieldsetProps: {
2747
- 'aria-describedby': (_g = (_f = (_e = dropdown === null || dropdown === void 0 ? void 0 : dropdown.elements) === null || _e === void 0 ? void 0 : _e.fieldset) === null || _f === void 0 ? void 0 : _f.attributes) === null || _g === void 0 ? void 0 : _g.id,
2747
+ 'aria-describedby': (_f = (_e = (_d = dropdown === null || dropdown === void 0 ? void 0 : dropdown.elements) === null || _d === void 0 ? void 0 : _d.fieldset) === null || _e === void 0 ? void 0 : _e.attributes) === null || _f === void 0 ? void 0 : _f.id,
2748
2748
  'aria-multiselectable': true,
2749
2749
  role: 'listbox',
2750
2750
  tabIndex: -1
2751
2751
  },
2752
2752
  legendProps: {
2753
2753
  className: 'sr-only',
2754
- id: (_k = (_j = (_h = dropdown === null || dropdown === void 0 ? void 0 : dropdown.elements) === null || _h === void 0 ? void 0 : _h.fieldset) === null || _j === void 0 ? void 0 : _j.attributes) === null || _k === void 0 ? void 0 : _k.id,
2754
+ id: (_j = (_h = (_g = dropdown === null || dropdown === void 0 ? void 0 : dropdown.elements) === null || _g === void 0 ? void 0 : _g.fieldset) === null || _h === void 0 ? void 0 : _h.attributes) === null || _j === void 0 ? void 0 : _j.id,
2755
2755
  children: dropdown.texts.optionsDescription
2756
2756
  },
2757
2757
  checkboxes
@@ -2777,11 +2777,16 @@ const useDropdown = ({
2777
2777
  display,
2778
2778
  validator
2779
2779
  }); // eslint-disable-next-line react-hooks/exhaustive-deps
2780
- }, [id, value, texts, options, loop, multiSelect, searchable, searchFilter, compareWith, useValue, display]); // When validator changes
2780
+ }, [id, texts, options, loop, multiSelect, searchable, searchFilter, compareWith, useValue, display]);
2781
+ useEffect(() => {
2782
+ if (!dropdown) return;
2783
+ handler === null || handler === void 0 ? void 0 : handler.selectByValue(value);
2784
+ console.log('new value'); // eslint-disable-next-line react-hooks/exhaustive-deps
2785
+ }, [value]); // When validator changes
2781
2786
 
2782
2787
  useEffect(() => {
2783
2788
  if (!dropdown) return;
2784
- if (validator) handler === null || handler === void 0 ? void 0 : handler.validate(validator);
2789
+ if (validator) handler === null || handler === void 0 ? void 0 : handler.validate(validator); // eslint-disable-next-line react-hooks/exhaustive-deps
2785
2790
  }, [validator]); // Create dropdown handler
2786
2791
 
2787
2792
  useEffect(() => {
@@ -2815,6 +2820,7 @@ const useDropdown = ({
2815
2820
 
2816
2821
  const Dropdown = ({
2817
2822
  id,
2823
+ value,
2818
2824
  options,
2819
2825
  loop,
2820
2826
  multiSelect,
@@ -2839,6 +2845,7 @@ const Dropdown = ({
2839
2845
  multiSelectProps
2840
2846
  } = useDropdown({
2841
2847
  id,
2848
+ value,
2842
2849
  options,
2843
2850
  loop,
2844
2851
  multiSelect,
package/index.umd.js CHANGED
@@ -2702,7 +2702,7 @@
2702
2702
  const [multiSelectProps, setMultiSelectProps] = React.useState({}); // When dropdown data changes
2703
2703
 
2704
2704
  React.useEffect(() => {
2705
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
2705
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
2706
2706
 
2707
2707
  if (!dropdown) return;
2708
2708
  const {
@@ -2713,12 +2713,12 @@
2713
2713
  } = dropdown;
2714
2714
  const newToggleProps = Object.assign(Object.assign({}, toggler === null || toggler === void 0 ? void 0 : toggler.attributes), {
2715
2715
  className: (_a = toggler === null || toggler === void 0 ? void 0 : toggler.classes) === null || _a === void 0 ? void 0 : _a.join(' '),
2716
- children: ((_b = dropdown === null || dropdown === void 0 ? void 0 : dropdown.texts) === null || _b === void 0 ? void 0 : _b.select) || ((_c = dropdown === null || dropdown === void 0 ? void 0 : dropdown.texts) === null || _c === void 0 ? void 0 : _c.placeholder),
2716
+ children: (_b = dropdown === null || dropdown === void 0 ? void 0 : dropdown.texts) === null || _b === void 0 ? void 0 : _b.select,
2717
2717
  onClick: () => handler === null || handler === void 0 ? void 0 : handler.toggle()
2718
2718
  });
2719
2719
  setTogglerProps(newToggleProps);
2720
2720
  const newListboxProps = Object.assign(Object.assign({}, listbox === null || listbox === void 0 ? void 0 : listbox.attributes), {
2721
- className: (_d = listbox === null || listbox === void 0 ? void 0 : listbox.classes) === null || _d === void 0 ? void 0 : _d.join(' ')
2721
+ className: (_c = listbox === null || listbox === void 0 ? void 0 : listbox.classes) === null || _c === void 0 ? void 0 : _c.join(' ')
2722
2722
  });
2723
2723
  setListboxProps(newListboxProps);
2724
2724
 
@@ -2750,14 +2750,14 @@
2750
2750
  }));
2751
2751
  const newMultiselect = {
2752
2752
  fieldsetProps: {
2753
- 'aria-describedby': (_g = (_f = (_e = dropdown === null || dropdown === void 0 ? void 0 : dropdown.elements) === null || _e === void 0 ? void 0 : _e.fieldset) === null || _f === void 0 ? void 0 : _f.attributes) === null || _g === void 0 ? void 0 : _g.id,
2753
+ 'aria-describedby': (_f = (_e = (_d = dropdown === null || dropdown === void 0 ? void 0 : dropdown.elements) === null || _d === void 0 ? void 0 : _d.fieldset) === null || _e === void 0 ? void 0 : _e.attributes) === null || _f === void 0 ? void 0 : _f.id,
2754
2754
  'aria-multiselectable': true,
2755
2755
  role: 'listbox',
2756
2756
  tabIndex: -1
2757
2757
  },
2758
2758
  legendProps: {
2759
2759
  className: 'sr-only',
2760
- id: (_k = (_j = (_h = dropdown === null || dropdown === void 0 ? void 0 : dropdown.elements) === null || _h === void 0 ? void 0 : _h.fieldset) === null || _j === void 0 ? void 0 : _j.attributes) === null || _k === void 0 ? void 0 : _k.id,
2760
+ id: (_j = (_h = (_g = dropdown === null || dropdown === void 0 ? void 0 : dropdown.elements) === null || _g === void 0 ? void 0 : _g.fieldset) === null || _h === void 0 ? void 0 : _h.attributes) === null || _j === void 0 ? void 0 : _j.id,
2761
2761
  children: dropdown.texts.optionsDescription
2762
2762
  },
2763
2763
  checkboxes
@@ -2783,11 +2783,16 @@
2783
2783
  display,
2784
2784
  validator
2785
2785
  }); // eslint-disable-next-line react-hooks/exhaustive-deps
2786
- }, [id, value, texts, options, loop, multiSelect, searchable, searchFilter, compareWith, useValue, display]); // When validator changes
2786
+ }, [id, texts, options, loop, multiSelect, searchable, searchFilter, compareWith, useValue, display]);
2787
+ React.useEffect(() => {
2788
+ if (!dropdown) return;
2789
+ handler === null || handler === void 0 ? void 0 : handler.selectByValue(value);
2790
+ console.log('new value'); // eslint-disable-next-line react-hooks/exhaustive-deps
2791
+ }, [value]); // When validator changes
2787
2792
 
2788
2793
  React.useEffect(() => {
2789
2794
  if (!dropdown) return;
2790
- if (validator) handler === null || handler === void 0 ? void 0 : handler.validate(validator);
2795
+ if (validator) handler === null || handler === void 0 ? void 0 : handler.validate(validator); // eslint-disable-next-line react-hooks/exhaustive-deps
2791
2796
  }, [validator]); // Create dropdown handler
2792
2797
 
2793
2798
  React.useEffect(() => {
@@ -2821,6 +2826,7 @@
2821
2826
 
2822
2827
  const Dropdown = ({
2823
2828
  id,
2829
+ value,
2824
2830
  options,
2825
2831
  loop,
2826
2832
  multiSelect,
@@ -2845,6 +2851,7 @@
2845
2851
  multiSelectProps
2846
2852
  } = useDropdown({
2847
2853
  id,
2854
+ value,
2848
2855
  options,
2849
2856
  loop,
2850
2857
  multiSelect,
package/lib/dropdown/dropdown.d.ts CHANGED
@@ -2,5 +2,5 @@ import { DropdownArgs, OnChange } from '@sebgroup/extract';
2
2
  export interface DropdownProps extends DropdownArgs {
3
3
  onChange?: OnChange;
4
4
  }
5
- export declare const Dropdown: ({ id, options, loop, multiSelect, searchable, searchFilter, compareWith, useValue, display, texts, onChange, validator, }: DropdownProps) => JSX.Element;
5
+ export declare const Dropdown: ({ id, value, options, loop, multiSelect, searchable, searchFilter, compareWith, useValue, display, texts, onChange, validator, }: DropdownProps) => JSX.Element;
6
6
  export default Dropdown;
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@sebgroup/green-react",
3
- "version": "1.0.0-beta.25",
3
+ "version": "1.0.0-beta.27",
4
4
  "peerDependencies": {
5
5
  "react": "^17 || ^18",
6
6
  "react-dom": "^17 || ^18"
7
7
  },
8
8
  "dependencies": {
9
- "@sebgroup/chlorophyll": "^1.0.0-beta.26",
10
- "@sebgroup/extract": "^1.0.0-beta.25"
9
+ "@sebgroup/chlorophyll": "^1.0.0-beta.28",
10
+ "@sebgroup/extract": "^1.0.0-beta.27"
11
11
  },
12
12
  "description": "React components built on top of @sebgroup/chlorophyll.",
13
13
  "repository": {