@geoinsight/react-components 0.6.0 → 0.6.2

package/dist/cjs/index.css

@@ -315,6 +315,14 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   width: 100%;
 }
 
+.input-subgroup {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  position: relative;
+  width: 100%;
+}
+
 .input {
   box-sizing: border-box;
   background-color: var(--color-white);
@@ -424,6 +432,86 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 .modal__footer {
   padding-bottom: var(--spacing-16);
 }
+.select-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  position: relative;
+  width: 100%;
+}
+
+.select {
+  box-sizing: border-box;
+  background-color: var(--color-white);
+  border-radius: var(--spacing-8);
+  border: 2px solid var(--color-primary);
+  color: var(--color-black);
+  padding: var(--spacing-16) var(--spacing-24);
+  font-size: var(--font-size-16);
+  width: 100%;
+}
+
+/* .select:enabled:hover {
+  border: 3px solid var(--color-primary-700);
+}
+
+.select:focus {
+  border: 3px solid var(--color-primary-700);
+  outline: none;
+} */
+
+.select:disabled {
+  opacity: 0.5;
+}
+
+.select__arrow.input__icon {
+  padding: 0;
+}
+
+.select__arrow-button.button {
+  border-radius: 0 var(--spacing-8) var(--spacing-8) 0;
+  padding: 15px var(--spacing-24);
+}
+
+.select__box {
+  border-radius: var(--spacing-8);
+  border: 2px solid var(--color-primary);
+  box-sizing: border-box;
+  max-height: var(--size-m);
+  overflow: scroll;
+  position: absolute;
+  top: 100%;
+  width: 100%;
+}
+
+.select__option.button {
+  text-align: left;
+  border: none;
+  border-radius: 0;
+  width: 100%;
+  z-index: 999;
+}
+
+.select__option.button:last-child {
+  border-radius: 0 0 var(--spacing-8) var(--spacing-8);
+}
+.select__option.button:first-child {
+  border-radius: var(--spacing-8) var(--spacing-8) 0 0;
+}
+.select--error {
+  border: 3px solid var(--color-danger);
+}
+
+.select--error:focus {
+  border: 3px solid var(--color-danger);
+  outline: none;
+}
+
+.error {
+  font-size: 12px;
+  color: var(--color-danger);
+}
+
 .textarea {
   margin-bottom: var(--spacing-8);
   position: relative;
@@ -444,7 +532,9 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 }
 
 .textarea__input:enabled:hover {
-  border: 3px solid var(--color-primary-700);
+  box-shadow: 4px 6px 4px 0 var(--color-neutral-400);
+  transition: var(--transition-box-shadow-cubic-bezier);
+  
 }
 
 .textarea__input:disabled {

package/dist/cjs/index.js

@@ -190,7 +190,7 @@ const AccordionContent = function AccordionContent({ children, label, toggle, })
 function Form({ children, onSubmit, submitButton = {
     label: "Submit",
 }, ...rest }) {
-    const { handleSubmit, control, formState: { errors, isValid }, } = reactHookForm.useForm();
+    const { handleSubmit, setValue, control, formState: { errors, isValid }, } = reactHookForm.useForm();
     const [result, setResult] = react.useState({
         message: "",
         isSuccess: false,
@@ -203,7 +203,7 @@ function Form({ children, onSubmit, submitButton = {
                                 required: error?.message || "Field is required",
                             }
                             : {}),
-                    }, render: ({ field: { ...restField } }) => {
+                    }, render: ({ field: { onBlur, ...restField } }) => {
                         return react.cloneElement(child, {
                             error: {
                                 is: Object.keys(errors).length > 0 && !!errors[name],
@@ -211,8 +211,8 @@ function Form({ children, onSubmit, submitButton = {
                                     Object.keys(errors).length > 0 &&
                                     errors[name]?.message,
                             },
-                            // name: name,
-                            // value: value || rest.value,
+                            setFormSelected: setValue,
+                            onFormBlur: onBlur,
                             ...restField,
                             ...rest,
                         });
@@ -224,9 +224,9 @@ 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: [label && jsxRuntime.jsx("label", { className: labelClass, children: label }), 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", 
-                // `input__icon--${icon.position || "right"}`,
-                icon.className), children: icon.element })), error && error.is && (jsxRuntime.jsx("span", { className: "error", children: error.message }))] }));
+    return (jsxRuntime.jsxs("div", { className: clsx("input-group", classNameGroup), style: styleGroup, children: [label && jsxRuntime.jsx("label", { className: labelClass, children: label }), 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", 
+                        // `input__icon--${icon.position || "right"}`,
+                        icon.className), children: icon.element }))] }), error && error.is && (jsxRuntime.jsx("span", { className: "error", children: error.message }))] }));
 }
 
 function Loading({ img, children }) {
@@ -237,6 +237,62 @@ 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 Select({ inputClassName = "", classNameGroup = "", options, styleGroup, defaultValue, inputProps, setFormSelected, onFormBlur, ...rest }) {
+    const [isOpen, setIsOpen] = react.useState(false);
+    const [value, setValue] = react.useState(defaultValue || (options && options[0]));
+    const [filteredOptions, setFilteredOptions] = react.useState(options);
+    const { name, ...ofrest } = rest;
+    const handleOpen = () => {
+        setIsOpen(true);
+    };
+    const handleClose = () => {
+        setIsOpen(false);
+    };
+    const handleInputClose = () => {
+        if (onFormBlur) {
+            onFormBlur();
+        }
+        setIsOpen(false);
+    };
+    const handleToggle = () => {
+        setIsOpen((prev) => !prev);
+    };
+    const handleValueChange = (e) => {
+        const { value } = e.target;
+        console.log(value);
+        setValue(value);
+        // for autocomplete
+        // const { value } = e.target;
+        // setValue(value);
+    };
+    const handleSelectChange = (e) => {
+        const { name: value } = e.target;
+        if (setFormSelected) {
+            setFormSelected(name, value);
+        }
+        else {
+            setValue(value);
+        }
+        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: {
+                    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, ...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 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);
@@ -390,6 +446,7 @@ exports.LoadingProvider = LoadingProvider;
 exports.Modal = Modal;
 exports.ModalContext = ModalContext;
 exports.ModalProvider = ModalProvider;
+exports.Select = Select;
 exports.TextArea = TextArea;
 exports.ThemeContext = ThemeContext;
 exports.ThemeProvider = ThemeProvider;

package/dist/esm/index.css

@@ -315,6 +315,14 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   width: 100%;
 }
 
+.input-subgroup {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  position: relative;
+  width: 100%;
+}
+
 .input {
   box-sizing: border-box;
   background-color: var(--color-white);
@@ -424,6 +432,86 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 .modal__footer {
   padding-bottom: var(--spacing-16);
 }
+.select-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  position: relative;
+  width: 100%;
+}
+
+.select {
+  box-sizing: border-box;
+  background-color: var(--color-white);
+  border-radius: var(--spacing-8);
+  border: 2px solid var(--color-primary);
+  color: var(--color-black);
+  padding: var(--spacing-16) var(--spacing-24);
+  font-size: var(--font-size-16);
+  width: 100%;
+}
+
+/* .select:enabled:hover {
+  border: 3px solid var(--color-primary-700);
+}
+
+.select:focus {
+  border: 3px solid var(--color-primary-700);
+  outline: none;
+} */
+
+.select:disabled {
+  opacity: 0.5;
+}
+
+.select__arrow.input__icon {
+  padding: 0;
+}
+
+.select__arrow-button.button {
+  border-radius: 0 var(--spacing-8) var(--spacing-8) 0;
+  padding: 15px var(--spacing-24);
+}
+
+.select__box {
+  border-radius: var(--spacing-8);
+  border: 2px solid var(--color-primary);
+  box-sizing: border-box;
+  max-height: var(--size-m);
+  overflow: scroll;
+  position: absolute;
+  top: 100%;
+  width: 100%;
+}
+
+.select__option.button {
+  text-align: left;
+  border: none;
+  border-radius: 0;
+  width: 100%;
+  z-index: 999;
+}
+
+.select__option.button:last-child {
+  border-radius: 0 0 var(--spacing-8) var(--spacing-8);
+}
+.select__option.button:first-child {
+  border-radius: var(--spacing-8) var(--spacing-8) 0 0;
+}
+.select--error {
+  border: 3px solid var(--color-danger);
+}
+
+.select--error:focus {
+  border: 3px solid var(--color-danger);
+  outline: none;
+}
+
+.error {
+  font-size: 12px;
+  color: var(--color-danger);
+}
+
 .textarea {
   margin-bottom: var(--spacing-8);
   position: relative;
@@ -444,7 +532,9 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 }
 
 .textarea__input:enabled:hover {
-  border: 3px solid var(--color-primary-700);
+  box-shadow: 4px 6px 4px 0 var(--color-neutral-400);
+  transition: var(--transition-box-shadow-cubic-bezier);
+  
 }
 
 .textarea__input:disabled {

package/dist/esm/index.js

@@ -188,7 +188,7 @@ const AccordionContent = function AccordionContent({ children, label, toggle, })
 function Form({ children, onSubmit, submitButton = {
     label: "Submit",
 }, ...rest }) {
-    const { handleSubmit, control, formState: { errors, isValid }, } = useForm();
+    const { handleSubmit, setValue, control, formState: { errors, isValid }, } = useForm();
     const [result, setResult] = useState({
         message: "",
         isSuccess: false,
@@ -201,7 +201,7 @@ function Form({ children, onSubmit, submitButton = {
                                 required: error?.message || "Field is required",
                             }
                             : {}),
-                    }, render: ({ field: { ...restField } }) => {
+                    }, render: ({ field: { onBlur, ...restField } }) => {
                         return cloneElement(child, {
                             error: {
                                 is: Object.keys(errors).length > 0 && !!errors[name],
@@ -209,8 +209,8 @@ function Form({ children, onSubmit, submitButton = {
                                     Object.keys(errors).length > 0 &&
                                     errors[name]?.message,
                             },
-                            // name: name,
-                            // value: value || rest.value,
+                            setFormSelected: setValue,
+                            onFormBlur: onBlur,
                             ...restField,
                             ...rest,
                         });
@@ -222,9 +222,9 @@ function Input({ inputClassName = "", classNameGroup = "", error = {
     is: false,
     message: "",
 }, inputRef, styleGroup, placeholder = "Insert value", label, labelClass, icon, ...rest }) {
-    return (jsxs("div", { className: clsx("input-group", classNameGroup), style: styleGroup, children: [label && jsx("label", { className: labelClass, children: label }), icon?.element && icon.position === "left" && (jsx("div", { className: clsx("input__icon", "input__icon--left", icon.className), children: icon.element })), 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" && (jsx("div", { className: clsx("input__icon", "input__icon--right", 
-                // `input__icon--${icon.position || "right"}`,
-                icon.className), children: icon.element })), error && error.is && (jsx("span", { className: "error", children: error.message }))] }));
+    return (jsxs("div", { className: clsx("input-group", classNameGroup), style: styleGroup, children: [label && jsx("label", { className: labelClass, children: label }), jsxs("div", { className: "input-subgroup", children: [icon?.element && icon.position === "left" && (jsx("div", { className: clsx("input__icon", "input__icon--left", icon.className), children: icon.element })), 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" && (jsx("div", { className: clsx("input__icon", "input__icon--right", 
+                        // `input__icon--${icon.position || "right"}`,
+                        icon.className), children: icon.element }))] }), error && error.is && (jsx("span", { className: "error", children: error.message }))] }));
 }
 
 function Loading({ img, children }) {
@@ -235,6 +235,62 @@ 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 Select({ inputClassName = "", classNameGroup = "", options, styleGroup, defaultValue, inputProps, setFormSelected, onFormBlur, ...rest }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [value, setValue] = useState(defaultValue || (options && options[0]));
+    const [filteredOptions, setFilteredOptions] = useState(options);
+    const { name, ...ofrest } = rest;
+    const handleOpen = () => {
+        setIsOpen(true);
+    };
+    const handleClose = () => {
+        setIsOpen(false);
+    };
+    const handleInputClose = () => {
+        if (onFormBlur) {
+            onFormBlur();
+        }
+        setIsOpen(false);
+    };
+    const handleToggle = () => {
+        setIsOpen((prev) => !prev);
+    };
+    const handleValueChange = (e) => {
+        const { value } = e.target;
+        console.log(value);
+        setValue(value);
+        // for autocomplete
+        // const { value } = e.target;
+        // setValue(value);
+    };
+    const handleSelectChange = (e) => {
+        const { name: value } = e.target;
+        if (setFormSelected) {
+            setFormSelected(name, value);
+        }
+        else {
+            setValue(value);
+        }
+        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 (jsxs("div", { className: clsx("select-group", classNameGroup), style: styleGroup, children: [jsx(Input, { inputClassName: clsx("select", inputClassName), value: value, placeholder: "Select a value", icon: {
+                    className: "select__arrow",
+                    element: (jsx(Button, { type: "button", mode: "icon", className: "select__arrow-button", onClick: handleToggle, onBlur: handleClose, children: jsx(TfiAngleDown, { size: 24, color: "var(--color-black)" }) })),
+                }, onFocus: handleOpen, onBlur: handleInputClose, onChange: handleValueChange, ...rest }), isOpen && (jsx("div", { className: "select__box", children: filteredOptions.map((option, index) => (jsx(Button, { type: "button", mode: "secondary", className: "select__option", name: option, onMouseDown: handleSelectChange, children: option }, `index-${index}`))) }))] }));
+}
+
 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);
@@ -375,4 +431,4 @@ function useModal({} = {}) {
     return context;
 }
 
-export { Accordion, AccordionButton, AccordionContent, AccordionItem, Button, Form, Input, Loading, LoadingContext, LoadingProvider, Modal, ModalContext, ModalProvider, TextArea, ThemeContext, ThemeProvider, useLoading, useModal, useTheme };
+export { Accordion, AccordionButton, AccordionContent, AccordionItem, Button, Form, Input, Loading, LoadingContext, LoadingProvider, Modal, ModalContext, ModalProvider, Select, TextArea, ThemeContext, ThemeProvider, useLoading, useModal, useTheme };

package/package.json

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