@geo2france/api-dashboard 1.16.0 → 1.17.0

package/dist/components/Charts/Statistics.js

@@ -25,12 +25,12 @@ export const Statistics = ({ dataset: dataset_id, dataKey, unit, evolutionSuffix
     const dataset = useDataset(dataset_id);
     const row = dataset?.data?.slice(-1)[0];
     const value = row?.[dataKey]; // Dernière valeur du dataset. Caster en Number ?
-    const compare_value = compareWith === 'previous' ? dataset?.data?.slice(-2)[0][dataKey] : dataset?.data?.slice(0, 1)[0][dataKey]; //Première ou avant dernière
+    const compare_value = compareWith === 'previous' ? dataset?.data?.slice(-2)?.[0]?.[dataKey] : dataset?.data?.slice(0, 1)?.[0]?.[dataKey]; //Première ou avant dernière
     const evolution = relativeEvolution ? 100 * ((value - compare_value) / compare_value) : value - compare_value;
     const evolution_unit = relativeEvolution ? '%' : unit;
     const evolution_is_good = invertColor ? evolution < 0 : evolution > 0;
     const tooltip = help && _jsx(Tooltip, { title: help, children: _jsx(QuestionCircleOutlined, {}) });
-    const CallbackParams = { value: value || NaN, compareValue: compare_value || NaN, data: dataset?.data || [], row: row };
+    const CallbackParams = { value: value ?? NaN, compareValue: compare_value ?? NaN, data: dataset?.data ?? [], row: row };
     let subtitle;
     if (annotation !== undefined) {
         subtitle = typeof annotation === 'function' ? annotation(CallbackParams) : annotation;

package/dist/components/Charts/YearSerie.js

@@ -40,6 +40,7 @@ export const ChartYearSerie = ({ dataset: dataset_id, categoryKey, valueKey, sec
             .derive({ part: d => 100 * d.value / op.sum(d.value) }) // Data for normalized view
             .rename({ value: valueKey, part: `${valueKey}_pct`, secondaryValue: secondaryValueKey || '' }) // Rename to original var name
         ).objects();
+        chart_data.sort((a, b) => a[yearKey] - b[yearKey]);
     }
     const COLORS = usePalette({ nColors: distinct_cat?.length }) || [];
     const colors_labels = usePaletteLabels();

package/dist/components/Control/Control.d.ts

@@ -7,15 +7,31 @@ declare const Control: React.FC<IControlProps>;
 export default Control;
 export declare const useControl: (name: string) => string | undefined;
 export declare const useAllControls: () => Record<string, any>;
-export declare const list_to_options: (input?: string[] | number[] | {
-    label: string | number;
-    value: string | number;
+export declare const list_to_options: (input?: string[] | {
+    label: string;
+    value: string;
 }[]) => {
-    label: string | number;
-    value: string | number;
+    label: string;
+    value: string;
 }[];
 interface IControlProps {
     children: ReactElement | ReactElement[];
 }
 export declare const DSL_Control: React.FC<IControlProps>;
 export declare const ControlPreview: React.FC;
+type ControlContextType = {
+    values: Record<string, any>;
+    register: (control: {
+        name: string;
+        value: any;
+    }) => void;
+    clear: () => void;
+    getAll: () => Record<string, any>;
+};
+export declare const ControlContext: React.Context<ControlContextType | undefined>;
+export declare const CreateControlesRegistry: () => {
+    register: (c: Record<string, any>) => void;
+    clear: () => void;
+    getAll: () => Record<string, any>;
+    values: Record<string, any>;
+};

package/dist/components/Control/Control.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Descriptions, Form, Layout } from "antd";
-import React, { useContext, useEffect } from "react";
-import { ControlContext } from "../DashboardPage/Page";
+import React, { createContext, useCallback, useContext, useEffect, useState } from "react";
 const { Header } = Layout;
 /*
  * Composant destiné à recevoir un Form avec les contrôles de la page
@@ -28,7 +27,7 @@ export const useControl = (name) => {
     if (!context_controls) {
         throw new Error("useControl must be used within a ControlProvider");
     }
-    const { values } = context_controls;
+    const values = context_controls.getAll();
     const value = values[name];
     return value;
 };
@@ -49,8 +48,8 @@ export const list_to_options = (input = []) => {
         return [];
     }
     return input.map((o) => {
-        if (typeof o == "string" || typeof o == "number") {
-            return { label: String(o), value: o };
+        if (typeof o == "string") {
+            return { label: String(o), value: String(o) };
         }
         return o;
     });
@@ -64,7 +63,7 @@ export const DSL_Control = ({ children }) => {
     if (!context_controls) { //Le contexte peut être nul ?
         throw new Error("useControl must be used within a ControlProvider");
     }
-    const { values: _control, pushValue: pushControl } = context_controls;
+    const { values: _control, register: pushControl } = context_controls;
     const childrenArray = React.Children.toArray(children).filter((child) => React.isValidElement(child));
     //Ajout des nouvelles valeurs de controles dans le contexte de la page
     const handleChange = (changed_value) => {
@@ -83,3 +82,26 @@ export const ControlPreview = ({}) => {
     }));
     return (_jsx(Descriptions, { items: items }));
 };
+export const ControlContext = createContext(undefined);
+export const CreateControlesRegistry = () => {
+    /* CONTROLS */
+    const [controls, setControles] = useState({});
+    const pushControl = useCallback((c) => {
+        setControles(prev => ({
+            ...prev,
+            ...c
+        }));
+    }, []);
+    const clear = useCallback(() => {
+        setControles({});
+    }, []);
+    const getAll = useCallback(() => {
+        return controls;
+    }, [controls]);
+    return ({
+        register: pushControl,
+        clear,
+        getAll,
+        values: controls
+    });
+};

package/dist/components/Control/Radio.d.ts

@@ -2,18 +2,18 @@ import type { RadioGroupProps } from 'antd';
 import { SimpleRecord } from '../../types';
 export declare const buildOptionsFromData: (data: SimpleRecord[], labelField?: string, valueField?: string) => {
     label: string;
-    value: string | number;
+    value: string;
 }[];
 type ExtendedRadioGroupProps = RadioGroupProps & {
     name?: string;
     dataset?: string;
     options?: {
         label: string;
-        value: string | number;
-    }[] | string[] | number[];
+        value: string;
+    }[] | string[];
     labelField?: string;
     valueField?: string;
-    initalValue?: string | number;
+    initalValue?: string;
 };
 export declare const Radio: React.FC<ExtendedRadioGroupProps>;
 export {};

package/dist/components/Control/Radio.js

@@ -6,6 +6,9 @@ import { list_to_options } from './Control';
 // On construit les options depuis le tableau de données, utiliser pour Radio et Select
 export const buildOptionsFromData = (data, labelField = 'label', valueField = 'value') => {
     const t = from(data);
+    if (data.length <= 0) { //Avoir arquero error on empty data
+        return [];
+    }
     return (t.select(labelField, valueField)
         .dedupe(valueField)
         .objects()

package/dist/components/Control/Select.d.ts

@@ -3,13 +3,15 @@ type ExtendedSelectProps = Omit<SelectProps<any>, 'options'> & {
     dataset?: string;
     options?: {
         label: string;
-        value: string | number;
-    }[] | string[] | number[];
-    initial_value?: string | number;
+        value: string;
+    }[] | string[];
+    initial_value?: string;
     labelField?: string;
     valueField?: string;
     name?: string;
+    label?: string;
     arrows?: boolean;
+    reverse?: boolean;
 };
 export declare const Select: React.FC<ExtendedSelectProps>;
 export {};

package/dist/components/Control/Select.js

@@ -5,13 +5,13 @@ import NextPrevSelect from '../NextPrevSelect/NextPrevSelect';
 import { list_to_options } from './Control';
 // TODO : a fusionner avec NextPrevSelect pour n'avoir qu'un seul composant
 // Actuellement, Select apporte seulement le fait de choisir les valeurs depuis un
-export const Select = ({ name, dataset: datasetSource, options: input_options = [], labelField = 'label', valueField = 'value', arrows = false, initial_value: initial_value_in, ...rest }) => {
+export const Select = ({ name, dataset: datasetSource, options: input_options = [], labelField = 'label', valueField = 'value', arrows = false, reverse = false, label, initial_value: initial_value_in, ...rest }) => {
     const options = list_to_options(input_options);
     const data = useDataset(datasetSource)?.data;
     const data_options = datasetSource ? (data && buildOptionsFromData(data, labelField, valueField)) : options;
     const myOptions = data_options && data_options.map((o) => {
-        if (typeof o == "string" || typeof o == "number") {
-            return { label: o, value: o };
+        if (typeof o == "string") {
+            return { label: o, value: String(o) };
         }
         return o;
     });
@@ -22,5 +22,5 @@ export const Select = ({ name, dataset: datasetSource, options: input_options =
     const value = initial_value == null || initial_value == false
         ? undefined
         : initial_value;
-    return (_jsx(NextPrevSelect, { name: name, options: data_options, defaultValue: value, value: value, arrows: arrows, optionFilterProp: "label", ...rest }));
+    return (_jsx(NextPrevSelect, { name: name, label: label ?? name, options: data_options, defaultValue: value, value: value, arrows: arrows, reverse: reverse, optionFilterProp: "label", ...rest }));
 };

package/dist/components/DashboardPage/Page.d.ts

@@ -17,14 +17,6 @@ interface IDashboardPageProps {
 }
 declare const DashboardPage: React.FC<IDashboardPageProps>;
 export default DashboardPage;
-type ControlContextType = {
-    values: Record<string, any>;
-    pushValue: (control: {
-        name: string;
-        value: any;
-    }) => void;
-};
-export declare const ControlContext: React.Context<ControlContextType | undefined>;
 interface IDSLDashboardPageProps {
     children: React.ReactNode;
     name?: string;

package/dist/components/DashboardPage/Page.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button, Col, Dropdown, Flex, Grid, Layout, Radio, Row, Tabs, theme } from "antd";
-import React, { isValidElement, useState, createContext, useEffect } from "react";
+import React, { isValidElement, useState, useEffect, useContext } from "react";
 import { Helmet } from "react-helmet-async";
 import { useSearchParamsState } from "../../utils/useSearchParamsState";
-import Control, { DSL_Control } from "../Control/Control";
+import Control, { ControlContext, DSL_Control } from "../Control/Control";
 import { Dataset, Debug, Provider } from "../../dsl";
 import { DEFAULT_PALETTE, Palette, PaletteContext } from "../Palette/Palette";
 import { Section } from "./Section";
 import { Icon } from "@iconify/react";
-import { useDatasetRegistry } from "../Dataset/hooks";
+import { DatasetRegistryContext } from "../Dataset/context";
 const { Header } = Layout;
 const { useToken } = theme;
 const getSection = (child) => React.isValidElement(child) ? child.props.section : undefined;
@@ -40,14 +40,15 @@ const DashboardPage = ({ children: children_input, control, row_gutter = [8, 8],
                                 })), value: activeTab, onChange: (e) => setActiveTab(e.target.value) }), control] }) }), _jsx(Row, { gutter: row_gutter, style: { margin: 16 }, children: children.map((child, idx) => ({ child, idx })).filter(({ child }) => (getSection(child) ?? 'Autres') == activeTab).map(({ child, idx }) => _jsx(Col, { xl: 12, xs: 24, children: child }, idx)) })] }));
 };
 export default DashboardPage;
