@stack-spot/citric-react 0.20.0 → 0.20.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 (11) hide show
  1. package/dist/utils/checkbox.d.ts +4 -3
  2. package/dist/utils/checkbox.d.ts.map +1 -1
  3. package/dist/utils/checkbox.js +9 -8
  4. package/dist/utils/checkbox.js.map +1 -1
  5. package/dist/utils/radio.d.ts +4 -3
  6. package/dist/utils/radio.d.ts.map +1 -1
  7. package/dist/utils/radio.js +7 -6
  8. package/dist/utils/radio.js.map +1 -1
  9. package/package.json +1 -1
  10. package/src/utils/checkbox.ts +12 -10
  11. package/src/utils/radio.ts +10 -8
package/dist/utils/checkbox.d.ts CHANGED
@@ -24,9 +24,10 @@ export interface CheckboxGroupHookParams<T, F = string> {
24
24
  renderKey: (option: T) => string | number | undefined;
25
25
  /**
26
26
  * A function to call whenever the value changes.
27
- * @param value the new value.
27
+ * @param newValue the new value.
28
+ * @param previousValue the previous value.
28
29
  */
29
- onChange?: (value: T[]) => void;
30
+ onChange?: (newValue: T[], previousValue: T[]) => void;
30
31
  }
31
32
  /**
32
33
  * Use this hook to easily implement filtering and selection controls for a checkbox group.
@@ -61,7 +62,7 @@ export declare function useCheckboxGroupControls<T, F = string>(params: Checkbox
61
62
  /**
62
63
  * Changes the current value, should be passed to the property `onChange` of the checkbox group.
63
64
  */
64
- setValue: (newValue: T[]) => void;
65
+ setValue: import("react").Dispatch<import("react").SetStateAction<T[]>>;
65
66
  /**
66
67
  * A function to render a unique key for an option. Should be passed to the property `renderKey` of the checkbox group.
67
68
  */
package/dist/utils/checkbox.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/utils/checkbox.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,uBAAuB,CAAC,CAAC,EAAE,CAAC,GAAG,MAAM;IACpD;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;IACnB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;IAChD;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;;OAIG;IACH,SAAS,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACtD;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;CACjC;AAED;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,uBAAuB,CAAC,CAAC,EAAE,CAAC,CAAC;IAoCzF;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;yBAzDuC,CAAC,EAAE;IA2D7C;;OAEG;8BA/EqB,MAAM,GAAG,MAAM,GAAG,SAAS;IAiFnD;;;;OAIG;gCAhDmF,CAAC;IAkDvF;;OAEG;;EAGN"}
1
+ {"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/utils/checkbox.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,uBAAuB,CAAC,CAAC,EAAE,CAAC,GAAG,MAAM;IACpD;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;IACnB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;IAChD;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;;OAIG;IACH,SAAS,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACtD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;CACxD;AAED;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,uBAAuB,CAAC,CAAC,EAAE,CAAC,CAAC;IAqCzF;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;8BAjFqB,MAAM,GAAG,MAAM,GAAG,SAAS;IAmFnD;;;;OAIG;gCAhDmF,CAAC;IAkDvF;;OAEG;;EAGN"}
package/dist/utils/checkbox.js CHANGED
@@ -1,4 +1,4 @@
1
- import { useCallback, useMemo, useState } from 'react';
1
+ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
2
2
  import { defaultRenderKey } from './options.js';
3
3
  /**
4
4
  * Use this hook to easily implement filtering and selection controls for a checkbox group.
@@ -8,11 +8,12 @@ import { defaultRenderKey } from './options.js';
8
8
  export function useCheckboxGroupControls(params) {
9
9
  const [value, setValue] = useState(params.initialValue ?? []);
10
10
  const [filter, setFilter] = useState();
11
+ const previousValue = useRef(value);
11
12
  const renderKey = params.renderKey ?? defaultRenderKey;
12
- const handleChange = useCallback((newValue) => {
13
- setValue(newValue);
14
- params.onChange?.(newValue);
15
- }, []);
13
+ useEffect(() => {
14
+ params.onChange?.(value, previousValue.current);
15
+ previousValue.current = value;
16
+ }, [value]);
16
17
  const { options, isUnfilteredButChecked } = useMemo(() => {
17
18
  if (!params.applyFilter || !filter)
18
19
  return { options: params.options, isUnfilteredButChecked: () => false };
@@ -32,10 +33,10 @@ export function useCheckboxGroupControls(params) {
32
33
  return { options: [...unfilteredButChecked, ...filtered], isUnfilteredButChecked: (o) => map.has(renderKey(o)) };
33
34
  }, [params.options, filter]);
34
35
  const selectAll = useCallback(() => {
35
- handleChange([...options]);
36
+ setValue([...options]);
36
37
  }, [options]);
37
38
  const removeSelection = useCallback(() => {
38
- handleChange([]);
39
+ setValue([]);
39
40
  }, []);
40
41
  return {
41
42
  /**
@@ -65,7 +66,7 @@ export function useCheckboxGroupControls(params) {
65
66
  /**
66
67
  * Changes the current value, should be passed to the property `onChange` of the checkbox group.
67
68
  */
