@cakemail-org/ui-components-v2 2.0.76 → 2.0.77

package/dist/cjs/components/dropMenu/MenuOption.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TDropMenuItem } from "./types";
-export declare function MenuOption({ preContent, text, postContent, desc, onClick, onMouseDown, divider, value, disabled, isAction, isMultiSelect, selected, isTitle, className, ...parentProps }: TDropMenuItem): React.JSX.Element;
+export declare function MenuOption({ preContent, text, postContent, desc, onClick, onMouseDown, divider, value, disabled, isAction, isMultiSelect, selected, isTitle, ...parentProps }: TDropMenuItem): React.JSX.Element;
 export default MenuOption;

package/dist/cjs/components/search/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import "./styles.scss";
 import { TSearch } from "./types";
-export declare function Search({ initValue, name, onChange, intervalTime, placeholder, onClose, className, useClickAway, onEnter }: TSearch): React.JSX.Element;
+export declare function Search({ initValue, name, onChange, intervalTime, placeholder, onClose, className, useClickAway, onEnter, useKeyDownForChange }: TSearch): React.JSX.Element;
 export default Search;

package/dist/cjs/components/search/types.d.ts

@@ -8,4 +8,5 @@ export type TSearch = {
     name?: string;
     placeholder?: string;
     intervalTime?: number;
+    useKeyDownForChange?: boolean;
 };

package/dist/cjs/index.js

