@geoinsight/react-components 0.5.1 → 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,
@@ -209,8 +217,8 @@ function Form({ children, onSubmit, submitButton = {
 function Input({ className = "", classNameGroup = "", error = {
     is: false,
     message: "",
-}, inputRef, styleGroup, placeholder = "Insert value", isRequired, ...rest }) {
-    return (jsxRuntime.jsxs("div", { className: clsx("input-group", classNameGroup), style: styleGroup, children: [jsxRuntime.jsx("input", { ref: inputRef, className: clsx("input", error.is ? "input--error" : "", className), placeholder: placeholder, ...rest }), error && error.is && jsxRuntime.jsx("span", { className: "error", children: error.message })] }));
+}, inputRef, styleGroup, placeholder = "Insert value", isRequired, label, labelClass, ...rest }) {
+    return (jsxRuntime.jsxs("div", { className: clsx("input-group", classNameGroup), style: styleGroup, children: [label && jsxRuntime.jsx("label", { className: labelClass, children: label }), jsxRuntime.jsx("input", { ref: inputRef, className: clsx("input", error.is ? "input--error" : "", className), placeholder: placeholder, ...rest }), error && error.is && jsxRuntime.jsx("span", { className: "error", children: error.message })] }));
 }
 
 function Loading({ img, children }) {
@@ -221,7 +229,7 @@ function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = t
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "modal-overlay" }), jsxRuntime.jsxs("div", { ref: modalref, className: "modal", 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 TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "Insert value", showHeight = "10rem", style = {}, textareaClassName = "", ...rest }) {
+function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "Insert value", showHeight = "10rem", style = {}, textareaClassName = "", label, labelClass, ...rest }) {
     const ref = react.useRef();
     const [isShow, setIsShow] = react.useState(false);
     const handleClickToggle = () => {
@@ -235,7 +243,7 @@ function TextArea({ className = "", disabled = true, hasToggleButton = true, hid
             setIsShow((prev) => !prev);
         }
     };
-    return (jsxRuntime.jsxs("div", { className: clsx("textarea", className), style: style, children: [jsxRuntime.jsx("textarea", { ref: ref, className: clsx("textarea__input", textareaClassName), style: {
+    return (jsxRuntime.jsxs("div", { className: clsx("textarea", className), style: style, children: [label && jsxRuntime.jsx("label", { className: labelClass, children: label }), jsxRuntime.jsx("textarea", { ref: ref, className: clsx("textarea__input", 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"), onClick: handleClickToggle, disabled: disabled, children: jsxRuntime.jsx(tb.TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
 }

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,
@@ -207,8 +215,8 @@ function Form({ children, onSubmit, submitButton = {
 function Input({ className = "", classNameGroup = "", error = {
     is: false,
     message: "",
-}, inputRef, styleGroup, placeholder = "Insert value", isRequired, ...rest }) {
-    return (jsxs("div", { className: clsx("input-group", classNameGroup), style: styleGroup, children: [jsx("input", { ref: inputRef, className: clsx("input", error.is ? "input--error" : "", className), placeholder: placeholder, ...rest }), error && error.is && jsx("span", { className: "error", children: error.message })] }));
+}, inputRef, styleGroup, placeholder = "Insert value", isRequired, label, labelClass, ...rest }) {
+    return (jsxs("div", { className: clsx("input-group", classNameGroup), style: styleGroup, children: [label && jsx("label", { className: labelClass, children: label }), jsx("input", { ref: inputRef, className: clsx("input", error.is ? "input--error" : "", className), placeholder: placeholder, ...rest }), error && error.is && jsx("span", { className: "error", children: error.message })] }));
 }
 
 function Loading({ img, children }) {
@@ -219,7 +227,7 @@ function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = t
     return (jsxs(Fragment, { children: [jsx("div", { className: "modal-overlay" }), jsxs("div", { ref: modalref, className: "modal", children: [hasCloseButton && (jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsx(IoClose, {}) })), jsxs("div", { className: "modal__content", children: [title && (jsxs("div", { className: "modal__header", children: [jsx("h3", { children: title }), jsx("h6", { children: subtitle })] })), jsx("div", { className: "modal__children", children: children }), footer && jsx("div", { className: "modal__footer", children: footer })] })] })] }));
 }
 
-function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "Insert value", showHeight = "10rem", style = {}, textareaClassName = "", ...rest }) {
+function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "Insert value", showHeight = "10rem", style = {}, textareaClassName = "", label, labelClass, ...rest }) {
     const ref = useRef();
     const [isShow, setIsShow] = useState(false);
     const handleClickToggle = () => {
@@ -233,7 +241,7 @@ function TextArea({ className = "", disabled = true, hasToggleButton = true, hid
             setIsShow((prev) => !prev);
         }
     };
-    return (jsxs("div", { className: clsx("textarea", className), style: style, children: [jsx("textarea", { ref: ref, className: clsx("textarea__input", textareaClassName), style: {
+    return (jsxs("div", { className: clsx("textarea", className), style: style, children: [label && jsx("label", { className: labelClass, children: label }), jsx("textarea", { ref: ref, className: clsx("textarea__input", textareaClassName), style: {
                     height: hasToggleButton ? hideHeight : showHeight,
                 }, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsx("button", { type: "button", className: clsx("textarea__button", isShow && "textarea__button--show"), onClick: handleClickToggle, disabled: disabled, children: jsx(TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoinsight/react-components",
-  "version": "0.5.1",
+  "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",