funda-ui 4.4.15 → 4.4.35

package/MultipleCheckboxes/index.js

@@ -833,10 +833,10 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
         }, _typeof(obj);
       }
-      /**
-       * Remove Duplicate objects from JSON Array
-       * @param {Array} obj 
-       * @param {String} fieldName 
+      /**
+       * Remove Duplicate objects from JSON Array
+       * @param {Array} obj 
+       * @param {String} fieldName 
        */
       function _removeArrDuplicateItems(obj, fieldName) {
         if (!Array.isArray(obj)) return [];
@@ -849,9 +849,9 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       }
       ;
 
-      /**
-       * Deep clone
-       * @param {*} obj 
+      /**
+       * Deep clone
+       * @param {*} obj 
        */
       function _deepClone(obj) {
         if (Array.isArray(obj)) {
@@ -871,10 +871,10 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         }
       }
 
-      /**
-       * Flat Data
-       * @param {*} data 
-       * @returns 
+      /**
+       * Flat Data
+       * @param {*} data 
+       * @returns 
        */
       function _flatData(data) {
         var result = [];

package/MultipleSelect/index.js

@@ -1186,10 +1186,10 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
         }, _typeof(obj);
       }
-      /**
-       * Remove Duplicate objects from JSON Array
-       * @param {Array} obj 
-       * @param {String} fieldName 
+      /**
+       * Remove Duplicate objects from JSON Array
+       * @param {Array} obj 
+       * @param {String} fieldName 
        */
       function _removeArrDuplicateItems(obj, fieldName) {
         if (!Array.isArray(obj)) return [];
@@ -1202,9 +1202,9 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       }
       ;
 
-      /**
-       * Deep clone
-       * @param {*} obj 
+      /**
+       * Deep clone
+       * @param {*} obj 
        */
       function _deepClone(obj) {
         if (Array.isArray(obj)) {
@@ -1224,10 +1224,10 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         }
       }
 
-      /**
-       * Flat Data
-       * @param {*} data 
-       * @returns 
+      /**
+       * Flat Data
+       * @param {*} data 
+       * @returns 
        */
       function _flatData(data) {
         var result = [];

package/NativeSelect/index.js

@@ -504,10 +504,10 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
         }, _typeof(obj);
       }
-      /**
-       * Remove Duplicate objects from JSON Array
-       * @param {Array} obj 
-       * @param {String} fieldName 
+      /**
+       * Remove Duplicate objects from JSON Array
+       * @param {Array} obj 
+       * @param {String} fieldName 
        */
       function _removeArrDuplicateItems(obj, fieldName) {
         if (!Array.isArray(obj)) return [];
@@ -520,9 +520,9 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       }
       ;
 
-      /**
-       * Deep clone
-       * @param {*} obj 
+      /**
+       * Deep clone
+       * @param {*} obj 
        */
       function _deepClone(obj) {
         if (Array.isArray(obj)) {
@@ -542,10 +542,10 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         }
       }
 
-      /**
-       * Flat Data
-       * @param {*} data 
-       * @returns 
+      /**
+       * Flat Data
+       * @param {*} data 
+       * @returns 
        */
       function _flatData(data) {
         var result = [];

package/Radio/index.js

@@ -504,10 +504,10 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
         }, _typeof(obj);
       }
-      /**
-       * Remove Duplicate objects from JSON Array
-       * @param {Array} obj 
-       * @param {String} fieldName 
+      /**
+       * Remove Duplicate objects from JSON Array
+       * @param {Array} obj 
+       * @param {String} fieldName 
        */
       function _removeArrDuplicateItems(obj, fieldName) {
         if (!Array.isArray(obj)) return [];
@@ -520,9 +520,9 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       }
       ;
 
-      /**
-       * Deep clone
-       * @param {*} obj 
+      /**
+       * Deep clone
+       * @param {*} obj 
        */
       function _deepClone(obj) {
         if (Array.isArray(obj)) {
@@ -542,10 +542,10 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         }
       }
 
-      /**
-       * Flat Data
-       * @param {*} data 
-       * @returns 
+      /**
+       * Flat Data
+       * @param {*} data 
+       * @returns 
        */
       function _flatData(data) {
         var result = [];

package/Select/index.js

@@ -1842,10 +1842,10 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
         }, _typeof(obj);
       }
