@xaypay/tui 0.0.30 → 0.0.32

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import styled from 'styled-components';
@@ -842,12 +842,26 @@ const Select = ({
   selected
 }) => {
   const options = jsonData.length ? JSON.parse(jsonData) : [];
+  const ref = useRef();
   let [opened, setOpened] = useState(false);
   let [newSelected, setNewSelected] = useState({});
   useEffect(() => {
     const parseSelectedData = selected.length !== 0 ? JSON.parse(selected) : {};
     setNewSelected(parseSelectedData);
   }, [selected]);
+  useEffect(() => {
+    if (opened) {
+      const checkIfClickedOutside = e => {
+        if (opened && ref.current && !ref.current.contains(e.target)) {
+          setOpened(false);
+        }
+      };
+      document.addEventListener("mousedown", checkIfClickedOutside);
+      return () => {
+        document.removeEventListener("mousedown", checkIfClickedOutside);
+      };
+    }
+  }, [opened]);
   classnames(styles$3[theme], styles$3[size], {
     [styles$3.disabled]: disabled,
     [styles$3.required]: required
@@ -855,7 +869,8 @@ const Select = ({
   return /*#__PURE__*/React.createElement("div", null, label ? /*#__PURE__*/React.createElement("label", {
     className: styles$3['select-title']
   }, label) : "", /*#__PURE__*/React.createElement("div", {
-    className: styles$3['select-wrap']
+    className: styles$3['select-wrap'],
+    ref: ref
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$3['select-content'],
     id: styles$3.selector
@@ -868,22 +883,19 @@ const Select = ({
     className: styles$3['select-content-top-text']
   }, newSelected && newSelected[keyNames.name] ? newSelected[keyNames.name] : defaultOption), /*#__PURE__*/React.createElement("div", {
     className: styles$3['select-content-top-icon']
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement("span", {
+    onClick: e => {
+      setNewSelected({});
+      onChange({});
+      e.stopPropagation();
+    }
+  }, "X"), /*#__PURE__*/React.createElement("i", {
     className: opened ? 'icon-arrow-up' : 'icon-arrow-down'
   }))), opened && !disabled ? /*#__PURE__*/React.createElement("div", {
     className: styles$3['select-content-bottom']
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$3['select-content-bottom-inner']
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$3['select-content-bottom-row'],
-    onClick: () => {
-      if (!required && !selected) {
-        setNewSelected(defaultOption);
-        onChange(defaultOption);
-        setOpened(!opened);
-      }
-    }
-  }, defaultOption), options.map((option, i) => {
+  }, options.map((option, i) => {
     return /*#__PURE__*/React.createElement("div", {
       key: i,
       className: styles$3['select-content-bottom-row'],
@@ -917,7 +929,7 @@ Select.defaultProps = {
   size: 'medium'
 };
 
-var css_248z$2 = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:space-between;padding:4px 0;position:relative;width:100%}.file-module_file-form__l13d5:hover .file-module_delete-upload-file__DirSm{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-file__DirSm{background:rgba(60,57,62,.4);height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;display:flex;height:26px;justify-content:center;position:absolute;right:10px;top:10px;width:26px;z-index:2}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn>img{display:block}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}";
+var css_248z$2 = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:space-between;padding:4px 0;position:relative;width:100%}.file-module_file-form__l13d5:hover .file-module_delete-upload-file__DirSm{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-file__DirSm{background:rgba(60,57,62,.4);height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;display:flex;height:26px;justify-content:center;position:absolute;right:10px;top:10px;width:26px;z-index:2}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn>img{display:block;max-width:400px}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}";
 var styles$2 = {"file-form":"file-module_file-form__l13d5","delete-upload-file":"file-module_delete-upload-file__DirSm","file-form-inner-upload":"file-module_file-form-inner-upload__tq3Dn","upload-info":"file-module_upload-info__a8GFs","upload-info-txt":"file-module_upload-info-txt__l11uN","default":"file-module_default__t7KU0","error":"file-module_error__H-M4Z","accept":"file-module_accept__WTW6V","delete-upload-icon":"file-module_delete-upload-icon__PWN66","upload-file-content":"file-module_upload-file-content__QHMjn","file-form-title":"file-module_file-form-title__zWTSB"};
 styleInject(css_248z$2);
 
@@ -1032,7 +1044,7 @@ File.propTypes = {
   defaultData: PropTypes.object
 };
 
-var css_248z$1 = ".modal-module_modal-wrap__IsXXf{background:rgba(0,0,0,.4);height:100%;left:0;position:fixed;top:0;width:100%;z-index:9}.modal-module_modal-top__ntDBi{box-shadow:0 1px 0 0 rgba(0,0,0,.08);box-sizing:border-box;display:flex;flex-direction:row;height:30px;padding-left:24px;width:100%}.modal-module_modal-title__r-WKl{align-items:center;color:#3c393e;display:flex;flex:1 1;font-size:20px;font-weight:500;justify-content:center;line-height:24px}.modal-module_close-btn__Qf2UD{cursor:pointer;flex:0 0 auto;width:24px}.modal-module_close-btn__Qf2UD,.modal-module_modal-section__Bp8jN{align-items:center;display:flex;height:100%;justify-content:center}.modal-module_modal-section__Bp8jN{flex:1 1;width:100%}.modal-module_modal-content__1F-uE{align-items:center;animation:modal-module_show-popup__WrH7a .24s;background:#fff;border-radius:8px;display:flex;flex-direction:column;height:auto;left:0;margin:auto;min-height:130px;padding:0 10px;position:absolute;right:0;top:110px;width:fit-content}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-30%,0)}to{opacity:1;transform:translateZ(0)}}";
+var css_248z$1 = ".modal-module_modal-wrap__IsXXf{background:rgba(0,0,0,.4);height:100%;left:0;position:fixed;top:0;width:100%;z-index:9}.modal-module_modal-top__ntDBi{box-shadow:0 1px 0 0 rgba(0,0,0,.08);box-sizing:border-box;display:flex;flex-direction:row;height:30px;padding-left:24px;width:100%}.modal-module_modal-title__r-WKl{align-items:center;color:#3c393e;display:flex;flex:1 1;font-size:20px;font-weight:500;justify-content:center;line-height:24px}.modal-module_close-btn__Qf2UD{cursor:pointer;flex:0 0 auto;width:24px}.modal-module_close-btn__Qf2UD,.modal-module_modal-section__Bp8jN{align-items:center;display:flex;height:100%;justify-content:center}.modal-module_modal-section__Bp8jN{flex:1 1;padding:10px 0;width:100%}.modal-module_modal-content__1F-uE{align-items:center;animation:modal-module_show-popup__WrH7a .24s;background:#fff;border-radius:8px;display:flex;flex-direction:column;height:auto;left:0;margin:auto;min-height:130px;padding:10px;position:absolute;right:0;top:110px;width:fit-content}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-30%,0)}to{opacity:1;transform:translateZ(0)}}";
 var styles$1 = {"modal-wrap":"modal-module_modal-wrap__IsXXf","modal-top":"modal-module_modal-top__ntDBi","modal-title":"modal-module_modal-title__r-WKl","close-btn":"modal-module_close-btn__Qf2UD","modal-section":"modal-module_modal-section__Bp8jN","modal-content":"modal-module_modal-content__1F-uE","show-popup":"modal-module_show-popup__WrH7a"};
 styleInject(css_248z$1);
 
@@ -1056,7 +1068,8 @@ const Modal = ({
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$1["modal-title"]
   }, /*#__PURE__*/React.createElement(Typography, {
-    variant: TypographyType.h5
+    variant: TypographyType.p,
+    color: "#00236A"
   }, headerText)), /*#__PURE__*/React.createElement("div", {
     className: styles$1["close-btn"],
     onClick: () => setShow(false)

package/dist/index.js

@@ -853,12 +853,26 @@ const Select = ({
   selected
 }) => {
   const options = jsonData.length ? JSON.parse(jsonData) : [];
+  const ref = React.useRef();
   let [opened, setOpened] = React.useState(false);
   let [newSelected, setNewSelected] = React.useState({});
   React.useEffect(() => {
     const parseSelectedData = selected.length !== 0 ? JSON.parse(selected) : {};
     setNewSelected(parseSelectedData);
   }, [selected]);
+  React.useEffect(() => {
+    if (opened) {
+      const checkIfClickedOutside = e => {
+        if (opened && ref.current && !ref.current.contains(e.target)) {
+          setOpened(false);
+        }
+      };
+      document.addEventListener("mousedown", checkIfClickedOutside);
+      return () => {
+        document.removeEventListener("mousedown", checkIfClickedOutside);
+      };
+    }
+  }, [opened]);
   classnames__default["default"](styles$3[theme], styles$3[size], {
     [styles$3.disabled]: disabled,
     [styles$3.required]: required
@@ -866,7 +880,8 @@ const Select = ({
   return /*#__PURE__*/React__default["default"].createElement("div", null, label ? /*#__PURE__*/React__default["default"].createElement("label", {
     className: styles$3['select-title']
   }, label) : "", /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$3['select-wrap']
+    className: styles$3['select-wrap'],
+    ref: ref
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$3['select-content'],
     id: styles$3.selector
@@ -879,22 +894,19 @@ const Select = ({
     className: styles$3['select-content-top-text']
   }, newSelected && newSelected[keyNames.name] ? newSelected[keyNames.name] : defaultOption), /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$3['select-content-top-icon']
-  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    onClick: e => {
+      setNewSelected({});
+      onChange({});
+      e.stopPropagation();
+    }
+  }, "X"), /*#__PURE__*/React__default["default"].createElement("i", {
     className: opened ? 'icon-arrow-up' : 'icon-arrow-down'
   }))), opened && !disabled ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$3['select-content-bottom']
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$3['select-content-bottom-inner']
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$3['select-content-bottom-row'],
-    onClick: () => {
-      if (!required && !selected) {
-        setNewSelected(defaultOption);
-        onChange(defaultOption);
-        setOpened(!opened);
-      }
-    }
-  }, defaultOption), options.map((option, i) => {
+  }, options.map((option, i) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: i,
       className: styles$3['select-content-bottom-row'],
@@ -928,7 +940,7 @@ Select.defaultProps = {
   size: 'medium'
 };
 
-var css_248z$2 = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:space-between;padding:4px 0;position:relative;width:100%}.file-module_file-form__l13d5:hover .file-module_delete-upload-file__DirSm{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-file__DirSm{background:rgba(60,57,62,.4);height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;display:flex;height:26px;justify-content:center;position:absolute;right:10px;top:10px;width:26px;z-index:2}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn>img{display:block}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}";
+var css_248z$2 = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:space-between;padding:4px 0;position:relative;width:100%}.file-module_file-form__l13d5:hover .file-module_delete-upload-file__DirSm{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-file__DirSm{background:rgba(60,57,62,.4);height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;display:flex;height:26px;justify-content:center;position:absolute;right:10px;top:10px;width:26px;z-index:2}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn>img{display:block;max-width:400px}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}";
 var styles$2 = {"file-form":"file-module_file-form__l13d5","delete-upload-file":"file-module_delete-upload-file__DirSm","file-form-inner-upload":"file-module_file-form-inner-upload__tq3Dn","upload-info":"file-module_upload-info__a8GFs","upload-info-txt":"file-module_upload-info-txt__l11uN","default":"file-module_default__t7KU0","error":"file-module_error__H-M4Z","accept":"file-module_accept__WTW6V","delete-upload-icon":"file-module_delete-upload-icon__PWN66","upload-file-content":"file-module_upload-file-content__QHMjn","file-form-title":"file-module_file-form-title__zWTSB"};
 styleInject(css_248z$2);
 
@@ -1043,7 +1055,7 @@ File.propTypes = {
   defaultData: PropTypes__default["default"].object
 };
 
-var css_248z$1 = ".modal-module_modal-wrap__IsXXf{background:rgba(0,0,0,.4);height:100%;left:0;position:fixed;top:0;width:100%;z-index:9}.modal-module_modal-top__ntDBi{box-shadow:0 1px 0 0 rgba(0,0,0,.08);box-sizing:border-box;display:flex;flex-direction:row;height:30px;padding-left:24px;width:100%}.modal-module_modal-title__r-WKl{align-items:center;color:#3c393e;display:flex;flex:1 1;font-size:20px;font-weight:500;justify-content:center;line-height:24px}.modal-module_close-btn__Qf2UD{cursor:pointer;flex:0 0 auto;width:24px}.modal-module_close-btn__Qf2UD,.modal-module_modal-section__Bp8jN{align-items:center;display:flex;height:100%;justify-content:center}.modal-module_modal-section__Bp8jN{flex:1 1;width:100%}.modal-module_modal-content__1F-uE{align-items:center;animation:modal-module_show-popup__WrH7a .24s;background:#fff;border-radius:8px;display:flex;flex-direction:column;height:auto;left:0;margin:auto;min-height:130px;padding:0 10px;position:absolute;right:0;top:110px;width:fit-content}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-30%,0)}to{opacity:1;transform:translateZ(0)}}";
+var css_248z$1 = ".modal-module_modal-wrap__IsXXf{background:rgba(0,0,0,.4);height:100%;left:0;position:fixed;top:0;width:100%;z-index:9}.modal-module_modal-top__ntDBi{box-shadow:0 1px 0 0 rgba(0,0,0,.08);box-sizing:border-box;display:flex;flex-direction:row;height:30px;padding-left:24px;width:100%}.modal-module_modal-title__r-WKl{align-items:center;color:#3c393e;display:flex;flex:1 1;font-size:20px;font-weight:500;justify-content:center;line-height:24px}.modal-module_close-btn__Qf2UD{cursor:pointer;flex:0 0 auto;width:24px}.modal-module_close-btn__Qf2UD,.modal-module_modal-section__Bp8jN{align-items:center;display:flex;height:100%;justify-content:center}.modal-module_modal-section__Bp8jN{flex:1 1;padding:10px 0;width:100%}.modal-module_modal-content__1F-uE{align-items:center;animation:modal-module_show-popup__WrH7a .24s;background:#fff;border-radius:8px;display:flex;flex-direction:column;height:auto;left:0;margin:auto;min-height:130px;padding:10px;position:absolute;right:0;top:110px;width:fit-content}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-30%,0)}to{opacity:1;transform:translateZ(0)}}";
 var styles$1 = {"modal-wrap":"modal-module_modal-wrap__IsXXf","modal-top":"modal-module_modal-top__ntDBi","modal-title":"modal-module_modal-title__r-WKl","close-btn":"modal-module_close-btn__Qf2UD","modal-section":"modal-module_modal-section__Bp8jN","modal-content":"modal-module_modal-content__1F-uE","show-popup":"modal-module_show-popup__WrH7a"};
 styleInject(css_248z$1);
 
@@ -1067,7 +1079,8 @@ const Modal = ({
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$1["modal-title"]
   }, /*#__PURE__*/React__default["default"].createElement(Typography, {
-    variant: TypographyType.h5
+    variant: TypographyType.p,
+    color: "#00236A"
   }, headerText)), /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$1["close-btn"],
     onClick: () => setShow(false)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/components/file/file.module.css

@@ -74,6 +74,7 @@
 }
 .upload-file-content > img {
     display: block;
+    max-width: 400px;
 }
 .file-form-title {
     margin-bottom: 10px;

package/src/components/modal/index.js

@@ -22,7 +22,7 @@ export const Modal = ({
                 <div className={styles["modal-content"]}>
                     <div className={styles["modal-top"]}>
                         <div className={styles["modal-title"]}>
-                            <Typography variant={TypographyType.h5}>{headerText}</Typography>
+                            <Typography variant={TypographyType.p} color="#00236A">{headerText}</Typography>
                         </div>
                         <div
                             className={styles["close-btn"]}

package/src/components/modal/modal.module.css

@@ -42,11 +42,12 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    padding: 10px 0;
 }
 .modal-content {
     position: absolute;
     width: fit-content;
-    padding: 0 10px;
+    padding: 10px;
     min-height: 130px;
     top: 110px;
     left: 0;

package/src/components/modal/modal.stories.js

@@ -37,7 +37,10 @@ const Template = ({ headerText, className }) => {
     <>
       <button onClick={handleClick}>Click</button>
       {show && (
-        <Modal type='images' selected={4} data={data} setShow={setShow} headerText={headerText} className={className} />
+        // <Modal type='images' selected={4} data={data} setShow={setShow} headerText={headerText} className={className} />
+        <Modal type='content' headerText="test">
+          <div>TEst</div>
+        </Modal>
       )}
     </>
   );

package/src/components/select/index.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useState, useRef} from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import styles from './select.module.css';
@@ -35,10 +35,10 @@ export const Select = ({
     keyNames,
     selected
 }) => {
-    const options = jsonData.length ? JSON.parse(jsonData) : [];
 
+    const options = jsonData.length ? JSON.parse(jsonData) : [];
+    const ref = useRef();
    
-    
     let [opened, setOpened] = useState(false)
     let [newSelected, setNewSelected] = useState({})
 
@@ -48,6 +48,20 @@ export const Select = ({
         setNewSelected(parseSelectedData);
     },[selected])
 
+    useEffect(() => {
+        if(opened){
+            const checkIfClickedOutside = e => {
+                if (opened && ref.current && !ref.current.contains(e.target)) {
+                    setOpened(false)
+                }
+            };
+            document.addEventListener("mousedown", checkIfClickedOutside)
+            return () => {
+                document.removeEventListener("mousedown", checkIfClickedOutside)
+            }
+        }
+    }, [opened]);
+
     const classProps = classnames(
         styles[theme],
         styles[size],
@@ -61,7 +75,7 @@ export const Select = ({
     return (
         <div>
             {label ? <label className={styles['select-title']}>{label}</label> : ""}
-            <div className={styles['select-wrap']}>
+            <div className={styles['select-wrap']} ref={ref}>
                 <div className={styles['select-content']} id={styles.selector}>
                     <div
                         className={styles['select-content-top']}
@@ -71,51 +85,55 @@ export const Select = ({
                     >
                         <div className={styles['select-content-top-text']}>{newSelected && newSelected[keyNames.name] ? newSelected[keyNames.name] : defaultOption}</div>
                         <div className={styles['select-content-top-icon']}>
-                            <Icon className={opened ? 'icon-arrow-up' : 'icon-arrow-down'}/>
+                            <span onClick={
+                                (e) => {
+                                    setNewSelected({})
+                                    onChange({});
+                                    e.stopPropagation()
+                                }
+                            }>X</span>
+                            <i className={opened ? 'icon-arrow-up' : 'icon-arrow-down'}/>
                         </div>
                     </div>
                     {
                         opened && !disabled ?
-
-                            <div className={styles['select-content-bottom']}>
-                                <div className={styles['select-content-bottom-inner']}>
-                                    <div
-                                        className={styles['select-content-bottom-row']}
-                                        onClick={() => {
-                                            if (!required && !selected) {
-                                                setNewSelected(defaultOption)
-                                                onChange(defaultOption)
-                                                setOpened(!opened)
-                                            }
-                                        }
-                                        }
-                                    >
-                                        {defaultOption}
-                                    </div>
-                                    {
-                                        options.map((option, i) => {
-                                            return <div
-                                            key={i}
+                                <div className={styles['select-content-bottom']}>
+                                    <div className={styles['select-content-bottom-inner']}>
+                                        {/* <div
                                             className={styles['select-content-bottom-row']}
-                                            disabled={true}
                                             onClick={() => {
-                                                setNewSelected(option);
-                                                onChange(option);
-                                                setOpened(!opened);
+                                                    if (!required && !selected) {
+                                                        setNewSelected(defaultOption)
+                                                        onChange(defaultOption)
+                                                        setOpened(!opened)
+                                                    }
+                                                }
                                             }
+                                        >
+                                            {defaultOption}
+                                        </div> */}
+                                        {
+                                            options.map((option, i) => {
+                                                return <div
+                                                            key={i}
+                                                            className={styles['select-content-bottom-row']}
+                                                            disabled={true}
+                                                            onClick={() => {
+                                                                    setNewSelected(option);
+                                                                    onChange(option);
+                                                                    setOpened(!opened);
+                                                                }
+                                                            }
+                                                            defaultValue={option[keyNames.id]}
+                                                        >
+                                                        {option[keyNames.name]}
+                                                </div>
+                                            })
                                         }
-                                            defaultValue={option[keyNames.id]}
-                                            >
-                                            {option[keyNames.name]}
-                                            </div>
-                                        })
-                                    }
+                                    </div>
                                 </div>
-
-                            </div>
                             : null
                     }
-
                 </div>
             </div>
             {eMessage ? <span className={styles.eMessage}>{eMessage}</span> : null}

package/src/components/select/select.stories.js

@@ -14,7 +14,7 @@ Default.args = {
     jsonData: '[{"bbb":"0", "value":"Արաբկիր"}, {"bbb":"1", "value":"Կենտրոն"}, {"bbb":"2", "value":"Մալաթիա"}]',
     onChange: (newValue)=> {
     },
-    defaultOption: 'ընտրել',
+    defaultOption: '',
     selected: '{"bbb":"2", "value":"Մալաթիա"}',
     keyNames: {name: 'value', id : 'bbb'}
 };

package/src/components/table/table.stories.js

@@ -32,5 +32,5 @@ Default.args = {
   jsonData: JSON.stringify([{id:1,name:'Item 1',name2:'Item 1'},{id:2, name:'Item 2',name2:'Item 2'}]),
   actions: [{icon: 'icon-1',show: show, click: action},{icon: 'icon-2'},{icon: 'icon-3'},{icon: 'icon-4'}],
   keyNames: ['name',{name: 'name2', icon: 'icon-temp'}],
-  hearderData: ['first Name', 'Last Name']
+  hearderData: ['first Name', 'Last Name','asdas',]
 };