@@ -7958,8 +7958,8 @@ function Checkbox(_a) {
 }
 
 function MenuOption(_a) {
-    var preContent = _a.preContent, text = _a.text, postContent = _a.postContent, desc = _a.desc, onClick = _a.onClick, onMouseDown = _a.onMouseDown, divider = _a.divider, value = _a.value, disabled = _a.disabled, isAction = _a.isAction, isMultiSelect = _a.isMultiSelect, selected = _a.selected, isTitle = _a.isTitle, className = _a.className, parentProps = __rest(_a, ["preContent", "text", "postContent", "desc", "onClick", "onMouseDown", "divider", "value", "disabled", "isAction", "isMultiSelect", "selected", "isTitle", "className"]);
-    var menuItemClasses = classNames("menuOption-component-v2", className, {
+    var preContent = _a.preContent, text = _a.text, postContent = _a.postContent, desc = _a.desc, onClick = _a.onClick, onMouseDown = _a.onMouseDown, divider = _a.divider, value = _a.value, disabled = _a.disabled, isAction = _a.isAction, isMultiSelect = _a.isMultiSelect, selected = _a.selected, isTitle = _a.isTitle, parentProps = __rest(_a, ["preContent", "text", "postContent", "desc", "onClick", "onMouseDown", "divider", "value", "disabled", "isAction", "isMultiSelect", "selected", "isTitle"]);
+    var menuItemClasses = classNames("menuOption-component-v2", {
         "showPreContent": !!preContent,
         "showDivider": divider,
         "disabled": disabled,
@@ -8276,9 +8276,9 @@ var css_248z$h = ".search-component-v2 {\n  width: 100%;\n}\n.search-component-v
 styleInject(css_248z$h);
 
 function Search(_a) {
-    var _b = _a.initValue, initValue = _b === void 0 ? "" : _b, name = _a.name, onChange = _a.onChange, _c = _a.intervalTime, intervalTime = _c === void 0 ? 800 : _c, placeholder = _a.placeholder, onClose = _a.onClose, _d = _a.className, className = _d === void 0 ? "" : _d, useClickAway = _a.useClickAway, onEnter = _a.onEnter;
+    var _b = _a.initValue, initValue = _b === void 0 ? "" : _b, name = _a.name, onChange = _a.onChange, _c = _a.intervalTime, intervalTime = _c === void 0 ? 800 : _c, placeholder = _a.placeholder, onClose = _a.onClose, _d = _a.className, className = _d === void 0 ? "" : _d, useClickAway = _a.useClickAway, onEnter = _a.onEnter, _e = _a.useKeyDownForChange, useKeyDownForChange = _e === void 0 ? false : _e;
     var timeoutRef = React.useRef(undefined);
-    var _e = React.useState(initValue), value = _e[0], setValue = _e[1];
+    var _f = React.useState(initValue), value = _f[0], setValue = _f[1];
     function handleKeyDown(event) {
         if (event.key === 'Escape') {
             setValue("");
@@ -8293,6 +8293,31 @@ function Search(_a) {
             }
             clearTimeout(timeoutRef.current);
         }
+        else if (useKeyDownForChange) {
+            // To Prevent Material UI Dropdown Auto-Selection by typing
+            handleOnKeyDownChange(event);
+        }
+    }
+    function handleOnKeyDownChange(event) {
+        var target = event.target;
+        target.name;
+        var currentValue = target.value;
+        if (event.key.length === 1) {
+            if (target.selectionStart !== target.selectionEnd) {
+                // Replace selected text with typed character
+                var start = target.selectionStart || 0;
+                var end = target.selectionEnd || 0;
+                currentValue = currentValue.substring(0, start) + event.key + currentValue.substring(end);
+            }
+            else {
+                // Single character keys (letters, numbers, symbols)
+                currentValue = currentValue + event.key;
+            }
+            event.stopPropagation();
+            event.preventDefault();
+            setValue(currentValue);
+            changeTimer(currentValue);
+        }
     }
     function handleOnChange(event) {
         var _a = event === null || event === void 0 ? void 0 : event.currentTarget; _a.name; var value = _a.value;
@@ -8410,7 +8435,7 @@ function Dropdown(_a) {
             }, SelectDisplayProps: {
                 color: color
             }, className: "".concat(selectClass, " ").concat(hasValue ? "filled" : "") }),
-            searchProps && React.createElement(Search, __assign({}, searchProps)), options === null || options === void 0 ? void 0 :
+            searchProps && React.createElement(Search, __assign({ useKeyDownForChange: true }, searchProps)), options === null || options === void 0 ? void 0 :
             options.map(function (args, index) {
                 return React.createElement(MenuOption, __assign({ key: "".concat(id, "-").concat(index), isMultiSelect: isMultiSelect, selected: isMultiSelect ? value === null || value === void 0 ? void 0 : value.includes(args.value || "") : undefined }, args));
             }),

package/dist/esm/components/dropMenu/MenuOption.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TDropMenuItem } from "./types";
-export declare function MenuOption({ preContent, text, postContent, desc, onClick, onMouseDown, divider, value, disabled, isAction, isMultiSelect, selected, isTitle, className, ...parentProps }: TDropMenuItem): React.JSX.Element;
+export declare function MenuOption({ preContent, text, postContent, desc, onClick, onMouseDown, divider, value, disabled, isAction, isMultiSelect, selected, isTitle, ...parentProps }: TDropMenuItem): React.JSX.Element;
 export default MenuOption;

package/dist/esm/components/search/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import "./styles.scss";
 import { TSearch } from "./types";
-export declare function Search({ initValue, name, onChange, intervalTime, placeholder, onClose, className, useClickAway, onEnter }: TSearch): React.JSX.Element;
+export declare function Search({ initValue, name, onChange, intervalTime, placeholder, onClose, className, useClickAway, onEnter, useKeyDownForChange }: TSearch): React.JSX.Element;
 export default Search;

package/dist/esm/components/search/types.d.ts

@@ -8,4 +8,5 @@ export type TSearch = {
     name?: string;
     placeholder?: string;
     intervalTime?: number;
+    useKeyDownForChange?: boolean;
 };

package/dist/esm/index.js

@@ -7938,8 +7938,8 @@ function Checkbox(_a) {
 }
 
 function MenuOption(_a) {
-    var preContent = _a.preContent, text = _a.text, postContent = _a.postContent, desc = _a.desc, onClick = _a.onClick, onMouseDown = _a.onMouseDown, divider = _a.divider, value = _a.value, disabled = _a.disabled, isAction = _a.isAction, isMultiSelect = _a.isMultiSelect, selected = _a.selected, isTitle = _a.isTitle, className = _a.className, parentProps = __rest(_a, ["preContent", "text", "postContent", "desc", "onClick", "onMouseDown", "divider", "value", "disabled", "isAction", "isMultiSelect", "selected", "isTitle", "className"]);
-    var menuItemClasses = classNames("menuOption-component-v2", className, {
+    var preContent = _a.preContent, text = _a.text, postContent = _a.postContent, desc = _a.desc, onClick = _a.onClick, onMouseDown = _a.onMouseDown, divider = _a.divider, value = _a.value, disabled = _a.disabled, isAction = _a.isAction, isMultiSelect = _a.isMultiSelect, selected = _a.selected, isTitle = _a.isTitle, parentProps = __rest(_a, ["preContent", "text", "postContent", "desc", "onClick", "onMouseDown", "divider", "value", "disabled", "isAction", "isMultiSelect", "selected", "isTitle"]);
+    var menuItemClasses = classNames("menuOption-component-v2", {
         "showPreContent": !!preContent,
         "showDivider": divider,
         "disabled": disabled,
@@ -8256,9 +8256,9 @@ var css_248z$h = ".search-component-v2 {\n  width: 100%;\n}\n.search-component-v
 styleInject(css_248z$h);
 
 function Search(_a) {
-    var _b = _a.initValue, initValue = _b === void 0 ? "" : _b, name = _a.name, onChange = _a.onChange, _c = _a.intervalTime, intervalTime = _c === void 0 ? 800 : _c, placeholder = _a.placeholder, onClose = _a.onClose, _d = _a.className, className = _d === void 0 ? "" : _d, useClickAway = _a.useClickAway, onEnter = _a.onEnter;
+    var _b = _a.initValue, initValue = _b === void 0 ? "" : _b, name = _a.name, onChange = _a.onChange, _c = _a.intervalTime, intervalTime = _c === void 0 ? 800 : _c, placeholder = _a.placeholder, onClose = _a.onClose, _d = _a.className, className = _d === void 0 ? "" : _d, useClickAway = _a.useClickAway, onEnter = _a.onEnter, _e = _a.useKeyDownForChange, useKeyDownForChange = _e === void 0 ? false : _e;
     var timeoutRef = useRef(undefined);
-    var _e = useState(initValue), value = _e[0], setValue = _e[1];
+    var _f = useState(initValue), value = _f[0], setValue = _f[1];
     function handleKeyDown(event) {
         if (event.key === 'Escape') {
             setValue("");
@@ -8273,6 +8273,31 @@ function Search(_a) {
             }
             clearTimeout(timeoutRef.current);
         }
+        else if (useKeyDownForChange) {
+            // To Prevent Material UI Dropdown Auto-Selection by typing
+            handleOnKeyDownChange(event);
+        }
+    }
+    function handleOnKeyDownChange(event) {
+        var target = event.target;
+        target.name;
+        var currentValue = target.value;
+        if (event.key.length === 1) {
+            if (target.selectionStart !== target.selectionEnd) {
+                // Replace selected text with typed character
+                var start = target.selectionStart || 0;
+                var end = target.selectionEnd || 0;
+                currentValue = currentValue.substring(0, start) + event.key + currentValue.substring(end);
+            }
+            else {
+                // Single character keys (letters, numbers, symbols)
+                currentValue = currentValue + event.key;
+            }
+            event.stopPropagation();
+            event.preventDefault();
+            setValue(currentValue);
+            changeTimer(currentValue);
+        }
     }
     function handleOnChange(event) {
         var _a = event === null || event === void 0 ? void 0 : event.currentTarget; _a.name; var value = _a.value;
@@ -8390,7 +8415,7 @@ function Dropdown(_a) {
             }, SelectDisplayProps: {
                 color: color
             }, className: "".concat(selectClass, " ").concat(hasValue ? "filled" : "") }),
-            searchProps && React__default.createElement(Search, __assign({}, searchProps)), options === null || options === void 0 ? void 0 :
+            searchProps && React__default.createElement(Search, __assign({ useKeyDownForChange: true }, searchProps)), options === null || options === void 0 ? void 0 :
             options.map(function (args, index) {
                 return React__default.createElement(MenuOption, __assign({ key: "".concat(id, "-").concat(index), isMultiSelect: isMultiSelect, selected: isMultiSelect ? value === null || value === void 0 ? void 0 : value.includes(args.value || "") : undefined }, args));
             }),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cakemail-org/ui-components-v2",
-    "version": "2.0.76",
+    "version": "2.0.77",
     "description": "ui library kit made with material UI",
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",