-export const ControlContext = createContext(undefined);
 export const DSL_DashboardPage = ({ name = 'Tableau de bord', columns = 2, children, debug = false }) => {
     const { token } = useToken();
     const [palette, setPalette] = useState(DEFAULT_PALETTE);
-    const datasetRegistry = useDatasetRegistry();
+    const datasetRegistry = useContext(DatasetRegistryContext);
+    const controlesRegistry = useContext(ControlContext);
     useEffect(() => {
         return () => {
             datasetRegistry.clear();
+            controlesRegistry?.clear();
         };
     }, []);
     //const allDatasetLoaded = Object.values(datasets).every(d => !d.isFetching);

package/dist/components/Dataset/Dataset.js

@@ -1,10 +1,9 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useEffect } from "react";
 import { useApi } from "../..";
-import { ControlContext } from "../DashboardPage/Page";
 import { Producer } from "./Producer";
 import React from "react";
-import { Filter, Transform, useAllDatasets, useDatasets } from "../../dsl";
+import { Filter, Transform, useAllControls, useAllDatasets, useDatasets } from "../../dsl";
 import alasql from "alasql";
 import { DataProviderContext, getProviderFromType } from "./Provider";
 import { Join } from "./Join";
@@ -58,8 +57,7 @@ export const DSL_Dataset = ({ children, id, provider: provider_input, type: prov
     };
     const datasetRegistryContext = useContext(DatasetRegistryContext);
     const allDatasets = useAllDatasets();
-    const controlContext = useContext(ControlContext);
-    const controls = controlContext?.values;
+    const controls = useAllControls();
     const providerContext = useContext(DataProviderContext);
     const provider = (providerUrl && getProviderFromType(providerType)(providerUrl)) || providerContext || provider_input;
     if (provider === undefined) {

package/dist/components/Dataset/Producer.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useDatasets } from "./hooks";
 import { Typography } from "antd";
-const { Link } = Typography;
+const { Link, Text } = Typography;
 /**
  * Les props sont récupérées par le parent (Dataset) et enregistrés avec le dataset
  */
@@ -21,7 +21,7 @@ export const ProducersFooter = ({ component }) => {
         const uniqueProducers = Array.from(new Map(producers?.map(p => [p.nom, p]) // clé unique = nom
         ).values());
         uniqueProducers.sort((a, b) => a.nom.localeCompare(b.nom));
-        return datasets ? (_jsxs(_Fragment, { children: ["Source des donn\u00E9es :", " ", uniqueProducers?.map((p, idx, arr) => (_jsxs("span", { children: [_jsx(Link, { href: p.url, children: p.nom }), idx < arr.length - 1 ? ', ' : ''] }, idx)))] })) : null;
+        return (producers?.length > 0) ? (_jsxs(Text, { type: "secondary", style: { padding: 4 }, children: ["Source des donn\u00E9es :", " ", uniqueProducers?.map((p, idx, arr) => (_jsxs("span", { children: [_jsx(Link, { href: p.url, children: p.nom }), idx < arr.length - 1 ? ', ' : ''] }, idx)))] })) : null;
     }
     return _jsx(_Fragment, {});
 };