68
- setValue: handleChange,
69
+ setValue,
69
70
  /**
70
71
  * A function to render a unique key for an option. Should be passed to the property `renderKey` of the checkbox group.
71
72
  */
package/dist/utils/checkbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/utils/checkbox.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/utils/checkbox.ts"],"names":[],"mappings":"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"}
package/dist/utils/radio.d.ts CHANGED
@@ -22,9 +22,10 @@ export interface RadioGroupHookParams<T, F = string> {
22
22
  renderKey: (option: T) => string | number | undefined;
23
23
  /**
24
24
  * A function to call whenever the value changes.
25
- * @param value the new value.
25
+ * @param newValue the new value.
26
+ * @param previousValue the previous value.
26
27
  */
27
- onChange?: (value: T) => void;
28
+ onChange?: (newValue: T | undefined, previousValue: T | undefined) => void;
28
29
  }
29
30
  /**
30
31
  * Use this hook to easily implement filtering for a radio group.
@@ -51,7 +52,7 @@ export declare function useRadioGroupControls<T, F = string>(params: RadioGroupH
51
52
  /**
52
53
  * Changes the current value, should be passed to the property `onChange` of the radio group.
53
54
  */
54
- setValue: (newValue: T) => void;
55
+ setValue: import("react").Dispatch<import("react").SetStateAction<T | undefined>>;
55
56
  /**
56
57
  * A function to render a unique key for an option. Should be passed to the property `renderKey` of the radio group.
57
58
  */
package/dist/utils/radio.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../src/utils/radio.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,oBAAoB,CAAC,CAAC,EAAE,CAAC,GAAG,MAAM;IACjD;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;IAChD;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;;OAIG;IACH,SAAS,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACtD;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC/B;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,oBAAoB,CAAC,CAAC,EAAE,CAAC,CAAC;IAsBnF;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;yBAnCuC,CAAC;IAqC3C;;OAEG;8BAzDqB,MAAM,GAAG,MAAM,GAAG,SAAS;IA2DnD;;;;OAIG;gCAjC2B,CAAC;EAoClC"}
1
+ {"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../src/utils/radio.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,oBAAoB,CAAC,CAAC,EAAE,CAAC,GAAG,MAAM;IACjD;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;IAChD;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;;OAIG;IACH,SAAS,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACtD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,SAAS,EAAE,aAAa,EAAE,CAAC,GAAG,SAAS,KAAK,IAAI,CAAC;CAC5E;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,oBAAoB,CAAC,CAAC,EAAE,CAAC,CAAC;IAuBnF;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;8BA3DqB,MAAM,GAAG,MAAM,GAAG,SAAS;IA6DnD;;;;OAIG;gCAjC2B,CAAC;EAoClC"}
package/dist/utils/radio.js CHANGED
@@ -1,4 +1,4 @@
1
- import { useCallback, useMemo, useState } from 'react';
1
+ import { useEffect, useMemo, useRef, useState } from 'react';
2
2
  import { defaultRenderKey } from './options.js';
3
3
  /**
4
4
  * Use this hook to easily implement filtering for a radio group.
@@ -8,11 +8,12 @@ import { defaultRenderKey } from './options.js';
8
8
  export function useRadioGroupControls(params) {
9
9
  const [value, setValue] = useState(params.initialValue);
10
10
  const [filter, setFilter] = useState();
11
+ const previousValue = useRef(value);
11
12
  const renderKey = params.renderKey ?? defaultRenderKey;
12
- const handleChange = useCallback((newValue) => {
13
- setValue(newValue);
14
- params.onChange?.(newValue);
15
- }, []);
13
+ useEffect(() => {
14
+ params.onChange?.(value, previousValue.current);
15
+ previousValue.current = value;
16
+ }, [value]);
16
17
  const { options, isUnfilteredButChecked } = useMemo(() => {
17
18
  if (!params.applyFilter || !filter)
18
19
  return { options: params.options, isUnfilteredButChecked: () => false };
@@ -44,7 +45,7 @@ export function useRadioGroupControls(params) {
44
45
  /**
45
46
  * Changes the current value, should be passed to the property `onChange` of the radio group.
46
47
  */
