@geoinsight/react-components 0.8.11 → 1.0.0

package/dist/cjs/index.js

@@ -13,6 +13,7 @@ var Layers = require('@deck.gl/layers');
 var reactMapGl = require('react-map-gl');
 var maplibregl = require('maplibre-gl');
 var fi = require('react-icons/fi');
+require('mapbox-gl/dist/mapbox-gl.css');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -33,205 +34,147 @@ function _interopNamespaceDefault(e) {
 
 var Layers__namespace = /*#__PURE__*/_interopNamespaceDefault(Layers);
 
-let uniqueId = (function () {
-    let num = 0;
-    return function (prefix) {
-        prefix = String(prefix) || '';
-        num += 1;
-        return prefix + num;
-    };
-}());
-function recursiveChildren(children, i = 0) {
-    return react.Children.map(children, (child, index) => {
-        if (!react.isValidElement(child)) {
-            return child;
-        }
-        if (child.props.children) {
-            return react.cloneElement(child, {
-                ...child.props,
-                children: recursiveChildren(child.props.children, i++),
-                ...(child?.type?.name === "AccordionItem" && {
-                    label: uniqueId("id_") // `${(child?.type as any)?.name}-${index}-${i}`,
-                }),
-            });
-        }
-        else {
-            return child;
-        }
-    });
-}
-function recursiveToggle(children, toggleArray = {}, i = 0, props) {
-    if ((children && typeof children === "string") ||
-        (Array.isArray(children) && typeof children[0] === "string")) {
-        return;
-    }
-    for (const child of children) {
-        if (react.isValidElement(child)) {
-            if (child?.type?.name === "AccordionItem" && child.props.label) {
-                toggleArray[child.props.label] = {
-                    isToggle: props.expanded === "all"
-                        ? true
-                        : props.expanded === "none"
-                            ? false
-                            : props.expanded === "custom"
-                                ? child?.props.isExpanded
-                                : false,
-                    depth: i,
-                    paddingLeft: `${16 * i}px`,
-                };
-            }
-            if (typeof child.props.children !== "string" &&
-                child.props.children.find((v) => v?.type?.name === "AccordionItem")) {
-                recursiveToggle(Array.isArray(child.props.children)
-                    ? child.props.children
-                    : [child.props.children], toggleArray, i + 1, props);
-            }
-        }
-    }
-    return toggleArray;
+const ALLOWED_CHILD_COMPONENT$1 = ["MenuItem"];
+function MenuWrapper({ children }) {
+    const menuItemComponents = react.useMemo(() => {
+        return react.Children.map(children, (child) => {
+            if (!react.isValidElement(child))
+                return;
+            const childComponent = child.type;
+            if (!ALLOWED_CHILD_COMPONENT$1.includes(childComponent.name))
+                return;
+            return react.cloneElement(child);
+        });
+    }, [children]);
+    return jsxRuntime.jsx("div", { className: "menu", children: menuItemComponents });
 }
 
-const AccordionContext = react.createContext(undefined);
-function AccordionProvider({ children, expanded = "all" }) {
-    const newChildren = react.useMemo(() => recursiveChildren(children, 0), []);
-    const [toggle, _setToggle] = react.useState(recursiveToggle(newChildren, {}, 0, { expanded }));
-    const setToggle = (prev) => {
-        _setToggle(prev);
+/** Context */
+const MenuContext = react.createContext({});
+function MenuRoot({ children, isOpenByDefault }) {
+    const [items, setItems] = react.useState({});
+    const addItem = (item) => {
+        setItems((state) => ({
+            ...state,
+            [item.id]: {
+                ...item,
+                isExpanded: isOpenByDefault || false,
+            },
+        }));
     };
-    return (jsxRuntime.jsx(AccordionContext.Provider, { value: { toggle, setToggle }, children: jsxRuntime.jsx("div", { className: "accordion", children: newChildren }) }));
+    const toggle = (id) => {
+        setItems((state) => ({
+            ...state,
+            [id]: {
+                ...items[id],
+                isExpanded: !items[id].isExpanded || false,
+            },
+        }));
+    };
+    return (jsxRuntime.jsx(MenuContext.Provider, { value: { items, addItem, toggle }, children: jsxRuntime.jsx(MenuWrapper, { children: children }) }));
 }
-function useAccordion() {
-    const context = react.useContext(AccordionContext);
-    if (context === undefined) {
-        throw new Error("useTheme must be used within a ThemeProvider");
+function useMenu() {
+    if (MenuContext === undefined) {
+        throw new Error("useMenu must be used within a MenuContext Provider");
     }
-    return context;
+    return MenuContext;
 }
 
-function Accordion({ children, expanded = "all",
-// defaultValue,
-// selectValue,
- }) {
-    // const { dataTheme } = useTheme();
-    return (jsxRuntime.jsx(AccordionProvider, { expanded: expanded, children: children }));
+function MenuButton({ children, nested, subnested, dropdown, isLink, isSelected, handleCallbackClick, ...props }) {
+    const { toggle } = react.useContext(useMenu());
+    const [isToggled, setIsToggled] = react.useState(false);
+    const menuId = react.useMemo(() => props["data-menu-id"], [props]);
+    const handleClick = () => {
+        toggle(menuId);
+        setIsToggled(!isToggled);
+        handleCallbackClick && handleCallbackClick();
+    };
+    return (jsxRuntime.jsxs("div", { role: "button", className: clsx("menu-button", {
+            "menu-button-dropdown": dropdown,
+            "menu-button-nested": nested,
+            "menu-button-subnested": subnested,
+            "menu-button-is-link": isLink,
+            "menu-button-is-selected": isSelected,
+        }), onClick: handleClick, ...props, children: [children, dropdown ? (isToggled ? (jsxRuntime.jsx(tfi.TfiAngleDown, { size: "1rem" })) : (jsxRuntime.jsx(tfi.TfiAngleUp, { size: "1rem" }))) : null] }));
 }
 
-function AccordionItem({ children, className, label, isExpanded = false, }) {
-    const { toggle } = useAccordion();
-    return (jsxRuntime.jsx("div", { className: clsx("accordion-item", className), style: {
-            paddingLeft: toggle && label && toggle[label]?.paddingLeft,
-        }, children: react.Children.map(children, (child) => react.cloneElement(child, {
-            toggle: toggle,
-            // setToggle: setToggle,
-            ...(child?.type?.name !== "AccordionItem" && {
-                label: label,
-            }),
-            isExpanded: isExpanded,
-        })) }));
+function MenuContent({ children, ...props }) {
+    const { items } = react.useContext(useMenu());
+    const menuId = react.useMemo(() => props["data-menu-id"], [props]);
+    const isExpanded = react.useMemo(() => {
+        return items[menuId]?.isExpanded;
+    }, [items, menuId]);
+    if (!isExpanded)
+        return;
+    return jsxRuntime.jsx("div", { ...props, children: children });
 }
 
-const Anchor = ({ Custom, children, ...rest }) => Custom ? jsxRuntime.jsx(Custom, { ...rest, children: children }) : jsxRuntime.jsx("a", { ...rest, children: children });
-function Button({ children = "Click me", className = "", icon = undefined, isNewWindow = false, mode = "primary", size = "medium", as = "button", CustomAnchor, ...rest }) {
-    return as === "link" ? (jsxRuntime.jsxs(Anchor, { Custom: CustomAnchor, ...(isNewWindow && { target: "_blank" }), className: clsx(`button ${className}`, mode === "secondary" ? `button button__${mode}` : "button__link", `button__${size}`), ...rest, children: [children, icon] })) : (jsxRuntime.jsxs("button", { className: clsx("button", `button__${mode}`, `button__${size}`, className), ...rest, children: [children, icon] }));
-}
+const generateId = () => {
+    return `id-${Math.random().toString(36).slice(2, 11)}`;
+};
 
-const ThemeContext = react.createContext(undefined);
-function ThemeProvider({ children, dataTheme: dataThemeProp, dataPalette: dataPaletteProp = "water", }) {
-    const [dataTheme, setDataTheme] = react.useState();
-    const [dataPalette, setDataPalette] = react.useState();
-    react.useEffect(() => {
-        if (dataPaletteProp) {
-            switchDataPalette(dataPaletteProp);
-        }
-    }, [dataPaletteProp]);
-    react.useEffect(() => {
-        if (dataThemeProp) {
-            switchDataTheme(dataThemeProp);
-        }
-    }, [dataThemeProp]);
+const ALLOWED_CHILD_COMPONENT = ["MenuButton", "MenuContent"];
+function MenuItem({ children, ...props }) {
+    const { addItem } = react.useContext(useMenu());
+    const menuId = react.useRef("");
     react.useEffect(() => {
-        if (window.matchMedia) {
-            if (localStorage.getItem("data-theme")) {
-                document.documentElement.setAttribute("data-theme", localStorage.getItem("data-theme"));
-                setDataTheme(localStorage.getItem("data-theme"));
-            }
-            else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-                document.documentElement.setAttribute("data-theme", "dark");
-                setDataTheme("dark");
-            }
-        }
+        menuId.current = generateId();
+        addItem({
+            id: menuId.current,
+            isExpanded: true,
+        });
     }, []);
-    const switchDataTheme = (mode) => {
-        document.documentElement.setAttribute("data-theme", mode);
-        setDataTheme(mode);
-        localStorage.setItem("data-theme", mode);
-    };
-    const switchDataPalette = (mode) => {
-        document.documentElement.setAttribute("data-palette", mode);
-        setDataPalette(mode);
-        localStorage.setItem("palette-theme", mode);
-    };
-    return (jsxRuntime.jsx(ThemeContext.Provider, { value: { dataTheme, switchDataTheme, dataPalette, switchDataPalette }, children: children }));
-}
-function useTheme() {
-    const context = react.useContext(ThemeContext);
-    if (context === undefined) {
-        throw new Error("useTheme must be used within a ThemeProvider");
-    }
-    return context;
+    return (jsxRuntime.jsx("div", { "data-menu-id": menuId.current, ...props, children: react.Children.map(children, (child) => {
+            if (!react.isValidElement(child))
+                return;
+            const childComponent = child.type;
+            if (!ALLOWED_CHILD_COMPONENT.includes(childComponent.name))
+                return;
+            return react.cloneElement(child, {
+                "data-menu-id": menuId.current,
+            });
+        }) }));
 }
 
-function AccordionButton({ children, className, is = "link", label, 
-// toggle,
-// setToggle = (prev: any) => void,
-...rest }) {
-    const { dataTheme } = useTheme();
-    const { toggle, setToggle } = useAccordion();
-    const handleToggle = () => {
-        setToggle((prev) => {
-            if (label) {
-                return {
-                    ...prev,
-                    [label]: {
-                        ...(prev && label && prev[label]),
-                        isToggle: prev && !prev[label].isToggle,
-                    },
-                };
-            }
-            else {
-                return prev;
-            }
-        });
-    };
-    return (jsxRuntime.jsx(Button, { as: is, className: clsx("accordion-button", `accordion-button__${is}`, `accordion-button__${is}--${dataTheme}`, className), ...(is !== "link" && {
-            icon: label && toggle && toggle[label].isToggle ? (jsxRuntime.jsx(tfi.TfiAngleDown, {})) : (jsxRuntime.jsx(tfi.TfiAngleUp, {})),
-        }), ...(is !== "link" && { onClick: handleToggle }), ...rest, children: children }));
-}
+const Menu = {
+    Root: MenuRoot,
+    Item: MenuItem,
+    Button: MenuButton,
+    Content: MenuContent,
+};
+
+var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    default: Menu
+});
 
-const AccordionContent = function AccordionContent({ children, className, label, toggle, }) {
-    return (label &&
-        toggle &&
-        toggle[label].isToggle && (jsxRuntime.jsx("div", { className: clsx("accordion-content", className), children: children })));
+const Anchor = ({ Custom, children, ...rest }) => {
+    return Custom ? (jsxRuntime.jsx(Custom, { ...rest, children: children })) : (jsxRuntime.jsx("a", { ...rest, children: children }));
 };
+function Button({ children = "Click me", className = "", icon = undefined, isNewWindow = false, mode = "primary", size = "medium", as = "button", CustomAnchor, ...rest }) {
+    return as === "link" ? (jsxRuntime.jsxs(Anchor, { Custom: CustomAnchor, ...(isNewWindow && { target: "_blank" }), className: clsx(`button ${className}`, mode === "secondary" ? `button button__${mode}` : "button__link", `button__${size}`), ...rest, children: [children, icon] })) : (jsxRuntime.jsxs("button", { className: clsx("button", `button__${mode}`, `button__${size}`, className), ...rest, children: [children, icon] }));
+}
 
 // how do I solve reseting the form outside the form
 function Form({ children, onSubmit, submitButton = {
     label: "Submit",
-}, initialState, ...rest }) {
+}, initialState, backgroundColor, ...rest }) {
     const methods = reactHookForm.useForm(initialState);
     const { formState: { isValid }, } = methods;
     const [result, setResult] = react.useState({
         message: "",
         isSuccess: false,
     });
-    return (jsxRuntime.jsx(reactHookForm.FormProvider, { ...methods, children: jsxRuntime.jsxs("form", { className: "form", onSubmit: methods.handleSubmit((data) => onSubmit(data, methods, setResult)), ...rest, children: [children, result.message && (jsxRuntime.jsxs("div", { className: "form__message", children: [result.isSuccess ? (jsxRuntime.jsx(bs.BsCheckCircleFill, { color: "var(--color-success)", size: 48 })) : (jsxRuntime.jsx(bs.BsXCircleFill, { color: "var(--color-danger)", size: 48 })), result.message] })), jsxRuntime.jsx(Button, { type: "submit", disabled: !isValid, children: submitButton.label })] }) }));
+    return (jsxRuntime.jsx(reactHookForm.FormProvider, { ...methods, children: jsxRuntime.jsxs("form", { className: "form", style: { backgroundColor: backgroundColor }, onSubmit: methods.handleSubmit((data) => {
+                return onSubmit(data, methods, setResult);
+            }), ...rest, children: [children, result.message && (jsxRuntime.jsxs("div", { className: "form__message", children: [result.isSuccess ? (jsxRuntime.jsx(bs.BsCheckCircleFill, { color: "var(--color-success)", size: 48 })) : (jsxRuntime.jsx(bs.BsXCircleFill, { color: "var(--color-danger)", size: 48 })), result.message] })), jsxRuntime.jsx(Button, { type: "submit", disabled: !isValid, children: submitButton.label })] }) }));
 }
 
 function Input({ inputClassName = "", classNameGroup = "", error = {
     is: false,
     message: "",
-}, inputRef, styleGroup, placeholder = "Insert value", label, labelClass, icon, ...rest }) {
-    return (jsxRuntime.jsxs("div", { className: clsx("input-group", classNameGroup), style: styleGroup, children: [jsxRuntime.jsxs("div", { className: "input__header", children: [label && jsxRuntime.jsx("label", { className: labelClass, children: label }), error && error.is && (jsxRuntime.jsx("span", { className: "input__header--error", children: error.message }))] }), jsxRuntime.jsxs("div", { className: "input-subgroup", children: [icon?.element && icon.position === "left" && (jsxRuntime.jsx("div", { className: clsx("input__icon", "input__icon--left", icon.className), children: icon.element })), jsxRuntime.jsx("input", { ref: inputRef, className: clsx("input", error.is ? "input--error" : "", icon?.position === "left" && "input--icon", inputClassName), placeholder: placeholder, ...rest }), icon?.element && icon.position !== "left" && (jsxRuntime.jsx("div", { className: clsx("input__icon", "input__icon--right", 
+}, inputRef, styleGroup, placeholder = "Insert value", label, labelClassName, icon, isRequired, backgroundColor, ...rest }) {
+    return (jsxRuntime.jsxs("div", { className: clsx("input-group", classNameGroup), style: { backgroundColor: backgroundColor, ...styleGroup }, children: [jsxRuntime.jsxs("div", { className: "input__header", children: [label && jsxRuntime.jsx("label", { className: labelClassName, children: label }), error && error.is && (jsxRuntime.jsx("span", { className: "input__header--error", children: error.message }))] }), jsxRuntime.jsxs("div", { className: "input-subgroup", children: [icon?.element && icon.position === "left" && (jsxRuntime.jsx("div", { className: clsx("input__icon", "input__icon--left", icon.className), children: icon.element })), jsxRuntime.jsx("input", { ref: inputRef, required: isRequired, className: clsx("input", error.is ? "input--error" : "", icon?.position === "left" && "input--icon", inputClassName), placeholder: placeholder, ...rest }), icon?.element && icon.position !== "left" && (jsxRuntime.jsx("div", { className: clsx("input__icon", "input__icon--right", 
                         // `input__icon--${icon.position || "right"}`,
                         icon.className), children: icon.element }))] })] }));
 }
@@ -255,7 +198,7 @@ function FormInput({ name, isRequired, error, defaultValue, ...rest }) {
 function TextArea({ buttonDisabled = false, className = "", disabled = true, error = {
     is: false,
     message: "",
-}, hasToggleButton = true, hideHeight = "5rem", label, labelClass, placeholder = "Insert value", showHeight = "10rem", style = {}, textareaClassName = "", ...rest }) {
+}, hasToggleButton = true, hideHeight = "5rem", label, labelClassName, isRequired, placeholder = "Insert value", showHeight = "10rem", backgroundColor, style = {}, textareaClassName = "", ...rest }) {
     const ref = react.useRef();
     const [isShow, setIsShow] = react.useState(false);
     const handleClickToggle = () => {
@@ -269,9 +212,9 @@ function TextArea({ buttonDisabled = false, className = "", disabled = true, err
             setIsShow((prev) => !prev);
         }
     };
-    return (jsxRuntime.jsxs("div", { className: clsx("textarea", className), style: style, children: [jsxRuntime.jsxs("div", { className: "textarea__header", children: [label && jsxRuntime.jsx("label", { className: labelClass, children: label }), error && error.is && (jsxRuntime.jsx("span", { className: "textarea__header--error", children: error.message }))] }), jsxRuntime.jsx("textarea", { ref: ref, className: clsx("textarea__input", error.is && "textarea__input--error", textareaClassName), style: {
+    return (jsxRuntime.jsxs("div", { className: clsx("textarea", className), style: { backgroundColor: backgroundColor, ...style }, children: [jsxRuntime.jsxs("div", { className: "textarea__header", children: [label && jsxRuntime.jsx("label", { className: labelClassName, children: label }), error && error.is && (jsxRuntime.jsx("span", { className: "textarea__header--error", children: error.message }))] }), jsxRuntime.jsx("textarea", { ref: ref, className: clsx("textarea__input", error.is && "textarea__input--error", textareaClassName), style: {
                     height: hasToggleButton ? hideHeight : showHeight,
-                }, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsxRuntime.jsx("button", { type: "button", className: clsx("textarea__button", isShow && "textarea__button--show", error.is && "textarea__button--error"), onClick: handleClickToggle, disabled: buttonDisabled, children: jsxRuntime.jsx(tb.TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
+                }, placeholder: placeholder, disabled: disabled, required: isRequired, ...rest }), hasToggleButton && (jsxRuntime.jsx(Button, { type: "button", className: clsx("textarea__button", isShow && "textarea__button--show", error.is && "textarea__button--error"), onClick: handleClickToggle, disabled: buttonDisabled, children: jsxRuntime.jsx(tb.TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
 }
 
 function FormTextArea({ name, isRequired, error, ...rest }) {
@@ -290,9 +233,7 @@ function FormTextArea({ name, isRequired, error, ...rest }) {
         } }));
 }
 
-function Select({ inputClassName = "", classNameGroup = "", options, styleGroup, defaultValue, 
-// inputProps,
-setFormSelected, clearError, resetForm, onFormBlur, handleSelect, ...rest }) {
+function Select({ inputClassName = "", classNameGroup = "", options, styleGroup, defaultValue, setFormSelected, clearError, resetForm, onFormBlur, handleSelect, label, labelClassName, error, backgroundColor, isRequired, ...rest }) {
     const [isOpen, setIsOpen] = react.useState(false);
     const [value, setValue] = react.useState(defaultValue || (options && options[0]));
     const [filteredOptions, setFilteredOptions] = react.useState(options);
@@ -315,9 +256,6 @@ setFormSelected, clearError, resetForm, onFormBlur, handleSelect, ...rest }) {
     const handleValueChange = (e) => {
         const { value } = e.target;
         setValue(value);
-        // for autocomplete
-        // const { value } = e.target;
-        // setValue(value);
     };
     const handleSelectChange = (e) => {
         const { name: value } = e.target;
@@ -338,25 +276,17 @@ setFormSelected, clearError, resetForm, onFormBlur, handleSelect, ...rest }) {
         }
         handleClose();
     };
-    // for autocomplete
-    // useEffect(() => {
-    //   if (value) {
-    //       console.log(filteredOptions);
-    //       setFilteredOptions((prev: string[]) => {
-    //       return options
-    //         .filter((option: string) => option.includes(value))
-    //     });
-    //   } else {
-    //     setFilteredOptions(options)
-    //   }
-    // }, [value]);
-    return (jsxRuntime.jsxs("div", { className: clsx("select-group", classNameGroup), style: styleGroup, children: [jsxRuntime.jsx(Input, { inputClassName: clsx("select", inputClassName), value: value, placeholder: "Select a value", icon: {
+    return (jsxRuntime.jsxs("div", { className: clsx("select-group", classNameGroup), style: { backgroundColor: backgroundColor, ...styleGroup }, children: [jsxRuntime.jsx(Input, { inputClassName: clsx("select", {
+                    "select--focus": isOpen,
+                }, inputClassName), value: value, error: error, required: isRequired, placeholder: "Select a value", icon: {
                     className: "select__arrow",
-                    element: (jsxRuntime.jsx(Button, { type: "button", mode: "icon", className: "select__arrow-button", onClick: handleToggle, onBlur: handleClose, children: jsxRuntime.jsx(tfi.TfiAngleDown, { size: 24, color: "var(--color-black)" }) })),
-                }, onFocus: handleOpen, onBlur: handleInputClose, onChange: handleValueChange, autoComplete: "off", ...rest }), isOpen && (jsxRuntime.jsx("div", { className: "select__box", children: filteredOptions.map((option, index) => (jsxRuntime.jsx(Button, { type: "button", mode: "secondary", className: "select__option", name: option, onMouseDown: handleSelectChange, children: option }, `index-${index}`))) }))] }));
+                    element: (jsxRuntime.jsx(Button, { type: "button", size: "large", mode: "icon", className: clsx("select__arrow-button", {
+                            "select__arrow-button--open": isOpen
+                        }), onClick: handleToggle, onBlur: handleClose, children: jsxRuntime.jsx(tfi.TfiAngleDown, { size: 24 }) })),
+                }, onFocus: handleOpen, onBlur: handleInputClose, onChange: handleValueChange, autoComplete: "off", label: label, labelClassName: labelClassName, ...rest }), isOpen && (jsxRuntime.jsx("div", { className: "select__box", children: filteredOptions.map((option, index) => (jsxRuntime.jsx(Button, { type: "button", mode: "secondary", className: "select__option", name: option, onMouseDown: handleSelectChange, children: option }, `index-${index}`))) }))] }));
 }
 
-function FormSelect({ name, isRequired, error, fieldsToReset, ...rest }) {
+function FormSelect({ name, isRequired, error, fieldsToReset, label, ...rest }) {
     const { control, setValue, clearErrors, unregister, resetField } = reactHookForm.useFormContext();
     return (jsxRuntime.jsx(reactHookForm.Controller, { name: name, control: control, rules: {
             ...(isRequired
@@ -365,29 +295,110 @@ function FormSelect({ name, isRequired, error, fieldsToReset, ...rest }) {
                 }
                 : {}),
         }, render: ({ field: { onBlur, ...restField }, fieldState: { error } }) => {
-            return (jsxRuntime.jsx(Select, { isRequired: true, error: {
+            return (jsxRuntime.jsx(Select, { isRequired: true, label: label, error: {
                     is: !!error,
-                    message: error?.message,
-                }, setFormSelected: setValue, resetForm: () => fieldsToReset && fieldsToReset.map((field) => {
-                    setValue(field, undefined);
-                    unregister(field);
-                }), clearError: clearErrors, onFormBlur: onBlur, ...restField, ...rest }));
+                    message: error?.message || "",
+                }, setFormSelected: setValue, resetForm: () => fieldsToReset &&
+                    fieldsToReset.map((field) => {
+                        setValue(field, undefined);
+                        unregister(field);
+                    }), clearError: clearErrors, onFormBlur: onBlur, ...restField, ...rest }));
         } }));
 }
 
-function Loading({ img, children }) {
-    return (jsxRuntime.jsxs("div", { className: "loading", children: [jsxRuntime.jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
+var img = "data:image/gif;base64,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";
+
+function Loading({ img: img$1, children }) {
+    return (jsxRuntime.jsxs("div", { className: "loading", children: [jsxRuntime.jsx("img", { src: img$1 ?? img }), jsxRuntime.jsx("div", { className: "loading-message", children: children })] }));
 }
 
 function Modal({ className, modalref, children, title, subtitle, footer, hasOverlay = true, hasCloseButton = true, handleClose, ...rest }) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasOverlay && jsxRuntime.jsx("div", { className: "modal-overlay" }), jsxRuntime.jsxs("div", { ref: modalref, className: clsx("modal", className), ...rest, children: [hasCloseButton && (jsxRuntime.jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsxRuntime.jsx(io5.IoClose, {}) })), jsxRuntime.jsxs("div", { className: "modal__content", children: [title && (jsxRuntime.jsxs("div", { className: "modal__header", children: [jsxRuntime.jsx("h3", { children: title }), jsxRuntime.jsx("h6", { children: subtitle })] })), jsxRuntime.jsx("div", { className: "modal__children", children: children }), footer && jsxRuntime.jsx("div", { className: "modal__footer", children: footer })] })] })] }));
 }
 
-function MapControl({ children, position = "top-right" }) {
-    return (jsxRuntime.jsx("div", { className: `control control--${position}`, children: children }));
+const ThemeContext = react.createContext(undefined);
+function ThemeProvider({ children, dataTheme: dataThemeProp, dataPalette: dataPaletteProp = "water", }) {
+    const [dataTheme, setDataTheme] = react.useState();
+    const [dataPalette, setDataPalette] = react.useState();
+    react.useEffect(() => {
+        if (dataPaletteProp) {
+            switchDataPalette(dataPaletteProp);
+        }
+    }, [dataPaletteProp]);
+    react.useEffect(() => {
+        if (dataThemeProp) {
+            switchDataTheme(dataThemeProp);
+        }
+    }, [dataThemeProp]);
+    react.useEffect(() => {
+        if (window.matchMedia) {
+            if (localStorage.getItem("data-theme")) {
+                document.documentElement.setAttribute("data-theme", localStorage.getItem("data-theme"));
+                setDataTheme(localStorage.getItem("data-theme"));
+            }
+            else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+                document.documentElement.setAttribute("data-theme", "dark");
+                setDataTheme("dark");
+            }
+        }
+    }, []);
+    const switchDataTheme = (mode) => {
+        document.documentElement.setAttribute("data-theme", mode);
+        setDataTheme(mode);
+        localStorage.setItem("data-theme", mode);
+    };
+    const switchDataPalette = (mode) => {
+        document.documentElement.setAttribute("data-palette", mode);
+        setDataPalette(mode);
+        localStorage.setItem("palette-theme", mode);
+    };
+    return (jsxRuntime.jsx(ThemeContext.Provider, { value: { dataTheme, switchDataTheme, dataPalette, switchDataPalette }, children: children }));
 }
+function useTheme() {
+    const context = react.useContext(ThemeContext);
+    if (context === undefined) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+    return context;
+}
+
+function MapControl({ children, position = "top-right", ...rest }) {
+    return (jsxRuntime.jsx("div", { className: `control control--${position}`, ...rest, children: children }));
+}
+
+function MapToc({ items, selected, setSelected }) {
+    return (jsxRuntime.jsx(Menu.Root, { children: Object.entries(items).map(([parentId, parent], index) => (jsxRuntime.jsxs(Menu.Item, { children: [jsxRuntime.jsx(Menu.Button, { dropdown: true, children: parent.title }), jsxRuntime.jsx(Menu.Content, { children: Object.entries(parent.children).map(([childId, child], index) => (jsxRuntime.jsx(Menu.Item, { children: jsxRuntime.jsx(Menu.Button, { isSelected: childId === selected.id, nested: true, handleCallbackClick: () => setSelected({ id: childId, ...child }), children: child.label }) }))) })] }, `first-level-${index}`))) }));
+}
+
+/** Context */
+const MapContext = react.createContext(undefined);
+function MapProvider({ children }) {
+    const [currentLayer, setCurrentLayer] = react.useState(undefined);
+    return (jsxRuntime.jsx(MapContext.Provider, { value: { state: { currentLayer }, setCurrentLayer }, children: children }));
+}
+function useMap({ defaultLayer }) {
+    const context = react.useContext(MapContext);
+    react.useEffect(() => {
+        if (context) {
+            context.setCurrentLayer(defaultLayer);
+        }
+    }, []);
+    if (context === undefined) {
+        throw new Error("useMap must be used within a MapProvider");
+    }
+    return context;
+}
+
+const DefaultPopup = ({ popup }) => {
+    const { isDefault, data, render } = popup.model;
+    return isDefault || true ? (jsxRuntime.jsxs("div", { className: "map__popup-content", children: [jsxRuntime.jsx("div", { className: "map__popup-list", children: data.fields.map((field) => (jsxRuntime.jsxs("h5", { children: [field, ":"] }))) }), jsxRuntime.jsx("div", { className: "map__popup-list", children: data.values.map((value) => (jsxRuntime.jsx("span", { children: typeof value === "string"
+                        ? new Function("v", `return (${value})(${JSON.stringify(popup.info)})`)()
+                        : value(popup.info) }))) })] })) : (render);
+};
+const MapPopup = ({ popup, framework = "deck.gl", setPopupData, longitude, latitude, }) => {
+    return framework === "deck.gl" ? (jsxRuntime.jsx("div", { className: "map__popup", style: { left: longitude, top: latitude }, children: jsxRuntime.jsx(DefaultPopup, { popup: popup }) })) : (jsxRuntime.jsx(reactMapGl.Popup, { anchor: "top", longitude: Number(longitude), latitude: Number(latitude), onClose: () => setPopupData && setPopupData(undefined), children: jsxRuntime.jsx(DefaultPopup, { popup: popup }) }));
+};
 
-// import MapboxMap from "./MapboxMap";
 const INITIAL_VIEW_STATE = {
     longitude: -122.41669,
     latitude: 37.7853,
@@ -395,21 +406,97 @@ const INITIAL_VIEW_STATE = {
     pitch: 0,
     bearing: 0,
 };
-function MapComponent({ basemap, initialViewState, framework, mapProps, hasSwitchBasemap = true, layers, controls = {}, basemapToken, ...rest }) {
-    const _layers = layers && layers.map(({ type, layer }) => new Layers__namespace[type](layer));
+function MapDeckgl({ attribution, basemap, basemapToken, initialViewState, hasSwitchBasemap = true, layers, mapProps, renderControls = {}, toc, }) {
+    // @ts-ignore
+    const { onClick, ...restMapProps } = mapProps;
     const theme = useTheme();
-    const { "bottom-right": bottomRight, "bottom-left": bottomLeft, ..._controls } = controls;
-    react.useState(INITIAL_VIEW_STATE);
+    const [lngLat, setLngLat] = react.useState();
+    const [popupData, setPopupData] = react.useState();
+    const _layers = layers &&
+        react.useMemo(() => layers.map(({ type, layer }) => new Layers__namespace[type](layer)), []);
+    const { "bottom-left": bottomLeft, "center-left": centerLeft, ..._controls } = renderControls;
+    const mapContext = toc &&
+        useMap({
+            defaultLayer: {
+                id: toc.defaultIds[1],
+                ...toc?.parents[toc.defaultIds[0]].children[toc.defaultIds[1]],
+            },
+        });
     const handleToggle = () => {
         theme.switchDataTheme(theme.dataTheme === "dark" ? "light" : "dark");
     };
-    return framework === "deck.gl" ? (jsxRuntime.jsx("div", { className: "map", children: jsxRuntime.jsxs(DeckGL, { initialViewState: initialViewState || INITIAL_VIEW_STATE, controller: true, layers: _layers, ...rest, children: [jsxRuntime.jsx(reactMapGl.Map, { attributionControl: false, mapLib: maplibregl, mapStyle: basemap || theme.dataTheme === "dark"
-                        ? `https://api.maptiler.com/maps/darkmatter/style.json?key=${basemapToken || process.env.STORYBOOK_OPEN_TILES_TOKEN}`
-                        : `https://api.maptiler.com/maps/positron/style.json?key=${basemapToken || process.env.STORYBOOK_OPEN_TILES_TOKEN}` }), Object.keys(_controls).map((key) => {
+    const handeSelectedLayer = (layer) => {
+        mapContext.setCurrentLayer(layer);
+    };
+    const handleClick = (event) => {
+        if (event.object) {
+            if (event.layer?.props?.popup) {
+                setPopupData({ model: event.layer?.props.popup, info: event.object });
+            }
+            setLngLat([event.pixel[0], event.pixel[1]]);
+        }
+        else {
+            setLngLat(undefined);
+        }
+        if (onClick) {
+            onClick(event);
+        }
+    };
+    return (jsxRuntime.jsxs("div", { className: "map", children: [jsxRuntime.jsxs(DeckGL, { initialViewState: initialViewState || INITIAL_VIEW_STATE, controller: true, layers: _layers, onClick: handleClick, ...restMapProps, children: [jsxRuntime.jsx(reactMapGl.Map, { attributionControl: false, mapLib: maplibregl, mapStyle: basemap || theme.dataTheme === "dark"
+                            ? `https://api.maptiler.com/maps/darkmatter/style.json?key=${basemapToken || process.env.STORYBOOK_OPEN_TILES_TOKEN}`
+                            : `https://api.maptiler.com/maps/positron/style.json?key=${basemapToken || process.env.STORYBOOK_OPEN_TILES_TOKEN}` }), Object.keys(_controls).map((key) => {
+                        // @ts-ignore
+                        return jsxRuntime.jsx(MapControl, { position: key, children: _controls[key] });
+                    }), jsxRuntime.jsxs(MapControl, { position: "center-left", children: [centerLeft, mapContext?.state.currentLayer && (jsxRuntime.jsx(MapToc, { items: toc.parents, selected: mapContext.state.currentLayer, setSelected: handeSelectedLayer }))] }), jsxRuntime.jsx(MapControl, { position: "bottom-left", children: hasSwitchBasemap ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [bottomLeft, jsxRuntime.jsx(Button, { mode: "icon", size: "small", onClick: handleToggle, children: theme.dataTheme === "dark" ? (jsxRuntime.jsx(fi.FiSun, { size: "1.25rem" })) : (jsxRuntime.jsx(fi.FiMoon, { size: "1.25rem", color: "var(--color-black)" })) })] })) : (bottomLeft) }), jsxRuntime.jsx("div", { className: "map__attribution", children: attribution || (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button, { as: "link", href: "https://www.maptiler.com/copyright/", target: "_blank", children: "\u00A9 MapTiler" }), jsxRuntime.jsx(Button, { as: "link", href: "https://www.openstreetmap.org/copyright", target: "_blank", children: "\u00A9 OpenStreetMap contributors" })] })) })] }), popupData && lngLat && (jsxRuntime.jsx(MapPopup, { longitude: lngLat[0], latitude: lngLat[1], 
+                // framework="deck.gl"
+                popup: popupData }))] }));
+}
+
+function MapMapbox({ basemap, mapProps, hasSwitchBasemap, hasSwitchProjection, renderControls, sources, toc, }) {
+    // @ts-ignore
+    const { onClick, ...restMapProps } = mapProps;
+    const { dataTheme, switchDataTheme } = useTheme();
+    const [projection, setProjection] = react.useState("globe");
+    const { "bottom-left": bottomLeft, "center-left": centerLeft, ..._controls } = renderControls;
+    const [popupData, setPopupData] = react.useState();
+    const [lngLat, setLngLat] = react.useState();
+    const mapContext = toc &&
+        useMap({
+            defaultLayer: {
+                id: toc.defaultIds[1],
+                ...toc?.parents[toc.defaultIds[0]].children[toc.defaultIds[1]],
+            },
+        });
+    const handeSelectedLayer = (layer) => {
+        mapContext.setCurrentLayer(layer);
+    };
+    const handleClick = (event) => {
+        const { features, point: { x, y }, lngLat: { lng, lat }, } = event;
+        const hoveredFeature = features && features[0];
+        if (hoveredFeature) {
+            setPopupData({
+                model: hoveredFeature.layer.metadata["mapbox:popup"],
+                info: hoveredFeature,
+            });
+            setLngLat([lng, lat]);
+        }
+        if (onClick) {
+            onClick(event);
+        }
+    };
+    return mapProps?.mapboxAccessToken ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(reactMapGl.Map, { mapboxAccessToken: mapProps.mapboxAccessToken, projection: projection, mapStyle: basemap ||
+                `mapbox://styles/mapbox/${dataTheme === "dark" ? "light" : "dark"}-v11`, ...((mapProps.interactiveLayerIds && { onClick: handleClick }) ||
+                (onClick && { onClick })), ...restMapProps, children: [sources &&
+                    sources.map(({ id, layers, ...restSource }) => (
+                    // @ts-ignore
+                    jsxRuntime.jsx(reactMapGl.Source, { id: id, ...restSource, children: layers && layers.map((layer) => jsxRuntime.jsx(reactMapGl.Layer, { ...layer })) }))), Object.keys(_controls).map((key) => {
+                    // @ts-ignore
                     return jsxRuntime.jsx(MapControl, { position: key, children: _controls[key] });
-                }), jsxRuntime.jsx(MapControl, { position: "bottom-left", children: hasSwitchBasemap ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [bottomLeft, jsxRuntime.jsx(Button, { mode: "icon", size: "small", onClick: handleToggle, children: theme.dataTheme === "dark" ? (jsxRuntime.jsx(fi.FiSun, { size: "1.25rem" })) : (jsxRuntime.jsx(fi.FiMoon, { size: "1.25rem", color: "var(--color-black)" })) })] })) : (bottomLeft) }), jsxRuntime.jsxs(MapControl, { position: "bottom-right", children: [bottomRight, jsxRuntime.jsxs("div", { className: "map__attribution", children: [jsxRuntime.jsx(Button, { as: "link", href: "https://www.maptiler.com/copyright/", target: "_blank", children: "\u00A9 MapTiler" }), jsxRuntime.jsx(Button, { as: "link", href: "https://www.openstreetmap.org/copyright", target: "_blank", children: "\u00A9 OpenStreetMap contributors" })] })] })] }) })) : framework === "mapboxgl" ? (jsxRuntime.jsx("div", { children: "Coming soon..." })) : (
-    // <MapboxMap />
-    jsxRuntime.jsx("div", { children: "The component needs a framework" }));
+                }), jsxRuntime.jsxs(MapControl, { position: "center-left", children: [centerLeft, mapContext?.state.currentLayer && (jsxRuntime.jsx(MapToc, { items: toc.parents, selected: mapContext.state.currentLayer, setSelected: handeSelectedLayer }))] }), jsxRuntime.jsxs(MapControl, { position: "bottom-left", children: [bottomLeft, hasSwitchBasemap && (jsxRuntime.jsx(Button, { className: "map__button", mode: "icon", onClick: () => switchDataTheme(dataTheme === "dark" ? "light" : "dark"), children: dataTheme === "dark" ? jsxRuntime.jsx(bs.BsFillMoonFill, {}) : jsxRuntime.jsx(bs.BsFillSunFill, {}) })), hasSwitchProjection && (jsxRuntime.jsx(Button, { className: "map__button", mode: "icon", onClick: () => setProjection((prev) => prev === "globe" ? "mercator" : "globe"), children: projection === "globe" ? "2D" : "3D" }))] }), popupData && lngLat && (jsxRuntime.jsx(MapPopup, { longitude: lngLat[0], latitude: lngLat[1], framework: "mapboxgl", setPopupData: setPopupData, popup: popupData }))] }) })) : (jsxRuntime.jsx(Modal, { hasCloseButton: false, children: jsxRuntime.jsx("p", { className: "map__mapbox-error", children: "You need to add the mapbox token to the prop mapboxAccessToken." }) }));
+}
+
+function MapComponent({ attribution, basemap, basemapToken, framework = "deck.gl", mapProps, hasSwitchBasemap = true, hasSwitchProjection = true, layers, renderControls = {}, sources, toc, }) {
+    return framework === "deck.gl" ? (jsxRuntime.jsx(MapDeckgl, { attribution: attribution, basemap: basemap, basemapToken: basemapToken, hasSwitchBasemap: hasSwitchBasemap, layers: layers, mapProps: mapProps, renderControls: renderControls, toc: toc })) : framework === "mapboxgl" ? (jsxRuntime.jsx(MapMapbox, { basemap: basemap, hasSwitchBasemap: hasSwitchBasemap, hasSwitchProjection: hasSwitchProjection, mapProps: mapProps, renderControls: renderControls, sources: sources, toc: toc })) : (jsxRuntime.jsx("div", { children: "The component needs a framework" }));
 }
 
 const LoadingContext = react.createContext(undefined);
@@ -533,7 +620,7 @@ function ModalProvider({ children }) {
             state,
             openModal,
             closeModal,
-        }, children: [children, state.isModal && !state.isCustom && (jsxRuntime.jsx(Modal, { modalref: ref, title: state.title, footer: state.footer, handleClose: closeModal, subtitle: state.subtitle, hasCloseButton: state.hasCloseButton, hasOverlay: state.hasOverlay, ...state, children: state.content }))] }));
+        }, children: [children, state.isModal && !state.isCustom && (jsxRuntime.jsx(Modal, { modalref: ref, title: state.title, footer: state.footer, handleClose: closeModal, subtitle: state.subtitle, hasCloseButton: state.hasCloseButton, hasOverlay: state.hasOverlay, children: state.content }))] }));
 }
 function useModal({} = {}) {
     const context = react.useContext(ModalContext);
@@ -543,12 +630,6 @@ function useModal({} = {}) {
     return context;
 }
 
-exports.Accordion = Accordion;
-exports.AccordionButton = AccordionButton;
-exports.AccordionContent = AccordionContent;
-exports.AccordionContext = AccordionContext;
-exports.AccordionItem = AccordionItem;
-exports.AccordionProvider = AccordionProvider;
 exports.Button = Button;
 exports.Form = Form;
 exports.FormInput = FormInput;
@@ -560,6 +641,8 @@ exports.LoadingContext = LoadingContext;
 exports.LoadingProvider = LoadingProvider;
 exports.MapComponent = MapComponent;
 exports.MapControl = MapControl;
+exports.MapProvider = MapProvider;
+exports.Menu = index;
 exports.Modal = Modal;
 exports.ModalContext = ModalContext;
 exports.ModalProvider = ModalProvider;
@@ -567,8 +650,8 @@ exports.Select = Select;
 exports.TextArea = TextArea;
 exports.ThemeContext = ThemeContext;
 exports.ThemeProvider = ThemeProvider;
-exports.useAccordion = useAccordion;
 exports.useLoading = useLoading;
+exports.useMap = useMap;
 exports.useModal = useModal;
 exports.useTheme = useTheme;
 //# sourceMappingURL=index.js.map