@geoinsight/react-components 0.6.2 → 0.6.4

package/dist/cjs/index.css

@@ -474,6 +474,7 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 }
 
 .select__box {
+  background-color: var(--color-white);
   border-radius: var(--spacing-8);
   border: 2px solid var(--color-primary);
   box-sizing: border-box;
@@ -482,6 +483,7 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   position: absolute;
   top: 100%;
   width: 100%;
+  z-index: 2;
 }
 
 .select__option.button {
@@ -489,7 +491,6 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   border: none;
   border-radius: 0;
   width: 100%;
-  z-index: 999;
 }
 
 .select__option.button:last-child {

package/dist/cjs/index.js

@@ -237,11 +237,11 @@ 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 }) {
+function Select({ inputClassName = "", classNameGroup = "", options, styleGroup, defaultValue, inputProps, setFormSelected, onFormBlur, handleSelect, ...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 { name } = rest;
     const handleOpen = () => {
         setIsOpen(true);
     };
@@ -273,6 +273,9 @@ function Select({ inputClassName = "", classNameGroup = "", options, styleGroup,
         else {
             setValue(value);
         }
+        if (handleSelect) {
+            handleSelect(value);
+        }
         handleClose();
     };
     // for autocomplete
@@ -290,7 +293,7 @@ function Select({ inputClassName = "", classNameGroup = "", options, styleGroup,
     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}`))) }))] }));
+                }, 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}`))) }))] }));
 }
 
 function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "Insert value", showHeight = "10rem", style = {}, textareaClassName = "", label, labelClass, ...rest }) {

package/dist/esm/index.css

@@ -474,6 +474,7 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 }
 
 .select__box {
+  background-color: var(--color-white);
   border-radius: var(--spacing-8);
   border: 2px solid var(--color-primary);
   box-sizing: border-box;
@@ -482,6 +483,7 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   position: absolute;
   top: 100%;
   width: 100%;
+  z-index: 2;
 }
 
 .select__option.button {
@@ -489,7 +491,6 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   border: none;
   border-radius: 0;
   width: 100%;
-  z-index: 999;
 }
 
 .select__option.button:last-child {

package/dist/esm/index.js

@@ -235,11 +235,11 @@ 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 }) {
+function Select({ inputClassName = "", classNameGroup = "", options, styleGroup, defaultValue, inputProps, setFormSelected, onFormBlur, handleSelect, ...rest }) {
     const [isOpen, setIsOpen] = useState(false);
     const [value, setValue] = useState(defaultValue || (options && options[0]));
     const [filteredOptions, setFilteredOptions] = useState(options);
-    const { name, ...ofrest } = rest;
+    const { name } = rest;
     const handleOpen = () => {
         setIsOpen(true);
     };
@@ -271,6 +271,9 @@ function Select({ inputClassName = "", classNameGroup = "", options, styleGroup,
         else {
             setValue(value);
         }
+        if (handleSelect) {
+            handleSelect(value);
+        }
         handleClose();
     };
     // for autocomplete
@@ -288,7 +291,7 @@ function Select({ inputClassName = "", classNameGroup = "", options, styleGroup,
     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}`))) }))] }));
+                }, onFocus: handleOpen, onBlur: handleInputClose, onChange: handleValueChange, autoComplete: "off", ...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 }) {

package/package.json

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