-      /**
-       * Remove Duplicate objects from JSON Array
-       * @param {Array} obj 
-       * @param {String} fieldName 
+      /**
+       * Remove Duplicate objects from JSON Array
+       * @param {Array} obj 
+       * @param {String} fieldName 
        */
       function _removeArrDuplicateItems(obj, fieldName) {
         if (!Array.isArray(obj)) return [];
@@ -1858,9 +1858,9 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       }
       ;
 
-      /**
-       * Deep clone
-       * @param {*} obj 
+      /**
+       * Deep clone
+       * @param {*} obj 
        */
       function _deepClone(obj) {
         if (Array.isArray(obj)) {
@@ -1880,10 +1880,10 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         }
       }
 
-      /**
-       * Flat Data
-       * @param {*} data 
-       * @returns 
+      /**
+       * Flat Data
+       * @param {*} data 
+       * @returns 
        */
       function _flatData(data) {
         var result = [];

package/Table/index.css

@@ -17,6 +17,7 @@
 }
 .syntable__wrapper.table-responsive {
   overflow-x: auto;
+  overflow-y: hidden;
 }
 .syntable__wrapper.table-responsive::-webkit-scrollbar {
   height: var(--syntable-scrollbar-h);

package/Table/index.js

@@ -808,7 +808,7 @@ function useTableDraggable(_ref, deps) {
   var overObj = null;
   var placeholderGenerator = function placeholderGenerator(trHeight) {
     var tbodyRef = getTbody(spyElement);
-    if (tbodyRef === null) return;
+    if (tbodyRef === null || tbodyRef.querySelector('tr') === null) return;
 
     // Insert a row at the "index" of the table
     var newRow = document.createElement('tr');
@@ -827,7 +827,9 @@ function useTableDraggable(_ref, deps) {
   };
   var lastRowGenerator = function lastRowGenerator(trHeight) {
     var tbodyRef = getTbody(spyElement);
-    if (tbodyRef === null) return;
+    if (tbodyRef === null || tbodyRef.querySelector('tr') === null) return;
+    var cloneEl = tbodyRef.querySelector('.row-obj-clonelast');
+    if (cloneEl !== null) return;
 
     // Insert a row at the "index" of the table
     var newRow = document.createElement('tr');
@@ -871,7 +873,12 @@ function useTableDraggable(_ref, deps) {
     setSortData(listIndexes);
 
     //last placeholder
-    insertAfter(lastRowGenerator(_allRows.at(-1).clientHeight), _allRows.at(-1));
+    if (_allRows.length > 0) {
+      var lastEl = lastRowGenerator(_allRows.at(-1).clientHeight);
+      if (typeof _allRows.at(-1) !== 'undefined') {
+        insertAfter(lastEl, _allRows.at(-1));
+      }
+    }
   };
   var handleTbodyEnter = function handleTbodyEnter(e) {
     var _table = e.currentTarget.closest('table');
@@ -904,6 +911,8 @@ function useTableDraggable(_ref, deps) {
     }
   }, [sortData]);
   var handleDragStart = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useCallback)(function (e) {
+    var tbodyRef = getTbody(spyElement);
+    if (tbodyRef === null) return;
     draggedObj = e.currentTarget;
     e.dataTransfer.effectAllowed = 'move';
     e.dataTransfer.setData('text/html', draggedObj);
@@ -915,6 +924,13 @@ function useTableDraggable(_ref, deps) {
       callback.call(null, draggedObj, sortData, sortDataByIndex(sortData, data));
     };
     onRowDrag === null || onRowDrag === void 0 ? void 0 : onRowDrag(dragStart, null);
+
+    // init clone <tr>
+    // !!! It needs to be put at the end of the code to fix the location of the clone element
+    var cloneEl = tbodyRef.querySelector('.row-obj-clonelast');
+    if (cloneEl !== null) {
+      cloneEl.style.display = 'none';
+    }
   }, [handledragOver]);
   var handleDragEnd = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useCallback)(function (e) {
     var tbodyRef = getTbody(spyElement);
@@ -958,10 +974,11 @@ function useTableDraggable(_ref, deps) {
     // sort elements
     var categoryItemsArray = allRows(spyElement);
     var sorter = function sorter(a, b) {
-      return a.dataset.order.localeCompare(b.dataset.order); // sorts based on alphabetical order
+      var txt1 = Number(a.dataset.order),
+        txt2 = Number(b.dataset.order);
+      return txt2 < txt1 ? -1 : txt2 > txt1 ? 1 : 0;
     };
-
-    var sorted = categoryItemsArray.sort(sorter);
+    var sorted = categoryItemsArray.sort(sorter).reverse();
     sorted.forEach(function (e) {
       return spyElement.querySelector('table').querySelector('tbody').appendChild(e);
     });
@@ -971,10 +988,22 @@ function useTableDraggable(_ref, deps) {
       callback.call(null, draggedObj, newData, sortDataByIndex(newData, data));
     };
     onRowDrag === null || onRowDrag === void 0 ? void 0 : onRowDrag(null, dragEnd);
+
+    // init clone <tr>
+    // !!! It needs to be put at the end of the code to fix the location of the clone element
+    var _allRows = allRows(spyElement);
+    var cloneEl = tbodyRef.querySelector('.row-obj-clonelast');
+    if (cloneEl !== null) {
+      if (typeof _allRows.at(-1) !== 'undefined') {
+        insertAfter(cloneEl, _allRows.at(-1));
+        cloneEl.style.display = 'none';
+      }
+    }
   }, [sortData]);
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     if (enabled) {
-      if (Array.isArray(data)) {
+      if (Array.isArray(data) && data.length > 0) {
+        // !!! REQUIRED "data.length > 0" to avoid data-order cannot be assigned when asynchronous data is empty
         data.forEach(function (item, i) {
           item.order = i;
         });

package/TagInput/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export declare type TagInputProps = {
+    contentRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
     value?: string;
     maxTags?: number;

package/TagInput/index.js

@@ -828,7 +828,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var funda_utils_dist_cjs_convert__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(funda_utils_dist_cjs_convert__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(188);
 /* harmony import */ var funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_4__);
-var _excluded = ["wrapperClassName", "maxTags", "disabled", "required", "placeholder", "readOnly", "value", "requiredLabel", "label", "name", "id", "autoComplete", "autoCapitalize", "spellCheck", "extractValueByBrackets", "minLength", "maxLength", "style", "tabIndex", "onChange", "onBlur", "onFocus"];
+var _excluded = ["contentRef", "wrapperClassName", "maxTags", "disabled", "required", "placeholder", "readOnly", "value", "requiredLabel", "label", "name", "id", "autoComplete", "autoCapitalize", "spellCheck", "extractValueByBrackets", "minLength", "maxLength", "style", "tabIndex", "onChange", "onBlur", "onFocus"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -844,7 +844,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 var TagInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function (props, externalRef) {
-  var wrapperClassName = props.wrapperClassName,
+  var contentRef = props.contentRef,
+    wrapperClassName = props.wrapperClassName,
     maxTags = props.maxTags,
     disabled = props.disabled,
     required = props.required,
@@ -894,6 +895,23 @@ var TagInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     _useState10 = _slicedToArray(_useState9, 2),
     onComposition = _useState10[0],
     setOnComposition = _useState10[1];
+
+  // exposes the following methods
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useImperativeHandle)(contentRef, function () {
+    return {
+      control: function control() {
+        return valRef.current;
+      },
+      clear: function clear(cb) {
+        initDefaultValue('');
+        cb === null || cb === void 0 ? void 0 : cb();
+      },
+      set: function set(value, cb) {
+        initDefaultValue("".concat(value));
+        cb === null || cb === void 0 ? void 0 : cb();
+      }
+    };
+  }, [contentRef]);
   function initDefaultValue(defaultValue) {
     // change the value to trigger component rendering
     if (typeof defaultValue === 'undefined' || defaultValue === '') {

package/Tree/index.js

@@ -676,10 +676,10 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
         }, _typeof(obj);
       }
-      /**
-       * Remove Duplicate objects from JSON Array
-       * @param {Array} obj 
-       * @param {String} fieldName 
+      /**
+       * Remove Duplicate objects from JSON Array
+       * @param {Array} obj 
+       * @param {String} fieldName 
        */
       function _removeArrDuplicateItems(obj, fieldName) {
         if (!Array.isArray(obj)) return [];
@@ -692,9 +692,9 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       }
       ;
 
-      /**
-       * Deep clone
-       * @param {*} obj 
+      /**
+       * Deep clone
+       * @param {*} obj 
        */
       function _deepClone(obj) {
         if (Array.isArray(obj)) {
@@ -714,10 +714,10 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         }
       }
 
-      /**
-       * Flat Data
-       * @param {*} data 
-       * @returns 
+      /**
+       * Flat Data
+       * @param {*} data 
+       * @returns 
        */
       function _flatData(data) {
         var result = [];

package/Utils/object.js

@@ -51,10 +51,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "removeArrDuplicateItems": () => (/* binding */ removeArrDuplicateItems)
 /* harmony export */ });
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-/**
- * Remove Duplicate objects from JSON Array
- * @param {Array} obj 
- * @param {String} fieldName 
+/**
+ * Remove Duplicate objects from JSON Array
+ * @param {Array} obj 
+ * @param {String} fieldName 
  */
 function removeArrDuplicateItems(obj, fieldName) {
   if (!Array.isArray(obj)) return [];
@@ -67,9 +67,9 @@ function removeArrDuplicateItems(obj, fieldName) {
 }
 ;
 
-/**
- * Deep clone
- * @param {*} obj 
+/**
+ * Deep clone
+ * @param {*} obj 
  */
 function deepClone(obj) {
   if (Array.isArray(obj)) {
@@ -89,10 +89,10 @@ function deepClone(obj) {
   }
 }
 
-/**
- * Flat Data
- * @param {*} data 
- * @returns 
+/**
+ * Flat Data
+ * @param {*} data 
+ * @returns 
  */
 function flatData(data) {
   var result = [];

package/Utils/os.d.ts

@@ -0,0 +1,2 @@
+declare function getOs(): any;
+export default getOs;

package/Utils/os.js

@@ -0,0 +1,104 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define([], factory);
+	else if(typeof exports === 'object')
+		exports["RPB"] = factory();
+	else
+		root["RPB"] = factory();
+})(this, () => {
+return /******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	// The require scope
+/******/ 	var __webpack_require__ = {};
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/*
+ * Determine whether it is a special platform
+ *
+ * @private
+ */
+function getOs() {
+  if (typeof window === 'undefined') return {};
+  var os;
+  if (typeof window !== "undefined") {
+    var _getOs = function _getOs() {
+      var _navigator = window.navigator;
+      var platform = function platform() {
+        // 2022 way of detecting. Note : this userAgentData feature is available only in secure contexts (HTTPS)
+        if (typeof _navigator.userAgentData !== 'undefined' && _navigator.userAgentData != null) {
+          return _navigator.userAgentData.platform;
+        }
+        // Deprecated but still works for most of the browser
+        if (typeof _navigator.platform !== 'undefined') {
+          if (typeof _navigator.userAgent !== 'undefined' && /android/.test(_navigator.userAgent.toLowerCase())) {
+            // android device’s _navigator.platform is often set as 'linux', so const’s use userAgent for them
+            return 'android';
+          }
+          return _navigator.platform;
+        }
+        return 'unknown';
+      };
+      var _platform = platform().toLowerCase();
+      var isOSX = /mac/.test(_platform); // Mac desktop
+      var isIOS = ['iphone', 'ipad', 'ipod'].indexOf(_platform) === -1 ? false : true; // Mac iOs
+      var isApple = isOSX || isIOS; // Apple device (desktop or iOS)
+      var isWindows = /win/.test(_platform); // Windows
+      var isAndroid = /android/.test(_platform); // Android
+      var isLinux = /linux/.test(_platform); // Linux
+
+      return {
+        isOSX: isOSX,
+        isIOS: isIOS,
+        isApple: isApple,
+        isWindows: isWindows,
+        isAndroid: isAndroid,
+        isLinux: isLinux
+      };
+    };
+    os = _getOs();
+  } else {
+    os = {};
+  }
+  return os;
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (getOs);
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});

package/lib/cjs/EventCalendar/index.d.ts

@@ -53,6 +53,7 @@ export declare type EventCalendarProps = {
     onCellMouseEnter?: (el: any) => void;
     onCellMouseLeave?: (el: any) => void;
     onCellClick?: (el: any) => void;
+    onCellDoubleClick?: (el: any) => void;
     onCellMouseUp?: (el: any) => void;
     onKeyPressed?: (el: any) => void;
 };