@geoinsight/react-components 0.4.2 → 0.4.4

package/dist/cjs/index.js

@@ -16,8 +16,8 @@ function recursiveChildren(children, i = 0) {
             return react.cloneElement(child, {
                 ...child.props,
                 children: recursiveChildren(child.props.children, i++),
-                ...(child?.type?.displayName === "AccordionItem" && {
-                    label: `${child?.type?.displayName}-${index}-${i}`,
+                ...(child?.type?.name === "AccordionItem" && {
+                    label: `${child?.type?.name}-${index}-${i}`,
                 }),
             });
         }
@@ -30,7 +30,7 @@ function recursiveToggle(children, toggleArray = {}, i = 0, props) {
     }
     for (const child of children) {
         if (react.isValidElement(child)) {
-            if (child?.type?.displayName === "AccordionItem" && child.props.label) {
+            if (child?.type?.name === "AccordionItem" && child.props.label) {
                 toggleArray[child.props.label] = {
                     isToggle: props.expanded === "all"
                         ? true
@@ -44,7 +44,7 @@ function recursiveToggle(children, toggleArray = {}, i = 0, props) {
                 };
             }
             if (typeof child.props.children !== "string" &&
-                child.props.children.find((v) => v?.type?.displayName === "AccordionItem")) {
+                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);
@@ -56,8 +56,11 @@ function recursiveToggle(children, toggleArray = {}, i = 0, props) {
 
 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 newChildren = recursiveChildren(children, 0);
+    const [toggle, _setToggle] = react.useState(recursiveToggle(newChildren, {}, 0, { expanded }));
+    const setToggle = (prev) => {
+        _setToggle(prev);
+    };
     return (jsxRuntime.jsx(AccordionContext.Provider, { value: { toggle, setToggle }, children: jsxRuntime.jsx("div", { className: "accordion", children: newChildren }) }));
 }
 function useAccordion() {
@@ -68,80 +71,40 @@ function useAccordion() {
     return context;
 }
 
-function Accordion({ children, expanded = "all", defaultValue, selectValue, }) {
+function Accordion({ children, expanded = "all",
+// defaultValue,
+// selectValue,
+ }) {
     // const { dataTheme } = useTheme();
     return (jsxRuntime.jsx(AccordionProvider, { expanded: expanded, children: children }));
 }
 
-const AccordionItem = react.forwardRef(function AccordionItem({ children, label, isExpanded = false }, ref) {
+function AccordionItem({ children, label, isExpanded = false, }) {
     const { toggle, setToggle } = useAccordion();
     return (jsxRuntime.jsx("div", { className: "accordion-item", style: {
             paddingLeft: toggle && label && toggle[label].paddingLeft,
         }, children: react.Children.map(children, (child) => react.cloneElement(child, {
             toggle: toggle,
-            setToggle: setToggle,
-            ...(child?.type?.displayName !== "AccordionItem" && {
+            // setToggle: setToggle,
+            ...(child?.type?.name !== "AccordionItem" && {
                 label: label,
             }),
             isExpanded: isExpanded,
         })) }));
-});
+}
 
 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 ThemeContext = react.createContext(undefined);
-function ThemeProvider({ children }) {
-    const [dataTheme, setDataTheme] = react.useState();
-    const [paletteTheme, setPaletteTheme] = react.useState();
-    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 switchPaletteTheme = (mode) => {
-        document.documentElement.setAttribute("palette-theme", mode);
-        setPaletteTheme(mode);
-        localStorage.setItem("palette-theme", mode);
-    };
-    return (jsxRuntime.jsx(ThemeContext.Provider, { value: { dataTheme, switchDataTheme, paletteTheme, switchPaletteTheme }, children: children }));
-}
-function useTheme({ dataTheme = undefined, paletteTheme = "water", } = {}) {
-    const context = react.useContext(ThemeContext);
-    // only happens if there is an initial mode value.
-    react.useEffect(() => {
-        if (dataTheme && !localStorage.getItem("data-theme")) {
-            context?.switchDataTheme(dataTheme);
-        }
-        else if (!dataTheme && localStorage.getItem("data-theme")) {
-            localStorage.removeItem("data-theme");
-        }
-    }, []);
-    react.useEffect(() => {
-        context?.switchPaletteTheme(paletteTheme);
-    }, []);
-    if (context === undefined) {
-        throw new Error("useTheme must be used within a ThemeProvider");
-    }
-    return context;
-}
-
-const AccordionButton = react.forwardRef(function AccordionButton({ children, is = "link", label, toggle, setToggle, ...rest }, ref) {
-    const { dataTheme } = useTheme();
+// import { useTheme } from "../../context/themeContext";
+function AccordionButton({ children, is = "link", label, 
+// toggle,
+// setToggle = (prev: any) => void,
+...rest }) {
+    // const { dataTheme } = useTheme();
+    const { toggle, setToggle } = useAccordion();
     const handleToggle = () => {
         setToggle((prev) => {
             if (label) {
@@ -158,14 +121,18 @@ const AccordionButton = react.forwardRef(function AccordionButton({ children, is
             }
         });
     };
-    return (jsxRuntime.jsx(Button, { as: is, className: clsx("accordion-button", `accordion-button__${is}`, `accordion-button__${is}--${dataTheme}`), ...(is !== "link" && {
+    return (jsxRuntime.jsx(Button, { as: is, className: clsx("accordion-button", `accordion-button__${is}`
+        // `accordion-button__${is}--${dataTheme}`
+        ), ...(is !== "link" && {
             icon: label && toggle && toggle[label].isToggle ? (jsxRuntime.jsx(tfi.TfiAngleDown, {})) : (jsxRuntime.jsx(tfi.TfiAngleUp, {})),
         }), ...(is !== "link" && { onClick: handleToggle }), ...rest, children: children }));
-});
+}
 
-const AccordionContent = react.forwardRef(function AccordionContent({ children, label, toggle, }, ref) {
-    return label && toggle && toggle[label].isToggle && jsxRuntime.jsx("div", { className: "accordion-content", children: children });
-});
+const AccordionContent = function AccordionContent({ children, label, toggle, }) {
+    return (label &&
+        toggle &&
+        toggle[label].isToggle && (jsxRuntime.jsx("div", { className: "accordion-content", children: children })));
+};
 
 function Input({ className = "", classNameGroup = "", errorMessage = "", inputRef, styleGroup, ...rest }) {
     return (jsxRuntime.jsxs("div", { className: `input-group ${classNameGroup}`, style: styleGroup, children: [jsxRuntime.jsx("input", { ref: inputRef, className: `input ${errorMessage ? "input--error" : ""} ${className}`, ...rest }), errorMessage && jsxRuntime.jsx("span", { className: "error", children: errorMessage })] }));
@@ -198,6 +165,54 @@ function Loading({ img, children }) {
     return (jsxRuntime.jsxs("div", { className: "loading", children: [jsxRuntime.jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
 }
 
+const ThemeContext = react.createContext(undefined);
+function ThemeProvider({ children }) {
+    const [dataTheme, setDataTheme] = react.useState();
+    const [paletteTheme, setPaletteTheme] = react.useState();
+    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 switchPaletteTheme = (mode) => {
+        document.documentElement.setAttribute("palette-theme", mode);
+        setPaletteTheme(mode);
+        localStorage.setItem("palette-theme", mode);
+    };
+    return (jsxRuntime.jsx(ThemeContext.Provider, { value: { dataTheme, switchDataTheme, paletteTheme, switchPaletteTheme }, children: children }));
+}
+function useTheme({ dataTheme = undefined, paletteTheme = "water", } = {}) {
+    const context = react.useContext(ThemeContext);
+    // only happens if there is an initial mode value.
+    react.useEffect(() => {
+        if (dataTheme && !localStorage.getItem("data-theme")) {
+            context?.switchDataTheme(dataTheme);
+        }
+        else if (!dataTheme && localStorage.getItem("data-theme")) {
+            localStorage.removeItem("data-theme");
+        }
+    }, []);
+    react.useEffect(() => {
+        context?.switchPaletteTheme(paletteTheme);
+    }, []);
+    if (context === undefined) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+    return context;
+}
+
 const LoadingContext = react.createContext(undefined);
 function loadingReducer(state, action) {
     switch (action.type) {

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Children, isValidElement, cloneElement, createContext, useContext, useMemo, useState, forwardRef, useEffect, useRef, useReducer } from 'react';
+import { Children, isValidElement, cloneElement, createContext, useState, useContext, useRef, useEffect, useReducer } from 'react';
 import clsx from 'clsx';
 import { TfiAngleDown, TfiAngleUp } from 'react-icons/tfi';
 import { TbArrowsDiagonal2 } from 'react-icons/tb';
@@ -14,8 +14,8 @@ function recursiveChildren(children, i = 0) {
             return cloneElement(child, {
                 ...child.props,
                 children: recursiveChildren(child.props.children, i++),
-                ...(child?.type?.displayName === "AccordionItem" && {
-                    label: `${child?.type?.displayName}-${index}-${i}`,
+                ...(child?.type?.name === "AccordionItem" && {
+                    label: `${child?.type?.name}-${index}-${i}`,
                 }),
             });
         }
@@ -28,7 +28,7 @@ function recursiveToggle(children, toggleArray = {}, i = 0, props) {
     }
     for (const child of children) {
         if (isValidElement(child)) {
-            if (child?.type?.displayName === "AccordionItem" && child.props.label) {
+            if (child?.type?.name === "AccordionItem" && child.props.label) {
                 toggleArray[child.props.label] = {
                     isToggle: props.expanded === "all"
                         ? true
@@ -42,7 +42,7 @@ function recursiveToggle(children, toggleArray = {}, i = 0, props) {
                 };
             }
             if (typeof child.props.children !== "string" &&
-                child.props.children.find((v) => v?.type?.displayName === "AccordionItem")) {
+                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);
@@ -54,8 +54,11 @@ function recursiveToggle(children, toggleArray = {}, i = 0, props) {
 
 const AccordionContext = createContext(undefined);
 function AccordionProvider({ children, expanded = "all" }) {
-    const newChildren = useMemo(() => recursiveChildren(children, 0), []);
-    const [toggle, setToggle] = useState(recursiveToggle(newChildren, {}, 0, { expanded }));
+    const newChildren = recursiveChildren(children, 0);
+    const [toggle, _setToggle] = useState(recursiveToggle(newChildren, {}, 0, { expanded }));
+    const setToggle = (prev) => {
+        _setToggle(prev);
+    };
     return (jsx(AccordionContext.Provider, { value: { toggle, setToggle }, children: jsx("div", { className: "accordion", children: newChildren }) }));
 }
 function useAccordion() {
@@ -66,80 +69,40 @@ function useAccordion() {
     return context;
 }
 
-function Accordion({ children, expanded = "all", defaultValue, selectValue, }) {
+function Accordion({ children, expanded = "all",
+// defaultValue,
+// selectValue,
+ }) {
     // const { dataTheme } = useTheme();
     return (jsx(AccordionProvider, { expanded: expanded, children: children }));
 }
 
-const AccordionItem = forwardRef(function AccordionItem({ children, label, isExpanded = false }, ref) {
+function AccordionItem({ children, label, isExpanded = false, }) {
     const { toggle, setToggle } = useAccordion();
     return (jsx("div", { className: "accordion-item", style: {
             paddingLeft: toggle && label && toggle[label].paddingLeft,
         }, children: Children.map(children, (child) => cloneElement(child, {
             toggle: toggle,
-            setToggle: setToggle,
-            ...(child?.type?.displayName !== "AccordionItem" && {
+            // setToggle: setToggle,
+            ...(child?.type?.name !== "AccordionItem" && {
                 label: label,
             }),
             isExpanded: isExpanded,
         })) }));
-});
+}
 
 const Anchor = ({ Custom, children, ...rest }) => Custom ? jsx(Custom, { ...rest, children: children }) : 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" ? (jsxs(Anchor, { Custom: CustomAnchor, ...(isNewWindow && { target: "_blank" }), className: clsx(`button ${className}`, mode === "secondary" ? `button button__${mode}` : "button__link", `button__${size}`), ...rest, children: [children, icon] })) : (jsxs("button", { className: clsx("button", `button__${mode}`, `button__${size}`, className), ...rest, children: [children, icon] }));
 }
 
-const ThemeContext = createContext(undefined);
-function ThemeProvider({ children }) {
-    const [dataTheme, setDataTheme] = useState();
-    const [paletteTheme, setPaletteTheme] = useState();
-    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 switchPaletteTheme = (mode) => {
-        document.documentElement.setAttribute("palette-theme", mode);
-        setPaletteTheme(mode);
-        localStorage.setItem("palette-theme", mode);
-    };
-    return (jsx(ThemeContext.Provider, { value: { dataTheme, switchDataTheme, paletteTheme, switchPaletteTheme }, children: children }));
-}
-function useTheme({ dataTheme = undefined, paletteTheme = "water", } = {}) {
-    const context = useContext(ThemeContext);
-    // only happens if there is an initial mode value.
-    useEffect(() => {
-        if (dataTheme && !localStorage.getItem("data-theme")) {
-            context?.switchDataTheme(dataTheme);
-        }
-        else if (!dataTheme && localStorage.getItem("data-theme")) {
-            localStorage.removeItem("data-theme");
-        }
-    }, []);
-    useEffect(() => {
-        context?.switchPaletteTheme(paletteTheme);
-    }, []);
-    if (context === undefined) {
-        throw new Error("useTheme must be used within a ThemeProvider");
-    }
-    return context;
-}
-
-const AccordionButton = forwardRef(function AccordionButton({ children, is = "link", label, toggle, setToggle, ...rest }, ref) {
-    const { dataTheme } = useTheme();
+// import { useTheme } from "../../context/themeContext";
+function AccordionButton({ children, is = "link", label, 
+// toggle,
+// setToggle = (prev: any) => void,
+...rest }) {
+    // const { dataTheme } = useTheme();
+    const { toggle, setToggle } = useAccordion();
     const handleToggle = () => {
         setToggle((prev) => {
             if (label) {
@@ -156,14 +119,18 @@ const AccordionButton = forwardRef(function AccordionButton({ children, is = "li
             }
         });
     };
-    return (jsx(Button, { as: is, className: clsx("accordion-button", `accordion-button__${is}`, `accordion-button__${is}--${dataTheme}`), ...(is !== "link" && {
+    return (jsx(Button, { as: is, className: clsx("accordion-button", `accordion-button__${is}`
+        // `accordion-button__${is}--${dataTheme}`
+        ), ...(is !== "link" && {
             icon: label && toggle && toggle[label].isToggle ? (jsx(TfiAngleDown, {})) : (jsx(TfiAngleUp, {})),
         }), ...(is !== "link" && { onClick: handleToggle }), ...rest, children: children }));
-});
+}
 
-const AccordionContent = forwardRef(function AccordionContent({ children, label, toggle, }, ref) {
-    return label && toggle && toggle[label].isToggle && jsx("div", { className: "accordion-content", children: children });
-});
+const AccordionContent = function AccordionContent({ children, label, toggle, }) {
+    return (label &&
+        toggle &&
+        toggle[label].isToggle && (jsx("div", { className: "accordion-content", children: children })));
+};
 
 function Input({ className = "", classNameGroup = "", errorMessage = "", inputRef, styleGroup, ...rest }) {
     return (jsxs("div", { className: `input-group ${classNameGroup}`, style: styleGroup, children: [jsx("input", { ref: inputRef, className: `input ${errorMessage ? "input--error" : ""} ${className}`, ...rest }), errorMessage && jsx("span", { className: "error", children: errorMessage })] }));
@@ -196,6 +163,54 @@ function Loading({ img, children }) {
     return (jsxs("div", { className: "loading", children: [jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
 }
 
+const ThemeContext = createContext(undefined);
+function ThemeProvider({ children }) {
+    const [dataTheme, setDataTheme] = useState();
+    const [paletteTheme, setPaletteTheme] = useState();
+    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 switchPaletteTheme = (mode) => {
+        document.documentElement.setAttribute("palette-theme", mode);
+        setPaletteTheme(mode);
+        localStorage.setItem("palette-theme", mode);
+    };
+    return (jsx(ThemeContext.Provider, { value: { dataTheme, switchDataTheme, paletteTheme, switchPaletteTheme }, children: children }));
+}
+function useTheme({ dataTheme = undefined, paletteTheme = "water", } = {}) {
+    const context = useContext(ThemeContext);
+    // only happens if there is an initial mode value.
+    useEffect(() => {
+        if (dataTheme && !localStorage.getItem("data-theme")) {
+            context?.switchDataTheme(dataTheme);
+        }
+        else if (!dataTheme && localStorage.getItem("data-theme")) {
+            localStorage.removeItem("data-theme");
+        }
+    }, []);
+    useEffect(() => {
+        context?.switchPaletteTheme(paletteTheme);
+    }, []);
+    if (context === undefined) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+    return context;
+}
+
 const LoadingContext = createContext(undefined);
 function loadingReducer(state, action) {
     switch (action.type) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoinsight/react-components",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "This library is the main UI component library for geoinsight",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",