47
- setValue: handleChange,
48
+ setValue,
48
49
  /**
49
50
  * A function to render a unique key for an option. Should be passed to the property `renderKey` of the radio group.
50
51
  */
package/dist/utils/radio.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"radio.js","sourceRoot":"","sources":["../../src/utils/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AA+B5C;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CAAgB,MAAkC;IACrF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,YAAY,CAAC,CAAA;IACvD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAiB,CAAA;IACrD,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,IAAI,gBAAgB,CAAA;IAEtD,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,QAAW,EAAE,EAAE;QAC/C,QAAQ,CAAC,QAAQ,CAAC,CAAA;QAClB,MAAM,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAA;IAC7B,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,EAAE,OAAO,EAAE,sBAAsB,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE;QACvD,IAAI,CAAC,MAAM,CAAC,WAAW,IAAI,CAAC,MAAM;YAAE,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,sBAAsB,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,CAAA;QAC3G,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;QACrD,MAAM,kBAAkB,GAAG,KAAK,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;QACxE,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAA;QAC5E,OAAO;YACL,OAAO,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ;YAC7D,sBAAsB,EAAE,CAAC,CAAI,EAAE,EAAE,CAAC,kBAAkB,IAAI,SAAS,CAAC,CAAC,CAAC,KAAK,QAAQ;SAClF,CAAA;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAA;IAE5B,OAAO;QACL;;WAEG;QACH,MAAM;QACN;;WAEG;QACH,SAAS,EAAE,SAAS;QACpB;;WAEG;QACH,OAAO;QACP;;WAEG;QACH,KAAK;QACL;;WAEG;QACH,QAAQ,EAAE,YAAY;QACtB;;WAEG;QACH,SAAS;QACT;;;;WAIG;QACH,sBAAsB;KACvB,CAAA;AACH,CAAC"}
1
+ {"version":3,"file":"radio.js","sourceRoot":"","sources":["../../src/utils/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAgC5C;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CAAgB,MAAkC;IACrF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,YAAY,CAAC,CAAA;IACvD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAiB,CAAA;IACrD,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IACnC,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,IAAI,gBAAgB,CAAA;IAEtD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;QAC/C,aAAa,CAAC,OAAO,GAAG,KAAK,CAAA;IAC/B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,MAAM,EAAE,OAAO,EAAE,sBAAsB,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE;QACvD,IAAI,CAAC,MAAM,CAAC,WAAW,IAAI,CAAC,MAAM;YAAE,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,sBAAsB,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,CAAA;QAC3G,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;QACrD,MAAM,kBAAkB,GAAG,KAAK,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;QACxE,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAA;QAC5E,OAAO;YACL,OAAO,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ;YAC7D,sBAAsB,EAAE,CAAC,CAAI,EAAE,EAAE,CAAC,kBAAkB,IAAI,SAAS,CAAC,CAAC,CAAC,KAAK,QAAQ;SAClF,CAAA;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAA;IAE5B,OAAO;QACL;;WAEG;QACH,MAAM;QACN;;WAEG;QACH,SAAS,EAAE,SAAS;QACpB;;WAEG;QACH,OAAO;QACP;;WAEG;QACH,KAAK;QACL;;WAEG;QACH,QAAQ;QACR;;WAEG;QACH,SAAS;QACT;;;;WAIG;QACH,sBAAsB;KACvB,CAAA;AACH,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stack-spot/citric-react",
3
- "version": "0.20.0",
3
+ "version": "0.20.2",
4
4
  "author": "StackSpot",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",
package/src/utils/checkbox.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { useCallback, useMemo, useState } from 'react'
1
+ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
2
2
  import { defaultRenderKey } from './options'
3
3
 
4
4
  export interface CheckboxGroupHookParams<T, F = string> {
@@ -27,9 +27,10 @@ export interface CheckboxGroupHookParams<T, F = string> {
27
27
  renderKey: (option: T) => string | number | undefined,
28
28
  /**
29
29
  * A function to call whenever the value changes.
30
- * @param value the new value.
30
+ * @param newValue the new value.
31
+ * @param previousValue the previous value.
31
32
  */
32
- onChange?: (value: T[]) => void,
33
+ onChange?: (newValue: T[], previousValue: T[]) => void,
33
34
  }
34
35
 
35
36
  /**
@@ -40,12 +41,13 @@ export interface CheckboxGroupHookParams<T, F = string> {
40
41
  export function useCheckboxGroupControls<T, F = string>(params: CheckboxGroupHookParams<T, F>) {
41
42
  const [value, setValue] = useState(params.initialValue ?? [])
42
43
  const [filter, setFilter] = useState<F | undefined>()
44
+ const previousValue = useRef(value)
43
45
  const renderKey = params.renderKey ?? defaultRenderKey
44
46
 
45
- const handleChange = useCallback((newValue: T[]) => {
46
- setValue(newValue)
47
- params.onChange?.(newValue)
48
- }, [])
47
+ useEffect(() => {
48
+ params.onChange?.(value, previousValue.current)
49
+ previousValue.current = value
50
+ }, [value])
49
51
 
50
52
  const { options, isUnfilteredButChecked } = useMemo(() => {
51
53
  if (!params.applyFilter || !filter) return { options: params.options, isUnfilteredButChecked: () => false }
@@ -65,11 +67,11 @@ export function useCheckboxGroupControls<T, F = string>(params: CheckboxGroupHoo
65
67
  }, [params.options, filter])
66
68
 
67
69
  const selectAll = useCallback(() => {
68
- handleChange([...options])
70
+ setValue([...options])
69
71
  }, [options])
70
72
 
71
73
  const removeSelection = useCallback(() => {
72
- handleChange([])
74
+ setValue([])
73
75
  }, [])
74
76
 
75
77
  return {
@@ -100,7 +102,7 @@ export function useCheckboxGroupControls<T, F = string>(params: CheckboxGroupHoo
100
102
  /**
101
103
  * Changes the current value, should be passed to the property `onChange` of the checkbox group.
102
104
  */
103
- setValue: handleChange,
105
+ setValue,
104
106
  /**
105
107
  * A function to render a unique key for an option. Should be passed to the property `renderKey` of the checkbox group.
106
108
  */
package/src/utils/radio.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { useCallback, useMemo, useState } from 'react'
1
+ import { useEffect, useMemo, useRef, useState } from 'react'
2
2
  import { defaultRenderKey } from './options'
3
3
 
4
4
  export interface RadioGroupHookParams<T, F = string> {
@@ -25,9 +25,10 @@ export interface RadioGroupHookParams<T, F = string> {
25
25
  renderKey: (option: T) => string | number | undefined,
26
26
  /**
27
27
  * A function to call whenever the value changes.
28
- * @param value the new value.
28
+ * @param newValue the new value.
29
+ * @param previousValue the previous value.
29
30
  */
30
- onChange?: (value: T) => void,
31
+ onChange?: (newValue: T | undefined, previousValue: T | undefined) => void,
31
32
  }
32
33
 
33
34
  /**
@@ -38,12 +39,13 @@ export interface RadioGroupHookParams<T, F = string> {
38
39
  export function useRadioGroupControls<T, F = string>(params: RadioGroupHookParams<T, F>) {
39
40
  const [value, setValue] = useState(params.initialValue)
40
41
  const [filter, setFilter] = useState<F | undefined>()
42
+ const previousValue = useRef(value)
41
43
  const renderKey = params.renderKey ?? defaultRenderKey
42
44
 
43
- const handleChange = useCallback((newValue: T) => {
44
- setValue(newValue)
45
- params.onChange?.(newValue)
46
- }, [])
45
+ useEffect(() => {
46
+ params.onChange?.(value, previousValue.current)
47
+ previousValue.current = value
48
+ }, [value])
47
49
 
48
50
  const { options, isUnfilteredButChecked } = useMemo(() => {
49
51
  if (!params.applyFilter || !filter) return { options: params.options, isUnfilteredButChecked: () => false }
@@ -76,7 +78,7 @@ export function useRadioGroupControls<T, F = string>(params: RadioGroupHookParam
76
78
  /**
77
79
  * Changes the current value, should be passed to the property `onChange` of the radio group.
78
80
  */
79
- setValue: handleChange,
81
+ setValue,
80
82
  /**
81
83
  * A function to render a unique key for an option. Should be passed to the property `renderKey` of the radio group.
82
84
  */