tenjin-ui-kit 0.2.183 → 0.2.185

package/components/select/SimpleSelect.js

@@ -89,6 +89,18 @@ var SimpleSelect = function SimpleSelect(_ref) {
     });
   }, [options, searchText, isSearch]);
   var recommendedOptions = isSearch ? displayedOptions : options;
+  var typingTimer;
+  var handleKeyDown = function handleKeyDown(e) {
+    clearTimeout(typingTimer);
+    if (e.key !== "Escape") {
+      if (e.key !== "ArrowDown" && e.key !== "ArrowUp") {
+        e.stopPropagation();
+      }
+      typingTimer = setTimeout(function () {
+        clearTimeout(typingTimer);
+      }, 500);
+    }
+  };
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_material.FormControl, {
     sx: {
       minWidth: 120
@@ -122,33 +134,32 @@ var SimpleSelect = function SimpleSelect(_ref) {
         }
       }
     }
-  }), isSearch && /*#__PURE__*/_react.default.createElement(_material.TextField, {
+  }), isSearch && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", {
     id: "search-box",
-    sx: {
+    type: "text",
+    autoFocus: true,
+    style: {
+      paddingLeft: "2.5rem",
+      background: 'url("https://static.thenounproject.com/png/101791-200.png") no-repeat left',
+      backgroundPosition: "0.875rem center",
+      backgroundSize: "1.125rem",
       position: "sticky",
       top: 0,
       zIndex: 9999,
-      backgroundColor: "white !important"
+      backgroundColor: "white",
+      height: "2.188rem",
+      margin: 0,
+      width: "100%",
+      border: "1px solid #949494",
+      borderRadius: "4px",
+      boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)"
     },
-    size: "small",
-    autoFocus: false,
     placeholder: "Type to search...",
-    fullWidth: true,
-    InputProps: {
-      startAdornment: /*#__PURE__*/_react.default.createElement(_material.InputAdornment, {
-        position: "start"
-      }, /*#__PURE__*/_react.default.createElement(_Search.default, null))
-    },
     onChange: function onChange(e) {
       return setSearchText(e.target.value);
     },
-    onKeyDown: function onKeyDown(e) {
-      if (e.key !== "Escape") {
-        // Prevents autoselecting item while typing (default Select behaviour)
-        e.stopPropagation();
-      }
-    }
-  }), isClearOption && !loading && /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+    onKeyDown: handleKeyDown
+  })), isClearOption && !loading && /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     value: ""
   }, /*#__PURE__*/_react.default.createElement("em", {
     style: {
@@ -171,66 +182,5 @@ var SimpleSelect = function SimpleSelect(_ref) {
     }, option.label);
   })), error && /*#__PURE__*/_react.default.createElement(_material.FormHelperText, null, errorMessage), helperText && /*#__PURE__*/_react.default.createElement(_material.FormHelperText, null, helperText)));
 };
-var _default = SimpleSelect; // const options = [
-//     { value: "option1", label: "Option 1" },
-//     { value: "option2", label: "Option 2" },
-//     // ... other options
-//   ];
-//  export const MyForm = () => {
-//     const validateForm = (values, mandatoryFields) => {
-//       let errors = {};
-//       if (mandatoryFields) {
-//         mandatoryFields.forEach((field) => {
-//           if (!values[field]) errors[field] = "Required";
-//         });
-//       }
-//       return errors;
-//     };
-//     const validate = (values) => {
-//       const errors = validateForm(values, ["text", "select"]);
-//       return errors;
-//     };
-//     const Submit = (values) => {
-//       console.log(values, "values");
-//     };
-//     return (
-//       <Form onSubmit={Submit} validate={validate}>
-//         {({ handleSubmit }) => (
-//           <form onSubmit={handleSubmit}>
-//             {/* Other form fields */}
-//             <Field
-//               name="text"
-//               render={({ input, meta }) => (
-//                 <Input
-//                   autoFocus="autofocus"
-//                   isRequired
-//                   {...input}
-//                   // isDisabled={props.type === 'edit' && true}
-//                   size="normal"
-//                   placeholder="Test Cycle Name"
-//                   fullWidth
-//                   label="Name"
-//                   error={meta.touched && meta.error ? true : false}
-//                   errorMessage={meta.touched && meta.error ? meta.error : null}
-//                 />
-//               )}
-//             />
-//             <Field
-//               name="select"
-//               render={({ input, meta }) => (
-//                 <MUISelectField
-//                   {...input}
-//                   // isDisabled={props.type === 'edit' && true}
-//                   options={options}
-//                   error={meta.touched && meta.error}
-//                   errorMessage={meta.touched && meta.error ? meta.error : null}
-//                 />
-//               )}
-//             />
-//             <button type="submit">Submit</button>
-//           </form>
-//         )}
-//       </Form>
-//     );
-//   };
+var _default = SimpleSelect;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tenjin-ui-kit",
-  "version": "0.2.183",
+  "version": "0.2.185",
   "repository": {
     "url": "https://gitlab.com/yethi/react/tenjin-ui-kit.git"
   },