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

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

@@ -20,6 +20,7 @@ export type TDropMenuItem = {
     isMultiSelect?: boolean;
     selected?: boolean;
     isTitle?: boolean;
+    className?: string;
 };
 export type TDropMenuItemClick = (event: MouseEventHandler<HTMLLIElement> | undefined) => void;
 export type TDropMenuItemMouseDown = (event: MouseEventHandler<HTMLLIElement> | undefined) => void;

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

@@ -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/types.d.ts

@@ -20,6 +20,7 @@ export type TDropMenuItem = {
     isMultiSelect?: boolean;
     selected?: boolean;
     isTitle?: boolean;
+    className?: string;
 };
 export type TDropMenuItemClick = (event: MouseEventHandler<HTMLLIElement> | undefined) => void;
 export type TDropMenuItemMouseDown = (event: MouseEventHandler<HTMLLIElement> | undefined) => void;

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

@@ -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.75",
+    "version": "2.0.77",
     "description": "ui library kit made with material UI",
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",