@stack-spot/citric-react 0.15.3 → 0.16.0

package/dist/citric.css

@@ -471,6 +471,12 @@
 }
 
 [data-citric="tabs"] {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  flex: 1;
+  overflow: hidden;
+
   > nav {
     display: flex;
     border-bottom: 1px solid var(--light-600);
@@ -508,7 +514,10 @@
   }
 
   > section {
-    margin-top: 16px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: auto;
   }
 
   &.stepper {
@@ -1940,7 +1949,6 @@ input[type="reset"][data-citric="icon-box"], .apply-citric input[type="reset"].c
 
   &.full-width {
     width: auto;
-    flex: 1;
     input {
       flex: 1;
     }
@@ -1978,6 +1986,10 @@ input[type="reset"][data-citric="icon-box"], .apply-citric input[type="reset"].c
   }
 }
 
+.row > [data-citric="field-group"].full-width {
+  flex: 1;
+}
+
 
 input[data-citric="favorite"][type="checkbox"] {
   --icon: var(--citric-icon-outline-Star);

package/dist/index.d.ts

@@ -49,5 +49,7 @@ export * from './components/Textarea.js';
 export * from './components/Tooltip.js';
 export * from './context/CitricProvider.js';
 export type { CitricController } from './types.js';
+export * from './utils/checkbox.js';
+export * from './utils/radio.js';
 export * from './utils/ValueController.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,cAAc,yBAAyB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}

package/dist/index.js

@@ -48,5 +48,7 @@ export * from './components/Text.js';
 export * from './components/Textarea.js';
 export * from './components/Tooltip.js';
 export * from './context/CitricProvider.js';
+export * from './utils/checkbox.js';
+export * from './utils/radio.js';
 export * from './utils/ValueController.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AAExC,cAAc,yBAAyB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AAExC,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}

package/dist/utils/checkbox.d.ts

@@ -0,0 +1,75 @@
+export interface CheckboxGroupHookParams<T, F = string> {
+    /**
+     * The initial value for the checkbox group.
+     *
+     * @default []
+     */
+    initialValue?: T[];
+    /**
+     * A function to apply a filter to an option. Must return true if the option respects the filter and false otherwise.
+     * @param filter the current filter.
+     * @param option the current option.
+     * @returns true if the option should pass the filter, false if the option should be discarded.
+     */
+    applyFilter?: (filter: F, option: T) => boolean;
+    /**
+     * The full set of options for the checkbox group.
+     */
+    options: T[];
+    /**
+     * A function that produces a unique id for an option.
+     * @param option the current option.
+     * @returns a unique key.
+     */
+    renderKey: (option: T) => string | number | undefined;
+}
+/**
+ * Use this hook to easily implement filtering and selection controls for a checkbox group.
+ * @param params the parameters to create the controls.
+ * @returns the checkbox controls.
+ */
+export declare function useCheckboxGroupControls<T, F = string>(params: CheckboxGroupHookParams<T, F>): {
+    /**
+     * Selects all the options currently visible.
+     */
+    selectAll: () => void;
+    /**
+     * Removes all options from the selection.
+     */
+    removeSelection: () => void;
+    /**
+     * The current filter applied.
+     */
+    filter: F | undefined;
+    /**
+     * Apply a new filter.
+     */
+    setFilter: import("react").Dispatch<import("react").SetStateAction<F | undefined>>;
+    /**
+     * The options that should be passed to the checkbox group.
+     */
+    options: T[];
+    /**
+     * The value that should be passed to the checkbox group.
+     */
+    value: T[];
+    /**
+     * Changes the current value, should be passed to the property `onChange` of the checkbox group.
+     */
+    setValue: import("react").Dispatch<import("react").SetStateAction<T[]>>;
+    /**
+     * A function to render a unique key for an option. Should be passed to the property `renderKey` of the checkbox group.
+     */
+    renderKey: (option: T) => string | number | undefined;
+    /**
+     * A function that returns true if the option is filtered out, but checked.
+     * @param option the option to check.
+     * @returns true if the option was filtered out, but is checked; false otherwise.
+     */
+    isUnfilteredButChecked: (o: T) => boolean;
+    /**
+     * True if all options showing are selected, false otherwise.
+     */
+    isAllSelected: boolean;
+};
+//# sourceMappingURL=checkbox.d.ts.map

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

@@ -0,0 +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"}

package/dist/utils/checkbox.js

@@ -0,0 +1,81 @@
+import { useCallback, useMemo, useState } from 'react';
+import { defaultRenderKey } from './options.js';
+/**
+ * Use this hook to easily implement filtering and selection controls for a checkbox group.
+ * @param params the parameters to create the controls.
+ * @returns the checkbox controls.
+ */
+export function useCheckboxGroupControls(params) {
+    const [value, setValue] = useState(params.initialValue ?? []);
+    const [filter, setFilter] = useState();
+    const renderKey = params.renderKey ?? defaultRenderKey;
+    const { options, isUnfilteredButChecked } = useMemo(() => {
+        if (!params.applyFilter || !filter)
+            return { options: params.options, isUnfilteredButChecked: () => false };
+        const filtered = [];
+        const unfilteredButChecked = [];
+        const map = new Map();
+        const valueKeys = value.map(o => renderKey(o));
+        for (const o of params.options) {
+            const key = renderKey(o);
+            if (params.applyFilter(filter, o))
+                filtered.push(o);
+            else if (valueKeys.includes(key)) {
+                unfilteredButChecked.push(o);
+                map.set(key, true);
+            }
+        }
+        return { options: [...unfilteredButChecked, ...filtered], isUnfilteredButChecked: (o) => map.has(renderKey(o)) };
+    }, [params.options, filter]);
+    const selectAll = useCallback(() => {
+        setValue([...options]);
+    }, [options]);
+    const removeSelection = useCallback(() => {
+        setValue([]);
+    }, []);
+    return {
+        /**
+         * Selects all the options currently visible.
+         */
+        selectAll,
+        /**
+         * Removes all options from the selection.
+         */
+        removeSelection,
+        /**
+         * The current filter applied.
+         */
+        filter,
+        /**
+         * Apply a new filter.
+         */
+        setFilter: setFilter,
+        /**
+         * The options that should be passed to the checkbox group.
+         */
+        options,
+        /**
+         * The value that should be passed to the checkbox group.
+         */
+        value,
+        /**
+         * Changes the current value, should be passed to the property `onChange` of the checkbox group.
+         */
+        setValue,
+        /**
+         * A function to render a unique key for an option. Should be passed to the property `renderKey` of the checkbox group.
+         */
+        renderKey,
+        /**
+         * A function that returns true if the option is filtered out, but checked.
+         * @param option the option to check.
+         * @returns true if the option was filtered out, but is checked; false otherwise.
+         */
+        isUnfilteredButChecked,
+        /**
+         * True if all options showing are selected, false otherwise.
+         */
+        isAllSelected: value.length === options.length,
+    };
+}
+//# sourceMappingURL=checkbox.js.map

package/dist/utils/checkbox.js.map

@@ -0,0 +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"}

package/dist/utils/radio.d.ts

@@ -0,0 +1,61 @@
+export interface RadioGroupHookParams<T, F = string> {
+    /**
+     * The initial value for the radio group.
+     */
+    initialValue?: T;
+    /**
+     * A function to apply a filter to an option. Must return true if the option respects the filter and false otherwise.
+     * @param filter the current filter.
+     * @param option the current option.
+     * @returns true if the option should pass the filter, false if the option should be discarded.
+     */
+    applyFilter?: (filter: F, option: T) => boolean;
+    /**
+     * The full set of options for the radio group.
+     */
+    options: T[];
+    /**
+     * A function that produces a unique id for an option.
+     * @param option the current option.
+     * @returns a unique key.
+     */
+    renderKey: (option: T) => string | number | undefined;
+}
+/**
+ * Use this hook to easily implement filtering for a radio group.
+ * @param params the parameters to create the controls.
+ * @returns the checkbox controls.
+ */
+export declare function useRadioGroupControls<T, F = string>(params: RadioGroupHookParams<T, F>): {
+    /**
+     * The current filter applied.
+     */
+    filter: F | undefined;
+    /**
+     * Apply a new filter.
+     */
+    setFilter: import("react").Dispatch<import("react").SetStateAction<F | undefined>>;
+    /**
+     * The options that should be passed to the radio group.
+     */
+    options: T[];
+    /**
+     * The value that should be passed to the radio group.
+     */
+    value: T | undefined;
+    /**
+     * Changes the current value, should be passed to the property `onChange` of the radio group.
+     */
+    setValue: import("react").Dispatch<import("react").SetStateAction<T | undefined>>;
+    /**
+     * A function to render a unique key for an option. Should be passed to the property `renderKey` of the radio group.
+     */
+    renderKey: (option: T) => string | number | undefined;
+    /**
+     * A function that returns true if the option is filtered out, but checked.
+     * @param option the option to check.
+     * @returns true if the option was filtered out, but is checked; false otherwise.
+     */
+    isUnfilteredButChecked: (o: T) => boolean | undefined;
+};
+//# sourceMappingURL=radio.d.ts.map

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

@@ -0,0 +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"}

package/dist/utils/radio.js

@@ -0,0 +1,56 @@
+import { useMemo, useState } from 'react';
+import { defaultRenderKey } from './options.js';
+/**
+ * Use this hook to easily implement filtering for a radio group.
+ * @param params the parameters to create the controls.
+ * @returns the checkbox controls.
+ */
+export function useRadioGroupControls(params) {
+    const [value, setValue] = useState(params.initialValue);
+    const [filter, setFilter] = useState();
+    const renderKey = params.renderKey ?? defaultRenderKey;
+    const { options, isUnfilteredButChecked } = useMemo(() => {
+        if (!params.applyFilter || !filter)
+            return { options: params.options, isUnfilteredButChecked: () => false };
+        const valueKey = value ? renderKey(value) : undefined;
+        const isValueFilteredOut = value && !params.applyFilter?.(filter, value);
+        const filtered = params.options.filter(o => params.applyFilter?.(filter, o));
+        return {
+            options: isValueFilteredOut ? [value, ...filtered] : filtered,
+            isUnfilteredButChecked: (o) => isValueFilteredOut && renderKey(o) === valueKey,
+        };
+    }, [params.options, filter]);
+    return {
+        /**
+         * The current filter applied.
+         */
+        filter,
+        /**
+         * Apply a new filter.
+         */
+        setFilter: setFilter,
+        /**
+         * The options that should be passed to the radio group.
+         */
+        options,
+        /**
+         * The value that should be passed to the radio group.
+         */
+        value,
+        /**
+         * Changes the current value, should be passed to the property `onChange` of the radio group.
+         */
+        setValue,
+        /**
+         * A function to render a unique key for an option. Should be passed to the property `renderKey` of the radio group.
+         */
+        renderKey,
+        /**
+         * A function that returns true if the option is filtered out, but checked.
+         * @param option the option to check.
+         * @returns true if the option was filtered out, but is checked; false otherwise.
+         */
+        isUnfilteredButChecked,
+    };
+}
+//# sourceMappingURL=radio.js.map

package/dist/utils/radio.js.map

@@ -0,0 +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"}

package/package.json

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

package/src/index.ts

@@ -49,4 +49,6 @@ export * from './components/Textarea'
 export * from './components/Tooltip'
 export * from './context/CitricProvider'
 export type { CitricController } from './types'
+export * from './utils/checkbox'
+export * from './utils/radio'
 export * from './utils/ValueController'

package/src/utils/checkbox.ts

@@ -0,0 +1,109 @@
+import { useCallback, useMemo, useState } from 'react'
+import { defaultRenderKey } from './options'
+
+export interface CheckboxGroupHookParams<T, F = string> {
+  /**
+   * The initial value for the checkbox group.
+   * 
+   * @default []
+   */
+  initialValue?: T[],
+  /**
+   * A function to apply a filter to an option. Must return true if the option respects the filter and false otherwise.
+   * @param filter the current filter.
+   * @param option the current option.
+   * @returns true if the option should pass the filter, false if the option should be discarded.
+   */
+  applyFilter?: (filter: F, option: T) => boolean,
+  /**
+   * The full set of options for the checkbox group.
+   */
+  options: T[],
+  /**
+   * A function that produces a unique id for an option.
+   * @param option the current option.
+   * @returns a unique key.
+   */
+  renderKey: (option: T) => string | number | undefined,
+}
+
+/**
+ * Use this hook to easily implement filtering and selection controls for a checkbox group.
+ * @param params the parameters to create the controls.
+ * @returns the checkbox controls.
+ */
+export function useCheckboxGroupControls<T, F = string>(params: CheckboxGroupHookParams<T, F>) {
+  const [value, setValue] = useState(params.initialValue ?? [])
+  const [filter, setFilter] = useState<F | undefined>()
+  const renderKey = params.renderKey ?? defaultRenderKey
+
+  const { options, isUnfilteredButChecked } = useMemo(() => {
+    if (!params.applyFilter || !filter) return { options: params.options, isUnfilteredButChecked: () => false }
+    const filtered: T[] = []
+    const unfilteredButChecked: T[] = []
+    const map = new Map<number | string | undefined, boolean>()
+    const valueKeys = value.map(o => renderKey(o))
+    for (const o of params.options) {
+      const key = renderKey(o)
+      if (params.applyFilter(filter, o)) filtered.push(o)
+      else if (valueKeys.includes(key)) {
+        unfilteredButChecked.push(o)
+        map.set(key, true)
+      }
+    }
+    return { options: [...unfilteredButChecked, ...filtered], isUnfilteredButChecked: (o: T) => map.has(renderKey(o)) }
+  }, [params.options, filter])
+
+  const selectAll = useCallback(() => {
+    setValue([...options])
+  }, [options])
+
+  const removeSelection = useCallback(() => {
+    setValue([])
+  }, [])
+
+  return {
+    /**
+     * Selects all the options currently visible.
+     */
+    selectAll,
+    /**
+     * Removes all options from the selection.
+     */
+    removeSelection,
+    /**
+     * The current filter applied.
+     */
+    filter,
+    /**
+     * Apply a new filter.
+     */
+    setFilter: setFilter,
+    /**
+     * The options that should be passed to the checkbox group.
+     */
+    options,
+    /**
+     * The value that should be passed to the checkbox group.
+     */
+    value,
+    /**
+     * Changes the current value, should be passed to the property `onChange` of the checkbox group.
+     */
+    setValue,
+    /**
+     * A function to render a unique key for an option. Should be passed to the property `renderKey` of the checkbox group.
+     */
+    renderKey,
+    /**
+     * A function that returns true if the option is filtered out, but checked.
+     * @param option the option to check.
+     * @returns true if the option was filtered out, but is checked; false otherwise.
+     */
+    isUnfilteredButChecked,
+    /**
+     * True if all options showing are selected, false otherwise.
+     */
+    isAllSelected: value.length === options.length,
+  }
+}

package/src/utils/radio.ts

@@ -0,0 +1,81 @@
+import { useMemo, useState } from 'react'
+import { defaultRenderKey } from './options'
+
+export interface RadioGroupHookParams<T, F = string> {
+  /**
+   * The initial value for the radio group.
+   */
+  initialValue?: T,
+  /**
+   * A function to apply a filter to an option. Must return true if the option respects the filter and false otherwise.
+   * @param filter the current filter.
+   * @param option the current option.
+   * @returns true if the option should pass the filter, false if the option should be discarded.
+   */
+  applyFilter?: (filter: F, option: T) => boolean,
+  /**
+   * The full set of options for the radio group.
+   */
+  options: T[],
+  /**
+   * A function that produces a unique id for an option.
+   * @param option the current option.
+   * @returns a unique key.
+   */
+  renderKey: (option: T) => string | number | undefined,
+}
+
+/**
+ * Use this hook to easily implement filtering for a radio group.
+ * @param params the parameters to create the controls.
+ * @returns the checkbox controls.
+ */
+export function useRadioGroupControls<T, F = string>(params: RadioGroupHookParams<T, F>) {
+  const [value, setValue] = useState(params.initialValue)
+  const [filter, setFilter] = useState<F | undefined>()
+  const renderKey = params.renderKey ?? defaultRenderKey
+
+  const { options, isUnfilteredButChecked } = useMemo(() => {
+    if (!params.applyFilter || !filter) return { options: params.options, isUnfilteredButChecked: () => false }
+    const valueKey = value ? renderKey(value) : undefined
+    const isValueFilteredOut = value && !params.applyFilter?.(filter, value)
+    const filtered = params.options.filter(o => params.applyFilter?.(filter, o))
+    return {
+      options: isValueFilteredOut ? [value, ...filtered] : filtered,
+      isUnfilteredButChecked: (o: T) => isValueFilteredOut && renderKey(o) === valueKey,
+    }
+  }, [params.options, filter])
+
+  return {
+    /**
+     * The current filter applied.
+     */
+    filter,
+    /**
+     * Apply a new filter.
+     */
+    setFilter: setFilter,
+    /**
+     * The options that should be passed to the radio group.
+     */
+    options,
+    /**
+     * The value that should be passed to the radio group.
+     */
+    value,
+    /**
+     * Changes the current value, should be passed to the property `onChange` of the radio group.
+     */
+    setValue,
+    /**
+     * A function to render a unique key for an option. Should be passed to the property `renderKey` of the radio group.
+     */
+    renderKey,
+    /**
+     * A function that returns true if the option is filtered out, but checked.
+     * @param option the option to check.
+     * @returns true if the option was filtered out, but is checked; false otherwise.
+     */
+    isUnfilteredButChecked,
+  }
+}