package/dist/components/Dataset/Transform.d.ts

@@ -1,6 +1,16 @@
 import { SimpleRecord } from "../..";
-interface ITransformProps<T = SimpleRecord[]> {
-    children: string | ((data: T) => T);
+interface ITransformProps {
+    /**
+   * Contenu du Transform :
+   * - **string** : SQL (interprété par Alasql)
+   * - **fonction** `(data: any) => SimpleRecord[]` : transforme les données brutes ou déjà transformées
+   *   en un tableau de `SimpleRecord`.
+   */
+    children: string | ((data: any) => SimpleRecord[]);
 }
-export declare const DSL_Transform: React.FC<ITransformProps>;
+/**
+ * Composant permettant d'appliquer une transformation à un jeu de données.
+ * La transformation est appliquée via une fonction ou une chaîne SQL.
+ */
+export declare const Transform: React.FC<ITransformProps>;
 export {};

package/dist/components/Dataset/Transform.js

@@ -1,7 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-/*
-* Les props sont utilisées dans le Dataset parent pour appliquer une (ou plusieurs fonction de transformation)
-*/
-export const DSL_Transform = () => {
+/**
+ * Composant permettant d'appliquer une transformation à un jeu de données.
+ * La transformation est appliquée via une fonction ou une chaîne SQL.
+ */
+export const Transform = () => {
     return _jsx(_Fragment, {});
 };

package/dist/components/Dataset/hooks.d.ts

@@ -2,7 +2,11 @@ import { dataset } from "./Dataset";
 export declare const useDataset: (dataset_id?: string) => dataset | undefined;
 export declare const useAllDatasets: () => dataset[];
 export declare const useDatasets: (dataset_ids?: string[]) => dataset[];
-export declare const useDatasetRegistry: () => {
+/**
+ * Fonction permettant de créer le registre de dataset
+ * avec les méthodes nécessaires.
+ */
+export declare const createDatasetRegistry: () => {
     register: (d: dataset) => void;
     clear: () => void;
     get: (dataset_id?: string) => dataset | undefined;

package/dist/components/Dataset/hooks.js

@@ -17,7 +17,11 @@ export const useDatasets = (dataset_ids) => {
     const datasets = useAllDatasets();
     return (datasets.filter(d => dataset_ids?.includes(d.id)));
 };
-export const useDatasetRegistry = () => {
+/**
+ * Fonction permettant de créer le registre de dataset
+ * avec les méthodes nécessaires.
+ */
+export const createDatasetRegistry = () => {
     /* DATASET */
     const [datasets, setdatasets] = useState({});
     const pushDataset = useCallback((d) => {

package/dist/components/Layout/DashboardApp.js

@@ -7,11 +7,11 @@ import DashboardSider from "./Sider";
 import { Content } from "antd/es/layout/layout";
 import { ErrorComponent } from "./Error";
 import { DasbhoardFooter } from "./Footer";
-import { createContext, useState } from "react";
-import { ControlContext } from "../DashboardPage/Page";
+import { createContext } from "react";
 import { HelmetProvider } from "react-helmet-async";
-import { useDatasetRegistry } from "../Dataset/hooks";
+import { createDatasetRegistry } from "../Dataset/hooks";
 import { DatasetRegistryContext } from "../Dataset/context";
+import { ControlContext, CreateControlesRegistry } from "../Control/Control";
 //import '../../index.css' //TODO a intégrer en jsx
 const queryClient = new QueryClient();
 const default_theme = {
@@ -35,14 +35,6 @@ const default_theme = {
 export const AppContext = createContext({});
 const DashboardApp = ({ routes, theme, logo, brands, footerSlider, title, subtitle }) => {
     const context_values = { title, subtitle, logo };
-    /* CONTROLS */
-    const [controls, setControles] = useState({});
-    const pushControl = (c) => {
-        setControles(prev => ({
-            ...prev,
-            ...c
-        }));
-    };
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ConfigProvider, { theme: theme || default_theme /* Merger plutôt ?*/, children: _jsx(HelmetProvider, { children: _jsx(AppContext.Provider, { value: context_values, children: _jsx(DatasetRegistryContext.Provider, { value: useDatasetRegistry(), children: _jsx(ControlContext.Provider, { value: { values: controls, pushValue: pushControl }, children: _jsx(HashRouter, { children: _jsx(Routes, { children: _jsxs(Route, { element: _jsxs(Layout, { hasSider: true, style: { minHeight: '100vh' }, children: [_jsx(DashboardSider, { route_config: routes }), _jsxs(Layout, { children: [_jsx(Content, { style: { width: "100%" }, children: _jsx(Outlet, {}) }), _jsx(DasbhoardFooter, { brands: brands, slider: footerSlider })] })] }), children: [generateRoutes(routes), _jsx(Route, { path: "*", element: _jsx(ErrorComponent, {}) })] }) }) }) }) }) }) }) }) }));
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ConfigProvider, { theme: theme || default_theme /* Merger plutôt ?*/, children: _jsx(HelmetProvider, { children: _jsx(AppContext.Provider, { value: context_values, children: _jsx(DatasetRegistryContext.Provider, { value: createDatasetRegistry(), children: _jsx(ControlContext.Provider, { value: CreateControlesRegistry(), children: _jsx(HashRouter, { children: _jsx(Routes, { children: _jsxs(Route, { element: _jsxs(Layout, { hasSider: true, style: { minHeight: '100vh' }, children: [_jsx(DashboardSider, { route_config: routes }), _jsxs(Layout, { children: [_jsx(Content, { style: { width: "100%" }, children: _jsx(Outlet, {}) }), _jsx(DasbhoardFooter, { brands: brands, slider: footerSlider })] })] }), children: [generateRoutes(routes), _jsx(Route, { path: "*", element: _jsx(ErrorComponent, {}) })] }) }) }) }) }) }) }) }) }));
 };
 export default DashboardApp;

package/dist/components/Layout/Footer.js

@@ -1,14 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Layout, Typography } from "antd";
-import { useContext, useState } from "react";
+import { Button, Layout, theme, Typography } from "antd";
+import { useContext, useEffect, useState } from "react";
 import Slider from "@ant-design/react-slick";
 import { UpOutlined, DownOutlined } from "@ant-design/icons";
 import { AppContext } from "./DashboardApp";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
+import { Icon } from "@iconify/react";
 const { Text } = Typography;
+const { useToken } = theme;
 export const DasbhoardFooter = ({ brands, slider = true }) => {
     const [isCollapsed, setIsCollapsed] = useState(window.innerWidth < 768 ? true : false);
+    const [showScrollIndicator, setShowScrollIndicator] = useState(true);
+    const { token } = useToken();
+    /* 🤖 IA Generated effect
+    * Permet d'afficher ou non le scrollIndicator
+    */
+    useEffect(() => {
+        const checkShadow = () => {
+            const scrollTop = window.scrollY;
+            const windowHeight = window.innerHeight;
+            const docHeight = document.documentElement.scrollHeight;
+            setShowScrollIndicator(scrollTop + windowHeight < docHeight - 1);
+        };
+        // scroll listener
+        window.addEventListener("scroll", checkShadow);
+        // observer pour changements dynamiques du contenu
+        const observer = new ResizeObserver(checkShadow);
+        observer.observe(document.body);
+        checkShadow(); // initial
+        return () => {
+            window.removeEventListener("scroll", checkShadow);
+            observer.disconnect();
+        };
+    }, []);
     const toggleCollapse = () => {
         setIsCollapsed(!isCollapsed);
     };
@@ -40,10 +65,23 @@ export const DasbhoardFooter = ({ brands, slider = true }) => {
             height: "auto",
             minHeight: "40px",
             transition: "height 0.5s ease-in-out",
-            overflow: "hidden",
+            overflow: "visible",
             borderTop: "1px solid #ccc",
             zIndex: 600, // maplibre top zIndex if 500
-        }, children: [isCollapsed && (_jsxs(Text, { type: "secondary", children: [app_context?.title, " - ", app_context?.subtitle] })), _jsx("div", { style: { display: isCollapsed ? "none" : "block", padding: "10px 0" }, children: slider
+        }, children: [showScrollIndicator &&
+                /* Shaddow + chevron : show the user that remaing content is avaible downside */
+                _jsx("div", { className: "scroll-indicator", style: {
+                        position: "absolute",
+                        top: -40,
+                        left: 0,
+                        right: 0,
+                        height: 40,
+                        pointerEvents: "none",
+                        display: "flex",
+                        justifyContent: "center",
+                        alignContent: "flex-end",
+                        background: "linear-gradient(to bottom, rgba(255,255,255,0), rgba(0,0,0,0.1))",
+                    }, children: _jsx(Icon, { icon: "fa6-solid:chevron-down", fontSize: 35, color: token.colorPrimary }) }), isCollapsed && (_jsxs(Text, { type: "secondary", children: [app_context?.title, " - ", app_context?.subtitle] })), _jsx("div", { style: { display: isCollapsed ? "none" : "block", padding: "10px 0" }, children: slider
                     // Logos avec défilement (choix par défaut)
                     ? _jsx(Slider
                     // Défilement auto si plus de logos que la lagreur de l'écran ne peut en afficher

package/dist/components/NextPrevSelect/NextPrevSelect.d.ts

@@ -2,16 +2,17 @@ import React from 'react';
 import { CSSProperties } from "react";
 type NextPrevSelectProps = {
     options?: {
-        label: string | number;
-        value: string | number;
-    }[] | string[] | number[];
+        label: string;
+        value: string;
+    }[] | string[];
     style?: CSSProperties;
-    defaultValue?: string | number;
-    value?: string | number;
-    onChange?: (value: string | number) => void;
+    defaultValue?: string;
+    value?: string;
+    onChange?: (value: string) => void;
     reverse?: boolean;
     name?: string;
     arrows?: boolean;
+    label?: string;
 };
 declare const NextPrevSelect: React.FC<NextPrevSelectProps>;
 export default NextPrevSelect;

package/dist/components/NextPrevSelect/NextPrevSelect.js

@@ -1,8 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { CaretLeftOutlined, CaretRightOutlined } from "@ant-design/icons";
-import { Button, ConfigProvider, Flex, Form, Select } from "antd";
-import { useEffect, useState } from "react";
+import { Button, ConfigProvider, Flex, Form, Select, theme, Typography } from "antd";
+import { useEffect } from "react";
 import { list_to_options } from '../Control/Control';
+import { useSearchParamsState } from '../../utils/useSearchParamsState';
+const { Text } = Typography;
 // Update field and trigger form OnValueChange, thanks to : https://github.com/ant-design/ant-design/issues/23782#issuecomment-2114700558
 const updateFieldValue = (form, name, value) => {
     form.getInternalHooks('RC_FORM_INTERNAL_HOOKS').dispatch({
@@ -23,20 +25,22 @@ const style_button_right = {
     borderBottomRightRadius: 4,
     borderLeft: 0,
 };
-const NextPrevSelect = ({ name, options: input_options = [], style, value, defaultValue, onChange, reverse = false, arrows = true, ...rest }) => {
-    const [current_value, setCurrent_value] = useState(value);
+const NextPrevSelect = ({ name = 'sansnom', options: input_options = [], style, value, defaultValue, onChange, reverse = false, arrows = true, label, ...rest }) => {
+    const [current_value, setCurrent_value] = useSearchParamsState(name, String(defaultValue) || '');
+    const { token } = theme.useToken();
     const form = Form.useFormInstance();
+    const labelApplied = label ?? name;
     useEffect(() => {
-        value && handleChange(value);
-    }, [value]);
+        current_value && handleChange(current_value);
+    }, [value, current_value]);
     const options = list_to_options(input_options);
     const current_index = options?.findIndex((o) => o.value == form?.getFieldValue(name) || o.value == current_value);
-    const next = () => reverse
+    const next = () => String(reverse
         ? options[current_index - 1].value
-        : options[current_index + 1].value;
-    const previous = () => reverse
+        : options[current_index + 1].value);
+    const previous = () => String(reverse
         ? options[current_index + 1].value
-        : options[current_index - 1].value;
+        : options[current_index - 1].value);
     const isFirst = () => reverse ? current_index == options.length - 1 : current_index == 0;
     const isLast = () => reverse ? current_index == 0 : current_index == options.length - 1;
     const handleChange = (v) => {
@@ -44,6 +48,6 @@ const NextPrevSelect = ({ name, options: input_options = [], style, value, defau
         name && form && updateFieldValue(form, name, v);
         onChange && onChange(v);
     };
-    return (_jsxs(Flex, { style: style, name: name, children: [arrows && _jsx(Button, { style: style_button_left, onClick: () => handleChange(previous()), disabled: isFirst(), children: _jsx(CaretLeftOutlined, {}) }), _jsxs(ConfigProvider, { theme: arrows ? { components: { Select: { borderRadius: 0, }, }, } : undefined, children: [" ", _jsx(Form.Item, { name: name, label: name, noStyle: arrows, initialValue: defaultValue, shouldUpdate: true, children: _jsx(Select, { className: "nextPrevSelect", options: options, style: { ...style }, value: current_value, defaultValue: defaultValue, onChange: handleChange, ...rest }) })] }), arrows && _jsx(Button, { style: style_button_right, onClick: () => handleChange(next()), disabled: isLast(), children: _jsx(CaretRightOutlined, {}) })] }));
+    return (_jsxs(Flex, { style: style, align: 'center', name: name, children: [" ", arrows && _jsxs(Text, { type: 'secondary', style: { color: token.colorTextLabel }, children: [" ", labelApplied, "\u00A0:\u00A0"] }), arrows && _jsx(Button, { style: style_button_left, onClick: () => handleChange(previous()), disabled: isFirst(), children: _jsx(CaretLeftOutlined, {}) }), _jsxs(ConfigProvider, { theme: arrows ? { components: { Select: { borderRadius: 0, }, }, } : undefined, children: [" ", _jsx(Form.Item, { name: name, label: labelApplied, noStyle: arrows, initialValue: defaultValue, shouldUpdate: true, children: _jsx(Select, { className: "nextPrevSelect", options: options, style: { ...style }, value: current_value, defaultValue: defaultValue, onChange: handleChange, ...rest }) })] }), arrows && _jsx(Button, { style: style_button_right, onClick: () => handleChange(next()), disabled: isLast(), children: _jsx(CaretRightOutlined, {}) })] }));
 };
 export default NextPrevSelect;

package/dist/dsl/index.d.ts

@@ -1,7 +1,7 @@
 import { DSL_DashboardPage as Dashboard } from "../components/DashboardPage/Page";
 import { DSL_Dataset as Dataset } from "../components/Dataset/Dataset";
 import { DSL_DataPreview as DataPreview } from "../components/Dataset/DataPreview";
-import { DSL_Transform as Transform } from "../components/Dataset/Transform";
+import { Transform } from "../components/Dataset/Transform";
 import { DSL_Filter as Filter } from "../components/Dataset/Filter";
 import { Provider } from "../components/Dataset/Provider";
 import { useAllDatasets, useDataset, useDatasets } from "../components/Dataset/hooks";

package/dist/dsl/index.js

@@ -1,7 +1,7 @@
 import { DSL_DashboardPage as Dashboard } from "../components/DashboardPage/Page";
 import { DSL_Dataset as Dataset } from "../components/Dataset/Dataset";
 import { DSL_DataPreview as DataPreview } from "../components/Dataset/DataPreview";
-import { DSL_Transform as Transform } from "../components/Dataset/Transform";
+import { Transform } from "../components/Dataset/Transform";
 import { DSL_Filter as Filter } from "../components/Dataset/Filter";
 import { Provider } from "../components/Dataset/Provider";
 import { useAllDatasets, useDataset, useDatasets } from "../components/Dataset/hooks";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geo2france/api-dashboard",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "private": false,
   "description": "Build dashboards with JSX/TSX",
   "main": "dist/index.js",