@stack-spot/citric-react 0.19.0 → 0.20.0

package/dist/components/Button.d.ts

@@ -4,7 +4,7 @@ export interface BaseButtonProps extends WithColorScheme {
      * - contained for buttons with background;
      * - outlined for transparent buttons with borders;
      * - text for buttons with no borders or background;
-     * - none for buttons with no borders, background, paddings or any effect;
+     * - none for buttons with no borders, background, paddings or any state effect (e.g. hover).
      * @default 'contained'
      */
     appearance?: 'outlined' | 'text' | 'contained' | 'none';

package/dist/utils/checkbox.d.ts

@@ -22,6 +22,11 @@ export interface CheckboxGroupHookParams<T, F = string> {
      * @returns a unique key.
      */
     renderKey: (option: T) => string | number | undefined;
+    /**
+     * A function to call whenever the value changes.
+     * @param value the new value.
+     */
+    onChange?: (value: T[]) => void;
 }
 /**
  * Use this hook to easily implement filtering and selection controls for a checkbox group.
@@ -56,7 +61,7 @@ export declare function useCheckboxGroupControls<T, F = string>(params: Checkbox
     /**
      * Changes the current value, should be passed to the property `onChange` of the checkbox group.
      */
-    setValue: import("react").Dispatch<import("react").SetStateAction<T[]>>;
+    setValue: (newValue: T[]) => void;
     /**
      * A function to render a unique key for an option. Should be passed to the property `renderKey` of the checkbox group.
      */

package/dist/utils/checkbox.d.ts.map

@@ -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;CACvD;AAED;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,uBAAuB,CAAC,CAAC,EAAE,CAAC,CAAC;IA+BzF;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;8BArEqB,MAAM,GAAG,MAAM,GAAG,SAAS;IAuEnD;;;;OAIG;gCAhDmF,CAAC;IAkDvF;;OAEG;;EAGN"}
+{"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"}

package/dist/utils/checkbox.js

@@ -9,6 +9,10 @@ export function useCheckboxGroupControls(params) {
     const [value, setValue] = useState(params.initialValue ?? []);
     const [filter, setFilter] = useState();
     const renderKey = params.renderKey ?? defaultRenderKey;
+    const handleChange = useCallback((newValue) => {
+        setValue(newValue);
+        params.onChange?.(newValue);
+    }, []);
     const { options, isUnfilteredButChecked } = useMemo(() => {
         if (!params.applyFilter || !filter)
             return { options: params.options, isUnfilteredButChecked: () => false };
@@ -28,10 +32,10 @@ export function useCheckboxGroupControls(params) {
         return { options: [...unfilteredButChecked, ...filtered], isUnfilteredButChecked: (o) => map.has(renderKey(o)) };
     }, [params.options, filter]);
     const selectAll = useCallback(() => {
-        setValue([...options]);
+        handleChange([...options]);
     }, [options]);
     const removeSelection = useCallback(() => {
-        setValue([]);
+        handleChange([]);
     }, []);
     return {
         /**
@@ -61,7 +65,7 @@ export function useCheckboxGroupControls(params) {
         /**
          * Changes the current value, should be passed to the property `onChange` of the checkbox group.
          */
-        setValue,
+        setValue: handleChange,
         /**
          * A function to render a unique key for an option. Should be passed to the property `renderKey` of the checkbox group.
          */

package/dist/utils/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/utils/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AA4B5C;;;;GAIG;AACH,MAAM,UAAU,wBAAwB,CAAgB,MAAqC;IAC3F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,YAAY,IAAI,EAAE,CAAC,CAAA;IAC7D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAiB,CAAA;IACrD,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,IAAI,gBAAgB,CAAA;IAEtD,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,GAAQ,EAAE,CAAA;QACxB,MAAM,oBAAoB,GAAQ,EAAE,CAAA;QACpC,MAAM,GAAG,GAAG,IAAI,GAAG,EAAwC,CAAA;QAC3D,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;QAC9C,KAAK,MAAM,CAAC,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YAC/B,MAAM,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;YACxB,IAAI,MAAM,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC;gBAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;iBAC9C,IAAI,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;gBACjC,oBAAoB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;gBAC5B,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,CAAA;YACpB,CAAC;QACH,CAAC;QACD,OAAO,EAAE,OAAO,EAAE,CAAC,GAAG,oBAAoB,EAAE,GAAG,QAAQ,CAAC,EAAE,sBAAsB,EAAE,CAAC,CAAI,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IACrH,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAA;IAE5B,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,QAAQ,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAA;IACxB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,QAAQ,CAAC,EAAE,CAAC,CAAA;IACd,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO;QACL;;WAEG;QACH,SAAS;QACT;;WAEG;QACH,eAAe;QACf;;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;QACtB;;WAEG;QACH,aAAa,EAAE,KAAK,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM;KAC/C,CAAA;AACH,CAAC"}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/utils/checkbox.ts"],"names":[],"mappings":"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"}

package/dist/utils/radio.d.ts

@@ -20,6 +20,11 @@ export interface RadioGroupHookParams<T, F = string> {
      * @returns a unique key.
      */
     renderKey: (option: T) => string | number | undefined;
+    /**
+     * A function to call whenever the value changes.
+     * @param value the new value.
+     */
+    onChange?: (value: T) => void;
 }
 /**
  * Use this hook to easily implement filtering for a radio group.
@@ -46,7 +51,7 @@ export declare function useRadioGroupControls<T, F = string>(params: RadioGroupH
     /**
      * Changes the current value, should be passed to the property `onChange` of the radio group.
      */
-    setValue: import("react").Dispatch<import("react").SetStateAction<T | undefined>>;
+    setValue: (newValue: T) => void;
     /**
      * A function to render a unique key for an option. Should be passed to the property `renderKey` of the radio group.
      */

package/dist/utils/radio.d.ts.map

@@ -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;CACvD;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,oBAAoB,CAAC,CAAC,EAAE,CAAC,CAAC;IAiBnF;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;8BA/CqB,MAAM,GAAG,MAAM,GAAG,SAAS;IAiDnD;;;;OAIG;gCAjC2B,CAAC;EAoClC"}
+{"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"}

package/dist/utils/radio.js

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { defaultRenderKey } from './options.js';
 /**
  * Use this hook to easily implement filtering for a radio group.
@@ -9,6 +9,10 @@ export function useRadioGroupControls(params) {
     const [value, setValue] = useState(params.initialValue);
     const [filter, setFilter] = useState();
     const renderKey = params.renderKey ?? defaultRenderKey;
+    const handleChange = useCallback((newValue) => {
+        setValue(newValue);
+        params.onChange?.(newValue);
+    }, []);
     const { options, isUnfilteredButChecked } = useMemo(() => {
         if (!params.applyFilter || !filter)
             return { options: params.options, isUnfilteredButChecked: () => false };
@@ -40,7 +44,7 @@ export function useRadioGroupControls(params) {
         /**
          * Changes the current value, should be passed to the property `onChange` of the radio group.
          */
-        setValue,
+        setValue: handleChange,
         /**
          * A function to render a unique key for an option. Should be passed to the property `renderKey` of the radio group.
          */

package/dist/utils/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../src/utils/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AA0B5C;;;;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,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"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/citric-react",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "author": "StackSpot",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Button.tsx

@@ -11,7 +11,7 @@ export interface BaseButtonProps extends WithColorScheme {
    * - contained for buttons with background;
    * - outlined for transparent buttons with borders;
    * - text for buttons with no borders or background;
-   * - none for buttons with no borders, background, paddings or any effect;
+   * - none for buttons with no borders, background, paddings or any state effect (e.g. hover).
    * @default 'contained'
    */
   appearance?: 'outlined' | 'text' | 'contained' | 'none',

package/src/utils/checkbox.ts

@@ -25,6 +25,11 @@ export interface CheckboxGroupHookParams<T, F = string> {
    * @returns a unique key.
    */
   renderKey: (option: T) => string | number | undefined,
+  /**
+   * A function to call whenever the value changes.
+   * @param value the new value.
+   */
+  onChange?: (value: T[]) => void,
 }
 
 /**
@@ -37,6 +42,11 @@ export function useCheckboxGroupControls<T, F = string>(params: CheckboxGroupHoo
   const [filter, setFilter] = useState<F | undefined>()
   const renderKey = params.renderKey ?? defaultRenderKey
 
+  const handleChange = useCallback((newValue: T[]) => {
+    setValue(newValue)
+    params.onChange?.(newValue)
+  }, [])
+
   const { options, isUnfilteredButChecked } = useMemo(() => {
     if (!params.applyFilter || !filter) return { options: params.options, isUnfilteredButChecked: () => false }
     const filtered: T[] = []
@@ -55,11 +65,11 @@ export function useCheckboxGroupControls<T, F = string>(params: CheckboxGroupHoo
   }, [params.options, filter])
 
   const selectAll = useCallback(() => {
-    setValue([...options])
+    handleChange([...options])
   }, [options])
 
   const removeSelection = useCallback(() => {
-    setValue([])
+    handleChange([])
   }, [])
 
   return {
@@ -90,7 +100,7 @@ export function useCheckboxGroupControls<T, F = string>(params: CheckboxGroupHoo
     /**
      * Changes the current value, should be passed to the property `onChange` of the checkbox group.
      */
-    setValue,
+    setValue: handleChange,
     /**
      * A function to render a unique key for an option. Should be passed to the property `renderKey` of the checkbox group.
      */

package/src/utils/radio.ts

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { defaultRenderKey } from './options'
 
 export interface RadioGroupHookParams<T, F = string> {
@@ -23,6 +23,11 @@ export interface RadioGroupHookParams<T, F = string> {
    * @returns a unique key.
    */
   renderKey: (option: T) => string | number | undefined,
+  /**
+   * A function to call whenever the value changes.
+   * @param value the new value.
+   */
+  onChange?: (value: T) => void,
 }
 
 /**
@@ -35,6 +40,11 @@ export function useRadioGroupControls<T, F = string>(params: RadioGroupHookParam
   const [filter, setFilter] = useState<F | undefined>()
   const renderKey = params.renderKey ?? defaultRenderKey
 
+  const handleChange = useCallback((newValue: T) => {
+    setValue(newValue)
+    params.onChange?.(newValue)
+  }, [])
+
   const { options, isUnfilteredButChecked } = useMemo(() => {
     if (!params.applyFilter || !filter) return { options: params.options, isUnfilteredButChecked: () => false }
     const valueKey = value ? renderKey(value) : undefined
@@ -66,7 +76,7 @@ export function useRadioGroupControls<T, F = string>(params: RadioGroupHookParam
     /**
      * Changes the current value, should be passed to the property `onChange` of the radio group.
      */
-    setValue,
+    setValue: handleChange,
     /**
      * A function to render a unique key for an option. Should be passed to the property `renderKey` of the radio group.
      */