@geoinsight/react-components 0.5.2 → 0.5.3

package/dist/cjs/index.css

@@ -152,7 +152,7 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 }
 
 .accordion-button__button--dark.button {
-  background-color: var(--color-neutral-200);
+  background-color: var(--color-neutral-400);
 }
 
 .accordion-button__button--light.button {
@@ -160,7 +160,7 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 }
 
 .accordion-button__link--dark.button {
-  background-color: var(--color-neutral-100) !important;
+  background-color: var(--color-neutral-200) !important;
 }
 
 .accordion-button__link--light.button {

package/dist/cjs/index.js

@@ -9,6 +9,14 @@ var reactHookForm = require('react-hook-form');
 var io5 = require('react-icons/io5');
 var tb = require('react-icons/tb');
 
+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)) {
@@ -19,7 +27,7 @@ function recursiveChildren(children, i = 0) {
                 ...child.props,
                 children: recursiveChildren(child.props.children, i++),
                 ...(child?.type?.name === "AccordionItem" && {
-                    label: `${child?.type?.name}-${index}-${i}`,
+                    label: uniqueId("id_") // `${(child?.type as any)?.name}-${index}-${i}`,
                 }),
             });
         }
@@ -58,7 +66,7 @@ function recursiveToggle(children, toggleArray = {}, i = 0, props) {
 
 const AccordionContext = react.createContext(undefined);
 function AccordionProvider({ children, expanded = "all" }) {
-    const newChildren = recursiveChildren(children, 0);
+    const newChildren = react.useMemo(() => recursiveChildren(children, 0), []);
     const [toggle, _setToggle] = react.useState(recursiveToggle(newChildren, {}, 0, { expanded }));
     const setToggle = (prev) => {
         _setToggle(prev);
@@ -84,7 +92,7 @@ function Accordion({ children, expanded = "all",
 function AccordionItem({ children, label, isExpanded = false, }) {
     const { toggle } = useAccordion();
     return (jsxRuntime.jsx("div", { className: "accordion-item", style: {
-            paddingLeft: toggle && label && toggle[label].paddingLeft,
+            paddingLeft: toggle && label && toggle[label]?.paddingLeft,
         }, children: react.Children.map(children, (child) => react.cloneElement(child, {
             toggle: toggle,
             // setToggle: setToggle,

package/dist/esm/index.css

@@ -152,7 +152,7 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 }
 
 .accordion-button__button--dark.button {
-  background-color: var(--color-neutral-200);
+  background-color: var(--color-neutral-400);
 }
 
 .accordion-button__button--light.button {
@@ -160,7 +160,7 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 }
 
 .accordion-button__link--dark.button {
-  background-color: var(--color-neutral-100) !important;
+  background-color: var(--color-neutral-200) !important;
 }
 
 .accordion-button__link--light.button {

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Children, isValidElement, cloneElement, createContext, useState, useContext, useEffect, useRef, useReducer } from 'react';
+import { Children, isValidElement, cloneElement, createContext, useMemo, useState, useContext, useEffect, useRef, useReducer } from 'react';
 import clsx from 'clsx';
 import { TfiAngleDown, TfiAngleUp } from 'react-icons/tfi';
 import { BsCheckCircleFill, BsXCircleFill } from 'react-icons/bs';
@@ -7,6 +7,14 @@ import { useForm, Controller } from 'react-hook-form';
 import { IoClose } from 'react-icons/io5';
 import { TbArrowsDiagonal2 } from 'react-icons/tb';
 
+let uniqueId = (function () {
+    let num = 0;
+    return function (prefix) {
+        prefix = String(prefix) || '';
+        num += 1;
+        return prefix + num;
+    };
+}());
 function recursiveChildren(children, i = 0) {
     return Children.map(children, (child, index) => {
         if (!isValidElement(child)) {
@@ -17,7 +25,7 @@ function recursiveChildren(children, i = 0) {
                 ...child.props,
                 children: recursiveChildren(child.props.children, i++),
                 ...(child?.type?.name === "AccordionItem" && {
-                    label: `${child?.type?.name}-${index}-${i}`,
+                    label: uniqueId("id_") // `${(child?.type as any)?.name}-${index}-${i}`,
                 }),
             });
         }
@@ -56,7 +64,7 @@ function recursiveToggle(children, toggleArray = {}, i = 0, props) {
 
 const AccordionContext = createContext(undefined);
 function AccordionProvider({ children, expanded = "all" }) {
-    const newChildren = recursiveChildren(children, 0);
+    const newChildren = useMemo(() => recursiveChildren(children, 0), []);
     const [toggle, _setToggle] = useState(recursiveToggle(newChildren, {}, 0, { expanded }));
     const setToggle = (prev) => {
         _setToggle(prev);
@@ -82,7 +90,7 @@ function Accordion({ children, expanded = "all",
 function AccordionItem({ children, label, isExpanded = false, }) {
     const { toggle } = useAccordion();
     return (jsx("div", { className: "accordion-item", style: {
-            paddingLeft: toggle && label && toggle[label].paddingLeft,
+            paddingLeft: toggle && label && toggle[label]?.paddingLeft,
         }, children: Children.map(children, (child) => cloneElement(child, {
             toggle: toggle,
             // setToggle: setToggle,

package/package.json

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